/* Zelda Civilisation — « relevé de terrain ».
   Conception sombre par défaut : le sujet est une carte de nuit, pas une plaquette.
   Toute la chromie est réservée aux cinq territoires ; l'habillage reste minéral. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Sombre par défaut. */
  --sol: #0f1315;
  --surface: #151a1d;
  --trait: #263035;
  --trait-fort: #3a484e;
  --texte: #e3e7e5;
  --doux: #8b9793;
  --tres-doux: #66716e;
  --braise: #d2823f;
  --bande-opacite: .17;

  --hylien: #5c9be0;
  --goron:  #c8503c;
  --zora:   #1aa98c;
  --piaf:   #9463c4;
  --gerudo: #d6a82b;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --marge: clamp(20px, 4vw, 64px);
  --colonne: 210px;
  /* Durée commune à tout ce qui réagit au survol d'un peuple : le texte, la
     bande, le trait et le décalage partent ensemble. L'image, elle, dure plus
     longtemps — c'est elle qui donne le mouvement de caméra. */
  --survol: .6s;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sol: #e8eae7;
    --surface: #f2f3f0;
    --trait: #cdd2ce;
    --trait-fort: #a6aeaa;
    --texte: #14191b;
    --doux: #56605d;
    --tres-doux: #7c8683;
    --braise: #a75c1c;
    --bande-opacite: .10;
    --hylien: #2c6cb5;
    --goron:  #a53422;
    --zora:   #0d7a63;
    --piaf:   #6f43a0;
    --gerudo: #9a7508;
  }
}

:root[data-theme="light"] {
  --sol: #e8eae7;
  --surface: #f2f3f0;
  --trait: #cdd2ce;
  --trait-fort: #a6aeaa;
  --texte: #14191b;
  --doux: #56605d;
  --tres-doux: #7c8683;
  --braise: #a75c1c;
  --bande-opacite: .10;
  --hylien: #2c6cb5;
  --goron:  #a53422;
  --zora:   #0d7a63;
  --piaf:   #6f43a0;
  --gerudo: #9a7508;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--sol);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Le pied reste en bas de l'écran sur les pages courtes, au lieu de flotter
     au milieu avec du vide dessous. */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1; }

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 120, 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--braise); outline-offset: 3px; }

/* Étiquette utilitaire : capitales espacées, la voix des légendes de carte. */
.etiq {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--tres-doux);
}

/* ───────────────── En-tête ───────────────── */

.entete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
  padding: 18px var(--marge);
  background: var(--sol);
  border-bottom: 1px solid var(--trait);
}
.marque { text-decoration: none; font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 900; font-size: 19px; letter-spacing: -.02em; }
.marque span { color: var(--doux); font-weight: 400; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a {
  position: relative;
  text-decoration: none; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--tres-doux);
  padding-bottom: 4px;
  transition: color .25s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: currentColor; transition: right .3s cubic-bezier(.2, .7, .3, 1);
}
.nav a:hover { color: var(--texte); }
.nav a:hover::after, .nav a.on::after { right: 0; }
.nav a.on { color: var(--texte); }

/* ───────────────── Hero territorial ───────────────── */

.hero { position: relative; padding: clamp(70px, 13vh, 130px) var(--marge) 0; overflow: hidden; }

/* Cinq bandes : la carte est divisée, la page l'est aussi. */
.bandes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.bandes span { border-right: 1px solid var(--trait); position: relative; }
.bandes span:last-child { border-right: 0; }
.bandes span::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, currentColor, transparent);
  opacity: var(--bande-opacite);
}
.bandes .b1 { color: var(--hylien); }
.bandes .b2 { color: var(--goron); }
.bandes .b3 { color: var(--zora); }
.bandes .b4 { color: var(--piaf); }
.bandes .b5 { color: var(--gerudo); }

.hero-grille {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--colonne); gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding-bottom: clamp(48px, 9vh, 96px);
}
@media (max-width: 820px) { .hero-grille { grid-template-columns: 1fr; align-items: start; } }

