@charset "UTF-8";
/* =====================================================================
   RALLIEMENT 44 — page de l'événement du 26 septembre 2026.

   Cette feuille ne définit aucune palette : la page porte le thème
   « verre » (nuit) des trois accueils, et verre.css lui donne le fond,
   les cartes, les boutons, les couleurs et les états de focus. Ce qui
   reste ici, c'est ce que cette page est seule à avoir : le compte à
   rebours, le lecteur vidéo, les douze fiches de départ, la frise de
   la route et le bloc « à retenir ».

   LA COULEUR NE DIT JAMAIS RIEN TOUTE SEULE. Les deux branches se
   distinguent par une teinte, mais chaque fiche porte AUSSI le mot
   « Sud » ou « Nord/Ouest », et chaque heure est précédée du mot
   « Départ ». Une personne qui ne perçoit pas la différence de couleur
   lit exactement la même information.
   ===================================================================== */

/* ==================================================================
   EN-TÊTE
   ================================================================== */
.theme-verre .r44-hero {
    position: relative; text-align: center;
    /* La barre de navigation du master est fixe : même réserve que
       scroll-padding-top dans verre.css. */
    padding: 8rem 0 3rem;
}
.theme-verre .r44-hero .verre-pastille { margin-bottom: 1.5rem; }
.theme-verre .r44-hero .verre-titre { max-width: 20ch; }

.theme-verre .r44-slogan {
    font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 300;
    color: var(--txt-doux); max-width: 36rem; margin: 0 auto 2.25rem;
}

/* Le compte à rebours : la seule chose de la page qui change toute
   seule. Il est calculé par le serveur, jamais en JavaScript — écrit
   en JavaScript il serait vide à l'impression et pour qui bloque les
   scripts ; écrit en dur dans le balisage il mentirait dès le 27. */
.theme-verre .r44-compte {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: .4rem; padding: 1.35rem 2.5rem; margin: 0 auto 1.75rem;
}
.theme-verre .r44-compte .valeur {
    font-size: clamp(1.9rem, 5.5vw, 2.9rem); font-weight: 800; line-height: 1.1;
    color: var(--or); letter-spacing: -.02em;
}
.theme-verre .r44-compte .legende {
    font-size: .78rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--txt-doux);
}
.theme-verre .r44-compte.jour-j .valeur { color: var(--turquoise); }
.theme-verre .r44-compte.passe .valeur { font-size: clamp(1.25rem, 3.4vw, 1.7rem); color: var(--txt); }

.theme-verre .r44-actions {
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
    margin-top: 1.25rem;
}

/* ==================================================================
   LA VIDÉO PROMOTIONNELLE
   preload="none" : aucun octet du fichier n'est téléchargé avant que
   la personne clique. L'affiche est une vraie image du montage, pas un
   rectangle noir.
   ================================================================== */
.theme-verre .r44-video {
    max-width: 62rem; margin: 0 auto; padding: .75rem;
    overflow: hidden;
}
.theme-verre .r44-video video {
    display: block; width: 100%; max-width: 100%; height: auto;
    aspect-ratio: 16 / 9; border-radius: 12px; background: #04101F;
}
.theme-verre .r44-video-legende {
    margin: .85rem .35rem .2rem; font-size: .88rem; line-height: 1.6;
    color: var(--txt-doux); text-align: center;
}

/* ==================================================================
   LES DOUZE DÉPARTS
   Un tableau à quatre colonnes devenait illisible sur téléphone : des
   fiches se relisent de la même façon aux deux largeurs.
   ================================================================== */
.theme-verre .r44-branche + .r44-branche { margin-top: 3rem; }

.theme-verre .r44-branche-tete {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
    max-width: 62rem; margin: 0 auto 1.5rem; padding: 0 .25rem .9rem;
    border-bottom: 1px solid var(--verre-bord);
}
.theme-verre .r44-branche-tete h3 {
    margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--txt);
}
.theme-verre .r44-branche-tete .compte { font-size: .85rem; color: var(--txt-doux); }

.theme-verre .r44-departs {
    display: grid; gap: 1rem; max-width: 62rem; margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    list-style: none; padding: 0;
}

.theme-verre .r44-depart {
    position: relative; padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 16px; overflow: hidden;
}
/* Le filet de couleur de la branche. Décoratif : le mot est dans la fiche. */
.theme-verre .r44-depart::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.theme-verre .r44-depart.sud::before { background: linear-gradient(to bottom, var(--or), transparent); }
.theme-verre .r44-depart.nord::before { background: linear-gradient(to bottom, var(--turquoise), transparent); }

.theme-verre .r44-depart .heure {
    display: block; font-size: 1.55rem; font-weight: 800; line-height: 1;
    color: var(--txt); letter-spacing: -.01em;
}
.theme-verre .r44-depart .heure .mot {
    display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--txt-doux); margin-bottom: .35rem;
}
.theme-verre .r44-depart h4 {
    margin: .8rem 0 .35rem; font-size: 1.12rem; font-weight: 700; color: #F4F8FF;
}
.theme-verre .r44-depart .lieu { margin: 0; font-size: .95rem; color: var(--txt); line-height: 1.5; }
.theme-verre .r44-depart .adresse { margin: .15rem 0 0; font-size: .88rem; color: var(--txt-doux); line-height: 1.5; }
.theme-verre .r44-depart .branche {
    display: inline-block; margin-top: .9rem; padding: .25rem .7rem;
    border-radius: 50px; border: 1px solid var(--verre-bord);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--txt-doux);
}
.theme-verre .r44-depart.sud .branche { color: var(--or); }
.theme-verre .r44-depart.nord .branche { color: var(--turquoise); }

