/* CO-FEE — la feuille de style.
 *
 * Direction calibrée sur ce qui a été MESURÉ chez resend.com, pas imaginé :
 * fond noir pur, palette strictement achromatique (#A0A0A0, #EBECED, #464A4D,
 * #1B1B1B), et UN seul accent : le lime --os #C0E807 du logo CO-FEE. Le beige
 * #c7c2bc de la première direction a disparu — il ne restait plus qu'une
 * bordure morte sur capital flow. Échelle 90/60/48/32/20/16/13/12/11,
 * interlettrage négatif de −.03em à −.01em, rayons 4/8/12/20/32.
 *
 * Ce qui a disparu : le rose. Il venait de la référence précédente et faisait
 * copie. Rien ici n'est saturé — la couleur, quand il y en a, sert un état
 * (payé, en attente), jamais la décoration.
 *
 * Polices : Geist en display, Inter en texte, Commit Mono en monospace. Les
 * trois sont libres et servies depuis notre domaine ; aucune n'appelle un
 * tiers. ABC Favorit et Domaine, les display de resend, sont commerciales et
 * ne sont pas embarquées. */

@font-face {
  font-family: Geist;
  src: url("./polices/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("./polices/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("./polices/commitmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("./polices/commitmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("./polices/commitmono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("./polices/commitmono-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Sans cette ligne, le navigateur peint sa toile par DEFAUT — blanche —
     avant d'appliquer la feuille. Sur un site entierement noir, cela donne
     un flash clair a chaque rechargement. C'est la correction du flash. */
  color-scheme: dark;
  --fond: #000000;
  --panneau: #080808;
  --panneau-clair: #0E0E0E;
  --trait: #1C1C1C;
  --trait-vif: #2A2A2A;
  --texte: #EBECED;
  --sourd: #A0A0A0;
  --faible: #7b7b7b;          /* calculé : 4.5:1 minimum sur le fond le plus clair */
  --tres-faible: #8A8A8A;     /* portait la mention légale et les placeholders : #464A4D échouait partout */
  --os: #C0E807;          /* le vert du logo CO-FEE — accent unique du site */
  --ok: #8FB79A;
  --alerte: #C9A27E;

  --display: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Commit Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-xs: 4px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --rayon: 12px;
  --flanc: 248px;
  --large: 1140px;
}

* { box-sizing: border-box; }

html { background: var(--fond); }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.6 var(--sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--os); color: #000; }

:focus-visible { outline: 2px solid var(--os); outline-offset: 2px; border-radius: var(--r-xs); }

/* ----------------------------------------------------------- la charpente */

.app { display: flex; min-height: 100vh; }

.flanc {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  display: flex; flex-direction: column;
  width: var(--flanc); padding: 22px 18px;
  border-right: 1px solid var(--trait);
  background: var(--fond);
}

.marque { display: flex; align-items: center; gap: 13px; color: var(--texte); }
/* Le verrou est une image large qui contient le mot : CO-FEE y est gravé,
 * la police CODE de Fontfabric n'étant pas diffusable en webfont. On ne
 * contraint donc que la hauteur, jamais la largeur.
 * Rapport mesuré 2,70 (400x148) : 76 px de haut font 205 px de large, pour
 * 212 px utiles dans le flanc. `max-width` reste le garde-fou si le logo
 * change un jour de proportions. */
.marque .verrou {
  height: 76px; width: auto; max-width: 100%; object-fit: contain;
  flex: none; display: block;
  /* La boîte est réservée avant l'arrivée des octets : sans fond explicite,
     le navigateur y peint son pictogramme d'image en attente — un éclair
     visible au rechargement. On la garde du noir de la page. */
  background: var(--fond);
}
.marque--bas .verrou { height: 44px; }

.menu { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--sourd); font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.menu a svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.menu a:hover { background: var(--panneau-clair); color: var(--texte); }
.menu a[aria-current="page"] { background: var(--panneau-clair); color: var(--texte); }
.menu a[aria-current="page"] svg { opacity: 1; }

.flanc-pied { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--trait); }
.compte { display: flex; align-items: center; gap: 10px; color: var(--sourd); }
.compte:hover { color: var(--texte); }
/* Le générateur émet `<span class="vers-x"><svg viewBox>` SANS width ni
 * height. Cette règle visait `.glyphe-x`, une classe qui n'existe dans aucune
 * page : le SVG partait donc sans dimensions et retombait sur la taille par
 * défaut d'un objet remplacé, ~150 px, dans un flanc de 248. Le dimensionnement
 * doit descendre sur le <svg> lui-même ; le margin-left reste sur le span, qui
 * est l'élément flex de .compte. */
.compte .vers-x { display: flex; margin-left: auto; opacity: .6; }
.compte .vers-x svg { width: 14px; height: 14px; }

.principal { flex: 1; min-width: 0; margin-left: var(--flanc); }
.contenu { max-width: var(--large); margin: 0 auto; padding: 0 28px 88px; }

.voile { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .7); backdrop-filter: blur(2px); }

/* ------------------------------------------------------------ barre haute */

.barre-haut {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--trait);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: saturate(160%) blur(12px);
}

.burger {
  display: none; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau); color: var(--texte); cursor: pointer;
}
.burger svg { width: 17px; height: 17px; }

.cherche { position: relative; display: block; flex: 1; max-width: 460px; }
.loupe {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--faible); pointer-events: none;
}
.actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

