/* Elli 9alou OUI · site · design system « Le Badge »
   Tokens, composants (d'après components/bundle.css) et mise en page du site.
   Règles : crème / encre, Rubik seule, aucune ombre, aucun dégradé, une couleur par surface. */

/* ---------- Police ---------- */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --fond: #fbf7ef; --fond-carte: #f3ede0; --fond-fenetre: #ffffff;
  --encre: #1c1b18; --encre-douce: #5c5850; --ficelle: #e4dccb; --trait-controle: #8a8476;
  --focus: #1b5fc7; --marque: #1c1b18; --sur-marque: #fbf7ef; --encre-sur-voix: #1c1b18;
  --voix-01: #fd7466; --voix-02: #fe894e; --voix-03: #fca444; --voix-04: #fbc044; --voix-05: #f0d947;
  --voix-06: #cbe25c; --voix-07: #9ce578; --voix-08: #61e293; --voix-09: #19d9af; --voix-10: #0dcbc3;
  --voix-11: #22bccf; --voix-12: #18aedc; --voix-13: #2fa0ed; --voix-14: #5e8fed; --voix-15: #8285eb;
  --voix-16: #9e7be1; --voix-17: #bc79d6; --voix-18: #d578c5; --voix-19: #ee76af; --voix-20: #fb718c;
  --voix-01-teinte: #feebe8; --voix-02-teinte: #feece4; --voix-03-teinte: #ffeddd; --voix-04-teinte: #fceed6; --voix-05-teinte: #f5f1d7;
  --voix-06-teinte: #eef4da; --voix-07-teinte: #e6f6df; --voix-08-teinte: #dff8e6; --voix-09-teinte: #daf8ed; --voix-10-teinte: #d7f8f5;
  --voix-11-teinte: #d6f7fc; --voix-12-teinte: #def4fe; --voix-13-teinte: #e4f2ff; --voix-14-teinte: #e9f1ff; --voix-15-teinte: #edefff;
  --voix-16-teinte: #f2edfe; --voix-17-teinte: #f9eaff; --voix-18-teinte: #ffe8f9; --voix-19-teinte: #ffeaf2; --voix-20-teinte: #feebed;
  --font-sans: "Rubik", "Noto Sans Arabic", system-ui, sans-serif;
  --font-arabe: "Rubik", "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif;
  --pas-1: 4px; --pas-2: 8px; --pas-3: 12px; --pas-4: 16px; --pas-6: 24px; --pas-8: 32px; --pas-12: 48px; --pas-16: 64px; --pas-24: 96px; --pas-32: 128px;
  --rond: 999px; --fenetre: 28px; --carte: 20px; --puce: 12px;
  --trait: 1.5px; --trait-fort: 3px;
  --largeur: 1200px; --marge: var(--pas-4);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #1c1b18; --fond-carte: #26241f; --fond-fenetre: #2e2b25;
    --encre: #fbf7ef; --encre-douce: #b9b2a3; --ficelle: #3c3930; --trait-controle: #8e887a;
    --focus: #7fb8ff; --marque: #fbf7ef; --sur-marque: #1c1b18;
    --voix-01-teinte: #4a231f; --voix-02-teinte: #492614; --voix-03-teinte: #45290a; --voix-04-teinte: #3f2d04; --voix-05-teinte: #373105;
    --voix-06-teinte: #2e340c; --voix-07-teinte: #223717; --voix-08-teinte: #133922; --voix-09-teinte: #003a2d; --voix-10-teinte: #003936;
    --voix-11-teinte: #00383e; --voix-12-teinte: #003647; --voix-13-teinte: #11334c; --voix-14-teinte: #1f304f; --voix-15-teinte: #2b2c4e;
    --voix-16-teinte: #34294b; --voix-17-teinte: #3c2645; --voix-18-teinte: #42243d; --voix-19-teinte: #472333; --voix-20-teinte: #4a2229;
  }
}
:root[data-theme="dark"] {
  --fond: #1c1b18; --fond-carte: #26241f; --fond-fenetre: #2e2b25;
  --encre: #fbf7ef; --encre-douce: #b9b2a3; --ficelle: #3c3930; --trait-controle: #8e887a;
  --focus: #7fb8ff; --marque: #fbf7ef; --sur-marque: #1c1b18;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: var(--trait-fort) solid var(--focus); outline-offset: 2px; border-radius: var(--puce); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oui-ar, [lang="ar"] { direction: rtl; text-align: right; font-family: var(--font-arabe); unicode-bidi: isolate; }

/* Échelle typo */
.titre { font-size: clamp(30px, 5vw, 36px); font-weight: 700; }
.sous-titre { font-size: clamp(20px, 3.2vw, 24px); font-weight: 500; line-height: 1.25; }
.intro { font-size: 20px; line-height: 1.5; }
.corps { font-size: 17px; }
.legende { font-size: 14px; color: var(--encre-douce); }
.etiquette { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.verbatim-hero { font-size: clamp(34px, 6vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.oui-geant { font-size: clamp(88px, 18vw, 120px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; }

/* ---------- Composants (Le Badge) ---------- */
.oui-badge { --oui-taille: 14px; display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--oui-taille); line-height: 1; font-weight: 700; letter-spacing: 0.01em; padding: 0.6em 0.95em; border-radius: var(--rond); background: var(--voix, var(--marque)); color: var(--encre-sur-voix); white-space: nowrap; vertical-align: middle; }
.oui-badge--marque { background: var(--marque); color: var(--sur-marque); }
.oui-badge--s { --oui-taille: 12px; } .oui-badge--l { --oui-taille: 20px; }
.oui-badge__oui { font-weight: 800; letter-spacing: -0.01em; }

.oui-pastille { --oui-taille: 48px; display: inline-flex; align-items: center; justify-content: center; width: var(--oui-taille); height: var(--oui-taille); border-radius: var(--rond); background: var(--voix, var(--marque)); color: var(--encre-sur-voix); font-weight: 800; font-size: calc(var(--oui-taille) * 0.30); letter-spacing: -0.02em; line-height: 1; flex: none; }
.oui-pastille--marque { background: var(--marque); color: var(--sur-marque); }
.oui-pastille--s { --oui-taille: 32px; } .oui-pastille--l { --oui-taille: 96px; }

.oui-fenetre { position: relative; overflow: hidden; border-radius: var(--fenetre); background: var(--fond-fenetre); border: var(--trait) solid var(--ficelle); aspect-ratio: 4 / 5; width: 100%; }
.oui-fenetre > img, .oui-fenetre > video { width: 100%; height: 100%; object-fit: cover; }
.oui-fenetre--ronde { border-radius: var(--rond); aspect-ratio: 1 / 1; }
.oui-fenetre--paysage { aspect-ratio: 3 / 2; }
.oui-fenetre--portrait { aspect-ratio: 9 / 16; }
/* Bichromie couleur de voix : réservée aux frames des entretiens. Noir pour les ombres, couleur de la voix pour les lumières. */
.oui-fenetre--voix { background: var(--voix, var(--marque)); border-color: var(--voix, var(--marque)); }
.oui-fenetre--voix > img { filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; }

.oui-verbatim { display: grid; gap: var(--pas-4); align-content: start; padding: var(--pas-8); border-radius: var(--fenetre); background: var(--voix-teinte, var(--fond-carte)); color: var(--encre); }
.oui-verbatim--voix { background: var(--voix); color: var(--encre-sur-voix); }
.oui-verbatim--neutre { background: var(--fond-carte); }
.oui-verbatim__derja { margin: 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.oui-verbatim__derja--hero { font-size: clamp(32px, 6vw, 56px); line-height: 1.05; }
.oui-verbatim__pont { margin: 0; font-size: 18px; line-height: 1.45; color: var(--encre-douce); }
.oui-verbatim--voix .oui-verbatim__pont { color: var(--encre-sur-voix); }
.oui-verbatim__auteur { display: flex; align-items: center; gap: var(--pas-3); margin-top: var(--pas-2); font-size: 15px; font-weight: 500; }
.oui-verbatim__auteur small { font-weight: 400; color: var(--encre-douce); }
.oui-verbatim__auteur a { text-decoration: none; }

.oui-carte-voix { display: grid; gap: var(--pas-3); align-content: start; padding: var(--pas-6); border-radius: var(--carte); background: var(--voix-teinte, var(--fond-carte)); color: var(--encre); border-top: var(--trait-fort) solid var(--voix, var(--marque)); text-decoration: none; }
.oui-carte-voix__photo { width: 96px; }
.oui-carte-voix__nom { margin: var(--pas-2) 0 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.oui-carte-voix__role { margin: 0; font-size: 15px; line-height: 1.4; color: var(--encre-douce); }
.oui-carte-voix__phrase { margin: var(--pas-2) 0 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.oui-carte-voix__pied { display: flex; align-items: center; gap: var(--pas-3); margin-top: var(--pas-2); font-size: 14px; color: var(--encre-douce); }

.oui-ligne { --oui-point: 12px; display: inline-flex; align-items: center; gap: var(--pas-2); flex-wrap: wrap; }
.oui-ligne__point { width: var(--oui-point); height: var(--oui-point); border-radius: var(--rond); background: var(--voix, var(--marque)); flex: none; }
.oui-ligne__point--prochain { background: transparent; border: 2px solid var(--trait-controle); }
.oui-ligne__point--soi { width: calc(var(--oui-point) * 1.8); height: calc(var(--oui-point) * 1.8); }
.oui-ligne--l { --oui-point: 20px; gap: var(--pas-3); }
.oui-ligne a.oui-ligne__point { text-decoration: none; }

.oui-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0 var(--pas-6); border-radius: var(--rond); border: var(--trait) solid transparent; font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; text-align: center; background: var(--marque); color: var(--sur-marque); }
.oui-bouton--secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.oui-bouton--voix { background: var(--voix, var(--marque)); color: var(--encre-sur-voix); }
.oui-bouton--discret { background: transparent; color: var(--encre); border-color: transparent; padding: 0 var(--pas-3); }
.oui-bouton--s { min-height: 36px; padding: 0 var(--pas-4); font-size: 14px; }
.oui-bouton--l { min-height: 60px; padding: 0 var(--pas-8); font-size: 18px; }
.oui-bouton:hover { filter: brightness(0.96); }
.oui-bouton:active { transform: scale(0.98); }
.oui-bouton[disabled] { opacity: 0.45; cursor: not-allowed; }

.oui-wordmark { display: inline-flex; align-items: center; gap: 0.3em; font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; color: var(--encre); text-decoration: none; white-space: nowrap; }
.oui-wordmark__pill { display: inline-flex; align-items: center; padding: 0.42em 0.6em; border-radius: var(--rond); background: var(--marque); color: var(--sur-marque); font-weight: 800; letter-spacing: -0.02em; }
.oui-wordmark--l { font-size: clamp(30px, 6vw, 48px); }
.oui-wordmark--xl { font-size: clamp(36px, 9vw, 84px); }

/* ---------- En-tête ---------- */
.oui-entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--pas-4); padding: var(--pas-3) var(--marge); background: var(--fond); border-bottom: var(--trait) solid var(--ficelle); }
.oui-entete__nav { display: none; gap: var(--pas-6); margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; }
.oui-entete__nav a { color: var(--encre); text-decoration: none; }
.oui-entete__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.oui-entete__droite { display: flex; align-items: center; gap: var(--pas-3); }
.oui-entete .oui-bouton { white-space: nowrap; }
@media (max-width: 599px) { .oui-entete { gap: var(--pas-2); } .oui-entete .oui-wordmark { font-size: 19px; } .oui-entete .oui-bouton--s { padding: 0 var(--pas-3); } .oui-entete__menu { padding: 0 10px; } .oui-entete__droite { gap: var(--pas-2); } }
.oui-entete__menu { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0 var(--pas-3); border-radius: var(--rond); border: var(--trait) solid var(--encre); background: transparent; color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
/* Le tiroir est fixé sous l'en-tête collant : il s'ouvre là où l'on est dans la page, pas seulement en haut. */
.oui-entete__tiroir { display: none; position: fixed; top: var(--entete-h, 64px); left: 0; right: 0; z-index: 19; max-height: calc(100vh - var(--entete-h, 64px)); max-height: calc(100dvh - var(--entete-h, 64px)); overflow-y: auto; overscroll-behavior: contain; padding: var(--pas-2) var(--marge) var(--pas-4); border-bottom: var(--trait) solid var(--ficelle); background: var(--fond); }
.oui-entete__tiroir[data-ouvert="true"] { display: block; }
.oui-entete__tiroir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pas-2); }
.oui-entete__tiroir a { display: block; padding: var(--pas-3) 0; font-size: 20px; font-weight: 600; text-decoration: none; border-bottom: var(--trait) solid var(--ficelle); }
.oui-entete__tiroir a[aria-current="page"] { color: var(--encre-douce); }
@media (min-width: 900px) {
  .oui-entete { padding: var(--pas-4) var(--pas-6); }
  .oui-entete__nav { display: flex; }
  .oui-entete__menu, .oui-entete__tiroir { display: none !important; }
}

/* ---------- Mise en page ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.conteneur--etroit { max-width: 760px; }
.section { padding: var(--pas-12) 0; }
.section--serree { padding: var(--pas-8) 0; }
.section--carte { background: var(--fond-carte); }
.section--teinte { background: var(--voix-teinte, var(--fond-carte)); }
.section--voix { background: var(--voix); color: var(--encre-sur-voix); }
.section__tete { display: grid; gap: var(--pas-3); margin-bottom: var(--pas-8); max-width: 760px; }
.section__tete .etiquette + .titre { margin-top: 0; }
.section__actions { display: flex; flex-wrap: wrap; gap: var(--pas-3); margin-top: var(--pas-6); }
@media (min-width: 900px) { .section { padding: var(--pas-16) 0; } .section--serree { padding: var(--pas-12) 0; } :root { --marge: var(--pas-6); } }
.grille { display: grid; gap: var(--pas-4); }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille--2 { grid-template-columns: 1fr 1fr; } .grille--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille { gap: var(--pas-6); } }
.pile { display: grid; gap: var(--pas-4); }
.ligne-bas { border-bottom: var(--trait) solid var(--ficelle); }
.filet { border: 0; border-top: var(--trait) solid var(--ficelle); margin: 0; }
.texte-doux { color: var(--encre-douce); }
.prose { font-size: 17px; line-height: 1.6; display: grid; gap: var(--pas-4); max-width: 68ch; }
.prose--intro { font-size: 20px; line-height: 1.5; }

/* ---------- Hero ---------- */
.hero { padding: var(--pas-12) 0 var(--pas-8); }
.hero__pile { display: grid; gap: var(--pas-6); }
.hero__phrase { font-size: clamp(36px, 8.5vw, 88px); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.hero__pont { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.4; color: var(--encre-douce); max-width: 36ch; }
.hero__ligne { margin-top: var(--pas-2); }
.hero__media { margin-top: var(--pas-6); }
.hero__video { width: 100%; max-width: 360px; margin: 0 auto; }
@media (min-width: 900px) {
  .hero { padding: var(--pas-16) 0 var(--pas-12); }
  .hero__pile { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--pas-12); }
  .hero__media { margin-top: 0; }
}

/* ---------- Le Mur ---------- */
.mur { display: grid; gap: var(--pas-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .mur { grid-template-columns: repeat(3, 1fr); gap: var(--pas-4); } }
@media (min-width: 960px) { .mur { grid-template-columns: repeat(5, 1fr); } }
.mur .oui-carte-voix { padding: var(--pas-4); transition: transform 240ms ease-out; }
.mur .oui-carte-voix:hover { transform: translateY(-3px); }
.mur .oui-carte-voix__photo { width: 100%; max-width: 160px; }
.mur .oui-carte-voix__nom { font-size: 20px; }
.mur .oui-carte-voix__role { font-size: 14px; }
.mur .oui-carte-voix__phrase { font-size: 15px; }

/* ---------- Page voix ---------- */
/* Page voix : voir le bloc « Page voix » en fin de fichier */

.fil { display: grid; gap: var(--pas-8); }
.chapitre { display: grid; gap: var(--pas-4); scroll-margin-top: 90px; }
.chapitre__tete { display: flex; align-items: center; gap: var(--pas-3); flex-wrap: wrap; }
.chapitre__numero { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--rond); background: var(--voix); color: var(--encre-sur-voix); font-weight: 800; font-size: 14px; }
.chapitre__moment { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.chapitre__titre { font-size: clamp(22px, 3.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.chapitre__corps { display: grid; gap: var(--pas-4); }
@media (min-width: 900px) { .chapitre__corps { grid-template-columns: 1fr 1fr; align-items: start; } .chapitre__corps--sans-video { grid-template-columns: 1fr; } }
.chapitre__video { border-radius: var(--fenetre); overflow: hidden; background: var(--fond-fenetre); border: var(--trait) solid var(--ficelle); aspect-ratio: 9 / 16; max-width: 420px; }
.chapitre__video video { width: 100%; height: 100%; object-fit: cover; }
.chapitre__cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pas-2); }
.chapitre__cartes li { padding: var(--pas-3) var(--pas-4); border-radius: var(--puce); background: var(--fond-carte); font-size: 18px; font-weight: 500; line-height: 1.35; }
.chapitre__cartes li[lang="ar"] { font-family: var(--font-arabe); }
.chapitre__cartes time { display: block; font-size: 12px; font-weight: 500; color: var(--encre-douce); margin-top: 2px; font-variant-numeric: tabular-nums; }
.chapitre__pied { display: flex; flex-wrap: wrap; gap: var(--pas-3); align-items: center; }
.chapitre__a-venir { font-size: 14px; color: var(--encre-douce); }

.verbatims-liste { display: grid; gap: var(--pas-4); }
.lien-voix { display: inline-flex; align-items: center; gap: var(--pas-3); text-decoration: none; }
.lien-voix__photo { width: 56px; flex: none; }
.lien-voix__nom { font-weight: 600; }
.lien-voix small { display: block; color: var(--encre-douce); font-weight: 400; }

.portraits { display: flex; flex-wrap: wrap; gap: var(--pas-3); }
.portraits a { width: 72px; display: block; }

/* ---------- Doutes (onglets) ---------- */
.doutes__themes { display: flex; flex-wrap: wrap; gap: var(--pas-2); margin-bottom: var(--pas-4); }
.doutes__theme { min-height: 40px; padding: 0 var(--pas-4); border-radius: var(--rond); border: var(--trait) solid var(--encre); background: transparent; color: var(--encre); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.doutes__theme[aria-selected="true"] { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.doutes__panneau[hidden] { display: none; }

/* ---------- Scènes du bootcamp ---------- */
.scenes { display: grid; gap: var(--pas-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .scenes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .scenes { grid-template-columns: repeat(3, 1fr); gap: var(--pas-6); } }
.scene { display: grid; gap: var(--pas-2); }
.scene figcaption { font-size: 14px; color: var(--encre-douce); }
.scene--large { grid-column: 1 / -1; }
.scene--large .oui-fenetre { aspect-ratio: 16 / 9; }
.communaute { display: grid; gap: var(--pas-3); grid-template-columns: repeat(4, 1fr); }
@media (min-width: 640px) { .communaute { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 960px) { .communaute { grid-template-columns: repeat(9, 1fr); } }
.communaute .oui-fenetre { border-radius: var(--puce); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: var(--pas-4); max-width: 560px; }
.champ { display: grid; gap: var(--pas-2); }
.champ label { font-weight: 600; font-size: 15px; }
.champ input, .champ textarea, .champ select { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: var(--puce); border: var(--trait) solid var(--trait-controle); background: var(--fond-fenetre); color: var(--encre); width: 100%; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ small { color: var(--encre-douce); font-size: 14px; }
.formulaire__actions { display: flex; flex-wrap: wrap; gap: var(--pas-3); align-items: center; }
.formulaire__note { font-size: 14px; color: var(--encre-douce); }
.cache { display: none !important; }

/* ---------- La porte ---------- */
.porte { display: grid; gap: var(--pas-6); }
.porte__titre { font-size: clamp(32px, 6vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.porte__sous { font-size: 20px; color: var(--encre-douce); max-width: 40ch; }
.portes-laterales { display: grid; gap: var(--pas-4); }
@media (min-width: 720px) { .portes-laterales { grid-template-columns: 1fr 1fr; } }
.bloc { padding: var(--pas-6); border-radius: var(--carte); background: var(--fond-carte); display: grid; gap: var(--pas-3); align-content: start; }
.bloc--ficelle { background: transparent; border: var(--trait) solid var(--ficelle); }
.bloc__titre { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Recherche ---------- */
.dimensions { display: grid; gap: var(--pas-3); counter-reset: dim; }
.dimension { display: grid; gap: var(--pas-1); padding: var(--pas-4) 0; border-bottom: var(--trait) solid var(--ficelle); }
.dimension__nom { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.dimension__nom::before { counter-increment: dim; content: counter(dim, decimal-leading-zero) " · "; color: var(--encre-douce); font-weight: 500; }
.dimension__question { color: var(--encre-douce); }
.dimension__spectre { font-size: 14px; margin-top: var(--pas-1); }
.signature-recherche { font-size: 14px; color: var(--encre-douce); }

/* ---------- Test ---------- */
.test { display: grid; gap: var(--pas-6); }
.test__progression { display: flex; align-items: center; gap: var(--pas-3); font-size: 14px; color: var(--encre-douce); }
.test__barre { flex: 1; height: 6px; border-radius: var(--rond); background: var(--fond-carte); overflow: hidden; }
.test__barre > span { display: block; height: 100%; width: 0; background: var(--marque); transition: width 240ms ease-out; }
.item { display: grid; gap: var(--pas-4); padding: var(--pas-6); border-radius: var(--carte); background: var(--fond-carte); }
.item__poles { display: grid; gap: var(--pas-3); grid-template-columns: 1fr 1fr; font-size: 17px; font-weight: 500; line-height: 1.3; }
.item__poles p:last-child { text-align: right; }
.item__echelle { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pas-2); }
.item__echelle label { display: grid; place-items: center; gap: var(--pas-1); cursor: pointer; min-height: 48px; }
.item__echelle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.item__echelle span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--rond); border: var(--trait) solid var(--trait-controle); background: var(--fond-fenetre); font-weight: 700; font-size: 14px; transition: transform 200ms ease-out; }
.item__echelle input:checked + span { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); transform: scale(1.06); }
.item__echelle input:focus-visible + span { outline: var(--trait-fort) solid var(--focus); outline-offset: 2px; }
.item__echelle label:nth-child(1) span, .item__echelle label:nth-child(5) span { width: 48px; height: 48px; }
.item__echelle label:nth-child(2) span, .item__echelle label:nth-child(4) span { width: 38px; height: 38px; }
.item__echelle label:nth-child(3) span { width: 28px; height: 28px; }
.item__echelle label:nth-child(1), .item__echelle label:nth-child(5) { align-self: center; }
.test__nav { display: flex; justify-content: space-between; gap: var(--pas-3); flex-wrap: wrap; }
.test__consigne { font-size: 17px; color: var(--encre-douce); max-width: 64ch; }
.test__honnetete { font-size: 15px; color: var(--encre-douce); max-width: 64ch; }

.resultat { display: grid; gap: var(--pas-8); }
.resultat__proche { display: grid; gap: var(--pas-4); padding: var(--pas-6); border-radius: var(--fenetre); background: var(--voix-teinte); border-top: var(--trait-fort) solid var(--voix); }
.resultat__proche-grille { display: grid; gap: var(--pas-4); align-items: center; grid-template-columns: 96px 1fr; }
.resultat__titre { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.carte-positions { display: grid; gap: var(--pas-3); }
.position { display: grid; gap: var(--pas-2); padding: var(--pas-4); border-radius: var(--carte); background: var(--fond-carte); }
.position__tete { display: flex; justify-content: space-between; gap: var(--pas-3); align-items: baseline; flex-wrap: wrap; }
.position__dim { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.position__nom { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.position__spectre { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.position__spectre span { height: 8px; border-radius: var(--rond); background: var(--ficelle); }
.position__spectre span.est { background: var(--voix, var(--marque)); }
.position__texte { font-size: 15px; line-height: 1.45; }
.position__fc { font-size: 14px; color: var(--encre-douce); }
.resultat__actions { display: flex; flex-wrap: wrap; gap: var(--pas-3); }

/* ---------- Pied ---------- */
.pied { padding: var(--pas-12) 0 var(--pas-8); border-top: var(--trait) solid var(--ficelle); }
.pied__grille { display: grid; gap: var(--pas-6); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pas-4); font-size: 15px; }
.pied__liens a { text-decoration: none; color: var(--encre-douce); }
.pied__liens a:hover { color: var(--encre); }
.pied__signature { font-size: 14px; color: var(--encre-douce); }
@media (min-width: 720px) { .pied__grille { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Apparitions ---------- */
.apparait { opacity: 0; transform: translateY(12px); transition: opacity 240ms ease-out, transform 240ms ease-out; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }

/* ---------- Utilitaires ---------- */
.mt-2 { margin-top: var(--pas-2); } .mt-4 { margin-top: var(--pas-4); } .mt-6 { margin-top: var(--pas-6); } .mt-8 { margin-top: var(--pas-8); } .mt-12 { margin-top: var(--pas-12); }
.centre { text-align: center; }
.inline-liens { display: flex; flex-wrap: wrap; gap: var(--pas-3); align-items: center; }
.encart-ecoute { font-size: 13px; color: var(--encre-douce); }

/* Les capsules : la grille des OUI, en 9:16 comme sur les réseaux */
.capsules { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pas-6) var(--pas-4); }
@media (min-width: 640px) { .capsules { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .capsules { grid-template-columns: repeat(5, 1fr); gap: var(--pas-8) var(--pas-6); } }
.capsule { container-type: inline-size; display: grid; gap: var(--pas-3); align-content: start; }
.capsule__ecran { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: calc(var(--fenetre) * 0.75); overflow: hidden; background: var(--voix); }
.capsule__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--voix); }
.capsule__affiche { display: flex; flex-direction: column; gap: 6cqi; padding: 9cqi 8cqi; color: var(--encre-sur-voix); text-decoration: none; }
.capsule__affiche--titre { background: var(--fond-carte); color: var(--encre); border: var(--trait) solid var(--ficelle); }
.capsule__pastille { --oui-taille: 20cqi; background: var(--marque); color: var(--sur-marque); }
.capsule__affiche--titre .capsule__pastille { background: var(--voix); color: var(--encre-sur-voix); }
.capsule__hook { flex: 1; display: flex; align-items: center; font-size: clamp(15px, 11.5cqi, 32px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.capsule__strap { font-size: clamp(11px, 6.2cqi, 17px); font-weight: 600; line-height: 1.25; }
.capsule__bientot { align-self: flex-start; padding: 0.45em 0.9em; border-radius: var(--rond); background: var(--fond); color: var(--encre); font-size: clamp(10px, 5.4cqi, 14px); font-weight: 600; }
.capsule__affiche:hover .capsule__hook, .capsule__affiche:focus-visible .capsule__hook { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.capsule__legende { display: grid; gap: var(--pas-1); }
.capsule__moment { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.capsule__titre { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.capsule__titre a { color: var(--encre); text-decoration: none; }
.capsule__titre a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Page voix (refonte du 4/11) */
/* En-tête : la personne à gauche, sa phrase dans une carte Verbatim pleine couleur à droite */
.voix-tete { background: var(--voix-teinte); padding: var(--pas-12) 0 var(--pas-16); }
.voix-tete__grille { display: grid; gap: var(--pas-8); align-items: center; }
.voix-tete__identite { display: grid; gap: var(--pas-4); align-content: start; }
.voix-tete__portrait { width: min(56vw, 220px); border: 6px solid var(--voix); }
.voix-tete__nom { margin: 0; font-size: clamp(56px, 10vw, 104px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.voix-tete__role { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 500; }
.voix-tete__accroche { margin: 0; font-size: 19px; line-height: 1.5; color: var(--encre-douce); max-width: 46ch; }
.voix-tete__actions { display: flex; flex-wrap: wrap; gap: var(--pas-3); margin-top: var(--pas-2); }
.voix-tete__phrase.oui-verbatim { padding: var(--pas-8); gap: var(--pas-6); }
.voix-tete__phrase .oui-verbatim__derja { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; }
@media (min-width: 960px) {
  .voix-tete { padding: var(--pas-16) 0 var(--pas-24); }
  .voix-tete__grille { grid-template-columns: 5fr 7fr; gap: var(--pas-16); }
  .voix-tete__phrase.oui-verbatim { padding: var(--pas-12); }
}

/* Le badge OUI de l'auteur : sur une carte pleine couleur, il passe en marque */
.oui-verbatim--voix .oui-badge, .oui-bouton--voix .oui-badge { background: var(--marque); color: var(--sur-marque); }
.oui-verbatim--voix .oui-verbatim__auteur small { color: var(--encre-sur-voix); }

/* Le portrait : le récit à gauche, les trois mots à droite (collants sur grand écran) */
.recit-grille { display: grid; gap: var(--pas-12); }
@media (min-width: 1024px) { .recit-grille { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pas-16); align-items: start; } .recit-aside { position: sticky; top: 96px; } }
.recit { display: grid; gap: var(--pas-6); }
.recit__p { margin: 0; font-size: 19px; line-height: 1.7; max-width: 64ch; }
.recit__p--ouverture { font-size: clamp(21px, 2.2vw, 24px); line-height: 1.55; font-weight: 400; }
.recit .oui-verbatim { margin: var(--pas-4) 0; }
@media (min-width: 1024px) { .recit .oui-verbatim { margin: var(--pas-6) 0; padding: var(--pas-12); } .recit .oui-verbatim__derja { font-size: 40px; } }
.recit-aside { display: grid; gap: var(--pas-4); align-content: start; }
.trait { display: grid; gap: var(--pas-2); padding: var(--pas-6); border-radius: var(--carte); background: var(--voix-teinte); border-top: var(--trait-fort) solid var(--voix); }
.trait__mot { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.trait__verbatim { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--encre-douce); }
.recit-aside__lien { display: grid; gap: var(--pas-3); padding: var(--pas-6); border-radius: var(--carte); border: var(--trait) solid var(--ficelle); }
.recit-aside__lien p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--encre-douce); }