/* ═══════════════════════════════════════════════════════════════════
   MDG — LE SYSTÈME
   ───────────────────────────────────────────────────────────────────
   Une seule grammaire pour toutes les pages : les jetons, l'échelle
   typographique, l'échelle d'espacement, la grille, la coque (en-tête,
   pied) et les quelques composants qui reviennent partout.

   RÈGLES DU FICHIER.
   - Aucun !important. Si une règle ne gagne pas, c'est la cascade qu'on
     corrige, pas la règle.
   - Mobile d'abord : la valeur de base est celle du téléphone, les
     @media n'ajoutent que ce que l'écran large permet.
   - Cinq tailles de texte, huit pas d'espacement. Une taille qui n'est
     pas dans l'échelle n'existe pas.
   - Séparer par l'espace avant de séparer par un trait ; par un trait
     avant un fond ; jamais par une ombre.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. JETONS ═══════════════════════════════════════════════════ */
:root {
  /* Couleurs — le noir, la crème, l'acide. Rien d'autre. */
  --noir:      #060606;
  --noir-2:    #0c0c0c;
  --encre:     #101206;            /* texte posé sur l'acide */
  --creme:     #f0ede8;
  --creme-2:   #e4e0d9;
  --gris:      #9b968f;            /* texte secondaire sur noir */
  --gris-2:    #625d57;            /* texte secondaire sur crème */
  /* L'ACIDE A DEUX NOMS ET C'EST VOULU. --accent-vif ne change jamais :
     c'est LA couleur. --accent est ce que la page en cours appelle son
     accent — l'Atelier, qui est blanc, y met la version lisible. Sans
     ce nom fixe, une page qui redefinit --accent ne pourrait plus
     atteindre le vif : elle se pointerait elle-meme. */
  --accent-vif: #E4FA5A;
  --accent:    var(--accent-vif);
  --accent-rgb: 228, 250, 90;
  /* L'ACIDE NE SE LIT PAS SUR LA CREME. Meme teinte, descendue en
     valeur : c'est le meme signal, dans l'autre sens. */
  --accent-sombre: #7E8E1F;
  --trait:     rgba(240, 237, 232, .12);
  --trait-fort: rgba(240, 237, 232, .28);
  --trait-creme: rgba(6, 6, 6, .14);

  /* Alias lus par assets/portrait.js (le casque liquide). */
  --light:  var(--creme);
  --dark:   var(--noir);

  /* Polices — deux familles, et la serif pour trois moments. */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-texte:   'Archivo', system-ui, sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;

  /* Échelle typographique — cinq tailles + la signature. */
  --t-signature: clamp(3.6rem, 11vw, 11rem);
  --t-1: clamp(2.3rem, 5.4vw, 5.4rem);
  --t-2: clamp(1.45rem, 2.4vw, 2.2rem);
  --t-3: clamp(1.08rem, 1.3vw, 1.22rem);
  --t-4: 1rem;
  --t-5: .74rem;

  /* Échelle d'espacement — huit pas. */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2.5rem;
  --e-6: 4rem;
  --e-7: clamp(4.5rem, 9vw, 7.5rem);
  --e-8: clamp(6rem, 14vw, 12rem);

  /* Grille. */
  --marge: clamp(1rem, 4.2vw, 4rem);
  --gout:  clamp(1rem, 2vw, 2rem);
  --colonnes: 12;

  /* Mouvement — une seule courbe, trois durées. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d-court: .35s;
  --d-moyen: .7s;
  --d-long: 1.1s;

  --rayon: clamp(12px, 1.4vw, 18px);
  --rayon-g: clamp(16px, 2.2vw, 28px);
  color-scheme: dark;
}

/* ═══ 2. REMISE À ZÉRO ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--noir);
}
/* Lenis conduit le défilement : le lissage natif se met en travers. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--f-texte);
  font-size: var(--t-4);
  line-height: 1.55;
  color: var(--creme);
  background: var(--noir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--encre); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ 3. TYPOGRAPHIE ══════════════════════════════════════════════ */
.t-signature, .t-1, .t-2 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .92;
  text-wrap: balance;
}
.t-signature { font-size: var(--t-signature); line-height: .86; letter-spacing: -.045em; }
.t-1 { font-size: var(--t-1); }
.t-2 { font-size: var(--t-2); letter-spacing: -.02em; line-height: 1.05; }
.t-3 { font-size: var(--t-3); line-height: 1.5; }
.t-4 { font-size: var(--t-4); }
.t-5 {
  font-family: var(--f-display);
  font-size: var(--t-5);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* La serif : trois moments dans la page, jamais plus. */
.serif {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
}
.t-signature .serif { font-size: .94em; }
.t-1 .serif { font-size: 1.02em; }

.gris { color: var(--gris); }
.acide { color: var(--accent); }
.mesure { max-width: 34em; }
.mesure-courte { max-width: 24em; }

/* Le chiffre de section : petit, à sa place, jamais décoratif. */
.numero {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-5);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--gris);
}

