@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:      #0A0B0A;
  --nuit:      #151815;
  --indigo:    #14352A;
  --bleu:      #1E5C46;
  --bleu-vif:  #3E9B7B;
  --bleu-nuit: #0E3A2C;
  --azur:      #D2A24C;
  --clair:     #FFFFFF;
  --creme:     #F2EFE6;
  --encre:     #0C0E0C;
  --encre-2:   rgba(255,255,255,.62);
  --encre-2c:  #5C6259;

  --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, #1B4436 0%, #102821 55%, #0A1B16 100%); }
.pan--bleu    { background: var(--bleu); }
.pan--degrade { background:
  radial-gradient(120% 90% at 82% 8%, rgba(62,155,123,.55) 0%, rgba(30,92,70,0) 58%),
  radial-gradient(90% 70% at 8% 92%, rgba(15,42,204,.55) 0%, rgba(15,42,204,0) 60%),
  #0D110E; }
.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; }

/* ---------- 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(12,14,12,.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(--e3); font-size: var(--t-3); max-width: 40ch; }

/* ---------- 01 ouverture ---------- */
.scene--ouverture { padding-top: var(--e6); }
.ouverture__sous { margin-top: 1.3rem; font-size: var(--t-3); max-width: 46ch; color: var(--encre-2); }
.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; }

/* ---------- 03 situations ---------- */
.rangs { display: grid; gap: .6rem; max-width: 1180px; margin: var(--e3) 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);
  background: rgba(255,255,255,.06); transition: background var(--court) var(--ease); }
@media (hover: hover) { .temps:hover { background: rgba(255,255,255,.12); } }
.temps h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.temps h3::before { display: block; margin-bottom: .2rem; 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 les trois familles ---------- */
.familles-offre { max-width: 1180px; margin: var(--e4) auto 0; padding-inline: 1.25rem;
  display: grid; gap: 0; }
.famille { display: grid; gap: 1.5rem; padding: 3.4rem 0; }
.famille + .famille { border-top: 1px solid rgba(12,14,12,.12); }
.famille__tete { display: grid; gap: .3rem; align-content: start; }
.famille__num { font-family: var(--titre); font-size: var(--micro); font-weight: 700;
  color: var(--bleu); letter-spacing: .06em; }
.famille__nom { font-family: var(--titre); font-weight: 700; font-size: 2.4rem;
  letter-spacing: -.05em; line-height: .95; }
.famille__dit { font-size: .9375rem; color: var(--encre-2c); max-width: 34ch; }
.famille__liste { display: grid; gap: 1rem; align-content: start; }

.offre { display: grid; gap: .45rem; padding: 1.5rem 1.6rem; border-radius: var(--rayon-c);
  text-decoration: none; color: var(--encre); background: rgba(12,14,12,.04);
  transition: background var(--court) var(--ease), transform var(--court) var(--ease); }
.offre:hover { background: var(--bleu); color: var(--clair); transform: translateY(-2px); }
.offre:hover .offre__dit { color: rgba(255,255,255,.85); }
.offre__nom { font-family: var(--titre); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.035em; line-height: 1.15; }
.offre__dit { font-size: .9375rem; color: var(--encre-2c); }

/* méthode dépliable */
.temps { cursor: pointer; touch-action: manipulation; }
.temps > p { display: none; }
.temps.ouvert > p { display: block; }
.temps:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* offres dépliables */
details.offre { cursor: pointer; }
details.offre summary { list-style: none; cursor: pointer; display: grid; gap: .3rem; }
details.offre summary::-webkit-details-marker { display: none; }
details[open].offre { background: var(--bleu); color: var(--clair); }
details[open].offre .offre__dit { color: rgba(255,255,255,.85); }
.offre__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].offre .offre__plus { color: rgba(255,255,255,.88); border-top-color: rgba(255,255,255,.25); }

@media (min-width: 820px) {
  .famille { grid-template-columns: 17rem 1fr; gap: 2.5rem; padding: 2.4rem 0; }
  .famille__liste { grid-template-columns: repeat(2, 1fr); }
  .famille--trois .offre:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .famille { grid-template-columns: 20rem 1fr; gap: 3.5rem; }
}

/* ---------- 06 avant de choisir ---------- */
.mesure__tete { display: grid; gap: 1rem; }
@media (min-width: 900px) { .mesure__tete { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; } }

