/* Passerelle Pro en mouvement (30/09/2026) : scène partagée, papier à gauche, Passerelle Pro à droite.
   Le moteur scrollcraft pilote les actes et les textes ; mouvement.js écrit sur :root les valeurs de la scène
   (--s partage en %, --h héros, --u1..6 usure, --sp signature papier, --s1..4 signatures, --b tableau,
   --t tampon, --bump impact, --c sortie du téléphone, --e espace, --g étiquette gauche, --prog avancée).
   Mouvement : transform, opacity, clip-path seulement. */

:root {
  --sc-canvas: #0F2A44;
  --sc-surface: #163A5C;
  --sc-ink: #F3F6F9;
  --sc-ink-soft: #BBC8D5;
  --sc-accent: #2EC4A6;
  --sc-accent-ink: #0A2236;
  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-font-mono: "Inter", system-ui, sans-serif;
  --papier-fond: #E4E8EC;
  --papier-ink: #12263A;
  --papier-soft: #3F5266;
  --papier-accent: #1F7A6B;
  --gx: clamp(1.25rem, 4vw, 4.5rem);
  --s: 50; --h: 0; --prog: 0; --g: 1;
  --u1: 0; --u2: 0; --u3: 0; --u4: 0; --u5: 0; --u6: 0;
  --sp: 0; --s1: 0; --s2: 0; --s3: 0; --s4: 0; --b: 0; --t: 0; --bump: 0; --c: 0; --e: 0;
  --px: 80; --py: 62; --pr: 30;
}
html { background: var(--sc-canvas); }
body { background: transparent; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.saut { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .6rem .9rem; border-radius: 10px; font-weight: 600; }
.saut:focus { left: 8px; }

/* ------------------------------------------------------------------ la scène */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.cote { position: absolute; inset: 0; }
.cote--papier {
  background:
    radial-gradient(70% 60% at 30% 35%, #F1F3F5 0%, transparent 70%),
    var(--papier-fond);
  clip-path: inset(0 calc(100% - var(--s) * 1%) 0 0);
}
.cote--pp {
  background:
    radial-gradient(60% 55% at 72% 62%, color-mix(in oklab, var(--sc-accent) 16%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, #123150 0%, var(--sc-canvas) 60%, #0B2238 100%);
  clip-path: inset(0 0 0 calc(var(--s) * 1%));
}
/* fonds photographiques (générés le 30/09/2026) : plus lents que les objets, d'où la profondeur */
.fond { position: absolute; inset: -3%; background-size: cover; background-position: center;
  transform: translateY(calc(var(--h) * -12px)) scale(1.04); }
.fond--bureau { background-position: 45% center; }
.fond--tampon { opacity: calc(var(--t) * (1 - var(--c))); transform: scale(calc(1.12 - var(--t) * .08)); }
.fond--equipe { opacity: var(--e); background-position: 70% center; }
.voile { position: absolute; inset: 0; pointer-events: none; }
.voile--papier { background: linear-gradient(180deg, rgba(234,237,240,.93) 0%, rgba(234,237,240,.72) 32%, rgba(234,237,240,.18) 60%, rgba(234,237,240,.08) 86%, rgba(234,237,240,.55) 100%); }
.voile--pp { background: linear-gradient(180deg, rgba(9,28,48,.9) 0%, rgba(9,28,48,.62) 38%, rgba(9,28,48,.3) 66%, rgba(9,28,48,.72) 100%); }
.halo { position: absolute; left: 50%; top: 40%; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent);
  transform: translate(-50%, -50%) scale(calc(.9 + var(--h) * .2)); opacity: .3; }

/* la feuille : centrée dans son côté, quelle que soit la position du trait */
.feuille-plan {
  position: absolute; left: 25vw; top: 40vh; height: 52vh; aspect-ratio: 420 / 594;
  container-type: size;
  transform: translateX(calc(-50% + (var(--s) - 50) * .5vw + var(--bump) * -10px)) translateY(calc(var(--h) * -30px)) rotate(calc(-1.6deg - var(--bump) * 1.4deg));
  filter: drop-shadow(0 18px 28px rgba(18,38,58,.16)) drop-shadow(0 2px 3px rgba(18,38,58,.12));
}
.feuille { width: 100%; height: 100%; overflow: visible; }
.f-papier { fill: #FBFBF9; }
.f-titre { font: 700 17px var(--sc-font-display); letter-spacing: .06em; fill: var(--papier-ink); }
.f-sous { font: 500 12px var(--sc-font-text); fill: var(--papier-soft); }
.f-lignes rect { fill: #D9DEE3; }
.f-champ { font: 500 13px var(--sc-font-text); fill: var(--papier-ink); }
.f-cases rect { fill: none; stroke: #B9C2CB; stroke-width: 1.4; }
.f-etiquettes text { font: 600 11px var(--sc-font-text); fill: var(--papier-soft); }
.f-sig { fill: none; stroke: #1C3F8C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sp)); }
.f-plis { stroke: #C8CED5; stroke-width: 1.2; }
.f-cafe { fill: none; stroke: #8A5A34; stroke-width: 6; opacity: .22; }
.f-cafe--fin { stroke-width: 1.5; opacity: .3; }
.f-rature { stroke: #B23A2E; stroke-width: 2.4; stroke-linecap: round; }
.f-main { font: italic 600 15px var(--sc-font-text); fill: #B23A2E; }
.f-dechire { fill: var(--papier-fond); }
.f-fond-coin { fill: var(--papier-fond); }
.f-coin { stroke: #C3CAD2; stroke-width: 1; }
.usure { opacity: 0; transition: none; }
.u1 { opacity: var(--u1); }
.u2 { opacity: var(--u2); transform-origin: 420px 0; transform-box: view-box; transform: scale(calc(.6 + var(--u2) * .4)); }
.u3 { opacity: var(--u3); transform-origin: 318px 238px; transform-box: view-box; transform: scale(calc(1.15 - var(--u3) * .15)); }
.u5 { opacity: var(--u5); }
.u6 { opacity: var(--u6); }
.postit {
  position: absolute; right: -9%; top: 34%; width: 44%; padding: 7% 6% 9%;
  background: #FFE37A; color: #4A3A06; font: italic 600 clamp(.72rem, 2.2cqw + .2rem, 1rem)/1.3 var(--sc-font-text);
  box-shadow: 0 10px 18px rgba(18,38,58,.16), 0 1px 2px rgba(18,38,58,.12);
  opacity: var(--u4); transform: translateY(calc((1 - var(--u4)) * -14px)) rotate(calc(6deg - var(--u4) * 3deg));
}

/* le stylo : premier plan, sa pointe suit la signature au sommet */
.stylo {
  position: absolute; left: 0; top: 0; width: 4.6cqh; height: 25cqh; overflow: visible;
  transform-origin: 50% 97%;
  transform: translate(calc(var(--px) * 1cqw - 50%), calc(var(--py) * 1cqh - 97%)) translateY(calc(var(--h) * -7cqh)) rotate(calc(var(--pr) * 1deg));
  filter: drop-shadow(-6px 10px 8px rgba(18,38,58,.22));
}
.stylo-corps { fill: #1B3B63; } .stylo-bague { fill: #C9A227; } .stylo-pointe { fill: #2A2F36; }

/* le téléphone : centré dans son côté */
.tel-plan {
  position: absolute; left: 75vw; top: 38vh; height: 56vh; aspect-ratio: 300 / 620;
  transform: translateX(calc(-50% + (var(--s) - 50) * .5vw))
             translateY(calc(var(--h) * -18px + var(--c) * 60px + var(--bump) * 6px))
             scale(calc(1 - var(--c) * .06 - var(--bump) * .012));
  opacity: calc(1 - var(--c));
}
.tel { position: absolute; inset: 0; border-radius: 12% / 5.8%; background: #0A1726; padding: 3.2%;
  box-shadow: 0 30px 60px rgba(4,14,26,.45), 0 2px 0 rgba(255,255,255,.06) inset; }
.tel__ecran { position: relative; width: 100%; height: 100%; border-radius: 9.5% / 4.6%; overflow: hidden; background: #F4F7FA; }
.tel__capture { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none;
  transform: translateY(calc(var(--h) * -3%)); opacity: calc(1 - var(--b)); }
.tableau-sig { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--b); }
.ts-fond { fill: #F7F9FB; }
.ts-titre { font: 700 20px var(--sc-font-display); fill: #0F2A44; }
.ts-sous { font: 500 13px var(--sc-font-text); fill: #52667A; }
.ts-cases rect { fill: #fff; stroke: #D7DEE5; stroke-width: 1.4; }
.ts-noms text { font: 600 12px var(--sc-font-text); fill: #52667A; }
.ts-sig { fill: none; stroke: #0F2A44; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ts-sig.s1 { stroke-dashoffset: calc(1 - var(--s1)); } .ts-sig.s2 { stroke-dashoffset: calc(1 - var(--s2)); }
.ts-sig.s3 { stroke-dashoffset: calc(1 - var(--s3)); } .ts-sig.s4 { stroke-dashoffset: calc(1 - var(--s4)); }
.ts-ok circle { fill: var(--sc-accent); opacity: 0; }
.ts-ok circle:nth-child(1) { opacity: clamp(0, calc((var(--s1) - .96) * 25), 1); }
.ts-ok circle:nth-child(2) { opacity: clamp(0, calc((var(--s2) - .96) * 25), 1); }
.ts-ok circle:nth-child(3) { opacity: clamp(0, calc((var(--s3) - .96) * 25), 1); }
.ts-ok circle:nth-child(4) { opacity: clamp(0, calc((var(--s4) - .96) * 25), 1); }
.ts-fin { font: 700 18px var(--sc-font-display); fill: #1F7A6B; opacity: var(--t); }
.tampon {
  position: absolute; right: -16%; top: 50%; width: 58%; height: auto; overflow: visible;
  opacity: var(--t);
  transform: translateY(-50%) scale(calc(1.7 - var(--t) * .7)) rotate(calc(-16deg + var(--t) * 6deg));
  filter: drop-shadow(0 6px 10px rgba(4,14,26,.25));
}
.tp-ext { fill: rgba(255,255,255,.9); stroke: #2F55B8; stroke-width: 5; }
.tp-int { fill: none; stroke: #2F55B8; stroke-width: 2; }
.tp-txt { font: 800 13px var(--sc-font-display); fill: #2F55B8; text-anchor: middle; letter-spacing: .08em; }

.bulle {
  position: absolute; left: 75vw; top: 46vh; display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem; border-radius: 14px; background: #fff; color: #0F2A44;
  font: 600 clamp(.8rem, .7rem + .3vw, .95rem) var(--sc-font-text); white-space: nowrap;
  box-shadow: 0 16px 30px rgba(4,14,26,.35), 0 1px 0 rgba(255,255,255,.8) inset;
  transform: translateX(calc(-104% + (var(--s) - 50) * .5vw - 8vh)) translateY(calc(var(--h) * -64px));
  opacity: var(--bv, 1);
}
.bulle__point { width: .6rem; height: .6rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 25%, transparent); }

.espace {
  position: absolute; margin: 0; right: var(--gx); top: 50%; width: min(56vw, 60rem);
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px rgba(4,14,26,.5), 0 2px 0 rgba(255,255,255,.08) inset;
  clip-path: inset(0 0 0 calc((1 - var(--e)) * 100%) round 14px);
  transform: translateY(calc(-50% + (1 - var(--e)) * 24px));
}
.espace img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ le trait */
.trait { position: fixed; top: 0; bottom: 0; left: 0; width: 0; z-index: 60;
  transform: translateX(calc(var(--s) * 1vw)); }
.trait__ligne { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--sc-accent); }
.trait__point { position: absolute; left: -5px; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 28%, transparent);
  transform: translateY(calc(var(--prog) * (100vh - 12px))); }
.trait__marque {
  position: absolute; top: 1rem; left: 14px; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem .45rem .6rem; border-radius: 12px; background: #fff; color: #0F2A44;
  font: 700 .92rem/1 var(--sc-font-display); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(4,14,26,.25);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.trait__marque svg { width: 28px; height: auto; }
.trait__marque:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .trait__marque:hover { box-shadow: 0 12px 26px rgba(4,14,26,.32); } }
.trait__et { position: absolute; bottom: 1.2rem; font: 600 .78rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.trait__et { padding: .38rem .55rem; border-radius: 7px; }
.trait__et--g { right: 14px; color: var(--papier-ink); background: rgba(236,239,242,.9); opacity: var(--g); }
.trait__et--d { left: 14px; color: #fff; background: rgba(9,28,48,.8); opacity: calc(1 - var(--c)); }

/* le bouton du son */
.son { position: fixed; top: 1rem; right: 1rem; z-index: 61; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem; padding: 0 .85rem; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--sc-ink); font: 600 .85rem/1 var(--sc-font-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.son:active { transform: scale(.97); }
.son .son__ondes { display: none; }
.son[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
.son[aria-pressed="true"] .son__ondes { display: inline; }
.son[aria-pressed="true"] .son__barre { display: none; }
@media (hover: hover) and (pointer: fine) { .son:hover { background: rgba(255,255,255,.2); } .son[aria-pressed="true"]:hover { background: #45D3B6; } }

/* ------------------------------------------------------------------ les textes */
.acte [data-sc-stage] { background: transparent; }
.col { position: absolute; top: clamp(4.6rem, 12vh, 8.5rem); width: min(30vw, 30rem); z-index: 20; }
.col--g { left: var(--gx); --sc-ink: var(--papier-ink); --sc-ink-soft: var(--papier-soft); color: var(--papier-ink); }
.col--d { right: var(--gx); color: var(--sc-ink); }
.col--pile { height: 40vh; }
.col--pile > * { position: absolute; left: 0; right: 0; top: 0; }
.col--liste > * + * { margin-top: .5rem; }
.col--liste .titre--seul { margin-top: 1.4rem; }
.titre { font: 700 clamp(1.9rem, 1.1rem + 2.1vw, 3.05rem)/1.05 var(--sc-font-display); letter-spacing: -.032em; margin: 0; text-wrap: balance; }
.titre--m { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.45rem); }
.sous { margin: 1rem 0 0; font-size: clamp(1rem, .95rem + .2vw, 1.14rem); line-height: 1.55; max-width: 34ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.col--g .sous { color: var(--papier-soft); }

/* les arrêts du tour */
.arrets { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem .5rem; }
.arrets li { font: 600 clamp(.8rem, .74rem + .2vw, .95rem)/1 var(--sc-font-text); padding: .62rem .85rem; border-radius: 999px;
  opacity: calc(.32 + .68 * var(--on, 0)); transform: translateY(calc((1 - var(--on, 0)) * 6px)); }
.arrets--papier li { background: #fff; color: var(--papier-ink); box-shadow: 0 1px 2px rgba(18,38,58,.12), 0 6px 14px rgba(18,38,58,.08); }
.arrets--papier li:not(:last-child)::after { content: "→"; margin-left: .55rem; color: var(--papier-soft); }
.arrets--pp li { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); color: var(--sc-ink);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc-accent) 45%, transparent) inset; }
.arrets--pp li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem;
  background: var(--sc-accent); opacity: var(--on, 0); vertical-align: .08em; }

/* la fin */
.fin { position: absolute; left: var(--gx); top: 50%; width: min(34vw, 30rem); transform: translateY(-50%); z-index: 20; }
.fin .titre { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.3rem); }
.fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: 2rem 0 0; }
.cta { display: inline-flex; align-items: center; min-height: 3.1rem; padding: 0 1.4rem; border-radius: 12px;
  background: var(--sc-accent); color: var(--sc-accent-ink); font: 700 1rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(4,14,26,.35); transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.cta:active { transform: scale(.97); }
.lien { color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #45D3B6; }
  .lien:hover { color: var(--sc-accent); }
}
.pied { position: absolute; left: var(--gx); bottom: 1.2rem; z-index: 20; display: flex; gap: 1.2rem; font-size: .82rem; color: var(--sc-ink-soft); }
.pied a { color: var(--sc-ink-soft); }

/* écrans d'ordinateur peu hauts (1366 x 768, 1280 x 720) : les objets descendent, le texte remonte */
@media (min-width: 761px) and (max-height: 820px) {
  .col { top: clamp(4.2rem, 9vh, 6rem); }
  .titre { font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem); }
  .titre--m { font-size: clamp(1.45rem, .9rem + 1.5vw, 2.1rem); }
  .sous { margin-top: .7rem; font-size: 1rem; }
  .feuille-plan { top: 45vh; height: 49vh; }
  .tel-plan { top: 45vh; height: 51vh; }
  .bulle { top: 52vh; }
}

/* ------------------------------------------------------------------ téléphone : le trait devient horizontal */
@media (max-width: 760px) {
  .cote--papier { clip-path: inset(0 0 calc(100% - var(--s) * 1%) 0); }
  .cote--pp { clip-path: inset(calc(var(--s) * 1%) 0 0 0); }
  .voile--pp { background: linear-gradient(180deg, rgba(9,28,48,.55) 0%, rgba(9,28,48,.35) 45%, rgba(9,28,48,.82) 72%, rgba(9,28,48,.92) 100%); }
  .feuille-plan { left: auto; right: 4vw; top: 0; height: min(24svh, 52vw);
    transform: translateY(calc(var(--s) * .5svh - 50% + 1.2rem)) translateY(calc(var(--h) * -10px)) rotate(-2deg); }
  .postit { font-size: .6rem; right: 4%; top: 38%; width: 52%; padding: 6% 5% 8%; }
  .tel-plan { left: auto; right: 6vw; top: 0; height: min(33svh, 70vw);
    transform: translateY(calc((var(--s) + (100 - var(--s)) / 2) * 1svh - 50% - .6rem))
               translateY(calc(var(--h) * -8px + var(--c) * 40px + var(--bump) * 4px))
               scale(calc(1 - var(--c) * .06 - var(--bump) * .012)); }
  .bulle { left: auto; right: 4vw; top: 0; font-size: .74rem; padding: .5rem .7rem;
    transform: translateY(calc(var(--s) * 1svh + 2.3rem)) translateY(calc(var(--h) * -12px)); }
  .trait { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 0; transform: translateY(calc(var(--s) * 1svh)); }
  .trait__ligne { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 2px; }
  .trait__point { top: -5px; left: 0; transform: translateX(calc(var(--prog) * (100vw - 12px))); }
  .trait__marque { top: .6rem; left: .75rem; font-size: .82rem; padding: .38rem .65rem .38rem .5rem; }
  .trait__marque svg { width: 22px; }
  .son { top: .75rem; right: .75rem; min-height: 2.2rem; padding: 0 .7rem; font-size: .78rem;
    background: #0F2A44; color: #fff; box-shadow: 0 6px 16px rgba(4,14,26,.3); }
  .trait__et { bottom: auto; font-size: .66rem; }
  .trait__et--g { right: auto; left: 1rem; top: -1.85rem; }
  .trait__et--d { left: auto; right: 1rem; top: .75rem; }
  .col { width: 54vw; }
  .col--g { width: calc(100vw - 2rem - min(24svh, 52vw) * 420 / 594 - 1.4rem); }
  .col--g { top: 4rem; left: 1rem; }
  .col--d { top: auto; bottom: 1.2rem; right: auto; left: 1rem; }
  .col--pile { height: 30svh; }
  .col--d.col--pile { height: 24svh; }
  .col--d.col--pile > * { top: auto; bottom: 0; }
  .titre { font-size: clamp(1.35rem, 1rem + 2.2vw, 1.8rem); }
  .titre--m { font-size: clamp(1.2rem, .95rem + 1.8vw, 1.5rem); }
  .sous { font-size: .9rem; margin-top: .6rem; }
  .arrets { gap: .35rem .3rem; margin-top: .7rem; }
  .arrets li { font-size: .72rem; padding: .45rem .6rem; }
  .arrets--papier li:not(:last-child)::after { margin-left: .3rem; }
  .fin { top: 4.4rem; left: 1rem; right: 1rem; width: auto; transform: none; }
  .fin .titre { font-size: 1.9rem; }
  .fin__actions { margin-top: 1.2rem; }
  .espace { right: 4vw; left: 4vw; width: auto; top: auto; bottom: 3.6rem; transform: translateY(calc((1 - var(--e)) * 24px)); }
  .pied { left: 1rem; bottom: .9rem; font-size: .74rem; }
}