/* ═══════════════════════════════════════════════════════════════
   Story Doctor — dealerdhistoires.com
   Franck Marcheix · Vincent Bosq-Bousquet
   ═══════════════════════════════════════════════════════════════ */

:root {
  --encre:      #0E0B0B;   /* noir d'encre, chaud — jamais bleuté */
  --encre-2:    #171211;
  --encre-3:    #201918;
  --craie:      #EFE7DC;   /* papier os */
  --craie-2:    rgba(239,231,220,.80);
  --craie-3:    rgba(239,231,220,.52);
  --pouls:      #A32A2E;   /* rouge sang séché */
  --pouls-d:    #C4383D;
  --alerte:     #C4383D;
  --ligne:      rgba(239,231,220,.16);
  --serif: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'Inter', sans-serif;   /* plus de terminal : les libellés sont typographiés */
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--encre);
  color: var(--craie);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 350;
  overflow-x: clip;               /* jamais hidden : casse position:sticky */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(1180px, 100% - var(--pad) * 2); margin-inline: auto; }
.narrow { width: min(780px, 100% - var(--pad) * 2); margin-inline: auto; }

/* ─── Typo ─── */
.display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.018em;
}
.display em { font-style: italic; color: var(--pouls-d); }
h2.t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.015em;
}
h2.t em { font-style: italic; color: var(--pouls-d); }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.2; }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--craie-2); line-height: 1.6; }
p + p { margin-top: 1em; }
.dim { color: var(--craie-2); }

.label {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--pouls-d);
  display: inline-flex; align-items: center; gap: 10px;
}
.label::before { content: ''; width: 30px; height: 1px; background: var(--pouls-d); }

section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.rule { height: 1px; background: var(--ligne); border: 0; }

/* ─── Barre de navigation ─── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9,12,13,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 1.34rem; letter-spacing: -.01em; }
.brand b i { font-style: normal; color: var(--pouls-d); }   /* le point rouge, typographié */
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: .86rem; font-weight: 450; color: var(--craie-2); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--craie); }
@media (max-width: 820px) { .nav-links a:not(.btn) { display: none; } }

/* ─── Boutons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 27px; border-radius: 999px;
  font-family: var(--sans); font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-p { background: var(--pouls); color: #FBF6EF; }
.btn-p:hover { background: var(--pouls-d); }
.btn-s { border-color: var(--ligne); color: var(--craie); }
.btn-s:hover { border-color: var(--pouls-d); color: var(--pouls-d); }
.btn-sm { padding: 11px 20px; font-size: .82rem; }

/* ─── Hero ─── */
.hero { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(60px, 8vw, 110px); overflow: hidden; }
.hero .display { max-width: 16ch; }
.hero .lede { max-width: 54ch; margin-top: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 42px; }
.hero-rule { margin-top: 62px; display: flex; align-items: center; gap: 22px; }
.hero-rule .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--pouls) 0%, var(--ligne) 62%, transparent 100%); }
.hero-rule .mark { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--craie-3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── Apparition au défilement ─── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.on { opacity: 1; transform: none; }

/* ─── Grilles ─── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }

/* ─── Symptômes ─── */
.sympt { border-top: 1px solid var(--ligne); padding: 26px 0 0; }
.sympt .n { font-family: var(--sans); font-size: .7rem; letter-spacing: .18em; color: var(--alerte); }
.sympt h3 { margin: 13px 0 9px; font-size: 1.35rem; }
.sympt p { font-size: .95rem; color: var(--craie-2); }

/* ─── Les deux cerveaux ─── */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 24px; margin-top: 38px; }
.who {
  background: var(--encre-2); border: 1px solid var(--ligne); border-radius: 20px;
  padding: clamp(28px, 3.4vw, 42px); position: relative; overflow: hidden;
}
.who::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pouls); }
.who { box-shadow: inset 0 0 60px rgba(163,42,46,.05); }
.who .role { font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pouls); }
.who h3 { font-size: 1.9rem; margin: 12px 0 4px; }
.who .sub { font-size: .9rem; color: var(--craie-3); margin-bottom: 20px; }
.who p { font-size: .96rem; color: var(--craie-2); }
.who ul { list-style: none; margin-top: 20px; display: grid; gap: 9px; }
.who li { font-size: .9rem; color: var(--craie-2); padding-left: 20px; position: relative; }
.who li::before { content: '—'; position: absolute; left: 0; color: var(--pouls); }

