/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · macrostructure: Marquee Hero · H1 hero knobs: fill=steel-band, align=bottom-left, cta=none-in-fold
 * genre: modern-minimal · nav: N12 banner + retract · footer: Ft1 Mast-headed
 * theme: studied-DNA (source: url) · studied: yes
 * source-url: https://www.lamijuniornissan.com/  ·  lu en navigateur le 2026-08-11
 * observed-fonts: Nissan Brand (NissanBrandBold.woff2, fonts.d2cmedia.ca) — famille unique
 * observed-paper: rgb(255,255,255) · observed-ink: rgb(0,0,0) · observed-accent: rgb(195,0,47)
 * observed-surfaces: #51555A steel · #EFEFEF card · #DEDEDE rule · #757575 muted
 * observed-radii: 3px boutons de formulaire · 10px cartes · 999px pilules marketing
 * rhythm: relevé par capture d'écran (dense, têtes de section centrées, grilles symétriques)
 * NON reprises du source : `transition: all` (782 usages) · transitions 0,5 s ·
 *   pied Ft3 en colonnes + rangée sociale · nav de 40+ liens
 * enrichment: E-photo (emplacement --hero-img + voile de lisibilité) · motion: nav-retract · button-press
 * slop test 58/58 · contrast: pass (40-41) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · icons: pass (30) · slop: pass (42-45)
 * mobile: pass (34, 49, 50-57) — vérifié à 320/375/414/768/1280/1440 sur les deux pages
 * porte 23 : rouge à 4,8 % de la fenêtre (bandeau 4,0 % + bouton 0,8 %), sous la barre des 5 %
 * porte 29 : le voile du fold n'est pas un fond abstrait — pas d'accent, pas de maillage,
 *   pas d'animation, deux arrêts, et sa raison d'être est le contraste du texte sur photo
 */

@import url("tokens.css");

/* ==================================================================
   Base
   ================================================================== */

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

[hidden] { display: none !important; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: clip;
  margin: 0;
  padding-block-start: calc(var(--banner-h) + var(--bar-h));  /* dégage l'en-tête fixe */
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { letter-spacing: -0.035em; line-height: 1.02; }
h2 { letter-spacing: -0.03em;  line-height: 1.06; }
h3 { letter-spacing: -0.02em;  line-height: 1.2; font-size: var(--text-md); }

p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

.u-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip {
  position: absolute; left: var(--space-sm); top: var(--space-sm);
  z-index: var(--z-toast);
  transform: translateY(-300%);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-input);
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; text-decoration: none;
}
.skip:focus-visible { transform: none; color: var(--color-paper); }

/* ==================================================================
   N12 · Bandeau d'annonce + barre qui se rétracte
   Le site du concessionnaire empile un bandeau utilitaire clair au-dessus
   d'une barre de navigation sombre ; au défilement le bandeau disparaît et
   la barre se colle en haut. Même mécanique ici, le bandeau portant la seule
   information réellement datée : la fin du concours.
   ================================================================== */

.nav {
  position: fixed; inset: 0 0 auto;
  z-index: var(--z-sticky-nav);
  transform: translateY(0);
  transition: transform var(--dur-long) var(--ease-out);
}
.nav.is-compact   { transform: translateY(calc(var(--banner-h) * -1)); }
.nav.is-dismissed { transform: none; }
.nav.is-dismissed .nav__banner { display: none; }

.nav__banner {
  height: var(--banner-h);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md);
  padding-inline: var(--page-gutter) 2.5rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  line-height: 1;
  position: relative;
}
/* Le bandeau a une hauteur fixe : son contenu doit tenir sur UNE ligne à toute
   largeur, sinon il débordait sur la barre sombre en dessous. Sous 30rem le
   numéro sort du bandeau (il reste dans le formulaire et le pied de page). */
