/*
===============================================================================
PORTFOLIO — FEUILLE DE STYLE PRINCIPALE
Version organisée, commentée et maintenable

TABLE DES MATIÈRES
01. Variables et fondations
02. Typographie générale
03. Structure horizontale
04. Contenu des étapes
05. Couleurs des chapitres
06. Page d’accueil
07. Boutons et actions
08. Tracé, avatar et illustrations
09. Page finale et téléchargement
10. Navigation fixe
11. Modale de lecture
12. Effets et animations
13. Responsive desktop intermédiaire
14. Responsive tablette et mobile
15. Accessibilité
16. Adaptation fluide du desktop
17. Sécurisation du scroll et du positionnement

PRINCIPES DE MAINTENANCE
- Aucune règle fonctionnelle n’a été supprimée.
- L’ordre de cascade existant est conservé.
- Les surcharges responsive restent placées après les règles générales.
- Le breakpoint mobile principal reste fixé à 1024 px.
- Les étapes conservent leur scroll vertical indépendant.
- Le fond reste continu pendant le scroll.
- La navigation reste centrée en bas avec une zone réservée.
- Le contenu ne subit plus de décalage vertical négatif.
===============================================================================
*/

/* ==========================================================================
   01. VARIABLES ET FONDATIONS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Open+Sans:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --modal-accent: var(--primary-blue);
  --h1-title: #1A365D;
  --h2-title: #1A659E;
  --h3-title: #1A365D;
  --body-text: #4A5568;
  --color-cadre: #1A659E;
  --color-introspection: #104065;
  --color-development: #1D73B4;
  --color-implementation: #4BA0E2;
  --color-conclusion: #1A659E;
  --white: #FFFFFF;
  --card-bg: #F7FAFC;
  --light-blue: #D9F0F2;
  --soft-green: #EAF9E8;
  --primary-blue: #1A659E;
  --dark-blue: #1A365D;
  --font-main: "Open Sans", sans-serif;
  --font-handwritten: "Caveat", cursive;
  --shadow-soft: 0 15px 35px rgba(26,54,93,.06);
  --shadow-card: 0 25px 50px rgba(26,54,93,.08);
  --shadow-button-blue: 0 8px 20px rgba(26,101,158,.25);
  --shadow-button-dark: 0 8px 20px rgba(26,54,93,.2);
  --glass-border: 1px solid rgba(255,255,255,.78);
  --glass-bg: rgba(255,255,255,.72);

  /* Fond commun des étapes, utilisé à la fois par .stage et .stage-bg afin
     qu’aucune zone blanche n’apparaisse pendant le scroll vertical. */
  --stage-background:
    radial-gradient(circle at 18% 20%,rgba(217,240,242,.95),transparent 30%),
    radial-gradient(circle at 82% 24%,rgba(234,249,232,.95),transparent 32%),
    radial-gradient(circle at 25% 78%,rgba(234,249,232,.70),transparent 34%),
    radial-gradient(circle at 78% 82%,rgba(217,240,242,.70),transparent 34%),
    var(--white);
}

* { box-sizing: border-box; }

html,
body,
.horizontal-app,
.scroller,
.track,
/* Chaque étape occupe toute la largeur de l’écran.
   Le scroll vertical ne s’active que si le contenu dépasse la hauteur disponible. */
.stage {
  height: 100vh;
  height: 100dvh;
}

html,
body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.8;
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

p,
li { color: var(--body-text); }

button,
a { font-family: inherit; }
button { cursor: pointer; }

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color .3s ease;
}

a:hover { color: var(--dark-blue); }

button,
a,
.read-more,
.next-link,
.start-btn-landing,
.download-pdf-main {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(26,101,158,.45);
  outline-offset: 4px;
}

/* ==========================================================================
   02. TYPOGRAPHIE ET ÉLÉMENTS GÉNÉRAUX
   ========================================================================== */

h1,
.hero-title,
.download-title {
  color: var(--h1-title);
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  margin: 0;
  font-size: clamp(24px,3vw,42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--h2-title);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

h3 {
  margin: 0;
  font-weight: 700;
  color: var(--h3-title);
}

/* ==========================================================================
   03. STRUCTURE HORIZONTALE DU PARCOURS
   ========================================================================== */

.horizontal-app {
  position: relative;
  width: 100vw;
  overflow: hidden;
  background: var(--stage-background);
}

.scroller {
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: none;
}

.scroller:active { cursor: grabbing; }
.scroller::-webkit-scrollbar { display: none; }

/* La largeur totale correspond aux 25 étapes actuelles. À mettre à jour si
   le nombre d’étapes change, ainsi que la largeur de .trace-layer. */
.track {
  position: relative;
  display: flex;
  width: 2500vw;
}

.stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0 clamp(30px,6vw,100px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,101,158,.30) transparent;
  overflow-anchor: none;
  color: var(--body-text);
  background: var(--stage-background);
  background-attachment: local;
}

