/* ==========================================================================
   Styles de pages — hero d'affiche, programmation, infos pratiques,
   memories, partenaires, contact. Identité « édition #8 ».
   ========================================================================== */

/* --- Titres de section --- */
.section__title {
  position: relative;
}

.section__lead {
  font-size: var(--text-lg);
  max-width: 60ch;
  /* Le rapprochement titre → lead se fait en réduisant la marge basse du titre
     (voir base.css .section__title:has(+ .section__lead)), pas par une marge
     négative de rattrapage (proscrite §11). */
  margin-top: 0;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.section--alt { background: var(--color-surface-alt); }
/* Sur le fond crème ambrée, le teal-deep ne fait que 4.19:1 : on passe au bleu toucan */
.section--alt .eyebrow { color: var(--brand-toucan); }
.section--night {
  background: var(--gradient-night);
  color: var(--white);
}
.section--night .section__title,
.section--night .eyebrow { color: var(--white); }
.section--night .section__lead { color: rgba(255, 255, 255, 0.85); }

/* Focus visible sur les fonds sombres : l'outline bleu toucan par défaut y
   serait invisible (fond du même bleu) — on bascule sur le jaune de marque. */
.section--night :focus-visible,
.page-head :focus-visible,
.hero :focus-visible {
  outline-color: var(--brand-yellow);
}

/* ==========================================================================
   HERO — reprise directe de l'affiche
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  color: var(--white);
  border-bottom: var(--border-width) solid var(--brand-ink);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Traits jaunes sur le fond orange (logique de l'affiche, en remplacement
   des anciens triangles low-poly). Fines lignes obliques, discrètes. */
/* Traits jaunes repris tels quels de l'affiche (assets/img/elements/traits-jaunes.svg),
   plutôt qu'une recomposition CSS approximative. */
.hero__lines {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background: url("../img/elements/traits-jaunes.svg") center / cover no-repeat;
}

.hero__inner {
  position: relative;
  z-index: var(--z-decor);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
}

/* Toucan à droite, tout le contenu (titre, date, boutons, compteur) à gauche.
   Ordre DOM naturel : .hero__content (gauche) puis .hero__visual (droite). */
/* 58ch : la colonne est assez large pour que le logo atteigne sa taille
   maximale (470 px) et que les deux boutons tiennent côte à côte, tout en
   gardant les lignes de texte dans la fourchette lisible de 45-75 caractères
   (§8 des règles d'espacement). Une mesure plus étroite laissait plus de
   200 px de vide à droite sur desktop et près de 400 px sur tablette. */
.hero__content {
  max-width: 58ch;
  justify-self: start;
}

/* Le texte blanc court sur un dégradé orange vif (couleurs de marque,
   non modifiables). On garantit la lisibilité (contraste) avec un léger
   halo sombre — cohérent avec l'esthétique sérigraphie de l'affiche. */
.hero__place,
.hero__tagline,
.hero__countdown-label,
.hero .btn--on-dark {
  text-shadow: 0 1px 3px rgba(26, 20, 48, 0.55);
}
/* Au survol, le bouton se remplit de blanc : plus de halo nécessaire. */
.hero .btn--on-dark:hover {
  text-shadow: none;
}

/* Logo officiel fourni par le client (PNG détouré, fond transparent).
   L'image est bornée par la largeur du conteneur : elle ne déborde jamais,
   même en zoom 200 % ou sur très petit écran. L'aspect-ratio reprend les
   dimensions réelles du fichier (2552 × 1081) : la place est réservée avant
   le chargement, donc aucun décalage de mise en page (CLS). */
.hero__logo {
  margin: 0 0 var(--space-sm);
}
.hero__logo-img {
  display: block;
  width: min(100%, 470px);
  height: auto;
  aspect-ratio: 2552 / 1081;
  /* Ombre très légère : on garde un soupçon de relief sans épaissir le trait
     (le logo de l'affiche est fin). */
  filter: drop-shadow(0 1px 1px rgba(26, 20, 48, 0.16));
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.hero__date {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  text-transform: uppercase;
  background: var(--brand-yellow);
  color: var(--brand-ink);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.hero__place {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  text-transform: uppercase;
}

.hero__tagline {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-md);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.hero__countdown-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
}

/* Visuel toucan */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}
/* Le toucan ouvre le jeu « Compose ta mélodie » : lien accessible, léger
   effet au survol/focus pour signaler qu'il est cliquable. */
.hero__toucan-link {
  position: relative;
  z-index: var(--z-decor);     /* toujours AU-DESSUS des feuilles */
  display: block;
  width: min(100%, 420px);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out);
}
.hero__toucan-link:hover,
.hero__toucan-link:focus-visible {
  transform: scale(1.03) rotate(-1deg);
}
.hero__toucan {
  display: block;
  width: 100%;
  filter: drop-shadow(8px 10px 0 rgba(26, 20, 48, 0.3));
}
/* Feuilles de part et d'autre, plus grandes, DERRIÈRE le toucan. */
.hero__leaf {
  position: absolute;
  width: 64%;
  z-index: var(--z-base);      /* sous le toucan */
  opacity: 0.95;
}
.hero__leaf--1 { top: -14%; left: -22%; transform: rotate(-12deg); }
.hero__leaf--2 { bottom: -16%; right: -20%; width: 56%; transform: rotate(8deg); }