/* --------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--texte); color: #000;
  font: 500 14px var(--sans); letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, opacity .12s ease;
}
.bouton:hover { background: #fff; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }

.bouton--contour {
  background: transparent; color: var(--texte);
  border-color: var(--trait-vif);
}
.bouton--contour:hover { background: var(--panneau-clair); border-color: var(--faible); }

.bouton--large { width: 100%; height: 42px; font-size: 15px; }
.bouton--petit { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* ---------------------------------------------------------------- champs */

.champ {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau); color: var(--texte);
  font: 14px var(--sans);
  transition: border-color .12s ease, background .12s ease;
}
.cherche .champ { padding-left: 33px; }
.champ::placeholder { color: var(--tres-faible); }
.champ:hover { border-color: var(--trait-vif); }
/* `outline: 0` annulait l'anneau que la page se donne plus haut : au clavier
 * il ne restait qu'un liseré d'un pixel. La bordure change toujours à la
 * souris, mais l'anneau revient dès qu'on navigue au clavier. */
.champ:focus { border-color: var(--faible); background: var(--panneau-clair); }
.champ:focus:not(:focus-visible) { outline: 0; }
.champ:focus-visible { outline: 2px solid var(--os); outline-offset: 1px; }
.champ:disabled { opacity: .5; cursor: not-allowed; }
textarea.champ { height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical; }

.champ-ligne { margin: 0 0 15px; }
.champ-ligne > label:not(.depot) {
  display: block; margin-bottom: 6px;
  color: var(--faible); font: 500 10.5px var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
}
.champ-unite { position: relative; display: block; }
.champ-unite .unite {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--faible); font: 11px var(--mono); letter-spacing: .06em;
}
.aide { display: block; margin-top: 6px; color: var(--faible); font-size: 12.5px; line-height: 1.5; }
.aide--centre { text-align: center; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.filet { margin: 20px 0; border: 0; border-top: 1px solid var(--trait); }

.case-conditions { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; color: var(--sourd); font-size: 13px; }
.case-conditions input { margin: 2px 0 0; accent-color: var(--os); }
.case-conditions a { color: var(--texte); text-decoration: underline; text-decoration-color: var(--trait-vif); text-underline-offset: 3px; }

.depot {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border: 1px dashed var(--trait-vif); border-radius: var(--r-sm);
  background: var(--panneau); color: var(--sourd); font-size: 13.5px; cursor: pointer;
}
.depot:hover { border-color: var(--faible); color: var(--texte); }
/* Un <label> reste cliquable meme quand son <input> est disabled : sans cette
 * regle la zone de depot semblait active et ne faisait rien, ce qui est pire
 * qu un refus franc. On suit la convention deja posee par .champ:disabled. */
.depot:has(.visuellement-cache:disabled) { opacity: .5; cursor: not-allowed; }
.depot:has(.visuellement-cache:disabled):hover { border-color: var(--trait-vif); color: var(--sourd); }
.depot-icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; overflow: hidden; border-radius: var(--r-xs); background: var(--panneau-clair); }
.depot-icone svg { width: 17px; height: 17px; }
.depot-icone img { width: 100%; height: 100%; object-fit: cover; }

.depliant {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 0; margin: 0 0 4px;
  border: 0; background: none; color: var(--sourd);
  font: 500 13px var(--sans); cursor: pointer;
}
.depliant:hover { color: var(--texte); }
.depliant svg { width: 15px; height: 15px; transition: transform .16s ease; }
.depliant[aria-expanded="true"] svg { transform: rotate(180deg); }
.depliant-corps { padding-top: 4px; }

/* ------------------------------------------------------------------ hero */

.hero { padding: 76px 0 54px; }

.hero h1 {
  margin: 0 0 18px;
  font: 400 clamp(38px, 7vw, 76px)/1.03 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero h1 .lueur { display: block; color: var(--faible); }

.sous-titre {
  max-width: 560px; margin: 0 0 28px;
  color: var(--sourd); font-size: 16.5px; line-height: 1.62;
  text-wrap: pretty;
}
.actions-hero { display: flex; flex-wrap: wrap; gap: 10px; }

/* Le hero 3D.
 *
 * DEUX COLONNES, et c'est une correction : en superposition absolue, le titre
 * passait PAR-DESSUS le logo et un masque radial le rongeait. La scène a
 * maintenant sa propre colonne, le texte la sienne, et rien ne se chevauche.
 * Le canvas ne prend jamais le clic ni le focus — il n'est qu'un décor. */
.hero-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
  align-items: center;
  gap: 24px;
}
.hero-scene-hote { order: 2; min-height: 420px; display: grid; align-items: center; }
.hero-scene .hero { order: 1; padding-right: 8px; }

.puce-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--panneau);
  color: var(--sourd); font-size: 12.5px;
}
.puce-live b { color: var(--texte); font-family: var(--mono); font-weight: 500; }
/* `vertical-align: middle` recale la pastille sur la ligne de texte : en
 * inline-flex sans lui, elle s'alignait sur la ligne de base et flottait
 * au-dessus des mots. */
.puce-lien { display: inline-flex; align-items: center; gap: 7px; color: var(--texte); vertical-align: middle; }
.puce-lien img { border-radius: var(--r-xs); display: block; }

/* ----------------------------------------------------------------- bento */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.tuile-bento {
  display: flex; flex-direction: column;
  padding: 18px; border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--panneau);
}
.tuile-bento--large { grid-column: span 3; }
.tuile-bento h2 { margin: 0 0 14px; font: 500 13px var(--sans); letter-spacing: -.01em; color: var(--texte); }
.bento-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px;
  color: var(--faible); font-size: 12.5px;
}
.bento-pied a { color: var(--sourd); }
.bento-pied a:hover { color: var(--texte); }

