@font-face { font-family: 'Fraunces'; src: url('../polices/fraunces.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../polices/instrument.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../polices/inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }

/* =========================================================================
   CAPENTIEL — variante « panneaux », registre Revolut
   Panneaux arrondis empilés, typo très grasse, dégradés bleus, pilules.
   ========================================================================= */

:root {
  --noir:      #08090C;
  --nuit:      #12141B;
  --indigo:    #1B1B4B;
  --bleu:      #2F6BFF;
  --bleu-vif:  #5B8CFF;
  --bleu-nuit: #0F2ACC;
  --azur:      #7FB2FF;
  --clair:     #FFFFFF;
  --creme:     #F4F2ED;
  --encre:     #0B0D12;
  --encre-2:   rgba(255,255,255,.62);
  --encre-2c:  #5A6270;

  --titre: "Instrument Sans", system-ui, sans-serif;
  --texte: "Inter", system-ui, sans-serif;

  --t-geant: clamp(2.9rem, min(11vw, 15vh), 7rem);
  --t-1:     clamp(2.1rem, 7vw, 4.6rem);
  --t-2:     clamp(1.35rem, 3.6vw, 2rem);
  --t-3:     1.125rem;
  --corps:   1.0625rem;
  --micro:   .75rem;

  --e2: 1.1rem; --e3: 2.2rem; --e4: 3.6rem; --e5: 6rem; --e6: 9rem;
  --rayon: 30px;
  --rayon-c: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --court: 220ms; --moyen: 420ms; --long: 640ms; --entree: 1600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--noir); }
body { margin: 0; background: var(--noir); color: var(--clair); overflow-x: clip;
  font-family: var(--texte); font-size: var(--corps); line-height: 1.55; letter-spacing: -.014em;
  -webkit-font-smoothing: antialiased; padding: .5rem; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 700; line-height: .98;
  letter-spacing: -.045em; text-wrap: balance; }
p, ul, ol, dl, figure, blockquote, table { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hors-mobile { display: none; }
.saut-contenu { position: absolute; left: -9999px; }

/* ---------- les panneaux ---------- */
.scene { position: relative; margin-bottom: 1.5rem; border-radius: var(--rayon); overflow: hidden;
  padding: var(--e6) 0; background: var(--nuit); }
.pan--nuit    { background: var(--nuit); }
.pan--clair   { background: var(--creme); color: var(--encre); }
.pan--indigo  { background: linear-gradient(155deg, #241F6B 0%, #131233 55%, #0C1030 100%); }
.pan--bleu    { background: var(--bleu); }
.pan--degrade { background:
  radial-gradient(120% 90% at 82% 8%, rgba(91,140,255,.55) 0%, rgba(47,107,255,0) 58%),
  radial-gradient(90% 70% at 8% 92%, rgba(15,42,204,.55) 0%, rgba(15,42,204,0) 60%),
  #0B0E1A; }
.cadre { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }

.pan--clair .repere, .pan--clair p, .pan--clair .chapo { color: var(--encre-2c); }
.pan--clair .repere span { color: var(--bleu-nuit); }
p, .chapo { color: var(--encre-2); }
.pan--clair h1, .pan--clair h2, .pan--clair h3 { color: var(--encre); }

/* ---------- en-tête ---------- */
.progression { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0);
  transform-origin: left; background: var(--bleu-vif); z-index: 60; }
.site-tete { position: sticky; top: .5rem; z-index: 50; display: flex; align-items: center; gap: 1rem;
  margin-bottom: .5rem; padding: .8rem 1.1rem; border-radius: 999px;
  background: rgba(18,20,27,.82); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08); }
.logotype { display: inline-flex; align-items: baseline; margin-right: auto; font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem; line-height: 1; color: var(--clair); text-decoration: none; white-space: nowrap; }
.logotype__cap { font-weight: 700; } .logotype__fin { font-weight: 300; }
.logotype__i { position: relative; display: inline-block; }
.logotype__point { position: absolute; left: 50%; top: -.06em; width: .16em; height: .16em;
  border-radius: 50%; background: var(--azur); transform: translateX(-50%);
  transition: transform var(--moyen) var(--ease); }
.logotype:hover .logotype__point { transform: translateX(-50%) scale(1.3); }
.logotype--pied { margin-right: 0; font-size: 1.5rem; }
.nav-principale { display: none; }
.site-tete > .bouton { display: none; }
.site-tete > .menu-bascule { display: inline-flex; min-height: 40px; }
.site-tete.est-ouvert .nav-principale { display: grid; gap: .9rem; position: absolute; top: calc(100% + .5rem);
  left: 0; right: 0; padding: 1.5rem; border-radius: var(--rayon-c); background: var(--nuit);
  border: 1px solid rgba(255,255,255,.08); }
.site-tete.est-ouvert .nav-principale a { font-family: var(--titre); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.03em; text-decoration: none; }
.nav-mobile-action .bouton { width: 100%; margin-top: .5rem; }

/* ---------- boutons pilule ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px; padding: 1rem 1.75rem; border: 0; border-radius: 999px;
  background: var(--clair); color: var(--encre); font: inherit; font-size: var(--t-3); font-weight: 600;
  letter-spacing: -.02em; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform var(--court) var(--ease), background var(--court) var(--ease); }
.bouton:hover { transform: translateY(-2px); background: var(--azur); }
.bouton--l { min-height: 62px; padding: 1.2rem 2.2rem; font-size: var(--t-3); }
.bouton--vide { background: rgba(255,255,255,.08); color: var(--clair);
  border: 1px solid rgba(255,255,255,.16); }
.bouton--vide:hover { background: rgba(255,255,255,.16); }
.pan--clair .bouton { background: var(--encre); color: var(--clair); }
.pan--clair .bouton:hover { background: var(--bleu); }
.lien-souligne { display: inline-flex; align-items: center; min-height: 54px; font-size: var(--t-3);
  font-weight: 600; color: var(--azur); text-decoration: none; }
.pan--clair .lien-souligne { color: var(--bleu-nuit); }
.actions { display: flex; flex-direction: column; gap: .6rem; margin-top: var(--e4); }
.actions .bouton { width: 100%; }
.actions .lien-souligne { justify-content: center; }

/* ---------- repères et titres ---------- */
.repere { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 var(--e3);
  padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: var(--micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.75); }
.pan--clair .repere { background: rgba(11,13,18,.06); }
.repere span { font-family: var(--titre); color: var(--azur); }
.titre-geant { font-size: var(--t-geant); letter-spacing: -.055em; }
.titre-geant span { display: block; overflow: hidden; padding-bottom: .04em; }
.titre-geant i { display: block; font-style: normal; transform: translateY(105%);
  transition: transform var(--entree) var(--ease) calc(200ms + var(--i) * 260ms); }
.est-charge .titre-geant i { transform: translateY(0); }
h2 { font-size: var(--t-1); }
.chapo { margin-top: var(--e2); font-size: var(--t-3); max-width: 40ch; }

/* ---------- 01 ouverture ---------- */
.scene--ouverture { padding-top: var(--e6); }
.ouverture__sous { margin-top: var(--e3); font-size: var(--t-3); max-width: 34ch; color: var(--encre-2); }
.bande { margin-top: var(--e5); }
.bande__intitule { max-width: 1180px; margin: 0 auto .75rem; padding-inline: 1.25rem;
  font-size: var(--micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); }
.bande__piste { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px 1.25rem 1rem; scroll-padding-inline: 1.25rem; }
.bande__piste::-webkit-scrollbar { display: none; }
.feuille { flex: 0 0 auto; width: 76vw; max-width: 300px; scroll-snap-align: center; margin: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--long) var(--ease) calc(var(--i) * 70ms), transform var(--long) var(--ease) calc(var(--i) * 70ms); }
.est-charge .feuille { opacity: 1; transform: none; }
.feuille__corps { height: 100%; display: flex; flex-direction: column; padding: 1.3rem;
  border-radius: var(--rayon-c); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px);
  transition: background var(--moyen) var(--ease), transform var(--moyen) var(--ease); }
.feuille.est-vif .feuille__corps { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.feuille__fam { font-size: var(--micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azur); }
.feuille__txt { margin-top: .6rem; font-size: .9375rem; line-height: 1.45; color: rgba(255,255,255,.86); }
.feuille__motif { margin-top: auto; padding-top: 1rem; opacity: .9; }
.feuille__motif svg { width: 52px; }
.feuille__source { margin-top: .7rem; font-size: var(--micro); color: rgba(255,255,255,.5); font-style: italic; }
.feuille--maitre .feuille__corps { background: var(--bleu); border-color: transparent; }
.feuille--maitre .feuille__fam { color: rgba(255,255,255,.8); }
.feuille--maitre .feuille__phrase { margin-top: .6rem; font-family: var(--titre); font-weight: 700;
  font-size: 1.4rem; letter-spacing: -.035em; line-height: 1.1; }
.feuille--maitre .feuille__note { margin-top: .6rem; font-size: .875rem; color: rgba(255,255,255,.78); }
.feuilles__rail { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.feuilles__rail span { display: block; height: 3px; width: 28%; border-radius: 3px; background: var(--azur); }
.m-trace { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease) calc(700ms + var(--i,0) * 160ms); }
.est-charge .m-trace { stroke-dashoffset: 0; }
.m-pt { opacity: 0; transition: opacity var(--moyen) var(--ease) calc(800ms + var(--i,0) * 100ms); }
.est-charge .m-pt { opacity: 1; }
.m-ligne { transform: scaleX(0); transform-box: fill-box; transform-origin: left;
  transition: transform 700ms var(--ease) calc(800ms + var(--i,0) * 120ms); }
.est-charge .m-ligne { transform: scaleX(1); }

/* ---------- 02 manifeste ---------- */
.declaration p { font-family: var(--titre); font-weight: 700; font-size: clamp(1.7rem, 7vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.05em; color: var(--encre); max-width: 20ch; }
.declaration__suite { margin-top: var(--e5); max-width: 62ch; }

.declaration__note { margin-top: var(--e2); }

/* ---------- 03 situations ---------- */
.rangs { display: grid; gap: 1rem; max-width: 1180px; margin: var(--e4) auto 0; padding-inline: 1.25rem; }
.rang { display: grid; gap: .35rem; padding: 1.5rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); text-decoration: none;
  transition: background var(--court) var(--ease), transform var(--court) var(--ease); }
.rang:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.rang__qui { font-size: var(--micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azur); }
.rang__quoi { font-family: var(--titre); font-weight: 700; font-size: 1.5rem; letter-spacing: -.04em;
  line-height: 1.08; }
.rang__aller { margin-top: .4rem; font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.6); }

/* ---------- 04 méthode ---------- */
.temps-liste { list-style: none; padding: 0; margin-top: var(--e5); display: grid; gap: 1.4rem;
  counter-reset: temps; }
.temps { counter-increment: temps; padding: 2rem 2.2rem; border-radius: var(--rayon-c); cursor: pointer;
  background: rgba(255,255,255,.06); transition: background var(--court) var(--ease); }
.temps:hover { background: rgba(255,255,255,.12); }
.temps > p { display: none; }
.temps.ouvert > p { display: block; }
.temps:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.temps h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.temps h3::before { content: counter(temps, decimal-leading-zero) " · "; color: var(--azur);
  font-size: var(--micro); font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.temps p { margin-top: .4rem; font-size: .9375rem; }

/* ---------- 05 domaines ---------- */
.domaines { display: grid; gap: 1rem; max-width: 1180px; margin: var(--e4) auto 0; padding-inline: 1.25rem; }
.domaine { display: grid; gap: .45rem; padding: 1.8rem; border-radius: var(--rayon-c);
  background: rgba(11,13,18,.04); text-decoration: none; color: var(--encre);
  transition: background var(--court) var(--ease), transform var(--court) var(--ease); }
.domaine:hover { background: var(--bleu); color: var(--clair); transform: translateY(-3px); }
.domaine:hover .domaine__num, .domaine:hover .domaine__qui, .domaine:hover .domaine__gain { color: rgba(255,255,255,.85); }
.domaine__num { font-family: var(--titre); font-size: var(--micro); font-weight: 700; color: var(--bleu-nuit); }
details.domaine { cursor: pointer; }
details.domaine summary { list-style: none; cursor: pointer; display: grid; gap: .3rem; }
details.domaine summary::-webkit-details-marker { display: none; }
details[open].domaine { background: var(--bleu); color: var(--clair); }
details[open].domaine .domaine__num, details[open].domaine .domaine__qui, details[open].domaine .domaine__prix { color: rgba(255,255,255,.85); }
.domaine__prix { font-family: var(--titre); font-weight: 700; font-size: var(--t-3); margin-top: .35rem; color: var(--bleu-nuit); }
.domaine__plus { margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(12,14,12,.14);
  font-size: .9375rem; line-height: 1.55; color: var(--encre-2c); max-width: 58ch; }
details[open].domaine .domaine__plus { color: rgba(255,255,255,.88); border-top-color: rgba(255,255,255,.25); }
.domaine__nom { font-family: var(--titre); font-weight: 700; font-size: 2rem; letter-spacing: -.045em; line-height: 1; }
.domaine__qui { margin-top: .5rem; font-size: .9375rem; color: var(--encre-2c); }
.domaine__gain { margin-top: .4rem; font-size: .9375rem; color: var(--encre-2c); }

/* ---------- 06 mesure ---------- */
.mesure__figure { margin: var(--e4) auto 0; max-width: 1180px; padding: 1.25rem;
  border-radius: var(--rayon-c); background: rgba(255,255,255,.04); }
.mesure__figure svg { width: 100%; height: auto; overflow: visible; }
.eq-reglures line { stroke: rgba(255,255,255,.12); }
.eq-socle { stroke: rgba(255,255,255,.4); }
.eq-marge { fill: rgba(127,178,255,.14); opacity: 0; transition: opacity var(--long) var(--ease) 900ms; }
.eq-tension { opacity: 0; transition: opacity var(--long) var(--ease) 1100ms; }
.est-visible .eq-marge, .est-visible .eq-tension { opacity: 1; }
.eq-dem, .eq-res { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.eq-dem { stroke: rgba(255,255,255,.75); } .eq-res { stroke: var(--azur); }
.est-visible .eq-dem { transition: stroke-dashoffset 1400ms var(--ease) 200ms; stroke-dashoffset: 0; }
.est-visible .eq-res { transition: stroke-dashoffset 1400ms var(--ease) 450ms; stroke-dashoffset: 0; }
.eq-bascule { fill: var(--nuit); stroke: #fff; stroke-width: 3; opacity: 0; transition: opacity var(--moyen) var(--ease); }
.eq-mot-bascule, .eq-lg, .eq-axe { font-family: var(--texte); opacity: 0; transition: opacity var(--moyen) var(--ease) 1400ms; }
.eq-mot-bascule { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: #fff; }
.eq-lg { font-size: 15px; font-weight: 600; } .eq-lg--dem { fill: rgba(255,255,255,.8); } .eq-lg--res { fill: var(--azur); }
.eq-axe { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; fill: rgba(255,255,255,.5); }
.est-visible .eq-bascule, .est-visible .eq-mot-bascule, .est-visible .eq-lg, .est-visible .eq-axe { opacity: 1; }
.eq-commandes { display: flex; gap: .5rem; margin-top: var(--e3); overflow-x: auto; scrollbar-width: none; }
.eq-commandes::-webkit-scrollbar { display: none; }
.eq-puce { flex: 0 0 auto; min-height: 44px; padding: .65rem 1.1rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font: inherit; font-size: .9375rem;
  font-weight: 600; cursor: pointer; transition: background var(--court) var(--ease), color var(--court) var(--ease); }
.eq-puce[aria-pressed="true"] { background: var(--clair); color: var(--encre); }
.eq-dit { margin-top: var(--e2); font-size: .9375rem; min-height: 3em; transition: opacity var(--court) var(--ease); }
.eq-dit.mue { opacity: 0; }
.mesure__sous { margin-top: var(--e5); font-size: var(--t-2); }
.grille-comparee { width: 100%; margin-top: var(--e3); border-collapse: collapse; }
.grille-comparee thead { display: none; }
.grille-comparee tbody tr { display: block; margin-bottom: .6rem; padding: 1.1rem 1.25rem;
  border-radius: var(--rayon-c); background: rgba(255,255,255,.05); }
.grille-comparee th, .grille-comparee td { display: block; text-align: left; padding: .12rem 0;
  font-size: .9375rem; color: rgba(255,255,255,.72); }
.grille-comparee tbody th { font-family: var(--titre); font-weight: 700; font-size: var(--t-3);
  letter-spacing: -.03em; color: #fff; padding-bottom: .4rem; }
.grille-comparee td::before { content: attr(data-col) " — "; color: rgba(255,255,255,.4); }
.grille-comparee .col-nous { margin-top: .4rem; padding: .5rem .75rem; border-radius: 10px;
  background: rgba(127,178,255,.16); color: #fff; font-weight: 600; }

/* ---------- 07 parcours ---------- */
.scene--parcours .repere { background: rgba(255,255,255,.16); }
.etapes { list-style: none; padding: 0; margin-top: var(--e4); display: grid; gap: .6rem; counter-reset: etape; }
.etape { counter-increment: etape; padding: 1.4rem 1.5rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.14); }
.etape__duree { font-size: var(--micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.8); }
.etape h3 { margin-top: .3rem; font-size: 1.4rem; letter-spacing: -.04em; }
.etape h3::before { content: counter(etape) " · "; color: rgba(255,255,255,.6); font-size: .875rem; }
.etape p { margin-top: .35rem; font-size: .9375rem; color: rgba(255,255,255,.85); }

/* ---------- 08 IA ---------- */
.partage { margin-top: var(--e4); display: grid; gap: .6rem; }
.partage__part { padding: 1.5rem; border-radius: var(--rayon-c); background: rgba(255,255,255,.06); }
.partage__part--machine { background: linear-gradient(150deg, rgba(47,107,255,.28), rgba(47,107,255,.06)); }
.partage__part h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.partage__part p { margin-top: .5rem; font-size: .9375rem; }

/* ---------- 09 questions ---------- */
.questions { margin-top: var(--e3); display: grid; gap: .5rem; }
.questions details { border-radius: var(--rayon-c); background: rgba(11,13,18,.05); padding: 0 1.35rem; }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0; font-family: var(--titre); font-weight: 700; font-size: var(--t-3);
  letter-spacing: -.035em; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font-family: var(--texte); font-weight: 400; font-size: 1.5rem;
  color: var(--bleu-nuit); transition: transform var(--court) var(--ease); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { padding-bottom: 1.35rem; font-size: .9375rem; max-width: 56ch; }

/* ---------- 10 fin ---------- */
.scene--fin { text-align: center; padding-block: var(--e6); }
.scene--fin .titre-geant { font-size: clamp(2.4rem, 9vw, 5.5rem); max-width: 16ch; margin-inline: auto; }
.scene--fin p { margin: var(--e3) auto 0; max-width: 38ch; }
.scene--fin .actions { align-items: center; }
.scene--ouverture .actions { align-items: center; justify-content: center; }

/* ---------- pied ---------- */
.site-pied { border-radius: var(--rayon); background: var(--nuit); padding: var(--e5) 0 var(--e4);
  color: rgba(255,255,255,.6); font-size: .9375rem; }
.site-pied__haut { display: grid; gap: var(--e4); }
.site-pied h2 { font-family: var(--texte); font-size: var(--micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; }
.site-pied ul { list-style: none; padding: 0; margin-top: .9rem; display: grid; gap: .5rem; }
.site-pied a { text-decoration: none; }
.site-pied a:hover { color: #fff; }
.site-pied__bas { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid rgba(255,255,255,.1);
  display: grid; gap: .4rem; font-size: var(--micro); }

.reveler { opacity: 0; transform: translateY(16px);
  transition: opacity var(--long) var(--ease) calc(var(--r,0) * 70ms), transform var(--long) var(--ease) calc(var(--r,0) * 70ms); }
.reveler.est-visible { opacity: 1; transform: none; }

/* ---------- à partir de 760 px ---------- */
@media (min-width: 760px) {
  body { padding: .75rem; }
  .hors-mobile { display: inline; }
  .cadre { padding-inline: 3rem; }
  .scene { padding: var(--e6) 0; }
  .actions { flex-direction: row; align-items: center; gap: 1rem; }
  .actions .bouton { width: auto; }
  .rangs, .domaines { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 3rem; }
  .domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temps-liste, .etapes, .partage, .questions { grid-template-columns: repeat(2, 1fr); }

  .feuille { width: 300px; }
  .site-pied__haut { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .site-pied__bas { display: flex; gap: 2.5rem; }
  .bande__intitule, .bande__piste, .feuilles__rail { padding-inline: 3rem; }
  .grille-comparee tbody tr { padding: 1.4rem 1.6rem; }
}

/* ---------- à partir de 1080 px ---------- */
@media (min-width: 1080px) {
  body { padding: 1rem; }
  .site-tete { top: 1rem; padding: .9rem 1.5rem; }
  .nav-principale { display: flex; gap: 1.6rem; }
  .nav-principale a { font-size: .9375rem; color: rgba(255,255,255,.7); text-decoration: none; }
  .nav-principale a:hover { color: #fff; }
  .nav-mobile-action { display: none; }
  .site-tete > .bouton { display: inline-flex; min-height: 44px; padding: .7rem 1.3rem; font-size: .9375rem; }
  .site-tete > .menu-bascule { display: none; }
  .scene { padding: 7rem 0; }
  .scene--ouverture .cadre { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
  .scene--ouverture .titre-geant { font-size: clamp(2.9rem, 5.3vw, 5.2rem); }
  .scene--ouverture .repere, .scene--ouverture .titre-geant { grid-column: 1; }
  .scene--ouverture .ouverture__pied { grid-column: 1 / -1; justify-self: center; }
  /* les vignettes retrouvent leur empilement en perspective */
  .bande { position: absolute; top: 0; right: 0; width: 48%; height: 100%;
    display: flex; align-items: center; perspective: 2200px; perspective-origin: 34% 46%; }
  .bande__intitule, .feuilles__rail { display: none; }
  .bande__piste { display: block; position: relative; width: 100%; aspect-ratio: 5 / 4.9;
    overflow: visible; padding: 0 3rem 0 0; transform-style: preserve-3d;
    transform: rotateX(calc(6deg + var(--py,0) * 3deg)) rotateY(calc(-13deg + var(--px,0) * 4deg)) rotateZ(.6deg);
    transition: transform 600ms var(--ease); }
  .bande__piste .feuille { position: absolute; left: var(--x); top: var(--y); width: var(--w);
    max-width: none; transform: rotate(var(--r)) translateY(24px); }
  .est-charge .bande__piste .feuille { transform: rotate(var(--r)) translateY(0); }
  .bande__piste .feuille__corps { background: rgba(30,36,52,.78);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .bande__piste.a-un-actif .feuille { opacity: .45; }
  .bande__piste .feuille.est-vif { opacity: 1; z-index: 30; }
  .est-charge .bande__piste .feuille.est-vif { transform: rotate(0deg) translateY(-12px) scale(1.045); }
  .bande__piste .feuille__corps { animation: flotter calc(9s + var(--f) * 1.6s) ease-in-out calc(var(--f) * -2.4s) infinite; }
  .bande__piste .feuille.est-vif .feuille__corps { animation-play-state: paused;
    transform: translateZ(70px); background: rgba(38,46,66,.9); }
  @keyframes flotter { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-7px,14px); } }
  .temps-liste, .questions { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: repeat(4, 1fr); }
  .rangs { grid-template-columns: repeat(3, 1fr); }
  .domaines { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
  .grille-comparee thead { display: table-header-group; }
  .grille-comparee tbody tr { display: table-row; background: none; }
  .grille-comparee th, .grille-comparee td { display: table-cell; padding: 1.1rem 1.25rem 1.1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: top; }
  .grille-comparee thead th { font-size: var(--micro); text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.5); font-weight: 700; }
  .grille-comparee td::before { content: none; }
  .grille-comparee .col-nous { margin: 0; border-radius: 0; background: rgba(127,178,255,.1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .titre-geant i, .feuille, .reveler { opacity: 1; transform: none; }
  .m-trace, .eq-dem, .eq-res { stroke-dashoffset: 0; }
  .m-pt, .eq-marge, .eq-tension, .eq-lg, .eq-axe, .eq-bascule, .eq-mot-bascule { opacity: 1; }
  .m-ligne { transform: scaleX(1); }
}


/* =========================================================================
   PAGES INTÉRIEURES — mêmes panneaux, mêmes pilules
   ========================================================================= */

.contenu { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.ecran { position: relative; margin-bottom: .5rem; border-radius: var(--rayon); overflow: hidden;
  padding: var(--e5) 0; background: var(--nuit); }
.ecran--sable { background: var(--creme); color: var(--encre); }
.ecran--sable p, .ecran--sable .chapo, .ecran--sable .liste li, .ecran--sable dd { color: var(--encre-2c); }
.ecran--sable h1, .ecran--sable h2, .ecran--sable h3, .ecran--sable dt { color: var(--encre); }
.ecran--encre { background: linear-gradient(155deg, #241F6B 0%, #131233 55%, #0C1030 100%); }
.ecran--suite { padding-top: var(--e4); }
.ecran--collee { padding-top: 0; margin-top: -.25rem; }
.ecran > .contenu > * + * { margin-top: var(--e3); }
.ecran > .contenu > .etiquette + h1, .ecran > .contenu > .etiquette + h2 { margin-top: 0; }

.etiquette { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 var(--e3);
  padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: var(--micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.75); }
.ecran--sable .etiquette { background: rgba(11,13,18,.06); color: var(--encre-2c); }

.page-tete { padding-block: var(--e6) 0; }
.page-tete h1 { font-size: clamp(2.3rem, 8vw, 4.6rem); letter-spacing: -.05em; max-width: 16ch; }
.page-tete .chapo { margin-top: var(--e3); font-size: var(--t-3); max-width: 46ch; }

.resume { display: grid; gap: .6rem; margin-top: var(--e4); }
.resume > div { padding: 1.1rem 1.25rem; border-radius: var(--rayon-c); background: rgba(255,255,255,.06); }
.ecran--sable .resume > div { background: rgba(11,13,18,.04); }
.resume dt { font-size: var(--micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--azur); }
.resume dd { margin: .4rem 0 0; font-family: var(--titre); font-weight: 700; font-size: var(--t-3);
  letter-spacing: -.035em; color: #fff; }
.ecran--sable .resume dd { color: var(--encre); }

.colonnes { display: grid; gap: var(--e4); align-items: start; }
.bloc + .bloc { margin-top: var(--e4); }
.bloc h2 { font-size: var(--t-2); letter-spacing: -.04em; margin-bottom: .8rem; }
.bloc--texte { max-width: 62ch; }
.liste { list-style: none; padding: 0; margin-top: var(--e2); display: grid; gap: .7rem; }
.liste li { position: relative; padding-left: 1.4rem; font-size: .9375rem; color: rgba(255,255,255,.75); }
.liste li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--azur); }

.deroule { list-style: none; padding: 0; margin-top: var(--e2); display: grid; gap: .6rem; counter-reset: pas; }
.deroule li { counter-increment: pas; padding: 1.15rem 1.35rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.06); font-size: .9375rem; color: rgba(255,255,255,.8); }
.deroule li::before { content: counter(pas, decimal-leading-zero); display: block; margin-bottom: .35rem;
  font-family: var(--titre); font-size: var(--micro); font-weight: 700; color: var(--azur); }

.encadre { padding: 1.5rem; border-radius: var(--rayon-c); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1); }
.ecran--sable .encadre { background: rgba(11,13,18,.05); border-color: transparent; }
.encadre__label { font-size: var(--micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azur); }
.encadre__prix { margin-top: .4rem; font-family: var(--titre); font-weight: 700; font-size: 2.1rem;
  letter-spacing: -.05em; color: #fff; }
.ecran--sable .encadre__prix { color: var(--encre); }
.encadre__detail { margin-top: .4rem; font-size: .9375rem; }
.encadre .bouton { width: 100%; margin-top: var(--e3); }

.faq { margin-top: var(--e4); display: grid; gap: .5rem; }
.faq h2 { font-size: var(--t-2); margin-bottom: .5rem; }
.faq details { border-radius: var(--rayon-c); background: rgba(255,255,255,.06); padding: 0 1.35rem; }
.ecran--sable .faq details { background: rgba(11,13,18,.05); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-family: var(--titre); font-weight: 700; font-size: var(--t-3);
  letter-spacing: -.035em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--texte); font-weight: 400; font-size: 1.5rem;
  color: var(--azur); transition: transform var(--court) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.3rem; font-size: .9375rem; max-width: 56ch; }

.rappel { display: grid; gap: var(--e3); margin-top: var(--e4); padding: var(--e4);
  border-radius: var(--rayon-c); background: var(--bleu); color: #fff; }
.rappel h2 { font-size: var(--t-2); letter-spacing: -.04em; max-width: 22ch; }
.rappel .bouton { justify-self: start; background: #fff; color: var(--encre); }

.poles__liste { display: grid; gap: .6rem; margin-top: var(--e4); }
.pole { display: grid; gap: .3rem; padding: 1.5rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.06); text-decoration: none;
  transition: background var(--court) var(--ease), transform var(--court) var(--ease); }
.pole:hover { background: rgba(255,255,255,.11); transform: translateY(-3px); }
.pole__tete h3 { font-size: 1.7rem; letter-spacing: -.045em; }
.pole__details { display: grid; gap: var(--e2); margin-top: var(--e2); }
.pole__details dt { font-size: var(--micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--azur); }
.pole__details dd { margin: .3rem 0 0; font-size: .9375rem; color: rgba(255,255,255,.78); }
.lien-fleche { display: inline-flex; gap: .4rem; margin-top: var(--e2); font-size: .9375rem;
  font-weight: 600; color: var(--azur); text-decoration: none; }

.tableau { width: 100%; border-collapse: collapse; margin-top: var(--e3); }
.tableau thead { display: none; }
.tableau tr { display: block; margin-bottom: .6rem; padding: 1.2rem 1.35rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.06); }
.ecran--sable .tableau tr { background: rgba(11,13,18,.04); }
.tableau td, .tableau th { display: block; text-align: left; padding: .12rem 0; font-size: .9375rem; }
.tableau tbody th { font-family: var(--titre); font-weight: 700; font-size: var(--t-3); letter-spacing: -.03em; }
.tableau td.col-prix { margin-top: .4rem; font-family: var(--titre); font-weight: 700; font-size: 1.4rem;
  color: var(--azur); }

.articles { list-style: none; padding: 0; margin-top: var(--e3); display: grid; gap: .5rem; }
.articles li { border-radius: var(--rayon-c); background: rgba(255,255,255,.06); }
.articles a { display: block; padding: 1.35rem 1.5rem; font-family: var(--titre); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.035em; text-decoration: none; }
.articles a:hover { color: var(--azur); }
.prose { max-width: 62ch; }
.prose p { margin-top: var(--e2); font-size: var(--t-3); }
.prose h2 { margin-top: var(--e4); font-size: var(--t-2); letter-spacing: -.04em; }
.legal { max-width: 66ch; }
.legal h2 { margin-top: var(--e4); font-size: 1.4rem; letter-spacing: -.035em; }
.legal p { margin-top: .8rem; font-size: .9375rem; }
.avide { padding: .15rem .5rem; border-radius: 6px; background: rgba(127,178,255,.18); color: #fff; font-weight: 600; }

.champ { display: grid; gap: .4rem; margin-bottom: var(--e3); }
.champ label { font-size: .9375rem; font-weight: 600; }
.champ input, .champ select, .champ textarea { font: inherit; font-size: var(--t-3); color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: 1rem 1.1rem; }
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--azur); }
.champ.est-erronee input, .champ.est-erronee select, .champ.est-erronee textarea { border-color: #fff; }
.champ__erreur { font-size: .875rem; font-weight: 600; color: var(--azur); }
.champ:not(.est-erronee) .champ__erreur { display: none; }
.duo { display: grid; gap: 0 1rem; }
.mention-rgpd, .apres-envoi { font-size: .875rem; color: rgba(255,255,255,.6); max-width: 52ch; }
.mention-rgpd { margin: var(--e2) 0 var(--e3); }
.apres-envoi { margin-top: var(--e2); }
.confirmation { margin-top: var(--e2); padding: 1rem 1.2rem; border-radius: var(--rayon-c);
  background: rgba(127,178,255,.18); color: #fff; font-weight: 600; }
.confirmation[hidden] { display: none; }
form .bouton { width: 100%; }
.apparait { opacity: 0; transform: translateY(16px);
  transition: opacity var(--long) var(--ease) calc(var(--i,0) * 80ms), transform var(--long) var(--ease) calc(var(--i,0) * 80ms); }
.apparait.est-visible { opacity: 1; transform: none; }

@media (min-width: 760px) {
  .contenu { padding-inline: 3rem; }
  .ecran { padding: var(--e6) 0; }
  .resume { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .duo { grid-template-columns: 1fr 1fr; }
  .rappel { grid-template-columns: 1fr auto; align-items: center; }
  .rappel .bouton { justify-self: end; }
  .pole__details { grid-template-columns: 1fr 1fr; gap: var(--e3); }
  .deroule, .faq, .articles { grid-template-columns: 1fr 1fr; }
  .tableau tr { padding: 1.4rem 1.6rem; }
  form .bouton { width: auto; }
}
@media (min-width: 1080px) {
  .colonnes { grid-template-columns: 1fr 22rem; gap: 4rem; }
  .encadre { position: sticky; top: 7rem; }
  .poles__liste { grid-template-columns: repeat(2, 1fr); }
  .faq, .deroule { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- figure du hero (voies) ---------- */
.ouverture__figure { margin: 2.4rem 0 0; }
.ouverture__figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-voie { stroke-dasharray: 1; stroke-dashoffset: 0; }
#voies .v-grille { stroke: rgba(255,255,255,.16); }
#voies .v-marche { fill: rgba(255,255,255,.4); }
#voies path.v-voie:not(.v-voie--retenue) { stroke: rgba(255,255,255,.42); stroke-width: 2; }
#voies .v-voie--retenue { stroke-width: 3.5; }
#voies .v-bouts { fill: rgba(255,255,255,.7); }
.v-voie--retenue { stroke-dasharray: 1; stroke-dashoffset: 1; }
.est-charge .v-voie--retenue { animation: v-tracer 3.2s var(--ease) 1s forwards; }
@keyframes v-tracer { to { stroke-dashoffset: 0; } }
.v-retenue-bout, .v-bouts, .v-marche { opacity: 0; transition: opacity 1.6s var(--ease) 2.6s; }
.est-charge .v-retenue-bout, .est-charge .v-bouts, .est-charge .v-marche { opacity: 1; }
.v-pulse { animation: v-pouls 2.6s ease-out 2s infinite; transform-origin: 645px 225px; }
@keyframes v-pouls { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 1080px) {
  .scene--ouverture .ouverture__figure { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .scene--ouverture .ouverture__figure svg { transform: scale(1.14); transform-origin: 60% 50%; }
}


/* ---------- vérités sourcées (pourquoi ce cabinet existe) ---------- */
/* bandeau défilant des vérités */
.bandeau-verites { margin-top: var(--e4); overflow: hidden; position: relative; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.bandeau-verites__piste { display: flex; width: max-content; padding-block: .4rem;
  animation: verites-defiler 70s linear infinite; }
.bandeau-verites__copie { display: contents; }
.bandeau-verites:hover .bandeau-verites__piste { animation-play-state: paused; }
@keyframes verites-defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bandeau-verites__piste { animation: none; }
  .bandeau-verites { overflow-x: auto; }
}
.bandeau-verites .verite { flex: 0 0 auto; width: 300px; margin-right: 1rem; }
.bandeau-verites .verite--maitre { width: 400px; }
.verite { margin: 0; padding: 1.35rem 1.5rem; border-radius: var(--rayon-c);
  background: rgba(12,14,12,.04); display: flex; flex-direction: column;
  transition: background var(--court) var(--ease), transform var(--court) var(--ease); }
.verite:hover { transform: translateY(-2px); background: rgba(12,14,12,.07); }
.verite__fam { font-size: var(--micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bleu); }
.verite__txt { margin-top: .55rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-2c); }
.verite__source { margin-top: auto; padding-top: .8rem; font-size: var(--micro);
  color: rgba(12,14,12,.45); font-style: italic; }
.verite--maitre { background: var(--bleu); color: var(--clair); }
.verite--maitre .verite__fam { color: rgba(255,255,255,.8); }
.verite--maitre .verite__phrase { margin-top: .55rem; font-family: var(--titre); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.2; }
.verite--maitre .verite__note { margin-top: .55rem; font-size: .875rem; color: rgba(255,255,255,.8); }


/* rythme des fins de lignes : chapos équilibrés */
.chapo, .declaration__suite p, .encadre__detail { text-wrap: pretty; }
@supports (text-wrap: balance) { .chapo { text-wrap: balance; } }
.chapo { max-width: 56ch; }


/* ---------- section cabinet : carte du fondateur ---------- */
.cabinet__grille { display: grid; gap: var(--e3); margin-top: var(--e3); }
@media (min-width: 980px) {
  .cabinet__grille { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: var(--e4); align-items: stretch; }
}
.cabinet__texte .chapo { max-width: none; text-align: justify; hyphens: auto; }
.fiche-fondateur { border-radius: var(--rayon-c); background: rgba(12,14,12,.05);
  padding: 2rem 2.2rem; display: flex; flex-direction: column; }
.fiche-fondateur__texte { text-align: justify; hyphens: auto; }
.fiche-fondateur__refs { margin-top: auto; padding-top: 1.3rem; }
.fiche-fondateur__nom { margin: .9rem 0 0; font-family: var(--titre); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.02em; color: var(--encre); }
.fiche-fondateur__titre { margin: .15rem 0 0; font-size: var(--t-3); color: var(--encre-2c); }
.fiche-fondateur__texte { margin: 1rem 0 0; font-size: .9375rem; line-height: 1.6; }
.fiche-fondateur__refs { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.fiche-fondateur__refs li { font-size: var(--micro); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: .45rem .85rem; border-radius: 99px;
  border: 1px solid rgba(12,14,12,.18); color: var(--encre-2c); }

.fiche-fondateur__note { margin: .9rem 0 0; font-size: var(--micro); line-height: 1.55;
  color: var(--encre-2c); opacity: .8; letter-spacing: 0; text-transform: none; }


/* carte du fondateur : l'étiquette perd sa marge de section */
.fiche-fondateur .etiquette { margin: 0 0 1rem; }