@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__visual { order: -1; max-width: 320px; }
  .hero__toucan-link { width: 100%; }
  .hero__leaf--1 { left: -14%; }
  .hero__leaf--2 { right: -12%; }
  .hero__date { white-space: normal; }
}

/* ==========================================================================
   Bandeau pratique en un coup d'œil
   ========================================================================== */
.facts-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.facts-bar__item {
  padding: var(--space-md);
  border-right: var(--border-width) solid var(--color-border);
}
.facts-bar__item:last-child { border-right: 0; }
.facts-bar__label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}
.facts-bar__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}
@media (max-width: 600px) {
  .facts-bar__item { border-right: 0; border-bottom: var(--border-width) solid var(--color-border); }
  .facts-bar__item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Programmation — cartes groupes
   ========================================================================== */
.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-md);
}

.band-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.band-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-block); }

.band-card__visual {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--band-color, var(--brand-teal));
  border-bottom: var(--border-width) solid var(--color-border);
  position: relative;
}
.band-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Couleur du texte sur le bloc coloré : --band-ink est injectée par
   programme.js selon le fond (encre sur les fonds clairs, blanc sur le bleu
   toucan) pour garantir un contraste ≥ 4.5:1. Le halo n'est conservé que
   pour le texte blanc (--band-shadow: none sinon). */
.band-card__order {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 2;
  font-family: var(--font-logo);
  font-size: var(--text-2xl);
  color: var(--band-ink, var(--white));
  text-shadow: var(--band-shadow, 2px 2px 0 rgba(26, 20, 48, 0.4));
}
/* Nom du groupe : affiché en grand directement sur le bloc coloré. */
.band-card__name {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--space-sm);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--band-ink, var(--white));
  text-shadow: var(--band-shadow, 2px 2px 0 rgba(26, 20, 48, 0.45));
  overflow-wrap: anywhere;
}
/* Quand une photo est fournie, on pose un voile bas pour la lisibilité du nom
   (qui repasse en blanc : il est alors toujours lu sur le voile sombre). */
.band-card__visual--has-img { align-items: end; }
.band-card__visual--has-img::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(26, 20, 48, 0.78), transparent);
}
.band-card__visual--has-img .band-card__name {
  align-self: end;
  text-align: left;
  color: var(--white);
  text-shadow: 2px 2px 0 rgba(26, 20, 48, 0.45);
}
.band-card__visual--has-img .band-card__order {
  color: var(--white);
  text-shadow: 2px 2px 0 rgba(26, 20, 48, 0.4);
}

/* Page programmation (cartes complètes) : au survol/focus, la photo du groupe
   remplace le nom et le fond coloré — l'animation de surélévation existante
   est conservée. Réservé aux appareils à survol : au doigt, la photo reste
   affichée en permanence avec le nom sur le voile (comportement ci-dessus). */