.choix { list-style: none; margin: var(--e4) 0 0; padding: 0;
  display: grid; gap: 0; counter-reset: cx; }
.choix__item { counter-increment: cx; padding: 1.5rem 0 1.5rem 3.2rem; position: relative;
  border-top: 1px solid rgba(12,14,12,.12); }
.choix__item::before { content: counter(cx, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font-family: var(--titre); font-size: var(--micro); font-weight: 700;
  letter-spacing: .06em; color: var(--bleu); }
.choix__item h3 { font-family: var(--titre); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -.035em; line-height: 1.2; }
.choix__item p { margin-top: .4rem; font-size: .9375rem; color: var(--encre-2c); max-width: 62ch; }
.choix__fin { margin-top: var(--e3); padding-top: 1.4rem;
  border-top: 1px solid rgba(12,14,12,.12);
  font-size: var(--t-3); max-width: 56ch; }

@media (min-width: 860px) {
  .choix { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

/* ---------- 07 parcours ---------- */
.scene--parcours .repere { background: rgba(255,255,255,.16); }
.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); }

/* ---------- 08 IA ---------- */

/* ---------- 09 questions ---------- */
.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::after { content: "+"; font-family: var(--texte); font-weight: 400; font-size: 1.5rem;
  color: var(--bleu-nuit); transition: transform var(--court) var(--ease); }

/* ---------- 10 fin ---------- */
.scene--fin { text-align: center; padding-block: var(--e6); }
.scene--fin .repere { text-align: left; margin-bottom: var(--e3); }
.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; justify-content: 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; }

/* transition entre pages : le script pose est-sortant sur <html> avant de naviguer */
html.est-sortant body { opacity: 0; transition: opacity 250ms var(--ease); }

/* ---------- à 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 { grid-template-columns: repeat(3, 1fr); padding-inline: 3rem; }
  .temps-liste { grid-template-columns: repeat(2, 1fr); }
  .site-pied__haut { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .site-pied__bas { display: flex; gap: 2.5rem; }
  }

/* ---------- à 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; }
  .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 .ouverture__texte { align-self: center; grid-column: 1; grid-row: 1 / span 2; }
  .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 */
  .temps-liste { grid-template-columns: repeat(5, 1fr); }
}

@media print {
  .reveler, .apparait, .titre-geant i { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .titre-geant i, .reveler, .apparait { 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, #1B4436 0%, #102821 55%, #0A1B16 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(12,14,12,.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(12,14,12,.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(12,14,12,.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(12,14,12,.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__details dt { font-size: var(--micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--azur); }
.lien-fleche { display: inline-flex; gap: .4rem; margin-top: var(--e2); font-size: .9375rem;
  font-weight: 600; color: var(--azur); text-decoration: 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(12,14,12,.04); }
.tableau td.col-prix { margin-top: .4rem; font-family: var(--titre); font-weight: 700; font-size: 1.4rem;
  color: var(--azur); }

.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; }

.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; }
.confirmation { margin-top: var(--e2); padding: 1rem 1.2rem; border-radius: var(--rayon-c);
  background: rgba(210,162,76,.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)); }
  .rappel { grid-template-columns: 1fr auto; align-items: center; }
  .rappel .bouton { justify-self: end; }
  .deroule, .faq, .articles { grid-template-columns: 1fr 1fr; }
  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); }
}

/* ---------- ouverture du site entreprises ---------- */
.ouverture__figure { margin: 0; padding: 0; max-width: none; border: 0; }
.ouverture__figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.marqueurs { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: .55rem; }
.marqueurs li { display: flex; gap: .7rem; align-items: baseline;
  font-size: .9375rem; color: rgba(255,255,255,.72); line-height: 1.4; }
.marqueurs li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .45rem;
  border-radius: 50%; background: var(--azur); }
.marqueurs b { color: rgba(255,255,255,.95); font-weight: 600; }
.pan--clair .marqueurs li { color: var(--encre-2c); }
.pan--clair .marqueurs li::before { background: var(--bleu); }

