/*
 * Feuille de style unique, écrite à la main et servie telle quelle.
 *
 * Ni Node, ni Vite, ni framework CSS : le serveur de production n'a pas
 * d'étape de construction, conformément au choix « pas de Docker, pas
 * d'orchestrateur » de l'exploitation. Le seul poste susceptible de dégrader
 * les Core Web Vitals est la taille des courbes (spécification §6.6) — pas
 * celle d'une feuille de quelques kilo-octets.
 *
 * Aucune information n'est portée par la seule couleur (invariant
 * « Vigilance ») : les réserves et les absences sont d'abord des phrases.
 */

:root {
    --encre: #16202b;
    --encre-douce: #52606d;
    --fond: #fbfbf9;
    --fond-bloc: #ffffff;
    --trait: #dfe3e8;
    --accent: #1f5673;
    --reserve: #7a5a12;

    --mesure: 44rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0 1rem 3rem;
    background: var(--fond);
    color: var(--encre);
    font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a {
    color: var(--accent);
}

/* ---- Bandeau ---- */

.bandeau {
    max-width: var(--mesure);
    margin: 0 auto;
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--trait);
}

.bandeau__marque {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--encre);
    letter-spacing: 0.01em;
}

.bandeau__baseline {
    margin: 0.15rem 0 0;
    color: var(--encre-douce);
    font-size: 0.9rem;
}

/* ---- Corps ---- */

main {
    max-width: var(--mesure);
    margin: 0 auto;
}

.station__titre,
.accueil h1,
.erreur h1 {
    margin: 1.75rem 0 1.25rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

.bloc {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--fond-bloc);
    border: 1px solid var(--trait);
    border-radius: 6px;
}

.bloc__titre {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--encre-douce);
}

.bloc__titre + .bloc__titre,
.mesure + .bloc__titre {
    margin-top: 1.25rem;
}

/* ---- Mesure ---- */

.mesure {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.mesure__valeur {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mesure__instant {
    color: var(--encre-douce);
    font-size: 0.9rem;
}

/* ---- Fiche descriptive ---- */

.fiche {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
}

.fiche dt {
    color: var(--encre-douce);
    font-size: 0.9rem;
}

.fiche dd {
    margin: 0;
}

@media (max-width: 30rem) {
    .fiche {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .fiche dd {
        margin-bottom: 0.6rem;
    }
}

/* ---- Absences et réserves ---- */

.absence,
.rang {
    margin: 0;
}

.absence {
    color: var(--encre-douce);
}

.reserve {
    margin: 0.6rem 0 0;
    color: var(--reserve);
    font-size: 0.9rem;
}

/* ---- Pied ---- */

.pied {
    max-width: var(--mesure);
    margin: 2.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--trait);
    color: var(--encre-douce);
    font-size: 0.85rem;
}

.pied__titre {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.pied__sources {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied__sources li + li {
    margin-top: 0.25rem;
}

/* ---- Prévision ---- */

.prevision__emission,
.prevision__source,
.prevision__renvoi {
    margin: 0 0 0.75rem;
    color: var(--encre-douce);
    font-size: 0.9rem;
}

.prevision__source {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
}

/* Ligne de séparation entre journées, à l'intérieur du tableau. */
.prevision__jour th {
    padding-top: 0.9rem;
    color: var(--encre-douce);
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom: 1px solid var(--trait);
}

.prevision tbody:first-of-type .prevision__jour th {
    padding-top: 0.4rem;
}

.prevision {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.prevision th,
.prevision td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    text-align: left;
    border-bottom: 1px solid var(--trait);
    font-weight: 400;
}

.prevision thead th {
    color: var(--encre-douce);
    font-size: 0.8rem;
    font-weight: 700;
}

.prevision__valeur {
    font-weight: 700;
}

/*
 * L'estimation est moins fiable que la prévision. Elle est atténuée, mais sa
 * nature est **écrite** dans une colonne dédiée : la couleur n'est jamais le
 * seul porteur de l'information. `.prevision--vorhersage` n'a pas de règle —
 * c'est l'état par défaut ; la classe existe pour que les deux natures soient
 * nommées dans le HTML plutôt qu'une seule.
 */
.prevision--abschaetzung {
    color: var(--encre-douce);
}

.prevision--abschaetzung .prevision__valeur {
    font-weight: 400;
}

/* Le tableau ne doit jamais élargir la page sur mobile. */
.bloc {
    overflow-x: auto;
}

/* ---- Voisines amont / aval ---- */

.voisines {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0.75rem 0 0;
}

.voisines dt {
    color: var(--encre-douce);
    font-size: 0.9rem;
}

.voisines dd {
    margin: 0;
}

.voisines__distance {
    color: var(--encre-douce);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.voisines__distance::before {
    content: "— ";
}

@media (max-width: 30rem) {
    .voisines {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .voisines dd {
        margin-bottom: 0.6rem;
    }
}

/* ---- Liens légaux, présents sur chaque page ---- */

.pied__legal {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--trait);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}

/* ---- Pages de texte ---- */

.page-texte {
    max-width: 38rem;
}

.page-texte h1 {
    margin: 1.75rem 0 1.25rem;
    font-size: 1.5rem;
}

.page-texte h2 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.05rem;
}

.page-texte p,
.page-texte li {
    margin: 0 0 0.75rem;
}

.page-texte ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

/* ---- Tendance et incident ---- */

.mesure__tendance {
    font-size: 1.05rem;
    font-weight: 700;
}

.mesure__vitesse {
    color: var(--encre-douce);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.mesure__regime {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}

/*
 * L'incident se voit, mais sa nature est **écrite** : la couleur ne porte
 * jamais seule une information (invariant « Vigilance »).
 */
.incident {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--reserve);
    background: #fdf8ec;
    color: var(--encre);
    font-size: 0.9rem;
}