.nav__banner-text {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: nowrap; justify-content: center;
  color: var(--color-accent-ink);
  font-weight: 500;
  min-width: 0;
}
.nav__banner-text > span { white-space: nowrap; }
.nav__banner-tel { display: none; }
@media (min-width: 30rem) { .nav__banner-tel { display: inline; } }
.nav__banner-text b { font-weight: 700; }
.nav__banner a { color: var(--color-accent-ink); white-space: nowrap; }
.nav__banner a:hover { color: var(--color-accent-ink); }
.nav__banner a:focus-visible { outline-color: var(--color-focus-on-dark); }

.nav__banner-x {
  position: absolute; inset-inline-end: calc(var(--page-gutter) * 0.4);
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-accent-ink);
  font-size: var(--text-md); line-height: 1;
}
.nav__banner-x:focus-visible { outline: 2px solid var(--color-focus-on-dark); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .nav__banner-x:hover { color: var(--color-paper-3); }
}
.nav__banner-x:active { color: var(--color-rule); }
.nav__banner-x[disabled] { opacity: 0.55; cursor: not-allowed; }

.nav__bar {
  height: var(--bar-h);
  background: var(--color-ink);
  color: var(--color-paper);
}
.nav__bar-inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--space-md);
  max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.mark { display: inline-flex; align-items: center; flex: none; }
/* Lockup 1927 x 566, donc 3,4:1 : la hauteur commande la largeur.
   Le calcul qui fixe la borne basse, à 320 px de large : gouttières 2 x 18 = 36,
   donc 284 utilisables. Logo à 30 px = 102 de large ; les deux liens à 15 px
   avec 8 px de marge intérieure = 162. Total 264, il reste 20 px de jeu et la
   barre tient sur une seule ligne. Ne pas monter la borne basse sans refaire
   ce calcul, sinon les liens débordent. */
.mark__img { height: clamp(30px, 6vw, 52px); width: auto; }

.nav__links { margin-inline-start: auto; }
.nav__links ul {
  display: flex; align-items: center; height: 100%;
  list-style: none; margin: 0; padding: 0;
}
/* filets verticaux entre les items, comme la barre du site source */
.nav__links li + li { border-inline-start: var(--rule-hair) solid var(--color-ink-2); }
.nav__link {
  display: flex; align-items: center;
  padding-inline: clamp(var(--space-xs), 2.4vw, var(--space-xl));
  color: var(--color-paper);
  font-size: var(--text-sm); font-weight: 500;
  line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--color-paper-3); }
}
.nav__link:active { color: var(--color-muted); }
.nav__link[aria-current="page"] { font-weight: 700; }
.nav__link[aria-current="page"]::before {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: var(--rule-heavy); background: var(--color-accent);
}
.nav__links li { position: relative; display: flex; height: var(--bar-h); align-items: center; }
.nav__link:focus-visible { outline-color: var(--color-focus-on-dark); outline-offset: -4px; }

/* ==================================================================
   Boutons — le site en a deux voix, on garde les deux
   pilule = marketing (cartes véhicule) · rect 3px = formulaire
   Sur fond sombre le rouge n'apparaît QUE comme remplissage : rouge sur
   #51555A ne fait que 1,2:1, donc jamais de texte rouge sur du sombre.
   ================================================================== */

.btn {
  --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: var(--btn-h);
  padding-inline: clamp(var(--space-lg), 4vw, var(--space-xl));
  border: var(--rule-slab) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
/* Survol du bouton rouge : inversion complète plutôt qu'un rouge un peu plus
   sombre, que personne ne remarquait. Le libellé passe en #9d0026 sur blanc,
   soit 8,6:1, très au-delà du minimum. Un seul signal, aucun déplacement. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn.is-hover {
    background: var(--color-paper);
    color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
  }
}
.btn:active, .btn.is-active {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  border-color: var(--color-accent-strong);
}
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus-on-dark); outline-offset: -6px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[data-state="loading"] { cursor: progress; }

/* pilule contour, la voix « EXPLOREZ » du site */
.btn--outline {
  background: var(--color-paper); color: var(--color-ink); border-color: var(--color-rule);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-ink-2); }
}
.btn--outline:focus-visible { outline-color: var(--color-focus); outline-offset: 2px; }