.hero h1 {
  font-size: clamp(46px, 11.5vw, 148px);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  letter-spacing: -.04em;
}
.hero h1 em { font-style: italic; }
.hero-accroche { margin-top: 26px; max-width: 44ch; font-size: clamp(16px, 1.6vw, 19px); color: var(--doux); }
.hero-accroche strong { color: var(--texte); font-weight: 600; }

.fiche-tech { display: grid; gap: 14px; align-content: end; }
.fiche-tech div { display: grid; gap: 2px; }
.fiche-tech .val { font-size: 14px; font-weight: 500; }

.liens { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.lien {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-block; padding: 12px 22px; text-decoration: none;
  border: 1px solid var(--trait-fort); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  transition: color .3s ease, border-color .3s ease;
}
.lien::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--texte);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}
.lien:hover { color: var(--sol); border-color: var(--texte); }
.lien:hover::before { transform: scaleX(1); }
.lien-plein { background: var(--texte); color: var(--sol); border-color: var(--texte); }
.lien-plein::before { background: var(--sol); }
.lien-plein:hover { color: var(--texte); }

/* ───────────────── Sections ───────────────── */

.section { padding: clamp(56px, 9vw, 104px) var(--marge); border-top: 1px solid var(--trait); }
.section-grille { display: grid; grid-template-columns: var(--colonne) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
@media (max-width: 820px) { .section-grille { grid-template-columns: 1fr; gap: 20px; } }
.marginalia { align-self: start; position: sticky; top: 84px; }
@media (max-width: 820px) { .marginalia { position: static; } }
.section h2 { font-size: clamp(28px, 4.4vw, 46px); max-width: 20ch; }
.section .intro { margin-top: 18px; max-width: 58ch; color: var(--doux); font-size: 17px; }

/* Chaque territoire porte son image. Une seule déclaration par peuple :
   elle alimente à la fois le fond plein écran et la vignette tactile. */
.t-hylien, .terr-hylien { --img: url('/territoires/hylien.jpg'); }
.t-goron,  .terr-goron  { --img: url('/territoires/goron.jpg'); }
.t-zora,   .terr-zora   { --img: url('/territoires/zora.jpg'); }
.t-piaf,   .terr-piaf   { --img: url('/territoires/piaf.jpg'); }
.t-gerudo, .terr-gerudo { --img: url('/territoires/gerudo.jpg'); }

/* La section devient la terre qu'on désigne. */
.section-terres { position: relative; overflow: hidden; isolation: isolate; }
.territoires { position: absolute; inset: 0; z-index: -1; }
/* La terre monte lentement en se recadrant : le fondu est court, le mouvement
   long, ce qui donne le glissement de caméra sans faire attendre l'image.
   Les deux propriétés animées — opacité et transformation — sont les seules
   que le GPU sait traiter tout seul, et `will-change` promeut le calque pour
   qu'il les traite vraiment. Surtout pas de `filter` ici : sur une image plein
   écran, il ramène toute l'animation sur le processeur et elle s'effondre. */
.terr {
  position: absolute; inset: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.07);
  will-change: opacity, transform;
  transition: opacity .55s ease, transform 1.6s cubic-bezier(.2, .7, .3, 1);
}
/* Voile : juste assez pour que le texte tienne, plus assez pour cacher la
   terre. Il s'épaissit en haut et en bas pour raccorder aux sections voisines,
   et laisse respirer toute la bande centrale — l'image y passe à ~56 %. */
.territoires::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      var(--sol) 0%,
      color-mix(in srgb, var(--sol) 30%, transparent) 18%,
      color-mix(in srgb, var(--sol) 30%, transparent) 82%,
      var(--sol) 100%),
    color-mix(in srgb, var(--sol) 20%, transparent);
}
/* Le voile allégé ne suffit plus seul : chaque texte porte son propre halo,
   de la couleur du sol, qui le détache sans dessiner de boîte. Uniquement
   quand une terre est affichée — au repos le fond est uni, le halo ne sert à rien.
   L'état de repos déclare un halo transparent, faute de quoi il apparaîtrait
   d'un coup au lieu de monter avec l'image. */
