/* ===========================================================================
   LES VITRINES — en-tete, navigation, pied et fond des douze pages publiques
   hors classements
   ===========================================================================
   Lot 3 de « tout a l'image d'E-MOTION », 6 septembre 2026. Ces regles etaient
   recopiees dans le <style> de chaque page (et dans noyau/globe.css), a des
   valeurs qui avaient fini par diverger : logo ici, pas la ; retrait de 22 px
   ou de 26 px ; « E-Motion » en 20 px ou en 13. Elles vivent ici une fois.

   L'EN-TETE EST ECRIT DANS CHAQUE PAGE, pas reconstruit par un script — le
   principe du site est qu'une page reste entiere sans JavaScript. Cette feuille
   ne fait que l'habiller. tests/vitrines.test.mjs exige les douze en-tetes
   identiques.

   AUCUNE COULEUR DE MARQUE EN DUR : tout ce qui appartient a une marque passe
   par les jetons de marques/e-motion/emotion.css, pour que
   marques/alpine-race-lounge/alpine.css repeigne sans rien rouvrir ici. La
   feuille ecrit bien quelques valeurs litterales, et elles sont toutes du noir
   ou du blanc TRANSPARENT, neutre vis-a-vis du theme : l'ombre portee du logo
   et celle de #verifPanel (du noir, qui fonce ce qui est dessous), la trame de
   fond de body::before et le filet entre deux lignes de #verifPanel (du blanc
   a 1,5 % et a 7 %, qui l'eclaircit). Elles ne nomment aucune marque et aucun
   repeint n'a jamais eu a les reprendre. Alpine reconstruit son propre en-tete
   (noyau/theme-loader.js, buildHeader) : ses liens portent alors .lt-nav-link,
   que cette feuille ne connait pas, et ses propres regles s'appliquent.

   RELEVES DU 7 SEPTEMBRE 2026 (tools/mesurer-vitrines.mjs, PORT=8042, Chrome
   sans tete), vague de correction de la revue finale du lot comprise. Dix des douze
   pages avaient une adresse a mesurer ce jour-la (accueil, pilotes, fiche
   pilote, championnats, championnat, courses entre amis, chronos du jour, le
   groupe, verification, page introuvable) ; course entre amis et epreuve
   n'avaient rien a decouvrir (semaine creuse) — l'outil le signale et
   continue, comportement prevu. Meme chiffre sur neuf des dix pages (toutes
   sauf l'accueil, mesure a part ci-dessous), a chaque format, y compris les
   deux colonnes ajoutees au second tour :

     format          rangees d'en-tete   lignes de nav   debordement   debord entete   hors colonne
     1920 x 1080     1                   1               0              0               0
     1600 x 900      1                   1               0              0               0
     1280 x 960      1                   1               0              0               0
     390  x 844      2                   2               0              0               0

   L'ACCUEIL, LUI, SE MESURE DANS SON ETAT PUBLIC LE PLUS COURANT depuis le
   second tour : le badge de la file de verification revele (six liens dans
   la nav, pas cinq — #verifBtn et #verifCount forces avant la mesure, voir
   le champ avant de l'entree "accueil" dans tools/mesurer-vitrines.mjs, la
   file etant rarement vide en service). Depuis la vague de correction de la
   revue finale, ce n'est plus une intention mais une EXIGENCE de l'outil :
   le champ avant rend l'etat reellement obtenu, les ancres se comptent par
   leur rectangle visible, et une ligne "accueil" qui n'aurait pas ses six
   entrees est un KO. Meme chiffre que les neuf autres pages, a chaque
   format, une fois la composition reprise (voir plus bas) :

     format (accueil, six liens)      rangees d'en-tete   lignes de nav   debordement   debord entete   hors colonne
     1920 x 1080                      1                   1               0              0               0
     1600 x 900                       1                   1               0              0               0
     1280 x 960                       1                   1               0              0               0
     390  x 844                       2                   2               0              0               0

   Pied dans la largeur et logo presents partout ; aucune erreur console ni
   ressource en 404 hors la liste IGNORES de l'outil (/api/config,
   /api/verification/*, favicon.ico, et la 404 de sa propre page, statut 404
   exact sur cette adresse exacte, l'adresse etant desormais PARSEE et non
   rapprochee par un motif de fin de chaine). 50 lignes de mesure au total
   (11 pages mesurables x 4 formats -- l'epreuve s'est decouverte, la journee
   ayant des chronos ; 10 pages et 46 lignes une journee creuse -- plus les
   six passages Alpine ci-dessous) : 50 ok, sortie 0, correctif de cloture du
   7 septembre 2026 ; 43 lignes et trois passages Alpine avant lui.

   Sous ?theme=alpine, a 1280x960 ET a 390x844 depuis le correctif de cloture
   (le telephone n'y etait pas mesure avant lui), sur /, /emotion-drivers.html
   et /cette-adresse-n-existe-pas : un seul nav.lt-nav, aucun nav vide, cinq
   ancres visibles ou plus (SIX sur l'accueil, qui passe lui aussi son champ
   avant depuis la vague de correction de la revue finale), ET une seule
   rangee d'en-tete, sur les trois — accueil compris depuis le premier tour
   de correction. La rangee restait a
   2 sur accueil seul : son sous-titre Alpine ("Du sim racing au circuit
   reel") est bien plus long que ceux d'E-MOTION, et une fois que .brand
   .disc ne tronque plus (voir plus bas), la marque a elle seule approchait
   les 450px. Corrige dans marques/alpine-race-lounge/alpine.css :
   .lt-nav-link perd du remplissage et de l'espacement de lettres (12px
   gardes), .head-right et header.top lui-meme perdent du gap — les trois
   necessaires pour reloger la marque, la nav et le bloc de droite sur une
   ligne de 1140px. LA VAGUE DE CORRECTION DE LA REVUE FINALE lui demande
   enfin le cas a six liens, et il n'y tenait pas : la sixieme entree
   ajoutait 137px a une nav deja pleine et poussait .head-right sur une
   seconde rangee. Deux valeurs reprises dans alpine.css, aucune autre :
   header.top gap 16px -> 10px et .lt-nav-link remplissage 8px 10px ->
   8px 4px. La police reste a 12px, l'espacement de lettres a 0.08em (la
   respiration Alpine), aucune entree n'est masquee. Mesure apres reprise, a
   1280x960 : marque 411,59px + nav 659,14px + head-right 35px + deux gaps
   de 10px = 1125,73px dans les 1140px utiles de header.top (sa boite de
   contenu, retrait de 20px de chaque cote deduit) — 14,27px de marge.

   A 390x844, trois casses que le passage a 1280 ne pouvait pas voir, toutes
   reprises dans alpine.css (bloc 720px) par le correctif de cloture :
   l'en-tete debordait le document de 4px (margin: 0 -20px conserve alors que
   la gouttiere de .wrap passe a 16px ici) ; la nav etait un defileur
   horizontal (overflow-x: auto, flex-wrap: nowrap sous 760px) qui laissait
   19px d'entrees hors colonne sur cinq liens et 153px sur les six de
   l'accueil, sans indice qu'il en restait ; et .head-right restait affiche
   (sa regle Alpine, display: inline-flex, l'emporte sur le display: none
   commun d'ici), d'ou TROIS rangees sur l'accueil. Apres reprise : deux
   rangees, deux lignes de nav (la premiere finit a 329px sur 374 utiles),
   rien hors colonne, debord 0, sur les trois pages.

   CE QUI A BOUGE ICI DEPUIS LA VERSION DU BRIEF, ET POURQUOI -- chaque etape
   mesuree par tools/mesurer-vitrines.mjs, implementation initiale (tache 10,
   commit 8f51910), premier tour de correction (5e4b35d), second tour
   (8b77f26), puis la vague de correction de la revue finale du lot.
   Les six liens de la nav sont des mots entiers depuis la tache 5 (avant, des
   libelles plus courts) ; personne n'avait mesure depuis si, a cote d'un
   logo, ils tenaient vraiment sur une ligne au bureau — ils ne tenaient plus,
   et encore moins une fois l'accueil mesure avec son sixieme lien (voir
   plus haut).

     .nav-link       taille        12 -> 11px (initiale)
                      espacement    1.5 -> .5px (initiale)
                      remplissage   9px 14px -> 9px 6px (initiale) -> 9px 5px (second tour)
     .nav             gap           4px 6px -> 4px 2px (initiale)
     header.top       gap           18px 28px -> 18px 12px (initiale) -> 18px 8px (second tour)
                      align-items   center -> flex-start (initiale) -> center (second tour)
     .head-right      gap           18px -> 10px (initiale)
     .head-live       gap           8px -> 5px (initiale)
                      espacement    2.5px -> 1.5px (initiale)
     .brand img       hauteur       36px -> 32px (second tour) -> 30px (revue finale) -- bureau seulement
     .brand           gap           16px -> 10px (revue finale, bureau seulement)

   header.top REPASSE A align-items: center AU SECOND TOUR, et c'est mesure,
   pas un gout retrouve : rangees() dans tools/mesurer-vitrines.mjs compte
   desormais les rangees par CHEVAUCHEMENT vertical (des rectangles tries par
   sommet, regroupes en bandes), plus par ordonnee arrondie. Avec l'ancienne
   regle, centrer la marque, la nav et head-right (des hauteurs differentes)
   les faisait tomber sur des sommets distincts et comptait deux ou trois
   rangees pour une seule ligne visible -- flex-start etait le contournement.
   La nouvelle regle ne s'y trompe plus : centrer redevient possible, et
   c'est a nouveau un en-tete ordinaire.

   header.top passe de 12px A 8px DE GAP HORIZONTAL AU SECOND TOUR, au-dela
   des deux reprises nommees pour l'etat a six liens (le badge sous 1999px,
   ci-dessous, et .nav-link a 9px 5px) : meme apres ces deux-la, la marque
   (302,48px) plus la nav (786,52px) plus head-right reduit a son icone
   (35px) plus deux gaps de 12px depassaient encore le budget de 1140px.
   8px suffit -- mais a 1140px PILE, sans un pixel de marge.

   LA VAGUE DE CORRECTION DE LA REVUE FINALE RACHETE CETTE MARGE, et c'est
   tout ce qu'elle fait ici au bureau : .brand rend 6px de gap (16 -> 10) et
   son logo 2px de haut (32 -> 30, donc environ 12px de large, l'image
   gardant ses proportions). La marque passe de 302,48px a 278,80px. Mesure
   a 1280x960, accueil a six liens :

     marque 278,80  +  nav 778,63  +  head-right 35  +  deux gaps de 8px
     = 1108,43px dans 1140px  ->  31,57px de marge

   Rien d'autre n'a bouge au bureau : ni la police (11px), ni l'espacement
   de lettres, ni le remplissage des liens. La marge n'est pas prise sur la
   lisibilite, elle est prise sur le blanc autour du logo.

   NOUVEAU AU SECOND TOUR -- LA REGLE SOUS 1999px. Ce qu'elle FAIT, en un
   mot : sous 2000px de large, le badge .head-live et le libelle
   .diapo-btn-txt du lanceur de diaporama ne sont pas affiches -- donc a tout
   format que quiconque mesure ou regarde, les quatre du mesureur compris.
   Au-dela de 1999px seulement, ils reviennent, et avec eux la regle
   d'accessibilite de noyau/diaporama.css qui garde le libelle du lanceur
   lisible sous prefers-reduced-motion : c'est la SEULE raison du seuil, la
   place gagnee etant la meme avec ou sans lui. Voir le commentaire au-dessus
   de la regle (plus bas dans ce fichier).

   LA RUBRIQUE (.brand .disc) ne tronque plus jamais depuis le premier tour
   de correction (elle tronquait a 110px avant) ; elle enveloppe dans .ctx si
   la place manque (min-width: 0 sur .brand .ctx, ajoute au premier tour).
   Elle ne peut le faire AU TELEPHONE que depuis ce second tour, qui donne
   aussi a .brand lui-meme flex: 1 1 auto et min-width: 0 (nouveau, section
   Telephone) : min-width: 0 sur .ctx seul ne suffit pas, .brand garde
   flex: 0 0 auto au bureau et rien ne le force alors a ceder de la place.

   LE BOUTON ACTUALISER de la verification a quitte .head-right pour
   .vfilters au premier tour de correction — voir emotion-verification.html.

   LE BLOC « TELEPHONE » (sous 720px), VALEURS FINALES APRES LA VAGUE DE
   CORRECTION DE LA REVUE FINALE, pour que l'accueil a six liens tienne lui
   aussi en deux lignes de nav au plus (cinq liens y tenaient deja avant le
   second tour) :

     .wrap            retrait lateral        20px (base) -> 16px (revue finale, nouveau)
     header.top       gap                    12px 16px -> 12px 12px (initiale, inchange)
     .brand           flex                   0 0 auto -> 1 1 auto (nouveau, second tour)
                      min-width              (aucun) -> 0 (nouveau, second tour)
     .brand img       hauteur                36px -> 28px (initiale, inchange)
     .nav             gap                    4px 3px (initiale) -> 4px 0 (second tour) -> 4px 2px (revue finale)
     .nav-link        remplissage            8px 4px (initiale) -> 8px 1px (second tour) -> 8px 2px (revue finale)
                      espacement              .2px (initiale) -> -.2px (second tour, inchange)
                      gap texte/badge        8px de base -> 3px (second tour) -> 2px (revue finale)
     .nav-verif .vcnt largeur mini/hauteur   19px (base) -> 16px (second tour) -> 14px (revue finale)
                      remplissage             0 6px (base) -> 0 2px (second tour) -> 0 1px (revue finale)
     .head-right      affichage              cache entierement (initiale, remplace un order: 2 qui le
                                              redescendait sans le cacher ; inchange depuis)

   LA NAV Y REDEVIENT RESPIRABLE (gap 2px entre les liens, 2px de remplissage
   lateral chacun, au lieu de 0 et 1px) : c'est le meme rachat de marge qu'au
   bureau, et il coute 10px de plus a une seconde ligne qui n'en avait pas.
   Ces 10px viennent de la gouttiere de .wrap, 20px -> 16px : l'en-tete, le
   contenu et le pied bougent du meme pas, rien ne se desaligne, et 16px
   reste une gouttiere de telephone ordinaire. Mesure a 390x844, accueil a
   six liens :

     ligne 1  En direct + Les pilotes + Les championnats        315,59px
     ligne 2  Courses entre amis + Le groupe + Verification 12  355,13px
     largeur utile de la nav                                    358px

   La seconde ligne tient a 2,87px pres : c'est la ligne la plus serree de
   tout le fichier, celle qu'il faut remesurer des qu'un libelle change.

   CE QUI A ETE ESSAYE ET REFUSE, pour ne pas y revenir : donner a .nav un
   margin-inline de -2px (le remplissage lateral d'un lien) pour aligner le
   TEXTE du premier lien sur le logo et rendre 4px au passage. Il alignait
   bien, mais la nav sortait alors de 2px de la colonne de header.top des dix
   pages au telephone -- et le mesureur compte desormais ce debord d'en-tete
   comme un KO. La gouttiere fait le meme travail sans faire deborder
   personne.

   LE 15 SEPTEMBRE 2026, UN SEPTIEME LIEN : « B2B », la liste des sessions
   clientes publiees (emotion-sessions-b2b.html). Mesure a 1280x960 avant
   toute reprise, accueil a sept liens : marque 278,80 + nav 820,80 +
   head-right 35 + deux gaps de 8px = 1150,59px, 10,59px de trop -- l'accueil
   passait sur deux rangees aux trois formats de bureau. Deux valeurs
   reprises, et rien d'autre :

     .nav-link       remplissage       9px 5px -> 9px 4px (14px rendus sur sept liens)
                      gap texte/badge   8px -> 5px (3px, « Verification » seule)

   Apres reprise : nav 803,80px, 1133,59px dans 1140px -> 6,41px de marge.
   Au telephone, rien n'a bouge : « B2B » se place APRES « Les championnats »,
   seule ligne qui avait la place -- ligne 1 En direct + Les pilotes + Les
   championnats + B2B = 349,67px, ligne 2 inchangee a 355,13px, sur 358px.
   Apres « Courses entre amis », elle serait tombee sur la ligne 2 : 355,13 +
   2 + 32,08 = 389,21px, une troisieme ligne.

   LE PLANCHER RESTE 11px DE POLICE, PARTOUT, ET AUCUNE ENTREE DE NAV N'A ETE
   MASQUEE : les sept liens de l'accueil sont tous visibles a tout format
   mesure, y compris « Verification » quand la file n'est pas vide.
   =========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1200px 700px at 80% -12%, rgba(var(--brand-rgb), .10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(var(--brand-rgb), .05), transparent 55%),
    var(--bg);
  color: var(--txt); font-family: var(--f-body); letter-spacing: .2px; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 9px); opacity: .6;
}
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }

/* --- L'en-tete ---------------------------------------------------------------
   Trois blocs : la marque (logo cliquable, E-MOTION, la rubrique), la
   navigation, et .head-right pour ce qui est propre a la page. */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 8px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; color: inherit; }
.brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
.brand .sep { width: 1px; height: 42px; background: linear-gradient(var(--line-strong), transparent); }
.brand .ctx { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; min-width: 0; }
.brand .venue { font-family: var(--f-primary); font-size: 13px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; font-weight: 700; }
.brand .disc { font-size: 12px; letter-spacing: 2px; color: var(--txt-mute); text-transform: uppercase; }

/* La navigation est position: relative parce que l'apercu de la file de
   verification (#verifPanel, cree par le script de l'accueil sur le parent de
   son bouton) s'ancre sur elle. */
.nav { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; flex: 1 1 auto; justify-content: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--f-tech); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt-dim); text-decoration: none; padding: 9px 4px; border-radius: 24px;
  border: 1px solid transparent; transition: color .18s, border-color .18s, background .18s;
}
.nav-link:hover { color: var(--txt); border-color: var(--line-strong); background: rgba(var(--brand-rgb), .10); }
.nav-link[aria-current] { color: var(--gold-soft); background: var(--gold-dim); border-color: var(--line-strong); }
.nav-link[hidden] { display: none; }
.nav-verif .vcnt {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 10px; background: var(--gold); color: var(--on-brand); font-size: 11px; font-weight: 800;
}
.nav-verif .vcnt[hidden] { display: none; }