/* ═══ 4. GRILLE ═══════════════════════════════════════════════════ */
.page { padding-inline: var(--marge); }
.grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gout);
  row-gap: var(--e-5);
}
/* Un enfant se place avec --c (départ) et --l (largeur). */
.grille > * { grid-column: var(--c, 1) / span var(--l, 12); }

/* Une section commence toujours par le même en-tête : chiffre, titre,
   note. C'est ce qui donne au défilement son rythme. */
.section { padding-block: var(--e-8); }
.section-tete { row-gap: var(--e-4); align-items: end; margin-bottom: var(--e-6); }
.section-tete .numero { --l: 12; align-self: start; padding-top: .6em; }
.section-tete .t-1 { --l: 12; }
.section-tete .note { --l: 12; color: var(--gris); }
.section-tete .note a { color: var(--creme); }

@media (min-width: 900px) {
  .section-tete .numero { --l: 1; }
  .section-tete .t-1 { --c: 2; --l: 7; }
  .section-tete .note { --c: 10; --l: 3; padding-bottom: .5em; }
  .section-tete--large .t-1 { --l: 9; }
  .section-tete--large .note { --c: 1; --l: 4; margin-top: var(--e-3); }
  .section-tete--large .note { --c: 2; }
}

/* Les sections sur crème : la même grammaire, les couleurs retournées. */
.creme {
  background: var(--creme);
  color: var(--encre);
  --gris: var(--gris-2);
  --trait: var(--trait-creme);
  --trait-fort: rgba(6, 6, 6, .32);
  color-scheme: light;
}
.creme ::selection { background: var(--encre); color: var(--accent); }
.creme .section-tete .note a { color: var(--encre); }

/* ═══ 5. LIENS ET BOUTONS ═════════════════════════════════════════ */
.lien {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--f-display);
  font-weight: 500;
  padding-bottom: .1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-court) var(--ease);
}
.lien:hover { background-size: 0 1px; background-position: 100% 100%; }
.lien i { font-style: normal; transition: transform var(--d-court) var(--ease); }
.lien:hover i { transform: translateX(.25em); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.1rem;
  padding: .85em 1.5em;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-4);
  line-height: 1;
  white-space: nowrap;
  background: var(--accent);
  color: var(--encre);
  transition: transform var(--d-court) var(--ease), background var(--d-court);
}
.bouton:hover { transform: translateY(-1px); background: #edff7a; }
.bouton:active { transform: translateY(0); }
.bouton i { font-style: normal; transition: transform var(--d-court) var(--ease); }
.bouton:hover i { transform: translateX(.25em); }
.bouton--contour {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
}
.bouton--contour:hover { background: rgba(240, 237, 232, .06); }
.creme .bouton--contour:hover { background: rgba(6, 6, 6, .05); }

/* Le trait : la seule manière de séparer quand l'espace ne suffit pas. */
.trait { border-top: 1px solid var(--trait); }

.bouton--encre { background: var(--encre); color: var(--creme); }
.bouton--encre:hover { background: #000; }

/* L'étiquette posée sur une image, et la pastille acide. */
.etiquette {
  display: inline-flex;
  align-items: center;
  padding: .5em .9em;
  border-radius: 999px;
  background: rgba(6, 6, 6, .82);
  color: var(--creme);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.pastille {
  display: inline-flex;
  padding: .3em .7em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--encre);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* La carte sombre : une surface, un trait, un rayon. */
.carte-sombre {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--rayon-g);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
}

/* ═══ 6. LA COQUE — EN-TÊTE ═══════════════════════════════════════ */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--marge);
  color: var(--creme);
  transition: background var(--d-moyen) var(--ease);
}
.entete::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--noir) 30%, rgba(6, 6, 6, 0));
  opacity: 0;
  transition: opacity var(--d-moyen) var(--ease);
  pointer-events: none;
}
.entete.est-defile::before { opacity: 1; }
/* Au-dessus d'une section crème, l'en-tête passe en noir sur crème. */
.entete.sur-creme { color: var(--encre); }
.entete.sur-creme::before { background: linear-gradient(var(--creme) 30%, rgba(240, 237, 232, 0)); }
.entete.sur-creme .entete-logo img { filter: invert(1) brightness(0); }
.entete.sur-creme .entete-nav a, .entete.sur-creme .entete-lang { color: var(--gris-2); }
.entete.sur-creme .entete-nav a:hover, .entete.sur-creme .entete-nav a[aria-current="true"], .entete.sur-creme .entete-lang:hover { color: var(--encre); }
.entete-logo img { height: 34px; width: auto; }
.entete-nav { display: none; }
.entete-nav a {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
  padding: .3em 0;
  color: var(--gris);
  transition: color var(--d-court);
}
.entete-nav a:hover, .entete-nav a[aria-current="true"] { color: var(--creme); }
.entete-droite { display: flex; align-items: center; gap: var(--e-4); }
.entete-droite .bouton { min-height: 2.6rem; padding: .7em 1.2em; font-size: .92rem; }
.entete-lang {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--gris);
}
.entete-lang:hover { color: var(--creme); }
.entete-menu {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
}
.entete-menu span:last-child {
  display: block;
  width: 22px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: transform var(--d-court) var(--ease);
}