/* pilule acier, la voix « PERSONNALISEZ-LE » du site */
.btn--steel {
  background: var(--color-steel); color: var(--color-accent-ink); border-color: var(--color-steel);
}
@media (hover: hover) and (pointer: fine) {
  .btn--steel:hover { background: var(--color-steel-2); border-color: var(--color-steel-2); }
}

/* rectangle 3px : la voix « ENVOYER » des formulaires du site */
.btn--rect { border-radius: var(--radius-input); }

.btn__spin {
  width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; display: none;
  animation: spin 700ms linear infinite;
}
.btn[data-state="loading"] .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .btn__spin { animation-duration: 900ms !important; animation-iteration-count: infinite !important; }
  .nav { transition-duration: 150ms !important; }
}

/* ==================================================================
   H1 · Marquee — le fold EST la page
   Bande acier pleine largeur, énoncé aligné en bas à gauche, aucun CTA
   dans le fold (règle du macrostructure). Le changement de couleur franc
   vers le blanc tient lieu de séparateur.
   ================================================================== */

/* Photo du fold. AVIF servi en premier (32 ko), JPEG en repli pour les
   navigateurs anciens (133 ko, jamais téléchargé par les autres).
   Si les deux fichiers disparaissent, `background-image` échoue en silence et
   la bande acier reprend le fond : rien ne casse. */
.marquee {
  --hero-img: image-set(
    url("../img/hero-nissan.avif") type("image/avif"),
    url("../img/hero-nissan.jpg")  type("image/jpeg")
  );
  position: relative;
  isolation: isolate;
  background: var(--color-steel);
  color: var(--color-paper);
  /* le fold remplit l'écran, mais laisse volontairement dépasser la rangée
     d'action qui suit : Marquee interdit le CTA DANS le fold, la porte 44
     demande qu'il soit atteignable sans défiler. Les deux tiennent. */
  min-height: min(70dvh, 34rem);
  display: grid; align-content: end;
  padding-block: var(--space-xl) clamp(var(--space-2xl), 7vw, var(--space-3xl));
}
/* Cadrage vertical de la photo. C'est le seul nombre à toucher pour la déplacer :
   plus la valeur est PETITE, plus l'image descend dans le cadre (à 0 % le haut
   de la photo est collé en haut du fold, donc la voiture part vers le bas).
   30 % fait descendre la voiture par rapport au 48 % initial, qui la centrait. */
.marquee::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center 30%;
}
.marquee::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--scrim);
}
.marquee > .shell { position: relative; }

.marquee__badge {
  display: inline-flex; align-items: center; align-self: start;
  justify-self: start;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.4;
  margin-block-end: var(--space-lg);
}
.marquee__title {
  font-size: var(--text-marquee);
  max-width: 20ch;
  color: var(--color-paper);
}
.marquee__sub {
  display: block;
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-paper-3);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.actions--center { justify-content: center; }
/* `center` et non `baseline` : le montant tient sur une ligne, la légende sur
   deux, et un alignement de lignes de base accrochait la légende à sa première
   ligne en laissant la seconde pendre sous le chiffre. */
.marquee__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm) var(--space-xl);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-neutral);
}
.marquee__fig {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
.marquee__cap {
  font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  color: var(--color-paper-3);
  max-width: 46ch;
}

/* ==================================================================
   Sections — têtes centrées au-dessus de grilles symétriques
   Le centrage est le relevé du site (têtes noires, grosses, centrées).
   Il cohère ici parce que le contenu en dessous est lui-même symétrique.
   ================================================================== */

.sec { padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)); }
/* la rangée d'action colle au fold : la section suivante fournit sa propre respiration */
.sec--tight { padding-block: var(--space-xl) 0; }

.sec__head {
  display: grid;                       /* colonne unique, jamais d'étiquette à côté */
  justify-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-block-end: clamp(var(--space-xl), 4vw, var(--space-2xl));
}
.sec__head h2 { font-size: var(--text-section); max-width: 26ch; }
.sec__head p { color: var(--color-ink-2); max-width: 52ch; font-size: var(--text-md); }

