/* Site KINESI, repris du prototype A7 validé (part de A6 ; haut de page à la hauteur exacte de la fenêtre, chevron seul, fond sans ligne entre les sections) : le dossier en « Papier fin » (chemise crème à grain très léger, fiches sans lignes avec
   une petite barre de couleur, un seul rayon partout : 4 px), fond sobre, bouton en haut et en bas. Jetons repris de la direction B de l'app (« Cabinet chaleureux »), polices système. */
:root {
  --surface: #f7f4ef;
  --raised: #fffefb;
  --creuse: #efe9df;
  --ink: #23272b;
  --ink-2: #5f6770;
  --sauge: #6a8c80;
  --sauge-deep: #48665c;
  --lavis: #e6eeea;
  --border: #e4ddd2;
  --border-champ: #858c95;
  --doubt: #c99a4e;
  --doubt-ink: #8a6826;
  --clay: #c46a5a;
  --record: #c0392b;
  --cite: #fff3c4;
  --papier: #fffdf8;
  --chemise: #ddd0b8;
  --chemise-face: #e7dcc7;
  --chemise-ink: #4d4234;
  --chemise-ink-2: #85776a;
  /* Un seul rayon pour tout le site. */
  --r: 4px;
  --r-form: 12px;     /* la fenêtre du formulaire */
  --r-form-in: 8px;   /* ses champs, cases et bouton */
  /* Ombres : un liseré presque invisible, puis une ombre douce, plus large quand l'objet flotte. */
  --ombre-pose: 0 0 0 1px rgba(35, 39, 43, .06), 0 1px 2px rgba(60, 45, 25, .06);
  --ombre-flot: 0 0 0 1px rgba(35, 39, 43, .05), 0 1px 2px rgba(60, 45, 25, .05), 0 12px 28px -6px rgba(60, 45, 25, .16);
  --f-sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-lettre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-mono: "SF Mono", ui-monospace, Menlo, monospace;
  --bruit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .24  0 0 0 0 .16  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Le grain de la chemise, repris tel quel de la planche (style 2). */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --copy-h: 220px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface); }
body {
  margin: 0; background: transparent; color: var(--ink);
  font-family: var(--f-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
h1, h2 { letter-spacing: -0.015em; }
b.nom-ia { color: var(--sauge-deep); font-weight: 800; }

/* ── La matière du fond (toute la page) : un grain de papier très léger et deux formes douces ── */
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--surface); }
.atmos::after { content: ""; position: absolute; inset: 0; background-image: var(--bruit); opacity: .07; mix-blend-mode: multiply; }
.bulle { position: absolute; border-radius: 50%; width: 80vmax; height: 80vmax; background: radial-gradient(closest-side, var(--c), transparent 72%); will-change: transform; }
.b1 { --c: rgba(190, 212, 200, .42); left: -34vmax; top: -38vmax; animation: derive-a 52s ease-in-out infinite alternate; }
.b2 { --c: rgba(238, 222, 190, .45); right: -38vmax; bottom: -40vmax; animation: derive-b 64s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(18vmax, 12vmax) scale(1.08); } }
@keyframes derive-b { to { transform: translate(-16vmax, 10vmax) scale(.92); } }