.section-terres :is(h2, h3, .intro, .desc, .etiq) {
  text-shadow: 0 0 10px transparent, 0 0 26px transparent;
  transition: text-shadow var(--survol) ease, color var(--survol) ease;
}
.section-terres:has(.peuple:hover) :is(h2, h3, .intro, .desc, .etiq) {
  text-shadow: 0 0 10px var(--sol), 0 0 26px var(--sol);
}
/* Les gris de repos passent mal sur une image en demi-teinte : on les remonte
   vers la couleur du texte le temps du survol. */
.section-terres:has(.peuple:hover) :is(.intro, .desc) {
  color: color-mix(in srgb, var(--texte) 82%, var(--doux));
}
.section-terres:has(.peuple:hover) .marginalia .etiq { color: var(--doux); }
/* Les filets se perdraient sur une image ; on les remonte au niveau du texte. */
.section-terres:has(.peuple:hover) .peuple {
  border-color: color-mix(in srgb, var(--texte) 26%, transparent);
}
.section-terres:has(.t-hylien:hover) .terr-hylien,
.section-terres:has(.t-goron:hover)  .terr-goron,
.section-terres:has(.t-zora:hover)   .terr-zora,
.section-terres:has(.t-piaf:hover)   .terr-piaf,
.section-terres:has(.t-gerudo:hover) .terr-gerudo { opacity: 1; transform: scale(1); }

/* Index des peuples : une légende de carte, pas des cartes. */
.peuples { margin-top: 44px; display: grid; }
.peuple {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px clamp(20px, 4vw, 56px);
  padding: 22px 0 22px 20px;
  border-top: 1px solid var(--trait);
  position: relative;
  transition: background-color var(--survol) ease, border-color var(--survol) ease;
}
/* Le décalage au survol se fait par `transform` sur les deux colonnes, pas par
   `padding-left` sur la ligne : le padding relance un calcul de mise en page à
   chaque image, la transformation non.
   Les trois propriétés sont déclarées ensemble et sous un sélecteur plus précis
   que la règle de halo ci-dessus : `:is(.intro, .desc, .etiq)` compte pour une
   classe, donc `.section-terres :is(…)` l'emportait sur `.peuple h3` et écrasait
   la transition — le décalage se faisait d'un coup. */
.section-terres .peuple :is(h3, .desc) {
  transition: transform var(--survol) cubic-bezier(.2, .7, .3, 1),
              text-shadow var(--survol) ease,
              color var(--survol) ease;
}
.peuple:hover h3, .peuple:hover .desc { transform: translateX(12px); }
/* Teinte du peuple posée sur un fond de sol, en une seule couleur : la ligne
   survolée tient sur l'image sans la masquer ailleurs. */
.peuple:hover {
  background: color-mix(in srgb, currentColor 9%, color-mix(in srgb, var(--sol) 34%, transparent));
}
.peuple:last-child { border-bottom: 1px solid var(--trait); }
/* Le trait s'épaissit par `scaleX` depuis son bord gauche, pas par `width` :
   même rendu, sans recalcul de mise en page. */
.peuple::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  background: currentColor; transform-origin: left;
  transition: transform var(--survol) cubic-bezier(.2, .7, .3, 1);
}
.peuple:hover::before { transform: scaleX(2.5); }
.peuple h3 { font-size: clamp(24px, 3vw, 34px); font-variation-settings: 'opsz' 60, 'WONK' 1; color: var(--texte); align-self: center; }
.peuple .desc { align-self: center; color: var(--doux); font-size: 15px; max-width: 46ch; }
@media (max-width: 700px) { .peuple { grid-template-columns: 1fr; } }