.mosaique { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini {
  display: grid; gap: 6px; padding: 13px;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau-clair);
}
.mini b { font: 500 13px var(--sans); }
.mini .montant { color: var(--os); font: 500 13px var(--mono); }

.barres { display: grid; gap: 9px; }
.barre-ligne { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; align-items: center; color: var(--sourd); font-size: 12.5px; }
.barre-ligne i { display: block; height: 5px; border-radius: 999px; background: var(--trait-vif); }

.enorme { margin: 0; font: 400 40px var(--display); letter-spacing: -.035em; }

/* -------------------------------------------------------------- sections */

.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 44px 0 26px; }
.entete-page h1 { margin: 0 0 9px; font: 400 clamp(28px, 4vw, 40px)/1.1 var(--display); letter-spacing: -.035em; }
.entete-page p { max-width: 620px; margin: 0; color: var(--sourd); font-size: 14.5px; line-height: 1.62; }

.titre { margin: 0; font: 400 clamp(28px, 4vw, 42px)/1.1 var(--display); letter-spacing: -.035em; }
.eyebrow { margin: 34px 0 0; color: var(--faible); font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.section { margin-top: 34px; }
.section-titre { margin: 0 0 12px; font: 500 15px var(--sans); }
.section-intro { color: var(--sourd); font-size: 14px; line-height: 1.62; }
.rubrique-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.rubrique-titre h2 { margin: 0; font: 500 15px var(--sans); }
.rubrique-titre a { color: var(--sourd); font-size: 13px; }
.rubrique-titre a:hover { color: var(--texte); }
.compte-droite { color: var(--faible); font: 12px var(--mono); }
.minuscule { color: var(--faible); font-size: 12.5px; }
.gros { font: 500 19px var(--mono); letter-spacing: -.02em; }

.outils { margin: 0 0 16px; }
.pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pastille {
  height: 29px; padding: 0 11px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--panneau); color: var(--sourd);
  font: 13px var(--sans); cursor: pointer;
}
.pastille:hover { color: var(--texte); border-color: var(--trait-vif); }
.pastille[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: #000; }
.pastille--plateforme { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.pastille--plateforme img { border-radius: 3px; }
.pastille--plateforme[aria-pressed="true"] { background: var(--panneau-clair); border-color: var(--trait); color: var(--texte); }
.separateur { width: 1px; height: 18px; background: var(--trait); }

/* --------------------------------------------------------------- fiches */

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }

.fiche {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--panneau);
  transition: border-color .14s ease, transform .14s ease;
}
.fiche:hover { border-color: var(--trait-vif); transform: translateY(-1px); }

.tuile { position: relative; aspect-ratio: 16 / 9; background: var(--panneau-clair); overflow: hidden; }
.tuile-image { width: 100%; height: 100%; object-fit: cover; }
.monogramme {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--tres-faible); font: 400 44px var(--display); letter-spacing: -.04em;
}
.etiquette-tuile {
  position: absolute; left: 9px; bottom: 9px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .68); backdrop-filter: blur(6px);
  color: var(--texte); font: 11.5px var(--mono);
}

.corps { display: grid; gap: 11px; padding: 14px; }
.corps h3 { margin: 0; font: 500 14.5px var(--sans); letter-spacing: -.012em; }
.chiffres { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; font: 12.5px var(--mono); }
.trois > div { display: grid; gap: 2px; }
.trois span { color: var(--faible); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pied-fiche {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--trait);
  color: var(--faible); font: 11.5px var(--mono);
}
.pied-lift { display: inline-flex; align-items: center; gap: 5px; }
.pied-lift img { border-radius: 3px; opacity: .85; }

.etat {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--trait-vif);
  font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.etat--paye { color: var(--ok); border-color: rgba(143, 183, 154, .35); }
.etat--attente { color: var(--sourd); }

.bande { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.bande-fiche {
  display: flex; align-items: center; gap: 10px; flex: none;
  min-width: 232px; padding: 11px 13px;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau);
}
.bande-fiche:hover { border-color: var(--trait-vif); }
.bande-fiche .sous { display: block; color: var(--faible); font: 11.5px var(--mono); }
.bande-fiche .somme { margin-left: auto; color: var(--os); font: 500 13px var(--mono); }

.jeton-rond {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; overflow: hidden;
  border-radius: 50%; background: var(--panneau-clair);
  color: var(--sourd); font: 500 12px var(--mono);
}
.vignette { display: grid; place-items: center; width: 58px; height: 58px; flex: none; overflow: hidden; border-radius: var(--r); background: var(--panneau-clair); color: var(--tres-faible); font: 400 24px var(--display); }
.vignette-img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- panneaux */