.head-right { position: relative; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.head-right:empty { display: none; }
.head-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt-dim); }
.head-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(var(--ok-rgb), .7); animation: lt-pulse 1.8s infinite; }
@keyframes lt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), .55); }
  70% { box-shadow: 0 0 0 10px rgba(var(--ok-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .head-live .dot { animation: none; } }

/* CE QUE FAIT CETTE REGLE : sous 2000px de large, le badge decoratif
   « En direct » (.head-live) et le libelle du lanceur de diaporama
   (.diapo-btn-txt) ne sont pas affiches. Sous 2000px, c'est-a-dire a tout
   format que le mesureur mesure et que quelqu'un regarde. .head-right y
   tombe de 132,75px a 35px, sa seule icone -- c'est la premiere des trois
   reprises qui font tenir l'accueil a six liens (verification comprise,
   l'etat public le plus courant) sur une seule ligne de nav. Rien n'est
   perdu que la redondance : la pastille de nav « En direct » porte deja ce
   mot, et le lanceur garde son icone.

   POURQUOI UN SEUIL, ALORS, PLUTOT QU'UN display: none SEC. Parce que la
   place gagnee serait la meme -- .wrap plafonne l'en-tete a 1140px utiles
   des 1180px de viewport, il n'y a jamais plus de place a 1920 qu'a 1280 --
   mais une regle d'accessibilite y passerait : sous prefers-reduced-motion,
   noyau/diaporama.css pose .diapo-btn .diapo-btn-txt { max-width: 160px } en
   permanence, pour que le libelle du lanceur reste lisible sans survol quand
   les animations sont reduites. Un display: none sans seuil l'annulerait a
   toute largeur. Au-dessus de 1999px, la regle d'ici s'eteint et celle de
   diaporama.css survit -- c'est la seule chose que le seuil protege, dans un
   territoire qu'aucun des quatre formats mesures ne couvre.

   (Une premiere version posait le seuil a 1399px : .head-right y gardait sa
   largeur pleine a 1600 et a 1920, ou l'accueil a six liens retombait alors
   a deux rangees. Mesure, pas devine.) */
@media (max-width: 1999px) {
  .head-live, .diapo-btn .diapo-btn-txt { display: none; }
}

/* L'apercu de la file de verification, sur l'accueil (script de index.html). */
#verifPanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(94vw, 380px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid rgba(var(--brand-rgb), .35); border-radius: 12px;
  padding: 12px; box-shadow: 0 30px 80px -30px #000; display: none;
}
#verifPanel.on { display: block; }
#verifPanel .it { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 13px; }
#verifPanel .it:last-of-type { border-bottom: 0; }
#verifPanel .it b { color: var(--txt-strong); font-weight: 600; }
#verifPanel .it span { color: var(--txt-dim); font-family: var(--f-tech), monospace; font-size: 12px; }
#verifPanel .all {
  display: block; text-align: center; margin-top: 10px; padding: 9px; border-radius: 20px;
  background: var(--gold); color: var(--on-brand); text-decoration: none; font-family: var(--f-tech), monospace;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
}

