/*
 * LA PAGE D'ACCUEIL DU SITE — point 45.
 *
 * ⚠️⚠️ **ELLE SE LIT SANS JAVASCRIPT, ET C'EST LA CONTRAINTE QUI A DÉCIDÉ DE SA FORME.** C'est
 * le patron des six pages légales (`site/legal/legal.css`), pas celui des pages applicatives :
 * le texte est dans le HTML, en dur, une page par langue. Deux raisons, et la seconde suffirait.
 *
 *   1. C'est la page que des inconnus atteignent par un moteur de recherche. Une table de
 *      chaînes en JS (`site/bienvenue/mots.js`) rend une page VIDE quand le script ne charge
 *      pas — donc vide pour un robot d'indexation.
 *   2. C'est ce que le relecteur du Chrome Web Store ouvre en cliquant le nom du produit.
 *
 * ⚠️ **Le JavaScript n'AJOUTE que de l'agrément** : le curseur qui traverse la démo, la carte
 * qui s'ouvre, les images qui attendent qu'on descende. Sans lui, les mots substitués sont là,
 * leur traduction est là, et tous les liens résolvent. La dégradation doit être « moins beau »,
 * jamais « moins complet ».
 *
 * ⚠️ **Les jetons sont RECOPIÉS de `DESIGN.md`**, comme le font `legal.css` et
 * `site/connexion/index.html` : le site ne partage pas la feuille du panneau, qui vit dans un
 * Shadow DOM et pèse 400 Ko. Une divergence de teinte sur une page de texte ne casse rien ; une
 * divergence de RÈGLE, si (leçon 35).
 *
 * ⚠️ **Aucun jeton inventé.** Le fond sombre des deux sections en creux est `--lg-vert-700`,
 * qui existe. `DESIGN.md` prévient lui-même qu'une charte décrit une intention et pas un
 * produit, et qu'il faut COMPTER dans le CSS avant de citer une de ses règles : on ne s'autorise
 * donc pas une teinte de plus « parce qu'il en faudrait une ».
 */

:root {
  --lg-vert-50: #edf7f1;
  --lg-vert-100: #d2e9db;
  --lg-vert-300: #8fcba6;
  --lg-vert-500: #3e9e63;
  --lg-vert-600: #2f7f4e;
  --lg-vert-700: #24633c;
  --lg-bleu-50: #ecf4f9;
  --lg-bleu-200: #bfd9e9;
  --lg-bleu-600: #357c9e;
  --lg-bleu-700: #2a6480;
  --lg-or-50: #fdf4e3;
  --lg-or-200: #f3dca8;
  --lg-or-600: #b87400;
  --lg-gris-200: #dde3df;
  --lg-gris-300: #c3ccc7;
  --lg-gris-600: #6e7c73;
  --lg-gris-900: #333b36;

  /* Le papier du panneau, pas du blanc — c'est le fond de tout le produit. */
  --lg-papier: #f8f5ee;
  --lg-blanc: #fffdf8;
  --lg-texte: var(--lg-gris-900);
  --lg-texte-doux: var(--lg-gris-600);

  /*
   * ⚠️ **LE MARQUEUR DE LA PAGE LUE, ET IL NE VEUT DIRE QUE ÇA** (D22). Dans une page, ce bleu
   * signifie « ceci est un mot en langue cible ». Aucun des bleus d'interface n'est celui-ci, et
   * il ne doit jamais servir à autre chose ici non plus — la vitrine montre le produit, elle
   * doit donc en respecter le code de couleur, sinon elle enseigne un signe faux avant même
   * l'installation.
   */
  --lg-marque-mot: rgba(133, 195, 216, .32);

  --lg-titre: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lg-corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --lg-r: 16px;
  --lg-r-petit: 12px;
  --lg-r-pilule: 999px;
}