.stage::-webkit-scrollbar { width: 7px; }
.stage::-webkit-scrollbar-track { background: transparent; }
.stage::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(26,101,158,.28);
}

/* ==========================================================================
   04. CONTENU DES ÉTAPES
   ========================================================================== */

.stage-bg {
  position: absolute;
  inset: -4%;
  opacity: 1;
  transform: translateX(calc(var(--local,0) * -60px)) scale(1.05);
  background: var(--stage-background);
}

.stage-content {
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(290px,1fr) minmax(360px,1.4fr);
  align-items: center;
  gap: 45px;
  width: min(1180px,94vw);
  margin-block: auto;
  padding-block:
    calc(76px + env(safe-area-inset-top,0px))
    calc(136px + env(safe-area-inset-bottom,0px));
  /*
   * Aucun décalage vertical négatif : le haut du contenu doit toujours rester
   * dans la zone visible, quelle que soit la hauteur de fenêtre.
   */
  transform: none;
}

.hero-stage-content { grid-template-columns: 1fr; }

.stage-title-box {
  padding: 32px 35px;
  border: var(--glass-border);
  border-top: 5px solid rgba(26,54,93,.16);
  border-radius: 32px;
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.stage-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--white)!important;
  text-transform: uppercase;
}

.num {
  margin: 0 0 15px;
  font-family: var(--font-handwritten);
  font-size: clamp(58px,7vw,98px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: .02em;
  color: var(--h1-title);
}

.summary-card {
  padding: 38px 45px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 36px;
  color: var(--body-text);
  background: var(--glass-bg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.summary-card p {
  margin: 0 0 16px;
  font-size: clamp(17px,1.6vw,20px);
  line-height: 1.7;
}

.quest-transition {
  margin-top: 18px!important;
  margin-bottom: 0!important;
  font-size: 20px!important;
  font-weight: 800!important;
  line-height: 1.5!important;
  letter-spacing: .08em;
  color: var(--primary-blue)!important;
}

/* ==========================================================================
   05. VARIANTES DE COULEUR PAR CHAPITRE
   ========================================================================== */

.stage-neutral { border-top-color: var(--color-cadre)!important; }
.stage-introspection { border-top-color: var(--color-introspection)!important; }
.stage-development { border-top-color: var(--color-development)!important; }
.stage-implementation { border-top-color: var(--color-implementation)!important; }
.stage-conclusion { border-top-color: var(--color-conclusion)!important; }

.stage-neutral .stage-category { background: var(--color-cadre)!important; }
.stage-introspection .stage-category { background: var(--color-introspection)!important; }
.stage-development .stage-category { background: var(--color-development)!important; }
.stage-implementation .stage-category { background: var(--color-implementation)!important; }
.stage-conclusion .stage-category { background: var(--color-conclusion)!important; }

.stage-neutral .num { color: var(--color-cadre)!important; }
.stage-introspection .num { color: var(--color-introspection)!important; }
.stage-development .num { color: var(--color-development)!important; }
.stage-implementation .num { color: var(--color-implementation)!important; }
.stage-conclusion .num { color: var(--color-conclusion)!important; }

.stage:has(.stage-neutral) h2,
.stage:has(.stage-neutral) .quest-transition { color: var(--color-cadre)!important; }
.stage:has(.stage-introspection) h2,
.stage:has(.stage-introspection) .quest-transition { color: var(--color-introspection)!important; }
.stage:has(.stage-development) h2,
.stage:has(.stage-development) .quest-transition { color: var(--color-development)!important; }
.stage:has(.stage-implementation) h2,
.stage:has(.stage-implementation) .quest-transition { color: var(--color-implementation)!important; }
.stage:has(.stage-conclusion) h2,
.stage:has(.stage-conclusion) .quest-transition { color: var(--color-conclusion)!important; }

/* ==========================================================================
   06. PAGE D’ACCUEIL
   ========================================================================== */

.hero-inner-editorial {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(48px,7vh,82px) 40px 28px;
  text-align: center;
  transform: translateY(18px);
}

.hero-eyebrow {
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--h2-title);
  text-transform: uppercase;
}

.hero-title {
  margin: 8px 0 0;
  font-size: clamp(42px,8vw,92px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.hero-subtitle {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: clamp(18px,2vw,24px);
  line-height: 1.6;
}

.quest-intro {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.7;
  color: rgba(74,85,104,.9);
}

.hero-navigation-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px auto 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(74,85,104,.85);
  text-transform: uppercase;
}

.hero-navigation-hint span {
  padding: 12px 18px;
  border: var(--glass-border);
  border-radius: 999px;
  background: var(--card-bg);
  box-shadow: 0 10px 25px rgba(26,54,93,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[id="0"] .hero-actions {
  margin-top: 18px;
  margin-bottom: 0!important;
}

[id="0"] .start-btn-landing {
  position: relative;
  z-index: 35;
}

body.is-home .trace-bg,
body.is-home .trace-progress,
body.is-home .trace-reveal {
  opacity: 0!important;
  visibility: hidden!important;
}

/* ==========================================================================
   07. BOUTONS ET ACTIONS
   ========================================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.start-btn-landing,
.read-more,
.next-link,
.download-pdf-main,
.download-annex,
.listen-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  color: var(--white);
  transition: transform .3s ease,background-color .3s ease,box-shadow .3s ease;
}

.start-btn-landing,
.read-more,
.download-pdf-main {
  background: var(--primary-blue);
  box-shadow: var(--shadow-button-blue);
}

.next-link {
  background: var(--dark-blue);
  box-shadow: var(--shadow-button-dark);
}

.start-btn-landing { padding: 18px 36px; font-size: 16px; }
.read-more,
.next-link { padding: 14px 24px; font-size: 15px; }
.download-pdf-main { padding: 16px 28px; font-size: 16px; }

.start-btn-landing:hover,
.read-more:hover,
.next-link:hover,
.download-pdf-main:hover,
.download-annex:hover,
.listen-text:hover,
.listen-text.is-playing { transform: translateY(-2px); }

.start-btn-landing:hover,
.read-more:hover,
.download-pdf-main:hover,
.download-annex:hover,
.listen-text:hover,
.listen-text.is-playing {
  color: var(--white);
  background: var(--dark-blue)!important;
}

.next-link:hover { background: var(--primary-blue); }

.stage:has(.stage-neutral) .read-more,
.stage:has(.stage-neutral) .next-link { background: var(--color-cadre); }
.stage:has(.stage-introspection) .read-more,
.stage:has(.stage-introspection) .next-link { background: var(--color-introspection); }
.stage:has(.stage-development) .read-more,
.stage:has(.stage-development) .next-link { background: var(--color-development); }
.stage:has(.stage-implementation) .read-more,
.stage:has(.stage-implementation) .next-link { background: var(--color-implementation); }
.stage:has(.stage-conclusion) .read-more,
.stage:has(.stage-conclusion) .next-link { background: var(--color-conclusion); }

.download-annex,
.listen-text {
  gap: 9px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  background: var(--modal-accent);
  box-shadow: 0 8px 20px color-mix(in srgb,var(--modal-accent) 28%,transparent);
}

.annex-icon,
.audio-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   08. TRACÉ, AVATAR ET ILLUSTRATIONS
   ========================================================================== */

.grad-cadre { stop-color: var(--color-cadre); }
.grad-introspection { stop-color: var(--color-introspection); }
.grad-development { stop-color: var(--color-development); }
.grad-implementation { stop-color: var(--color-implementation); }
.grad-conclusion { stop-color: var(--color-conclusion); }

.trace-layer {
  position: absolute;
  z-index: 4!important;
  inset: 0;
  width: 2500vw;
  height: 100vh;
  pointer-events: none;
}

.trace-layer svg { width: 100%; height: 100%; }
.trace-bg,
.trace-progress,
.trace-reveal { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-bg { display: none; }
.trace-progress { stroke: url(#grad); stroke-width: 4!important; stroke-dasharray: 18 18; }
.trace-reveal { stroke: #fff; stroke-width: 18!important; }

.avatar {
  position: absolute;
  z-index: 20!important;
  width: 85px;
  height: 85px;
  border: 4px solid var(--avatar-border,var(--primary-blue));
  border-radius: 50%;
  background-color: var(--light-blue);
  background-image: url("../assets/images/avatar-stopped.png")!important;
  background-position: center!important;
  background-size: cover!important;
  box-shadow: 0 15px 30px rgba(26,54,93,.18),0 0 var(--glow,20px) var(--avatar-glow,rgba(26,101,158,.35));
  transform: translate(-50%,-50%) scale(var(--scale,1));
  transition: transform .2s ease,box-shadow .2s ease,border-color .25s ease,background-image .15s ease;
}

.avatar.is-moving { background-image: url("../assets/images/avatar-moving.png")!important; }
.avatar.avatar-final { z-index: 18!important; }

/* Mise en page standard des étapes 1 à 23 :
   titre à gauche, illustration au centre, résumé à droite. */
.stage:not([id="0"]):not([id="24"]) .stage-content {
  grid-template-columns: minmax(300px,1fr) minmax(190px,320px) minmax(300px,1fr)!important;
  gap: clamp(24px,3vw,48px)!important;
  width: min(1500px,96vw)!important;
}

.stage:not([id="0"]):not([id="24"]) .stage-title-box { grid-column: 1; }
.stage:not([id="0"]):not([id="24"]) .summary-card { grid-column: 3; }

.stage-visual {
  position: relative;
  z-index: 8!important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(43vh,390px);
  pointer-events: none;
}

.stage-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 360px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 24px rgba(26,54,93,.14));
}

.stage:not([id="0"]):not([id="24"]) .stage-visual {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: min(320px,100%);
  max-width: 320px;
  margin: 0 auto clamp(95px,12vh,135px);
}

.stage-title-box,
.summary-card,
.download-card,
.hero-inner-editorial { position: relative; z-index: 15!important; }

[id="0"] .stage-visual {
  width: min(320px,52vw);
  height: min(29vh,270px);
  margin: 18px auto 0;
}

[id="0"] .stage-visual img { max-width: 310px; }

/* ==========================================================================
   09. PAGE DE TÉLÉCHARGEMENT
   ========================================================================== */

.download-card {
  width: min(920px,90vw);
  padding: 58px 64px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 38px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 30px 60px rgba(26,54,93,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
}

.download-kicker {
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--h2-title);
  text-transform: uppercase;
}

.download-title {
  margin: 0;
  font-size: clamp(48px,6.5vw,92px);
  line-height: .95;
  letter-spacing: -.045em;
}

.download-card p { max-width: 660px; margin: 28px 0 0; font-size: 20px; line-height: 1.6; }

[id="24"] .download-card {
  display: grid;
  grid-template-columns: minmax(220px,.75fr) minmax(360px,1.25fr);
  column-gap: 38px;
  align-items: center;
}

[id="24"] .download-kicker,
[id="24"] .download-title,
[id="24"] .download-card > p,
[id="24"] .download-card > .actions { grid-column: 2; }

[id="24"] .stage-visual {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 100%;
  height: min(40vh,350px);
  margin: 0;
}

/* ==========================================================================
   10. NAVIGATION FIXE
   ========================================================================== */

.quest-status {
  position: fixed!important;
  z-index: 999!important;
  top: 24px!important;
  left: 24px!important;
  display: flex!important;
  align-items: center!important;
  gap: 8px!important;
  max-width: calc(100vw - 160px)!important;
  padding: 12px 18px!important;
  border: 1px solid rgba(255,255,255,.78)!important;
  border-radius: 999px!important;
  background: rgba(247,250,252,.96)!important;
  box-shadow: 0 10px 25px rgba(26,54,93,.12)!important;
  backdrop-filter: blur(14px)!important;
  -webkit-backdrop-filter: blur(14px)!important;
  font-size: 12px!important;
  font-weight: 800!important;
  line-height: 1.2!important;
  letter-spacing: .06em!important;
  white-space: nowrap!important;
}

.quest-status span {
  display: inline-flex!important;
  align-items: center!important;
  flex-shrink: 0!important;
  font-size: 12px!important;
  font-weight: 800!important;
  line-height: 1.2!important;
  letter-spacing: .06em!important;
  white-space: nowrap!important;
}

.quest-status-separator { color: rgba(74,85,104,.45)!important; }
#questPercent,
#questStep { color: var(--primary-blue)!important; }
#questName { min-width: 0!important; color: var(--dark-blue)!important; }

/* Une marge inférieure renforcée est réservée dans chaque étape afin que
   les blocs restent toujours au-dessus de cette navigation flottante. */
.arrows {
  position: fixed;
  z-index: 1000;
  top: 50%;
  right: max(10px,env(safe-area-inset-right,0px));
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(247,250,252,.94);
  box-shadow: 0 10px 25px rgba(26,54,93,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-50%);
}

.arrows button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  font-size: 18px;
  color: var(--white);
  background: var(--primary-blue);
  box-shadow: 0 8px 16px rgba(26,101,158,.18);
}

.arrows button:hover { background: var(--dark-blue); transform: scale(1.05); }

/* ==========================================================================
   11. MODALE DE LECTURE
   ========================================================================== */

body.modal-open { touch-action: none; }

.modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26,54,93,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .28s ease,visibility 0s linear .28s;
}

.modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Le contenu détaillé défile à l’intérieur de la carte, pas dans la page. */
.modal-card {
  position: relative;
  width: min(980px,94vw);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 32px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(26,54,93,.25);
  opacity: 0;
  transform: translateY(24px) scale(.975);
  transition: opacity .32s ease,transform .42s cubic-bezier(.16,1,.3,1);
}

.modal.open .modal-card { opacity: 1; transform: translateY(0) scale(1); }

.modal-head {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--card-bg);
  background: rgba(255,255,255,.97);
}

.modal-title-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  padding-right: 8px;
}

.modal-head h3 {
  min-width: 0;
  font-size: clamp(24px,3vw,40px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--modal-accent);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#modalNum {
  font-size: clamp(28px,3vw,40px);
  font-weight: 300;
  line-height: 1;
  color: var(--modal-accent)!important;
}

.close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  font-size: 26px;
  color: var(--white);
  background: var(--modal-accent);
}

.close:hover { background: var(--dark-blue); transform: rotate(90deg); }

.modal-body {
  padding: 32px;
  font-size: 18px;
  line-height: 1.8;
}

.modal-body p { margin: 0 0 18px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-audio-actions { display: flex; margin-bottom: 24px; }
.modal-annex-actions {
  display: flex;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(26,54,93,.10);
}

/* Listes créées par le JavaScript */
.modal-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 24px;
  padding: 0;
  list-style: none;
}

.modal-bullet-list li {
  position: relative;
  display: block;
  margin: 0;
  padding-left: 26px;
  font-size: inherit;
  line-height: 1.65;
}

.modal-bullet-list li::before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--modal-accent);
  font-size: .8em;
  line-height: 2.05;
}

