/*
 * CULTURUN · culturun.com
 *
 * Écrit pour le téléphone d'abord : une colonne, un module par écran,
 * un iPhone en 3D dans chaque module. L'ordinateur n'est qu'un élargissement
 * (@media min-width). La direction artistique de l'app : fond noir OLED,
 * cartes #161616, orange brûlé #D46B4E, Fraunces et Sora. Aucune ressource
 * externe, aucun cookie, aucun traceur.
 */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --fond: #000000;
  --carte: #161616;
  --flottant: #0E0E0E;
  --texte: #F9F7F5;
  --texte-2: rgba(249, 247, 245, 0.66);
  --texte-3: rgba(249, 247, 245, 0.46);
  --filet: rgba(255, 255, 255, 0.08);
  --filet-fort: rgba(255, 255, 255, 0.14);
  --orange: #D46B4E;
  --orange-fond: rgba(212, 107, 78, 0.14);
  --orange-bord: rgba(212, 107, 78, 0.45);
  --papier: #EFE6D2;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largeur: 1140px;
  --gouttiere: 20px;
  /* Mouvement. Entrées et sorties : --courbe (ease-out fort). Déplacements à
     l'écran : --courbe-io. Ce qui se pose (tampon, repère, point) : --ressort,
     le ressort « durée 0,5 s, rebond 0,2 » de la compétence animate, calculé
     en linear() (dépassement 1,5 %, repos à 674 ms). Sans linear(), la
     courbe d'entrée le remplace. */
  --courbe: cubic-bezier(0.23, 1, 0.32, 1);
  --courbe-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ressort: cubic-bezier(0.23, 1, 0.32, 1);
  --ressort-duree: 420ms;
  --ombre-carte: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gouttiere: 32px; } }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ressort: linear(0, 0.0142, 0.0515, 0.1053, 0.1701, 0.2414, 0.3157, 0.3903, 0.463, 0.5323, 0.5973, 0.6571, 0.7115, 0.7604, 0.8037, 0.8416, 0.8746, 0.9028, 0.9267, 0.9467, 0.9632, 0.9767, 0.9874, 0.9959, 1.0024, 1.0072, 1.0107, 1.013, 1.0144, 1.0151, 1.0151, 1.0148, 1.0141, 1.0133, 1.0122, 1.0111, 1.01, 1.0089, 1.0078, 1.0068, 1.0058, 1.0049, 1.0041, 1.0034, 1.0028, 1.0022, 1.0018, 1.0013, 1); --ressort-duree: 674ms; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Halos et tracé du héros débordent volontairement du cadre : on rogne au
   niveau de la page (clip, pas hidden : hidden ferait un conteneur de
   défilement et casserait l'en-tête collant). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) { body { font-size: 17px; } }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
::selection { background: var(--orange); color: #000; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }

.passer { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--texte); color: #000; text-decoration: none; font-weight: 600; }
.passer:focus { top: 12px; }
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ── Typographie ───────────────────────────────────────── */
.surtitre { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
.titre-1 { font-family: var(--serif); font-size: clamp(42px, 11vw, 88px); line-height: 1.0; letter-spacing: -0.028em; }
.titre-2 { font-family: var(--serif); font-size: clamp(32px, 8vw, 56px); line-height: 1.06; letter-spacing: -0.02em; }
.titre-3 { font-family: var(--serif); font-size: clamp(28px, 7vw, 42px); line-height: 1.1; letter-spacing: -0.015em; }
.titre-1 em, .titre-2 em, .titre-3 em { font-style: italic; color: var(--orange); }
.chapo { margin: 18px 0 0; max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); color: var(--texte-2); }
.chapo a { color: var(--orange); }

/* ── Boutons ───────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition-property: transform, background-color, border-color, box-shadow;
  transition-duration: 120ms, 180ms, 180ms, 180ms; transition-timing-function: var(--courbe);
}
.bouton:active { transform: scale(0.97); }
.bouton-plein { background: var(--texte); color: #0E0E0E; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px -10px rgba(249, 247, 245, 0.45); }
.bouton-plein:hover { background: #fff; }
.bouton-contour { border-color: var(--filet-fort); color: var(--texte); background: rgba(255, 255, 255, 0.03); }
.bouton-contour:hover { border-color: rgba(255, 255, 255, 0.28); }
.bouton-bientot { border-color: var(--filet); color: var(--texte-2); background: var(--carte); cursor: default; }
.bouton-bientot:active { transform: none; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 480px) { .boutons .bouton { width: 100%; } }

/* ── En-tête ───────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition-property: background-color, border-color; transition-duration: 240ms; transition-timing-function: var(--courbe); }
.entete.defile { background: rgba(0, 0, 0, 0.72); border-bottom-color: var(--filet); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.logo span { font-weight: 700; font-size: 16px; letter-spacing: 0.08em; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 14px; color: var(--texte-2); text-decoration: none; transition: color 180ms var(--courbe); }
.nav a:hover { color: var(--texte); }
.entete .bouton { min-height: 40px; padding: 0 18px; font-size: 14px; }
.menu-bouton { display: none; width: 44px; height: 44px; border: 1px solid var(--filet-fort); border-radius: 999px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.menu-bouton span, .menu-bouton span::before, .menu-bouton span::after { display: block; width: 16px; height: 1.5px; background: var(--texte); border-radius: 2px; position: relative; content: ''; transition-property: transform, background-color; transition-duration: 200ms; transition-timing-function: var(--courbe); }
.menu-bouton span::before { position: absolute; top: -5px; }
.menu-bouton span::after { position: absolute; top: 5px; }
.menu-ouvert .menu-bouton span { background: transparent; }
.menu-ouvert .menu-bouton span::before { transform: translateY(5px) rotate(45deg); }
.menu-ouvert .menu-bouton span::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 860px) {
  .menu-bouton { display: inline-flex; }
  .entete:not(.entete-simple) .bouton { display: none; }
  .nav { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gouttiere) 24px; background: rgba(0, 0, 0, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--filet); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms var(--courbe), transform 200ms var(--courbe), visibility 0s 200ms; }
  .nav a { padding: 14px 0; font-size: 17px; color: var(--texte); border-bottom: 1px solid var(--filet); }
  .menu-ouvert .nav { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms var(--courbe), transform 200ms var(--courbe); }
}

/* ── iPhone en 3D ──────────────────────────────────────
 * Un iPhone 16 Pro en CSS, proportionnel à --w. Il vit dans une .scene
 * (perspective) et prend une pose : de face, tourné à gauche ou à droite.
 * Au défilement, site.js incline chaque scène selon sa place à l'écran
 * (voir « incliner ») : les téléphones bougent avec le pouce.
 */
.scene { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1400px; isolation: isolate; }
.iphone {
  --w: 300px; --ry: 0deg; --rz: 0deg;
  position: relative; width: var(--w); max-width: 100%; aspect-ratio: 300 / 614;
  padding: calc(var(--w) * 0.028); border-radius: calc(var(--w) * 0.19);
  background: linear-gradient(160deg, #6a6a6e 0%, #2b2b2e 18%, #3a3a3e 42%, #232326 60%, #4a4a4e 86%, #76767a 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 0 1px rgba(255, 255, 255, 0.14) inset, 0 -1px 0 1px rgba(0, 0, 0, 0.5) inset, 0 60px 100px -30px rgba(0, 0, 0, 0.9), 0 30px 60px -30px rgba(212, 107, 78, 0.3);
  transform-style: preserve-3d;
  transform: rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform 600ms var(--courbe);
}
.iphone::before { content: ''; position: absolute; inset: calc(var(--w) * 0.022); border-radius: calc(var(--w) * 0.168); background: #060606; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset; }
.iphone .ecran { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: calc(var(--w) * 0.14); overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
.iphone .ecran img, .iphone .ecran video { width: 100%; height: 100%; object-fit: cover; }
.iphone .ecran::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%); }
.iphone .ile { position: absolute; z-index: 2; top: calc(var(--w) * 0.062); left: 50%; width: calc(var(--w) * 0.30); height: calc(var(--w) * 0.088); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); }
.iphone .ile::after { content: ''; position: absolute; right: calc(var(--w) * 0.022); top: 50%; width: calc(var(--w) * 0.038); height: calc(var(--w) * 0.038); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2f3a, #0a0c10 60%); }
.iphone .cote { position: absolute; width: calc(var(--w) * 0.012); border-radius: 2px; background: linear-gradient(90deg, #4a4a4e, #2a2a2d); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.iphone .cote-action { left: calc(var(--w) * -0.012); top: calc(var(--w) * 0.36); height: calc(var(--w) * 0.06); }
.iphone .cote-vol1 { left: calc(var(--w) * -0.012); top: calc(var(--w) * 0.48); height: calc(var(--w) * 0.11); }
.iphone .cote-vol2 { left: calc(var(--w) * -0.012); top: calc(var(--w) * 0.62); height: calc(var(--w) * 0.11); }
.iphone .cote-marche { right: calc(var(--w) * -0.012); top: calc(var(--w) * 0.52); height: calc(var(--w) * 0.17); background: linear-gradient(270deg, #4a4a4e, #2a2a2d); }
.pose-gauche { --ry: 24deg; --rz: -4deg; }
.pose-droite { --ry: -24deg; --rz: 4deg; }
.pose-face { --ry: -8deg; --rz: -1deg; }
/* Le duo : un second téléphone derrière, décalé, plus petit. */
.duo { position: relative; }
.duo .iphone { position: absolute; top: 0; }
.duo .iphone:first-child { --w: var(--base); z-index: 1; }
.duo .iphone + .iphone { --w: calc(var(--base) * 0.82); top: auto; bottom: 0; opacity: 0.92; }
.duo-droite .iphone:first-child { left: 0; }
.duo-droite .iphone + .iphone { right: 0; --ry: -26deg; --rz: 6deg; }
.duo-gauche .iphone:first-child { right: 0; }
.duo-gauche .iphone + .iphone { left: 0; --ry: 26deg; --rz: -6deg; }
.halo { position: absolute; inset: -14% -30%; z-index: -1; background: radial-gradient(closest-side, rgba(212, 107, 78, 0.30), rgba(212, 107, 78, 0.08) 55%, transparent 75%); filter: blur(10px); pointer-events: none; }

/* ── Héros ─────────────────────────────────────────────── */
.heros { position: relative; padding: 28px 0 56px; overflow: hidden; }
.heros-texte > * { opacity: 0; transform: translateY(14px); animation: paraitre 560ms var(--courbe) forwards; }
.heros-texte > :nth-child(2) { animation-delay: 50ms; }
.heros-texte > :nth-child(3) { animation-delay: 100ms; }
.heros-texte > :nth-child(4) { animation-delay: 150ms; }
.heros-texte > :nth-child(5) { animation-delay: 200ms; }
@keyframes paraitre { to { opacity: 1; transform: none; } }
.reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.reperes li { display: flex; flex-direction: column; }
.reperes strong { font-family: var(--serif); font-size: clamp(24px, 6.4vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.reperes span { font-size: 12px; color: var(--texte-3); line-height: 1.3; }
.heros-visuel { margin-top: 48px; }
.heros-trace { position: absolute; z-index: 0; width: 150%; max-width: none; left: -25%; top: 50%; transform: translateY(-50%) rotate(-6deg); opacity: 0.9; pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%); }
.heros-visuel .iphone { --w: min(270px, 70vw); z-index: 1; animation: arriver 760ms var(--courbe) 160ms both; }
@keyframes arriver { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 900px) {
  .heros { padding: 72px 0 110px; }
  .heros .conteneur { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 80px; align-items: center; }
  .heros-visuel { margin-top: 0; min-height: 560px; }
  .heros-visuel .iphone { --w: 320px; }
  .heros-trace { width: 140%; left: -28%; }
  .reperes { display: flex; gap: 12px 32px; margin-top: 44px; }
}

/* ── Bandeau des montres ───────────────────────────────── */
.montres { padding: 28px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.montres .conteneur { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.montres p { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-3); font-weight: 600; text-align: center; }
.montres ul { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 6vw, 56px); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.montres img { height: auto; opacity: 0.7; }
@media (min-width: 700px) { .montres .conteneur { flex-direction: row; justify-content: space-between; } }

/* ── Sections et modules ───────────────────────────────── */
.section { padding: 72px 0; }
@media (min-width: 900px) { .section { padding: 130px 0; } }
.section-entete { max-width: 760px; margin-bottom: 40px; }
.section-entete.centre { margin-left: auto; margin-right: auto; text-align: center; }
.section-entete.centre .chapo { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .section-entete { margin-bottom: 72px; } }

/* Un module = un argument + son téléphone en 3D. Sur téléphone, une colonne ;
   sur ordinateur, texte et visuel côte à côte, en alternance. */
.module { padding: 56px 0; }
.module + .module { border-top: 1px solid var(--filet); }
.module .scene { margin-top: 36px; min-height: 440px; }
.module .iphone { --base: min(250px, 64vw); --w: var(--base); }
.module .duo { width: min(340px, 86vw); height: 470px; }
.module-texte p { margin: 14px 0 0; max-width: 30em; color: var(--texte-2); }
.module .module-texte .goutte { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: var(--orange); box-shadow: 0 6px 16px -6px rgba(212, 107, 78, 0.8); }
.module .module-texte .goutte::before { content: attr(data-n); display: block; transform: rotate(45deg); font-size: 14px; font-weight: 600; color: #0E0E0E; }
@media (min-width: 900px) {
  .module { padding: 96px 0; }
  .module .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .module:nth-child(even) .module-texte { order: 2; }
  .module .scene { margin-top: 0; min-height: 560px; }
  .module .iphone { --base: 280px; }
  .module .duo { width: 400px; height: 560px; }
}

/* Rubans de titres de récits */
.recits { overflow: hidden; }
.ruban { display: flex; gap: 12px; width: max-content; animation: defiler 70s linear infinite; animation-play-state: paused; }
.ruban + .ruban { margin-top: 12px; animation-direction: reverse; animation-duration: 80s; }
.rubans.en-vue .ruban { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) { .rubans.en-vue:hover .ruban { animation-play-state: paused; } }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.recit { position: relative; flex: 0 0 auto; width: 280px; padding: 20px 20px 18px 56px; border-radius: 20px; background: var(--carte); box-shadow: var(--ombre-carte); }
.recit::before { content: ''; position: absolute; left: 18px; top: 23px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-fond); box-shadow: 0 0 0 1px var(--orange-bord) inset; }
.recit::after { content: ''; position: absolute; left: 27px; top: 29px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--orange); }
.recit q { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.25; quotes: '« ' ' »'; text-wrap: balance; }
.recit span { display: block; margin-top: 12px; font-size: 13px; color: var(--texte-3); }
.sources { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; margin: 36px auto 0; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.02); box-shadow: 0 0 0 1px var(--filet) inset; }
.sources svg { flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.sources p { margin: 0; font-size: 15px; color: var(--texte-2); }
.sources strong { color: var(--texte); font-weight: 600; }

/* Récits audio */
/* Sur téléphone, un carrousel : une carte par écran, qui s'accroche au
   centre ; sur ordinateur, trois colonnes. Les photos sont en 9:16, le
   format d'un écran de téléphone. */
.recits-audio { display: flex; gap: 12px; margin: 0 calc(var(--gouttiere) * -1); padding: 4px var(--gouttiere) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recits-audio::-webkit-scrollbar { display: none; }
.recits-audio > .recit-audio { flex: 0 0 min(82vw, 360px); scroll-snap-align: center; }
.recits-audio::after { content: ''; flex: 0 0 calc(var(--gouttiere) - 12px); }
.recit-audio { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--carte); box-shadow: var(--ombre-carte); overflow: hidden; }
.recit-photo { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.recit-corps { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.recit-lieu { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.recit-titre { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.recit-titre a { text-decoration: none; }
.lecteur { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.lecteur-bouton { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--texte); color: #0E0E0E; cursor: pointer; transition-property: transform, background-color; transition-duration: 120ms, 180ms; transition-timing-function: var(--courbe); }
.lecteur-bouton:active { transform: scale(0.96); }
.lecteur-bouton svg { position: absolute; inset: 0; margin: auto; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.lecteur-bouton .ico-lire { transform: translateX(1px); }
.lecteur-bouton .ico-pause { opacity: 0; transform: scale(0.4); }
.lecteur-bouton[aria-pressed='true'] { background: var(--orange); }
.lecteur-bouton[aria-pressed='true'] .ico-lire { opacity: 0; transform: scale(0.4); }
.lecteur-bouton[aria-pressed='true'] .ico-pause { opacity: 1; transform: none; }
.lecteur-piste { position: relative; flex: 1; height: 28px; cursor: pointer; }
.lecteur-piste::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.lecteur-avance { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.lecteur-temps { flex: 0 0 auto; font-size: 13px; color: var(--texte-3); }
.recit-sources { font-size: 13px !important; color: var(--texte-3) !important; }
.recit-sources a { color: var(--texte-2); }
.recits-suite { margin: 28px 0 0; text-align: center; }
@media (min-width: 700px) {
  .recits-audio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .recits-audio > .recit-audio { flex: none; }
  .recits-audio::after { display: none; }
}

/* La page d'un récit */
.page-recit { padding: 32px 0 80px; }
.page-recit .conteneur { max-width: 760px; }
.fil { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--texte-3); }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil li + li::before { content: '›'; margin-right: 6px; }
.page-recit h1 { font-family: var(--serif); font-size: clamp(34px, 8vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.page-recit .recit-photo { border-radius: 20px; margin: 24px 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
@media (min-width: 700px) { .page-recit .recit-photo { aspect-ratio: 3 / 2; } }
.page-recit .lecteur { margin-top: 24px; }
.recit-transcription { margin-top: 28px; }
.recit-transcription p { margin: 12px 0 0; font-size: 17px; line-height: 1.7; }
.page-recit h2 { margin: 36px 0 10px; font-size: 20px; font-weight: 600; }
.page-recit .recit-sources { margin-top: 10px; }
.recit-autres { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; }
.recit-autres a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-carte); text-decoration: none; }
.recit-autres span { color: var(--texte-3); font-size: 13px; }
.page-recit .appel { margin-top: 56px; padding: 24px; border-radius: 24px; background: var(--carte); box-shadow: var(--ombre-carte); }
.page-recit .appel p { margin: 0 0 16px; color: var(--texte-2); }
@media (min-width: 700px) { .recit-autres { grid-template-columns: 1fr 1fr; } }
.page-recits { padding: 32px 0 80px; }
.recits-page { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; overflow: visible; }
.recits-page > .recit-audio { flex: none; }
.recits-page::after { display: none; }
.recits-credits, .recits-credits-liste { font-size: 13px; color: var(--texte-3); }
.recits-credits { margin: 32px 0 6px; }
.recits-credits-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.recits-credits-liste a { color: var(--texte-3); }
.recits-appel { margin-top: 72px; text-align: center; }
.recits-appel .chapo { margin-left: auto; margin-right: auto; }
.recits-appel .boutons { justify-content: center; }
@media (min-width: 700px) {
  .recits-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .recits-page > .recit-audio { display: grid; grid-template-columns: 38% 1fr; }
  .recits-page .recit-photo { height: 0; min-height: 100%; aspect-ratio: auto; }
}

/* Manifeste */
.manifeste { position: relative; overflow: hidden; padding: 110px 0; text-align: center; isolation: isolate; }
@media (min-width: 900px) { .manifeste { padding: 200px 0; } }
.manifeste video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.5; filter: saturate(0.9); }
.manifeste::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.92) 75%), linear-gradient(to bottom, #000, transparent 20%, transparent 80%, #000); }
.manifeste .titre-2 { max-width: 15em; margin: 0 auto; }
.manifeste .boutons { justify-content: center; }

/* Le Pass */
.choix-public { display: flex; padding: 4px; margin: 0 0 28px; border-radius: 999px; background: var(--carte); box-shadow: var(--ombre-carte); }
.choix-public button { flex: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--texte-2); font-size: 14px; font-weight: 600; cursor: pointer; transition-property: background-color, color, transform; transition-duration: 180ms, 180ms, 120ms; transition-timing-function: var(--courbe); }
.choix-public button:active { transform: scale(0.97); }
.choix-public button[aria-pressed='true'] { background: var(--orange); color: #0E0E0E; }
@media (min-width: 700px) { .choix-public { display: inline-flex; margin-bottom: 40px; } .choix-public button { flex: 0 0 auto; padding: 0 20px; } }
.offres { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
.offre { display: flex; flex-direction: column; padding: 26px 22px 24px; border-radius: 24px; background: var(--carte); box-shadow: var(--ombre-carte); }
.offre.vedette { background: linear-gradient(180deg, rgba(212, 107, 78, 0.12), rgba(212, 107, 78, 0.02) 40%), var(--carte); box-shadow: var(--ombre-carte), 0 0 0 1px var(--orange-bord) inset, 0 24px 60px -24px rgba(212, 107, 78, 0.45); }
.offre-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offre-nom { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.pastille { padding: 4px 10px; border-radius: 999px; background: var(--orange-fond); color: var(--orange); font-size: 12px; font-weight: 600; }
.prix { margin: 14px 0 0; font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.prix small { font-family: var(--sans); font-size: 15px; color: var(--texte-2); letter-spacing: 0; }
.prix-note { margin: 8px 0 0; font-size: 14px; color: var(--texte-3); }
.offre ul { flex: 1; margin: 20px 0 0; padding: 0; list-style: none; }
.offre li { position: relative; padding: 0 0 10px 28px; font-size: 15px; color: var(--texte-2); line-height: 1.5; }
.offre li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.offres [data-public] { display: none; }
.pass-paris .offres [data-public='paris'], .pass-sejour .offres [data-public='sejour'] { display: flex; }
.pass-precision { margin: 24px 0 0; font-size: 13px; color: var(--texte-3); max-width: 46em; }
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* Questions */
.faq details { border-bottom: 1px solid var(--filet); }
.faq details:first-child { border-top: 1px solid var(--filet); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: 0 0 auto; width: 12px; height: 12px; border-right: 1.5px solid var(--texte-2); border-bottom: 1.5px solid var(--texte-2); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--courbe); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { margin: 0 0 20px; max-width: 38em; color: var(--texte-2); }
.faq a { color: var(--orange); }
@media (min-width: 900px) { .questions .conteneur { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 96px; align-items: start; } }

/* Appel final : trois téléphones en éventail, en 3D */
.final { text-align: center; padding-bottom: 100px; overflow: hidden; }
/* Le cadre rogne ce qui dépasse : le fondu du bas cache la coupe, et les
   téléphones ne recouvrent plus le titre qui suit. Leur largeur suit la
   hauteur du cadre (un iPhone fait 2,05 fois sa largeur). */
.eventail { --h: clamp(280px, 40vw, 440px); position: relative; display: flex; justify-content: center; align-items: flex-end; height: var(--h); margin: 0 auto 40px; isolation: isolate; perspective: 1400px; overflow: hidden; }
.eventail .iphone { --w: calc(var(--h) * 0.5); position: absolute; bottom: -18%; }
.eventail .iphone:nth-child(1) { --ry: 26deg; --rz: -8deg; translate: -78% 8%; z-index: 1; }
.eventail .iphone:nth-child(2) { translate: 0 -6%; z-index: 2; }
.eventail .iphone:nth-child(3) { --ry: -26deg; --rz: 8deg; translate: 78% 8%; z-index: 1; }
.eventail::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, var(--fond), transparent); z-index: 3; pointer-events: none; }
.final .boutons { justify-content: center; }
.final .chapo { margin-left: auto; margin-right: auto; }

/* Pied de page */
.pied { padding: 56px 0 32px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--texte-2); }
.pied-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pied-marque { grid-column: 1 / -1; }
.pied h2 { margin: 0 0 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-3); }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: 10px; }
.pied a { text-decoration: none; transition: color 180ms var(--courbe); }
.pied a:hover { color: var(--texte); }
.pied-marque p { max-width: 24em; margin: 14px 0 0; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--texte-3); }
@media (min-width: 760px) { .pied-grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } .pied-marque { grid-column: auto; } }

/* Apparitions au défilement, en blocs décalés */
.apparait { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--courbe), transform 520ms var(--courbe); }
.apparait.vu { opacity: 1; transform: none; }
.apparait-groupe > * { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--courbe), transform 520ms var(--courbe); }
.apparait-groupe.vu > * { opacity: 1; transform: none; }
.apparait-groupe.vu > :nth-child(2) { transition-delay: 50ms; }
.apparait-groupe.vu > :nth-child(3) { transition-delay: 100ms; }
.apparait-groupe.vu > :nth-child(4) { transition-delay: 150ms; }

/* L'inclinaison des téléphones au défilement, menée par le navigateur (hors du
   fil principal) là où il sait le faire. Ailleurs, site.js écrit la même
   rotation sur chaque téléphone. */
@keyframes incliner {
  from { transform: rotateX(10deg) rotateY(var(--ry)) rotateZ(var(--rz)); }
  to { transform: rotateX(-10deg) rotateY(var(--ry)) rotateZ(var(--rz)); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scene .iphone { animation: incliner linear both; animation-timeline: view(); animation-range: cover; transition: none; }
    .heros-visuel .iphone { animation: arriver 760ms var(--courbe) 160ms both, incliner linear both; animation-timeline: auto, view(); animation-range: normal, cover; }
  }
}

/* Pages de texte */
.page-texte { padding: 40px 0 80px; }
.page-texte .conteneur { max-width: 760px; }
.page-texte h1 { font-family: var(--serif); font-size: clamp(36px, 8vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.page-texte .maj { margin: 14px 0 36px; color: var(--texte-3); font-size: 14px; }
.page-texte h2 { margin: 40px 0 12px; font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.page-texte p, .page-texte li { color: var(--texte-2); }
.page-texte ul { padding-left: 20px; }
.page-texte li { margin-bottom: 8px; }
.page-texte a { color: var(--orange); }
.page-texte a.bouton { color: #0E0E0E; text-decoration: none; }
.page-texte strong { color: var(--texte); font-weight: 600; }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .apparait, .apparait-groupe > *, .heros-texte > * { opacity: 1; transform: none; }
  .ruban { flex-wrap: wrap; width: auto; justify-content: center; animation: none; }
  .ruban [aria-hidden='true'] { display: none; }
  .ruban + .ruban { display: none; }
}

/* ── Hiérarchie v2 : fonctions, schéma animé, passeport seul ─────────── */

/* Ce qui vous accompagne : des rangées compactes sur téléphone, une grille
   de trois colonnes sur ordinateur. */
.fonctions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fonction { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: 22px; background: var(--carte); box-shadow: var(--ombre-carte); }
.fonction-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--orange-fond); color: var(--orange); box-shadow: 0 0 0 1px var(--orange-bord) inset; }
.fonction h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fonction p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--texte-2); }
.fonction .pastille { display: inline-block; margin-top: 12px; }
.fonction-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.fonction-logos img { height: auto; opacity: 0.75; }
/* À partir de la tablette, deux bandeaux pleine largeur : le schéma à gauche
   de son texte, puis le poignet en une ligne, ses logos à droite. */
@media (min-width: 700px) {
  .fonctions { gap: 16px; }
  .fonction:not(.fonction-illustree) { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 'ico titre logos' 'ico texte logos'; column-gap: 18px; row-gap: 0; align-items: center; padding: 24px 28px; }
  .fonction:not(.fonction-illustree) > div { display: contents; }
  .fonction:not(.fonction-illustree) .fonction-ico { grid-area: ico; align-self: start; }
  .fonction:not(.fonction-illustree) h3 { grid-area: titre; }
  .fonction:not(.fonction-illustree) p { grid-area: texte; }
  .fonction:not(.fonction-illustree) .fonction-logos { grid-area: logos; margin: 0 0 0 12px; flex-wrap: nowrap; }
}

/* La démonstration du déclenchement, fidèle à l'app : le lieu se débloque dès
   l'entrée dans sa zone, le récit part une demi-seconde après et va au bout,
   même quand le coureur est reparti. site.js fait avancer le coureur et pose
   data-phase (approche, debloque, recit, suite) ; le reste est en CSS. Un seul
   point fort à la fois : la pastille en haut, le lieu sur la carte. */
.demo-bloc { width: min(100%, 400px); }
.demo { margin: 0; }
.module .scene:has(.demo) { min-height: 0; }
.demo-cadre { position: relative; aspect-ratio: 10 / 11; border-radius: 30px; overflow: hidden; background: #0A0A0A; perspective: 760px; perspective-origin: 50% 20%; box-shadow: var(--ombre-carte), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
/* L'horizon se fond dans le noir : la pastille s'y pose. */
.demo-cadre::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, #0A0A0A 0%, rgba(10, 10, 10, 0.86) 20%, rgba(10, 10, 10, 0) 48%), radial-gradient(120% 60% at 50% 110%, rgba(212, 107, 78, 0.10), transparent 70%); }
.demo-plan { position: absolute; left: 50%; top: 58%; width: 186%; aspect-ratio: 1; margin: -93% 0 0 -93%; transform: rotateX(54deg) rotateZ(-16deg); transform-style: preserve-3d; transition: opacity 320ms var(--courbe); }
/* La vraie carte est une image à part, sous le schéma animé : elle n'est pas
   redessinée à chaque image pendant que le coureur avance. */
.demo-plan > .demo-fond, .demo-plan > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo[data-fondu] .demo-plan { opacity: 0; }
/* La zone : pointillée à l'approche, elle s'allume d'un coup au déblocage, puis
   reste dorée : l'or, dans l'app, dit qu'un récit attend ou joue. */
.demo-zone { fill: #D6A84A; fill-opacity: 0.07; stroke: #D6A84A; stroke-opacity: 0.6; stroke-width: 1.6; stroke-dasharray: 4 6; transition: fill-opacity 600ms var(--courbe), stroke-opacity 400ms var(--courbe); }
.demo[data-phase='debloque'] .demo-zone { fill-opacity: 0.3; stroke-opacity: 1; transition-duration: 140ms; }
.demo[data-phase='recit'] .demo-zone, .demo[data-phase='suite'] .demo-zone { fill-opacity: 0.14; stroke-opacity: 0.9; }
/* Une seule onde, au moment du déblocage. */
.demo-onde { fill: none; stroke: #D6A84A; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.demo[data-phase='debloque'] .demo-onde, .demo[data-phase='recit'] .demo-onde { animation: demo-onde 900ms var(--courbe) both; }
@keyframes demo-onde { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.demo-zone-texte { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: #D6A84A; fill-opacity: 0.85; }
.demo-prevue { fill: none; stroke: #D46B4E; stroke-opacity: 0.32; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
/* La lueur est un second trait large et pâle : pas de filtre à recalculer à chaque image. */
.demo-lueur { fill: none; stroke: #D46B4E; stroke-opacity: 0.22; stroke-width: 13; stroke-linecap: round; }
.demo-faite { fill: none; stroke: #D46B4E; stroke-width: 5; stroke-linecap: round; }
/* Le repère du lieu se tient debout sur le plan incliné ; il passe à l'or au déblocage. */
.demo-pin { position: absolute; left: 57.14%; top: 46.07%; transform: translate(-50%, -100%) rotateZ(16deg) rotateX(-54deg); transform-origin: 50% 100%; }
.demo-pin svg { display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); transform-origin: 50% 100%; }
.demo-pin-corps { fill: #0E0E0E; stroke: #F9F7F5; stroke-width: 2; transition: fill 300ms var(--courbe), stroke 300ms var(--courbe); }
.demo-pin-coeur { fill: #D6A84A; transition: fill 300ms var(--courbe); }
.demo[data-phase='debloque'] .demo-pin-corps, .demo[data-phase='recit'] .demo-pin-corps, .demo[data-phase='suite'] .demo-pin-corps { fill: #D6A84A; stroke: #D6A84A; }
.demo[data-phase='debloque'] .demo-pin-coeur, .demo[data-phase='recit'] .demo-pin-coeur, .demo[data-phase='suite'] .demo-pin-coeur { fill: #0E0E0E; }

/* La pastille : compteur, déblocage, puis le lecteur de l'app (le lieu, le
   temps restant, une barre sur toute la durée du récit). Le fond est une
   couche sans enfant qui change de taille sur le ressort ; le contenu, lui,
   ne fait que glisser (transform) : rien ne se remet en page. */
.demo-ile { position: absolute; z-index: 3; top: 16px; left: 50%; width: 292px; height: 76px; margin-left: -146px; pointer-events: none; }
.demo-ile-fond { position: absolute; top: 0; left: 50%; width: 236px; height: 52px; transform: translateX(-50%); border-radius: 26px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -10px rgba(0, 0, 0, 0.9); transition: width var(--ressort-duree) var(--ressort), height var(--ressort-duree) var(--ressort); }
.demo[data-phase='recit'] .demo-ile-fond, .demo[data-phase='suite'] .demo-ile-fond { width: 292px; height: 76px; }
.demo-ile-contenu { position: absolute; left: 36px; top: 8px; display: flex; align-items: center; gap: 12px; transition: transform var(--ressort-duree) var(--ressort); }
.demo[data-phase='recit'] .demo-ile-contenu, .demo[data-phase='suite'] .demo-ile-contenu { transform: translate(-22px, 2px); }
.demo-ico { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: var(--texte); transition: background-color 300ms var(--courbe), color 300ms var(--courbe); }
.demo-ico > * { position: absolute; inset: 0; margin: auto; transition: opacity 200ms var(--courbe), transform 200ms var(--courbe); }
.demo-ico .ico-onde, .demo-ico .ico-ok { opacity: 0; transform: scale(0.6); }
.demo[data-phase='debloque'] .demo-ico { background: #D6A84A; color: #0E0E0E; }
.demo[data-phase='debloque'] .ico-pin, .demo[data-phase='recit'] .ico-pin, .demo[data-phase='suite'] .ico-pin { opacity: 0; transform: scale(0.6); }
.demo[data-phase='debloque'] .ico-ok { opacity: 1; transform: none; }
.demo[data-phase='recit'] .demo-ico, .demo[data-phase='suite'] .demo-ico { background: var(--orange); color: #0E0E0E; }
.demo[data-phase='recit'] .ico-onde, .demo[data-phase='suite'] .ico-onde { opacity: 1; transform: none; }
.ico-onde { display: flex; align-items: center; justify-content: center; gap: 2.5px; width: 20px; height: 18px; }
.ico-onde i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(0.4); }
.demo[data-phase='recit'] .ico-onde i, .demo[data-phase='suite'] .ico-onde i { animation: demo-barre 0.8s ease-in-out infinite; }
.ico-onde i:nth-child(2) { animation-duration: 0.6s; animation-delay: -0.2s; }
.ico-onde i:nth-child(3) { animation-duration: 0.9s; animation-delay: -0.5s; }
.ico-onde i:nth-child(4) { animation-duration: 0.7s; animation-delay: -0.1s; }
@keyframes demo-barre { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.demo-textes { display: flex; flex-direction: column; width: 164px; line-height: 1.25; }
.demo-l1 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-l2 { font-size: 14px; font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-barre { position: absolute; left: 16px; right: 16px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; opacity: 0; transition: opacity 200ms var(--courbe); }
.demo[data-phase='recit'] .demo-barre, .demo[data-phase='suite'] .demo-barre { opacity: 1; transition-delay: 160ms; }
.demo-barre i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }

/* La légende : trois temps, celui en cours allumé. */
.demo-legende { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.demo-legende span { position: relative; padding: 7px 11px 7px 24px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--texte-3); background: transparent; box-shadow: 0 0 0 1px var(--filet) inset; transition: color 240ms var(--courbe), background-color 240ms var(--courbe), box-shadow 240ms var(--courbe); white-space: nowrap; }
.demo-legende span::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.demo[data-phase='approche'] [data-etape='approche'], .demo[data-phase='debloque'] [data-etape='recit'], .demo[data-phase='recit'] [data-etape='recit'], .demo[data-phase='suite'] [data-etape='suite'] { color: var(--texte); background: var(--carte); box-shadow: 0 0 0 1px var(--orange-bord) inset; }
.demo[data-phase='approche'] [data-etape='approche']::before, .demo[data-phase='debloque'] [data-etape='recit']::before, .demo[data-phase='recit'] [data-etape='recit']::before, .demo[data-phase='suite'] [data-etape='suite']::before { background: var(--orange); opacity: 1; }

/* Le son, sur demande : le vrai récit part avec la démonstration. */
.demo-son { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; min-height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px var(--filet-fort) inset; color: var(--texte); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 120ms var(--courbe), background-color 180ms ease, color 180ms ease; }
.demo-son[hidden] { display: none; }
.demo-son:active { transform: scale(0.97); }
.demo-son .son-on, .demo-son[aria-pressed='true'] .son-off { display: none; }
.demo-son[aria-pressed='true'] .son-on { display: inline; }
.demo-son[aria-pressed='true'] { background: var(--orange); color: #0E0E0E; box-shadow: none; }
.demo-son .son-onde { opacity: 0.35; transition: opacity 180ms ease; }
.demo-son[aria-pressed='true'] .son-onde { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .demo-son:hover { background: rgba(255, 255, 255, 0.08); } .demo-son[aria-pressed='true']:hover { background: var(--orange); } }

/* Le passeport, hors de la série des étapes. */
.module-seul { border-top: 1px solid var(--filet); }
.module-seul .module-texte > p:not(.surtitre) { margin: 14px 0 0; max-width: 30em; color: var(--texte-2); }
/* .module-texte p donnait au surtitre le gris et la marge du corps. */
.module-seul .module-texte > .surtitre { margin: 0 0 14px; max-width: none; color: var(--orange); }

/* ── Démonstrations en mouvement ───────────────────────────────────────
 * Quatre schémas qui expliquent, chacun tenu par un attribut que site.js
 * change (l'offre, l'ambiance, le palier, l'étape) : le mouvement est fait
 * de transitions, donc reprenable en cours de route. Seuls transform et
 * opacity bougent (plus le tracé d'un trait, qui n'a pas d'autre moyen).
 * Entrées et sorties sur --courbe, déplacements à l'écran sur --courbe-io,
 * tracés à vitesse constante. Rien ne part de scale(0).
 */

/* La bascule : deux ou trois choix, le choix en cours révélé par rognage. */
.bascule { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px var(--filet) inset; }
.bascule button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--texte-2); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform 120ms var(--courbe); }
.bascule button:active { transform: scale(0.97); }
.bascule:not(.bascule-prete) button[aria-pressed='true'] { background: var(--texte); color: #0E0E0E; }
.bascule-actif { position: absolute; inset: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 999px; background: var(--texte); color: #0E0E0E; pointer-events: none; transition: clip-path 280ms var(--courbe-io); }
.bascule-actif span { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Les trois ambiances : même départ, même distance. site.js dessine le tracé
   à allure constante (même longueur, même temps), allume chaque lieu quand
   le trait y passe et fait monter les compteurs ; l'ambiance d'avant reste en
   filigrane le temps de comparer. */
.amb { margin: 0; width: min(100%, 400px); }
.module .scene:has(.amb) { min-height: 0; }
.amb-cadre { position: relative; border-radius: 30px; overflow: hidden; background: #101010; box-shadow: var(--ombre-carte), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
.amb-cadre svg { position: relative; display: block; width: 100%; height: auto; }
/* La vraie carte (OpenStreetMap) est une image à part, sous le schéma animé. */
.amb-cadre > .amb-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.amb-lieux circle { fill: rgba(249, 247, 245, 0.24); }
.amb-boucle { opacity: 0; transition: opacity 260ms var(--courbe); }
.amb-boucle.trace { opacity: 1; }
.amb-boucle.fantome { opacity: 0.2; transition-duration: 160ms; }
.amb-boucle path { fill: none; stroke: var(--orange); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.amb-boucle circle { fill: var(--orange); stroke: #111; stroke-width: 2.2; opacity: 0; transform: scale(0.9); transform-box: fill-box; transform-origin: center; transition: opacity 160ms var(--courbe), transform var(--ressort-duree) var(--ressort); }
.amb-boucle circle.allume { opacity: 1; transform: none; }
.amb-tete { fill: var(--texte); stroke: var(--orange); stroke-width: 3; opacity: 0; transition: opacity 160ms var(--courbe); }
.amb-tete.visible { opacity: 1; }
.amb-depart circle:first-child { fill: rgba(249, 247, 245, 0.16); }
.amb-depart circle:last-child { fill: var(--texte); stroke: var(--orange); stroke-width: 3; }
.amb-stats { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; margin: 0; }
.amb-stats div { padding: 8px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.74); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.amb-stats dt { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-3); line-height: 1.3; }
.amb-stats dd { margin: 2px 0 0; min-width: 4.6em; font-size: 15px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.amb .bascule { margin-top: 14px; }
.amb-phrase { display: grid; margin-top: 12px; text-align: center; font-size: 14px; color: var(--texte-2); }
.amb-phrase span { grid-area: 1 / 1; opacity: 0; transform: translateY(5px); transition: opacity 140ms var(--courbe), transform 140ms var(--courbe); }
.amb[data-amb='vif'] [data-amb-vue='vif'], .amb[data-amb='flanerie'] [data-amb-vue='flanerie'], .amb[data-amb='odyssee'] [data-amb-vue='odyssee'] { opacity: 1; transform: none; transition: opacity 260ms var(--courbe) 100ms, transform 260ms var(--courbe) 100ms; }

/* Le récit sous les yeux, avec la grammaire du prompteur de l'app : la phrase
   en cours est claire et se remplit mot à mot ; les phrases à venir sont
   grises, celles déjà lues un peu plus. Sur une carte, trois lignes visibles
   (le texte entier y est, pour les moteurs de recherche) ; sur la page d'un
   récit, la transcription. Toucher une phrase y amène la lecture. */
.prompteur { height: 4.5em; margin-top: 14px; overflow: hidden; font-size: 15px; line-height: 1.5; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
.prompteur p { position: relative; margin: 0; color: var(--texte-2); transition: transform 380ms var(--courbe-io); }
.suivi .phrase { cursor: pointer; }
.lecture .phrase { color: rgba(249, 247, 245, 0.52); transition: color 140ms ease; }
.lecture .phrase.lue { color: rgba(249, 247, 245, 0.36); }
.lecture .phrase.courante span { color: rgba(249, 247, 245, 0.45); transition: color 120ms ease; }
.lecture .phrase.courante span.dit { color: var(--texte); }

/* La carte illustrée de « Ce qui vous accompagne » : la seule dont le schéma
   explique un choix (deux tracés entre les mêmes points). */
.fonction-illustree { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.fonction-visuel { position: relative; aspect-ratio: 320 / 190; overflow: hidden; background: #0c0c0c; box-shadow: 0 -1px 0 var(--filet) inset; }
.fonction-visuel > svg { display: block; width: 100%; height: 100%; }
.fonction-corps { padding: 20px; }
@media (min-width: 700px) {
  .fonction-illustree { flex-direction: row; }
  .fonction-illustree .fonction-visuel { flex: 0 0 56%; box-shadow: -1px 0 0 var(--filet) inset; }
  .fonction-illustree .fonction-corps { align-self: center; padding: 28px 32px; }
}

/* Courir avec de l'espace : la même boucle, sans puis avec le réglage, sur la
   vraie carte. Le réseau vert de l'image, ce sont les voies larges de l'app ;
   les passages au large du second tracé s'éclairent quand la ligne y arrive. */
.fonction-visuel.espace { aspect-ratio: 320 / 240; }
.espace > .espace-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.espace > svg { position: relative; }
.espace .zone { fill: none; stroke: #4fa874; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 300ms var(--courbe); }
.espace[data-espace='oui'] .zone { opacity: 0.7; transition: opacity 360ms var(--courbe) var(--d, 0ms); }
.espace-part { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.74); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 600; color: var(--texte-2); }
.espace-part strong { display: inline-block; min-width: 2.6em; text-align: right; color: var(--texte); font-variant-numeric: tabular-nums; }
.espace .trace { fill: none; stroke: var(--orange); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* Le trajet direct reste en filigrane ; la ligne vivante glisse de l'un à l'autre (site.js). */
.espace .trace-fantome { stroke-opacity: 0.22; }
.espace-bout circle:first-child { fill: #0c0c0c; stroke: var(--texte); stroke-width: 1.8; }
.espace-bout circle:last-child { fill: var(--texte); }
.interrupteur { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.74); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--texte); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 120ms var(--courbe); }
.interrupteur:active { transform: scale(0.97); }
.interrupteur-rail { position: relative; flex: 0 0 auto; width: 36px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background-color 180ms ease; }
.interrupteur-rail i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--texte); transition: transform 180ms var(--courbe); }
.interrupteur[aria-checked='true'] .interrupteur-rail { background: var(--orange); }
.interrupteur[aria-checked='true'] .interrupteur-rail i { transform: translateX(14px); }

/* Les dix paliers : la jauge avance d'un cran, le tampon se pose. */
.paliers { margin: 28px 0 0; padding: 18px 18px 12px; border-radius: 24px; background: var(--carte); box-shadow: var(--ombre-carte); }
.paliers-tete { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; }
.paliers-papier { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--papier); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; overflow: hidden; }
.paliers-papier img { position: absolute; inset: 0; margin: auto; width: 80%; height: auto; opacity: 0; transform: rotate(-4deg); transition: opacity 100ms ease; }
.paliers-papier img.actif { opacity: 1; transition: opacity 120ms var(--courbe); }
/* Hauteur tenue pour les noms sur deux lignes : la carte ne saute pas quand la jauge monte. */
.paliers-texte { display: flex; flex-direction: column; justify-content: center; min-height: 106px; }
.paliers p.paliers-niveau { margin: 0; max-width: none; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.paliers p.paliers-nom { margin: 4px 0 0; max-width: none; font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; color: var(--texte); }
.paliers p.paliers-seuil { margin: 4px 0 0; max-width: none; font-size: 14px; color: var(--texte-2); }
.paliers-jauge { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 12px; }
.paliers-rail { position: absolute; left: 5%; right: 5%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.paliers-rail i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--courbe-io); }
.paliers.monte .paliers-rail i { transition: none; }
.paliers-jauge button { position: relative; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.paliers-jauge button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #2c2c2c; box-shadow: 0 0 0 3px var(--carte); transition: background-color 200ms ease, box-shadow 200ms ease, transform 220ms var(--courbe); }
.paliers-jauge button.atteint::before { background: var(--orange); }
.paliers-jauge button[aria-pressed='true']::before { background: var(--texte); box-shadow: 0 0 0 3px var(--orange); transform: scale(1.35); }
.paliers-jauge button:active::before { transform: scale(0.85); }
.paliers-jauge button[aria-pressed='true']:active::before { transform: scale(1.2); }

/* Texte réservé aux lecteurs d'écran (et aux moteurs de recherche). */
.masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Mouvement réduit : les états changent sans délai ni cascade ; la couleur
   des mots dits reste, c'est elle qui aide à suivre. */
@media (prefers-reduced-motion: reduce) {
  .amb *, .paliers *, .fonction-visuel *, .prompteur p, .demo * { transition-delay: 0s !important; }
}