/* ─── Chiffres ─── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 38px; }
.stat { border-left: 2px solid var(--pouls); padding-left: 20px; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2.3rem, 4.6vw, 3.3rem); line-height: 1; font-weight: 400; }
.stat span { font-size: .84rem; color: var(--craie-2); display: block; margin-top: 8px; }

/* ─── Interventions ─── */
.acts { margin-top: 38px; border-top: 1px solid var(--ligne); }
.act {
  display: grid; grid-template-columns: 72px 1fr; gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--ligne);
  transition: background .25s;
}
.act:hover { background: rgba(242,239,233,.025); }
.act .num { font-family: var(--sans); font-size: .78rem; color: var(--pouls); padding-top: 8px; }
.act h3 { font-size: 1.6rem; margin-bottom: 8px; }
.act p { font-size: .96rem; color: var(--craie-2); max-width: 62ch; }
@media (max-width: 600px) { .act { grid-template-columns: 1fr; gap: 6px; } }

/* ─── Encadré citation ─── */
.pull {
  border-left: 2px solid var(--pouls); padding: 6px 0 6px 28px; margin: 44px 0;
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25;
}

/* ─── Bloc final ─── */
.final { background: var(--encre-2); border-radius: 26px; padding: clamp(40px, 6vw, 84px); text-align: center; border: 1px solid var(--ligne); }
.final .display { margin-inline: auto; max-width: 18ch; }
.final .lede { margin: 26px auto 0; max-width: 52ch; }
.final .hero-ctas { justify-content: center; }

/* ─── Pied de page ─── */
footer { border-top: 1px solid var(--ligne); padding: 54px 0 96px; font-size: .88rem; color: var(--craie-2); }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
footer h4 { font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--craie-3); margin-bottom: 14px; }
footer a { color: var(--craie-2); text-decoration: none; }
footer a:hover { color: var(--pouls); }
footer ul { list-style: none; display: grid; gap: 7px; }

.ic-copyright {
  position: fixed; right: 14px; bottom: 12px; z-index: 60;
  font-family: var(--sans); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,239,233,.35); pointer-events: auto;
}
.ic-copyright a { color: inherit; text-decoration: none; }
.ic-copyright a:hover { color: var(--pouls); }

/* ─── Spécifiques page de vente ─── */
.proto { counter-reset: step; margin-top: 54px; display: grid; gap: 2px; }
.step { background: var(--encre-2); border: 1px solid var(--ligne); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 58px 1fr; gap: 22px; }
.step:first-child { border-radius: 18px 18px 0 0; }
.step:last-child { border-radius: 0 0 18px 18px; }
.step .s-n { font-family: var(--sans); font-size: .75rem; color: var(--pouls); padding-top: 7px; }
.step h3 { font-size: 1.45rem; margin-bottom: 7px; }
.step p { font-size: .95rem; color: var(--craie-2); }
@media (max-width: 600px) { .step { grid-template-columns: 1fr; gap: 6px; } }

.forwho { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 50px; }
.fw { border: 1px solid var(--ligne); border-radius: 18px; padding: clamp(26px, 3vw, 36px); }
.fw.yes { border-color: rgba(53,224,161,.4); }
.fw h3 { font-size: 1.35rem; margin-bottom: 18px; }
.fw ul { list-style: none; display: grid; gap: 12px; }
.fw li { font-size: .94rem; color: var(--craie-2); padding-left: 26px; position: relative; }
.fw.yes li::before { content: '✓'; position: absolute; left: 0; color: var(--pouls); font-weight: 700; }
.fw.no li::before { content: '✕'; position: absolute; left: 0; color: var(--alerte); font-weight: 700; }