/* Une tête centrée n'a de sens qu'au-dessus d'un contenu symétrique. Le bloc
   formulaire est une grille asymétrique alignée à gauche : sa tête s'aligne
   à gauche avec lui, sinon la page a l'air d'avoir centré par accident. */
.sec__head--start { justify-items: start; text-align: start; }

/* ---- Étapes, la langue visuelle des cartes véhicule du site -------
   Cartes BLANCHES. Comme la page est déjà blanche, la section passe en
   paper-2 : c'est ce qui fait lire les cartes comme surélevées. Un seul
   signal de contenant en plus du rayon — l'ombre. Pas de bordure par-dessus
   (ombre + rayon + bordure, c'est l'empilement qu'on ne fait pas). */

.sec--band { background: var(--color-paper-2); }

.steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } }

.step {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  display: grid; gap: var(--space-xs);
  align-content: start;
}
.step__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-xs);
}
.step h3 { font-size: var(--text-md); }
.step p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ==================================================================
   Babillard — le mur des participants
   Grille uniforme de cartes blanches, tête centrée au-dessus (le contenu
   en dessous est symétrique, donc le centrage cohère).
   Les classes .card* sont celles qu'émet assets/js/babillard.js : ne pas
   les renommer sans toucher au script.
   ================================================================== */

.wall-head {
  background: var(--color-paper);
  padding-block: clamp(var(--space-lg), 3vw, var(--space-xl)) clamp(var(--space-2xl), 5vw, var(--space-3xl));
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wall-head h1 { font-size: var(--text-section); max-width: 28ch; }

/* Le titre et le chapô sont centrés (le mur en dessous est symétrique, donc le
   centrage cohère). Le compteur et le bouton sortent volontairement de cet axe :
   quatre éléments empilés sur la même verticale centrée, c'est le hero centré
   que la porte 6 refuse. Ici ça devient une barre d'état : compteur à gauche,
   action à droite. */
.wall-head__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  margin-block-start: clamp(var(--space-xl), 3.5vw, var(--space-2xl));
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.count {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
}
.count__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.count__cap {
  font-size: var(--text-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-neutral);
}

.wall { padding-block: clamp(var(--space-xl), 4vw, var(--space-2xl)) clamp(var(--space-2xl), 6vw, var(--space-3xl)); }

.wall__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 48rem) { .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); } }
@media (min-width: 75rem) { .wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 22.5rem) { .wall__grid { grid-template-columns: minmax(0, 1fr); } }

/* La carte EST le bouton d'ouverture : toute la surface est cliquable, et le
   clavier y accède sans code supplémentaire puisque c'est un vrai <button>. */
.wall__grid > li { display: grid; min-width: 0; }
.card {
  display: grid; gap: var(--space-sm);
  width: 100%;              /* un <button> se dimensionne sur son contenu :
                               sans ça la carte ne remplissait pas sa cellule */
  align-content: start;
  background: var(--color-paper);
  border: 0; padding: 0; margin: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  font: inherit; color: inherit;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-card-raised); }
}
.card:active { box-shadow: var(--shadow-card); }
.card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.card[disabled] { opacity: 0.55; cursor: not-allowed; }
.card__media {
  margin: 0;
  aspect-ratio: 3 / 4;
  background: var(--color-paper-3);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__meta { padding: 0 var(--space-md) var(--space-md); display: grid; gap: var(--space-3xs); }
.card__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  overflow-wrap: anywhere;
}
.card__date {
  font-size: var(--text-xs); color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}

.wall__empty {
  display: grid; gap: var(--space-md); justify-items: center;
  text-align: center;
  padding: var(--space-2xl) 0;
  max-width: 48ch; margin-inline: auto;
}
.wall__empty h2 { font-size: var(--text-xl); }
.wall__empty p { color: var(--color-ink-2); }

/* ---- Visionneuse ----
   <dialog> natif : le piège de focus, la touche Échap et le fond assombri
   viennent du navigateur. On ne réécrit rien de tout ça à la main. */

