@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, les cinq vagues
   d'emboîtement, 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;
}

/* ==================================================================
   L'AFFICHE OFFICIELLE — bande parallax
   L'image est fixée au viewport (background-attachment: fixed), la bande
   est moins haute que l'image : en défilant, l'affiche glisse derrière la
   page. Sur tactile et sous iOS, « fixed » est ignoré ou saccade ; en
   mouvement réduit il est indésirable : dans les deux cas on montre
   l'affiche entière, immobile. La copie 700 px suffit aux petits écrans.
   ================================================================== */
.theme-verre .r44-affiche {
    position: relative; isolation: isolate;
    min-height: clamp(220px, 34vw, 520px);
    margin: 0 0 1rem;
    background: url('../images/ralliement-44-logo.png') center / 100vw auto no-repeat;
    background-attachment: fixed;
}
/* Un léger voile en haut et en bas pour que la bande se fonde dans la nuit. */
.theme-verre .r44-affiche::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(5,16,31,.55), transparent 22%, transparent 78%, rgba(5,16,31,.55));
}
@media (hover: none), (max-width: 767.98px), (prefers-reduced-motion: reduce) {
    .theme-verre .r44-affiche {
        background-attachment: scroll; background-size: contain;
        min-height: 0; aspect-ratio: 1944 / 809;
    }
    .theme-verre .r44-affiche::before { display: none; }
}
@media (max-width: 767.98px) {
    .theme-verre .r44-affiche { background-image: url('../images/ralliement-44-logo-700.png'); }
}

/* ==================================================================
   S'INSCRIRE — l'appel qui suit l'affiche
   ================================================================== */
.theme-verre .r44-inscription { padding-top: 0; }
.theme-verre .r44-inscription .verre-cta .verre-pastille { margin-bottom: 1rem; }
.theme-verre .r44-inscription .verre-cta p {
    max-width: 40rem; margin: .5rem auto 1.5rem; color: var(--txt-doux); line-height: 1.65;
}
.theme-verre .r44-actions .btn-or i,
.theme-verre .r44-inscription .btn-or i { margin-right: .45rem; }

/* ==================================================================
   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;
}

/* Le compteur de lectures, sous la légende : discret, centré, le nombre en
   gras. */
.theme-verre .r44-video-lectures {
    margin: .1rem .35rem 0; font-size: .85rem; line-height: 1.6;
    color: var(--txt-doux); text-align: center;
    display: flex; justify-content: center; align-items: center; gap: .45rem;
}
.theme-verre .r44-video-lectures i { font-size: .7rem; color: var(--or); }
.theme-verre .r44-video-lectures b { color: #F4F8FF; font-weight: 700; }

/* ==================================================================
   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; }
/* Le trajet principal et « qui emboîte qui », tirés du document officiel.
   Chaque ligne porte son intitulé en toutes lettres : la fiche se lit
   sans légende. */
.theme-verre .r44-depart .trajet,
.theme-verre .r44-depart .emboite {
    margin: .85rem 0 0; padding-top: .75rem;
    border-top: 1px solid var(--verre-bord);
    font-size: .86rem; line-height: 1.55; color: var(--txt);
}
.theme-verre .r44-depart .emboite { color: var(--txt-doux); }
.theme-verre .r44-depart .trajet .mot,
.theme-verre .r44-depart .emboite .mot {
    display: block; margin-bottom: .2rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--txt-doux);
}
.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); }

/* Le document officiel, téléchargeable là où l'on lit les heures. */
.theme-verre .r44-doc { margin: 1.25rem 0 0; }
.theme-verre .r44-doc .btn-fantome { font-size: .92rem; padding: .7rem 1.5rem; }

/* 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; }

/* ==================================================================
   QUI EMBOÎTE QUI — les cinq vagues du document officiel
   Même code couleur que les fiches (turquoise = nord, or = sud), et
   même règle : la couleur ne dit rien toute seule, l'ordre est écrit.
   ================================================================== */
.theme-verre .r44-vagues {
    list-style: none; padding: 0; max-width: 62rem; margin: 0 auto;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.theme-verre .r44-vague {
    position: relative; padding: 1.35rem 1.4rem 1.4rem;
    border-radius: 16px; overflow: hidden;
}
.theme-verre .r44-vague::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.theme-verre .r44-vague.sud::before { background: linear-gradient(to bottom, var(--or), transparent); }
.theme-verre .r44-vague.nord::before { background: linear-gradient(to bottom, var(--turquoise), transparent); }
.theme-verre .r44-vague h3 { margin: 0 0 .6rem; font-size: 1.08rem; font-weight: 700; color: #F4F8FF; }
.theme-verre .r44-vague .ordre {
    margin: 0 0 .75rem; font-weight: 700; line-height: 1.6; color: var(--txt);
}
.theme-verre .r44-vague.sud .ordre { color: var(--or); }
.theme-verre .r44-vague.nord .ordre { color: var(--turquoise); }
.theme-verre .r44-vague p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--txt-doux); }

/* ==================================================================
   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);
}

/* ==================================================================
   MODE CONTRASTE — ce que verre.css ne connaît pas
   ================================================================== */
.theme-verre body.high-contrast .r44-vague::before,
.theme-verre body.high-contrast .r44-depart::before { display: none !important; }
.theme-verre body.high-contrast .r44-vague .ordre,
.theme-verre body.high-contrast .r44-depart .branche { color: #ff0 !important; }