/* --- Le titre de page --------------------------------------------------------- */
.hero { margin: 26px 0 6px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tech); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.hero h1 { font-family: var(--f-primary); font-weight: 800; font-size: clamp(28px, 5.5vw, 50px); line-height: 1; margin: 6px 0 0; text-transform: uppercase; letter-spacing: 1px; }
.hero h1 .hi { color: var(--gold); }
/* Descendant, pas enfant direct : le selecteur couvre un paragraphe encadre,
   quel que soit l'element qui l'enveloppe, et a quelque profondeur qu'il vive
   sous .hero. */
.hero p, .hero .chapo { color: var(--txt-dim); margin: 12px 0 0; font-size: 15px; max-width: 70ch; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; color: var(--txt-dim); font-size: 13px; }
.hero .meta b { color: var(--txt); font-weight: 600; }
.hero .chapo a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.status { color: var(--txt-mute); font-size: 14px; padding: 20px 2px; }
.status.err { color: var(--warn); }

/* Un mot qui ne doit jamais se couper. « E-MOTION » est le cas : son trait
   d'union est un point de coupure legitime pour le navigateur, qui laisserait
   « E- » en fin de ligne et « MOTION » a la suivante au milieu d'une phrase.
   La marque s'ecrit d'un seul tenant. */