/* ==========================================================================
   12. EFFETS ET ANIMATIONS
   ========================================================================== */

.document-confetti-piece {
  position: fixed;
  z-index: 130;
  width: 7px;
  height: 10px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  animation: document-confetti-local-ring 1800ms ease-out forwards;
}

@keyframes document-confetti-local-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--start-rot)) scale(.75); }
  15% { opacity: 1; }
  45% { opacity: 1; transform: translate(calc(-50% + var(--wiggle-x) * .55),calc(-50% + var(--wiggle-y) * .55)) rotate(calc(var(--start-rot) + var(--rot) * .35)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--wiggle-x)),calc(-50% + var(--wiggle-y))) rotate(calc(var(--start-rot) + var(--rot))) scale(.72); }
}

.download-card.confetti-pulse { animation: document-card-pulse 650ms ease-out; }
@keyframes document-card-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.018); } }

.animations-ready .stage .stage-bg { opacity: .55; transform: translateX(calc(var(--local,0) * -60px)) scale(1.09); transition: opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1); }
.animations-ready .stage .stage-title-box { opacity: 0; transform: translate3d(-34px,12px,0) scale(.975); filter: blur(5px); transition: opacity .58s ease,transform .72s cubic-bezier(.16,1,.3,1),filter .58s ease; }
.animations-ready .stage .stage-visual { opacity: 0; transform: translate3d(0,30px,0) scale(.9); filter: blur(7px); transition: opacity .65s ease,transform .82s cubic-bezier(.16,1,.3,1),filter .65s ease; }
.animations-ready .stage .summary-card { opacity: 0; transform: translate3d(34px,12px,0) scale(.975); filter: blur(5px); transition: opacity .58s ease,transform .72s cubic-bezier(.16,1,.3,1),filter .58s ease; }
.animations-ready .stage .num { opacity: 0; transform: translate3d(-12px,14px,0) rotate(-4deg) scale(.88); transition: opacity .45s ease,transform .62s cubic-bezier(.16,1,.3,1); }
.animations-ready .stage.is-active .stage-bg { opacity: 1; transform: translateX(calc(var(--local,0) * -60px)) scale(1.05); }
.animations-ready .stage.is-active .stage-title-box,
.animations-ready .stage.is-active .stage-visual,
.animations-ready .stage.is-active .summary-card { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.animations-ready .stage.is-active .num { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }

/* ==========================================================================
   13. RESPONSIVE — DESKTOP INTERMÉDIAIRE
   Ajustement de la grille lorsque la largeur disponible diminue.
   ========================================================================== */


/* Taille intermédiaire pour éviter un saut trop marqué entre la version
   confortable et la version compacte. Elle s’active lorsque la fenêtre descend sous 720 px de hauteur. */


@media (max-width: 1180px) and (min-width: 1025px) {
  .stage:not([id="0"]):not([id="24"]) .stage-content {
    grid-template-columns: minmax(240px,1fr) minmax(150px,245px) minmax(240px,1fr)!important;
    gap: 20px!important;
  }
  .stage:not([id="0"]):not([id="24"]) .stage-visual { width: min(245px,100%); height: min(37vh,315px); }
}

@supports (-webkit-touch-callout: none) {
  html,
  body,
  .horizontal-app,
  .scroller,
  .track,
  .stage { min-height: -webkit-fill-available; }
}

/* ==========================================================================
   13B. ACCUEIL — ADAPTATION PROGRESSIVE À LA HAUTEUR
   Sous 800 px de hauteur, les dimensions diminuent progressivement.
   Le bouton reste dans le flux normal et aucun espace n’est réservé à l’avatar.
   ========================================================================== */


/* Cas particulièrement bas : on réduit encore légèrement les espaces, sans
   masquer de contenu. Le scroll vertical reste disponible en dernier recours. */


/* ==========================================================================
   13C. RÉDUCTION LÉGÈRE — HAUTEUR DE 801 À 1024 PX
   Le texte commence à diminuer dès 1024 px, tout en restant nettement plus
   grand que dans la version compacte appliquée à partir de 800 px.
   ========================================================================== */


/* ==========================================================================
   17B. ZONE RÉSERVÉE À LA NAVIGATION INFÉRIEURE
   Le padding est appliqué à l’étape elle-même, et non seulement au contenu.
   Ainsi, les cartes ne peuvent plus occuper la zone des flèches.
   ========================================================================== */

@media (min-width: 1025px) {
  .stage {
    padding-bottom: clamp(150px,18dvh,190px);
    scroll-padding-bottom: clamp(150px,18dvh,190px);
  }

  .stage-content {
    min-height: calc(100dvh - clamp(150px,18dvh,190px));
  }
}


/* ==========================================================================
   17. CONTENU TOUJOURS ACCESSIBLE EN HAUT
   Le centrage vertical par marges automatiques est supprimé sur desktop.
   Il pouvait placer le début du contenu au-dessus de la zone visible lorsque
   la fenêtre changeait de hauteur ou conservait une ancienne position de scroll.
   ========================================================================== */

@media (min-width: 1025px) {
  .stage-content {
    margin-top: 0;
    margin-bottom: auto;
  }
}

/* ==========================================================================
   NAVIGATION LATÉRALE — ZONE SÛRE
   Sur desktop, les flèches occupent un couloir fixe à droite. Le contenu
   conserve une marge dédiée, hors du tracé et du déplacement de l’avatar.
   ========================================================================== */

@media (min-width: 1025px) {
  .stage {
    padding-right: max(92px,calc(6vw + 18px));
  }

  .stage-content {
    max-width: calc(100vw - 132px);
  }
}

/* ==========================================================================
   14. RESPONSIVE — TABLETTES ET MOBILES
   Version mobile jusqu’à 1024 px inclus.
   ========================================================================== */

@media (max-width: 1024px) {
  html,
  body { font-size: 15px; line-height: 1.55; }
  .scroller { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .stage {
    align-items: flex-start;
    padding: calc(94px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(132px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stage-content,
  .stage:not([id="0"]):not([id="24"]) .stage-content {
    display: flex!important;
    flex-direction: column;
    gap: 12px!important;
    width: 100%!important;
    max-width: 620px;
    margin: 0 auto;
    padding: 0!important;
    transform: none!important;
  }
  .stage-title-box { order: 1; width: 100%; padding: 18px 20px; border-radius: 22px; }
  .stage-category { margin-bottom: 10px; padding: 7px 11px; font-size: 10px; }
  .num { margin: 0; font-size: clamp(46px,15vw,68px); }
  h2 { font-size: clamp(22px,6.5vw,32px); }
  .trace-layer,
  .avatar { display: none; }
  .stage:not([id="0"]):not([id="24"]) .stage-visual { order: 2; width: min(220px,58vw); height: min(23dvh,195px); margin: 0 auto; }
  .summary-card { order: 3; width: 100%; padding: 18px 20px; border-radius: 22px; }
  .actions { gap: 10px; }
  .read-more,
  .next-link { flex: 1 1 180px; padding: 11px 14px; }
  .quest-status {
    top: calc(8px + env(safe-area-inset-top,0px))!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
    width: calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;
    max-width: 520px!important;
    justify-content: center!important;
    flex-wrap: wrap!important;
    row-gap: 4px!important;
    column-gap: 7px!important;
    padding: 9px 12px!important;
    border-radius: 22px!important;
    white-space: normal!important;
    text-align: center!important;
  }
  .quest-status span { font-size: 10.5px!important; }
  #questName { flex-basis: 100%!important; justify-content: center!important; overflow: hidden!important; text-overflow: ellipsis!important; }
  .arrows {
    top: auto!important;
    right: auto!important;
    bottom: calc(8px + env(safe-area-inset-bottom,0px))!important;
    left: 50%!important;
    flex-direction: row!important;
    padding: 8px!important;
    background: rgba(247,250,252,.92)!important;
    transform: translateX(-50%)!important;
  }
  [id="0"] .hero-inner-editorial { width: 100%; padding: 8px 18px 24px!important; transform: none!important; }
  [id="0"] .hero-title { font-size: clamp(34px,11vw,54px); }
  [id="0"] .stage-visual { width: min(225px,60vw); height: min(23dvh,195px); }
  [id="0"] .hero-actions {
    margin-top: 12px;
    margin-bottom: 0!important;
  }
  [id="24"] .download-card { display: block; width: 100%; padding: 24px 20px; border-radius: 24px; }
  [id="24"] .stage-visual { width: min(225px,60vw); height: min(23dvh,195px); margin: 4px auto 12px; }
  .modal {
    align-items: flex-end;
    padding:
      calc(12px + env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }

  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 24px;
  }

  .modal-head {
    top: 0;
    padding: 16px 18px;
  }
  .modal-title-wrap { grid-template-columns: 1fr; gap: 6px; }
  .modal-head h3 { font-size: clamp(20px,6vw,28px); }
  .modal-body { padding: 20px 18px calc(24px + env(safe-area-inset-bottom,0px)); font-size: 16px; line-height: 1.65; }
  .modal-bullet-list { gap: 8px; margin: 6px 0 20px; }
  .modal-bullet-list li { padding-left: 22px; line-height: 1.55; }
  .modal-bullet-list li::before { line-height: 1.95; }
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 1024px) {
  .stage:not([id="0"]):not([id="24"]) .stage-visual { width: min(175px,48vw); height: 140px; }
  .quest-transition { display: none; }
}

@media (max-width: 600px) {

  .stage {
    padding-top: calc(82px + env(safe-area-inset-top,0px));
    padding-bottom: calc(120px + env(safe-area-inset-bottom,0px));
  }

  .stage-title-box,
  .summary-card {
    padding: 15px 17px;
    border-radius: 19px;
  }

  .stage-category { margin-bottom: 7px; font-size: 9px; }
  .num { font-size: clamp(40px,13vw,56px); }
  h2 { font-size: clamp(19px,5.8vw,27px); }

  .summary-card p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.48;
  }

  .quest-transition {
    margin-top: 8px!important;
    font-size: 13px!important;
    line-height: 1.35!important;
  }

  .stage:not([id="0"]):not([id="24"]) .stage-visual {
    width: min(180px,50vw);
    height: min(19dvh,150px);
  }

  [id="0"] .hero-title { font-size: clamp(31px,10vw,46px); }
  [id="0"] .hero-subtitle { font-size: 15px; line-height: 1.42; }
  [id="0"] .quest-intro { font-size: 13px; line-height: 1.45; }

  [id="0"] .stage-visual {
    width: min(180px,50vw);
    height: min(17dvh,135px);
  }

  [id="0"] .hero-actions {
    margin-bottom: 0!important;
  }
}

@media (max-width: 390px), (max-height: 650px) and (max-width: 1024px) {

  .stage {
    padding-top: calc(76px + env(safe-area-inset-top,0px));
    padding-bottom: calc(116px + env(safe-area-inset-bottom,0px));
  }

  .stage-title-box,
  .summary-card { padding: 13px 15px; }

  .summary-card p {
    font-size: 13px;
    line-height: 1.42;
  }

  .stage:not([id="0"]):not([id="24"]) .stage-visual {
    width: min(145px,43vw);
    height: 110px;
  }

  [id="0"] .stage-visual {
    width: min(145px,43vw);
    height: 100px;
  }

  [id="0"] .hero-actions { margin-bottom: 0!important; }
}

/* ==========================================================================
   15. ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .animations-ready .stage *,
  .modal,
  .modal-card {
    opacity: 1!important;
    transform: none!important;
    filter: none!important;
    transition: none!important;
    animation: none!important;
  }
  .modal { visibility: hidden; }
  .modal.open { visibility: visible; }
}

/* L’avatar global est volontairement masqué sur la page d’accueil. */
body.is-home .avatar,
body.is-home .arrows {
  display: none!important;
}

/*
------------------------------------------------------------------------------
REPÈRE DE MAINTENANCE — ADAPTATION DESKTOP
Le bloc suivant est placé en fin de fichier volontairement : il ajuste les
dimensions desktop après toutes les règles générales, sans créer de palier.
------------------------------------------------------------------------------
*/

/* ==========================================================================
   16. ADAPTATION FLUIDE DU DESKTOP
   Cette règle reste active sur tous les écrans desktop. Il n’existe donc plus
   de frontière à 1024 px susceptible de provoquer un saut visuel.

   Entre environ 600 et 1120 px de hauteur, les dimensions progressent
   continuellement. Au-delà, clamp() conserve automatiquement la taille normale.
   ========================================================================== */

@media (min-width: 1025px) {
  html,
  body {
    font-size: clamp(13px, calc(8.75px + 0.708dvh), 16px);
    line-height: clamp(1.45, calc(1.21 + 0.0366dvh), 1.62);
  }

  .stage-content {
    gap: clamp(18px, calc(-14px + 5.7dvh), 45px);
    padding-block:
      calc(clamp(44px, calc(5px + 6.7dvh), 76px) + env(safe-area-inset-top,0px))
      calc(max(136px,clamp(40px, calc(3px + 6.2dvh), 72px)) + env(safe-area-inset-bottom,0px));
  }

  .stage-title-box {
    padding:
      clamp(18px, calc(1px + 3dvh), 32px)
      clamp(20px, calc(1px + 3.25dvh), 35px);
  }

  .summary-card {
    padding:
      clamp(19px, calc(1px + 3.1dvh), 38px)
      clamp(22px, calc(1px + 3.9dvh), 45px);
  }

  .num {
    font-size: clamp(38px, calc(-33px + 11.8dvh), 98px);
  }

  h2 {
    font-size: clamp(19px, calc(-8px + 4.5dvh), 42px);
    line-height: clamp(1.05, calc(.97 + .012dvh), 1.1);
  }

  .summary-card p {
    font-size: clamp(12.5px, calc(3.6px + 1.48dvh), 20px);
    line-height: clamp(1.4, calc(1.18 + .04dvh), 1.7);
  }

  .quest-transition {
    font-size: clamp(12.5px, calc(3.6px + 1.48dvh), 20px)!important;
    line-height: clamp(1.32, calc(1.08 + .038dvh), 1.5)!important;
  }

  .read-more,
  .next-link {
    font-size: clamp(11.5px, calc(5px + 1.1dvh), 15px);
  }

  [id="0"] .hero-inner-editorial {
    padding:
      clamp(24px, calc(-3px + 4.5dvh), 44px)
      clamp(20px, calc(4px + 2.7dvh), 32px)
      clamp(10px, calc(1px + 1.5dvh), 16px);
    transform: none;
  }

  [id="0"] .hero-eyebrow {
    font-size: clamp(9px, calc(5px + .7dvh), 12px);
  }

  [id="0"] .hero-title {
    font-size: clamp(36px, calc(-29px + 10.9dvh), 92px);
    line-height: 1.02;
  }

  [id="0"] .hero-subtitle {
    font-size: clamp(14px, calc(2px + 2dvh), 24px);
    line-height: clamp(1.35, calc(1.05 + .05dvh), 1.6);
  }

  [id="0"] .quest-intro {
    font-size: clamp(12.5px, calc(4px + 1.4dvh), 19px);
    line-height: clamp(1.38, calc(1.08 + .05dvh), 1.7);
  }

  [id="0"] .hero-navigation-hint {
    font-size: clamp(8.5px, calc(4px + .75dvh), 12px);
  }

  [id="0"] .start-btn-landing {
    font-size: clamp(12px, calc(5px + 1.15dvh), 16px);
    padding:
      clamp(10px, calc(3px + 1.2dvh), 18px)
      clamp(20px, calc(5px + 2.6dvh), 36px);
  }

  /*
   * L’illustration d’accueil diminue moins vite que le texte afin de conserver
   * son rôle visuel, même sur une fenêtre de faible hauteur.
   */
  /*
   * Illustration principale de l’accueil.
   * Elle conserve une présence forte et diminue moins vite que le texte.
   */
  [id="0"] .stage-visual {
    width: min(clamp(330px, calc(230px + 10dvh), 420px), 72vw)!important;
    height: clamp(230px, calc(140px + 11dvh), 350px)!important;
  }

  [id="0"] .stage-visual img {
    width: 100%!important;
    height: 100%!important;
    max-width: min(clamp(325px, calc(225px + 10.2dvh), 410px), 72vw)!important;
    max-height: 100%!important;
    object-fit: contain;
  }
}