.faq { margin-top: 50px; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 0; font-size: 1.08rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); color: var(--pouls); font-size: 1.3rem; flex-shrink: 0; }
.faq details[open] summary::after { content: '–'; }
.faq p { padding: 0 0 24px; color: var(--craie-2); font-size: .96rem; max-width: 68ch; }

.tofill { background: rgba(255,90,95,.12); border: 1px dashed var(--alerte); color: var(--alerte);
  font-family: var(--sans); font-size: .72rem; padding: 2px 8px; border-radius: 5px; }

/* ═══════════════════════════════════════════════════════════════
   LE RÉCIT — scènes pleine largeur, actes, cinématique de défilement
   Un site qui vend le récit doit en être un. Ajouté le 11/09/2026.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Or et braise : la lumière du récit (le rouge reste l'encre du docteur) ─── */
:root { --or: #C9A227; --braise: #E2703A; --brume: #2E2019; }

/* ─── Une scène : image pleine largeur, texte posé dessus ─── */
.scene {
  position: relative;
  min-height: clamp(460px, 72vh, 760px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.scene > .decor {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* voile de lecture : sans lui, le texte se bat avec l'illustration */
.scene::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,11,11,.58) 0%, rgba(14,11,11,.26) 44%,
                            rgba(14,11,11,0) 74%),
    linear-gradient(180deg, rgba(14,11,11,.46) 0%, rgba(14,11,11,.04) 26%,
                            rgba(14,11,11,.58) 76%, var(--encre) 100%);
}
.scene .wrap { padding-bottom: clamp(40px, 5vh, 64px); padding-top: clamp(48px, 7vh, 88px); }
.scene-salle  > .decor { background-image: url('scenes/salle.svg'); }
/* L'ouverture : le décor n'est plus qu'une ambiance de poussière très assombrie ;
   l'animal, lui, est une vraie image dans sa colonne, jamais recadrée par cover. */
.scene-photo  > .decor { background-image: image-set(url('scenes/conferenciere-bd.webp') type('image/webp'), url('scenes/conferenciere-bd.jpg')); background-position: 70% 38%; }
.scene-salle2 > .decor { background-image: image-set(url('scenes/salle.webp') type('image/webp'), url('scenes/salle.jpg')); background-position: 58% 42%; }
/* La légende : image recadrée pour que le tigre tombe à 70 % de la largeur,
   hors du panneau de lecture qui occupe la gauche. Mesuré, pas estimé. */
.scene-oeil   > .decor { background-image: image-set(url('scenes/legende.webp') type('image/webp'), url('scenes/legende.jpg')); background-position: 24% 46%; }
.scene-fin2   > .decor { background-image: image-set(url('scenes/public.webp') type('image/webp'), url('scenes/public.jpg')); background-position: 64% 46%; }
.scene-cite   > .decor { background-image: url('scenes/cite.svg'); }
.scene-fin    > .decor { background-image: url('scenes/scene.svg'); }
.accompagnement .scene-salle > .decor,
.sub-page .scene-salle > .decor { background-image: url('../assets/scenes/salle.svg'); }

/* ─── Le numéro d'acte ─── */
.acte {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--serif); font-style: italic;
  color: var(--or); font-size: 1.1rem; letter-spacing: .02em;
}
.acte { flex-wrap: wrap; }
.acte .n {
  font-style: normal; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--sans); font-weight: 700; color: var(--braise);
  border: 1px solid rgba(226,112,58,.42); border-radius: 999px; padding: 5px 13px;
}