/* ── La scène figée ── */
.scene-wrap { position: relative; height: calc(var(--unites, 12.4) * 100svh + 100svh); }
.scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.fond { position: absolute; inset: 0; background: var(--surface); overflow: hidden;
  /* Fondu du bord haut quand la scène arrive, du bord bas quand elle s'en va : jamais de ligne nette. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fh, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fh, 0px), #000 calc(100% - var(--fb, 0px)), transparent 100%); }
.fond-tache {
  position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--tache, #e6eeea), transparent 70%); will-change: transform;
}
.fond-tache.t1 { opacity: .75; left: -10vmax; top: 6vh; animation: derive-a 40s ease-in-out infinite alternate; }
.fond-tache.t2 { --tache: #f5e6c2; right: -60vmax; top: -50vmax; opacity: .55; animation: derive-b 52s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: multiply; background-image: var(--bruit); }

.textes { position: absolute; left: 0; right: 0; top: 0; height: var(--copy-h); z-index: 3; pointer-events: none; }
.texte {
  position: absolute; left: 20px; right: 20px; top: 54%; opacity: 0; visibility: hidden;
  text-align: center; max-width: 440px; margin: 0 auto;
}
.texte .num { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--sauge-deep); }
.texte h2 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 800; text-wrap: balance; }
.texte .petit { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.doigt { display: none; }
@media (hover: none) { .souris { display: none; } .doigt { display: inline; } }

/* L'encart Whisper / Mistral */
.encart-ia {
  margin: 12px auto 0; max-width: 360px; padding: 9px 10px 8px; border-radius: var(--r);
  background: rgba(255, 254, 251, .86); box-shadow: var(--ombre-flot); backdrop-filter: blur(4px);
}
.ia-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ia-pastille { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r); background: var(--lavis); text-align: left; }
.ia-ico { flex: none; width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; background: #fffefb; color: var(--sauge-deep); box-shadow: 0 1px 2px rgba(35, 39, 43, .1); }
.ia-mots { display: flex; flex-direction: column; line-height: 1.15; }
.ia-mots b { font-size: 15px; }
.ia-mots span { font-size: 12.5px; color: var(--ink-2); }
.ia-local { margin: 7px 2px 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--sauge-deep); }

.stage-box {
  position: absolute; left: 0; right: 0; top: var(--copy-h); bottom: 6px;
  display: grid; place-items: center; z-index: 2;
}
/* Netteté : la scène est agrandie par « zoom » (le texte est remis en page à la bonne taille, donc net),
   et non par une transformation qui agrandit une image déjà dessinée. */
.stage { position: relative; width: 360px; height: 480px; zoom: var(--s, 1); flex: none; }

.progression { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 3px; height: 34vh; background: rgba(35, 39, 43, .08); border-radius: 1px; z-index: 4; overflow: hidden; }
.progression-barre { width: 100%; height: 100%; background: var(--sauge-deep); transform-origin: 50% 0; transform: scaleY(0); }

@media (min-width: 900px) {
  :root { --copy-h: 0px; }
  .textes { inset: 0; height: auto; }
  .texte { top: 50%; left: max(5vw, calc(50% - 680px)); right: auto; width: min(350px, 25vw); text-align: left; margin: 0; }
  .texte.droite { left: auto; right: max(5vw, calc(50% - 680px)); }
  .texte h2 { font-size: clamp(28px, 2.5vw, 38px); }
  .texte .petit { font-size: 17px; }
  .encart-ia { margin-left: 0; margin-top: 18px; padding: 12px; }
  .ia-local { justify-content: flex-start; margin-left: 4px; }
  .stage-box { top: 0; bottom: 0; }
  .progression { right: 22px; }
}

/* ═════════ Le dossier : une chemise en papier fin ═════════
   Un seul rayon (4 px), aucune couture, aucun élastique, aucun tampon, aucune ligne sur les fiches. */
.cl { position: absolute; left: 0; top: 0; width: 360px; height: 480px; z-index: 2; pointer-events: none;
  clip-path: polygon(-200px -600px, 560px -600px, 560px 464px, -200px 464px); }
.cl > * { position: absolute; }
.cl-ombre { position: absolute; left: 52px; top: 250px; width: 256px; height: 214px; z-index: 1; border-radius: var(--r); pointer-events: none;
  box-shadow: 0 1px 2px rgba(60, 45, 25, .08), 0 18px 34px -14px rgba(60, 45, 25, .3); }

/* Le dos de la chemise, qui dépasse derrière les intercalaires */
.dos { left: 52px; top: 250px; width: 256px; height: 214px; z-index: 1; border-radius: var(--r);
  background: var(--chemise) var(--grain); background-size: 120px; }

/* Intercalaires : un aplat teinté et son onglet, rien d'autre */
.inter { left: 62px; width: 236px; height: 200px; border-radius: var(--r) var(--r) 0 0; background: var(--t);
  box-shadow: 0 -1px 0 rgba(60, 45, 25, .05); }
