/* Polices hébergées sur le site : aucune requête vers Google Fonts. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope.woff2) format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format('woff2');}

:root{
  --ink:#12172b;
  --ink-soft:#3b4262;
  --muted:#5d6584;
  --paper:#f4f3ef;
  --surface:#ffffff;
  --line:rgba(18,23,43,0.14);
  --deep:#023e8a;
  --violet:#46398a;
  --sun:#f2a93b;
  /* Texte et voiles posés sur les photos : identiques en clair et en sombre. */
  --on-photo:#ffffff;
  --on-photo-soft:rgba(255,255,255,0.76);
  --on-photo-line:rgba(255,255,255,0.22);
  --scrim:rgba(8,11,24,0.5);
  --scrim-strong:rgba(8,11,24,0.85);
  --bezel:#0d0f17;
  /* Maquette d'iPhone : tranche en titane, île et barre d'état. */
  --ti-light:#a3a5aa;
  --ti-mid:#5e6065;
  --ti-dark:#2a2b30;
  --ti-glint:rgba(255,255,255,0.32);
  --island:#000000;
  /* Haut des écrans du récap, sous la barre d'état : même teinte que l'écran. */
  --recap-top:#063e88;
  --recap-top-violet:#423989;
  --recap-top-night:#03060c;
  --night:#0b0f1e;
  --night-soft:#141a30;
  /* Carte de « Pendant le voyage » et tracés (rose : le trajet réel, comme dans le récap). */
  --map-land:#e9e6dd;
  --map-street:#f8f7f3;
  --map-road:#ffffff;
  --map-park:#d4dcc7;
  --map-water:#c9d6e3;
  --map-water-ink:#6f86a3;
  --trail:#d4689a;
  --traveler:#023e8a;
  --pin:#46398a;
  /* Bannière de notification dans l'écran du téléphone (interface claire). */
  --notif-bg:rgba(246,246,249,0.95);
  --notif-ink:#12172b;
  --notif-muted:#5d6584;
  --shadow-notif:0 10px 30px -12px rgba(8,11,24,0.45);
  --shadow-card:0 18px 40px -24px rgba(10,14,31,0.45);
  --shadow:0 40px 70px -30px rgba(10,14,31,0.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-head:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-accent:'Instrument Serif',ui-serif,Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef0f7;
    --ink-soft:#c3c8dc;
    --muted:#959cb8;
    --paper:#0b0f1e;
    --surface:#141a30;
    --line:rgba(238,240,247,0.14);
    --map-land:#111830;
    --map-street:#1e2746;
    --map-road:#2a3460;
    --map-park:#173029;
    --map-water:#0b1f42;
    --map-water-ink:#5674a3;
    --trail:#ef97ba;
    --traveler:#7fb0ff;
    --pin:#a79cf2;
  }
}
:root[data-theme="dark"]{
  --ink:#eef0f7;
  --ink-soft:#c3c8dc;
  --muted:#959cb8;
  --paper:#0b0f1e;
  --surface:#141a30;
  --line:rgba(238,240,247,0.14);
  --map-land:#111830;
  --map-street:#1e2746;
  --map-road:#2a3460;
  --map-park:#173029;
  --map-water:#0b1f42;
  --map-water-ink:#5674a3;
  --trail:#ef97ba;
  --traveler:#7fb0ff;
  --pin:#a79cf2;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-0.035em;line-height:1;margin:0;}
h1 em,h2 em,h3 em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px;}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);color:var(--ink);padding:.6rem 1rem;z-index:50;}
.skip:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;}

/* ---------- Libellés de section : numéro + filet, pas de capsule ---------- */
.label{display:flex;align-items:baseline;gap:14px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.label .n{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--ink);}
.on-photo .label{color:var(--on-photo-soft);}
.on-photo .label .n{color:var(--on-photo);}

/* ---------- Boutons : rectangles nets, flèche qui glisse ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.9rem;min-height:52px;padding:0 1.4rem;font-family:var(--font-head);font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;}
.btn .arrow{width:18px;height:18px;flex:none;transition:transform .5s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}
.btn-light{background:var(--on-photo);color:#12172b;}
.btn-line{color:var(--on-photo);border-color:var(--on-photo-line);transition:border-color .3s ease;}
.btn-line:hover{border-color:var(--on-photo);}
.link-under{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease);}
.link-under:hover{background-size:0 1px;background-position:100% 100%;}

/* ---------- Navigation ---------- */
.nav{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1320px;margin:0 auto;padding:26px 32px;color:var(--on-photo);}
.nav-fixed{position:fixed;top:0;left:0;right:0;max-width:none;transition:transform .6s var(--ease),background-color .4s ease,padding .4s ease;}
.nav-fixed.is-solid{background:rgba(11,15,30,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px;}
.nav-fixed.is-hidden{transform:translateY(-100%);}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--on-photo);}
.brand img{width:30px;height:30px;}
.brand span{font-family:var(--font-head);font-weight:600;font-size:1.1rem;letter-spacing:-0.02em;}
.nav-links{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0;}
.nav-links a{text-decoration:none;font-size:.88rem;font-weight:600;color:var(--on-photo-soft);transition:color .3s ease;}
.nav-links a:hover{color:var(--on-photo);}
.nav-right{display:flex;align-items:center;gap:1.4rem;}
.lang-switch{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--on-photo-line);}
.lang-btn{appearance:none;border:0;background:none;padding:.3rem .1rem;color:var(--on-photo-soft);font:inherit;cursor:pointer;border-bottom:1px solid transparent;}
.lang-btn[aria-pressed="true"]{color:var(--on-photo);border-bottom-color:var(--on-photo);}
.nav .btn{min-height:42px;padding:0 1.1rem;font-size:.85rem;}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;color:var(--on-photo);background:var(--night);overflow:hidden;}
.hero-media{position:absolute;inset:0;will-change:transform;}
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--scrim) 0%,rgba(8,11,24,0.1) 38%,var(--scrim-strong) 100%);}
.hero-body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:56px;will-change:transform,opacity;}
.hero h1{font-size:clamp(3.6rem,12.5vw,12rem);font-weight:700;letter-spacing:-0.05em;line-height:.92;margin:0 0 40px;}
.hero h1 .line{display:block;}
.hero h1 em{font-weight:400;letter-spacing:-0.02em;}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding-top:28px;border-top:1px solid var(--on-photo-line);}
.hero-row p{max-width:520px;color:var(--on-photo-soft);font-size:1.05rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- Sections ---------- */
.section{padding:140px 0;}
.section-follow{padding-top:0;}
.sec-top{padding-top:20px;border-top:1px solid var(--line);margin-bottom:56px;display:flex;justify-content:space-between;gap:1rem;}
.sec-top .aside{font-size:.8rem;color:var(--muted);}
.on-photo .sec-top{border-top-color:var(--on-photo-line);}
.on-photo .sec-top .aside{color:var(--on-photo-soft);}
.sec-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:80px;}
.sec-grid h2{font-size:clamp(2.6rem,6.4vw,5.6rem);}
.sec-grid p{color:var(--muted);font-size:1.1rem;max-width:460px;}