/* ─── Le titre d'un acte, plus grand et plus lyrique ─── */
.acte-titre {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -.018em;
  margin-top: 22px; max-width: 17ch;
}
.acte-titre em { font-style: italic; color: var(--or); }
.acte-texte { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--craie-2); max-width: 56ch; margin-top: 24px; line-height: 1.62; }

/* ─── L'illustration « la table », insérée dans le flux ─── */
.planche {
  margin: clamp(28px, 3.4vw, 48px) 0;
  border: 1px solid var(--ligne); border-radius: 18px; overflow: hidden;
  background: var(--encre-2);
}
.planche img { width: 100%; height: auto; display: block; }
.planche figcaption {
  padding: 16px 22px; font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--craie-3); border-top: 1px solid var(--ligne);
}

/* ─── La braise qui respire, derrière les sections sombres ─── */
.ember { position: relative; overflow: hidden; }
.ember::before {
  content: ''; position: absolute; z-index: 0; inset: auto -10% -40% -10%; height: 70%;
  background: radial-gradient(ellipse at 50% 100%, rgba(226,112,58,.13), transparent 68%);
  pointer-events: none;
}
.ember > * { position: relative; z-index: 1; }

/* ─── Le fil rouge : un trait qui se dessine le long du récit ─── */
.fil { display: flex; justify-content: center; padding: 0; }
.fil span { display: block; width: 1px; height: clamp(56px, 9vh, 110px);
  background: linear-gradient(180deg, transparent, var(--pouls) 45%, transparent); }

@media (max-width: 720px) {
  .scene { min-height: 74vh; }
  .acte-titre { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* ═══════════════════════════════════════════════════════════════
   LE MOUVEMENT — ce qui embarque, ou ce qui reste une plaquette
   ═══════════════════════════════════════════════════════════════ */

/* ─── Le décor respire : lent travelling avant, jamais perceptible consciemment ─── */
.scene > .decor {
  transform: scale(1.06);
  animation: respire 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes respire {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.8%, 0); }
}

/* ─── Les braises montent ─── */
.braises { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.braises i {
  position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--braise); opacity: 0;
  animation: monte linear infinite;
  box-shadow: 0 0 8px 1px rgba(226,112,58,.55);
}
@keyframes monte {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .7; }
  100% { transform: translateY(-88vh) translateX(var(--drift, 30px)) scale(1.25); opacity: 0; }
}

/* ─── La poussière d'or de l'acte final ─── */
.braises.or i { background: var(--or); box-shadow: 0 0 9px 1px rgba(201,162,39,.5); }

/* ─── Le titre se lève mot à mot ─── */
.lever span.m { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(1.2deg);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1); }
.lever.on span.m { opacity: 1; transform: none; }

/* ─── Le fil rouge : la progression du récit, sur le bord gauche ─── */
.fil-recit {
  position: fixed; left: 0; top: 0; width: 2px; height: 100vh; z-index: 40;
  background: rgba(239,231,220,.07); pointer-events: none;
}
.fil-recit b {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--braise), var(--pouls) 55%, var(--or));
  box-shadow: 0 0 12px rgba(226,112,58,.5);
  transition: height .12s linear;
}
@media (max-width: 720px) { .fil-recit { display: none; } }

/* ─── Les cartes s'inclinent légèrement au survol ─── */
.who { transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s; }
.who:hover { transform: translateY(-6px) rotate(-.35deg); box-shadow: 0 26px 60px rgba(0,0,0,.5); }

/* ─── Le portrait dans la carte ─── */
.who .portrait {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; margin-bottom: 22px;
  filter: grayscale(1) contrast(1.08);
  transition: filter .5s, transform .6s;
}
.who:hover .portrait { filter: grayscale(.55) contrast(1.1); transform: scale(1.015); }