/* ---------- les six familles ---------- */
#familles text { font-family: var(--texte), system-ui, sans-serif; }
.fm-grille { stroke: rgba(255,255,255,.13); stroke-width: 1; }
.fm-aire { fill: rgba(62,155,123,.15); stroke: var(--bleu-vif); stroke-width: 1.4; }
.fm-rayon { stroke: var(--bleu-vif); stroke-width: 2.6; stroke-linecap: round; }
.fm-point { fill: var(--azur); }
.fm-nom { font-family: var(--titre), system-ui, sans-serif; font-size: 22px;
  font-weight: 600; letter-spacing: -.01em; fill: #fff; }
.fm-nom--2 { font-weight: 400; fill: rgba(255,255,255,.72); }
.fm-source { font-size: 17px; fill: rgba(255,255,255,.42); }

/* ---------- le relevé ---------- */
.releve-q { border: 0; margin: 0 0 .5rem; padding: 1.1rem 1.25rem; }
.releve-q legend { font-family: var(--titre); font-weight: 600; font-size: var(--t-3);
  padding: 0 0 .6rem; line-height: 1.3; }
.releve-choix { display: flex; align-items: center; gap: .55rem; padding: .3rem 0;
  cursor: pointer; color: rgba(255,255,255,.78); }
.releve-choix input { accent-color: var(--bleu-vif); }
.releve-actions { position: sticky; bottom: .5rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 1rem; }
.releve-zone--ok .encadre__prix { color: var(--bleu-vif); }
.releve-zone--ambre .encadre__prix { color: var(--azur); }
.releve-zone--rouge .encadre__prix { color: #E08A6A; }
@media (min-width: 1080px) {
  .ouverture__figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---------- pied : intitulés de famille ---------- */
.site-pied ul li b { display: block; margin-top: .7rem; font-family: var(--titre);
  font-size: var(--micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.42); }
.site-pied ul li:first-child b { margin-top: 0; }

/* ---------- réassurance sous les appels à l'action ---------- */
.rassure { margin-top: .7rem; font-size: .875rem; line-height: 1.45;
  color: var(--encre-2c); }
.pan--clair .rassure { color: var(--encre-2c); }
.rassure--clair { margin-top: .9rem; font-size: .875rem; color: rgba(255,255,255,.62);
  max-width: 46ch; }
.pan--clair .rassure--clair { color: var(--encre-2c); }

/* ---------- bloc « votre intervenant » ---------- */
.intervenant { margin-top: var(--e3); padding-top: 1.1rem;
  border-top: 1px solid rgba(12,14,12,.12); }
.intervenant__label { font-family: var(--titre); font-size: var(--micro);
  font-weight: 700; letter-spacing: .06em; color: var(--bleu); }
.intervenant__nom { margin-top: .25rem; font-family: var(--titre); font-weight: 700;
  font-size: var(--t-3); letter-spacing: -.03em; }
.intervenant__dit { margin-top: .35rem; font-size: .875rem; line-height: 1.5;
  color: var(--encre-2c); }
.intervenant__dit a { color: var(--bleu); text-decoration: underline;
  text-underline-offset: 2px; }


/* résultat du premier repère : verdicts à taille raisonnable */
.releve-etat { margin: .35rem 0 0; font-family: var(--titre); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.02em; }
.releve-ressort { margin: .5rem 0 0; font-size: .875rem; line-height: 1.5; opacity: .85; }


/* schéma des familles : colonne droite de la tête de section */
.scene--methode { overflow: hidden; }
.methode__tete { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1180px) {
  .methode__tete { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
}
.methode-schema { width: 100%; max-width: 420px; height: auto; opacity: .95;
  pointer-events: none; justify-self: end; }
.methode-schema .fm-nom { font-size: 25px; }
.methode-schema .fm-nom--2 { font-size: 25px; }
.methode-schema .fm-source { font-size: 17px; }
@media (max-width: 1180px) { .methode-schema { display: none; } }


/* ---------- cercle des bénéfices (hero) ---------- */
#cercle-benefices { display: block; width: 100%; height: auto; overflow: visible; }
.cb-arc { fill: none; stroke: var(--clair); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.est-charge .cb-arc { animation: cb-tracer 1.8s var(--ease) calc(.6s + var(--i) * .9s) forwards; }
.cb-lbl { fill: rgba(237,239,243,.62); font-family: var(--texte); font-size: 13px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0;
  transition: opacity 1.4s var(--ease); transition-delay: calc(1s + var(--i) * .9s); }
.cb-ancre { fill: var(--azur); opacity: 0; transition: opacity 1s var(--ease);
  transition-delay: calc(1.2s + var(--i) * .9s); }
.est-charge .cb-ancre { opacity: .9; }
.est-charge .cb-lbl { opacity: 1; }
.cb-halo { fill: none; stroke: var(--azur); stroke-width: 4; opacity: 0;
  transform-origin: 380px 320px; }
.est-charge .cb-halo { animation: cb-lueur 4s ease-out 7.2s infinite; }
.cb-centre { fill: rgba(237,239,243,.82); font-family: var(--titre); font-style: italic;
  font-weight: 300; font-size: 21px; letter-spacing: .01em; opacity: 0;
  transition: opacity 1.6s var(--ease) 4.2s; }
.est-charge .cb-centre { opacity: 1; }
@keyframes cb-tracer { to { stroke-dashoffset: 0; } }
@keyframes cb-lueur { 0% { opacity: 0; transform: scale(1); } 20% { opacity: .55; }
  60% { opacity: 0; transform: scale(1.10); } 100% { opacity: 0; } }
@keyframes cb-pouls { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .cb-arc { stroke-dashoffset: 0; animation: none; }
  .cb-lbl { opacity: 1; transition: none; }
  .cb-halo { animation: none; }
  .cb-centre { opacity: 1; transition: none; }
}


/* restitution du premier repère : couleurs et synthèse */
.releve-zone--ok .releve-etat { color: var(--bleu-vif); }
.releve-zone--ambre .releve-etat { color: #C9A15C; }
.releve-zone--rouge .releve-etat { color: #E08A6A; }
.releve-synthese { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  margin: 1.4rem 0 .4rem; }
.releve-anneau { width: 148px; height: 148px; flex: 0 0 auto; }
.releve-anneau__arc { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cb-tracer 1s var(--ease) calc(var(--i) * .35s + .2s) forwards; }
.releve-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.releve-legende li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; }
.releve-pastille { width: .65rem; height: .65rem; border-radius: 50%; flex: 0 0 auto; }
.releve-piste { margin: .45rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--azur); }
@media (prefers-reduced-motion: reduce) { .releve-anneau__arc { animation: none; stroke-dashoffset: 0; } }


/* mention légale de l'outil, en petit */
.mention-outil { max-width: 72ch; margin: 2.2rem auto 0; padding: 0 1.5rem; }
.mention-outil p { margin: 0 0 .5rem; font-size: var(--micro); line-height: 1.55;
  color: rgba(237,239,243,.55); }


/* rythme des fins de lignes : chapos et sous-titres équilibrés */
.chapo, .ouverture__sous, .encadre__detail { text-wrap: pretty; }
@supports (text-wrap: balance) { .chapo, .ouverture__sous { 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; }

/* Parcours — trois marches (section « Par où commencer ») */
.parcours { list-style: none; padding: 0; margin-top: var(--e5); display: grid; gap: 1.4rem;
  counter-reset: marche; }
.marche { counter-increment: marche; padding: 2rem 2.2rem; border-radius: var(--rayon-c);
  background: rgba(255,255,255,.06); display: grid; gap: .4rem; align-content: start; }
.marche h3 { font-size: 1.4rem; letter-spacing: -.04em; }
.marche h3::before { display: block; margin-bottom: .2rem; content: counter(marche, decimal-leading-zero) " ·";
  color: var(--azur); font-size: var(--micro); font-weight: 600; letter-spacing: 0; }
.marche p { font-size: .9375rem; }
.marche .bouton { justify-self: start; margin-top: .8rem; }
@media (min-width: 880px) {
  .parcours { grid-template-columns: repeat(3, 1fr); }
}
.parcours-repere { margin-top: var(--e4); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.marche ul { list-style: none; padding: 0; margin-top: .6rem; display: grid; gap: .45rem; }
.marche ul li { font-size: .9375rem; padding-left: 1.1rem; position: relative; }
.marche ul li::before { content: ""; position: absolute; left: 0; top: .52em; width: .45rem; height: 2px;
  background: var(--azur); }
.marche > p { color: rgba(255,255,255,.78); }

/* Démarche — alignement de section de contenu, pas de bloc d'appel */
.scene--demarche { padding-block: var(--e6); }
.scene--demarche h2 { max-width: 22ch; }
.scene--demarche .chapo { max-width: 62ch; margin-top: var(--e3); }
.scene--demarche .marche { text-align: left; }
.scene--demarche .marche h3::before { text-align: left; }
.parcours-repere { justify-content: flex-start; }