:root {
    --ligne-calc-font-size: 24px;
    --ligne-text-font-size: calc(0.8 * var(--ligne-calc-font-size));
}

/* _____ AFFICHAGE DES TRANSPORTS _____ */

.colidfm div.liste_transports > div:not(:last-child) {
    margin-bottom: 20px;
}

.colidfm div.liste_transports > div {
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(calc(130.32px + calc(var(--gap) / 2)), 0.5fr) 1fr 200px;
    gap: var(--gap);
    border: 1px solid black;
    border-radius: var(--border_radius);
    background-color: #fafafa;
}
  
.colidfm .gauche, .colidfm .milieu, .colidfm .droite {
    height: 100%;
    display: grid;
    grid-template-rows: 28.8px calc(1.5 * var(--ligne-text-font-size));
    gap: var(--gap);
}

/* ----- Côté gauche ----- */

.colidfm p.mission {
    width: 100%;
    min-width: calc(130.32px + calc(var(--gap) / 2));
    padding: 7.2px;
    background-color: #2f4c99;
    color: var(--texte_fond_sombre);
    line-height: 1;
}

.colidfm div.liste_transports img.object {
    height: 100%;
    max-width: calc(1.5 * var(--ligne-text-font-size));
}

.colidfm div.liste_transports .pictos {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: calc(var(--gap) / 2);
}

/* --- Picto des lignes --- */

.colidfm div.liste_transports .ligne {
    min-height: calc(1 * var(--ligne-calc-font-size));
    min-width: calc(1 * var(--ligne-calc-font-size));
    padding: calc(0.1 * var(--ligne-calc-font-size));
    font-size: var(--ligne-text-font-size);
    text-overflow: ellipsis;
    text-wrap-mode: nowrap;
    overflow: hidden;
}

/* ___ BUS ___ */
.colidfm div.liste_transports .ligne.bus {
    max-height: calc(0.8* var(--ligne-calc-font-size));
    min-width: calc(2.4 * var(--ligne-calc-font-size));
    padding-left: calc(0.2 * var(--ligne-calc-font-size));
    padding-right: calc(0.2 * var(--ligne-calc-font-size));
    border-radius: calc(0.3 * var(--ligne-calc-font-size));
    font-size: calc(0.8* var(--ligne-text-font-size));
}

/* ___ RER, Transiliens et TER ___ */
.colidfm div.liste_transports .ligne.rer, .colidfm div.liste_transports .ligne.transilien, .colidfm div.liste_transports .ligne.ter {
    height: calc(1.5 * var(--ligne-text-font-size));
    min-width: calc(1.5 * var(--ligne-text-font-size));
    padding-left: calc(0.2 * var(--ligne-calc-font-size));
    padding-right: calc(0.2 * var(--ligne-calc-font-size));
    border-radius: calc(0.3 * var(--ligne-calc-font-size));
}

/* ___ Métro ___ */
.colidfm div.liste_transports .ligne.metro {
    height: calc(1.5 * var(--ligne-text-font-size));
    width: calc(1.5 * var(--ligne-text-font-size));
}

/* ___ TRAM ___ */
.colidfm div.liste_transports .ligne.tram {
    padding: 0;
}
.colidfm div.liste_transports .ligne.tram div {
    height: calc(0.2 * var(--ligne-calc-font-size));
    width: calc(1.5 * var(--ligne-text-font-size));
    border-radius: calc(0.3 * var(--ligne-calc-font-size));
}
.colidfm div.liste_transports .ligne.tram p {
    height: calc(0.8 * var(--ligne-calc-font-size));
    font-size: calc(0.6 * var(--ligne-calc-font-size));
    line-height: calc(1 * var(--ligne-text-font-size));
}

/* ----- Côté droit ----- */

.colidfm .milieu > p, .colidfm .droite > p {
    width: 100%;
    display: inline-flex;
    align-self: center;
    font-size: 18px;/*calc(var(--ligne-text-font-size) / 1.2);*/
    line-height: 1;
    overflow-wrap: anywhere;
}

.colidfm .tempsReel, .quai {
    height: calc(1.5 * var(--ligne-text-font-size));
    min-width: calc(1.5 * var(--ligne-text-font-size));
    width: fit-content;
    padding-left: calc(var(--ligne-text-font-size) / 6);
    padding-right: calc(var(--ligne-text-font-size) / 6);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.colidfm .tempsReel {
    background-color: black;
    color: orange;
}

.colidfm .tempsReel p {
    font-size: calc(var(--ligne-text-font-size) / 2);
    line-height: 1;
}

.colidfm .tempsReel p.temps {
    font-size: calc(0.8 * var(--ligne-text-font-size));
    font-weight: 600;
}

.colidfm .tempsReel p.temps span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit !important;
}

.colidfm .tempsReel p.temps span.clignote {
    animation: clignotement 1.5s cubic-bezier(0, 1, 0, 1) infinite;
}

@keyframes clignotement {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.colidfm .tempsReel p.temps span.clignote.texte_visible {
    animation: clignotementTexteVisible 1.5s cubic-bezier(0, 1, 0, 1) infinite;
}

@keyframes clignotementTexteVisible {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.colidfm .autresInfos {
    justify-content: flex-start;
    gap: calc(var(--gap) / 2);
}

.colidfm .quai {
    border: 2px solid #2f4c99;
    border-radius: var(--border_radius);
    color: #2f4c99;
}

.colidfm .quai p {
    font-size: calc(var(--ligne-text-font-size) / 2);
    line-height: 1;
}

.colidfm .quai p.numero {
    font-size: calc(0.8 * var(--ligne-text-font-size));
    font-weight: 500;
}

/* _____ Media Queries _____ */

@media screen and (max-width: 1120px) {
    .colidfm .gauche, .colidfm .milieu, .colidfm .droite {
        gap: calc(var(--gap) / 2);
    }
    .colidfm div.liste_transports > div {
        grid-template-columns: auto;
    }
    .colidfm div.liste_transports .ligne {
        max-width: 27ch;
    }
    .colidfm div.liste_transports .ligne.ter {
        font-size: calc(0.8 * var(--ligne-text-font-size));
        line-height: 1.6;
    }
    .colidfm .milieu, .colidfm .droite {
        row-gap: var(--gap);
        grid-template-rows: max-content;
    }
}

@media screen and (max-width: 560px) {
    .colidfm div.liste_transports .ligne {
        max-width: 15ch;
    }
    .colidfm .autresInfos p.minutes, .colidfm .autresInfos p.texte {
        font-size: calc(0.4* var(--ligne-text-font-size));
    }
}

@media screen and (max-width: 340px) {
    .colidfm div.liste_transports .ligne {
        max-width: 5ch;
    }
    .colidfm p.mission {
        min-width: unset;
    }
    .colidfm .autresInfos p.minutes, .colidfm .autresInfos p.texte {
        font-size: calc(0.4* var(--ligne-text-font-size));
    }
}