/* ============================================================
   Le Parcours de Vie — styles (mobile-first, thème sombre neutre)
   Thème facilement modifiable via les variables :root.
   ============================================================ */

:root {
  /* Identité « QUESTION » : bleu nuit + blanc, accent doré discret */
  --bg: #112F47;           /* bleu nuit signature */
  --bg-elev: #163a58;      /* surface légèrement plus claire */
  --bg-card: #1c4369;      /* cartes / tuiles */
  --text: #FFFCFC;         /* blanc cassé */
  --text-muted: #a7bccd;   /* bleu-gris atténué */
  --primary: #c9a25a;      /* accent doré chaud, discret (marine + or) */
  --primary-ink: #112F47;  /* texte sur fond doré */
  --border: rgba(255, 255, 255, .16); /* fines lignes claires */
  --line: rgba(255, 255, 255, .10);   /* motif de lignes diagonales */
  --danger: #e07b76;
  --success: #6fc27f;
  --radius: 14px;
  --gap: 16px;
  --maxw: 620px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: env(safe-area-inset-top, 0px);
  /* Typographies de l'identité (hébergées en local, cf. fonts/fonts.css) */
  --font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Motif signature : fines lignes diagonales, fixes en fond */
  background-image: repeating-linear-gradient(45deg,
    var(--line) 0, var(--line) 1px, transparent 1px, transparent 108px);
  background-attachment: fixed;
}

/* Taille du texte (accessibilité) : appliquée à la racine, les typos en rem suivent */
html.fs-lg { font-size: 112.5%; } /* ~18px */
html.fs-xl { font-size: 125%; }   /* ~20px */

img { max-width: 100%; display: block; }

a { color: var(--primary); }

h1, h2, h3 { font-family: var(--font-title); font-weight: 700; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: 1.35rem; margin: 0 0 .5em; }
h3 { font-size: 1.1rem; margin: 0 0 .4em; }