/* ---------- Maquette d'iPhone ----------
   Tout est proportionnel à --w (largeur de l'appareil) : tranche en titane,
   bordure noire, écran au format 1320/2868 arrondi à 12,5 % de sa largeur,
   boutons latéraux. .iphone-chrome ajoute l'île et la barre d'état pour les
   écrans exportés sans elles ; les captures du simulateur les ont déjà. */
.iphone{--w:250px;position:relative;flex:none;width:var(--w);padding:calc(var(--w) * .011);border-radius:calc(var(--w) * .15);background:linear-gradient(140deg,var(--ti-light) 0%,var(--ti-mid) 16%,var(--ti-dark) 38%,var(--ti-mid) 62%,var(--ti-light) 84%,var(--ti-mid) 100%);box-shadow:inset 0 0 0 1px var(--ti-glint),var(--shadow);}
.iphone::before,.iphone::after{content:"";position:absolute;width:calc(var(--w) * .012);}
/* Bouton Action puis volume +/- à gauche, bouton latéral à droite. */
.iphone::before{left:calc(var(--w) * -.009);top:15.5%;height:20%;background:linear-gradient(var(--ti-mid),var(--ti-mid)) 0 0/100% 15% no-repeat,linear-gradient(var(--ti-mid),var(--ti-mid)) 0 52%/100% 30% no-repeat,linear-gradient(var(--ti-mid),var(--ti-mid)) 0 100%/100% 30% no-repeat;}
.iphone::after{right:calc(var(--w) * -.009);top:25%;height:11.5%;background:var(--ti-mid);}
.iphone-screen{position:relative;box-sizing:content-box;aspect-ratio:1320/2868;border:calc(var(--w) * .022) solid var(--bezel);border-radius:calc(var(--w) * .139);overflow:hidden;background:var(--bezel);}
.iphone-screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
.iphone-chrome .iphone-screen{background:var(--recap-top);}
.iphone-chrome[data-top="violet"] .iphone-screen{background:var(--recap-top-violet);}
.iphone-chrome[data-top="night"] .iphone-screen{background:var(--recap-top-night);}
.iphone-chrome .iphone-screen > img{top:5.5%;height:94.5%;}
.iphone-chrome .iphone-screen::before{content:"";position:absolute;z-index:2;left:50%;top:1.2%;width:28.6%;height:3.9%;border-radius:999px;background:var(--island);transform:translateX(-50%);}
.iphone-status{position:absolute;z-index:1;left:0;right:0;top:0;height:6.3%;display:flex;align-items:center;justify-content:space-between;padding:0 8.5% 0 11%;color:var(--on-photo);font:600 calc(var(--w) * .052)/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',var(--font-body);letter-spacing:-0.01em;}
.iphone-status::before{content:"9:41";}
.iphone-status::after{content:"";width:calc(var(--w) * .2);height:calc(var(--w) * .034);background:currentColor;-webkit-mask:var(--status-icons) no-repeat center/contain;mask:var(--status-icons) no-repeat center/contain;}
:root{--status-icons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 13'%3E%3Crect x='0' y='8' width='3.2' height='4.4' rx='.9'/%3E%3Crect x='4.8' y='5.8' width='3.2' height='6.6' rx='.9'/%3E%3Crect x='9.6' y='3.4' width='3.2' height='9' rx='.9'/%3E%3Crect x='14.4' y='1' width='3.2' height='11.4' rx='.9'/%3E%3Cpath d='M23.6 4.9a10.4 10.4 0 0 1 14.8 0M26.4 7.8a6.4 6.4 0 0 1 9.2 0' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='10.9' r='1.7'/%3E%3Crect x='46.6' y='1' width='24.4' height='11.4' rx='3.4' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='1.1'/%3E%3Crect x='48.6' y='3' width='17.6' height='7.4' rx='1.8'/%3E%3Crect x='72.4' y='4.6' width='1.7' height='4.2' rx='.85' fill-opacity='.45'/%3E%3C/svg%3E");}

/* Scène : sept téléphones en éventail sur un paysage, comme l'affiche.
   Chaque .slot place un téléphone dans l'arc (--x, --y en largeurs de
   téléphone, --r, --s). --k (0 → 1, posé par motion.js) va de « empilé
   derrière le central, bas et droit » à cette place ; --d (0 → 1) ajoute
   ensuite la profondeur : les téléphones extérieurs dérivent davantage.
   Sans mouvement : --k = 1, --d = 0, l'éventail final. */
.stage-pin{position:relative;}
.stage-pin.is-pinned{height:220vh;}
.stage-pin.is-pinned .stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;}
.stage{position:relative;height:min(92vh,820px);min-height:560px;overflow:hidden;background:var(--night);}
.stage-media{position:absolute;inset:-12% 0;will-change:transform;}
.stage-media img{width:100%;height:100%;object-fit:cover;transform-origin:50% 55%;}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,24,0) 45%,var(--scrim) 100%);pointer-events:none;}
.phones{--pw:min(290px,33vh);--spread:1;--d:0;position:absolute;z-index:1;left:50%;bottom:0;width:0;height:0;transform-origin:0 100%;}
.slot{--k:1;--x:0;--y:.2;--r:0deg;--s:1;position:absolute;left:0;bottom:0;z-index:4;transform-origin:50% 100%;
  transform:
    translate(calc(-50% + var(--pw) * (var(--x) * var(--spread) * var(--k) + var(--i) * var(--d) * .03)),
              calc(var(--pw) * (.8 + (var(--y) - .8) * var(--k) - var(--a) * var(--d) * .05)))
    rotate(calc(var(--r) * var(--k)))
    scale(calc(1 + (var(--s) - 1) * var(--k)));}