.onglet { position: absolute; top: -20px; height: 20px; width: 80px; border-radius: var(--r) var(--r) 0 0; background: var(--t);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--d); white-space: nowrap;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.15); }
.onglet.allume { transform: translateY(-3px); }
.compte { opacity: 0; transition: opacity .25s; }
.compte.plein { opacity: .65; }

/* Les chiffres qui roulent */
.roule { display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.roule > i { grid-area: 1 / 1; font-style: normal; }
.roule > i.entre-haut { animation: entre-haut .42s cubic-bezier(.2, .9, .3, 1) both; }
.roule > i.entre-bas { animation: entre-bas .42s cubic-bezier(.2, .9, .3, 1) both; }
.roule > i.sort-haut { animation: sort-haut .42s cubic-bezier(.2, .9, .3, 1) both; }
.roule > i.sort-bas { animation: sort-bas .42s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes entre-haut { from { transform: translateY(100%); opacity: 0; } }
@keyframes entre-bas { from { transform: translateY(-100%); opacity: 0; } }
@keyframes sort-haut { to { transform: translateY(-100%); opacity: 0; } }
@keyframes sort-bas { to { transform: translateY(100%); opacity: 0; } }

/* Le devant de la chemise : le nom, le compte des séances et des fiches */
.face { left: 52px; top: 372px; width: 256px; height: 92px; z-index: 60; border-radius: var(--r);
  background: var(--chemise-face) var(--grain); background-size: 120px;
  box-shadow: 0 -1px 0 rgba(60, 45, 25, .07), 0 1px 2px rgba(60, 45, 25, .1), inset 0 1px 0 rgba(255, 255, 255, .45);
  display: grid; place-items: center; }
.etiquette { text-align: center; line-height: 1.25; }
.et-nom { display: block; font-size: 14px; font-weight: 700; color: var(--chemise-ink); }
.et-compte { display: block; font-size: 10.5px; color: var(--chemise-ink-2); margin-top: 3px; }
.et-compte b { font-weight: 700; color: var(--chemise-ink); }

/* ═════════ Les fiches : papier blanc, une petite barre de couleur ═════════ */
.fiche, .carte { left: 0; top: 0; width: 154px; height: 82px; }
.fiche { position: absolute; z-index: 7; opacity: 0; }
.papier { position: absolute; inset: 0; border-radius: var(--r); padding: 7px 9px 0; overflow: hidden; background: var(--papier);
  box-shadow: 0 0 0 1px rgba(35, 39, 43, .07), 0 1px 2px rgba(60, 45, 25, .06); }
.fiche .papier { box-shadow: 0 0 0 1px rgba(35, 39, 43, .06), 0 1px 2px rgba(60, 45, 25, .05), 0 6px 14px -4px rgba(60, 45, 25, .14); }
.f-tete { display: flex; align-items: center; justify-content: space-between; height: 9px; margin-bottom: 5px; }
.f-barre { display: block; width: 18px; height: 4px; border-radius: var(--r); background: var(--c); }
.f-date { font-size: 8.5px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.f-txt { margin: 0; font-size: 10.5px; line-height: 13px; font-weight: 600; color: var(--ink); padding-right: 4px; }
.f-coche { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--sauge-deep); opacity: 0; }
.f-coche::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px; border: solid #fffefb; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

/* La fiche qui se soulève de son intercalaire (survol de la lettre) */
.fiche-src { left: 64px; width: 232px; visibility: hidden; transition: transform .6s cubic-bezier(.22, 1.12, .36, 1), visibility 0s .6s; }
.fiche-src .papier { position: relative; inset: auto; padding: 10px 12px 11px;
  box-shadow: 0 0 0 1px rgba(35, 39, 43, .06), 0 2px 4px rgba(60, 45, 25, .05), 0 14px 28px -8px rgba(60, 45, 25, .22); }
.fiche-src .f-tete { height: 10px; margin-bottom: 6px; }
.fiche-src .f-barre { width: 22px; height: 5px; }
.fiche-src .f-date { font-size: 9.5px; }
.fiche-src .f-txt { font-size: 13px; line-height: 16px; font-weight: 700; padding: 0; }
.fs-dit { margin: 7px 0 0; font-size: 11.5px; line-height: 15px; color: var(--ink-2); }
.fs-dit small { display: block; font-size: 9.5px; font-weight: 700; color: var(--d); margin-bottom: 1px; }
.fiche-src.actif { visibility: visible; transform: translateY(var(--monte)); transition: transform .6s cubic-bezier(.22, 1.12, .36, 1), visibility 0s; }

/* ── 1. Consentement (signé sur l'écran) ── */
.consent {
  position: absolute; left: 36px; top: 6px; width: 288px; z-index: 8;
  background: var(--papier); border-radius: var(--r);
  box-shadow: var(--ombre-flot); padding: 14px 18px 12px; font-size: 12px; line-height: 1.45;
}
.consent-titre { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.consent p { margin: 0 0 6px; color: var(--ink-2); }
.sig-zone { position: relative; }
.sig-pad { width: 100%; height: 64px; display: block; touch-action: none; cursor: crosshair; border-radius: var(--r); pointer-events: auto; }
.sig-pad:focus-visible { outline: 2px solid var(--sauge-deep); }
.sig-user path { fill: none; stroke: #23272b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.signe .sig-auto { visibility: hidden; }
.sig-ligne { display: flex; justify-content: space-between; border-top: 1px solid var(--border-champ); padding-top: 4px; font-size: 10.5px; color: var(--ink-2); }
.consent-ok {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--sauge-deep); font-weight: 700; font-size: 11px; line-height: 1;
  padding: 5px 8px; border-radius: var(--r); background: var(--lavis); opacity: 0;
}
.signe .consent-ok { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* ── 2. Voix ── */
.voix {
  position: absolute; left: 20px; top: 60px; width: 320px; height: 116px; z-index: 7; opacity: 0;
  background: var(--raised); border-radius: var(--r); box-shadow: var(--ombre-flot);
  padding: 12px 14px; overflow: hidden;
}
.voix-tete { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.voix-heure { margin-left: auto; font-family: var(--f-mono); color: var(--ink-2); font-weight: 600; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--record); animation: respire 1.6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .35; transform: scale(.8); } }
.onde { width: 100%; height: 62px; margin-top: 10px; display: block; }
.onde rect { fill: var(--sauge); transform-box: fill-box; transform-origin: 50% 50%; animation: barre 1.3s ease-in-out infinite; }
@keyframes barre { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ── Transcription ── */
.transcr {
  position: absolute; left: 12px; top: 6px; width: 336px; height: 226px; z-index: 6; opacity: 0;
  background: var(--raised); border-radius: var(--r); box-shadow: var(--ombre-flot);
  padding: 10px 14px; font-size: 12px; line-height: 1.5; overflow: hidden;
}
.transcr-tete { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--ink-2); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.local { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; color: var(--sauge-deep); background: var(--lavis); border-radius: var(--r); padding: 1px 6px; }
.tour { margin: 0 0 5px; }
.qui { display: inline-block; font-size: 10px; font-weight: 800; color: var(--sauge-deep); margin-right: 6px; }
.tour.patiente .qui { color: var(--doubt-ink); }
.w { opacity: 0; transition: opacity .18s; }
.w.on { opacity: 1; }
.cite { border-radius: var(--r); transition: background-color .35s, box-shadow .35s; }
.cite.lit { background: var(--cite); box-shadow: 0 0 0 2px var(--cite); }

/* ── 3. Bloc à valider ── */
.bloc {
  position: absolute; left: 8px; top: 0; width: 344px; height: 254px; z-index: 6; opacity: 0;
  background: rgba(255, 254, 251, .97); border-radius: var(--r); box-shadow: var(--ombre-flot);
}
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 0; font-size: 13px; }
.bloc-tete span { font-size: 10.5px; color: var(--ink-2); }
.bloc-valider {
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 34px; border: 0; border-radius: var(--r);
  background: var(--sauge-deep); color: #fffefb; font: 700 13px var(--f-sans); cursor: pointer; pointer-events: auto;
}
.bloc-valider:hover { filter: brightness(.94); }
.bloc-valider:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.toast {
  position: absolute; left: 40px; top: 10px; width: 280px; z-index: 9; opacity: 0;
  background: var(--ink); color: #fffefb; font-size: 11.5px; border-radius: var(--r); padding: 8px 12px;
  display: flex; gap: 7px; align-items: center; box-shadow: var(--ombre-flot);
}

/* ── 4. Séances suivantes ── */
/* La frise du temps : une ligne fine, les jours en petits traits, trois séances */
.frise { position: absolute; left: 40px; top: 18px; width: 280px; height: 44px; z-index: 9; opacity: 0; }
.fr-ligne { position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: rgba(35, 39, 43, .1);
  background-image: repeating-linear-gradient(90deg, rgba(35, 39, 43, .22) 0 1px, transparent 1px 20px); background-size: 100% 100%; }
.fr-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 8px;
  background-image: repeating-linear-gradient(90deg, rgba(35, 39, 43, .18) 0 1px, transparent 1px 20px); }
.fr-plein { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--sauge-deep); transform-origin: 0 50%; transform: scaleX(0); }
.fr-pt { position: absolute; top: 0; width: 0; }
.fr-pt i { position: absolute; left: -5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--papier); border: 2px solid #b9c2bd; box-sizing: border-box; }
.fr-pt.fait i { background: var(--sauge-deep); border-color: var(--sauge-deep); }
.fr-pt span { position: absolute; top: 15px; left: -40px; width: 80px; text-align: center; font-size: 10px; line-height: 1.25; color: var(--ink-2); }
.fr-pt span b { display: block; font-size: 10.5px; color: var(--ink-2); }
.fr-pt.fait span b { color: var(--ink); }
.fr-tete { position: absolute; top: -17px; left: 0; width: 0; }
.fr-jour { position: absolute; left: -30px; width: 60px; text-align: center; font-size: 10px; font-weight: 700; color: var(--sauge-deep); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.fr-tete.voit .fr-jour { opacity: 1; }

/* La séance du jour : une petite feuille, ses fiches en partent */
.seance { position: absolute; left: 70px; top: 82px; width: 220px; z-index: 8; opacity: 0;
  background: var(--papier); border-radius: var(--r); box-shadow: var(--ombre-flot); padding: 10px 12px 9px; font-size: 11.5px; }
.se-tete { display: flex; align-items: center; gap: 6px; color: var(--sauge-deep); }
.se-titre { color: var(--ink); font-size: 12.5px; }
.se-heure { margin-left: auto; color: var(--ink-2); font-size: 10.5px; }
.se-mesure { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--ink-2); }
.se-val { margin-left: auto; color: var(--ink); font-size: 15px; }
.se-gain { color: var(--sauge-deep); font-weight: 700; font-size: 11px; }
.se-pied { margin-top: 4px; color: var(--ink-2); font-size: 10.5px; }
.se-n { font-weight: 700; color: var(--ink); }

/* La tranche du dossier : elle s'épaissit avec les fiches */
.tranche { position: absolute; left: 55px; top: 463px; width: 250px; height: 0; z-index: 1; pointer-events: none;
  border-radius: 0 0 var(--r) var(--r);
  background: repeating-linear-gradient(180deg, #fbf8f1 0 1px, #e3d8c4 1px 2px); box-shadow: 0 1px 1px rgba(60, 45, 25, .1); }

.suivi { position: absolute; left: 24px; top: 74px; width: 312px; z-index: 7; opacity: 0; }
.suivi-papier { background: var(--papier); border-radius: var(--r); padding: 12px 16px 8px; box-shadow: var(--ombre-flot); }
.suivi-tete { font-size: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.suivi-tete .f-barre { width: 22px; height: 5px; }
.suivi-courbe { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }

/* ── 5. Lettre ── */
.lettre {
  position: absolute; left: 14px; top: 2px; width: 332px; z-index: 8; opacity: 0;
  background: var(--papier); border-radius: var(--r); box-shadow: var(--ombre-flot);
  padding: 9px 15px 5px; transform-origin: 50% 100%; pointer-events: auto;
}
.lettre-tete { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--ink-2); padding-bottom: 5px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.brouillon { color: var(--doubt-ink); }
.lettre-corps { font-family: var(--f-lettre); font-size: 11.5px; line-height: 1.42; outline: none; }
.lettre-corps p { margin: 0 0 3px; }
.lettre-corps:focus { box-shadow: 0 0 0 2px var(--lavis); border-radius: var(--r); }
.barre { text-decoration: none; background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-position: 0 55%; background-size: var(--b, 0%) 1.5px; }
.tape { color: var(--sauge-deep); font-weight: 600; }
.caret { display: inline-block; width: 1.5px; height: 1em; background: var(--sauge-deep); vertical-align: -2px; opacity: 0; animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { visibility: hidden; } }
.lettre .phrase { border-radius: var(--r); cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.lettre .phrase.actif { background: var(--cite); box-shadow: 0 0 0 2px var(--cite); }

/* ── Curseur ── */
.curseur { position: absolute; left: 0; top: 0; z-index: 20; opacity: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }

/* ── Version fixe (réduire les animations) ── */
.fixe[hidden] { display: none !important; }
.fixe { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 18px; }
@media (min-width: 900px) { .fixe { grid-template-columns: repeat(3, 1fr); } }
.carte-fixe { background: rgba(255, 254, 251, .9); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--ombre-pose); padding: 16px; overflow: hidden; }
.carte-fixe .num { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--sauge-deep); }
.carte-fixe h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.carte-fixe .petit { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.carte-fixe .encart-ia { margin: 10px 0 0; }
.carte-fixe .vignette { height: 380px; position: relative; margin-top: 12px; border-radius: var(--r); background: var(--creuse); overflow: hidden; }
.carte-fixe .vignette .stage { position: absolute; left: 50%; top: 50%; zoom: .76; transform: translate(-50%, -50%); }
.reduit .scene-wrap { display: none; }
.reduit .fixe { display: grid; }
.reduit .indice svg, .reduit .bulle, .reduit .fond-tache, .reduit .hi-decal, .reduit .hi-stage .fiche-src, .reduit .hi-vol { animation: none !important; }
.reduit .rec, .reduit .onde rect, .reduit .caret { animation: none; }
.reduit .fiche-src, .reduit .onglet, .reduit .compte, .reduit .faq summary::after { transition: none; }
.reduit .roule > i { animation: none !important; }

/* ═════════ En-tête ═════════ */
.hero {
  /* Exactement la hauteur de la fenêtre : à l'ouverture, on ne voit que cette section. */
  height: 100vh; height: 100svh; height: 100dvh; box-sizing: border-box;
  padding: 76px 20px 64px; display: flex; flex-direction: column;
  justify-content: center; max-width: 1180px; margin: 0 auto; position: relative;
}
.hero-texte { max-width: 640px; position: relative; z-index: 2; }
.marque { position: absolute; top: 22px; left: 20px; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.marque span { color: var(--sauge-deep); }
.surtitre { color: var(--sauge-deep); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.hero h1 { font-size: clamp(34px, 8.6vw, 62px); line-height: 1.04; margin: 0 0 16px; font-weight: 800; text-wrap: balance; }
.soustitre { font-size: clamp(18px, 4.6vw, 22px); color: var(--ink-2); margin: 0; max-width: 40ch; }
.hero-cta { margin-top: 28px; }
.hero-cta .ouvrir { display: inline-block; text-decoration: none; }
.hero-cta-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
/* Le chevron seul, centré en bas, qui flotte doucement ; un clic mène à la suite. */
.indice { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink-2); cursor: pointer; border-radius: var(--r); }
.indice:hover { color: var(--ink); }
.indice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.indice svg { display: block; animation: flotte 2.4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(5px); } }

/* L'illustration du haut : la chemise qui flotte, une fiche soulevée, une fiche qui arrive. Rien d'autre. */
.hero-illu { --hs: 1.04; position: relative; flex: none; width: calc(360px * var(--hs)); height: calc(350px * var(--hs)); margin: 6px 0 0 calc(50% - 180px * var(--hs)); }
.hi-stage { position: absolute; left: 0; top: 0; width: 360px; height: 350px; zoom: var(--hs); }
.hi-decal { position: absolute; left: 0; top: -130px; width: 360px; height: 480px; animation: flotte-dossier 9s ease-in-out infinite alternate; }
.hi-stage::before { content: ""; position: absolute; left: -90px; right: -90px; top: -50px; bottom: -40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 212, 200, .42), transparent 78%); }
.hi-stage .fiche-src.actif { animation: flotte-fiche 6s ease-in-out infinite alternate; }
@keyframes flotte-dossier { to { translate: 0 -6px; } }
@keyframes flotte-fiche { to { translate: 0 -5px; } }
.hi-vol .papier { position: relative; inset: auto; padding-bottom: 10px; }
.hi-vol { opacity: 1; z-index: 80; height: auto; zoom: 1.25; animation: vol-hero 7s ease-in-out infinite alternate; animation-delay: -2s; }
@keyframes vol-hero { to { translate: 0 -9px; } }

@media (min-width: 900px) {
  .hero { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 40px; padding-top: 90px; }
  .hero-texte { flex: 1 1 480px; }
  .hero-illu { --hs: 1.45; margin: 0; flex: none; }
}
@media (min-width: 900px) and (max-width: 1180px) { .hero-illu { --hs: 1.15; } }
/* Au téléphone, la fiche qui arrive sortirait de l'écran : la chemise et sa fiche soulevée suffisent. */
@media (max-width: 899px) { .hi-vol { display: none; } .hero { overflow-x: clip; } } /* le halo de la chemise ne doit pas élargir la page */

/* ═════════ Fin ═════════ */
.fin { max-width: 640px; margin: 0 auto; padding: 80px 20px 36px; text-align: center; position: relative; }
.fin h2 { font-size: clamp(28px, 6vw, 42px); margin: 0 0 8px; line-height: 1.1; }
.fin-sous { color: var(--ink-2); margin: 0 0 26px; }
.ouvrir {
  font: 800 19px var(--f-sans); color: #fffefb; background: var(--sauge-deep); border: 0; border-radius: var(--r);
  padding: 17px 34px; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 24px rgba(72, 102, 92, .32); transition: transform .15s, box-shadow .2s, filter .2s;
}
.ouvrir:hover { filter: brightness(.95); box-shadow: 0 14px 32px rgba(72, 102, 92, .38); }
.ouvrir:active { transform: scale(.97); }
.ouvrir:focus-visible, .envoyer:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.inscription { margin: 26px auto 0; max-width: 440px; text-align: left; background: rgba(255, 254, 251, .95); border: 1px solid var(--border); border-radius: var(--r-form); padding: 20px; box-shadow: var(--ombre-flot); }
.os { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.os legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.os-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 14px 12px; border-radius: var(--r-form-in); cursor: pointer;
  background: var(--raised); border: 1.5px solid var(--border); transition: border-color .2s, background-color .2s, box-shadow .2s, transform .15s; }
.os-carte:hover { border-color: #b9c9c1; }
.os-carte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.os-ico { width: 46px; height: 46px; border-radius: 6px; display: grid; place-items: center; background: var(--creuse); color: var(--ink-2); transition: background-color .2s, color .2s; }
.os-nom { display: flex; flex-direction: column; line-height: 1.2; }
.os-nom b { font-size: 16px; }
.os-nom small { font-size: 12.5px; color: var(--ink-2); }
.os-coche { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-champ); transition: background-color .2s, border-color .2s; }
.os-coche::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 4.5px; height: 9px; border: solid #fffefb; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.os-carte:has(input:checked) { border-color: var(--sauge-deep); background: #f2f6f3; box-shadow: 0 6px 16px rgba(72, 102, 92, .14); }
.os-carte:has(input:checked) .os-ico { background: var(--sauge-deep); color: #fffefb; }
.os-carte:has(input:checked) .os-coche { background: var(--sauge-deep); border-color: var(--sauge-deep); }
.os-carte:has(input:checked) .os-coche::after { transform: rotate(45deg) scale(1); }
.os-carte:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.note-win { margin: 0 0 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #3f5a51; background: #f3efe4; border-radius: var(--r-form-in); padding: 11px 13px; }
.note-win[hidden] { display: none; }
.note-win svg { flex: none; color: var(--sauge-deep); margin-top: 1px; }
.champ { display: block; }
.champ span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.champ input { width: 100%; height: 46px; border: 1px solid var(--border-champ); border-radius: var(--r-form-in); padding: 0 12px; font: 16px var(--f-sans); background: #fff; }
.champ input:focus { outline: 2px solid var(--sauge-deep); outline-offset: 1px; }
.envoyer { margin-top: 12px; width: 100%; height: 46px; border: 0; border-radius: var(--r-form-in); background: var(--sauge-deep); color: #fffefb; font: 700 15px var(--f-sans); cursor: pointer; }
.info-rgpd, .note-pied { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; }
.info-rgpd a { color: var(--ink-2); }
.erreur { margin: 10px 0 0; font-size: 14px; color: #8f463a; background: #f8ece8; border-radius: var(--r-form-in); padding: 9px 12px; }
.erreur[hidden] { display: none; }
.envoyer[disabled] { opacity: .7; cursor: progress; }
.inscription { position: relative; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.merci { margin: 24px auto 0; max-width: 440px; background: var(--lavis); color: var(--sauge-deep); border-radius: var(--r-form); padding: 16px 18px; font-weight: 700; }
.pied { text-align: center; padding: 30px 20px 44px; color: var(--ink-2); font-size: 14px; }
.pied p { margin: 4px 0; }
.liens { display: flex; gap: 18px; justify-content: center; }
.liens a { color: var(--ink-2); }

/* ── Questions (FAQ), fermées par défaut ── */
.faq { max-width: 660px; margin: 0 auto; padding: 36px 20px 20px; }
.faq h2 { font-size: 24px; margin: 0 0 16px; text-align: center; }
.faq details { background: rgba(255, 254, 251, .92); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 9px; box-shadow: 0 1px 2px rgba(60, 45, 25, .05); transition: box-shadow .25s; }
.faq details[open] { box-shadow: 0 1px 2px rgba(60, 45, 25, .05), 0 10px 26px rgba(60, 45, 25, .08); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 46px 15px 18px; font-weight: 700; font-size: 16px; position: relative; border-radius: var(--r); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border: solid var(--sauge-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--sauge-deep); }
.faq summary:focus-visible { outline: 2px solid var(--sauge-deep); outline-offset: 2px; }
.faq details p { margin: 0 18px 12px; color: #4d555d; font-size: 15.5px; line-height: 1.6; }
.faq details p:first-of-type { margin-top: -2px; }
.faq details p:last-child { margin-bottom: 16px; }
.faq a { color: var(--sauge-deep); font-weight: 700; }

/* Réduire les animations (réglage du système) */
@media (prefers-reduced-motion: reduce) {
  .bulle, .fond-tache, .hi-decal, .indice svg, .hi-stage .fiche-src, .hi-vol { animation: none !important; }
  .fiche-src, .onglet, .compte, .os-carte, .os-coche::after { transition: none; }
}

/* ═════════ Téléphone (moins de 900 px) : retouches réservées aux petits écrans ═════════
   L'ordinateur n'est pas concerné : tout ce qui suit ne s'applique que sous 900 px de large. */
@media (max-width: 899px) {
  /* Haut de page : la phrase et le bouton au centre, sans le dossier flottant. */
  .hero-illu { display: none; }
  .hero-texte { margin: 0 auto; text-align: center; }
  .soustitre { margin-left: auto; margin-right: auto; }

  /* La scène est agrandie par une transformation plutôt que par « zoom » : Safari sur iPhone calcule mal
     les positions et l'onde sonore à l'intérieur d'un bloc « zoomé ». La taille visible reste la même. */
  .scene .stage { zoom: 1; transform: scale(var(--s, 1)); transform-origin: 50% 50%; }

  /* Séance en cours : le cadre suit son contenu, et rien ne sort du cadre (onde comprise). */
  .voix { height: auto; padding-bottom: 14px; contain: paint; }
  .onde { overflow: hidden; }
  /* Transcription : le cadre suit le texte, toujours lu jusqu'au bout. */
  .transcr { height: auto; min-height: 226px; contain: paint; }

  /* Les fiches à valider : le cadre remonte un peu pour laisser le dossier libre en dessous. */
  .bloc { top: -18px; }
  /* Le message noir « Bloc validé » ne s'affiche pas au téléphone : il tombait au milieu des fiches qui entrent dans le dossier. */
  .toast { display: none; }
}