/* ─── Le voile de scène s'ouvre au premier chargement ─── */
.rideau {
  position: fixed; inset: 0; z-index: 90; background: var(--encre);
  pointer-events: none; animation: leve-rideau 1.25s cubic-bezier(.65,0,.2,1) .15s forwards;
}
@keyframes leve-rideau { to { transform: translateY(-102%); } }

@media (prefers-reduced-motion: reduce) {
  .scene > .decor { animation: none; transform: scale(1.04); }
  .braises, .rideau { display: none; }
  .lever span.m { opacity: 1; transform: none; }
}

/* ─── La torche : le curseur éclaire la scène ─── */
.scene .torche-halo {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(420px circle at var(--tx,50%) var(--ty,50%),
              rgba(255,214,150,.16), rgba(226,112,58,.07) 42%, transparent 68%);
  pointer-events: none;
}
.scene.torche .torche-halo { opacity: 1; }

/* ─── Le balayage de lumière sur le titre d'ouverture ─── */
.hero-shimmer {
  background: linear-gradient(100deg, var(--craie) 0%, var(--craie) 38%,
              #FFF3D6 47%, var(--or) 52%, var(--craie) 60%, var(--craie) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: balaye 7s ease-in-out 1.4s infinite;
}
@keyframes balaye { 0%,68% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-shimmer { animation: none; -webkit-text-fill-color: var(--craie); color: var(--craie); }
  .scene .torche-halo { display: none; }
}

/* ─── L'encre en WebGL, sur l'ouverture ─── */
.encre-canvas {
  position: absolute; inset: 0; z-index: -1;
  display: block; mix-blend-mode: screen; opacity: .9;
  pointer-events: none;
}
/* la photo passe derrière l'encre et se désature : l'encre est la vedette */

/* ─── Transition de page native, quand le navigateur sait faire ─── */
@view-transition { navigation: auto; }

/* ═══════════════════════════════════════════════════════════════
   LA PROFONDEUR — trois plans qui ne bougent pas à la même vitesse
   ═══════════════════════════════════════════════════════════════ */
.plans { position: absolute; inset: -8% -6%; z-index: -2; }
.plans .plan {
  position: absolute; inset: 0;
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
  will-change: transform;
}
.plan-ciel     { background-image: url('scenes/cite-ciel.svg'); }
.plan-braises  { background-image: url('scenes/cite-braises.svg'); }
.plan-remparts { background-image: url('scenes/cite-remparts.svg'); }
/* repli : sans JS, un seul plan suffit à faire l'image */
.no-js .plans .plan:not(.plan-ciel) { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   LE CURSEUR — une pointe d'encre, et le scalpel sur ce qui se clique
   ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .pointe, .anneau { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
    border-radius: 50%; mix-blend-mode: difference; }
  .pointe { width: 7px; height: 7px; background: var(--craie); margin: -3.5px 0 0 -3.5px; }
  .anneau { width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border: 1px solid rgba(239,231,220,.55);
    transition: width .28s cubic-bezier(.2,.7,.3,1), height .28s cubic-bezier(.2,.7,.3,1),
                margin .28s cubic-bezier(.2,.7,.3,1), border-color .28s, background .28s; }
  .anneau.saisit { width: 66px; height: 66px; margin: -33px 0 0 -33px;
    border-color: var(--pouls-d); background: rgba(163,42,46,.14); }
  html.curseur-maison, html.curseur-maison * { cursor: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LE BANDEAU — les cinq gestes qui défilent, sans fin
   ═══════════════════════════════════════════════════════════════ */
.bandeau {
  overflow: hidden; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
  padding: 14px 0; background: var(--encre-2);
}
.bandeau .piste { display: flex; width: max-content; animation: defile 42s linear infinite; }
.bandeau:hover .piste { animation-play-state: paused; }
.bandeau span {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  padding: 0 22px; white-space: nowrap; color: var(--craie-3);
}
.bandeau span b { color: var(--craie); font-weight: 400; }
.bandeau span i { color: var(--pouls-d); font-style: normal; padding-left: 30px; }
@keyframes defile { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .bandeau .piste { animation: none; }
  .pointe, .anneau { display: none; }
}

/* ─── L'œil du tigre : la scène de l'acte II ─── */
.scene-tigre .plan-braises { opacity: .55; }
.scene-tigre::after {
  background: linear-gradient(180deg, rgba(14,11,11,.80) 0%, rgba(14,11,11,.30) 30%,
                                      rgba(14,11,11,.82) 72%, var(--encre) 100%);
}


/* ═══════════════════════════════════════════════════════════════
   LISIBILITÉ — le texte ne s'écrit jamais à même l'image
   Mesuré : sous « cavalier », la zone de texte est à 0,32 de luminance.
   Du papier os par-dessus, c'est 2,4:1 — illisible. Le panneau ramène le
   fond sous 0,14, donc au-delà de 4,5:1.
   ═══════════════════════════════════════════════════════════════ */
.panneau {
  background: rgba(11,9,9,.52);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  border: 1px solid rgba(239,231,220,.10);
  border-radius: 22px;
  padding: clamp(28px, 3.4vw, 46px) clamp(26px, 3.2vw, 48px);
  max-width: 46rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
/* Sans backdrop-filter, on compense par un fond plus dense : jamais de
   texte sur une image nue, même sur un navigateur ancien. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panneau { background: rgba(11,9,9,.84); }
}
.panneau .acte { margin-bottom: 4px; }
.panneau .acte-titre, .panneau .display { margin-top: 16px; }
.panneau .acte-texte, .panneau .lede { max-width: 100%; }
.panneau .hero-ctas { margin-top: 30px; }
@media (max-width: 640px) {
  .panneau { padding: 24px 20px; border-radius: 18px; }
}


/* ─── Ouverture : le panneau libère la droite, où vit le cavalier ───
   L'image était recadrée pour que le sujet tombe à 71 % de la largeur ;
   il ne sert à rien de le placer là si le texte s'étale par-dessus. */
.scene-photo .panneau { max-width: 34rem; }
.scene-photo::after {
  background:
    linear-gradient(100deg, rgba(14,11,11,.72) 0%, rgba(14,11,11,.34) 38%,
                            rgba(14,11,11,0) 62%),
    linear-gradient(180deg, rgba(14,11,11,.40) 0%, rgba(14,11,11,.02) 26%,
                            rgba(14,11,11,.50) 78%, var(--encre) 100%);
}
@media (min-width: 1100px) {
  .scene-photo .wrap {
    display: grid; grid-template-columns: minmax(0, 34rem) 1fr;
    gap: clamp(24px, 4vw, 70px); align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES GROS EFFETS — apparition, surlignage, zoom
   Pilotés par la variable --p que publie assets/effets.js (voir plus bas).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 6. Le surlignage : un trait de couleur passe SOUS le mot, puis le tient ─── */
.surligne {
  position: relative; display: inline-block;
  padding: 0 .16em; margin: 0 -.16em;
  color: var(--craie);
}
.surligne::before {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: 0; bottom: .04em; height: .42em;
  background: var(--pouls); border-radius: 2px;
  transform-origin: left center; transform: scaleX(0) skewX(-12deg);
}

.surligne-or::before { background: var(--or); }

/* ─── 7. Les cartes symptômes prennent du corps ─── */
.sympt {
  border-top: 2px solid var(--pouls);
  background: linear-gradient(180deg, rgba(163,42,46,.07), transparent 62%);
  padding: 26px 22px 30px;
  border-radius: 0 0 16px 16px;
  transition: background .4s, transform .4s;
}
.sympt:hover { background: linear-gradient(180deg, rgba(163,42,46,.14), transparent 70%); transform: translateY(-3px); }
.sympt h3 { font-size: 1.42rem; }
.sympt p { font-size: 1rem; color: var(--craie-2); }

/* ─── 8. La citation devient un moment ─── */
.pull {
  font-size: clamp(1.8rem, 4vw, 3rem);
  border-left-width: 3px;
  padding: 14px 0 14px 34px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LES EFFETS, PILOTÉS PAR --p

   `--p` vaut la progression de l'élément dans l'écran, de 0 à 1, publiée par
   assets/effets.js. Il vaut 1 par défaut : sans JavaScript, la page s'affiche
   directement à l'état final. Aucun effet n'est nécessaire à la lecture.
   ═══════════════════════════════════════════════════════════════════════════ */
.scene > .decor,
.acte-titre, .display, .acte-texte, .lede, .sympt, .act, .who, .step, .fw,
.planche, .engagement-card, .panneau, .stat b, .stat span, .surligne, .pull { --p: 1; }

/* Le décor : dézoom continu sur toute la traversée, et la lumière qui monte */
.scene > .decor {
  animation: none !important;                    /* remplace la « respiration » */
  transform: scale(calc(1.10 - var(--p) * 0.10)) translate3d(0, calc((0.5 - var(--p)) * 3%), 0);
  filter: brightness(calc(0.62 + var(--p) * 0.46)) saturate(calc(0.72 + var(--p) * 0.34));
  transition: none;
}

/* Les titres sortent d'un masque, du bas vers le haut */
.acte-titre, .display {
  transition: clip-path .8s cubic-bezier(.16,.84,.3,1), opacity .8s ease, transform .8s cubic-bezier(.16,.84,.3,1), filter .8s ease;
  clip-path: inset(0 0 calc((1 - var(--p)) * 108%) 0);
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * .34em)) scale(calc(0.965 + var(--p) * 0.035));
  filter: blur(calc((1 - var(--p)) * 7px));
}

/* Les textes et blocs montent dans le net */
.acte-texte, .lede, .sympt, .act, .who, .step, .fw, .planche, .engagement-card, .pull {
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.3,1), filter .7s ease;
  opacity: calc(var(--p) * 1.15);
  transform: translateY(calc((1 - var(--p)) * 40px));
  filter: blur(calc((1 - var(--p)) * 6px));
}

/* Le panneau s'ouvre en largeur, de la gauche vers la droite */
.panneau {
  transition: clip-path .9s cubic-bezier(.2,.8,.25,1), transform .9s cubic-bezier(.2,.8,.25,1);
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transform: translateX(calc((1 - var(--p)) * -26px));
}

/* Les chiffres jaillissent, et leur chasse se desserre */
.stat b {
  display: block;
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * .4em)) scale(calc(0.62 + var(--p) * 0.38));
  letter-spacing: calc((1 - var(--p)) * -.08em);
  transform-origin: left bottom;
}
.stat span { opacity: calc(var(--p) * 1.6 - 0.6); }

/* Le trait de surlignage passe sous le mot */
.surligne::before { transform: scaleX(var(--p)) skewX(-12deg); }


/* ─── Ce qu'on fait, en une ligne, dès l'ouverture ─── */
.hero-quoi {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px; padding: 0;
}
.hero-quoi li {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--craie-2);
  border: 1px solid var(--ligne); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap;
  background: rgba(239,231,220,.04);
}
.hero-quoi li:hover { color: var(--craie); border-color: var(--pouls-d); }

.scene-oeil .panneau { max-width: 32rem; }
.scene-oeil::after {
  background:
    linear-gradient(100deg, rgba(14,11,11,.74) 0%, rgba(14,11,11,.30) 40%,
                            rgba(14,11,11,0) 66%),
    linear-gradient(180deg, rgba(14,11,11,.40) 0%, rgba(14,11,11,.04) 26%,
                            rgba(14,11,11,.54) 78%, var(--encre) 100%);
}
@media (min-width: 1100px) {
  .scene-oeil .wrap { display: grid; grid-template-columns: minmax(0, 32rem) 1fr; }
}