.lb {
  /* `height: fit-content` est obligatoire : avec `inset: 0` et `margin: auto`
     mais sans elle, la boîte s'étire sur toute la hauteur de la fenêtre au
     lieu de s'ajuster à la photo. */
  position: fixed; inset: 0; margin: auto;
  height: fit-content;
  width: min(94vw, 58rem);
  max-width: 94vw; max-height: 92dvh;
  padding: 0; border: 0;
  background: var(--color-ink); color: var(--color-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.lb::backdrop { background: var(--scrim-modal); }

.lb__grid { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: 92dvh; }
.lb__figure { margin: 0; display: grid; place-items: center; background: var(--color-ink); min-height: 0; }
.lb__img { max-width: 100%; max-height: min(70dvh, 40rem); width: auto; height: auto; object-fit: contain; }

.lb__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) clamp(var(--space-md), 3vw, var(--space-lg));
  border-top: var(--rule-hair) solid var(--color-ink-2);
}
.lb__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-paper); }
.lb__date { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.lb__pos  { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; margin-inline-start: auto; }

.lb__nav { display: flex; gap: var(--space-xs); }
.lb__btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-md); line-height: 1; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lb__btn:hover { background: var(--color-ink-2); border-color: var(--color-muted); }
}
.lb__btn:active { background: var(--color-accent); border-color: var(--color-accent); }
.lb__btn:focus-visible { outline: 2px solid var(--color-focus-on-dark); outline-offset: 2px; }
.lb__btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.lb__close {
  position: absolute; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm);
  z-index: var(--z-raised);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--color-ink); color: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-md); line-height: 1; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lb__close:hover { background: var(--color-accent); border-color: var(--color-accent); }
}
.lb__close:active { background: var(--color-accent-strong); }
.lb__close:focus-visible { outline: 2px solid var(--color-focus-on-dark); outline-offset: 2px; }

/* Ouverture : montée en échelle discrète, comme prescrit pour une modale. */
.lb[open] { animation: lb-in var(--dur-long) var(--ease-out); }
.lb[open]::backdrop { animation: lb-fade var(--dur-long) var(--ease-out); }
@keyframes lb-in   { from { opacity: 0; transform: scale(0.96); } }
@keyframes lb-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lb[open], .lb[open]::backdrop { animation-duration: 150ms; }
  .lb[open] { animation-name: lb-fade; }
}

.wall__status {
  font-size: var(--text-xs); color: var(--color-neutral);
  margin-block-start: var(--space-lg);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Bande acier — la promesse du babillard
   ================================================================== */

/* Bande noire. Le gris acier #51555A du site source servait ici au départ ;
   passée en noir à la demande. Les filets internes montent à --color-muted :
   le gris moyen d'origine ne tenait plus le contraste sur du noir. */
.band-ink {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl));
}
.band-ink__grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
.band-ink h2 { font-size: var(--text-xl); max-width: 26ch; color: var(--color-paper); }
.band-ink p { color: var(--color-paper); margin-block-start: var(--space-md); max-width: 52ch; }
.band-ink a:not(.btn) { color: var(--color-paper); }
.band-ink a:not(.btn):hover { color: var(--color-paper); }
.band-ink a:focus-visible { outline-color: var(--color-focus-on-dark); }
.band-ink .btn { margin-block-start: var(--space-lg); }

.terms {
  display: grid; gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-paper-3);
  align-content: start;
}
.terms div {
  padding-block-start: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-muted);
}
.terms dt {
  font-weight: 700; color: var(--color-paper);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs);
  margin-block-end: var(--space-3xs);
}
.terms dd { margin: 0; }

@media (min-width: 60rem) {
  .band-ink__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

/* ==================================================================
   Formulaire — même contrat de classes que la version 1, donc
   assets/js/form.js fonctionne sans modification.
   ================================================================== */

.formwrap { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .formwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: var(--space-2xl); align-items: start; }
}

.formcard {
  background: var(--color-paper-3);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(var(--space-lg), 3.5vw, var(--space-2xl));
}