@media (min-width: 900px) {
  .entete-nav { display: flex; gap: var(--e-4); }
  .entete-menu { display: none; }
  .entete-droite .bouton { display: inline-flex; }
}
@media (max-width: 899px) {
  .entete-droite .bouton { display: none; }
  .entete-lang { display: none; }
}

/* Le menu du téléphone : un seul calque, plein écran, de grands liens. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: calc(var(--e-3) + 34px + var(--e-5)) var(--marge) var(--e-5);
  background: var(--noir);
  color: var(--creme);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-moyen) var(--ease), visibility 0s var(--d-moyen);
}
.menu.est-ouvert { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu-fermer {
  position: absolute;
  top: var(--e-3);
  right: var(--marge);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.menu-liens { display: grid; gap: var(--e-2); }
.menu-liens a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  letter-spacing: -.035em;
  line-height: 1;
  padding: .12em 0;
  border-bottom: 1px solid var(--trait);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transform: translateY(.4em);
  opacity: 0;
  transition: transform var(--d-long) var(--ease), opacity var(--d-long) var(--ease);
}
.menu.est-ouvert .menu-liens a { transform: none; opacity: 1; }
.menu-liens a:nth-child(2) { transition-delay: .05s; }
.menu-liens a:nth-child(3) { transition-delay: .1s; }
.menu-liens a:nth-child(4) { transition-delay: .15s; }
.menu-liens a:nth-child(5) { transition-delay: .2s; }
.menu-liens a:nth-child(6) { transition-delay: .25s; }
.menu-liens a:nth-child(7) { transition-delay: .3s; }
.menu-liens a small { font-size: var(--t-5); font-weight: 500; letter-spacing: .16em; color: var(--gris); }
.menu-pied {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  color: var(--gris);
  font-size: .9rem;
}
.menu-pied .bouton { flex: 1 1 100%; }
body.menu-ouvert { overflow: hidden; }

/* ═══ 7. LA COQUE — PIED ══════════════════════════════════════════
   Court : la marque, les liens sur une ligne, les reseaux, la mention. */
.pied {
  padding-block: var(--e-6) var(--e-4);
  border-top: 1px solid var(--trait);
  color: var(--gris);
  font-size: .9rem;
}
.pied-haut { display: grid; gap: var(--e-5); }
.pied-marque { display: grid; gap: var(--e-3); }
.pied-marque img { height: 32px; width: auto; }
.pied-marque p { max-width: 26em; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }
.pied-liens a { color: var(--gris); transition: color var(--d-court); font-family: var(--f-display); font-weight: 500; font-size: .9rem; }
.pied-liens a:hover { color: var(--creme); }
.pied-liens a b { color: var(--accent); font-weight: 500; font-size: var(--t-5); letter-spacing: .12em; margin-left: .4em; }
.pied-reseaux { display: flex; gap: var(--e-2); }
.pied-reseaux a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--creme);
  transition: background var(--d-court), color var(--d-court), box-shadow var(--d-court);
}
.pied-reseaux a:hover { background: var(--accent); color: var(--encre); box-shadow: none; }
.pied-reseaux svg { width: 17px; height: 17px; }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait);
  font-size: var(--t-5);
  font-family: var(--f-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .pied-haut { grid-template-columns: 1fr auto auto; align-items: center; gap: var(--e-6); }
  .pied-marque { grid-template-columns: auto 1fr; align-items: center; gap: var(--e-4); }
  .pied-marque p { max-width: 24em; }
}