/* L'avertissement qui doit être lu avant de partir de chez soi. */
.theme-verre .r44-avis {
    position: relative; max-width: 62rem; margin: 2rem auto 0;
    padding: 1.2rem 1.5rem 1.2rem 1.9rem; line-height: 1.7;
    font-size: .95rem; color: #E4ECF7;
}
.theme-verre .r44-avis::before {
    content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem;
    width: 3px; border-radius: 3px;
    background: linear-gradient(to bottom, var(--or), transparent);
}
.theme-verre .r44-avis b { color: #F4F8FF; }

/* ==================================================================
   LA ROUTE — frise verticale
   ================================================================== */
.theme-verre .r44-frise {
    position: relative; list-style: none;
    max-width: 46rem; margin: 0 auto; padding: 2rem 2rem 2rem 1.75rem;
}
.theme-verre .r44-frise::before {
    content: ""; position: absolute; left: 2.4rem; top: 3rem; bottom: 3rem; width: 2px;
    background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,.06));
}
.theme-verre .r44-jalon { position: relative; padding: 0 0 2rem 3.25rem; }
.theme-verre .r44-jalon:last-child { padding-bottom: 0; }
.theme-verre .r44-jalon .puce {
    position: absolute; left: .4rem; top: .35rem;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: rgba(255,255,255,.10); border: 2px solid var(--verre-bord-actif);
}
.theme-verre .r44-jalon.reper .puce { background: var(--or); border-color: var(--or); }
.theme-verre .r44-jalon h3 { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 700; color: #F4F8FF; }
.theme-verre .r44-jalon .quand {
    display: block; margin-bottom: .5rem; font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--or);
}
.theme-verre .r44-jalon p { margin: 0 0 .6rem; color: var(--txt-doux); line-height: 1.7; }
.theme-verre .r44-jalon p:last-child { margin-bottom: 0; }

/* ==================================================================
   LES CONSIGNES
   ================================================================== */
.theme-verre .r44-regles {
    max-width: 52rem; margin: 0 auto; padding: 2rem 2.25rem;
    list-style: none;
}
.theme-verre .r44-regles li {
    position: relative; padding-left: 2rem; margin-bottom: .95rem;
    line-height: 1.7; color: var(--txt);
}
.theme-verre .r44-regles li:last-child { margin-bottom: 0; }
.theme-verre .r44-regles li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--turquoise);
}
/* Les interdits ne portent pas le même signe que les consignes : une
   coche verte devant « ne jamais attendre sur l'accotement » se lit à
   l'envers quand on parcourt la liste en diagonale. */
.theme-verre .r44-regles li.interdit::before { content: "\2715"; color: #FF9A9A; }

/* ==================================================================
   LES ÉTAPES POUR PARTICIPER
   ================================================================== */
.theme-verre .r44-etapes {
    counter-reset: etape; list-style: none;
    max-width: 52rem; margin: 0 auto; padding: 0;
}
.theme-verre .r44-etapes li {
    counter-increment: etape; position: relative;
    padding: 1.1rem 1.4rem 1.1rem 4rem; margin-bottom: .85rem;
    border-radius: 14px; line-height: 1.7; color: var(--txt);
}
.theme-verre .r44-etapes li::before {
    content: counter(etape, decimal-leading-zero);
    position: absolute; left: 1.4rem; top: 1.05rem;
    font-size: 1.15rem; font-weight: 800; color: var(--or);
}

/* ==================================================================
   À RETENIR
   ================================================================== */
.theme-verre .r44-resume {
    max-width: 52rem; margin: 0 auto; padding: 2rem 2.25rem;
    display: grid; grid-template-columns: max-content 1fr;
    gap: .85rem 1.5rem; align-items: baseline;
}
.theme-verre .r44-resume dt {
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--txt-doux); white-space: nowrap;
}
.theme-verre .r44-resume dd { margin: 0; color: var(--txt); line-height: 1.6; }
@media (max-width: 40rem) {
    .theme-verre .r44-resume { grid-template-columns: 1fr; gap: .15rem; }
    .theme-verre .r44-resume dd { margin-bottom: .9rem; }
}

.theme-verre .r44-devise {
    max-width: 44rem; margin: 2.5rem auto 0; text-align: center;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 300;
    font-style: italic; line-height: 1.7; color: #E9F1FB;
}

/* La note de mise à jour : ce qui date la page, en toutes lettres. */
.theme-verre .r44-note {
    max-width: 52rem; margin: 3rem auto 0; padding: 1.1rem 1.4rem 0;
    font-size: .88rem; line-height: 1.7; color: var(--txt-doux);
    border-top: 1px solid var(--verre-bord);
}