.slot .iphone{--w:var(--pw);}
.slot:nth-child(3),.slot:nth-child(5){z-index:3;--y:.25;--s:.86;}
.slot:nth-child(2),.slot:nth-child(6){z-index:2;--y:.33;--s:.74;}
.slot:nth-child(1),.slot:nth-child(7){z-index:1;--y:.45;--s:.63;}
.slot:nth-child(3){--x:-.76;--r:-5deg;}
.slot:nth-child(5){--x:.76;--r:5deg;}
.slot:nth-child(2){--x:-1.36;--r:-10deg;}
.slot:nth-child(6){--x:1.36;--r:10deg;}
.slot:nth-child(1){--x:-1.86;--r:-15deg;}
.slot:nth-child(7){--x:1.86;--r:15deg;}
.stage-caption{position:absolute;z-index:2;left:32px;top:28px;margin:0;color:var(--on-photo-soft);font-size:.8rem;font-weight:600;letter-spacing:.04em;}

.manifesto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;margin-top:120px;}
.manifesto .lead{font-family:var(--font-head);font-weight:500;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.22;letter-spacing:-0.025em;}
.manifesto .lead span + span{color:var(--muted);}

/* Bandeau de destinations qui glisse avec le défilement. */
.band{overflow:hidden;padding:0 0 140px;}
.band-track{display:flex;gap:.45em;white-space:nowrap;font-family:var(--font-head);font-weight:600;font-size:clamp(3.4rem,9vw,8.5rem);letter-spacing:-0.045em;line-height:1.1;will-change:transform;}
.band-track span:nth-child(even){font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em;color:var(--muted);}

/* « Comment ça marche » : piste horizontale, épinglée pendant le défilement,
   glissée au doigt quand l'animation est réduite. */
.how{position:relative;background:var(--night);color:var(--on-photo);}
.how-sticky{padding:120px 0 100px;}
.how.is-pinned .how-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.how-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:48px;}
.how-head h2{font-size:clamp(2.4rem,5vw,4.4rem);margin-top:28px;}
.how-meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--on-photo-soft);}
.how-bar{width:180px;height:1px;background:var(--on-photo-line);position:relative;}
.how-bar i{position:absolute;inset:0;background:var(--on-photo);transform-origin:left;transform:scaleX(var(--hp,0));}
.how-track{display:flex;gap:24px;padding:0 max(32px,calc((100vw - 1320px) / 2 + 32px));will-change:transform;}
.how:not(.is-pinned) .how-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.how:not(.is-pinned) .how-track::-webkit-scrollbar{display:none;}
.panel{position:relative;flex:none;width:min(560px,82vw);height:min(62vh,560px);min-height:440px;padding:36px;overflow:hidden;background:var(--night-soft);border:1px solid var(--on-photo-line);scroll-snap-align:center;display:flex;flex-direction:column;}
.panel .idx{font-family:var(--font-accent);font-style:italic;font-size:1.5rem;color:var(--sun);}
.panel h3{font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-0.03em;margin:auto 0 14px;max-width:16ch;}
.panel p{color:var(--on-photo-soft);max-width:38ch;}
.panel-top h3{margin-top:28px;}
.panel-photo{border:0;}
.panel-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.panel-photo:hover > img{transform:scale(1.04);}
.panel-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--scrim-strong) 0%,var(--scrim) 40%,rgba(8,11,24,0) 70%);}
.panel-photo > *:not(img){position:relative;z-index:2;}
.panel .iphone{position:absolute;z-index:2;right:36px;bottom:-190px;--w:200px;transform:rotate(-5deg);transition:transform .9s var(--ease);}
.panel:hover .iphone{transform:rotate(-2deg) translateY(-14px);}
.panel-narrow{max-width:52%;}
.modes{list-style:none;margin:8px 0 0;padding:0;}
.modes li{display:grid;grid-template-columns:40px 1fr;padding:13px 0;border-top:1px solid var(--on-photo-line);}
.modes i{font-family:var(--font-accent);color:var(--on-photo-soft);}
.modes b{font-family:var(--font-head);font-weight:500;}
.modes span{grid-column:2;color:var(--on-photo-soft);font-size:.92rem;}
.panel-ody{position:absolute;right:30px;top:26px;width:78px;}

