/* Ridop — page d'accueil de ridop.app. Aucune ressource externe, aucun script :
   animations en CSS seulement, fenêtre « Bientôt disponible » en HTML (attribut popover).
   Polices : WOFF2 générés par scripts/site-fonts.sh depuis les TTF de l'app (OFL 1.1). */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist_600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist_700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter_400Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter_600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #0d0d0d;
  --surface: #161616;
  --card: #1a1a1a;
  --line: #2a2a2a;
  --text: #ffffff;
  --text-2: #aaaaaa;
  --text-3: #858585;
  --orange: #ff4d1c;
  --cta: #e13100;
  --cta-pressed: #b72a03;
  --green: #00c896;
  --yellow: #ffdd00;
  --purple: #7b2fff;
  --blue: #378add;
  --pink: #d4537e;
  --border-ui: #6b6b6b;
  --display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cycle: 20s;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 16px/1.6 var(--body); overflow-x: hidden; }
a { color: var(--orange); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(13, 13, 13, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: -.4px; min-height: 44px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.top nav { display: flex; align-items: center; gap: 4px; }
.top nav a { color: var(--text-2); text-decoration: none; font-size: 15px; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; }
.top nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.top nav .hide-sm { display: inline-flex; }

/* ---------- Boutons (CTA) ---------- */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 16px;
  border-radius: 16px; border: 1px solid var(--border-ui); background: transparent; color: var(--text);
  font: 600 17px/1.15 var(--body); text-align: left; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.store small { display: block; font: 400 12px/1.2 var(--body); color: var(--text-2); letter-spacing: .2px; }
.store svg { width: 26px; height: 26px; flex: none; }
.store:hover { background: rgba(255, 255, 255, .06); }
.store:active { transform: scale(.98); }
.store.primary { background: var(--cta); border-color: var(--cta); }
.store.primary small { color: rgba(255, 255, 255, .86); }
.store.primary:hover { background: var(--cta-pressed); border-color: var(--cta-pressed); }

/* ---------- Héros ---------- */
.hero { position: relative; padding: 56px 0 72px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .32; }
.hero-bg svg { width: 100%; height: 100%; }
.hero-bg .road { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-once 3.2s .3s cubic-bezier(.6, 0, .3, 1) forwards; }
.hero-bg .end { opacity: 0; animation: appear .4s 3.3s forwards; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, .03); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0, 200, 150, .18); }
.hero h1 { font: 700 clamp(40px, 6.2vw, 72px)/1.02 var(--display); letter-spacing: -1.6px; margin: 22px 0 18px; }
.hero h1 span { color: var(--orange); }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 540px; margin: 0 0 30px; }
.hero .fine { margin: 18px 0 0; font-size: 14px; color: var(--text-3); }

