/* Traversée par étapes, commune au DRM et à Collapps : un écran incliné qui pivote au défilement, le texte de l’étape active à gauche.
   Sans JavaScript, sur mobile ou avec réduction des mouvements : lecture verticale, chaque étape avec son illustration. */
.cx-story,.ph-scene{--sky:#9cc3ff;--mint:#7fd6b3;--ink2:#0a1828;--green:#40ba8d;--green-dark:#2f9b73;--blue:#3e6fb7;--line:#dae1e3;--muted:#5b6a75;--ease:cubic-bezier(.2,.7,.2,1)}
/* Traversée : lecture verticale par défaut */
.cx-story{position:relative;background:radial-gradient(1100px 600px at 75% 40%,#1c3a6b 0%,transparent 70%),#0a1828;color:#fff;padding:40px 5.5% 60px}
.content-page .cx-story{margin:0 -5.556%;padding-left:5.556%;padding-right:5.556%}
.cx-screen,.cx-rail{display:none}
.cx-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:center;padding:70px 0;border-top:1px solid #ffffff14}
.cx-step:first-of-type{border-top:0}
.cx-picto{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#3e6fb740;color:var(--sky);margin-bottom:26px}
.cx-picto .picto{width:28px;height:28px}
.cx-copy h2{font-size:clamp(30px,2.8vw,46px);line-height:1.1;letter-spacing:-.045em;font-weight:500;margin:0 0 20px;color:#fff}
.cx-copy h2 em{font-style:normal;color:var(--mint)}
.cx-copy p{font-size:19px;line-height:1.65;color:#c3cfdb;margin:0 0 24px;max-width:520px}
.cx-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.cx-tags li{font-size:14px;font-weight:550;padding:8px 14px;border-radius:30px;border:1px solid #ffffff2e;color:#e7ebed}

/* Illustrations (cadre commun) */
.cx-view{position:relative;aspect-ratio:16/10.5;background:#fff;color:var(--ink2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px #0006;font-size:14px}

/* Traversée immersive (écran large, animations autorisées) */
.cx-story.is-enhanced{height:calc((var(--steps,8) + .8) * 88vh);padding:0}
.is-enhanced .cx-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.is-enhanced .cx-step{position:absolute;inset:0;display:block;padding:0;border:0;pointer-events:none}
.is-enhanced .cx-copy{position:absolute;left:5.5%;top:50%;width:37%;transform:translateY(calc(-50% + 30px));opacity:0;transition:opacity .5s,transform .7s var(--ease)}
.is-enhanced .cx-step.is-past .cx-copy{transform:translateY(calc(-50% - 30px))}
.is-enhanced .cx-step.is-active .cx-copy{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.12s}
.is-enhanced .cx-screen{display:block;position:absolute;left:47%;top:50%;width:min(47vw,860px);aspect-ratio:16/11;border-radius:18px;background:#fff;box-shadow:0 60px 120px #000a,0 0 0 1px #ffffff1f;transform:translateY(-50%) perspective(1800px) translate3d(var(--tx,0),var(--ty,0),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(var(--s,1));will-change:transform}
.cx-screen-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line);background:#f4f6f8;border-radius:18px 18px 0 0}
.cx-screen-bar i{width:10px;height:10px;border-radius:50%;background:#f07a6b}.cx-screen-bar i:nth-child(2){background:#f2c14e}.cx-screen-bar i:nth-child(3){background:#5cc587}
.cx-screen-bar span{margin-left:auto;margin-right:auto;font-size:12px;font-weight:650;color:var(--muted);transform:translateX(-20px)}
.cx-screen-body{position:absolute;inset:36px 0 0;overflow:hidden;border-radius:0 0 18px 18px}
.is-enhanced .cx-screen .cx-view{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;opacity:0;transform:scale(.97);transition:opacity .55s,transform .8s var(--ease)}
.is-enhanced .cx-screen .cx-view.is-active{opacity:1;transform:none}
.is-enhanced .cx-rail{display:flex;flex-direction:column;gap:14px;position:absolute;right:2%;top:50%;transform:translateY(-50%);z-index:3}
.cx-rail button{width:12px;height:12px;padding:0;border-radius:50%;border:2px solid #ffffff66;background:transparent;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.cx-rail button:hover{border-color:#fff}
.cx-rail button[aria-current]{background:var(--mint);border-color:var(--mint);transform:scale(1.25)}
.cx-progress{position:absolute;left:5.5%;right:5.5%;bottom:34px;height:2px;background:#ffffff1a}
.cx-progress i{position:absolute;inset:0;background:var(--mint);transform-origin:left;transform:scaleX(var(--p,0))}

@media(max-width:1000px){.cx-step{grid-template-columns:1fr;gap:34px}}
@media(max-width:800px){.cx-story{padding:20px 6% 40px}.content-page .cx-story{margin:0 -6.82%}.cx-view{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cx-story *{animation:none!important;transition:none!important}}

/* Notes et accès aux captures en taille réelle */
.cx-note{font-size:13.5px!important;color:#8fa1b1!important;margin:18px 0 0!important}
.cx-zoom{margin-top:22px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:30px;border:1px solid #ffffff40;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:550;cursor:pointer;transition:background .2s,border-color .2s}
.cx-zoom:hover{background:#ffffff14;border-color:#fff}

/* Captures réelles dans l'écran */
.v-capture{background:#fff}
.v-capture img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center}
.v-capture.v-doc img{object-fit:cover;object-position:top center}
.v-review{display:grid;place-items:center;background:linear-gradient(145deg,#edf3f0,#f8faf9)}
.v-review .review-card{margin:0;max-width:78%}

/* Scènes photo plein écran : le cadrage glisse vers le sujet de chaque légende */
.ph-scene{position:relative;background:#0a1828;color:#fff;margin:0}
.ph-pin{position:relative}
.ph-img{display:block;width:100%;height:auto;max-height:80vh;object-fit:cover}
.ph-shade{display:none}
.ph-captions{padding:40px 5.5% 70px;display:grid;gap:44px}
.ph-caption h2{font-size:clamp(32px,3.6vw,58px);letter-spacing:-.045em;font-weight:500;line-height:1.08;margin:0 0 16px;color:#fff}
.ph-caption h2 em{font-style:normal;color:#7fd6b3}
.ph-caption p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#d5dee6;margin:0;max-width:640px}
.ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ph-tags span{display:inline-flex;flex-direction:column;padding:10px 16px;border-radius:12px;background:#0a1828cc;border:1px solid #ffffff2e;backdrop-filter:blur(6px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9fb0bf}
.ph-tags strong{font-size:15px;letter-spacing:0;text-transform:none;color:#fff;font-weight:600;margin-top:3px}
.ph-scene.is-enhanced{height:calc((var(--caps,1) + .9) * 100vh)}
.ph-scene.is-enhanced .ph-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.ph-scene.is-enhanced .ph-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;will-change:transform}
.ph-scene.is-enhanced .ph-shade{display:block;position:absolute;inset:0;background:linear-gradient(0deg,#061322f0 0%,#061322a0 28%,transparent 62%)}
.ph-scene.is-enhanced .ph-captions{position:absolute;inset:auto 5.5% 8% 5.5%;padding:0;display:block}
.ph-scene.is-enhanced .ph-caption{position:absolute;left:0;bottom:0;max-width:820px;opacity:0;transform:translateY(26px);transition:opacity .55s,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ph-scene.is-enhanced .ph-caption.is-active{opacity:1;transform:none;transition-delay:.1s}
@media(max-width:800px){.ph-captions{padding:30px 6% 50px}}
/* Captures réelles : écran plus grand, texte plus étroit */
.is-captures.is-enhanced .cx-copy{width:32%}
.is-captures.is-enhanced .cx-screen{left:41%;width:min(55vw,1000px);aspect-ratio:16/10}
/* SEO : intertitre mot-clé (H2) au-dessus de la phrase narrative (H3), même rendu qu'avant */
.cx-copy h3{font-size:clamp(30px,2.8vw,46px);line-height:1.1;letter-spacing:-.045em;font-weight:500;margin:0 0 20px;color:#fff}
.cx-copy h3 em{font-style:normal;color:var(--mint)}
.cx-copy h2.cx-kw{font-size:12.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--mint);margin:0 0 14px}
.ph-caption h3{font-size:clamp(32px,3.6vw,58px);letter-spacing:-.045em;font-weight:500;line-height:1.08;margin:0 0 16px;color:#fff}
.ph-caption h3 em{font-style:normal;color:#7fd6b3}