/* ============================================================================
   Accueil — la cinématique : quatre chapitres fixes au-dessus de la scène 3D,
   puis le chapitre contact qui monte dans le flux.
   Mode « flux » (téléphone, tablette portrait, écran bas) : les chapitres
   défilent avec la page, posés à leur moment de la chronologie.
   ============================================================================ */

.scroll-stage { position: relative; height: 900vh; z-index: 10; }

.slide {
    position: fixed; z-index: 10;
    top: var(--header-h); bottom: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 24px 0 70px;
    pointer-events: none;
    visibility: hidden; transition: visibility 0s linear 1.2s;
}
.slide.active { pointer-events: auto; visibility: visible; transition: none; }
body.contact-open .slide { opacity: 0; transition: opacity 0.35s, visibility 0s linear 0.35s; }

#slide-1 { left: var(--gutter); width: min(760px, 52vw); justify-content: flex-end; padding-bottom: 9vh; }
/* écrans 2 à 6 : un coup à droite, un coup à gauche (le logo prend l'autre moitié) */
#slide-2, #slide-4, #slide-6 { left: calc(50vw + 10px); right: var(--gutter); }
#slide-3, #slide-5 { left: var(--gutter); width: min(780px, 52vw); }

.slide .eyebrow { margin-bottom: 22px; opacity: 0; transition: opacity 0.8s ease 0.1s; }
.slide.active .eyebrow { opacity: 1; }

.slide-title {
    font-size: clamp(40px, 4.6vw, 74px);
    line-height: 1.0; font-weight: 400; letter-spacing: -0.035em;
    margin-bottom: 26px; color: var(--ink);
}
.slide-title .line { white-space: nowrap; }
#slide-1 .slide-title { font-size: clamp(40px, 4.4vw, 76px); }
.slide.active .line-inner { transform: none; opacity: 1; filter: blur(0); }

/* cartes de verre des chapitres : entrent une à une, floutées → nettes */
.slide-cards { display: grid; gap: 16px; }
.slide-cards.two { grid-template-columns: 1fr 1fr; }
.slide-cards.grid-2 { grid-template-columns: 1fr 1fr; }
.slide-cards > * {
    opacity: 0; transform: translateY(34px) scale(0.97); filter: blur(12px);
    transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
}
.slide.active .slide-cards > * { opacity: 1; transform: none; filter: blur(0); --sheen: 40%; }
.slide.active .slide-cards > *:nth-child(1) { transition-delay: 0.25s; }
.slide.active .slide-cards > *:nth-child(2) { transition-delay: 0.35s; }
.slide.active .slide-cards > *:nth-child(3) { transition-delay: 0.45s; }
.slide.active .slide-cards > *:nth-child(4) { transition-delay: 0.55s; }
.slide-cards .glass::after { transition: transform 2.2s var(--ease) 0.5s; }

.info-card { padding: clamp(18px, 1.6vw, 24px); border-radius: 20px; }
.info-card h3 {
    margin-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #cfd6e6;
    display: flex; align-items: center; gap: 10px;
}
.info-card h3::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); flex: 0 0 5px; }
.info-card p { font-size: clamp(13px, 0.55vw + 0.62vh, 15px); line-height: 1.6; font-weight: 300; color: var(--ink-2); }
.info-card ul { list-style: none; }
.info-card li {
    position: relative; padding-left: 16px; margin-bottom: 5px;
    font-size: clamp(13px, 0.5vw + 0.6vh, 14.5px); line-height: 1.5; font-weight: 300; color: var(--ink-2);
}
.info-card li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 7px; height: 1px; background: var(--blue); }
.info-card.is-accent { background: linear-gradient(160deg, rgba(47, 168, 255, 0.16), rgba(255, 194, 58, 0.06) 70%), rgba(8, 10, 18, 0.42); }
.logo-card { display: flex; align-items: center; justify-content: space-around; gap: 14px; }
.logo-card img { flex: 1 1 0; min-width: 0; width: 30%; height: clamp(34px, 5vh, 54px); object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.logo-card h3 { display: none; }

.slide-cta {
    align-self: flex-start; margin-top: 26px;
    opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease) 0.6s, transform 0.9s var(--ease) 0.6s, background 0.3s, color 0.3s;
}
.slide.active .slide-cta { opacity: 1; transform: none; }