@media (hover: hover) and (pointer: fine) {
  .band-card:not(.band-card--teaser) .band-card__visual--has-img {
    align-items: center;
  }
  .band-card:not(.band-card--teaser) .band-card__visual--has-img .band-card__name {
    align-self: center;
    text-align: center;
    color: var(--band-ink, var(--white));
    text-shadow: var(--band-shadow, 2px 2px 0 rgba(26, 20, 48, 0.45));
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .band-card:not(.band-card--teaser) .band-card__visual--has-img .band-card__order {
    color: var(--band-ink, var(--white));
    text-shadow: var(--band-shadow, 2px 2px 0 rgba(26, 20, 48, 0.4));
    transition: color var(--duration-base) var(--ease-out);
  }
  .band-card:not(.band-card--teaser) .band-card__visual--has-img img,
  .band-card:not(.band-card--teaser) .band-card__visual--has-img::after {
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .band-card:not(.band-card--teaser):hover .band-card__visual--has-img img,
  .band-card:not(.band-card--teaser):focus-within .band-card__visual--has-img img {
    opacity: 1;
  }
  .band-card:not(.band-card--teaser):hover .band-card__visual--has-img .band-card__name,
  .band-card:not(.band-card--teaser):focus-within .band-card__visual--has-img .band-card__name {
    opacity: 0;
  }
  .band-card:not(.band-card--teaser):hover .band-card__visual--has-img .band-card__order,
  .band-card:not(.band-card--teaser):focus-within .band-card__visual--has-img .band-card__order {
    color: var(--white);
    text-shadow: 2px 2px 0 rgba(26, 20, 48, 0.4);
  }
}
.band-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; color: var(--color-text); }
.band-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.band-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* Variante « teaser » (accueil) : uniquement le bloc coloré, la carte entière
   étant un lien vers la page Au programme (le <a> porte .band-card, donc il
   hérite de la bordure, du rayon et de l'animation de survol communes).
   Toute la surface est cliquable : cible tactile largement au-dessus du
   minimum de 44×44 px (WCAG 2.5.5). */
.band-card--teaser {
  text-decoration: none;
  color: inherit;
}
.band-card--teaser .band-card__visual {
  border-bottom: 0;                 /* pas de corps de carte en dessous */
}
.band-card--teaser:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Séparation playlist ↔ grille des groupes : deux blocs distincts, donc un
   espace nettement supérieur au gap interne de la grille (24 px) — ratio 2:1
   exigé par la règle de proximité. Le conteneur [data-playlist] est un
   wrapper : c'est lui, et non .cta-band qui vit à l'intérieur, qui est le
   frère de .band-grid. */
[data-playlist]:not(:empty) + .band-grid {
  margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

/* ==========================================================================
   Horaires (timeline)
   ========================================================================== */
.timeline { display: grid; gap: var(--space-sm); }
.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
}
.timeline__time {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  color: var(--color-accent);
}
.timeline__title { font-weight: var(--weight-bold); }
.timeline__detail { color: var(--color-text-muted); font-size: var(--text-sm); }

/* --- Liste pratique --- */
.tick-list { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.tick-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
}
.tick-list li::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-top: 2px;
  background: var(--color-accent);
  border-radius: 50%;
  clip-path: polygon(42% 70%, 18% 46%, 8% 56%, 42% 90%, 92% 30%, 82% 22%);
}

/* ==========================================================================
   Memories — galerie anciennes affiches
   ========================================================================== */
.memories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}
.memory {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform var(--duration-base) var(--ease-out);
}
.memory:hover { transform: rotate(-1.5deg) scale(1.02); }
.memory img { width: 100%; height: auto; display: block; }
.memory__caption {
  padding: var(--space-xs) var(--space-sm);
  border-top: var(--border-width) solid var(--color-border);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Sous-titre de second niveau à l'intérieur d'une section (galerie photos des
   anciennes éditions, bloc « Un déchet, ça se vise » d'Infos pratiques…).
   L'espace au-dessus (48 px) est bien supérieur à celui du dessous (12 px) :
   le titre appartient visuellement au contenu qu'il introduit. */
.section__subtitle {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-sm);
}
.gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface-alt);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ==========================================================================
   Partenaires
   ========================================================================== */
.orga-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.orga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  background: var(--white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-width: 180px;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.orga:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-block-hover); }
.orga img { height: 72px; width: auto; object-fit: contain; }
.orga__label { font-weight: var(--weight-bold); font-size: var(--text-sm); text-align: center; }

.partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
}
.partners-row img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.partners-row a:hover img,
.partners-row a:focus img { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   Réseaux sociaux
   ========================================================================== */
.socials { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--weight-bold);
}
.social-link:hover { background: currentColor; }
/* Encre (et non crème) : sur fond night le lien devient blanc au survol */
.social-link:hover span { color: var(--brand-ink); }

/* ==========================================================================
   Pages internes : en-tête
   ========================================================================== */
.page-head {
  background: var(--gradient-night);
  color: var(--white);
  border-bottom: var(--border-width) solid var(--brand-ink);
  padding-block: var(--space-2xl);
}
.page-head .eyebrow { color: var(--brand-yellow); }
/* Plafond en vw : garantit qu'un titre long d'un seul mot (« PROGRAMMATION »,
   13 capitales) tient sur une ligne sur mobile ; sans effet au-delà de ~680px. */
.page-head h1 { font-size: min(var(--text-3xl), 8vw); }
.page-head__lead { font-size: var(--text-lg); max-width: 56ch; margin-top: var(--space-sm); color: rgba(255,255,255,0.9); }