/* ---------- Téléphone ---------- */
.stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.phone {
  position: relative; width: 300px; height: 620px; border-radius: 48px; padding: 11px;
  background: linear-gradient(145deg, #2b2b2b, #111 40%, #1d1d1d);
  box-shadow: 0 0 0 1px #333, 0 40px 80px -20px rgba(255, 77, 28, .28), 0 30px 60px rgba(0, 0, 0, .6);
}
.phone.sm { width: 256px; height: 530px; border-radius: 42px; padding: 9px; box-shadow: 0 0 0 1px #333, 0 24px 50px rgba(0, 0, 0, .55); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 38px; background: var(--night); overflow: hidden; font-family: var(--body); }
.phone.sm .screen { border-radius: 33px; }
.status { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; font: 600 13px/1 var(--body); z-index: 3; }
.status .island { width: 86px; height: 24px; border-radius: 14px; background: #000; }
.status .bat { width: 22px; height: 11px; border: 1.5px solid #fff; border-radius: 3px; position: relative; }
.status .bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #fff; border-radius: 1px; }
.phone.sm .status { padding: 0 22px; font-size: 12px; }
.phone.sm .status .island { width: 72px; height: 21px; }

.scene { position: absolute; inset: 44px 0 0; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.phone .scene.anim { opacity: 0; animation: scene var(--cycle) var(--d) infinite both; }
.s1 { --d: 0s; }
.s2 { --d: 5s; }
.s3 { --d: 10s; }
.s4 { --d: 15s; }

/* Éléments de l'app (repris des écrans de Ridop) */
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 32px; font-size: 13px; color: var(--text-2); }
.bar b { color: var(--text); font: 600 15px/1 var(--body); }
.bar .act { color: var(--orange); font-weight: 600; }
.h-title { font: 700 26px/1.1 var(--display); letter-spacing: -.4px; margin: 2px 0 0; }
.cover { position: relative; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; border: 1px solid #222; }
.cover svg { width: 100%; height: 100%; }
.cover .km { position: absolute; right: 8px; bottom: 7px; font: 600 9.5px/1 var(--body); letter-spacing: .9px; color: #fff; background: rgba(13, 13, 13, .72); padding: 5px 7px; border-radius: 6px; }
.grid-lines { stroke: #1f1f1f; stroke-width: 1; }
.water { fill: #0f1a24; }
.route { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ring { fill: var(--night); stroke: #fff; stroke-width: 3; }
.dot { fill: var(--orange); stroke: var(--night); stroke-width: 2; }
.stop { fill: #fff; stroke: var(--night); stroke-width: 2; }
.tag { font: 600 8px/1 var(--body); letter-spacing: .8px; fill: #fff; }
.tag-bg { fill: var(--night); }
.field { border: 1px solid #3a3a3a; border-radius: 12px; padding: 7px 11px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.field small { font: 600 9px/1.2 var(--body); letter-spacing: .9px; text-transform: uppercase; color: var(--text-3); }
.field span { font-size: 14px; line-height: 1.3; }
.field .pin { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pin.start { border: 2px solid #fff; }
.pin.end { background: var(--orange); }
.typed { display: inline-block; white-space: nowrap; }
.caret { display: inline-block; width: 1.5px; height: 15px; background: var(--orange); vertical-align: -2px; margin-left: 1px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #3a3a3a; border-radius: 12px; overflow: hidden; }
.seg span { text-align: center; font-size: 12.5px; padding: 9px 2px; color: var(--text-2); border-left: 1px solid #3a3a3a; }
.seg span:first-child { border-left: 0; }
.seg .on { background: #fff; color: var(--night); font-weight: 600; }
.btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; background: var(--cta); color: #fff; font: 600 14.5px/1 var(--body); }
.btn.ghost { background: transparent; border: 1px solid var(--border-ui); color: var(--text); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spacer { flex: 1; }
.tap { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; z-index: 4; }

.av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--body); color: #fff; border: 2px solid var(--night); flex: none; }
.c1 { background: #c2410c; }
.c2 { background: #6d28d9; }
.c3 { background: #0f766e; }
.c4 { background: #a21caf; }
.c5 { background: #1d4ed8; }
.c6 { background: #4d7c0f; }
.stack { display: flex; }
.stack .av { width: 24px; height: 24px; font-size: 9.5px; margin-left: -7px; }
.stack .av:first-child { margin-left: 0; }

.squad { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 12px; }
.squad .tile { width: 36px; height: 36px; border-radius: 10px; background: var(--purple); display: grid; place-items: center; }
.squad .tile svg { width: 20px; height: 20px; }
.squad div { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.3; }
.squad div b { display: block; color: var(--text); font-size: 14px; }
.check { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--border-ui); display: grid; place-items: center; position: relative; }
.check i { position: absolute; inset: -1.5px; border-radius: 7px; background: var(--cta); display: grid; place-items: center; }
.check svg { width: 14px; height: 14px; }
.members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; padding: 6px 2px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.member .av { width: 46px; height: 46px; font-size: 15px; }
.toast { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--night); border-radius: 12px; padding: 10px 12px; font: 600 13px/1.2 var(--body); }
.toast i { width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.toast svg { width: 11px; height: 11px; }

.tabs { display: flex; gap: 18px; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.tabs span { padding: 8px 0; }
.tabs .on { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange); }
.card { background: var(--card); border-radius: 20px; overflow: hidden; }
.card .cover { border-radius: 0; border: 0; aspect-ratio: auto; height: 132px; }
.card .body { position: relative; padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.date { position: absolute; top: 10px; left: 10px; width: 42px; border-radius: 10px; background: #fff; color: var(--night); text-align: center; padding: 5px 0 6px; font: 600 9px/1 var(--body); letter-spacing: .8px; }
.date b { display: block; font: 700 18px/1 var(--display); letter-spacing: -.3px; margin-top: 3px; }
.logo-sq { position: absolute; left: 14px; top: -24px; width: 46px; height: 46px; border-radius: 12px; background: var(--orange); border: 3px solid var(--card); display: grid; place-items: center; }
.logo-sq svg { width: 24px; height: 24px; }
.card h3 { margin: 0; font: 600 18px/1.2 var(--display); letter-spacing: -.2px; }
.meta { font-size: 12px; color: var(--text-2); }
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); min-height: 24px; position: relative; }
.who .lines { flex: 1; display: grid; line-height: 1.3; }
.who .lines span { grid-area: 1 / 1; }
.rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rsvp span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; border-radius: 11px; border: 1px solid #3a3a3a; font: 600 12.5px/1 var(--body); color: var(--text-2); }
.rsvp svg { width: 12px; height: 12px; }
.phone.sm .rsvp span { font-size: 11px; gap: 3px; }
.rsvp .yes-on { background: var(--green); border-color: var(--green); color: var(--night); }

.prop { background: var(--card); border-radius: 18px; padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.prop .by { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); line-height: 1.3; }
.prop .by b { display: block; color: var(--text); font-size: 13.5px; }
.chip { align-self: flex-start; font: 600 9.5px/1 var(--body); letter-spacing: .9px; text-transform: uppercase; color: var(--night); background: var(--yellow); padding: 5px 8px; border-radius: 6px; }
.chips { display: grid; justify-items: start; }
.chips .chip { grid-area: 1 / 1; }
.chip.done { background: var(--green); }
.diff { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.diff div { display: flex; gap: 8px; align-items: baseline; }
.diff .plus { color: var(--green); font-weight: 600; width: 12px; }
.diff .eq { color: var(--text-3); width: 12px; }
.diff em { font-style: normal; color: var(--text-2); }
.votes { display: flex; flex-direction: column; gap: 6px; }
.votes .track { height: 8px; border-radius: 4px; background: #333; overflow: hidden; display: flex; }
.votes .for { background: var(--green); width: 80%; }
.votes .against { background: #ff3b30; width: 20%; }
.votes p { margin: 0; font-size: 11.5px; color: var(--text-2); }
.s4 .banner { position: absolute; top: 8px; left: 14px; right: 14px; z-index: 2; background: #0f2a22; }
.banner { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 10px 12px; background: rgba(0, 200, 150, .14); border: 1px solid rgba(0, 200, 150, .45); font-size: 12.5px; line-height: 1.3; }
.banner i { width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.banner svg { width: 12px; height: 12px; }

.days { display: flex; gap: 6px; }
.days span { font: 600 11.5px/1 var(--body); padding: 8px 10px; border-radius: 10px; border: 1px solid #3a3a3a; color: var(--text-2); }
.days .on { background: #fff; color: var(--night); border-color: #fff; }
.stops { display: flex; flex-direction: column; }
.stops div { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 0; position: relative; }
.stops div::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -8px; width: 2px; background: #333; }
.stops div:last-child::before { display: none; }
.stops i { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--night); box-shadow: 0 0 0 1px #555; justify-self: center; position: relative; z-index: 1; }
.stops i.first { background: var(--night); border: 2.5px solid #fff; box-shadow: none; }
.stops i.last { background: var(--orange); box-shadow: none; }
.stops span small { display: block; color: var(--text-3); font-size: 11px; }
.stops time { color: var(--text-2); font-size: 12px; }
.gmaps { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; border: 1px solid var(--border-ui); font: 600 12.5px/1 var(--body); }

.detail-cover { margin: -8px -14px 0; height: 168px; position: relative; }
.detail-cover .cover { border-radius: 0; border: 0; height: 100%; aspect-ratio: auto; }
.round { position: absolute; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(13, 13, 13, .7); display: grid; place-items: center; }
.round svg { width: 15px; height: 15px; }
.round.l { left: 12px; }
.round.r { right: 12px; }
.orga { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.orga .av { width: 24px; height: 24px; font-size: 9.5px; border: 0; }
.place { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; background: var(--card); border-radius: 14px; padding: 10px 12px; }
.place div { display: flex; align-items: center; gap: 8px; }

/* Bandeau d'étapes synchronisé avec l'animation */
.flow { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; list-style: none; margin: 0; padding: 0; }
.flow li { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font: 600 13px/1 var(--body); color: var(--text-3); border: 1px solid transparent; animation: step-on var(--cycle) var(--d) infinite both; }
.flow li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #222; color: var(--text-2); animation: step-num var(--cycle) var(--d) infinite both; }

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.kicker { font: 600 12px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); margin: 0 0 14px; }
h2 { font: 700 clamp(30px, 4vw, 46px)/1.08 var(--display); letter-spacing: -1px; margin: 0 0 16px; max-width: 760px; }
.sub { color: var(--text-2); font-size: 18px; max-width: 640px; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: s; }
.steps article { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.steps .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 18px/1 var(--display); background: var(--orange); color: var(--night); margin-bottom: 18px; }
.steps h3 { font: 600 22px/1.2 var(--display); letter-spacing: -.3px; margin: 0 0 8px; }
.steps p { margin: 0; color: var(--text-2); }

.shots { background: linear-gradient(180deg, var(--night), #121212 30%, #121212 70%, var(--night)); }
.gallery { display: flex; justify-content: center; align-items: flex-start; gap: 40px; margin-top: 56px; }
.gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gallery figure:nth-child(2) { margin-top: 48px; }
.gallery figcaption { text-align: center; max-width: 250px; }
.gallery figcaption b { display: block; font: 600 17px/1.3 var(--display); }
.gallery figcaption span { color: var(--text-2); font-size: 15px; }
.note { text-align: center; color: var(--text-3); font-size: 13px; margin-top: 36px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.features article { padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.features .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; }
.features .ic svg { width: 22px; height: 22px; }
.features h3 { font: 600 19px/1.25 var(--display); margin: 0 0 6px; letter-spacing: -.2px; }
.features p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.bg-orange { background: var(--orange); }
.bg-green { background: var(--green); }
.bg-yellow { background: var(--yellow); }
.bg-purple { background: var(--purple); }
.bg-blue { background: var(--blue); }
.bg-pink { background: var(--pink); }

.privacy .panel { border-radius: 32px; padding: 56px; background: radial-gradient(120% 140% at 100% 0%, rgba(255, 77, 28, .18), transparent 55%), var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.privacy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.privacy li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.privacy li i { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 200, 150, .16); display: grid; place-items: center; }
.privacy li svg { width: 14px; height: 14px; }
.privacy li b { display: block; font-weight: 600; }
.privacy li span { color: var(--text-2); font-size: 15px; }
.privacy .more { margin-top: 22px; display: inline-flex; min-height: 44px; align-items: center; }

.final { text-align: center; padding: 104px 0 112px; position: relative; overflow: hidden; }
.final .wrap { display: flex; flex-direction: column; align-items: center; }
.final img { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 26px; }
.final h2 { margin-left: auto; margin-right: auto; }
.final .sub { margin: 0 auto 32px; }
.final .ctas { justify-content: center; }

footer { border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 24px; padding-bottom: 36px; }
footer a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
footer a:hover { color: var(--text); text-decoration: underline; }
footer .copy { margin-left: auto; }

/* ---------- Fenêtre « Bientôt disponible » (popover, sans script) ---------- */
.soon { width: min(400px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 28px; padding: 32px 28px 24px; background: var(--card); color: var(--text); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.soon::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.soon:popover-open { animation: rise .25s ease-out; }
.soon img { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 18px; }
.soon h2 { font-size: 28px; margin: 0 auto 10px; }
.soon p { color: var(--text-2); margin: 0 0 24px; font-size: 16px; }
.soon .close { width: 100%; min-height: 52px; border-radius: 16px; border: 0; background: var(--cta); color: #fff; font: 600 16px/1 var(--body); cursor: pointer; }
.soon .close:hover { background: var(--cta-pressed); }

/* ---------- Animations ---------- */
@keyframes draw-once { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
/* Une scène occupe 25 % du cycle (5 s sur 20 s). Les éléments à l'intérieur reprennent leur état
   initial à 27 % : la scène est déjà cachée, et un léger décalage d'apparition reste invisible. */
@keyframes scene {
  0% { opacity: 0; transform: translateX(18px); }
  2.5%, 22.5% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateX(-18px); }
}
@keyframes draw { 0%, 3% { stroke-dashoffset: 1; } 13%, 26% { stroke-dashoffset: 0; } 27%, 100% { stroke-dashoffset: 1; } }
@keyframes type { 0%, 2% { clip-path: inset(0 100% 0 0); } 8%, 26% { clip-path: inset(0 0 0 0); } 27%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pop-late { 0%, 13% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.15); } 16%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes pop { 0%, 4% { opacity: 0; transform: scale(.4); } 6% { opacity: 1; transform: scale(1.12); } 7%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes check { 0%, 3% { opacity: 0; transform: scale(.5); } 4%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes toast { 0%, 16% { opacity: 0; transform: translateY(10px); } 17.5%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes press-16 { 0%, 15% { transform: none; } 15.8% { transform: scale(.95); } 16.6%, 100% { transform: none; } }
@keyframes press-19 { 0%, 18.5% { transform: none; } 19.2% { transform: scale(.95); } 20%, 100% { transform: none; } }
@keyframes press-8 { 0%, 8% { transform: none; } 8.8% { transform: scale(.94); } 9.6%, 100% { transform: none; } }
@keyframes press-14 { 0%, 14% { transform: none; } 14.8% { transform: scale(.95); } 15.6%, 100% { transform: none; } }
@keyframes tap-3 { 0%, 2.5% { opacity: 0; transform: scale(.5); } 3.2% { opacity: 1; transform: scale(1); } 4.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap-8 { 0%, 7.8% { opacity: 0; transform: scale(.5); } 8.5% { opacity: 1; transform: scale(1); } 9.8%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap-14 { 0%, 13.8% { opacity: 0; transform: scale(.5); } 14.5% { opacity: 1; transform: scale(1); } 15.8%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap-16 { 0%, 15.3% { opacity: 0; transform: scale(.5); } 16% { opacity: 1; transform: scale(1); } 17.3%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap-19 { 0%, 18.3% { opacity: 0; transform: scale(.5); } 19% { opacity: 1; transform: scale(1); } 20.3%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes yes { 0%, 8.6% { background: transparent; border-color: #3a3a3a; color: var(--text-2); } 9.6%, 26% { background: var(--green); border-color: var(--green); color: var(--night); } 27%, 100% { background: transparent; border-color: #3a3a3a; color: var(--text-2); } }
@keyframes out-9 { 0%, 9% { opacity: 1; } 10%, 26% { opacity: 0; } 27%, 100% { opacity: 1; } }
@keyframes in-9 { 0%, 9.5% { opacity: 0; transform: translateY(4px); } 10.5%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes out-15 { 0%, 15.5% { opacity: 1; } 16.5%, 26% { opacity: 0; } 27%, 100% { opacity: 1; } }
@keyframes in-15 { 0%, 15.5% { opacity: 0; } 16.5%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes bar-for { 0%, 3% { width: 0; } 9%, 26% { width: 80%; } 27%, 100% { width: 0; } }
@keyframes bar-against { 0%, 5% { width: 0; } 9%, 26% { width: 20%; } 27%, 100% { width: 0; } }
@keyframes banner { 0%, 15% { opacity: 0; transform: translateY(-6px); } 16.5%, 26% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
@keyframes avatar-in { 0%, 9.5% { opacity: 0; width: 0; margin-left: 0; } 10.5%, 26% { opacity: 1; width: 24px; margin-left: 0; } 27%, 100% { opacity: 0; width: 0; } }
@keyframes step-on { 0% { color: var(--text-3); border-color: transparent; background: transparent; } 1%, 24% { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .05); } 25%, 100% { color: var(--text-3); border-color: transparent; background: transparent; } }
@keyframes step-num { 0% { background: #222; color: var(--text-2); } 1%, 24% { background: var(--orange); color: var(--night); } 25%, 100% { background: #222; color: var(--text-2); } }

.s1 .route.drawn { stroke-dasharray: 1; animation: draw var(--cycle) var(--d) infinite both; }
.s1 .later { animation: pop-late var(--cycle) var(--d) infinite both; transform-box: fill-box; transform-origin: center; }
.s1 .typed { animation: type var(--cycle) var(--d) infinite both steps(15, end); }
.s1 .caret { animation: blink 1s infinite; animation-delay: 0s; }
.s1 .btn { animation: press-19 var(--cycle) var(--d) infinite both; }
.s1 .tap { left: 50%; bottom: 37px; animation: tap-19 var(--cycle) var(--d) infinite both; }
.s2 .check i { animation: check var(--cycle) var(--d) infinite both; }
.s2 .tap.t1 { right: 26px; top: 58px; left: auto; margin: -19px -19px 0 0; animation: tap-3 var(--cycle) var(--d) infinite both; }
.s2 .member { animation: pop var(--cycle) var(--d) infinite both; }
.s2 .member:nth-child(2) { animation-delay: calc(var(--d) + .25s); }
.s2 .member:nth-child(3) { animation-delay: calc(var(--d) + .5s); }
.s2 .member:nth-child(4) { animation-delay: calc(var(--d) + .75s); }
.s2 .member:nth-child(5) { animation-delay: calc(var(--d) + 1s); }
.s2 .member:nth-child(6) { animation-delay: calc(var(--d) + 1.25s); }
.s2 .btn { animation: press-16 var(--cycle) var(--d) infinite both; }
.s2 .tap.t2 { left: 50%; bottom: 37px; animation: tap-16 var(--cycle) var(--d) infinite both; }
.s2 .toast { animation: toast var(--cycle) var(--d) infinite both; }
.s3 .rsvp .yes { animation: yes var(--cycle) var(--d) infinite both, press-8 var(--cycle) var(--d) infinite both; }
.s3 .tap { left: 25%; bottom: 33px; animation: tap-8 var(--cycle) var(--d) infinite both; }
.s3 .who .old { animation: out-9 var(--cycle) var(--d) infinite both; }
.s3 .who .new { animation: in-9 var(--cycle) var(--d) infinite both; }
.s3 .stack .me { animation: avatar-in var(--cycle) var(--d) infinite both; }
.s4 .votes .for { animation: bar-for var(--cycle) var(--d) infinite both; }
.s4 .votes .against { animation: bar-against var(--cycle) var(--d) infinite both; }
.s4 .accept { animation: press-14 var(--cycle) var(--d) infinite both; }
.s4 .tap { right: 25%; left: auto; margin: -19px -19px 0 0; animation: tap-14 var(--cycle) var(--d) infinite both; }
.s4 .row2 { animation: out-15 var(--cycle) var(--d) infinite both; }
.s4 .chip.open { animation: out-15 var(--cycle) var(--d) infinite both; }
.s4 .chip.done { animation: in-15 var(--cycle) var(--d) infinite both; }
.s4 .banner { animation: banner var(--cycle) var(--d) infinite both; }

/* « Réduire les animations » : une seule image fixe (l'accueil avec la réponse Oui). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-bg .road { stroke-dashoffset: 0; }
  .hero-bg .end { opacity: 1; }
  .phone .scene.anim { opacity: 0; }
  .phone .scene.s3 { opacity: 1; }
  .s3 .rsvp .yes { background: var(--green); border-color: var(--green); color: var(--night); }
  .s3 .who .old { opacity: 0; }
  .s3 .tap { display: none; }
  .chip.done { display: none; }
  .flow li:nth-child(3) { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .05); }
  .flow li:nth-child(3) b { background: var(--orange); color: var(--night); }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero .copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .ctas { justify-content: center; }
  .steps, .features { grid-template-columns: 1fr 1fr; }
  .gallery { gap: 24px; }
  .gallery figure:nth-child(3) { display: none; }
  .gallery figure:nth-child(2) { margin-top: 0; }
  .privacy .panel { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
}
@media (max-width: 640px) {
  .top nav .hide-sm { display: none; }
  .hero { padding: 36px 0 56px; }
  .hero h1 { letter-spacing: -1px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .6px; padding: 8px 12px; }
  .ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .store { width: 100%; justify-content: center; }
  .flow { grid-template-columns: repeat(2, auto); }
  .phone { transform: scale(.92); margin: -24px 0; }
  section { padding: 64px 0; }
  .steps, .features { grid-template-columns: 1fr; }
  .gallery { flex-direction: column; align-items: center; gap: 48px; }
  .gallery figure:nth-child(3) { display: flex; }
  .privacy .panel { padding: 32px 22px; border-radius: 24px; }
  footer .copy { margin-left: 8px; }
}
.flow li:nth-child(1) { --d: 0s; }
.flow li:nth-child(2) { --d: 5s; }
.flow li:nth-child(3) { --d: 10s; }
.flow li:nth-child(4) { --d: 15s; }

/* ---------- Carte (cœur de l'app) : géographie dessinée en SVG, aucune tuile externe ---------- */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.m-water { fill: #0b1620; }
.m-land { fill: #1b1e21; }
.m-road { fill: none; stroke: #3b4046; stroke-linecap: round; stroke-linejoin: round; }
.m-minor { fill: none; stroke: #2a2e33; stroke-linecap: round; }
.m-city { fill: #9aa0a6; font: 500 13px/1 var(--body); }
.m-sea { fill: #3f6a8c; font: italic 400 15px/1 var(--body); letter-spacing: 1px; }
.m-dot { fill: #6b7076; }
.map-mini { stroke-width: 7; }
.map-mini .route { stroke-width: 14; }
.map-mini .ring, .map-mini .dot, .map-mini .stop { stroke-width: 7; }
.map-day { stroke-width: 5; }
.map-day .route { stroke-width: 8; }
.map-day .route.faded { stroke: #7a3a28; }
.map-day .ring, .map-day .dot, .map-day .stop { stroke-width: 5; }
.map-day .m-city { font-size: 20px; }
.trace .route { stroke-width: 14; }
.trace .ring, .trace .dot, .trace .stop { stroke-width: 7; }

.mapsec .layout { margin-top: 48px; }
.bigmap { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #0b1620; }
.bigmap svg { width: 100%; height: auto; aspect-ratio: 940 / 560; stroke-width: 3; }
.bigmap .route { stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bigmap .ring, .bigmap .dot, .bigmap .stop { stroke-width: 3.5; }
.bigmap .tag { font-size: 11px; }
.bigmap .d1 { animation: d1 12s infinite both; }
.bigmap .d2 { animation: d2 12s infinite both; }
.bigmap .d3 { animation: d3 12s infinite both; }
.bigmap .p15 { animation: p15 12s infinite both; }
.bigmap .p26 { animation: p26 12s infinite both; }
.bigmap .p29 { animation: p29 12s infinite both; }
.bigmap .p35 { animation: p35 12s infinite both; }
.bigmap .p43 { animation: p43 12s infinite both; }
.bigmap .hint { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--body); background: rgba(13, 13, 13, .82); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; color: var(--text-2); }
.bigmap .hint i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.legend { position: absolute; top: 20px; left: 20px; width: 330px; background: rgba(22, 22, 22, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.legend h3 { margin: 0; font: 600 22px/1.2 var(--display); letter-spacing: -.3px; }
.legend .meta { font-size: 14px; margin-top: -10px; }
.legend ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.legend li b { width: 34px; height: 26px; border-radius: 8px; background: #2a2a2a; display: grid; place-items: center; font: 600 12px/1 var(--body); color: var(--text); }
.legend li em { font-style: normal; color: var(--text-2); font-size: 14px; }
.legend .total { border-top: 1px solid var(--line); padding-top: 12px; display: flex; justify-content: space-between; font-weight: 600; }
.mapfeats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; font-size: 14.5px; color: var(--text-2); }
.mapfeats li { display: flex; gap: 10px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.mapfeats li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; transform: translateY(-1px); }
.legend .gmaps { min-height: 44px; font-size: 14px; }

@keyframes d1 { 0% { stroke-dashoffset: 1; opacity: 1; } 15%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d2 { 0%, 15% { stroke-dashoffset: 1; opacity: 1; } 35%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes d3 { 0%, 35% { stroke-dashoffset: 1; opacity: 1; } 43%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes p15 { 0%, 14.5% { opacity: 0; } 15.5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes p26 { 0%, 25.5% { opacity: 0; } 26.5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes p29 { 0%, 28.5% { opacity: 0; } 29.5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes p35 { 0%, 34.5% { opacity: 0; } 35.5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes p43 { 0%, 42.5% { opacity: 0; } 43.5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bigmap .route { stroke-dashoffset: 0; }
}
@media (max-width: 1000px) {
  .legend { position: static; width: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); }
  .mapfeats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bigmap { border-radius: 20px; }
  .bigmap svg { min-height: 0; }
  .bigmap .hint { left: 10px; bottom: 10px; font-size: 11px; padding: 7px 10px; }
  .legend { padding: 20px; }
  .mapfeats { grid-template-columns: 1fr; }
}
.trace .grid-lines { stroke-width: 4; }

.scene .cover, .scene .card { flex: none; }
.phone.sm .scene { gap: 8px; }
.phone.sm .stops div { padding: 3px 0; font-size: 11.5px; }
.phone.sm .stops div::before { top: 18px; }