/* « Pendant le voyage » : une carte de Lisbonne où le trajet réel quitte le
   plan. Épinglée et pilotée par le défilement (version resserrée sous
   1080 px, en fin de fichier). Sans animation, on voit l'état final. */
.trip{position:relative;background:var(--paper);}
.trip-sticky{padding:140px 0;}
.trip.is-pinned{height:360vh;}
.trip.is-pinned .trip-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:72px 0 28px;display:flex;flex-direction:column;justify-content:center;}
.trip.is-pinned .sec-top{margin-bottom:28px;}
.trip-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;}
.trip-copy h2{font-size:clamp(2.4rem,4.2vw,3.6rem);margin-bottom:36px;}
@media (min-width: 1080px){.trip-copy h2{font-size:clamp(2.3rem,3.2vw,3.1rem);margin-bottom:28px;}}
.trip-steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);}
.trip-step{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-top:1px solid var(--line);position:relative;}
.trip-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0);}
.trip-step i{font-family:var(--font-accent);font-size:1.15rem;color:var(--muted);}
.trip-step b{display:block;font-family:var(--font-head);font-weight:500;font-size:1.02rem;letter-spacing:-0.01em;}
.trip-step span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;}

/* Carte */
.trip-map{position:relative;margin:0;border:1px solid var(--line);background:var(--map-land);aspect-ratio:640/600;overflow:hidden;}
.trip-map > svg{display:block;width:100%;height:100%;}
.trip-water{fill:var(--map-water);}
.trip-parks{fill:var(--map-park);}
.trip-streets{fill:none;stroke:var(--map-street);stroke-width:3;stroke-linecap:round;}
.trip-roads{fill:none;stroke:var(--map-road);stroke-width:7;stroke-linecap:round;}
.trip-square{fill:var(--map-road);}
.trip-places text{font-family:var(--font-accent);font-style:italic;font-size:21px;fill:var(--muted);paint-order:stroke;stroke:var(--map-land);stroke-width:5px;stroke-linejoin:round;}
.trip-places .trip-river{font-size:30px;fill:var(--map-water-ink);stroke:none;}
.trip-plan{fill:none;stroke:var(--ink-soft);stroke-width:2.5;stroke-dasharray:7 7;stroke-linecap:round;}
.trip-trail{fill:none;stroke:var(--trail);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.trip-stops circle{fill:var(--ink);stroke:var(--map-land);stroke-width:3;}
.trip-stops text{font:700 12px/1 var(--font-body);fill:var(--paper);text-anchor:middle;}
.trip-stop-names text{font:600 12.5px/1 var(--font-body);fill:var(--ink-soft);paint-order:stroke;stroke:var(--map-land);stroke-width:4px;stroke-linejoin:round;}
.trip-ripple{fill:none;stroke:var(--sun);stroke-width:2.5;}
.trip-dev{fill:none;stroke:var(--sun);stroke-width:2.5;stroke-dasharray:3 3;}
.trip-pin{transform-box:fill-box;transform-origin:50% 100%;}
.trip-pin path{stroke:var(--pin);stroke-width:2;}
.trip-pin rect{fill:var(--map-land);stroke:var(--pin);stroke-width:2;}
.trip-pin text{font-family:var(--font-accent);font-style:italic;font-size:17px;fill:var(--pin);text-anchor:middle;}
.trip.is-chosen .trip-pin.is-pick rect{fill:var(--pin);}
.trip.is-chosen .trip-pin.is-pick text{fill:var(--map-land);}
.trip.is-chosen .trip-pin:not(.is-pick){opacity:.4;}
.trip-me-dot{fill:var(--traveler);stroke:var(--on-photo);stroke-width:2.5;}
.trip-me-pulse{fill:var(--traveler);opacity:0;transform-box:fill-box;transform-origin:center;}
.trip-legend{position:absolute;right:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;font-weight:600;color:var(--ink-soft);}
.trip-legend > span{display:inline-flex;align-items:center;gap:8px;}
.trip-legend svg{width:28px;height:4px;overflow:visible;}

/* Téléphone, bannière de notification et propositions d'Ody */
.trip-phone{position:relative;display:flex;padding-right:min(34%,170px);}
.trip-phone .iphone{--w:min(230px,52vw);}
.trip-notif{position:absolute;z-index:3;left:4%;right:4%;top:6.2%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 calc(var(--w) * .04);align-items:start;padding:calc(var(--w) * .04);border-radius:calc(var(--w) * .07);background:var(--notif-bg);color:var(--notif-ink);box-shadow:var(--shadow-notif);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.trip-notif-icon{width:calc(var(--w) * .12);height:calc(var(--w) * .12);border-radius:calc(var(--w) * .028);background:var(--deep);display:grid;place-items:center;}
.trip-notif-icon img{width:66%;height:auto;}
.trip-notif-body{display:flex;flex-direction:column;font-size:calc(var(--w) * .047);line-height:1.3;}
.trip-notif-body b{font-weight:700;}
.trip-notif-time{font-size:calc(var(--w) * .04);color:var(--notif-muted);}
.trip-cards{position:absolute;z-index:4;right:0;bottom:9%;width:min(300px,64%);}
.trip-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card);}
.trip-card-head{padding:12px 14px;border-left:3px solid var(--trail);}
.trip-card-from{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.trip-card-head p{font-family:var(--font-head);font-weight:500;font-size:.88rem;line-height:1.3;letter-spacing:-0.01em;}
.trip-card-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.trip-card-list .trip-card{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:8px 12px;}
.trip-card-list i{font-family:var(--font-accent);font-size:1.05rem;color:var(--pin);}
.trip-card-list b{display:block;font-family:var(--font-head);font-weight:500;font-size:.9rem;line-height:1.25;}
.trip-card-list span{display:block;font-size:.78rem;color:var(--muted);}
.trip-card-list em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--trail);opacity:0;}
.trip.is-chosen .trip-card.is-pick{border-color:var(--pin);}
.trip.is-chosen .trip-card.is-pick em{opacity:1;}
.trip.is-chosen .trip-card-list .trip-card:not(.is-pick) > *{opacity:.45;}