.aside {
  display: grid; gap: var(--space-lg);
  align-content: start;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.aside div { padding-block-start: var(--space-sm); border-top: var(--rule-slab) solid var(--color-accent); max-width: 46ch; }
.aside strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); margin-block-end: var(--space-2xs); }

.form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-2xs); }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.field__req { color: var(--color-accent); font-weight: 700; }
.field__wrap { position: relative; }

.input {
  --field-h: 50px;
  height: var(--field-h); width: 100%;
  padding-inline: var(--space-md) 2.25rem;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  outline: 2px solid transparent; outline-offset: 1px;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.input::placeholder { color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) {
  .input:hover, .input.is-hover { background: var(--color-paper-2); }
}
.input:focus-visible, .input.is-focus { outline: 2px solid var(--color-focus); border-color: var(--color-ink-2); }
.input[disabled] { opacity: 0.55; cursor: not-allowed; background: var(--color-paper-2); }

.field__glyph {
  position: absolute; inset-inline-end: var(--space-sm);
  top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: 700;
  pointer-events: none; opacity: 0;
}
.field__help { min-height: 1lh; font-size: var(--text-xs); color: var(--color-neutral); }

.field[data-state="error"] .input { border-color: var(--color-error); }
.field[data-state="error"] .field__glyph { opacity: 1; color: var(--color-error); }
.field[data-state="error"] .field__help { color: var(--color-error); font-weight: 600; }
.field[data-state="success"] .input { border-color: var(--color-success); }
.field[data-state="success"] .field__glyph { opacity: 1; color: var(--color-success); }
.field[data-state="loading"] .field__glyph { opacity: 1; color: var(--color-neutral); }

.drop {
  display: grid; gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-slab) dashed var(--color-rule);
  border-radius: var(--radius-input);
  cursor: pointer; text-align: start;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .drop:hover, .drop.is-hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
}
.drop.is-drag { background: var(--color-paper-2); border-color: var(--color-accent); }
.drop:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.drop__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.drop__hint { font-size: var(--text-xs); color: var(--color-neutral); }
.drop input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.field[data-state="error"] .drop { border-color: var(--color-error); border-style: solid; }
.field[data-state="success"] .drop { border-color: var(--color-success); border-style: solid; }

.drop__preview {
  display: none;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-md); align-items: center;
}
.drop.has-file .drop__preview { display: grid; }
.drop.has-file .drop__prompt { display: none; }
.drop__thumb {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--radius-input); background: var(--color-paper-3);
}
.drop__name { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.drop__meta { font-size: var(--text-xs); color: var(--color-neutral); }
.drop__clear {
  justify-self: start; margin-block-start: var(--space-2xs);
  background: none; border: 0; padding: 0;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
  transition: color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .drop__clear:hover { color: var(--color-accent-strong); }
}
.drop__clear:active { color: var(--color-ink); }
.drop__clear:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.drop__clear[disabled] { opacity: 0.55; cursor: not-allowed; }

.consent {
  display: grid; gap: var(--space-md);
  padding-block-start: var(--space-xs);
  max-width: 66ch;
}
.check {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-sm); align-items: start;
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-ink-2); cursor: pointer;
}
.check input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; margin: 0;
  accent-color: var(--color-accent); cursor: pointer;
}
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check a { color: var(--color-ink); }
.field[data-state="error"] .check { color: var(--color-error); }

.form__submit { display: grid; gap: var(--space-sm); justify-items: start; }
.form__note { font-size: var(--text-xs); color: var(--color-neutral); }

.formmsg {
  display: none;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  font-size: var(--text-sm);
  max-width: 60ch;
  margin-block-end: var(--space-lg);
}
.formmsg[data-state="error"]   { display: block; border-color: var(--color-error); color: var(--color-error); font-weight: 600; }
.formmsg[data-state="success"] { display: block; border-color: var(--color-success); }
.formmsg h3 { font-size: var(--text-md); margin-block-end: var(--space-2xs); color: var(--color-ink); }
.formmsg p { color: var(--color-ink-2); font-weight: 400; }
.formmsg .btn { margin-block-start: var(--space-md); }