/* ═══ 8. LE MOUVEMENT ═════════════════════════════════════════════
   Trois signatures et rien d'autre : le casque liquide (portrait.js),
   l'arrivée des sections (ici), la transition de page (ici). */

/* Arrivée : tout ce qui porte data-arrive part légèrement plus bas et
   transparent ; accueil.js pose .est-la quand l'élément entre. Un
   groupe (data-arrive-groupe) échelonne ses enfants. */
[data-arrive], [data-arrive-groupe] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--d-long) var(--ease), transform var(--d-long) var(--ease);
}
[data-arrive].est-la, [data-arrive-groupe].est-la > * { opacity: 1; transform: none; }
[data-arrive-groupe].est-la > :nth-child(2) { transition-delay: .08s; }
[data-arrive-groupe].est-la > :nth-child(3) { transition-delay: .16s; }
[data-arrive-groupe].est-la > :nth-child(4) { transition-delay: .24s; }
[data-arrive-groupe].est-la > :nth-child(5) { transition-delay: .32s; }
[data-arrive-groupe].est-la > :nth-child(6) { transition-delay: .4s; }
[data-arrive-groupe].est-la > :nth-child(n+7) { transition-delay: .48s; }

/* Les titres arrivent ligne par ligne : chaque ligne est un .l qu'on
   masque puis qu'on laisse monter. */
.lignes .l { display: block; overflow: hidden; }
.lignes .l > span { display: block; transform: translateY(110%); transition: transform var(--d-long) var(--ease); }
.lignes.est-la .l > span { transform: none; }
.lignes.est-la .l:nth-child(2) > span { transition-delay: .1s; }
.lignes.est-la .l:nth-child(3) > span { transition-delay: .2s; }

/* Sans JavaScript, rien n'est masque : la classe `arrive` n'est posee
   que par script, et ces regles ne s'appliquent qu'avec elle. */
html:not(.arrive):not(.pret) [data-arrive], html:not(.arrive):not(.pret) [data-arrive-groupe] > * { opacity: 1; transform: none; }
html:not(.arrive):not(.pret) .lignes .l > span { transform: none; }

/* Transition de page : un voile noir qui se lève au chargement et
   retombe quand on part. */
.voile {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--noir);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-moyen) var(--ease);
}
.voile.est-pose { opacity: 1; pointer-events: auto; }
html.arrive .voile { opacity: 1; transition: none; }

/* ═══ 9. LE PORTRAIT — contrat de assets/portrait.js ══════════════ */
.moi-vue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--creme);
  touch-action: none;
}
.moi-im {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  mix-blend-mode: multiply;
}
.moi-im--b { position: absolute; inset: 0; }
.moi-vue--gl .moi-im { visibility: hidden; }
.moi-toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ═══ 10. LA LUCARNE ══════════════════════════════════════════════
   Une seule boîte pour voir une pièce en grand ou un extrait vidéo. */
.lucarne {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 6, 6, .96);
  color: var(--creme);
}
.lucarne::backdrop { background: transparent; }
.lucarne[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lucarne-haut, .lucarne-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--marge);
}
.lucarne-haut .numero { color: var(--gris); }
.lucarne-fermer, .lucarne-nav button {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--creme);
}
.lucarne-nav { display: flex; gap: var(--e-4); }
.lucarne-nav button:disabled { opacity: .3; cursor: default; }
.lucarne-scene {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--marge);
}
.lucarne-scene img, .lucarne-scene video {
  border-radius: var(--rayon);
  max-width: 100%;
  max-height: calc(100vh - 2 * (var(--e-3) * 2 + 34px));
  width: auto;
  height: auto;
  object-fit: contain;
}
.lucarne-scene iframe {
  width: min(100%, calc((100vh - 140px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon);
  background: #000;
}
.lucarne-titre { font-family: var(--f-display); font-weight: 500; }
.lucarne-titre small { display: block; color: var(--gris); font-weight: 400; font-family: var(--f-texte); }

/* ═══ 11. UTILITAIRES ═════════════════════════════════════════════ */
.visuel-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.seulement-large { display: none; }
@media (min-width: 900px) {
  .seulement-large { display: revert; }
  .seulement-etroit { display: none; }
}

/* ═══ 12. COMPOSANTS PARTAGÉS ═════════════════════════════════════
   Ce qui revient d'une page à l'autre : les tuiles de chiffres, la
   liste qui commande un panneau, les étapes, le cadre, la carte crème,
   la citation et les logos, la FAQ. Une page ne redéfinit rien ici,
   elle place. */

/* Les tuiles de chiffres. */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout); }
.tuile {
  padding: var(--e-4) var(--e-3);
  border-radius: var(--rayon);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  display: grid;
  gap: var(--e-2);
  align-content: end;
  min-height: 7.5rem;
}
.tuile--acide { background: var(--accent); color: var(--encre); box-shadow: none; }
.tuile b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.tuile b i { font-style: normal; color: var(--accent); }
.tuile--acide b i { color: var(--encre); opacity: .55; }
.tuile > span { display: block; color: var(--gris); font-size: .86rem; }
.tuile--acide > span { color: var(--encre); opacity: .75; }