@media (min-width: 720px) and (max-width: 1079px){
  .trip-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
  .trip-copy{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;}
  .trip-copy h2{margin-bottom:0;}
  .trip-phone{padding-right:0;padding-bottom:170px;}
  .trip-phone .iphone{--w:210px;}
  .trip-cards{right:-8px;bottom:0;width:260px;}
}
@media (min-width: 1080px){
  .trip-grid{grid-template-columns:minmax(260px,.8fr) minmax(0,1.5fr) auto;align-items:center;gap:44px;}
  .trip-phone{padding-right:0;}
  .trip-phone .iphone{--w:min(240px,17vw,calc((100vh - 190px) / 2.24));}
  .trip-cards{right:-18px;bottom:-9%;width:272px;}
  .trip.is-pinned .trip-map{width:min(100%,calc((100vh - 190px) * 640 / 600));justify-self:center;}
}
@media (max-width: 720px){
  .trip-sticky{padding:96px 0;}
  .trip-legend{position:static;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper);}
  .trip-map{aspect-ratio:auto;}
  .trip-map > svg{aspect-ratio:640/600;height:auto;}
}

/* États intermédiaires : uniquement quand l'animation joue. */
.motion .trip-step{opacity:.38;transition:opacity .5s ease;}
.motion .trip-step::before{transition:transform .8s var(--ease);}
.motion .trip-step.is-on{opacity:1;}
.motion .trip-step.is-on::before{transform:scaleX(1);}
.motion .trip-me-pulse{animation:trip-pulse 2.2s ease-out infinite;}
@keyframes trip-pulse{from{opacity:.45;transform:scale(1);}to{opacity:0;transform:scale(3.4);}}
.motion .trip-dev,.motion .trip-notif,.motion .trip-cards,.motion .trip-card,.motion .trip-card > *,.motion .trip-pin{transition:opacity .5s ease,transform .7s var(--ease),border-color .4s ease,fill .4s ease;}
.motion .trip-pin{transition-delay:calc(var(--k,0) * 120ms);}
.motion .trip-card-list .trip-card{transition-delay:calc(120ms + var(--k,0) * 110ms);}
.motion .trip:not(.is-alert) .trip-dev{opacity:0;}
.motion .trip:not(.is-alert) .trip-notif{opacity:0;transform:translateY(-130%);}
.motion .trip:not(.is-ideas) .trip-pin{opacity:0;transform:scale(.2);}
.motion .trip:not(.is-ideas) .trip-cards{opacity:0;transform:translateY(24px);}
.motion .trip:not(.is-ideas) .trip-card-list .trip-card{opacity:0;transform:translateX(18px);}

/* Récap : une rangée de téléphones qui glisse avec le défilement sur grand
   écran, épinglée sur petit écran (fin de fichier), glissée au doigt quand
   l'animation est réduite. */
.recap{padding-bottom:120px;}
.recap .sec-grid{margin-bottom:56px;}
.recap-row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.recap-row::-webkit-scrollbar{display:none;}
.recap-row.is-linked{overflow-x:clip;}
.recap-track{display:flex;align-items:flex-start;gap:48px;width:max-content;padding:20px max(32px,calc((100vw - 1320px) / 2 + 32px)) 90px;will-change:transform;}
.recap-item{flex:none;margin:0;scroll-snap-align:center;}
.recap-item:nth-child(even){transform:translateY(64px);}
.recap-item .iphone{--w:236px;}
.recap-item figcaption{display:flex;gap:12px;align-items:baseline;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);}
.recap-item figcaption i{font-family:var(--font-accent);font-size:1.1rem;color:var(--ink);}
.recap + .section-facts{padding-top:40px;}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.facts > div{padding-top:20px;border-top:1px solid var(--line);}
.facts strong{display:block;font-family:var(--font-head);font-weight:500;font-size:clamp(3rem,6vw,5rem);letter-spacing:-0.05em;line-height:1;}
.facts span{display:block;margin-top:.8rem;color:var(--muted);font-size:.92rem;}