/* chiffres */
.slide-desc { font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--ink-2); max-width: 46ch; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) 0.3s, transform 1s var(--ease) 0.3s; }
.slide.active .slide-desc { opacity: 1; transform: none; }
.figures { display: flex; gap: clamp(28px, 4vw, 64px); margin: 30px 0 0; }
.figure { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.figure:nth-child(1) { transition-delay: 0.45s; }
.figure:nth-child(2) { transition-delay: 0.53s; }
.figure:nth-child(3) { transition-delay: 0.61s; }
.slide.active .figure { opacity: 1; transform: none; }
.figure dt { font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: #f2f7ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figure dt small { font-size: 0.42em; letter-spacing: 0; color: var(--gold); margin-left: 4px; }
.figure dd { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #aeb6c4; }

/* tirets de chapitres, à droite */
.story-progress { position: fixed; top: 50%; right: 34px; transform: translateY(-50%); z-index: 12; pointer-events: none; transition: opacity 0.6s; }
.story-dashes { display: flex; flex-direction: column; gap: 12px; }
.story-dash { width: 2px; height: 40px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.story-dash-fill { width: 100%; height: 0%; background: #ffffff; border-radius: 2px; }
body.contact-open .story-progress { opacity: 0; }

/* chapitre contact de l'accueil : plus de place sous l'en-tête */
#contact { padding-top: calc(var(--header-h) + 90px); }

/* ---- Préchargeur : la phrase d'accueil du « film », tapée à la machine ---- */
.loader {
    position: fixed; inset: 0; z-index: 9990; background: #000000;
    display: grid; place-items: center; padding: 24px;
    transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: grid; justify-items: center; text-align: center; gap: 26px; width: min(920px, 100%); }
.loader-logo { height: clamp(140px, 24vh, 250px); width: auto; filter: drop-shadow(0 12px 40px rgba(47, 124, 255, 0.35)); animation: loader-float 5s ease-in-out infinite; }
@keyframes loader-float { 50% { transform: translateY(-8px); } }
.loader-intro {
    min-height: 9.6em; white-space: pre-line;
    font-size: clamp(19px, 1.5vw + 0.6vh, 28px); line-height: 1.6; font-weight: 300; color: var(--ink-2);
}
.loader-intro.typing::after { content: ''; display: inline-block; width: 1px; height: 1.1em; margin-left: 3px; vertical-align: -0.2em; background: #ffffff; animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.loader-meter { display: grid; justify-items: center; gap: 14px; width: min(320px, 70vw); }
.loader-value { font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.loader-unit { font-size: 0.35em; letter-spacing: 0; margin-left: 0.1em; color: rgba(255, 255, 255, 0.5); }
.loader-bar { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.loader-bar span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue), #ffffff, var(--gold)); transform: scaleX(0); transform-origin: left center; }
.loader-hint { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
body.is-loading { overflow: hidden; }

/* ============================================================================
   Mode flux : les chapitres suivent la page (posés par app.js)
   ============================================================================ */
body.flow .slide {
    position: absolute; left: var(--gutter); right: var(--gutter); width: auto;
    top: 0; bottom: auto; padding: 0;
    visibility: visible; pointer-events: auto;
}
body.flow #slide-1, body.flow #slide-2, body.flow #slide-3, body.flow #slide-4, body.flow #slide-5, body.flow #slide-6 { left: var(--gutter); right: var(--gutter); width: auto; max-width: none; }
body.flow #slide-1 { padding-bottom: 0; }
body.flow .slide-title { font-size: clamp(34px, 9vw, 60px); }
body.flow .slide-title .line { white-space: normal; }
body.flow .slide-cards.two, body.flow .slide-cards.grid-2 { grid-template-columns: 1fr; }
body.flow .story-progress { display: none; }
@media (min-width: 640px) {
    body.flow .slide-cards.two, body.flow .slide-cards.grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .figures { flex-wrap: wrap; gap: 26px 30px; }
}

/* ============================================================================
   Version classique (téléphone) : les chapitres s'enchaînent dans la page,
   sans cinématique ni 3D ; le contact suit.
   ============================================================================ */
body.classic .scroll-stage { height: auto; padding: calc(var(--header-h) + 30px) 0 20px; }
body.classic .slide,
body.classic #slide-1, body.classic #slide-2, body.classic #slide-3, body.classic #slide-4, body.classic #slide-5, body.classic #slide-6 {
    position: static; inset: auto; width: auto; max-width: none;
    margin: 0 var(--gutter); padding: 0 0 72px;
    visibility: visible; pointer-events: auto; opacity: 1;
}
body.classic .slide-title { font-size: clamp(34px, 9vw, 56px); }
body.classic .slide-title .line { white-space: normal; }
body.classic .slide-cards.two, body.classic .slide-cards.grid-2 { grid-template-columns: 1fr; }
body.classic .story-progress, body.classic .header-counter { display: none; }
body.classic #contact { padding-top: 30px; }
@media (min-width: 640px) {
    body.classic .slide-cards.two, body.classic .slide-cards.grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Chapitre 1 : titre en haut, cartes « Notre vision » / « Notre priorité »
   empilées à la largeur exacte du titre, titres et textes plus présents.
   ============================================================================ */
#slide-1 {
    justify-content: flex-start; padding-top: 5vh; padding-bottom: 40px;
    width: fit-content; max-width: min(860px, 56vw);
}
/* largeur nulle + min 100 % : les cartes prennent la largeur du titre sans l'élargir */
#slide-1 .slide-cards.two, body.classic #slide-1 .slide-cards.two { grid-template-columns: 1fr; width: 0; min-width: 100%; gap: 14px; }
#slide-1 .info-card { padding: clamp(20px, 1.8vw, 28px); }
#slide-1 .info-card h3 { font-size: clamp(14px, 0.6vw + 0.5vh, 17px); letter-spacing: 0.16em; color: #ffffff; margin-bottom: 12px; }
#slide-1 .info-card h3::before { width: 7px; height: 7px; flex-basis: 7px; }
#slide-1 .info-card p { font-size: clamp(15px, 0.6vw + 0.75vh, 18px); line-height: 1.6; }

/* ============================================================================
   Transition chargement → accueil : le logo rejoint l'en-tête, la phrase s'efface
   vers le haut, le fond s'éclaircit ; la caméra enchaîne sur un travelling (app.js).
   ============================================================================ */
.loader.t-b { transition: background-color 1.2s ease 0.7s, opacity 0.5s ease 1.7s, visibility 0s linear 2.3s; }
.loader.t-b.is-done { opacity: 1; background-color: rgba(0, 0, 0, 0); }
.loader.t-b .loader-intro, .loader.t-b .loader-meter { transition: opacity 0.7s ease, transform 0.9s var(--ease), filter 0.8s var(--ease); }
.loader.t-b.is-done .loader-intro { opacity: 0; transform: translateY(-40px); filter: blur(10px); }
.loader.t-b.is-done .loader-meter { opacity: 0; transform: translateY(-20px); transition-delay: 0.1s; }
body.handoff .site-header .brand img { opacity: 0; }
.site-header .brand img { transition: opacity 0.2s; }


/* ============================================================================
   L'un chasse l'autre (ordinateur, chapitres fixes) : les cartes d'un nouveau
   chapitre entrent par le bord du côté où se trouve le logo ; l'ancien chapitre est
   repoussé vers son bord, flouté, quand les morceaux du logo l'atteignent.
   ============================================================================ */
#slide-1, #slide-3, #slide-5 { --side: -1; }     /* texte à gauche */
#slide-2, #slide-4, #slide-6 { --side: 1; }      /* texte à droite */
body:not(.flow):not(.classic) .slide-cards > * {
    transform: translate(calc(var(--side) * 110px), 0) scale(0.97);
}
body:not(.flow):not(.classic) .slide.active .slide-cards > * { transform: none; }
body:not(.flow):not(.classic) .slide.is-chased .slide-title,
body:not(.flow):not(.classic) .slide.is-chased .slide-cards,
body:not(.flow):not(.classic) .slide.is-chased .slide-cta,
body:not(.flow):not(.classic) .slide.is-chased .slide-desc,
body:not(.flow):not(.classic) .slide.is-chased .figures,
body:not(.flow):not(.classic) .slide.is-chased .towns,
body:not(.flow):not(.classic) .slide.is-chased .eyebrow {
    transform: translateX(calc(var(--side) * 48vw)); opacity: 0; filter: blur(12px);
    transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease;
}

/* pied de page toujours visible : les chapitres fixes s'arrêtent au-dessus */
.slide { bottom: var(--footer-h); }
body.flow .slide, body.classic .slide { bottom: auto; }

/* ============================================================================
   Variété (ordinateur, chapitres fixes) : à chaque changement de chapitre, app.js tire
   une animation de la liste validée (common.js). data-enter : point de départ des cartes
   du nouveau chapitre ; data-exit : sortie de l'ancien chapitre. « side » (Côté) est
   l'animation de base ci-dessus.
   ============================================================================ */
/* Bas */
body:not(.flow):not(.classic) .slide[data-enter="bottom"]:not(.active) .slide-cards > * { transform: translateY(40vh) scale(0.95); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="bottom"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: translateY(75vh) rotate(calc(var(--side) * -4deg)); opacity: 0; filter: blur(6px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
/* Diagonale */
body:not(.flow):not(.classic) .slide[data-enter="diag"]:not(.active) .slide-cards > * { transform: translate(calc(var(--side) * 120px), 30vh) rotate(calc(var(--side) * -5deg)) scale(0.94); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="diag"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: scale(0.5); opacity: 0; filter: blur(16px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
/* Profondeur */
body:not(.flow):not(.classic) .slide[data-enter="depth"]:not(.active) .slide-cards > * { transform: scale(0.45); filter: blur(10px); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="depth"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: scale(1.7); opacity: 0; filter: blur(22px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
/* Bascule */
body:not(.flow):not(.classic) .slide[data-enter="hinge"] .slide-cards > *, body:not(.flow):not(.classic) .slide.is-chased[data-exit="hinge"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform-origin: calc(50% + var(--side) * 50%) 50%; }
body:not(.flow):not(.classic) .slide[data-enter="hinge"]:not(.active) .slide-cards > * { transform: perspective(1400px) rotateY(calc(var(--side) * 75deg)); }
body:not(.flow):not(.classic) .slide.active[data-enter="hinge"] .slide-cards > * { transform: perspective(1400px) rotateY(0deg); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="hinge"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: perspective(1400px) rotateY(calc(var(--side) * -80deg)); opacity: 0; filter: blur(4px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
/* Retournement */
body:not(.flow):not(.classic) .slide[data-enter="flip"]:not(.active) .slide-cards > * { transform: perspective(1600px) rotateY(calc(var(--side) * 100deg)) scale(0.92); filter: blur(2px); }
body:not(.flow):not(.classic) .slide.active[data-enter="flip"] .slide-cards > * { transform: perspective(1600px) rotateY(0deg) scale(1); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="flip"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: perspective(1600px) rotateY(calc(var(--side) * -100deg)) scale(0.92); opacity: 0; filter: blur(4px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
/* Mise au point */
body:not(.flow):not(.classic) .slide[data-enter="focus"]:not(.active) .slide-cards > * { transform: scale(1.06); filter: blur(34px); }
body:not(.flow):not(.classic) .slide.active[data-enter="focus"] .slide-cards > * { transition-duration: 1.1s, 1.6s, 1.6s; }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="focus"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: scale(0.97); opacity: 0; filter: blur(34px); transition: transform 1.2s ease, opacity 1.1s ease 0.2s, filter 1.1s ease; }
/* Rideau */
body:not(.flow):not(.classic) .slide[data-enter="curtain"]:not(.active) .slide-cards > * { transform: none; filter: none; opacity: 1; clip-path: inset(0 0 100% 0 round 20px); }
body:not(.flow):not(.classic) .slide.active[data-enter="curtain"] .slide-cards > * { clip-path: inset(0 0 0 0 round 20px); transition-property: clip-path, opacity, transform, filter; transition-duration: 1.3s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="curtain"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: none; filter: none; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s 1s; }
/* Volet */
body:not(.flow):not(.classic) .slide:is(#slide-2, #slide-4, #slide-6)[data-enter="wipe"]:not(.active) .slide-cards > * { clip-path: inset(0 100% 0 0 round 20px); }
body:not(.flow):not(.classic) .slide:is(#slide-1, #slide-3, #slide-5)[data-enter="wipe"]:not(.active) .slide-cards > * { clip-path: inset(0 0 0 100% round 20px); }
body:not(.flow):not(.classic) .slide[data-enter="wipe"]:not(.active) .slide-cards > * { transform: none; filter: none; opacity: 1; }
body:not(.flow):not(.classic) .slide.active[data-enter="wipe"] .slide-cards > * { clip-path: inset(0 0 0 0 round 20px); transition-property: clip-path, opacity, transform, filter; transition-duration: 1.1s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
body:not(.flow):not(.classic) .slide:is(#slide-1, #slide-3, #slide-5).is-chased[data-exit="wipe"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { clip-path: inset(0 0 0 100%); }
body:not(.flow):not(.classic) .slide:is(#slide-2, #slide-4, #slide-6).is-chased[data-exit="wipe"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { clip-path: inset(0 100% 0 0); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="wipe"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: none; filter: none; transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s 0.9s; }
/* Spirale */
body:not(.flow):not(.classic) .slide[data-enter="spiral"]:not(.active) .slide-cards > * { transform: translateX(calc(var(--side) * 60px)) rotate(calc(var(--side) * -28deg)) scale(0.55); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="spiral"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: translateX(calc(var(--side) * -40px)) rotate(calc(var(--side) * 40deg)) scale(0.2); opacity: 0; filter: blur(10px); transition: transform 1s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.2s, filter 0.8s; }
/* Rebond */
body:not(.flow):not(.classic) .slide.active[data-enter="bounce"] .slide-cards > * { animation: slide-bounce 1.3s 0.25s both; }
body:not(.flow):not(.classic) .slide.active[data-enter="bounce"] .slide-cards > *:nth-child(2) { animation-delay: 0.38s; }
body:not(.flow):not(.classic) .slide.active[data-enter="bounce"] .slide-cards > *:nth-child(3) { animation-delay: 0.51s; }
body:not(.flow):not(.classic) .slide.active[data-enter="bounce"] .slide-cards > *:nth-child(4) { animation-delay: 0.64s; }
@keyframes slide-bounce {
  0%   { transform: translateY(60vh); opacity: 0; filter: blur(6px); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  50%  { transform: translateY(-38px) scale(0.99, 1.02); opacity: 1; filter: blur(0); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  70%  { transform: translateY(0) scale(1.02, 0.97); animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  85%  { transform: translateY(-12px); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}
body:not(.flow):not(.classic) .slide.is-chased[data-exit="bounce"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: translateY(-80vh) rotate(calc(var(--side) * 6deg)); opacity: 0; transition: transform 0.9s cubic-bezier(0.4, -0.3, 0.75, 0.3), opacity 0.7s ease 0.2s, filter 0.7s; }
/* Éclats : les cartes attendent que leurs éclats se soient rassemblés */
body:not(.flow):not(.classic) .slide[data-enter="shards"]:not(.active) .slide-cards > * { transform: none; filter: none; }
body:not(.flow):not(.classic) .slide.active[data-enter="shards"] .slide-cards > * { transition: opacity 0.25s linear 1.25s; }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="shards"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: scale(0.96); opacity: 0; filter: blur(8px); transition: transform 0.7s ease, opacity 0.6s ease, filter 0.6s ease; }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="shards"] .slide-cards { opacity: 0; transition: opacity 0s; }
/* Glissé parallaxe : les lignes des cartes arrivent l'une après l'autre */
body:not(.flow):not(.classic) .slide[data-enter="stagger"]:not(.active) .slide-cards > * { transform: translateX(calc(var(--side) * 50px)); filter: none; }
body:not(.flow):not(.classic) .slide[data-enter="stagger"]:not(.active) .st { opacity: 0; transform: translateX(calc(var(--side) * 70px)); }
body:not(.flow):not(.classic) .slide.active[data-enter="stagger"] .st { transition: transform 0.8s var(--ease) calc(0.35s + var(--i) * 70ms), opacity 0.6s ease calc(0.35s + var(--i) * 70ms); }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="stagger"] :is(.slide-title, .slide-cards, .slide-cta, .slide-desc, .figures, .towns, .eyebrow) { transform: translateX(calc(var(--side) * 48vw)); opacity: 0; filter: blur(12px); transition: transform 0.9s cubic-bezier(0.55, 0, 0.75, 0.25), opacity 0.8s ease 0.1s, filter 0.8s ease; }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="stagger"] .slide-cards { transform: none; opacity: 0; filter: none; transition: opacity 0.4s ease 0.9s; }
body:not(.flow):not(.classic) .slide.is-chased[data-exit="stagger"] .st { opacity: 0; transform: translateX(calc(var(--side) * 90px)); transition: transform 0.6s cubic-bezier(0.55, 0, 0.75, 0.25) calc(var(--j) * 50ms), opacity 0.5s ease calc(var(--j) * 50ms); }

/* ============================================================================
   Chapitre 4 : comment se passe une intervention (3 étapes) et où (les villes)
   ============================================================================ */
#slide-6 .slide-desc { margin-top: 4px; max-width: 58ch; }
.slide-cards.three { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.how-steps .info-card { padding: clamp(16px, 1.4vw, 22px); }
.how-num { display: block; font-size: clamp(26px, 2.2vw, 36px); line-height: 1; letter-spacing: -0.03em; color: var(--gold); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.how-steps .info-card h3 { color: #ffffff; letter-spacing: 0.14em; }
.how-steps .info-card h3::before { display: none; }

.towns { margin-top: 24px; }
.towns-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #cfd6e6; margin-bottom: 12px;
    opacity: 0; transition: opacity 0.8s ease 0.7s; }
.towns-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.towns-list li {
    padding: 6px 13px; border-radius: 999px; font-size: 13px; color: var(--ink-2);
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
    opacity: 0; transform: translateY(10px); filter: blur(4px);
    transition: opacity 0.6s ease, transform 0.7s var(--ease), filter 0.6s ease;
}
.towns-list li:first-child { border-color: rgba(255, 215, 106, 0.45); color: #fff; }
.towns-list .towns-more { border-style: dashed; color: var(--muted); }
/* les villes apparaissent une à une, après les étapes */
.slide.active .towns-label { opacity: 1; }
.slide.active .towns-list li { opacity: 1; transform: none; filter: blur(0); transition-delay: calc(0.9s + var(--i) * 70ms); }

body.flow .slide-cards.three, body.classic .slide-cards.three { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    body.flow .slide-cards.three, body.classic .slide-cards.three { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================================
   Écrans 2 à 5 exactement comme le chapitre 1 : titre en haut, 2 cartes empilées,
   mêmes tailles de titres, de textes et de cartes (largeur des cartes du chapitre 1,
   mesurée par app.js : --ch1-cards-w). Ils alternent droite / gauche.
   (Sur un écran trop bas, app.js réduit l'ensemble de l'écran pour qu'il tienne.)
   ============================================================================ */
#slide-2, #slide-3, #slide-4, #slide-5 {
    justify-content: flex-start; padding-top: 5vh; padding-bottom: 40px;
    width: fit-content; max-width: min(860px, 56vw);
}
#slide-2, #slide-4 { left: auto; right: var(--gutter); }   /* à droite : le logo prend la gauche */
:is(#slide-2, #slide-4) .eyebrow { display: none; }        /* comme le chapitre 1 : le titre d'abord */
:is(#slide-2, #slide-3, #slide-4, #slide-5) .slide-title { font-size: clamp(40px, 4.4vw, 76px); }
:is(#slide-2, #slide-3, #slide-4, #slide-5) .slide-cards { grid-template-columns: 1fr; width: 0; min-width: 100%; gap: 14px; }
body:not(.flow):not(.classic) :is(#slide-2, #slide-3, #slide-4, #slide-5) .slide-cards { width: var(--ch1-cards-w, 0); }
:is(#slide-2, #slide-3, #slide-4, #slide-5) .info-card { padding: clamp(20px, 1.8vw, 28px); }
:is(#slide-2, #slide-3, #slide-4, #slide-5) .info-card h3 { font-size: clamp(14px, 0.6vw + 0.5vh, 17px); letter-spacing: 0.16em; color: #ffffff; margin-bottom: 12px; }
:is(#slide-2, #slide-3, #slide-4, #slide-5) .info-card h3::before { width: 7px; height: 7px; flex-basis: 7px; }
:is(#slide-2, #slide-3, #slide-4, #slide-5) .info-card p,
:is(#slide-2, #slide-3, #slide-4, #slide-5) .info-card li { font-size: clamp(15px, 0.6vw + 0.75vh, 18px); line-height: 1.6; }
/* tablette, téléphone, fenêtre étroite : la page est continue, la suite d'un chapitre
   ne répète pas son titre et suit directement ses premières cartes */
body.flow .slide--cont .slide-title, body.classic .slide--cont .slide-title { display: none; }
body.classic :is(#slide-2, #slide-4) { padding-bottom: 14px; }
/* écran 3 : la carte des logos a la même taille que la carte « Installation et Initiation » */
#slide-3 .slide-cards { grid-auto-rows: 1fr; }

/* Tirets de droite : un numéro par écran, cliquable ; le numéro actif en or */
.story-progress { pointer-events: auto; }
.story-dashes { gap: 8px; }
.story-jump { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; padding: 2px 0; background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, 0.45); font: inherit; font-size: 13px; letter-spacing: 0.08em; transition: color 0.3s; }
.story-jump:hover { color: #ffffff; }
.story-jump.is-current { color: var(--gold); font-weight: 500; }
.story-jump .story-dash { height: 34px; }

/* Tirets de l'accueil en bas de l'écran (comme sur les autres pages), numéros au-dessus */
.story-progress { top: auto; right: auto; left: 50%; bottom: calc(var(--footer-h) + 22px); transform: translateX(-50%); }
.story-dashes { flex-direction: row; gap: 10px; }
.story-jump { flex-direction: column; gap: 6px; }
.story-jump .story-dash, .story-dash { width: 40px; height: 2px; }
.story-dash-fill { height: 100%; width: 0%; }