@media (hover: none) {
  .territoires { display: none; }
  .peuple::after {
    content: ''; display: block; grid-column: 1 / -1;
    aspect-ratio: 16 / 7; margin-top: 16px;
    background-image: var(--img); background-size: cover; background-position: center;
  }
}
.t-hylien { color: var(--hylien); } .t-goron { color: var(--goron); }
.t-zora { color: var(--zora); } .t-piaf { color: var(--piaf); } .t-gerudo { color: var(--gerudo); }

/* Notes séparées par des filets, sans boîtes. */
.note { padding: 24px 0; border-top: 1px solid var(--trait); }
.note h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0; margin-bottom: 8px; }
.note p { color: var(--doux); font-size: 15px; max-width: 42ch; }

.citation { margin: 34px 0 0; padding-left: 22px; border-left: 2px solid var(--trait-fort); }
.citation p { font-family: var(--serif); font-variation-settings: 'opsz' 40, 'WONK' 1; font-weight: 400; font-style: italic; font-size: clamp(19px, 2.6vw, 27px); line-height: 1.35; max-width: 30ch; }

/* ───────────────── Page intérieure ───────────────── */

.tete-page { padding: clamp(48px, 8vw, 88px) var(--marge) clamp(30px, 5vw, 52px); border-bottom: 1px solid var(--trait); }
.tete-page h1 { margin-top: 12px; font-size: clamp(34px, 6.5vw, 68px); font-variation-settings: 'opsz' 144, 'WONK' 1; }
.tete-page p { margin-top: 16px; max-width: 56ch; color: var(--doux); font-size: 17px; }

/* ───────────────── Wiki ───────────────── */

.wiki-layout { display: grid; grid-template-columns: var(--colonne) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); padding: 48px var(--marge) 96px; }
@media (max-width: 920px) { .wiki-layout { grid-template-columns: 1fr; gap: 28px; } }
.sommaire { align-self: start; position: sticky; top: 84px; font-size: 14px; }
@media (max-width: 920px) { .sommaire { position: static; } }
.som-sec { margin-bottom: 26px; }
.som-sec h4 { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--tres-doux); margin: 0 0 10px; }
.som-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.som-sec a { display: block; padding: 3px 0 3px 12px; text-decoration: none; color: var(--doux); border-left: 1px solid var(--trait); transition: color .2s ease, border-left-color .2s ease, padding-left .2s ease; }
.som-sec a:hover { padding-left: 16px; }
.som-sec a:hover { color: var(--texte); border-left-color: var(--trait-fort); }
.som-sec a.on { color: var(--texte); font-weight: 600; border-left-color: var(--texte); }

.index-wiki { padding: 0 var(--marge) 96px; }
.som-bloc { padding: 36px 0 8px; border-top: 1px solid var(--trait); }
.som-bloc:first-child { border-top: 0; }
.som-bloc h2 { font-size: 24px; margin-bottom: 18px; }
.cartes { display: grid; gap: 0 clamp(24px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.carte {
  display: block; padding: 15px 0; text-decoration: none;
  border-top: 1px solid var(--trait); font-weight: 500;
  transition: color .25s ease, border-top-color .25s ease;
}
.carte::after { content: ' →'; display: inline-block; color: var(--tres-doux); transition: transform .28s cubic-bezier(.2, .7, .3, 1), color .25s ease; }
.carte:hover { color: var(--braise); border-top-color: var(--braise); }
.carte:hover::after { color: var(--braise); transform: translateX(6px); }

/* ───────────────── Prose ───────────────── */

.prose { max-width: 68ch; font-size: 16.5px; }
.prose > * + * { margin-top: 1.1em; }
.prose h1 { font-size: clamp(32px, 5.4vw, 50px); font-variation-settings: 'opsz' 144, 'WONK' 1; }
.prose h2 { font-size: clamp(23px, 3vw, 30px); margin-top: 2.2em; }
.prose h3 { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .01em; text-transform: uppercase; margin-top: 2em; color: var(--braise); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose hr { border: 0; border-top: 1px solid var(--trait); margin: 2.6em 0; }
.prose hr + h2 { margin-top: 0; }
.prose strong { font-weight: 700; }
.prose a { color: var(--braise); text-underline-offset: 3px; }
.prose code { font-family: ui-monospace, monospace; font-size: .88em; background: var(--surface); padding: .1em .38em; border: 1px solid var(--trait); }
.prose pre { background: var(--surface); border: 1px solid var(--trait); padding: 16px; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote { margin-left: 0; padding-left: 20px; border-left: 2px solid var(--trait-fort); color: var(--doux); }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--trait); }
.prose figure { margin: 1.8em 0; }

.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.prose th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--tres-doux); }