/* Équipe : une liste, pas des cartes. */
.crew{position:relative;z-index:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);}
.crew li{position:relative;border-top:1px solid var(--line);}
.crew a{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:28px 0;text-decoration:none;}
.crew a:focus-visible{outline-offset:-2px;}
.crew li::before{content:"";position:absolute;inset:0 -32px;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1;}
.crew .n{font-family:var(--font-accent);font-style:italic;font-size:1.3rem;color:var(--muted);transition:color .3s ease;}
.crew .name{font-family:var(--font-head);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-0.035em;line-height:1.05;transition:transform .6s var(--ease),color .3s ease;}
.crew .role{color:var(--muted);text-align:right;transition:color .3s ease;}
.crew-in{display:inline-flex;align-items:center;gap:6px;min-width:96px;justify-content:flex-end;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .3s ease;}
.crew-in svg{width:16px;height:16px;transition:transform .5s var(--ease);}
.crew li:hover::before,.crew li:focus-within::before{transform:scaleY(1);}
.crew li:hover .name,.crew li:focus-within .name{transform:translateX(16px);color:var(--paper);}
.crew li:hover .role,.crew li:hover .n,.crew li:hover .crew-in,.crew li:focus-within .role,.crew li:focus-within .n,.crew li:focus-within .crew-in{color:var(--paper);}
.crew li:hover .crew-in svg,.crew li:focus-within .crew-in svg{transform:translate(3px,-3px);}
.crew-foot{margin-top:28px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.92rem;}
.crew-social{display:flex;gap:1.6rem;flex-wrap:wrap;color:var(--ink);}

/* Bêta. */
.beta{position:relative;color:var(--on-photo);background:var(--night);overflow:hidden;}
.beta-media{position:absolute;inset:-12% 0;will-change:transform;}
.beta-media img{width:100%;height:100%;object-fit:cover;}
.beta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim) 60%,rgba(8,11,24,0.15) 100%);}
.beta .wrap{position:relative;z-index:2;padding-top:140px;padding-bottom:140px;}
.beta-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:end;}
.beta h2{font-size:clamp(2.8rem,7vw,6.2rem);margin-bottom:28px;}
.beta-intro{color:var(--on-photo-soft);font-size:1.1rem;max-width:480px;}
.steps{list-style:none;margin:0 0 36px;padding:0;counter-reset:s;border-bottom:1px solid var(--on-photo-line);}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;padding:20px 0;border-top:1px solid var(--on-photo-line);}
.steps li::before{content:"0" counter(s);font-family:var(--font-accent);font-style:italic;font-size:1.3rem;color:var(--sun);}
.steps strong{display:block;font-family:var(--font-head);font-weight:500;font-size:1.1rem;}
.steps span{color:var(--on-photo-soft);font-size:.94rem;}
.beta-actions{display:flex;flex-wrap:wrap;gap:12px;}
.beta-note{margin-top:24px;font-size:.85rem;color:var(--on-photo-soft);}

/* ---------- Pied de page ---------- */
.footer{background:var(--night);color:var(--on-photo-soft);padding:90px 0 36px;overflow:hidden;}
.footer-word{font-family:var(--font-head);font-weight:700;font-size:clamp(4rem,17vw,16rem);letter-spacing:-0.06em;line-height:.85;color:var(--on-photo);margin:0 0 70px;}
.footer-word em{font-family:var(--font-accent);font-weight:400;letter-spacing:-0.02em;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-top:28px;border-top:1px solid var(--on-photo-line);}
.footer .brand{margin-bottom:1rem;}
.footer-tag{max-width:320px;font-size:.92rem;}
.footer h4{margin:0 0 1rem;font:700 .72rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-photo);}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem;}
.footer a{text-decoration:none;}
.footer a:hover{color:var(--on-photo);text-decoration:underline;}
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--on-photo-line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8rem;}
.footer-bottom img{height:20px;width:auto;opacity:.85;}

/* ---------- Pages légales ---------- */
.legal-head{background:var(--night);color:var(--on-photo);position:relative;overflow:hidden;}
.legal-head > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;}
.legal-head .nav,.legal-head .legal-title{position:relative;z-index:1;}
.legal-title{max-width:880px;margin:0 auto;padding:48px 32px 0;}
.legal-title .back{color:var(--on-photo-soft);text-decoration:none;font-weight:600;font-size:.9rem;}
.legal-title .back:hover{color:var(--on-photo);}
.legal-title h1{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-0.045em;margin:1.2rem 0 .8rem;}
.legal-title p{color:var(--on-photo-soft);}
.legal-tabs{display:flex;flex-wrap:wrap;column-gap:2rem;margin-top:48px;border-top:1px solid var(--on-photo-line);}
.legal-tabs a{font-size:.85rem;font-weight:600;text-decoration:none;padding:18px 0 20px;color:var(--on-photo-soft);border-top:2px solid transparent;margin-top:-1px;}
.legal-tabs a:hover{color:var(--on-photo);}
.legal-tabs a[aria-current="page"]{color:var(--on-photo);border-top-color:var(--on-photo);}
.legal{max-width:880px;margin:0 auto;padding:64px 32px 120px;}
.legal section{padding:32px 0;border-top:1px solid var(--line);scroll-margin-top:20px;}
.legal section:first-child{border-top:0;padding-top:0;}
.legal h2{font-size:1.5rem;letter-spacing:-0.025em;margin:0 0 1rem;}
.legal h3{font-size:1.02rem;letter-spacing:-0.01em;margin:1.2rem 0 .5rem;}
.legal p,.legal ul,.legal .table-wrap{margin:0 0 1rem;color:var(--ink-soft);}
.legal ul{padding-left:1.2rem;}
.legal li{margin-bottom:.45rem;}
.legal strong{color:var(--ink);}
.legal .muted{color:var(--muted);font-size:.9rem;}
.legal table{width:100%;border-collapse:collapse;font-size:.92rem;}
.legal th,.legal td{text-align:left;vertical-align:top;padding:.65rem .5rem;border-top:1px solid var(--line);}
.legal th{color:var(--ink);}
.table-wrap{overflow-x:auto;}
.legal address{font-style:normal;}
[data-lang-block][hidden]{display:none;}