@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap;
  src: url("../polices/bricolage-grotesque-v9-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap;
  src: url("../polices/bricolage-grotesque-v9-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap;
  src: url("../polices/bricolage-grotesque-v9-latin-800.woff2") format("woff2"); }

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

body {
  background: var(--lg-papier);
  color: var(--lg-texte);
  font: 17px/1.6 var(--lg-corps);
  /* D139 a écarté le mode sombre de la v1, et le panneau force le clair de la même façon :
     sans ça, un navigateur en thème sombre repeint bordures et champs par-dessus une palette
     claire, et le document devient illisible par endroits. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

/* Le conteneur. 1160 px : Toucan tient ses sections dans 1200, et notre corps de texte est plus
   long à cause du français, qui court d'environ 15 % sur l'anglais. */
.large { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.etroit { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ══ LE BANDEAU ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ **Il ne colle PAS en haut.** Toucan pose son bandeau en `position: sticky` avec son bouton
 * dedans, ce qui est le bon calcul quand on court après le clic. Le nôtre porte une promesse —
 * « rien n'est ajouté à la page que tu lis » — et une barre qui suit le lecteur pendant qu'il
 * descend est exactement le geste qu'on lui dit ne pas faire. Le bouton est répété deux fois
 * dans la page à la place.
 */
.haut {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 24px 0 16px;
}

.marque {
  font-family: var(--lg-titre); font-weight: 800; font-size: 21px;
  color: var(--lg-vert-700); text-decoration: none; letter-spacing: -0.01em;
}
a.marque:hover { color: var(--lg-vert-600); }

/* Trois `<a>`, jamais un `<select>` : un menu déroulant a besoin de JavaScript pour naviguer,
   et c'est ce qu'on refuse ici. Même règle que les pages légales. */
.langues { display: flex; gap: 4px; }
.langues a {
  font-family: var(--lg-titre); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lg-texte-doux); text-decoration: none;
  padding: 5px 10px; border-radius: var(--lg-r-pilule);
}
.langues a:hover { background: var(--lg-vert-50); color: var(--lg-vert-700); }
.langues a[aria-current="page"] { background: var(--lg-vert-500); color: var(--lg-blanc); }

/* ══ LE MOT SUBSTITUÉ ═════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ **C'est un `<mark>`, et son fond est celui du produit.** Le lecteur qui installera
 * l'extension doit reconnaître ce qu'il a vu ici. On ne redessine pas le signe pour la vitrine.
 *
 * ⚠️ `<mark>` porte par défaut un fond jaune et un texte noir dans tous les navigateurs : les
 * deux sont écrasés. Sans `color: inherit`, le mot passerait en noir pur au milieu d'un texte
 * qui ne l'est pas.
 */
mark, .mot {
  background: var(--lg-marque-mot);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* Le mot de la démo est cliquable : le curseur le dit, et le survol aussi — exactement comme
   dans le produit, où le survol ne donne JAMAIS la réponse (D40) et ne signale que la
   possibilité de cliquer. */
.demo-mot {
  cursor: pointer;
  border: 0; font: inherit; padding: 0 1px;
  background: var(--lg-marque-mot); color: inherit; border-radius: 3px;
}
.demo-mot:hover, .demo-mot[aria-expanded="true"] { background: rgba(133, 195, 216, .55); }
.demo-mot:focus-visible { outline: 3px solid var(--lg-vert-600); outline-offset: 1px; }

/* ══ LE HÉROS ═════════════════════════════════════════════════════════════════════════════ */

.heros { padding: 48px 0 0; text-align: center; }

h1 {
  font-family: var(--lg-titre); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 54px); line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 16em; margin: 0 auto 16px;
}
.chapo-heros {
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5;
  color: var(--lg-texte-doux);
  max-width: 34em; margin: 0 auto 32px;
}

/* ── Le bouton ─────────────────────────────────────────────────────────────────────────────
 *
 * ⚠️⚠️ **IL EST INERTE TANT QUE L'EXTENSION N'EST PAS DÉPOSÉE, ET IL LE DIT.** Un bouton qui a
 * l'air de marcher et ne fait rien est « l'impasse polie » que D173 vient de retirer du produit,
 * sur la surface où elle coûterait le plus cher. L'adresse du Store vit à UN seul endroit
 * (`site/vitrine/vitrine.js`, `LIEN_STORE`) : le jour où elle existe, une édition suffit et les
 * quatre boutons des trois pages deviennent des liens.
 */
.bouton {
  display: inline-block;
  font-family: var(--lg-titre); font-weight: 800; font-size: 17px;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: var(--lg-r);
  background: var(--lg-vert-500);
  color: var(--lg-blanc);
  border: 2px solid var(--lg-vert-600);
  border-bottom-width: 4px;
  transition: transform 120ms ease-out, background 180ms ease-out;
}
.bouton:hover { background: var(--lg-vert-600); }
/* L'appui : le bloc s'enfonce réellement et le bord retombe à 2 px. `DESIGN.md`, la règle qui
   fait tout le reste. */
.bouton:active { transform: translateY(2px); border-bottom-width: 2px; }

.bouton[aria-disabled="true"] {
  background: var(--lg-gris-200);
  color: var(--lg-texte-doux);
  border-color: var(--lg-gris-300);
  cursor: default;
}
.bouton[aria-disabled="true"]:hover { background: var(--lg-gris-200); }
.bouton[aria-disabled="true"]:active { transform: none; border-bottom-width: 4px; }

.sous-bouton { font-size: 14.5px; color: var(--lg-texte-doux); margin-top: 12px; }

/* ── Les faits, à la place de la preuve sociale ────────────────────────────────────────────
 *
 * ⚠️ **C'est l'emplacement où Toucan met « ★★★★★ 1200+ critiques · 750 000+ génies » et deux
 * badges « Editor's Pick ».** On a zéro utilisateur et zéro avis, et on n'en invente pas. Ce
 * qu'on met à la place est ce qu'eux ne peuvent pas écrire : quatre faits qui se vérifient, dont
 * trois se vérifient en dix secondes par n'importe qui.
 */
.faits {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 12px; margin-top: 32px;
  list-style: none;
}
.faits li {
  font-size: 14.5px; font-weight: 600;
  color: var(--lg-vert-700);
  background: var(--lg-vert-50);
  border: 2px solid var(--lg-vert-100);
  border-radius: var(--lg-r-pilule);
  padding: 6px 14px;
}

/* ══ LA DÉMO ══════════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ **Le cadre déborde sur la section suivante**, et c'est le procédé qu'on vole à Toucan : sa
 * démo flotte à cheval sur le blanc et le fond sombre, ce qui donne à la page toute sa
 * profondeur pour zéro image. Chez eux c'est une marge négative de 120 px ; ici c'est la section
 * sombre qui remonte, ce qui revient au même sans mettre un `z-index` en travers.
 */
.demo-enveloppe { padding: 40px 0 0; position: relative; z-index: 2; }

.demo {
  background: var(--lg-blanc);
  border: 2px solid var(--lg-gris-200);
  border-bottom-width: 4px;
  border-radius: var(--lg-r);
  box-shadow: 0 24px 64px rgba(22, 22, 22, .10);
  position: relative;
  /*
   * ⚠️ **PAS d'`overflow: hidden` ICI.** Il avait été posé pour arrondir la barre du haut, et il
   * COUPAIT la carte au clic dès qu'elle tombait en bas du cadre — le mot le plus intéressant du
   * second paragraphe était justement celui dont l'explication se faisait trancher. La carte du
   * vrai produit flotte au-dessus de la page ; celle-ci fait pareil. La barre arrondit ses deux
   * coins elle-même.
   */
}

/* La fausse barre de navigateur : trois pastilles et une adresse. Elle dit « ceci est une page
   du web », ce qui est toute la démonstration — et elle ne prétend pas être un vrai navigateur. */
.demo-barre {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--lg-papier);
  border-bottom: 2px solid var(--lg-gris-200);
  border-radius: calc(var(--lg-r) - 2px) calc(var(--lg-r) - 2px) 0 0;
}
.demo-pastilles { display: flex; gap: 6px; }
.demo-pastilles i { width: 11px; height: 11px; border-radius: 50%; background: var(--lg-gris-300); }
.demo-adresse {
  flex: 1; font-size: 13px; color: var(--lg-texte-doux);
  background: var(--lg-blanc);
  border: 1px solid var(--lg-gris-200);
  border-radius: var(--lg-r-pilule);
  padding: 4px 12px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.demo-page { padding: 28px 32px 32px; }
.demo-page h3 {
  font-family: var(--lg-titre); font-weight: 800; font-size: 22px;
  margin-bottom: 4px;
}
.demo-page .demo-signature { font-size: 14px; color: var(--lg-texte-doux); margin-bottom: 20px; }
.demo-page p { margin-bottom: 14px; max-width: 62ch; }

/* ── Le curseur ────────────────────────────────────────────────────────────────────────────
 *
 * ⚠️ **Il n'existe QUE si le script tourne** : il est créé par `vitrine.js`, jamais écrit dans
 * le HTML. Un curseur dessiné en dur qui ne bougerait pas serait un artefact incompréhensible
 * sur une page sans JavaScript.
 * ⚠️ Il est immobile sous `prefers-reduced-motion`, et il n'a aucun rôle d'accessibilité : ce
 * qu'il désigne est un vrai bouton, atteignable au clavier.
 */
.demo-curseur {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease-out;
}

/* ── La carte au clic ──────────────────────────────────────────────────────────────────────
 *
 * ⚠️ Elle reprend la construction de la vraie (`extension/src/carte.css`) sans partager sa
 * feuille : la vraie vit dans un Shadow DOM. Ce qui compte est que le lecteur reconnaisse la
 * chose une fois installé — le mot en tête, la flèche, la traduction, puis l'explication.
 */
.demo-carte {
  position: absolute;
  width: min(340px, calc(100% - 48px));
  background: var(--lg-blanc);
  border: 2px solid var(--lg-gris-200);
  border-bottom-width: 4px;
  border-radius: var(--lg-r);
  box-shadow: 0 12px 36px rgba(22, 22, 22, .18);
  padding: 14px 16px 16px;
  z-index: 3;
  font-size: 14.5px; line-height: 1.5;
}
.demo-carte[hidden] { display: none; }
.demo-carte-tete {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 2px solid var(--lg-gris-200);
}
.demo-carte-cible {
  font-family: var(--lg-titre); font-weight: 800; font-size: 17px;
  background: var(--lg-marque-mot); border-radius: 3px; padding: 1px 4px;
}
.demo-carte-fleche { color: var(--lg-texte-doux); }
.demo-carte-source { font-weight: 700; }
/*
 * ⚠️ **Le haut-parleur est un DÉCOR, et il est marqué comme tel.** La prononciation existe dans
 * le produit (D114) mais elle coûte un appel : le faire marcher ici enverrait de l'audio à tout
 * visiteur de la page. Il est donc `aria-hidden` et il ne réagit pas — un bouton qui ne fait
 * rien est une impasse, un dessin n'en est pas une.
 */
.demo-carte-sons { margin-left: auto; display: flex; gap: 6px; }
.demo-carte-sons span {
  font-size: 12px; font-weight: 700; color: var(--lg-texte-doux);
  border: 2px solid var(--lg-gris-200); border-radius: var(--lg-r-pilule);
  padding: 2px 10px;
}
.demo-carte p { margin: 0; }
.demo-carte strong { color: var(--lg-vert-700); }

.demo-legende {
  text-align: center; font-size: 14.5px; color: var(--lg-texte-doux);
  margin-top: 16px;
}
/*
 * ⚠️⚠️ **CELLE DE LA DÉMO TOMBE SUR LA BANDE VERTE, ET ELLE Y ÉTAIT ILLISIBLE — mesuré à
 * 1,64:1.** `.creux-sous-demo` remonte de 80 px sous le cadre : la légende n'a donc pas le fond
 * de son PARENT, elle a celui d'une section SUIVANTE qui passe dessous. Aucun sélecteur
 * d'ancêtre ne pouvait l'attraper, et c'est ce qui l'a laissée partir — le DOM dit « papier »
 * pendant que l'écran peint du vert.
 * ⚠️ C'est la seule phrase qui dit au visiteur que les mots sont cliquables, c'est-à-dire le
 * mode d'emploi de la seule chose interactive de la page.
 * ⚠️ **Aucun jeton inventé** (en-tête de ce fichier) : `--lg-vert-100` est l'encre que
 * `.creux .sous-h2` pose déjà sur ce même fond. Elle mesure **5,62:1**.
 * ⚠️ L'autre `.demo-legende`, sous le bandeau des cartes, est sur du papier et ne bouge pas.
 * `npm run bench:vitrine` mesure le contraste sur les PIXELS peints, jamais sur le DOM.
 */
.demo-enveloppe .demo-legende { color: var(--lg-vert-100); }

/*
 * ── LES GLOSES, C'EST-À-DIRE LA DÉMO QUAND IL N'Y A PAS DE JAVASCRIPT ─────────────────────
 *
 * ⚠️ **Ce n'est pas un repli au rabais, c'est la même information.** Le script masque cette
 * liste et branche la carte au clic à la place. Écrire les explications uniquement dans un
 * attribut `data-` aurait rendu la page « moins complète » sans script — ce que le patron des
 * pages qui engagent interdit.
 */
.demo-gloses {
  max-width: 62ch; margin: 24px auto 0;
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  font-size: 15px;
}
.demo-gloses dt {
  font-weight: 700;
  background: var(--lg-marque-mot);
  border-radius: 3px; padding: 0 4px;
  justify-self: start;
}
.demo-gloses dd { color: var(--lg-texte-doux); }
[hidden] { display: none !important; }

/* ══ LES SECTIONS ═════════════════════════════════════════════════════════════════════════ */

section { padding: 72px 0; }

/* La section en creux — le « Comment ça marche » de Toucan, et le prix. Fond `--lg-vert-700`,
   qui est un jeton existant : on ne s'invente pas une teinte. */
.creux {
  background: var(--lg-vert-700);
  color: var(--lg-blanc);
}
.creux h2, .creux h3 { color: var(--lg-blanc); }
.creux .oeil { color: var(--lg-vert-300); }
.creux a { color: var(--lg-blanc); }

/* La première section en creux remonte SOUS le cadre de démo : c'est le chevauchement. */
.creux-sous-demo { margin-top: -80px; padding-top: 152px; }

h2 {
  font-family: var(--lg-titre); font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.oeil {
  font-family: var(--lg-titre); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lg-vert-600);
  margin-bottom: 8px;
}
.sous-h2 { font-size: 18px; color: var(--lg-texte-doux); max-width: 40em; }
.creux .sous-h2 { color: var(--lg-vert-100); }

/* ── Les trois étapes ─────────────────────────────────────────────────────────────────────── */

.etapes { list-style: none; display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.etapes li { display: flex; gap: 16px; align-items: flex-start; }
.etapes b {
  font-family: var(--lg-titre); font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lg-vert-500); color: var(--lg-blanc);
  border: 2px solid var(--lg-vert-600); border-bottom-width: 4px;
}
.etapes p { margin: 0; font-size: 16px; }
.etapes strong { display: block; font-weight: 700; margin-bottom: 2px; }
.creux .etapes p { color: var(--lg-vert-100); }
.creux .etapes strong { color: var(--lg-blanc); }

/* ── Les blocs alternés ───────────────────────────────────────────────────────────────────── */

.bloc {
  display: grid; gap: 32px; align-items: center;
  padding: 48px 0;
}
@media (min-width: 900px) {
  .bloc { grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px 0; }
  /* Le bloc inversé : l'image passe à droite. On échange l'ORDRE, jamais le markup — Toucan
     rend chaque bloc deux fois dans le DOM pour faire ça, et c'est un anti-patron. */
  .bloc.retourne .bloc-image { order: 2; }
}
.bloc-image img {
  border-radius: var(--lg-r);
  border: 2px solid var(--lg-gris-200);
  border-bottom-width: 4px;
  box-shadow: 0 8px 24px rgba(22, 22, 22, .06);
}
.bloc-texte h3 {
  font-family: var(--lg-titre); font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.bloc-texte p { color: var(--lg-texte-doux); }
.bloc-texte p + p { margin-top: 12px; }

/* La bannière des trois cartes : elles sont côte à côte, détourées, sur le fond de la page. */
.cartes-bandeau {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  align-items: end; margin: 24px 0 0;
}
/*
 * ⚠️ **Les vignettes sont DÉTOURÉES sur fond transparent** (`tools/recherche/vignettes.mjs` les
 * découpe sur magenta). La bordure et l'ombre de `.bloc-image img` leur dessinaient une boîte
 * autour du vide : on les retire ici, la dalle flotte sur le papier comme elle le fait dans le
 * panneau.
 */
.cartes-bandeau img { border: 0; box-shadow: none; border-radius: 0; }
.cartes-bandeau figure { text-align: center; }
.cartes-bandeau img { margin: 0 auto; }
.cartes-bandeau figcaption {
  font-family: var(--lg-titre); font-weight: 800; font-size: 13px;
  color: var(--lg-texte-doux); margin-top: 4px;
}

/* ── La promesse ──────────────────────────────────────────────────────────────────────────── */

/*
 * L'encart vert veut dire « tenu » partout dans ce produit (`legal.css`, `.tenu`) : il est
 * réservé aux phrases qu'on peut prouver dans le code.
 */
.tenu {
  background: var(--lg-vert-50);
  border: 2px solid var(--lg-vert-100);
  border-left-width: 6px;
  border-radius: 0 var(--lg-r) var(--lg-r) 0;
  padding: 16px 20px;
  margin-top: 24px;
}
.tenu strong { color: var(--lg-vert-700); }

/* ── Les prix ─────────────────────────────────────────────────────────────────────────────── */

.prix { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 760px) { .prix { grid-template-columns: 1fr 1fr; gap: 32px; } }
.offre {
  background: var(--lg-blanc);
  border: 2px solid var(--lg-gris-200);
  border-bottom-width: 4px;
  border-radius: var(--lg-r);
  padding: 24px;
  color: var(--lg-texte);
}
.offre h3 {
  font-family: var(--lg-titre); font-weight: 800; font-size: 20px;
  color: var(--lg-texte); margin-bottom: 4px;
}
.offre .somme {
  font-family: var(--lg-titre); font-weight: 800; font-size: 32px;
  font-variant-numeric: tabular-nums;
  color: var(--lg-vert-700); margin-bottom: 16px;
}
.offre .somme small { font-size: 15px; font-weight: 600; color: var(--lg-texte-doux); }
.offre ul { list-style: none; display: grid; gap: 8px; }
.offre li { padding-left: 26px; position: relative; font-size: 15.5px; }
.offre li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lg-vert-300);
}
.offre .note { font-size: 14px; color: var(--lg-texte-doux); margin-top: 16px; }

/* ══ LE PIED ══════════════════════════════════════════════════════════════════════════════ */

footer {
  border-top: 2px solid var(--lg-gris-200);
  padding: 32px 0 56px;
  font-size: 15px; color: var(--lg-texte-doux);
}
.pied { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; }
.pied nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
footer a { color: var(--lg-vert-700); }
footer a:hover { color: var(--lg-vert-600); }

/* ══ LE MOUVEMENT ═════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ **Tout est gardé.** `prefers-reduced-motion` n'était honoré NULLE PART dans ce dépôt avant
 * D147 ; il l'est ici dès la première écriture. Le curseur ne traverse pas, la carte ne glisse
 * pas — et la démo reste entièrement utilisable, parce que ce qu'elle montre est le TEXTE, pas
 * l'animation.
 */
@media (prefers-reduced-motion: reduce) {
  .demo-curseur { display: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 48px 0; }
  .demo-page { padding: 20px 18px 24px; }
  .creux-sous-demo { margin-top: -56px; padding-top: 104px; }
  .cartes-bandeau { grid-template-columns: 1fr; gap: 24px; }
}

/* Vitrine illustrée : mêmes matières que le panneau et l'inscription.
   La mascotte et la trame sont les composants partagés, les terrains leurs vrais rendus. */
:root { --lg-texte-doux: #536258; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lg-vert-600); outline-offset: 5px; }
.large { max-width: 1248px; padding-inline: 32px; }
.haut { padding: 24px 0; gap: 24px; }
.marque { display: inline-flex; align-items: center; gap: 8px; font-size: 30px; letter-spacing: -.04em; }
.marque img { image-rendering: pixelated; }
.navigation { display: flex; gap: 28px; margin-left: auto; }
.navigation a, .connexion { color: var(--lg-vert-700); font-size: 14px; font-weight: 650; text-decoration: none; }
.navigation a:hover, .connexion:hover { text-decoration: underline; text-underline-offset: 5px; }
.langues { gap: 0; }
.langues a { padding: 6px 8px; color: var(--lg-vert-700); }
.langues a[aria-current] { background: var(--lg-vert-700); }
.accueil { overflow: hidden; }
.heros { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; text-align: left; padding-top: 48px; padding-bottom: 32px; min-height: 620px; }
.heros-texte { position: relative; z-index: 1; padding-bottom: 24px; }
.accroche { display: flex; align-items: center; gap: 8px; font: 600 15px/1.4 var(--lg-corps); color: var(--lg-vert-700); margin-bottom: 24px; }
.accroche span { width: 8px; height: 8px; background: var(--lg-vert-500); }
h1 { max-width: 12em; margin: 0 0 24px; font-size: clamp(40px,4.7vw,64px); line-height: 1.04; letter-spacing: -.035em; color: var(--lg-vert-700); }
h1 mark { padding-inline: 6px; }
.heros .chapo-heros { font-size: 19px; max-width: 27em; margin: 0 0 28px; line-height: 1.6; }
.bouton { font-size: 16px; padding: 14px 24px; background: var(--lg-vert-700); }
.essayer { display: inline-flex; gap: 32px; align-items: center; }
.heros [data-store] { display: block; width: fit-content; background: transparent; border: 0; padding: 0; margin-top: 20px; font: 600 14px var(--lg-corps); color: var(--lg-texte-doux); }
.heros [data-store]:active { border: 0; }
.heros .sous-bouton { max-width: 29em; font-size: 12px; margin-top: 6px; }
.heros-scene { position: relative; height: 540px; isolation: isolate; }
.scene-disque { position: absolute; width: 470px; height: 470px; top: 24px; left: 16px; border-radius: 50%; background: var(--lg-vert-100); z-index: -2; }
.scene-trame { position: absolute; left: -24px; right: -80px; bottom: 16px; height: 360px; z-index: -1; opacity: .75; mask-image: linear-gradient(90deg,transparent,#000 15%,#000 80%,transparent); }
.scene-terrain { position: absolute; width: 570px; max-width: none; left: -16px; bottom: -50px; }
.scene-mascotte { position: absolute; left: 104px; top: 0; transform: rotate(-7deg); }
[data-mascotte] img { image-rendering: pixelated; }
.scene-bulle { position: absolute; left: 310px; top: 5px; padding: 12px 20px; background: var(--lg-blanc); color: var(--lg-vert-700); font: 800 23px var(--lg-titre); transform: rotate(7deg); border-radius: 16px 16px 16px 0; }
.scene-mot { position: absolute; font: 800 21px var(--lg-titre); padding: 8px 16px; background: var(--lg-blanc); color: var(--lg-vert-700); border: 2px solid var(--lg-vert-100); border-bottom-width: 4px; border-radius: 12px; }
.scene-mot-un { left: 0; top: 175px; transform: rotate(-12deg); }
.scene-mot-deux { right: -8px; top: 220px; transform: rotate(9deg); }
.scene-mot-trois { left: 56px; bottom: 40px; transform: rotate(-5deg); }
.faits-enveloppe { position: relative; z-index: 1; }
.faits { justify-content: space-between; margin: 0; padding: 24px 0; border-top: 2px solid var(--lg-vert-100); gap: 16px; }
.faits li { border: 0; border-radius: 0; padding: 0; background: transparent; font-size: 13px; }
.faits li::before { content: '✓'; margin-right: 8px; color: var(--lg-vert-600); }
.demo-enveloppe { max-width: 1056px; padding-top: 40px; }
.demo { border-color: var(--lg-vert-100); box-shadow: 0 8px 0 var(--lg-vert-100); }
.demo-barre { background: var(--lg-vert-50); border-color: var(--lg-vert-100); padding: 16px 20px; }
.demo-page { padding: 32px 48px; font-size: 19px; line-height: 1.85; }
.demo-page p { max-width: none; }
.demo-page p:last-child { margin-bottom: 0; }
.demo-carte { box-shadow: 0 6px 8px #333b3620; }
section { padding: 96px 0; }
.creux { position: relative; isolation: isolate; }
.creux > .large { position: relative; z-index: 1; }
.section-trame { position: absolute; inset: auto 0 0; height: 220px; z-index: -1; opacity: .24; pointer-events: none; }
.creux-sous-demo { margin-top: -96px; padding-top: 176px; padding-bottom: 112px; }
.creux-sous-demo > .large { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 96px; }
.creux-sous-demo .oeil { grid-column: 1; align-self: end; }
.creux-sous-demo h2 { grid-column: 1; font-size: clamp(32px,3.6vw,46px); }
.creux-sous-demo .sous-h2 { grid-column: 1; font-size: 17px; }
.etapes { grid-column: 2; grid-row: 1 / 5; display: flex; flex-direction: column; gap: 24px; margin: 0; }
.etapes li { display: flex; align-items: flex-start; gap: 20px; }
.etapes li b { flex: 0 0 40px; width: 40px; height: 40px; font-size: 20px; background: var(--lg-vert-100); color: var(--lg-vert-700); border: 0; border-radius: 12px; }
.etapes li p { font-size: 15px; color: var(--lg-vert-100); }
.etapes li strong { display: block; font: 800 22px/1.3 var(--lg-titre); color: var(--lg-blanc); margin-bottom: 8px; }
.oeil { text-transform: none; letter-spacing: 0; font-size: 16px; margin-bottom: 16px; }
h2 { font-size: clamp(32px,3.6vw,46px); letter-spacing: -.03em; }
.bloc { position: relative; gap: 72px; padding: 104px 0; }
.bloc-image { background: var(--lg-vert-100); padding: 24px 0 32px 24px; border-radius: 16px; }
.bloc-image img { width: calc(100% + 24px); max-width: none; border: 0; box-shadow: 0 6px 0 #8fcba6; }
.bloc.retourne .bloc-image { background: #eee1ce; padding: 24px 24px 32px 0; }
.bloc.retourne .bloc-image img { margin-left: -24px; box-shadow: 0 6px 0 #cbb38e; }
.bloc-texte h3 { font-size: clamp(28px,3vw,38px); color: var(--lg-vert-700); }
.bloc-texte p { font-size: 16px; line-height: 1.75; }
.compagnon { position: absolute; right: 8px; top: 16px; transform: rotate(8deg); }
.monde { position: relative; background: var(--lg-vert-100); padding-bottom: 64px; }
.monde .etroit { max-width: 800px; }
.monde .oeil { color: var(--lg-vert-700); }
.monde h2 { color: var(--lg-vert-700); }
.monde .sous-h2 { color: var(--lg-vert-700); }
.cartes-bandeau { gap: 0; margin: 40px -16px 0; }
.cartes-bandeau figure:nth-child(2) { transform: translateY(32px); }
.cartes-bandeau figcaption { font-size: 18px; color: var(--lg-vert-700); }
.monde .demo-legende { margin-top: 64px; color: var(--lg-vert-700); }
.tenu { border: 2px solid var(--lg-vert-100); border-radius: 16px; padding: 24px; }
.tarifs { padding-bottom: 112px; }
.tarifs h2 { max-width: 20em; }
.prix { gap: 32px; }
.offre { padding: 32px; border: 0; border-bottom: 6px solid var(--lg-vert-300); }
.offre h3 { color: var(--lg-vert-700); font-size: 24px; }
.offre .somme { font-size: 44px; }
.offre .somme small { display: block; font-size: 14px; }
.offre li { margin-bottom: 4px; }
.finale { position: relative; padding-top: 48px; }
.finale-mascotte { width: 160px; margin: 0 auto 24px; }
.finale h2 { color: var(--lg-vert-700); }
.finale .chapo-heros { margin-top: 24px; font-size: 18px; }
.pied { align-items: center; }
.pied > span { margin-left: auto; font-size: 13px; }
.pied nav { font-size: 13px; }
@media(min-width: 900px) and (prefers-reduced-motion: no-preference) {
 .scene-mascotte { animation: salut 6s ease-in-out infinite; }
 @keyframes salut { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }
}
@media(max-width: 1050px) {
 .navigation { gap: 16px; } .connexion { display: none; }
 .heros { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
 .heros-scene { transform: scale(.85); transform-origin: center left; }
 .creux-sous-demo > .large { column-gap: 48px; }
 .bloc { gap: 48px; }
}
@media(max-width: 760px) {
 .large { padding-inline: 24px; }
 .haut { gap: 16px; padding-block: 16px; } .navigation { display: none; }
 .langues { margin-left: auto; } .marque { font-size: 27px; }
 .heros { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 0; }
 h1 { font-size: clamp(40px,8vw,58px); max-width: 12em; }
 .heros .chapo-heros { font-size: 18px; max-width: 32em; }
 .heros-scene { width: 500px; height: 470px; transform: scale(.8); transform-origin: top center; justify-self: center; margin-bottom: -80px; }
 .scene-terrain { bottom: -110px; }
 .faits { justify-content: start; gap: 12px 24px; }
 .faits li { font-size: 12px; }
 .demo-enveloppe { padding-top: 24px; }
 .demo-page { font-size: 16px; line-height: 1.8; padding: 24px; }
 .creux-sous-demo { padding-top: 152px; padding-bottom: 64px; }
 .creux-sous-demo > .large { display: block; }
 .etapes { margin-top: 32px; }
 section { padding: 64px 0; }
 .bloc { padding: 64px 0; gap: 40px; }
 .bloc-image { margin-right: 24px; }
 .bloc.retourne .bloc-image { margin-left: 24px; margin-right: 0; }
 .compagnon { top: -8px; right: 0; }
 .cartes-bandeau { grid-template-columns: 1fr; gap: 24px; margin: 24px 0 0; }
 .cartes-bandeau figure:nth-child(2) { transform: none; }
 .cartes-bandeau img { max-width: 420px; width: 100%; }
 .monde .demo-legende { margin-top: 32px; }
 .offre { padding: 24px; }
 .pied > span { margin-left: 0; } .pied nav { width: 100%; }
}
@media(max-width: 400px) {
 .heros-scene { transform: scale(.66); margin-bottom: -144px; }
 .accroche { font-size: 13px; }
 .large { padding-inline: 20px; }
 .demo-page { padding: 20px 16px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Les décors débordent volontairement ; ils ne fixent jamais la largeur du texte. */
.heros-texte { min-width: 0; }
@media(max-width: 760px) { .heros { grid-template-columns: minmax(0, 1fr); } }
@media(min-width: 761px) and (max-width: 1050px) {
 .heros-scene { width: 500px; transform: scale(.7); transform-origin: left center; }
}