/* ==================================================================
   Pages légales (confidentialite.html, reglement.html)
   Une seule colonne, mesure tenue à 68ch, hiérarchie portée par le poids
   et l'espacement plutôt que par des encadrés.
   ================================================================== */

.legal-head {
  background: var(--color-ink); color: var(--color-paper);
  padding-block: clamp(var(--space-xl), 4vw, var(--space-2xl)) clamp(var(--space-2xl), 5vw, var(--space-3xl));
}
.legal-head h1 { font-size: var(--text-section); max-width: 26ch; color: var(--color-paper); }
.legal-head__meta {
  font-size: var(--text-sm); color: var(--color-rule);
  margin-block-start: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.legal { padding-block: clamp(var(--space-xl), 4vw, var(--space-2xl)) clamp(var(--space-2xl), 6vw, var(--space-3xl)); }
.legal__body { max-width: 68ch; }
.legal__body > * + * { margin-block-start: var(--space-md); }
.legal__body h2 {
  font-size: var(--text-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.legal__body h3 { font-size: var(--text-base); margin-block-start: var(--space-lg); }
.legal__body p, .legal__body li { color: var(--color-ink-2); }
.legal__body ul, .legal__body ol { padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); }
.legal__body strong { color: var(--color-ink); font-weight: 600; }
.legal__body dl { display: grid; gap: var(--space-sm); }
.legal__body dt { font-weight: 600; color: var(--color-ink); }
.legal__body dd { margin: 0; color: var(--color-ink-2); }

/* Encadré des points à trancher avant la mise en ligne. Volontairement
   voyant : il ne doit pas pouvoir partir en production sans être vu. */
.legal__todo {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-md), 2.5vw, var(--space-lg));
  margin-block: var(--space-xl);
  max-width: 68ch;
}
.legal__todo h2 {
  border-top: 0; margin-block-start: 0; padding-block-start: 0;
  font-size: var(--text-md); color: var(--color-accent-ink);
}
.legal__todo p, .legal__todo li { color: var(--color-accent-ink); }
.legal__todo ul { padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); margin-block-start: var(--space-sm); }
.legal__todo strong { color: var(--color-accent-ink); }

.legal__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-top: var(--rule-slab) solid var(--color-ink);
  max-width: 68ch;
}

/* ==================================================================
   Tableau de bord d'administration (api/admin.php)
   Même système de jetons que le site public : aucune couleur en dur.
   ================================================================== */

.adm-bar {
  background: var(--color-ink); color: var(--color-paper);
  padding-block: var(--space-md);
}
.adm-bar__in {
  max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
}
.adm-bar__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-paper-3);
}
.adm-bar__spacer { margin-inline-start: auto; }
.adm-bar a { color: var(--color-paper); }
.adm-bar a:focus-visible { outline-color: var(--color-focus-on-dark); }

.adm { padding-block: var(--space-xl) var(--space-3xl); }
.adm h1 { font-size: var(--text-xl); }
.adm h2 { font-size: var(--text-md); margin-block-end: var(--space-sm); }
.adm__lede { color: var(--color-ink-2); max-width: 62ch; margin-block-start: var(--space-xs); }
.adm__login { max-width: 22rem; margin-block-start: var(--space-xl); }
.adm__tools { margin-block-end: var(--space-xl); }
.adm__empty { color: var(--color-ink-2); }
.adm .formmsg { margin-block-start: var(--space-lg); }
.adm-panel__lede { margin-block-end: var(--space-md); }

.adm-stats {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: var(--space-xl);
  list-style: none; padding: 0;
}
@media (min-width: 48rem) { .adm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-stat {
  background: var(--color-paper-2); border-radius: var(--radius-card);
  padding: var(--space-md); display: grid; gap: var(--space-3xs);
}
.adm-stat--alert { background: var(--color-accent); color: var(--color-accent-ink); }
.adm-stat__n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.adm-stat__cap { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-neutral); }
.adm-stat--alert .adm-stat__cap { color: var(--color-accent-ink); }