.nowrap { white-space: nowrap; }

/* --- Le pied ------------------------------------------------------------------ */
footer.pied {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 1px; color: var(--txt-mute); text-transform: uppercase;
}
footer.pied a { color: var(--txt-dim); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
footer.pied a:hover { color: var(--gold); }

/* --- Telephone ------------------------------------------------------------------
   La navigation passe sous la marque et retourne a la ligne (deux lignes au
   plus, mesure a la tache 10 de son plan) ; pas de defilement horizontal. */
@media (max-width: 720px) {
  /* La gouttiere passe de 20px a 16px : 8px de largeur utile rendus a
     l'en-tete, au contenu et au pied ensemble -- ils bougent du meme pas,
     rien ne se desaligne. C'est ce qui paie les six entrees de l'accueil en
     deux lignes de nav une fois .nav et .nav-link redevenus respirables
     (gap 4px 2px, remplissage 8px 2px). 16px reste une gouttiere de
     telephone ordinaire. */
  .wrap { padding-left: 16px; padding-right: 16px; }
  header.top { gap: 12px 12px; }
  /* La rubrique n'enveloppe que si .brand peut retrecir : min-width: 0 sur
     .brand .ctx ne suffit pas seul (voir plus haut) -- .brand garde
     flex: 0 0 auto au bureau, ou rien ne le force a ceder de la place. Ici
     il peut retrecir, .ctx peut donc passer sous sa largeur de contenu, et
     .brand .disc (jamais white-space: nowrap) enveloppe au lieu de sortir
     de la colonne. */
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand img { height: 28px; }
  .brand .sep { height: 34px; }
  .nav { order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 4px 2px; }
  .nav-link { padding: 8px 2px; font-size: 11px; letter-spacing: -.2px; gap: 2px; }
  .nav-verif .vcnt { min-width: 14px; height: 14px; padding: 0 1px; }
  /* .head-right ne porte plus rien de fonctionnel depuis le premier tour de
     correction (le bouton Actualiser de la verification vit dans .vfilters) :
     sur l'accueil, seule page ou il n'est pas vide, il porte le badge
     decoratif "En direct" et le lanceur de diaporama (voir noyau/diaporama.css
     pour ce dernier -- l'equipe s'en sert, pas les visiteurs). Cette regle le
     CACHE, elle ne le rend pas seulement discret : a 390px, meme reduits,
     brand + head-right ne tiennent plus l'un a cote de l'autre. Le masquer
     ici, pas le vider : .head-right:empty le fait deja sur les dix autres
     pages.

     LE PIEGE, si un jour .head-right porte autre chose : le CTA « Reserver »
     d'Alpine (cta dans marques/alpine-race-lounge/alpine.js, href a null tant
     que l'URL de reservation manque) atterrit precisement dans .head-right
     quand buildHeader() reconstruit l'en-tete. Le jour ou cet href existe, ce
     display: none l'effacerait au telephone -- la ou une reservation se prend
     le plus souvent. Il faudra alors cibler ce qui est decoratif (.head-live,
     .diapo-btn) plutot que le conteneur entier. */
  .head-right { display: none; }
}

/* --- Mode ecran du lounge (?display=tv) : ni en-tete ni pied ------------------- */
[data-display="tv"] header.top,
[data-display="tv"] footer.pied { display: none; }