/* style.css — page de présentation de « Tous à bord ! » (générée par outils/genere-site.mjs).
   Même charte que l'app (WebContent/css/themes.css, thème Nuit) : nuit sur la route,
   papier ivoire des billets, accent ambre, Archivo pour les titres, Inter pour le texte,
   Playfair italique pour la voix humaine. Animations : site/anim.js (commun à la famille). */

@font-face { font-family: "Inter"; src: url("/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-Italic700.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --bg: #0F1B2D; --bg-deep: #0A1424; --s1: #1A2B42; --s2: #2A3D57;
  --text: #EEF2F7; --muted: #A9B6C8; --cream: #FFF3D6;
  --paper-hi: #FBF8F1; --paper-lo: #EFE9DC; --ink: #16202E; --ink-2: #5A6575; --kicker-ink: #8A6A1E;
  --amber: #F2B134; --amber-hi: #FFD27A; --amber-lo: #D9921B; --amber-edge: #9A6410;
  --teal: #3FA796; --coral: #E2704A;
  --title: "Archivo", "Inter", -apple-system, system-ui, sans-serif;
  --accent: "Playfair Display", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg-deep); scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font: 17px/1.6 "Inter", -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(110% 60% at 50% -10%, #1F3A5C 0%, transparent 60%),
    radial-gradient(70% 40% at 85% 30%, rgba(242,177,52,.08), transparent 70%),
    linear-gradient(180deg, #0C1626 0%, var(--bg) 40%, var(--bg-deep) 100%);
  overflow-x: hidden;
}
a { color: var(--amber-hi); }
h1, h2, h3, h4 { font-family: var(--title); letter-spacing: -.03em; margin: 0; line-height: 1.08; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* Ciel étoilé, fixe */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(1px 1px at 12% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 14%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 4%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 91% 19%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 27%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 71% 28%, rgba(255,255,255,.5) 50%, transparent 51%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .7; } }

/* ── En-tête ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 900 22px/1 var(--title); letter-spacing: -.03em; }
.brand img { border-radius: 11px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; color: var(--muted); }
.langs ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; margin: 0; padding: 6px; list-style: none; min-width: 150px; border-radius: 14px; background: #17263C; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.langs a { display: block; padding: 8px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 15px; }
.langs a:hover, .langs a[aria-current] { background: rgba(242,177,52,.14); color: var(--amber-hi); }

/* ── Haut de page ── */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 30px 0 10px; }
.ribbon {
  display: inline-block; margin-bottom: 20px; padding: 8px 16px; border-radius: 10px;
  font: italic 700 17px/1.2 var(--accent); color: #1B1406;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber-lo)); box-shadow: 0 4px 0 var(--amber-edge), 0 12px 24px rgba(242,177,52,.22);
  transform: rotate(-1.5deg);
}
.hero h1 {
  font-size: clamp(42px, 6.4vw, 76px); font-weight: 900; letter-spacing: -.045em;
  background: linear-gradient(180deg, #fff 40%, #E9DDC3); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 em {
  font-style: normal; background: linear-gradient(180deg, var(--amber-hi), var(--amber-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin-top: 22px; font-size: 18.5px; color: #D5DEEA; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 14px;
  font: 800 17px/1 var(--title); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s;
}
.btn svg { width: 17px; height: 21px; fill: currentColor; }
.btn-gold {
  position: relative; overflow: hidden; color: #1B1406;
  background: linear-gradient(180deg, var(--amber-hi) 0%, var(--amber) 42%, var(--amber-lo) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 5px 0 var(--amber-edge), 0 14px 28px rgba(242,177,52,.28);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: reflet 5.5s ease-in-out 1.5s infinite;
}
@keyframes reflet { 0%, 74% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(360%) skewX(-18deg); } }
.btn-gold:hover { transform: translateY(-2px); }
.btn-gold.soon { cursor: default; }
.btn-gold.soon:hover { transform: none; }
.btn-line { color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.btn-line:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* Téléphones */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; min-height: 520px; }
.phone {
  position: relative; width: min(260px, 42vw); border-radius: 38px; padding: 10px; background: linear-gradient(160deg, #2A3D57, #0B1422);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 80px -20px rgba(0,0,0,.7), 0 0 60px rgba(242,177,52,.08);
}
.phone .scr { position: relative; overflow: hidden; border-radius: 29px; background: #0C1626; }
.phone img { display: block; width: 100%; height: auto; }
/* Barre d'état et Dynamic Island, comme sur un vrai iPhone */
.sbar { position: relative; aspect-ratio: 100 / 12; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; color: #fff; z-index: 1; }
.sbar b { font: 700 clamp(9px, 1.3vw, 14px)/1 -apple-system, "Inter", sans-serif; letter-spacing: -.01em; }
.island { position: absolute; left: 50%; top: 22%; width: 31%; height: 46%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.sig { display: flex; align-items: flex-end; gap: 2px; height: 34%; }
.sig i { width: 3px; border-radius: 1px; background: #fff; }
.sig i:nth-child(1) { height: 35%; } .sig i:nth-child(2) { height: 55%; } .sig i:nth-child(3) { height: 75%; } .sig i:nth-child(4) { height: 100%; }
.sig em { width: 18px; height: 100%; margin-left: 5px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.55); box-shadow: inset 0 0 0 1.5px #0C1626, inset 0 0 0 9px #fff; }
.phones .porthole { position: absolute; left: 4%; bottom: -10px; z-index: 3; width: 120px; height: auto; border-radius: 26px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); transform: rotate(-8deg); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; rotate: 3deg; } }
.phones .phone:first-child { z-index: 2; transform: rotate(-4deg); animation: float 7s ease-in-out infinite; }
.phones .phone:nth-child(2) { margin-left: -70px; margin-top: 70px; transform: rotate(5deg); opacity: .96; animation: float 7s ease-in-out 1.2s infinite; }
@keyframes float { 50% { translate: 0 -12px; } }

/* Route qui défile entre le haut de page et la suite */
.road-band { height: 150px; margin-top: -40px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.road { width: 100%; height: 100%; display: block; }
.road .dash { stroke-dasharray: 10 16; animation: drive 1.1s linear infinite; }
@keyframes drive { to { stroke-dashoffset: -26; } }

/* ── Sections ── */
.block { padding: 70px 0; }
.section-title { text-align: center; font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; margin-bottom: 36px; text-wrap: balance; }
.center-note { max-width: 40em; margin: 26px auto 0; text-align: center; color: var(--muted); }

.who { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.who li { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--cream); background: rgba(242,177,52,.1); border: 1px solid rgba(242,177,52,.3); }

/* Étapes : trois billets numérotés */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.steps li {
  position: relative; counter-increment: s; padding: 30px 24px 26px; border-radius: 18px; color: var(--ink);
  background: linear-gradient(180deg, var(--paper-hi), var(--paper-lo)); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 40px -14px rgba(0,0,0,.6);
  -webkit-mask: radial-gradient(circle 11px at 0 64px, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64px, transparent 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 64px, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 64px, transparent 97%, #000) right / 51% 100% no-repeat;
}
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 26px; border-radius: 12px;
  font: 900 20px/1 var(--title); color: #1B1406; background: linear-gradient(180deg, var(--amber-hi), var(--amber-lo));
}
.steps li::after { content: ""; position: absolute; left: 18px; right: 18px; top: 64px; border-top: 1.5px dashed rgba(154,100,16,.4); }
.steps h3 { font-size: 21px; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 16px; }

/* Une image, un texte */
.feature { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; margin-bottom: 70px; }
.feature:last-child { margin-bottom: 0; }
.feature.flip { grid-template-columns: 1fr auto; }
.feature.flip > .phone { order: 2; }
.feature .phone { width: min(280px, 70vw); }
.feat-t { font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; margin-bottom: 14px; }
.feature p { font-size: 18px; color: #D5DEEA; max-width: 32em; }
.ticket-box { padding: 34px 32px; border-radius: 22px; color: var(--ink); background: linear-gradient(180deg, var(--paper-hi), var(--paper-lo)); box-shadow: 0 0 0 1px rgba(242,177,52,.4), 0 30px 60px -20px rgba(0,0,0,.65); }
.ticket-box h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 900; margin: 10px 0 18px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker-ink); }
.kicker svg { width: 18px; height: 18px; color: var(--teal); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks li { position: relative; padding-left: 34px; font-size: 16.5px; color: #2A3442; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal);
  -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); mask: radial-gradient(circle, #000 70%, transparent 71%);
}
.checks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; padding: 26px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.stat b { font: 900 52px/1 var(--title); letter-spacing: -.04em; background: linear-gradient(180deg, var(--amber-hi), var(--amber-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); }

/* Les jeux : une famille par rangée, avec sa capture */
.kicker.gold { color: var(--amber); }
.family .feat-t { margin: 10px 0 4px; }
.fam-s { margin-bottom: 20px; font: italic 700 19px/1.3 var(--accent) !important; color: color-mix(in srgb, var(--amber-hi) 65%, var(--cream)) !important; }
.family .games { display: flex; flex-direction: column; gap: 12px; }
.game {
  --c: var(--amber);
  position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 12px; border-radius: 18px;
  background: radial-gradient(100% 120% at 0% 50%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.08));
  transition: opacity .85s var(--ease) var(--d, 0ms), translate .85s var(--ease) var(--d, 0ms), border-color .3s, transform .3s var(--spring);
}
.game:hover { border-color: color-mix(in srgb, var(--c) 70%, transparent); transform: translateX(4px); }
.game .art { width: 92px; height: 74px; }
.game .art svg { width: 100%; height: 100%; overflow: visible; }
.game { --paper-hi: #FBF8F1; --ink: #16202E; }
.game h4 { font-size: 19px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.game p { font-size: 15px !important; color: #C9D3E0 !important; line-height: 1.5; max-width: none !important; }
.game .net { padding: 3px 9px; border-radius: 999px; font: 700 11.5px/1.2 "Inter", sans-serif; letter-spacing: 0; color: #9FE3D5; background: rgba(63,167,150,.16); border: 1px solid rgba(63,167,150,.45); }
.family { margin-bottom: 90px; }
.family:last-child { margin-bottom: 0; }

/* Transports : une carte colorée par moyen de transport, avec la scène animée de l'app */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode {
  position: relative; overflow: hidden; border-radius: 22px; color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 24px 50px -18px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.15) inset;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .85s var(--ease) var(--d, 0ms), translate .85s var(--ease) var(--d, 0ms), transform .5s var(--ease);
}
.mode .scene { height: 140px; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.mode .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mode-txt { padding: 4px 20px 22px; }
.mode .kicker { color: rgba(255,255,255,.72); }
.mode h3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 8px; font-size: 24px; font-weight: 900; }
.mode h3 svg { width: 24px; height: 24px; color: var(--amber-hi); }
.mode p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86); }
.who { margin-top: 26px; }
/* Mouvements des scènes (repris de l'app, premium.css) */
.mode .dash { stroke-dasharray: 16 22; animation: drive 1.1s linear infinite; }
.mode .mv-train { animation: trainBy 13s linear infinite; }
@keyframes trainBy { from { transform: translateX(-160px); } to { transform: translateX(420px); } }
.mode .mv-plane { animation: planeBy 18s linear infinite; }
@keyframes planeBy { from { transform: translateX(-60px) translateY(6px); } to { transform: translateX(440px) translateY(-8px); } }
.mode .mv-cloud-far { animation: slide400 60s linear infinite; }
.mode .mv-cloud-near { animation: slide400 32s linear infinite; }
@keyframes slide400 { to { transform: translateX(-400px); } }
.mode .blink { animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mode .mv-wave1 { animation: slide80 6s linear infinite; }
.mode .mv-wave2 { animation: slide80 9s linear infinite reverse; }
@keyframes slide80 { to { transform: translateX(-80px); } }
.mode .mv-boat { transform-box: fill-box; transform-origin: 50% 100%; animation: tangue 3.4s ease-in-out infinite; }
@keyframes tangue { 50% { transform: rotate(3deg) translateY(1px); } }
.mode .beam { transform-box: view-box; transform-origin: 352px 116px; animation: sweep 5s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }

/* Hors ligne : un tunnel */
.offline { position: relative; overflow: hidden; display: flex; align-items: center; gap: 36px; padding: 40px; border-radius: 26px; background: linear-gradient(120deg, #13233A, #0A1424); border: 1px solid rgba(255,255,255,.1); }
.offline h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; margin-bottom: 10px; }
.offline p { color: #D5DEEA; font-size: 17.5px; max-width: 40em; }
.tunnel { flex: none; width: 140px; height: 110px; border-radius: 70px 70px 0 0; background: radial-gradient(ellipse at 50% 100%, #000 0 45%, transparent 46%), linear-gradient(180deg, #3A5170, #2A3D57); box-shadow: 0 0 0 10px rgba(255,255,255,.05); position: relative; }
.tunnel::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 34px; margin-left: -3px; background: repeating-linear-gradient(180deg, var(--amber) 0 8px, transparent 8px 14px); animation: dashIn 1s linear infinite; }
@keyframes dashIn { to { background-position: 0 14px; } }

/* Avantages */
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.perks li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); font-size: 16.5px; }
.perks .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #1B1406; background: linear-gradient(160deg, var(--amber-hi), var(--amber-lo)); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; }
.perks .ico svg { width: 22px; height: 22px; }
.perks li { align-items: center; }

/* Essai : un billet composté */
.trial {
  position: relative; max-width: 760px; margin-inline: auto; padding: 46px 40px; text-align: center; border-radius: 26px; color: var(--ink);
  background: linear-gradient(180deg, var(--paper-hi), var(--paper-lo));
  box-shadow: 0 0 0 2px rgba(242,177,52,.7), 0 0 60px rgba(242,177,52,.18), 0 40px 80px -24px rgba(0,0,0,.7);
}
.trial h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 900; margin-bottom: 14px; }
.trial p { font-size: 18px; color: #2A3442; max-width: 30em; margin-inline: auto; }
.trial .small { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.trial .options { list-style: none; margin: 18px auto 0; padding: 0; max-width: 34em; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.trial .options li { padding: 14px 18px 14px 48px; border-radius: 14px; position: relative; font-weight: 700; color: var(--ink); background: rgba(242,177,52,.14); border: 1px solid rgba(154,100,16,.25); }
.trial .options li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--teal); }
.trial .options li::after { content: ""; position: absolute; left: 22px; top: 50%; width: 8px; height: 4px; margin-top: -4px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.trial .actions { justify-content: center; }
.punch { position: absolute; right: 26px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px rgba(22,32,46,.12); }
.trial.is-in { animation: glow 4.5s ease-in-out 1s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px rgba(242,177,52,.9), 0 0 90px rgba(242,177,52,.3), 0 40px 80px -24px rgba(0,0,0,.7); } }

/* Contact */
.help-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.help-band h2 { font-size: 28px; font-weight: 900; margin-bottom: 6px; }
.help-band p { color: var(--muted); }

/* Pied de page */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 34px 0 46px; color: var(--muted); font-size: 14.5px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 30px; }
.foot nav { display: flex; gap: 16px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--amber-hi); }

/* Apparition au défilement (anim.js : .anim sur <html>, .is-out tant que hors écran) */
[data-reveal] { transition: opacity .85s var(--ease) var(--d, 0ms), translate .85s var(--ease) var(--d, 0ms); }
.anim .is-out { opacity: 0; translate: 0 36px; }
.anim .is-out[data-reveal="left"] { translate: -60px 0; }
.anim .is-out[data-reveal="right"] { translate: 60px 0; }
.anim .steps li.is-in::before { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + 250ms) both; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); } to { transform: none; } }
.anim .game.is-in .art svg { animation: artIn .8s var(--spring) calc(var(--d, 0ms) + 200ms) both; }
@keyframes artIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ── Mobile ── */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .lead { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .phones { min-height: 0; }
  .phone { width: min(220px, 46vw); border-radius: 30px; padding: 8px; }
  .phone img { border-radius: 23px; }
  .phones .phone:nth-child(2) { margin-left: -50px; margin-top: 50px; }
  .modes { grid-template-columns: 1fr; }
  .mode .scene { height: 120px; }
  .phones .porthole { width: 84px; left: 0; }
  .game { grid-template-columns: 72px 1fr; text-align: left; }
  .game .art { width: 72px; height: 58px; }
  .family .games { text-align: left; }
  .steps, .perks, .stats { grid-template-columns: 1fr; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; }
  .feature.flip > .phone { order: 0; }
  .feature p { margin-inline: auto; }
  .ticket-box { text-align: left; }
  .offline { flex-direction: column; text-align: center; padding: 30px 24px; }
  .help-band { flex-direction: column; text-align: center; }
  .block { padding: 50px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}