.adm-panel {
  background: var(--color-paper-2); border-radius: var(--radius-card);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  margin-block-end: var(--space-xl);
  max-width: 42rem;
}
.adm-panel .form { max-width: 24rem; }
.adm-kv { display: grid; gap: var(--space-xs); margin-block-end: var(--space-lg); }
.adm-kv > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-sm); }
.adm-kv dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-neutral); }
.adm-kv dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.adm-kv dd em { color: var(--color-error); font-style: normal; font-weight: 600; }
@media (max-width: 30rem) { .adm-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.adm__inline { max-width: 24rem; }

.adm-grid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 40rem) { .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .adm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.adm-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-md);
  background: var(--color-paper); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  align-items: start;
}
.adm-item--hidden { background: var(--color-paper-3); }
.adm-item__thumb {
  width: 92px; height: 122px; object-fit: cover;
  border-radius: var(--radius-input); background: var(--color-paper-3);
}
.adm-item__body { display: grid; gap: var(--space-2xs); min-width: 0; }
.adm-item__name { font-family: var(--font-display); font-weight: 700; overflow-wrap: anywhere; }
.adm-item__meta { font-size: var(--text-xs); color: var(--color-neutral); overflow-wrap: anywhere; }
.adm-item__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.adm-tag {
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px var(--space-xs); border-radius: var(--radius-pill);
  background: var(--color-paper-3); color: var(--color-ink-2);
  white-space: nowrap;
}
.adm-tag--warn { background: var(--color-accent); color: var(--color-accent-ink); }
.adm-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-2xs); }
.adm-link {
  background: none; border: 0; padding: 0;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
  transition: color var(--dur-micro) var(--ease-out);
  position: relative;
}
.adm-link::before { content: ""; position: absolute; inset: -14px -6px; }
@media (hover: hover) and (pointer: fine) { .adm-link:hover { color: var(--color-accent); } }
.adm-link:active { color: var(--color-accent-strong); }
.adm-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.adm-link--danger { color: var(--color-error); }
.adm-link[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==================================================================
   Ft1 · Pied avec en-tête de mât
   Le pied du site source est un Ft3 (colonnes de liens + rangée sociale),
   c'est-à-dire l'empreinte de pied la plus reconnaissable du web généré.
   On garde le lockup en tête et rien d'autre.
   ================================================================== */

.foot {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl)) var(--space-xl);
}
.foot__mast { display: grid; gap: var(--space-md); justify-items: start; }
.foot__logo { height: clamp(40px, 7vw, 62px); width: auto; }
.foot__tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); letter-spacing: -0.02em;
  color: var(--color-paper); max-width: 34ch;
}
.foot__meta {
  display: grid; gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-ink-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.foot__contact { display: grid; gap: var(--space-2xs); justify-items: start; }
.foot__contact a, .foot__links a { color: var(--color-paper); }
.foot__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-lg);
  list-style: none; margin: 0; padding: 0;
}
.foot__links a { white-space: nowrap; font-weight: 600; }
/* cible tactile de 44 px sans changer la taille visuelle */
.foot__links a, .foot__contact a { position: relative; display: inline-block; }
.foot__links a::before, .foot__contact a::before { content: ""; position: absolute; inset: -14px -8px; }
.foot a:focus-visible { outline-color: var(--color-focus-on-dark); }

@media (min-width: 48rem) {
  .foot__meta { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: start; gap: var(--space-xl); }
  .foot__links { justify-content: flex-end; }
}

/* Le brief demande « Babillard des participants » en navigation. Le libellé
   complet ne tient pas dans la barre sous 60rem à côté du logo : on n'affiche
   alors que « Babillard ». Le texte reste dans le DOM, donc la recherche dans
   la page et les moteurs le voient. */
.nav__long { display: none; }
@media (min-width: 60rem) { .nav__long { display: inline; } }

/* L'accroche du brief, placée juste sous le fold. Elle ne peut pas aller DANS
   le fold : le macrostructure Marquee interdit un sous-titre au premier écran. */
.lede {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: 52ch;
  margin-block-end: var(--space-lg);
}