/* La liste qui commande un panneau (expertises, familles de packs). */
.expertises { row-gap: var(--e-4); }
.onglets { --l: 12; display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 2.6rem;
  padding: .55em 1.1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--gris);
  white-space: nowrap;
  transition: background var(--d-court), color var(--d-court), box-shadow var(--d-court);
}
.onglet .numero { font-size: .68rem; }
.onglet i { display: none; }
.onglet:hover { color: var(--creme); }
.onglet[aria-selected="true"] { background: var(--accent); color: var(--encre); box-shadow: none; }
.onglet[aria-selected="true"] .numero { color: var(--encre); opacity: .6; }

.panneaux { --l: 12; }
.panneau {
  display: grid;
  gap: var(--e-4);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--rayon-g);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  animation: apparait var(--d-moyen) var(--ease);
}
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } }
.panneau[hidden] { display: none; }
.panneau-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3); }
.panneau .mots { display: flex; flex-wrap: wrap; gap: .4em 1.2em; color: var(--gris); font-size: var(--t-5); font-family: var(--f-display); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.panneau .t-1 { font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
.panneau .t-3 { color: var(--gris); max-width: 34em; }
.panneau-inclus { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.panneau-inclus .t-5 { color: var(--gris); }
.panneau-inclus ul { display: grid; gap: .5em; }
.panneau-inclus li { position: relative; padding-left: 1.3em; }
.panneau-inclus li::before { content: ''; position: absolute; left: .1em; top: .62em; width: .42em; height: .42em; background: var(--accent); transform: rotate(45deg); }
.panneau .bouton { justify-self: start; }

@media (min-width: 900px) {
  .onglets { --l: 4; flex-direction: column; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 0; border-top: 1px solid var(--trait-fort); align-self: start; position: sticky; top: calc(34px + var(--e-3) * 3); }
  .onglet {
    display: grid;
    grid-template-columns: 2.6em 1fr auto;
    align-items: baseline;
    width: 100%;
    padding: 1em 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--trait);
    font-size: 1.05rem;
    white-space: normal;
    text-align: left;
    transition: padding-left var(--d-court) var(--ease), color var(--d-court);
  }
  .onglet i { display: inline; font-style: normal; color: var(--accent); opacity: 0; transition: opacity var(--d-court), transform var(--d-court) var(--ease); transform: translateX(-.4em); }
  .onglet:hover { padding-left: .5em; }
  .onglet[aria-selected="true"] { background: none; color: var(--creme); padding-left: .5em; }
  .onglet[aria-selected="true"] .numero { color: var(--accent); opacity: 1; }
  .onglet[aria-selected="true"] i { opacity: 1; transform: none; }
  .panneaux { --c: 6; --l: 7; }
  .panneau-inclus ul { grid-template-columns: 1fr 1fr; column-gap: var(--e-4); }
}


/* Les étapes et le cadre. */
.methode { margin-top: var(--e-7); row-gap: var(--e-5); }
.methode-tete { --l: 12; display: grid; gap: var(--e-2); }
.methode-tete .gris { max-width: 34em; }
.methode-etapes { --l: 12; display: grid; gap: var(--gout); }
.etape {
  padding: var(--e-4);
  border-radius: var(--rayon);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  display: grid;
  gap: var(--e-2);
  align-content: start;
}
.etape .numero { color: var(--accent); }
.etape b { font-family: var(--f-display); font-weight: 500; font-size: var(--t-3); }
.etape p { color: var(--gris); font-size: .95rem; }
.etape small { color: var(--creme); font-family: var(--f-display); font-weight: 500; font-size: var(--t-5); letter-spacing: .14em; text-transform: uppercase; margin-top: var(--e-2); }
.cadre {
  --l: 12;
  display: grid;
  gap: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  color: var(--gris);
}
.cadre .t-5 { color: var(--gris); }
.cadre ul { display: flex; flex-wrap: wrap; gap: .5em 1.6em; }
.cadre li b { color: var(--creme); font-weight: 500; }
@media (min-width: 900px) {
  .methode-tete { --l: 5; }
  .methode-etapes { grid-template-columns: repeat(4, 1fr); }
  .cadre { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-5); }
}


/* La carte crème : une chose gratuite, une invitation. */
.apprendre {
  display: grid;
  gap: var(--e-4);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--rayon-g);
  background: var(--creme);
  color: var(--encre);
  --gris: var(--gris-2);
}
.apprendre-txt { display: grid; gap: var(--e-2); }
.apprendre-txt .numero { display: inline-flex; align-items: center; gap: .8em; color: var(--gris-2); }
.apprendre-txt p { color: var(--gris-2); max-width: 30em; }
@media (min-width: 900px) {
  .apprendre { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-6); }
}