/* --- Bloc contact / deux colonnes --- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-lg);
}

/* --- Bandeau d'appel final --- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--brand-yellow);
  color: var(--brand-ink);
  border: var(--border-width) solid var(--brand-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.cta-band h2 { font-size: var(--text-2xl); }
/* Largeur de lecture bornée (§8) : sans cela le texte du bandeau s'étire sur
   toute la largeur du conteneur (~100 caractères par ligne sur desktop). */
.cta-band p { max-width: var(--measure); }
.cta-band--center p { margin-inline: auto; }
.cta-band + .cta-band { margin-top: var(--space-xl); }
.cta-band + .band-grid { margin-top: var(--space-xl); }
.cta-band--alt {
  /* teal-deep (et non teal) : blanc sur teal ne fait que 3.0:1 */
  background: var(--brand-teal-deep);
  color: var(--white);
  border-color: var(--brand-ink);
}
.cta-band--alt .btn { background: var(--white); color: var(--brand-ink); }
.cta-band--center { flex-direction: column; text-align: center; }
.cta-band__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }

/* ==========================================================================
   Mini-jeu « Vise la poubelle » — bloc éco-responsable de la page d'accueil.
   ========================================================================== */
.eco-game {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-block);
  padding: clamp(var(--space-sm), 3vw, var(--space-lg));
  margin-top: var(--space-lg);
}
.eco-game__lead {
  max-width: 60ch;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.eco-game__stage {
  position: relative;
  margin: var(--space-md) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--brand-cream);
}
.eco-game__canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 450;
  cursor: grab;
  touch-action: none;            /* le geste pilote le jeu, pas le scroll */
  -webkit-user-select: none;
  user-select: none;
}
.eco-game__canvas:active { cursor: grabbing; }
.eco-game__canvas:focus-visible {
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: 2px;
}
/* Bouton de lancement centré sur l'image du jeu */
.eco-game__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;            /* laisse passer le geste vers le canvas */
}
/* Voile sombre uniquement quand le bouton est visible (avant/après partie) */
.eco-game__overlay:has(.eco-game__start:not([hidden])) {
  background: radial-gradient(ellipse at center,
    rgba(12, 20, 24, 0.45) 0%, rgba(12, 20, 24, 0.15) 45%, rgba(12, 20, 24, 0) 75%);
}
.eco-game__start {
  pointer-events: auto;            /* le bouton reste cliquable */
  font-size: var(--text-lg);
  padding: var(--space-xs) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* La classe .btn impose display:flex, ce qui masquerait le [hidden] : on force
   la disparition du bouton pendant la partie (réaffiché avant/après). */
.eco-game__start[hidden] {
  display: none;
}
.eco-game__hud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.eco-game__chip {
  flex: 1 1 160px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-xs);
}
.eco-game__chip-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.eco-game__chip-value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.eco-game__chip-value.is-low {
  color: var(--color-accent, #ec683b);
  animation: eco-game-pulse 1s ease-in-out infinite;
}
@keyframes eco-game-pulse {
  50% { opacity: 0.45; }
}
.eco-game__buttons {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.eco-game__status {
  margin-top: var(--space-sm);
  max-width: var(--measure);          /* largeur de lecture bornée (§8) */
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  min-height: 1.6em;
  color: var(--color-text);
}

/* ==========================================================================
   Page Mentions légales — document de texte long
   ========================================================================== */

/* Colonne de lecture contrainte (§8 de la charte : ≤ 65ch), indépendante de
   la largeur du conteneur. Le rythme vertical repose sur les marges des
   titres ci-dessous, pas sur un gap : les blocs sont de nature hétérogène
   (paragraphes, listes, sous-titres). */
.legal {
  max-width: 65ch;
}

.legal h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

/* Le premier titre ne pousse pas la section : l'espace vient déjà du
   padding-block de .section. */
.legal > h2:first-child {
  margin-top: 0;
}

.legal h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal p {
  margin-bottom: var(--space-sm);
}

.legal ul {
  margin: 0 0 var(--space-sm) var(--space-md);
}

.legal li {
  margin-bottom: var(--space-2xs);
}

/* Information légale non encore fournie. Le rouge seul ne porte pas
   l'information (WCAG 1.4.1) : le pictogramme, la graisse et le liseré
   pointillé restent perceptibles sans distinction des couleurs. Le rouge de
   marque (#e74317) ne fait que 3.75:1 sur le crème — on utilise sa variante
   foncée, à 4.9:1. */
.legal__todo {
  color: var(--brand-red-deep);
  font-weight: var(--weight-bold);
  border-bottom: 2px dotted var(--brand-red-deep);
  white-space: nowrap;
}