/* ---------- Mouvement ----------
   Tout est sous .motion, posée par le script quand l'utilisateur n'a pas
   demandé à réduire les animations : sans JS, la page reste lisible. */
.motion .reveal{opacity:0;transform:translateY(48px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms);}
.motion .reveal.is-in{opacity:1;transform:none;}
.motion .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;}
.motion .split .w > span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 55ms);}
.motion .split.is-in .w > span{transform:none;}
.motion .clip{clip-path:inset(14% 10% 14% 10%);transition:clip-path 1.5s var(--ease);}
.motion .clip.is-in{clip-path:inset(0 0 0 0);}
/* Éventail : léger flottement de chaque téléphone, sur l'.iphone pour ne pas
   se battre avec la transformation du .slot ; en pause hors de l'écran. */
.motion .slot{will-change:transform;}
.motion .slot .iphone{animation:stage-float 6.4s ease-in-out infinite alternate;}
.motion .slot:nth-child(1) .iphone{animation-duration:7.2s;animation-delay:-2.1s;}
.motion .slot:nth-child(2) .iphone{animation-duration:5.8s;animation-delay:-4.3s;}
.motion .slot:nth-child(3) .iphone{animation-duration:6.9s;animation-delay:-1.2s;}
.motion .slot:nth-child(5) .iphone{animation-duration:6.1s;animation-delay:-3.4s;}
.motion .slot:nth-child(6) .iphone{animation-duration:7.6s;animation-delay:-.6s;}
.motion .slot:nth-child(7) .iphone{animation-duration:5.5s;animation-delay:-2.8s;}
.motion .stage:not(.is-near) .slot .iphone{animation-play-state:paused;}
@keyframes stage-float{from{transform:translateY(0);}to{transform:translateY(calc(var(--pw) * -.04));}}
.motion .line-in{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease);}
.motion .line-in.is-in{transform:none;}
.motion .hero-bg{animation:hero-zoom 2.6s var(--ease) both;}
@keyframes hero-zoom{from{transform:scale(1.18);}to{transform:scale(1.02);}}
.motion .hero-row{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease) .8s,transform 1.2s var(--ease) .8s;}
.motion .hero.is-in .hero-row{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width: 1240px){
  .phones{transform:scale(.88);}
}
@media (max-width: 1080px){
  .phones{--spread:.86;}
  .nav-links{display:none;}
  .sec-grid,.beta-grid,.manifesto{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  .wrap{padding:0 18px;}
  .nav{padding:16px 18px;}
  .nav .btn{display:none;}
  .section{padding:96px 0;}
  .section-follow{padding-top:0;}
  .sec-top{margin-bottom:36px;}
  .sec-grid{margin-bottom:48px;}
  .hero h1{margin:22px 0 28px;}
  .hero-row{grid-template-columns:1fr;gap:24px;}
  .hero-body{padding-bottom:32px;}
  .stage{height:600px;min-height:0;}
  .phones{--pw:260px;--spread:.62;transform:scale(.76);}
  .stage-caption{left:18px;top:18px;}
  .manifesto{margin-top:72px;}
  .band{padding-bottom:96px;}
  .how-sticky{padding:96px 0 80px;}
  .how-head{grid-template-columns:1fr;gap:20px;}
  .how-meta{align-items:flex-start;}
  .how-track{padding:0 18px;gap:14px;scroll-padding:0 18px;}
  .panel{padding:26px;min-height:480px;scroll-snap-align:start;}
  .panel .iphone{--w:150px;right:20px;bottom:-130px;}
  .panel-narrow{max-width:none;}
  .facts{grid-template-columns:1fr 1fr;row-gap:40px;}
  .crew a{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;padding:22px 0;}
  .crew .role{grid-column:2;grid-row:2;text-align:left;}
  .crew-in{grid-column:3;grid-row:1;min-width:0;font-size:0;}
  .crew-in svg{width:20px;height:20px;}
  .recap{padding-bottom:72px;}
  .recap-track{gap:20px;padding:12px 18px 60px;}
  .recap-row{scroll-padding:0 18px;}
  .recap-item{scroll-snap-align:start;}
  .recap-item:nth-child(even){transform:translateY(36px);}
  .recap-item .iphone{--w:190px;}
  .beta .wrap{padding-top:96px;padding-bottom:96px;}
  .beta::before{background:linear-gradient(180deg,var(--scrim) 0%,var(--scrim-strong) 100%);}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .legal-title{padding:36px 18px 0;}
  .legal-tabs{column-gap:1.2rem;}
  .legal{padding:48px 18px 96px;}
}
@media (prefers-reduced-motion: reduce){
  .btn .arrow,.panel .iphone,.panel-photo > img,.crew li::before,.crew .name,.crew-in svg{transition:none;}
}

/* Piste épinglée : plus compacte pour tenir dans la hauteur de l'écran. */
.how.is-pinned .sec-top{margin-bottom:28px;}
.how.is-pinned .how-head{margin-bottom:36px;}
.how.is-pinned .panel{height:min(54vh,520px);min-height:380px;}
.motion{scroll-behavior:smooth;}
.how .hint-pin{display:none;}
.how.is-pinned .hint-pin{display:inline;}
.how.is-pinned .hint-swipe{display:none;}
@media (max-width: 720px){
  .panel:not(.panel-photo) .iphone,.panel-ody{display:none;}
}

/* ---------- Petits écrans : mêmes scènes épinglées, resserrées ----------
   Chaque scène tient dans 100svh (hauteur avec la barre du navigateur
   visible), pour que rien ne déborde quand la barre réapparaît. */
@media (max-width: 720px){
  /* Éventail : le groupe suit la largeur ; les sept téléphones restent
     visibles, les deux extérieurs rognés par le bord. */
  .stage-pin.is-pinned .phones{--pw:min(260px,58vw,40vh);--pw:min(260px,58vw,40svh);--spread:.66;}

  /* Piste : en-tête compact en haut, panneaux dans la hauteur restante. */
  .how.is-pinned .how-sticky{justify-content:flex-start;padding:clamp(16px,7vh,64px) 0 20px;}
  .how.is-pinned .sec-top{margin-bottom:14px;}
  .how.is-pinned .how-head{gap:12px;margin-bottom:18px;}
  .how.is-pinned .how-head h2{font-size:clamp(1.65rem,7.4vw,2.2rem);margin-top:0;}
  .how.is-pinned .how-meta{flex-direction:row;align-items:center;gap:14px;}
  .how.is-pinned .how-bar{width:120px;}
  .how.is-pinned .how-track{flex:1 1 auto;min-height:0;max-height:600px;}
  .how.is-pinned .panel{height:auto;min-height:0;padding:22px;}
  .how.is-pinned .panel .idx{font-size:1.25rem;}
  .how.is-pinned .panel h3{font-size:1.45rem;margin-bottom:10px;}
  .how.is-pinned .panel-top h3{margin-top:14px;}
  .how.is-pinned .panel p{font-size:.92rem;line-height:1.5;}
  .how.is-pinned .modes{margin-top:4px;}
  .how.is-pinned .modes li{grid-template-columns:30px 1fr;padding:9px 0;}
  .how.is-pinned .modes span{font-size:.85rem;line-height:1.45;}
  .how.is-pinned .panel .iphone{--w:clamp(104px,16vh,150px);--w:clamp(104px,16svh,150px);right:16px;bottom:calc(var(--w) * -1.25);}
}

/* Récap jusqu'à 800 px (même seuil que motion.js) : la rangée reste à
   l'écran et glisse pendant le défilement, comme la piste. */
@media (max-width: 800px){
  .recap-row.is-pinned{overflow:visible;}
  .recap-row.is-pinned .recap-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
  .recap-row.is-pinned .recap-item .iphone{--w:min(236px,58vw,calc((100vh - 180px) / 2.3));--w:min(236px,58vw,calc((100svh - 180px) / 2.3));}
}

/* Pendant le voyage, sous 1080 px : légende de l'étape en cours en haut,
   carte dans la hauteur restante (rognée, voir motion.js), téléphone qui
   dépasse du bas dans le coin pour la notification, puis cède la place
   aux propositions d'Ody posées sur la carte. */
@media (max-width: 1079px){
  .trip.is-pinned .trip-sticky{display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(16px,7vh,64px) 0 0;overflow:hidden;}
  .trip.is-pinned .wrap{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;}
  .trip.is-pinned .sec-top{flex-wrap:wrap;row-gap:4px;margin-bottom:14px;}
  .trip.is-pinned .trip-grid{--peek:clamp(118px,21vh,190px);--peek:clamp(118px,21svh,190px);position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .trip.is-pinned .trip-copy{display:block;}
  .trip.is-pinned .trip-copy h2{font-size:clamp(1.5rem,6.4vw,2.4rem);margin-bottom:6px;}
  .trip.is-pinned .trip-steps{display:grid;border-bottom:0;margin-bottom:12px;}
  .trip.is-pinned .trip-step{grid-area:1 / 1;grid-template-columns:34px 1fr;padding:10px 0 0;opacity:0;}
  .trip.is-pinned .trip-step.is-on{opacity:1;}
  .trip.is-pinned .trip-step b{font-size:.95rem;}
  .trip.is-pinned .trip-step span{font-size:.85rem;line-height:1.45;}
  .trip.is-pinned .trip-map{flex:1 1 0;min-height:0;width:100%;aspect-ratio:auto;margin:0 auto calc(var(--peek) - 36px);}
  .trip.is-pinned .trip-map > svg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;}
  .trip.is-pinned .trip-legend{position:absolute;left:0;top:0;right:auto;bottom:auto;gap:4px 12px;padding:6px 9px;font-size:.7rem;background:var(--map-land);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trip.is-pinned .trip-legend svg{width:20px;}
  .trip.is-pinned .trip-phone{position:static;display:block;padding:0;}
  .trip.is-pinned .trip-phone .iphone{--w:min(230px,58vw);position:absolute;z-index:3;right:0;top:calc(100% - var(--peek));transition:transform .8s var(--ease);}
  .trip.is-pinned.is-ideas .trip-phone .iphone{transform:translateY(calc(var(--peek) + 8px));}
  .trip.is-pinned .trip-cards{position:absolute;z-index:4;left:auto;right:0;bottom:14px;width:min(380px,100%);}
  .trip.is-pinned .trip-card-head{display:none;}
  .trip.is-pinned .trip-card-list{margin:0;}
  .trip.is-pinned .trip-card-list .trip-card{padding:7px 12px;}
  .trip.is-pinned .trip-card-list b{font-size:.86rem;}
  .trip.is-pinned .trip-card-list span{font-size:.74rem;}
}
@media (max-width: 1079px) and (max-height: 700px){
  .trip.is-pinned .sec-top .aside{display:none;}
  .trip.is-pinned .trip-copy h2{font-size:clamp(1.4rem,6vw,2rem);}
}