/* Sur crème : logos, citation, témoins, noms. */
.logos {
  --l: 12;
  display: flex;
  gap: var(--e-5);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--e-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.logos::-webkit-scrollbar { display: none; }
.logos img { height: 40px; width: auto; flex: none; filter: brightness(0); opacity: .55; transition: opacity var(--d-court); }
.logos img:hover { opacity: 1; }
.logos img.grand { height: 52px; }
.citation { --l: 12; display: grid; gap: var(--e-4); }
.citation blockquote { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; }
.citation blockquote mark { background: var(--accent); color: var(--encre); padding: 0 .08em; border-radius: .15em; }
.citation figcaption { display: flex; align-items: center; gap: var(--e-3); }
.citation figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.citation figcaption b { display: block; font-family: var(--f-display); font-weight: 500; }
.citation figcaption span { color: var(--gris); font-size: .92rem; }
.temoins { --l: 12; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.temoin { display: grid; gap: var(--e-2); text-align: left; color: inherit; }
.temoin-cadre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme-2); border-radius: var(--rayon); }
.temoin-cadre img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 1.2s var(--ease), filter var(--d-moyen); }
.temoin:hover .temoin-cadre img { transform: scale(1.03); filter: grayscale(0); }
.temoin-cadre::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23101206'/%3E%3C/svg%3E") center / 24px no-repeat;
  transition: transform var(--d-court) var(--ease);
}
.temoin:hover .temoin-cadre::after { transform: translate(-50%, -50%) scale(1.08); }
.temoin b { font-family: var(--f-display); font-weight: 500; }
.temoin span { color: var(--gris); font-size: .92rem; }
.noms { --l: 12; color: var(--gris); font-size: .92rem; line-height: 1.8; padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.noms b { color: var(--encre); font-weight: 500; }
@media (min-width: 900px) {
  .citation { --l: 8; }
  .temoins { grid-template-columns: repeat(4, 1fr); gap: var(--gout); }
  .logos { justify-content: space-between; overflow: visible; mask-image: none; -webkit-mask-image: none; }
}


/* La FAQ. */
.faq { --l: 12; margin-top: var(--e-7); display: grid; gap: var(--e-4); }
.faq-liste { display: grid; border-top: 1px solid var(--trait-fort); }
.faq-liste details { border-bottom: 1px solid var(--trait); }
.faq-liste summary {
  display: grid;
  grid-template-columns: 2.6em 1fr auto;
  gap: var(--e-3);
  align-items: baseline;
  padding: 1em 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 500;
  transition: padding-left var(--d-court) var(--ease);
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary:hover { padding-left: .5em; }
.faq-liste summary .signe { color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform var(--d-moyen) var(--ease); }
.faq-liste details[open] summary .signe { transform: rotate(45deg); }
.faq-liste details p { padding: 0 0 var(--e-4) 2.6em; color: var(--gris); max-width: 40em; }
.faq-liste details p b { color: var(--creme); font-weight: 500; }
@media (min-width: 900px) {
  .faq-liste { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
  .faq-liste summary { grid-template-columns: 3.4em 1fr auto; }
  .faq-liste details p { padding-left: 3.4em; }
}

/* L'état : un point acide qui pulse, et un mot. */
.etat {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--gris);
  font-size: var(--t-5);
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.etat::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pouls 2.4s infinite;
}
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); }
  70% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}