.panneau { padding: 18px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.panneau h2 { margin: 0 0 14px; font: 500 14px var(--sans); letter-spacing: -.012em; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.stats-haut { padding: 22px; }
.stat-geant { margin: 0; font: 400 44px var(--display); letter-spacing: -.04em; }
.stat-ligne { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stat-ligne--trois { grid-template-columns: repeat(3, 1fr); }
.stat-case { padding: 13px; border: 1px solid var(--trait); border-radius: var(--r-sm); background: var(--panneau-clair); }
.stat-case dt { color: var(--faible); font: 10.5px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.stat-case dd { margin: 6px 0 0; font: 500 17px var(--mono); letter-spacing: -.02em; }
.stat-case p { margin: 5px 0 0; color: var(--faible); font-size: 12px; }

.paiement {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--trait);
}
.paiement:last-child { border-bottom: 0; }
.paiement .somme { color: var(--texte); font: 500 14px var(--mono); }
.paiement .vers { color: var(--sourd); font-size: 13px; }
.paiement .vers b { color: var(--texte); font-weight: 500; }
.paiement time { margin-left: auto; color: var(--faible); font: 11.5px var(--mono); }

.graphique { display: grid; gap: 9px; }
.ligne { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ligne i { display: block; height: 5px; border-radius: 999px; background: var(--trait-vif); }
.ligne .valeur { color: var(--sourd); font: 12.5px var(--mono); }

.jauge { height: 6px; border-radius: 999px; background: var(--trait); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--os); }

.paire { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.paire:last-child { border-bottom: 0; }
.paire dt { color: var(--faible); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.paire dd { margin: 0; font: 13.5px var(--mono); text-align: right; }
.argent { font-weight: 500; }
.argent--du { color: var(--os); }

.etapes { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: e; }
.etapes li { position: relative; padding-left: 32px; counter-increment: e; }
.etapes li::before {
  content: counter(e);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--trait-vif); border-radius: 50%;
  color: var(--faible); font: 11px var(--mono);
}
.etapes h3 { margin: 0 0 3px; font: 500 13.5px var(--sans); }
.etapes p { margin: 0; color: var(--sourd); font-size: 13.5px; line-height: 1.55; }

.echelle { display: flex; flex-wrap: wrap; gap: 6px; }
.echelle span {
  padding: 4px 9px; border: 1px solid var(--trait); border-radius: var(--r-xs);
  background: var(--panneau-clair); color: var(--sourd); font: 12px var(--mono);
}

/* ============================================================ capital flow
 *
 * Un article, pas un empilement de boites. Le reproche etait « tout est tasse,
 * pas d'espace, rien de ludique ». Mesure, le defaut etait reel : la meme
 * valeur de 12 px separait deux IDEES et deux COLONNES d'une meme idee, la
 * prose tournait a 13,5px/1,55 — l'interlignage le plus serre du site — et le
 * schema exigeait 5x152 + 4x22 = 848 px, donc ~1188 px de fenetre une fois le
 * flanc compte. En dessous il partait en defilement horizontal, sans que rien
 * ne l'annonce, et aucune media query ne le rattrapait.
 *
 * CE QUI CHANGE : 76 px entre chapitres (la respiration du hero) au lieu de
 * 12 ; le corps passe a 15px/1,72 ; le trajet devient VERTICAL, donc lisible a
 * 400 px comme a 1400 ; et --os n'apparait que sur l'argent et son mouvement.
 * Disparait au passage rgba(199,194,188,.3), le beige de la reference
 * abandonnee : la seule couleur de l'ancienne page etait une couleur morte. */

.chapo { max-width: 660px; margin: 0; color: var(--sourd); font-size: 17px; line-height: 1.7; }
.entete-page .chapo { max-width: 660px; font-size: 17px; }

.chapitre { margin-top: 76px; padding-top: 34px; border-top: 1px solid var(--trait); }
.entete-page + .chapitre { margin-top: 44px; }
.chapitre-tete { max-width: 660px; padding-bottom: 34px; }
.chapitre-num { margin: 0 0 13px; color: var(--faible); font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
/* Le palier typographique qui manquait entre le h1 (40) et le corps (15). */
.chapitre-tete h2 { margin: 0 0 11px; font: 400 22px/1.28 var(--display); letter-spacing: -.03em; }
.chapitre-intro { margin: 0; color: var(--sourd); font-size: 15px; line-height: 1.72; }
.chapitre code, .limite code {
  padding: 1px 5px; border: 1px solid var(--trait); border-radius: var(--r-xs);
  background: var(--panneau-clair); color: var(--texte); font: 12.5px var(--mono);
}

/* ---- la machine : le cote ludique, et il dit quelque chose de vrai ------
 * On bouge un curseur, on voit la taxe createur produire des frais, et la part
 * du depot s'en detacher. Les deux taux viennent de deploiement.json, jamais
 * d'ici : une page ne doit pas annoncer un pourcentage que le contrat
 * n'applique plus. */
.machine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.machine-case { padding: 18px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.machine-case--os { border-color: rgba(192, 232, 7, .22); }
.machine-libelle { margin: 0 0 9px; color: var(--faible); font: 500 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.machine-somme { margin: 0; font: 400 clamp(22px, 4.6vw, 32px) var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.machine-case--os .machine-somme { color: var(--os); }
.machine-note { margin: 7px 0 0; color: var(--faible); font-size: 12.5px; }
/* Le mot de prudence sous la machine : il respire, sans style en ligne —
   c'etait l'un des defauts releves sur l'ancienne page. */
.machine-mot { margin-top: 22px; }
.machine-curseur { margin: 0; }
.machine-curseur label { display: block; margin-bottom: 9px; color: var(--faible); font: 500 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
/* Les pseudo-elements WebKit et Gecko ne se GROUPENT pas : un selecteur inconnu
 * ferait tomber toute la regle, d'ou les declarations repetees. */
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: none; cursor: pointer; }
.curseur:focus { outline: 0; }
.curseur:focus-visible { outline: 2px solid var(--os); outline-offset: 4px; border-radius: var(--r-xs); }
.curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--trait); }
.curseur::-moz-range-track { height: 6px; border-radius: 999px; background: var(--trait); }
.curseur::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--os); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--os); }
.curseur::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--os); }

/* ---- le trajet, VERTICAL par principe ----------------------------------
 * 848 px de largeur minimale deviennent 0. Aucune media query n'est necessaire
 * pour le sauver : une colonne se lit a toute largeur. */
.trajet-hote { position: relative; }
.trajet-hote::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 1px; background: var(--trait-vif); }
.trajet-piste { position: absolute; left: 15px; top: 14px; width: 1px; height: 0; background: var(--os); transition: height .45s cubic-bezier(.22, 1, .36, 1); }
.trajet { position: relative; margin: 0; padding: 0 0 0 46px; list-style: none; display: grid; gap: 26px; }
.trajet-etape { position: relative; display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; padding: 18px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
/* 46 (retrait) - 15 (piste) - 15 (demi-pastille) = 16 : left:-46px centre la
 * pastille sur la piste, et son fond opaque masque le trait qui passe dessous. */
.trajet-index { position: absolute; left: -46px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--trait-vif); border-radius: 50%; background: var(--fond); color: var(--faible); font: 500 11px var(--mono); transition: color .3s ease, border-color .3s ease; }
.trajet-etape.est-vu .trajet-index { color: var(--texte); border-color: var(--faible); }
.trajet-etape--fin.est-vu .trajet-index { background: var(--os); border-color: var(--os); color: #000; }
.trajet-texte { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.trajet-texte b { font: 500 15px var(--sans); letter-spacing: -.012em; }
.trajet-texte span { color: var(--sourd); font-size: 14px; line-height: 1.6; }
.trajet-marque { margin-left: auto; padding: 4px 9px; border: 1px solid var(--trait); border-radius: var(--r-xs); background: var(--panneau-clair); color: var(--faible); font: 11.5px var(--mono); white-space: nowrap; }
/* Une pastille que le script n'a pas pu remplir DISPARAIT : ni cadre vide, ni
 * chiffre suppose. */
.trajet-marque:empty { display: none; }
.trajet--anime .trajet-etape { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.trajet--anime .trajet-etape.est-vu { opacity: 1; transform: none; }

/* ---- garanties, limite, versements -------------------------------------- */
.garanties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.garantie { padding: 18px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.garantie h3 { margin: 0 0 9px; font: 500 15px var(--sans); letter-spacing: -.012em; }
.garantie p { margin: 0; color: var(--sourd); font-size: 14px; line-height: 1.7; }
/* --alerte sert un ETAT, jamais la decoration : ici l'aveu que le contrat ne
 * garantit pas la destination. C'est le plus important de la page. */
.limite { max-width: 760px; padding: 18px 18px 18px 22px; border: 1px solid var(--trait); border-left: 2px solid var(--alerte); border-radius: var(--r); background: var(--panneau); }
.limite-libelle { margin: 0 0 11px; color: var(--alerte); font: 500 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.limite p:not(.limite-libelle) { margin: 0; color: var(--sourd); font-size: 15px; line-height: 1.75; }
.flux-resume { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 0 0 18px; color: var(--faible); font: 11.5px var(--mono); }
.flux-resume b { color: var(--texte); font-weight: 500; }

/* ---- les reperes de cloture --------------------------------------------- */
.reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.repere { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--trait); border-radius: var(--r-sm); background: var(--panneau); transition: border-color .14s ease, transform .14s ease; }
.repere:hover { border-color: var(--trait-vif); transform: translateY(-1px); }
.repere-texte { display: grid; gap: 2px; min-width: 0; }
.repere-texte b { font: 500 13.5px var(--sans); }
.repere-texte span { overflow: hidden; color: var(--faible); font: 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.repere-fleche { margin-left: auto; color: var(--faible); }
.repere:hover .repere-fleche { color: var(--texte); }

.docs-index { margin: 0 0 34px; padding: 0; list-style: none; display: grid; gap: 1px; counter-reset: d; }
.docs-index a { display: flex; gap: 11px; padding: 7px 9px; border-radius: var(--r-xs); color: var(--sourd); font-size: 14px; }
.docs-index a:hover { background: var(--panneau-clair); color: var(--texte); }
.docs-index span { color: var(--tres-faible); font: 12px var(--mono); }
.docs-section { padding: 26px 0; border-top: 1px solid var(--trait); }
.docs-section h2 { display: flex; align-items: baseline; gap: 11px; margin: 0 0 11px; font: 500 17px var(--sans); letter-spacing: -.02em; }
.docs-section h2 span { color: var(--tres-faible); font: 13px var(--mono); }
.docs-section p { margin: 0 0 11px; color: var(--sourd); font-size: 14.5px; line-height: 1.68; }
.docs-section code { padding: 1px 5px; border: 1px solid var(--trait); border-radius: var(--r-xs); background: var(--panneau-clair); color: var(--texte); font: 12.5px var(--mono); }
.bloc-code {
  margin: 0 0 13px; padding: 13px 15px; overflow-x: auto;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau-clair); color: var(--texte);
  font: 12.5px/1.7 var(--mono);
}

.mention { max-width: 760px; margin: 44px 0 0; color: var(--tres-faible); font-size: 12px; line-height: 1.68; }
.mention strong { color: var(--faible); font-weight: 500; }

.vide { margin: 22px 0; color: var(--faible); font-size: 14px; }
.vide-bloc { padding: 42px 22px; border: 1px dashed var(--trait-vif); border-radius: var(--r); background: var(--panneau); text-align: center; }
.vide-titre { margin: 0 0 8px; font: 500 16px var(--sans); color: var(--texte); }
.vide-texte { max-width: 460px; margin: 0 auto; color: var(--sourd); font-size: 14px; line-height: 1.6; }
.vide-ligne { margin: 0; padding: 14px 0; color: var(--faible); font-size: 13px; }
  margin: 14px 0 0; padding: 9px 13px;
  border: 1px solid var(--trait-vif); border-radius: var(--r-sm);
  background: var(--panneau-clair); color: var(--sourd); font-size: 12.5px;
}
.bientot { color: var(--faible); }
.badge {
  margin-left: auto; padding: 2px 7px;
  border: 1px solid var(--trait-vif); border-radius: 999px;
  color: var(--faible); font: 9.5px var(--mono); letter-spacing: .11em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ pied */

.pied {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px;
  max-width: var(--large); margin: 0 auto;
  padding: 34px 28px; border-top: 1px solid var(--trait);
  color: var(--faible); font-size: 13px;
}
.pied h3 { margin: 0 0 11px; color: var(--sourd); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pied a:hover { color: var(--texte); }
.pied-x { margin: 11px 0 0; }
.pied-x svg { width: 15px; height: 15px; opacity: .55; }
.pied-x a:hover svg { opacity: 1; }

/* ------------------------------------------------- la page de lancement */

.lancement { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 12px; align-items: start; margin-top: 8px; }
.lancement-gauche { padding: 20px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.lancement-droite { display: grid; gap: 12px; }
.lancement-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.lancement-tete h2 { margin: 0; font: 500 15px var(--sans); }

.segments { display: inline-flex; padding: 2px; border: 1px solid var(--trait); border-radius: 999px; background: var(--panneau-clair); }
.segment { height: 27px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--faible); font: 12.5px var(--sans); cursor: pointer; }
.segment[aria-selected="true"] { background: var(--texte); color: #000; }

.plateformes { display: flex; gap: 8px; margin-bottom: 18px; }
.plateforme {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau-clair); color: var(--sourd);
  font: 13px var(--sans); cursor: pointer;
}
.plateforme[aria-pressed="true"] { border-color: var(--faible); color: var(--texte); }
.plateforme:disabled { opacity: .45; cursor: not-allowed; }
.plateforme-icone { display: grid; place-items: center; width: 17px; height: 17px; }
.plateforme-icone svg { width: 14px; height: 14px; }
.plateforme-icone img { width: 17px; height: 17px; border-radius: 3px; }

.carte-notif { position: relative; padding: 17px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.notif-somme { margin: 0; font: 400 30px var(--display); letter-spacing: -.035em; }
.notif-vers { margin: 5px 0 0; color: var(--sourd); font-size: 13.5px; }
.notif-vers b { color: var(--texte); font-weight: 500; }
.notif-note { margin: 11px 0 0; color: var(--faible); font: italic 13px var(--mono); }
.notif-push { display: grid; gap: 9px; }
.notif-avatars { display: flex; }
.notif-avatars .jeton-rond:last-child { margin-left: -9px; border: 2px solid var(--panneau); }
.notif-ligne { margin: 0; color: var(--sourd); font-size: 13px; line-height: 1.5; }
.notif-ligne b { color: var(--texte); font-weight: 500; }
.notif-coin { position: absolute; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 8px; }
.cloche { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid var(--trait); border-radius: var(--r-xs); background: var(--panneau-clair); color: var(--faible); cursor: pointer; }
.cloche:hover { color: var(--texte); }
.cloche svg { width: 14px; height: 14px; }

.apercu-jeton { padding: 17px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--panneau); }
.apercu-image { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-sm); background: var(--panneau-clair); color: var(--tres-faible); }
.apercu-image img { width: 100%; height: 100%; object-fit: cover; }
.apercu-titre { margin: 13px 0 4px; font-size: 14px; }
.apercu-chiffres { margin: 0 0 13px; color: var(--sourd); font: 13px var(--mono); }
.apercu-lignes { margin: 0; display: grid; gap: 1px; }
.apercu-lignes > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--trait); }
.apercu-lignes > div:last-child { border-bottom: 0; }
.apercu-lignes dt { color: var(--faible); font: 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.apercu-lignes dd { margin: 0; font: 12.5px var(--mono); text-align: right; }

/* la carte du dépôt, sous le champ de recherche */
.suggestion {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  border: 1px solid var(--trait-vif); border-radius: var(--r-sm);
  background: var(--panneau-clair);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.suggestion-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 0; background: none; color: var(--texte);
  text-align: left; cursor: pointer;
}
.suggestion-item:hover { background: var(--panneau); }
/* La navigation au clavier ne déplace pas le focus — c'est le champ qui le
   garde, et aria-activedescendant qui désigne l'option. Sans cette règle,
   les flèches ne surligneraient donc rien du tout. */
.suggestion-item[aria-selected="true"] { background: var(--panneau); box-shadow: inset 2px 0 0 var(--os); }
.suggestion { max-height: min(62vh, 420px); overflow-y: auto; }
.suggestion-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--trait); }
.suggestion-texte { display: grid; gap: 2px; min-width: 0; }
.suggestion-nom { display: flex; align-items: center; gap: 6px; font: 500 13.5px var(--sans); }
.suggestion-badge { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--os); }
.suggestion-badge svg { width: 100%; height: 100%; }
.suggestion-handle { overflow: hidden; color: var(--faible); font: 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.suggestion-vide { margin: 0; padding: 13px; color: var(--faible); font-size: 13px; }

/* ------------------------------------------------------------- graphique */

.chart-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-periodes { display: inline-flex; padding: 2px; border: 1px solid var(--trait); border-radius: 999px; background: var(--panneau-clair); }
.chart-periode { height: 25px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--faible); font: 11.5px var(--mono); cursor: pointer; }
.chart-periode[aria-pressed="true"] { background: var(--texte); color: #000; }
.chart { height: 296px; }
.chart-vide { margin: 0; padding: 40px 0; color: var(--faible); font-size: 13.5px; text-align: center; }

.palier { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); }
.palier-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--faible); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.palier-haut b { color: var(--texte); font: 500 15px var(--mono); letter-spacing: -.02em; text-transform: none; }
.palier-piste { height: 6px; border-radius: 999px; background: var(--trait); overflow: hidden; }
.palier-piste i { display: block; height: 100%; background: var(--os); transition: width .4s ease; }
.palier-note { margin: 9px 0 0; color: var(--sourd); font-size: 13px; }