.hint { padding: 18px 20px; border: 1px solid var(--trait); border-left-width: 2px; background: var(--surface); }
.hint > * + * { margin-top: .8em; }
.hint-info { border-left-color: var(--hylien); }
.hint-warning { border-left-color: var(--gerudo); }
.hint-danger { border-left-color: var(--goron); }
.hint-success { border-left-color: var(--zora); }

/* ───────────────── Soutien ───────────────── */

.jauge-bloc { padding: clamp(40px, 7vw, 72px) var(--marge); border-bottom: 1px solid var(--trait); }
.jauge-chiffre {
  margin-top: 6px;
  font-family: var(--serif); font-variation-settings: 'opsz' 144, 'WONK' 1; font-weight: 900;
  font-size: clamp(72px, 19vw, 210px); line-height: .85; letter-spacing: -.05em;
  color: var(--braise); font-variant-numeric: tabular-nums;
}
.jauge-chiffre span { font-size: .35em; }
.jauge { margin-top: 26px; height: 6px; background: var(--trait); position: relative; }
.jauge-remplie { position: absolute; inset: 0 auto 0 0; background: var(--braise); }
.jauge-montants { margin-top: 18px; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.jauge-montants span { color: var(--doux); font-weight: 400; }
.jauge-reste { margin-top: 8px; color: var(--doux); }
.jauge-note { margin-top: 14px; font-size: 13px; color: var(--tres-doux); }

.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(28px, 5vw, 64px); margin-top: 40px; }
.faq { margin-top: 30px; }
.faq dt { font-weight: 700; margin-top: 26px; }
.faq dd { margin: 6px 0 0; color: var(--doux); max-width: 58ch; }

.avertissement { margin-top: 44px; padding: 28px; border: 1px solid var(--trait); border-left: 2px solid var(--braise); background: var(--surface); }
.avertissement p + p { margin-top: 1em; }
.avertissement .fort { font-family: var(--serif); font-variation-settings: 'opsz' 40, 'WONK' 1; font-size: 21px; line-height: 1.35; }

/* ───────────────── Boutique ─────────────────
   Un catalogue de choses décrites, pas photographiées : des rayons de lignes
   tiennent mieux que des vignettes, qui seraient vides. */

.bandeau { padding: 22px var(--marge); border-bottom: 1px solid var(--trait); background: var(--surface); }
.bandeau p:last-child { margin-top: 8px; color: var(--doux); max-width: 74ch; font-size: 15px; }

/* Sans tête de page, la première section porte le filet de l'en-tête : sans ça
   le contenu flotte sous une barre de navigation qui ne repose sur rien. */
.section-premiere { border-top: none; padding-top: clamp(40px, 6vw, 76px); }

/* Une fiche par article. La grille en aligne autant qu'on en ajoutera ; à un
   seul article elle occupe toute la largeur, ce qui est le bon rendu. */
.produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 24px; }
@media (max-width: 560px) { .produits { grid-template-columns: 1fr; } }