.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.05rem; color: var(--text-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Pages & transitions ---------------- */
.page {
  position: fixed;
  inset: 0;
  display: none;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
}
.page.mounted { display: block; }
.page.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content.narrow { max-width: 460px; }

/* ---------------- Splash ---------------- */
.splash {
  background: linear-gradient(160deg, #143a58, #0d2438);
}
.splash-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
}
.splash-logo { width: 96px; height: 96px; animation: pulse 2s ease-in-out infinite; }
.splash-title { font-family: var(--font-title); font-size: 1.6rem; letter-spacing: .5px; }
.splash-sub { color: var(--text-muted); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.loader { width: 180px; height: 4px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.loader-bar { width: 40%; height: 100%; background: var(--primary); border-radius: 4px; animation: load 1.4s var(--ease) infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------------- Logo « QUEST|ION » (identité) ---------------- */
.wordmark {
  font-family: var(--font-title); font-weight: 700; line-height: 1;
  letter-spacing: .01em; color: var(--text); white-space: nowrap; display: inline-block;
}
.wordmark .wm-b {              /* « ION » en contour, comme le site */
  color: transparent;
  -webkit-text-stroke: 1.4px var(--text);
  text-stroke: 1.4px var(--text);
}
.wordmark-lg { font-size: 2.7rem; }   /* splash / accueil */

/* Chemin pointillé sinueux (motif « de station en station ») */
.dotpath { display: block; width: 90px; height: auto; margin: 14px auto 0; color: var(--primary); opacity: .85; }
.dotpath path { stroke: currentColor; stroke-width: 4; stroke-dasharray: 0.5 11; }

.home-hero { text-align: center; margin-bottom: 22px; }
.home-hero .wordmark { margin: 0; }
.app-header-title.wordmark { font-size: 1.15rem; }
.app-header-title .wm-b { -webkit-text-stroke-width: 1px; text-stroke-width: 1px; }

/* ---------------- Boutons ---------------- */
.btn {
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid transparent;
  border-radius: 999px;              /* pilule — identité QUESTION */
  padding: 14px 22px;
  min-height: 48px;
  cursor: pointer;
  color: var(--text);
  background: var(--bg-elev);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; margin-top: 10px; }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { box-shadow: 0 10px 26px rgba(201,162,90,.28); }
.btn.secondary { background: transparent; border-color: var(--border); }
.btn.secondary:hover { border-color: var(--primary); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { border-color: var(--primary); }
.btn.danger { background: var(--danger); color: #112F47; }
.btn.link { background: none; border: none; color: var(--text-muted); text-decoration: underline; min-height: auto; padding: 8px; letter-spacing: normal; font-family: var(--font-body); }

.row { display: flex; gap: 12px; margin-top: 18px; }
.row .btn { flex: 1; }

/* ---------------- Accueil : choix ---------------- */
.hero-img { width: 100%; border-radius: var(--radius); margin-bottom: 18px; }
.choice-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 18px 20px;
  border-radius: var(--radius);      /* carte, pas pilule */
  border: 1px solid var(--border);
  background: var(--bg-card);
  letter-spacing: normal;
}
.choice-emoji { font-size: 1.6rem; }
.choice-label { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; }
.choice-desc { font-family: var(--font-body); font-size: .9rem; color: var(--text-muted); font-weight: 400; }
.choice.primary .choice-desc { color: rgba(17,47,71,.72); }

/* ---------------- Formulaires ---------------- */
input[type="email"], input[type="text"], textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
}
input:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Auto-hauteur (ajustée en JS) : pas de scroll interne, pas de poignée de redim. */
textarea { min-height: 96px; resize: none; overflow: hidden; line-height: 1.5; }

.token-input {
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}

.field-error { color: var(--danger); min-height: 1.2em; margin: 6px 0 0; font-size: .9rem; }

.checkbox { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; cursor: pointer; }
.checkbox input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--primary); }

.consent-banner ul { padding-left: 20px; color: var(--text-muted); }

/* ---------------- Étape ---------------- */
.stage-header { margin-bottom: 12px; }
.stage-name { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.stage-name:empty { display: none; }
.progress {
  display: inline-block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 12px; font-size: .85rem; color: var(--text-muted); margin-bottom: 10px;
}
.progress-track { height: 4px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; width: 0; background: var(--primary); transition: width .5s var(--ease); }
/* Repère « étape 3 / 7 » : discret, aligné à droite au-dessus de la barre */
.stage-counter { display: block; text-align: right; margin: 0 0 6px; font-size: .8rem; letter-spacing: .05em; color: var(--text-muted); }
.stage-counter:empty { display: none; }

/* Conteneur à dimensions FIXES (overflow caché) → l'animation de l'image ne bouge rien dehors.
   Ratio via padding-top (compatible partout, contrairement à aspect-ratio sur vieux mobiles). */
.stage-image-wrap {
  position: relative;
  width: 100%; padding-top: 66.6667%; /* ratio 3:2 → hauteur = 2/3 de la largeur */
  border-radius: var(--radius);
  margin-bottom: 18px; overflow: hidden; background: var(--bg-elev);
  animation: reveal .8s var(--ease) forwards;
}
.stage-image {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* « Ken Burns » très discret : zoom lent qui respire (aller-retour) */
  animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes reveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) {
  .stage-image-wrap, .stage-image { animation: none; }
}

.audio-section { text-align: center; margin: 6px 0 20px; position: relative; }
/* Indice vide : on ne réserve pas de place (sinon la zone s'allonge → spinner décentré) */
#audioHint:empty { display: none; }
.play-btn {
  background: var(--primary); color: var(--primary-ink);
  min-width: 200px; font-size: 1.05rem;
}
.play-btn.playing { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.play-btn:hover { transform: scale(1.05); }

.audio-player {
  width: 100%; height: 44px; margin-bottom: 4px;
  color-scheme: dark;            /* lecteur natif en thème sombre : fond sombre, icônes claires */
  border-radius: 10px;
}
/* Chromium (Chrome/Edge) : fond de la barre calé sur le thème */
.audio-player::-webkit-media-controls-enclosure { background-color: var(--bg-elev); border-radius: 10px; }
.audio-player::-webkit-media-controls-panel { background-color: var(--bg-elev); }
.video-player { width: 100%; max-height: 60vh; border-radius: 10px; background: #000; display: block; margin-bottom: 4px; }
/* Superposé (absolute) : n'occupe pas de place → pas de décalage à sa disparition */
.media-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.spinner { display: block; width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bouton de lecture superposé : apparaît si la lecture auto est bloquée (iOS).
   Un tap lance la lecture ; la barre de commande native reste ensuite utilisable. */
.media-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.media-play-btn {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: var(--primary); color: var(--primary-ink);
  font-size: 24px; cursor: pointer; padding: 0 0 0 4px; /* recentre optiquement le ▶ */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  animation: playpulse 1.6s ease-in-out infinite;
}
@keyframes playpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .media-play-btn { animation: none; } }

/* Bandeau « Reprendre » sur l'accueil (visite en cours retrouvée) */
.resume-banner { margin-bottom: 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.resume-banner .muted { margin: 8px 0 0; text-align: center; }

/* Transcription : petit lien discret calé à droite, juste sous les commandes du lecteur */
.transcript { margin: -14px 0 14px; }
.transcript > summary {
  list-style: none; cursor: pointer; user-select: none; text-align: right;
  color: var(--text-muted); font-size: .8rem; padding: 8px 2px; opacity: .75;
}
.transcript > summary:hover,
.transcript[open] > summary { opacity: 1; color: var(--primary); }
.transcript > summary::-webkit-details-marker { display: none; }
.transcript-body {
  white-space: pre-wrap; text-align: left; line-height: 1.7; font-size: .98rem;
  color: var(--text); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin: 6px 0 4px;
}

.listen-hint { text-align: center; color: var(--text-muted); font-size: .95rem; margin: 8px 0 14px; }
.questions-section { margin-bottom: 18px; scroll-margin-top: 72px; } /* marge sous la barre d'en-tête fixe */
.q-counter { color: var(--text-muted); font-size: .82rem; font-weight: 600; margin: 0 0 10px; }
.q-hidden { display: none; }
/* ---------------- Barre d'en-tête + menu (burger) ---------------- */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 65;
  height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.app-header-title {
  font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-btn {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.menu-btn:active { transform: scale(.95); }
/* Le contenu des pages du parcours démarre sous la barre d'en-tête */
#introPage .content, #stagePage .content, #finalPage .content, #conclusionPage .content {
  padding-top: calc(64px + env(safe-area-inset-top));
}
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .5);
  display: flex; justify-content: flex-end;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.menu-overlay.visible { opacity: 1; pointer-events: auto; }
.menu-panel {
  width: min(84%, 320px); height: 100%;
  background: var(--bg-elev); border-left: 1px solid var(--border);
  padding: calc(20px + env(safe-area-inset-top)) 20px 24px;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .4);
  transform: translateX(100%); transition: transform .28s var(--ease);
  overflow-y: auto;
}
.menu-overlay.visible .menu-panel { transform: translateX(0); }
.menu-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; font-size: 1rem;
}
.menu-title { font-size: 1.1rem; margin: 4px 0 18px; }
/* Réglage de la taille du texte */
.menu-fontsize { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border); }
.menu-fs-label { display: block; color: var(--text-muted); font-size: .9rem; margin-bottom: 10px; }
.fs-btns { display: flex; gap: 8px; }
.fs-btn {
  flex: 1; min-height: 48px; line-height: 1; cursor: pointer;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
}
.fs-btn[data-fs="1"] { font-size: 1rem; }
.fs-btn[data-fs="2"] { font-size: 1.3rem; }
.fs-btn[data-fs="3"] { font-size: 1.7rem; }
.fs-btn.active { border-color: var(--primary); color: var(--primary); background: var(--bg-elev); }
.menu-items { display: flex; flex-direction: column; gap: 8px; }
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); font: inherit; text-decoration: none; cursor: pointer;
}
.menu-item:hover { border-color: var(--primary); }

/* ---------------- Transition « déplacement » entre salles ---------------- */
.room-transition {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #163a58, #0d2438);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.room-transition.active { visibility: visible; }
.rt-inner { text-align: center; padding: 24px; }
.rt-walker { display: block; width: min(70%, 420px); height: auto; margin: 0 auto; }
.room-transition.rt-back .rt-walker { transform: scaleX(-1); } /* marche arrière : il marche dans l'autre sens */
.rt-label { margin-top: 16px; font-size: 1.05rem; font-weight: 600; color: var(--text, #f2f2f2); opacity: .92; }
.rt-arrive { margin-top: 30px; min-width: 200px; }
@media (prefers-reduced-motion: reduce) {
  .room-transition { transition: none; }
}

/* Carnet papier : question rappelée en lecture seule (à recopier sur le carnet). */
.paper-prompt { background: var(--bg-card); border-left: 3px solid var(--primary); border-radius: 8px; padding: 14px 16px; }
.paper-q { font-weight: 600; margin: 0 0 8px; }
.paper-hint { color: var(--text-muted); font-size: .85rem; margin: 0; }
.question-block { margin-bottom: 20px; }
.question-block label { display: block; font-weight: 600; margin-bottom: 6px; }
.char-count { text-align: right; color: var(--text-muted); font-size: .82rem; margin: 6px 0 0; }
.save-status { margin-left: 8px; }
.save-status.saved { color: var(--success); }
.save-status.pending { color: var(--primary); }

.navigation { display: flex; gap: 12px; margin-top: 6px; }
.navigation .btn { flex: 1; }
.quit-link { display: block; margin: 14px auto 0; }

/* ---------------- Conclusion ---------------- */
.conclusion-icon { font-size: 3rem; text-align: center; }
.confirm-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--primary-ink); background: var(--primary); font-weight: 700;
}
#conclusionPage .content { text-align: center; }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin: 18px 0; text-align: center;
}
.newsletter-section input { text-align: center; }
.success-msg { color: var(--success); margin-top: 10px; }
.footer-links { display: flex; gap: 18px; justify-content: center; margin-top: 24px; font-size: .85rem; }
.footer-links a { color: var(--text-muted); }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .3s var(--ease);
}
.modal-overlay.visible { opacity: 1; }
.modal {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; max-width: 440px; width: 100%;
  transform: translateY(16px); transition: transform .3s var(--ease);
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.visible .modal { transform: translateY(0); }
.newsletter-section.compact { margin: 16px 0; }

/* ---------------- Divers ---------------- */
.offline-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--danger); color: #fff; text-align: center;
  padding: calc(10px + env(safe-area-inset-bottom)) 12px 10px; font-size: .9rem;
}
.hidden { display: none !important; }

/* ---------------- Responsive ---------------- */
@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  .choice-grid { flex-direction: row; }
  .choice { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}