.onglets-mvt { display: flex; gap: 2px; margin-bottom: 13px; border-bottom: 1px solid var(--trait); }
.onglet-mvt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 1px solid transparent; background: none;
  color: var(--faible); font: 13px var(--sans); cursor: pointer;
}
.onglet-mvt[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--texte); }
.onglet-mvt .compteur { padding: 1px 6px; border-radius: 999px; background: var(--trait); color: var(--sourd); font: 10.5px var(--mono); }
.mvt { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--trait); }
.mvt:last-child { border-bottom: 0; }
.mvt-somme { color: var(--texte); font: 500 14px var(--mono); }
.mvt-somme span { margin-left: 5px; color: var(--faible); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.mvt-quoi { color: var(--sourd); font-size: 13px; }
.mvt-quoi b { color: var(--texte); font-weight: 500; }
.mvt-temps { margin-left: auto; color: var(--faible); font: 11.5px var(--mono); white-space: nowrap; }
.mvt-vide { margin: 0; padding: 22px 0; color: var(--faible); font-size: 13px; }

.lien-plateforme { display: inline-flex; align-items: center; gap: 6px; }
.lien-plateforme img { border-radius: 3px; }


/* --------------------------------- rescapées de l'inventaire de classes
 * Ces règles existaient dans l'ancienne feuille et le balisage généré les
 * utilise toujours : les perdre laissait deux blocs sans mise en forme. */
.fiche-haut { display: flex; align-items: center; gap: 16px; }
.fiche-haut h1 { margin: 0 0 4px; font: 400 26px var(--display); letter-spacing: -.035em; }
.fiche-haut p { margin: 0; color: var(--sourd); font: 13.5px var(--mono); }
.notif-x { display: grid; gap: 0; }
.marque--mobile { display: none; }
@media (max-width: 980px) {
  .marque--mobile { display: flex; }
  /* La barre du haut est collante et n'a pas de hauteur fixe : a 64px la
     mascotte lui donnerait ~88px, trop pour un ecran de telephone.
     On ne reduit QUE la, le flanc et le pied gardent leur taille. */
  .marque--mobile .verrou { height: 46px; }
}
.vers-x { color: var(--sourd); }


/* --------------------------------------------- la scène du hero
 * Un dépôt qui reçoit ses frais, et son mainteneur qui les réclame. C'est une
 * maquette de l'interface, pas un objet abstrait : quatre versions d'une scène
 * WebGL n'avaient jamais réussi à dire ce que fait le produit. */

.scene { position: relative; display: grid; place-items: center; padding: 8px 0; }

.scene-flux {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; gap: 6px; width: 132px; pointer-events: none;
}
.scene-ligne {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 9px; border: 1px solid var(--trait); border-radius: 999px;
  background: var(--panneau); white-space: nowrap;
  animation: scene-entre 1.5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.scene-ligne b { color: var(--os); font: 500 12px var(--mono); }
.scene-ligne span { color: var(--faible); font: 10.5px var(--mono); }
@keyframes scene-entre {
  0%   { opacity: 0; transform: translateX(-16px) scale(.94); }
  22%  { opacity: 1; transform: translateX(0) scale(1); }
  70%  { opacity: 1; transform: translateX(34px); }
  100% { opacity: 0; transform: translateX(78px) scale(.96); }
}

/* Le paquet : la carte de devant est nette et pleine taille, les deux autres
 * sont posées derrière, réduites et estompées. On les décale vers le HAUT pour
 * qu'elles restent visibles sans manger la carte active. */
.scene-paquet { position: relative; z-index: 1; width: min(300px, 100%); }

.scene-carte {
  position: relative;
  width: 100%; padding: 18px;
  border: 1px solid var(--trait); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panneau-clair), var(--panneau));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  transition: border-color .3s ease, box-shadow .3s ease,
              transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
/* rang 0 : devant · rangs 1 et 2 : derrière, plus petites et plus sombres */
.scene-carte[data-rang="0"] { position: relative; transform: none; opacity: 1; z-index: 3; }
/* Seules les cartes du FOND sortent du flux. Celle de devant y reste, et c'est
 * elle qui donne sa hauteur au paquet. La version précédente les sortait
 * toutes les trois et compensait par un fantôme de 268 px écrit en dur — une
 * valeur que rien ne pouvait vérifier et qu'un libellé sur deux lignes aurait
 * fait déborder. */
.scene-carte[data-rang="1"], .scene-carte[data-rang="2"] { position: absolute; inset: 0 0 auto 0; }
.scene-carte[data-rang="1"] { transform: translateY(-16px) scale(.945); opacity: .5; z-index: 2; }
.scene-carte[data-rang="2"] { transform: translateY(-30px) scale(.89); opacity: .26; z-index: 1; }
.scene-carte[data-rang="1"], .scene-carte[data-rang="2"] { pointer-events: none; }
/* On réserve seulement de quoi laisser dépasser les deux cartes du fond. */
.scene-paquet { padding-top: 32px; }
.scene-carte--pleine { border-color: rgba(192, 232, 7, .34); }
.scene-carte--payee { border-color: rgba(192, 232, 7, .6); box-shadow: 0 22px 70px rgba(192, 232, 7, .09); }

.scene-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.scene-octo { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--texte); }
.scene-octo svg { width: 100%; height: 100%; }
.scene-av { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--trait); }
.scene-nom { overflow: hidden; font: 500 13px var(--mono); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.scene-etoiles { margin-left: auto; color: var(--faible); font: 11px var(--mono); }

.scene-libelle { margin: 0 0 5px; color: var(--faible); font: 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.scene-solde { display: flex; align-items: baseline; gap: 7px; margin: 0 0 13px; }
.scene-montant { font: 400 34px var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.scene-unite { color: var(--faible); font: 11px var(--mono); }

.scene-piste { height: 4px; margin-bottom: 15px; border-radius: 999px; background: var(--trait); overflow: hidden; }
.scene-piste i { display: block; height: 100%; width: 0; background: var(--os); transition: width .5s cubic-bezier(.22, 1, .36, 1); }

.scene-bouton {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 36px; padding: 0 14px;
  border: 1px solid var(--trait); border-radius: var(--r-sm);
  background: var(--panneau); color: var(--faible);
  font: 500 13.5px var(--sans); cursor: not-allowed;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.scene-bouton svg { width: 15px; height: 15px; }
.scene-bouton--pret {
  background: var(--os); border-color: var(--os); color: #000; cursor: pointer;
}
.scene-bouton--pret:hover { filter: brightness(1.08); }

.scene-note { margin: 11px 0 0; color: var(--faible); font-size: 11.5px; line-height: 1.5; }
.scene-note code { padding: 1px 4px; border: 1px solid var(--trait); border-radius: 3px; font: 10.5px var(--mono); }

@media (max-width: 640px) {
  .scene-flux { display: none; }
  .scene-paquet { width: 100%; }
}


/* Un input `hidden` sort de l'arbre d'accessibilité : il n'est plus atteignable
 * au clavier, et son <label> ne l'est pas non plus. On le masque donc à l'œil
 * sans le retirer au clavier, et on montre le focus sur le label associé. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visuellement-cache:focus-visible + span,
.depot:has(.visuellement-cache:focus-visible) { outline: 2px solid var(--os); outline-offset: 2px; }

/* ------------------------------------------------------------- téléphone */

@media (max-width: 1080px) {
  .hero-scene { grid-template-columns: minmax(0, 1fr) minmax(260px, 40%); }
  .hero-scene-hote { min-height: 380px; }
}

@media (max-width: 980px) {
  .chapitre { margin-top: 54px; }
  .machine, .reperes { grid-template-columns: 1fr 1fr; }
  .flanc {
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  /* `visibility: hidden` retire ses neuf liens de l'ordre de tabulation :
   * sortis de l'écran par la seule translation, ils captaient le focus avant
   * le contenu, sans que rien ne soit visible. */
  .flanc--ouvert { transform: none; visibility: visible; transition: transform .2s ease; }
  .flanc--ouvert { transform: none; }
  .principal { margin-left: 0; }
  .burger { display: grid; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tuile-bento--large { grid-column: span 2; }
  .lancement { grid-template-columns: 1fr; }
  .stat-ligne { grid-template-columns: repeat(3, 1fr); }
  .hero-scene { grid-template-columns: 1fr; }
  .hero-scene-hote { order: 0; min-height: 340px; margin: 0 0 8px; }
  .hero-scene .hero { order: 1; padding-right: 0; }
}

@media (max-width: 860px) {
  .garanties { grid-template-columns: 1fr; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .pied { grid-template-columns: 1fr 1fr; }
  .stat-ligne--trois { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .chapitre { margin-top: 40px; padding-top: 26px; }
  .entete-page + .chapitre { margin-top: 34px; }
  .chapitre-tete { padding-bottom: 26px; }
  .chapitre-tete h2 { font-size: 20px; }
  .entete-page .chapo { font-size: 15.5px; }
  .machine, .reperes { grid-template-columns: 1fr; }
  /* 368 px utiles - 38 de retrait = 330 de carte. Geometrie refaite a
     l'identique : 38 - 13 - 13 = 12, la pastille se centre sur x=13. */
  .trajet { padding-left: 38px; gap: 18px; }
  .trajet-hote::before, .trajet-piste { left: 13px; top: 13px; }
  .trajet-hote::before { bottom: 13px; }
  .trajet-etape { padding: 14px; }
  .trajet-index { left: -38px; top: 13px; width: 26px; height: 26px; }
  .trajet-marque { margin-left: 0; }
  .contenu { padding: 0 16px 62px; }
  .barre-haut { padding: 10px 16px; }
  .pied { padding: 26px 16px; }
  .bento, .mosaique { grid-template-columns: 1fr; }
  .tuile-bento--large { grid-column: span 1; }
  .duo, .trois { grid-template-columns: 1fr; }
  .stat-ligne { grid-template-columns: 1fr 1fr; }
  .entete-page { flex-direction: column; align-items: flex-start; }
  .hero { padding: 44px 0 34px; }
  .actions .bouton { display: none; }
  .actions .bouton--contour { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  /* Une etape restee a opacity:0 le resterait si l'observateur ne la
     voyait jamais : on les rend toutes visibles, sans condition. */
  .trajet--anime .trajet-etape { opacity: 1 !important; transform: none !important; }
  .trajet-piste { transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .scene-ligne { animation: none !important; }
}