.produit { border: 1px solid var(--trait); background: var(--surface); padding: clamp(22px, 3vw, 34px); }
/* Le lot se signale par un filet, pas par une couleur de fond : il doit se
   distinguer sans écraser les articles qu'il contient. */
.produit-tout { border-color: color-mix(in srgb, var(--braise) 45%, var(--trait)); }
.produit-tout > .etiq { color: var(--braise); margin-bottom: 10px; }
.produit-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.produit-tete h2 { font-size: clamp(24px, 3vw, 32px); max-width: none; }
.produit-prix {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); line-height: 1;
  font-variation-settings: 'opsz' 72, 'WONK' 1; font-variant-numeric: tabular-nums;
  color: var(--braise); white-space: nowrap;
}
.produit-quoi { margin-top: 12px; max-width: 62ch; color: var(--doux); font-size: 15px; }
/* Une commande se cite dans la fonte du texte, pas en chasse fixe : c'est un
   mot de la phrase, pas un bloc de code. */
.produit-quoi code { font-family: inherit; color: var(--texte); border-bottom: 1px solid var(--trait-fort); }
.produit-pied { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.produit-note { font-size: 13px; color: var(--tres-doux); }

/* Un bouton qui n'est pas encore un lien : même dessin, sans l'interaction. */
.lien-inactif { color: var(--tres-doux); border-color: var(--trait); cursor: default; }

/* ───────────────── Pied ───────────────── */

.pied { padding: 40px var(--marge); border-top: 1px solid var(--trait); display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.pied nav { margin-left: auto; display: flex; gap: 20px; }
.pied nav a { text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--tres-doux); }
.pied nav a:hover { color: var(--texte); }

/* ───────────────── Entrée en scène ─────────────────
   Un seul moment orchestré, au chargement : les cinq territoires se lèvent,
   puis le titre. Les états de repos sont les états finaux — quand l'animation
   est désactivée (`prefers-reduced-motion`), tout s'affiche normalement. */

@keyframes lever   { from { transform: scaleY(0); } }
@keyframes monter  { from { transform: translateY(16px); opacity: 0; } }
@keyframes remplir { from { transform: scaleX(0); } }

.bandes span::after {
  transform-origin: bottom;
  animation: lever .95s cubic-bezier(.2, .7, .3, 1) both;
}
.bandes .b1::after { animation-delay: .04s; }
.bandes .b2::after { animation-delay: .12s; }
.bandes .b3::after { animation-delay: .20s; }
.bandes .b4::after { animation-delay: .28s; }
.bandes .b5::after { animation-delay: .36s; }

.hero h1          { animation: monter .8s cubic-bezier(.2, .7, .3, 1) both .14s; }
.hero-accroche    { animation: monter .8s cubic-bezier(.2, .7, .3, 1) both .30s; }
.hero .liens      { animation: monter .8s cubic-bezier(.2, .7, .3, 1) both .40s; }
.hero .fiche-tech { animation: monter .8s cubic-bezier(.2, .7, .3, 1) both .48s; }

/* La jauge se remplit : c'est une barre de progression, elle doit progresser.
   On met à l'échelle plutôt que la largeur, qui est fixée en ligne. */
.jauge-remplie { transform-origin: left; animation: remplir 1.15s cubic-bezier(.2, .7, .3, 1) both .25s; }

/* ───────────────── Finitions ───────────────── */

::selection { background: var(--braise); color: var(--sol); }

/* Lien d'évitement : invisible jusqu'à ce qu'on tabule dessus. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--texte); color: var(--sol);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  text-decoration: none;
}
.evitement:focus { left: 0; }

/* Page 404 */
.perdu { padding: clamp(80px, 18vh, 190px) var(--marge); }
.perdu h1 { font-size: clamp(48px, 12vw, 150px); font-variation-settings: 'opsz' 144, 'WONK' 1; letter-spacing: -.045em; }
.perdu p { margin-top: 22px; max-width: 46ch; color: var(--doux); font-size: 18px; }