/* goripple.app · page d'accueil (héros C allégée, fond de lave du site précédent, verre) */
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/syne-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/syne-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* repli aux mêmes métriques que Syne 800 : le titre ne bouge pas quand la police arrive */
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:700 800;size-adjust:164%;ascent-override:56.7%;descent-override:16.5%;line-gap-override:0%}

:root{
  --bg:#0C0407;
  --accent:#FF002F;
  --text:#F5F0E8;
  /* textes secondaires opaques (même luminance que l'ancien blanc à 70 % et 60 % sur le fond) : aucune teinte rose sur la lave */
  --sec:#AFA9A5;
  --ter:#9C9692;
  --line:rgba(245,240,232,.10);
  --line-strong:rgba(245,240,232,.15);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.175,.885,.32,1.275);
  --display:'Syne','Syne Fallback',sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  /* l'air entre les sections : 160 à 192 px sur ordinateur, 104 px sur téléphone */
  --space-sec:clamp(104px,12.5vw,192px);
  /* verre : le même partout (accueil et pages de texte) */
  --glass:rgba(12,4,7,.45);
  --glass-line:rgba(245,240,232,.10);
  --glass-blur:blur(22px) saturate(1.35);
  /* forme de l'écran de l'iPhone, sous le cadre */
  --scr-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 1217' preserveAspectRatio='none'%3E%3Crect width='560' height='1217' rx='87'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--bg)}
body{position:relative;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}

/* le point final des titres : un rond rouge posé sur la ligne de base */
.pt{display:inline-block;width:.18em;height:.18em;margin-left:.045em;border-radius:50%;background:var(--accent);color:transparent;overflow:hidden;vertical-align:baseline;line-height:0;font-size:inherit}

/* ── Boutons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:100px;
  background:var(--text);color:var(--bg);font:600 16px/1 var(--ui);letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 12px 32px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.4) inset;transition:transform .25s var(--ease),background .2s,translate .45s var(--ease)}
/* survol : le fond s'éclaircit, rien d'autre (pas d'ombre, pas de lueur) */
.btn:hover{background:#fff}
.btn:active{transform:scale(.98)}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-sm{height:36px;padding:0 15px;font-size:13.5px;gap:7px;box-shadow:none}
.ic-apple{width:15px;height:18px;margin-top:-2px;flex:none}
.btn-sm .ic-apple{width:12px;height:15px}

/* ── Nav ─── */
.nav{position:fixed;z-index:80;top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 2*var(--gutter));max-width:1160px;
  height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;border-radius:100px;
  background:rgba(12,4,7,.42);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(245,240,232,.10),0 10px 30px rgba(0,0,0,.25);transition:background .3s}
.nav.scrolled{background:rgba(12,4,7,.86)}
.nav-logo{display:flex;align-items:center;gap:10px;font:800 18px/1 var(--display);letter-spacing:-.03em}
.nav-logo img{width:28px;height:28px;border-radius:7px}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px}
.nav-links a{font-size:14px;color:var(--sec);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-end{display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px;padding:3px;border-radius:100px;background:rgba(245,240,232,.06);box-shadow:inset 0 0 0 1px var(--line)}
.lang-btn{font:600 11px/1 var(--ui);letter-spacing:.1em;color:var(--ter);padding:7px 10px;border-radius:100px;transition:color .2s,background .2s}
.lang-btn:hover{color:var(--text)}
.lang-btn[aria-pressed="true"]{color:var(--text);background:rgba(245,240,232,.13)}

/* ── iPhone (cadre + écran masqué) ─── */
.device{position:relative;aspect-ratio:627/1282;flex:none}
.device .dshadow{position:absolute;left:2.871%;top:1.404%;width:94.258%;height:97.192%;border-radius:14.9%/7.06%;
  box-shadow:0 60px 120px rgba(0,0,0,.62),0 22px 44px rgba(0,0,0,.42)}
.device .dscr{position:absolute;left:5.1675%;top:2.4181%;width:89.665%;height:95.164%;overflow:hidden;background:#000;
  -webkit-mask-image:var(--scr-mask);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  mask-image:var(--scr-mask);mask-size:100% 100%;mask-repeat:no-repeat}
.device .dscr>img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.device .bz{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;user-select:none}
/* sans JavaScript, la capture anglaise s'affiche par-dessus l'image d'attente */
.device .dscr noscript img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ═══ FOND : la lave du site précédent (orbes rouges et creux sombres), derrière tout le contenu ═══ */
.bg-lava{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
main,.foot{position:relative;z-index:1}
/* chaque orbe : une couleur pleine sous un fondu radial, calé sur le rendu de l'ancien site (dégradé conique flouté de 60 à 95 px),
   mais sans filtre de flou à recalculer à chaque image : même taille apparente, même intensité, même centre */
.orb{position:absolute;border-radius:50%;background:var(--c);will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.96) 10%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.52) 40%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.04) 80%,rgba(0,0,0,.014) 90%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.96) 10%,rgba(0,0,0,.85) 20%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.52) 40%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.04) 80%,rgba(0,0,0,.014) 90%,transparent 100%)}
.orb-1{--c:#FF002F;width:1104px;height:1104px;top:-402px;left:-302px;opacity:.23}
.orb-2{--c:#C8001E;width:832px;height:832px;top:calc(40% - 116px);right:-316px;opacity:.17}
.orb-3{--c:#FF1E3C;width:736px;height:736px;bottom:calc(10% - 118px);left:calc(10% - 118px);opacity:.126}
.orb-4{--c:#B40014;width:576px;height:576px;top:calc(60% - 113px);left:calc(50% - 113px);opacity:.10}
.orb-5{--c:#FF002F;width:1008px;height:1008px;bottom:-354px;right:calc(20% - 154px);opacity:.09}
.orb-6{--c:#FF1E3C;width:752px;height:752px;top:calc(12% - 116px);right:calc(12% - 116px);opacity:.126}
.orb-7{--c:#B40014;width:624px;height:624px;bottom:calc(28% - 102px);left:calc(38% - 102px);opacity:.116}
/* trois plans (lointain, moyen, creux) que la souris décale chacun à sa profondeur : le script ne touche que ces trois plans,
   jamais les orbes déjà animées par le compositeur */
.lv{position:absolute;inset:0}
.lv-on .lv{will-change:transform}
/* les deux creux, peints en couleur de fond : ils trouent la masse rouge, c'est l'effet lampe à lave de l'app */
.orb-8{--c:#0C0407;width:832px;height:832px;top:calc(28% - 96px);left:calc(6% - 96px);opacity:.63}
.orb-9{--c:#0C0407;width:704px;height:704px;bottom:calc(12% - 92px);right:calc(24% - 92px);opacity:.57}
.is-motion .orb-1{animation:orb1 28s ease-in-out infinite}
.is-motion .orb-2{animation:orb2 22s ease-in-out infinite}
.is-motion .orb-3{animation:orb3 32s ease-in-out infinite}
.is-motion .orb-4{animation:orb4 25s ease-in-out infinite}
.is-motion .orb-5{animation:orb5 35s ease-in-out infinite}
.is-motion .orb-6{animation:orb3 30s ease-in-out infinite reverse}
.is-motion .orb-7{animation:orb4 27s ease-in-out infinite reverse}
.is-motion .orb-8{animation:orb2 26s ease-in-out infinite}
.is-motion .orb-9{animation:orb1 31s ease-in-out infinite reverse}
@keyframes orb1{0%{transform:translate(0,0) scale(1)}15%{transform:translate(180px,80px) scale(1.15)}35%{transform:translate(-120px,200px) scale(.9)}55%{transform:translate(100px,-100px) scale(1.1)}75%{transform:translate(-200px,50px) scale(.95)}100%{transform:translate(0,0) scale(1)}}
@keyframes orb2{0%{transform:translate(0,0) scale(1)}20%{transform:translate(-200px,-150px) scale(1.18)}40%{transform:translate(150px,-50px) scale(.88)}60%{transform:translate(-80px,180px) scale(1.12)}85%{transform:translate(120px,60px) scale(.92)}100%{transform:translate(0,0) scale(1)}}
@keyframes orb3{0%{transform:translate(0,0) scale(1)}18%{transform:translate(140px,-160px) scale(1.1)}38%{transform:translate(-180px,-40px) scale(.92)}58%{transform:translate(60px,200px) scale(1.14)}80%{transform:translate(-100px,80px) scale(.88)}100%{transform:translate(0,0) scale(1)}}
@keyframes orb4{0%{transform:translate(0,0) scale(1)}22%{transform:translate(-160px,-120px) scale(1.2)}45%{transform:translate(120px,100px) scale(.85)}68%{transform:translate(-60px,180px) scale(1.08)}88%{transform:translate(180px,-80px) scale(.94)}100%{transform:translate(0,0) scale(1)}}
@keyframes orb5{0%{transform:translate(0,0) scale(1)}16%{transform:translate(200px,-120px) scale(1.12)}36%{transform:translate(-140px,160px) scale(.9)}56%{transform:translate(160px,80px) scale(1.16)}78%{transform:translate(-100px,-140px) scale(.92)}100%{transform:translate(0,0) scale(1)}}
.is-static .orb{will-change:auto}
/* un grain à peine perceptible (bien plus discret que l'ancien site), sous le contenu, il casse juste les dégradés */
.bg-lava .noise{position:absolute;inset:0;opacity:.016;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/256px 256px}
/* la même lave recomposée et tramée par lava.js (WebGL) : les orbes restent en place (le script relit leur position animée),
   invisibles, et le grain n'est plus utile. Sans WebGL, rien ne change. */
.bg-lava .lava-gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;visibility:hidden}
.gl-lava .bg-lava .lava-gl{visibility:visible}
.gl-lava .bg-lava .orb,.gl-lava .bg-lava .noise{visibility:hidden}

/* ═══ HÉROS (C allégée) ═══ */
.hero{position:relative;padding:118px 0 0;overflow-x:clip}
@supports not (overflow:clip){.hero{overflow:hidden}}
.hero-grid{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:24px;align-items:center}
.hero-copy{position:relative;z-index:5;padding-bottom:24px}
/* le sur-titre : la plateforme, sans badge */
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 14px;border-radius:100px;
  background:rgba(245,240,232,.05);box-shadow:inset 0 0 0 1px var(--line);
  font:600 13px/1 var(--ui);letter-spacing:.02em;color:var(--sec)}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.eyebrow .dot:not(:first-child){margin-left:5px}
.lockup{margin:28px 0 26px -.04em;font:800 clamp(52px,5.9vw,86px)/.92 var(--display);letter-spacing:-.045em;color:var(--text)}
.lockup .line{display:block;overflow:hidden;padding:.02em .1em .06em .04em;margin:-.02em -.1em -.06em -.04em}
.lockup .word{display:inline-block;white-space:nowrap;will-change:transform}
/* les points : ceux de « Listen » et « Decide » dans la couleur du texte, celui de « Swipe » en rouge */
.lockup .pt{margin-left:.05em;background:var(--text)}
.lockup .line:last-child .pt{background:var(--accent)}
.hero-sub{max-width:30em;font-size:18.5px;line-height:1.55;color:var(--sec);text-wrap:pretty}
.hero-cta{margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.micro{font-size:13px;color:var(--sec);letter-spacing:.01em}
/* note App Store : place réservée, elle apparaît sans rien décaler */
.hero-rating{min-height:20px;margin-top:-6px;font-size:13px;line-height:20px;color:var(--sec);visibility:hidden;opacity:0;transition:opacity .6s ease}
.hero-rating.is-ready{visibility:visible;opacity:1}
.hero-rating-stars{display:inline-flex;gap:2px;margin-right:8px;vertical-align:-1px;color:var(--accent)}
.hero-rating-stars svg{width:12px;height:12px}
.hero-rating-stars .off{color:rgba(245,240,232,.22)}
.hero-rating-count{color:var(--ter);white-space:nowrap}

.stage{--s:.585;position:relative;height:calc(1282px*var(--s) + 20px);min-width:0}
/* les ondes autour du téléphone, en rouge de la marque très bas, éteintes avant le bas du héros */
.rings{position:absolute;left:calc(44% - 700px);top:calc(46% - 700px);width:1400px;height:1400px;pointer-events:none;z-index:0;overflow:visible;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 78%);mask-image:linear-gradient(180deg,#000 52%,transparent 78%)}
.rings circle{fill:none;stroke:rgba(255,0,47,.17);stroke-width:1.4}
.rings circle:nth-child(3){stroke:rgba(255,0,47,.13)}
.rings circle:nth-child(4){stroke:rgba(255,0,47,.095)}
.rings circle:nth-child(5){stroke:rgba(255,0,47,.065)}

.device-live{position:absolute;z-index:3;left:44%;top:0;width:calc(627px*var(--s));transform:translateX(-50%)}
.device-back{position:absolute;z-index:1;left:44%;top:7%;width:calc(627px*var(--s)*.82);
  transform:translateX(18%) rotate(10deg);filter:brightness(.42) saturate(.85)}
/* anneau de focus du lecteur, dessiné autour du téléphone */
.device-live::after{content:"";position:absolute;left:2.871%;top:1.404%;width:94.258%;height:97.192%;border-radius:14.9%/7.06%;z-index:5;pointer-events:none;
  box-shadow:0 0 0 3px transparent;transition:box-shadow .2s}
.device-live:has(.live:focus-visible)::after{box-shadow:0 0 0 3px var(--accent)}

/* écran vivant : géométrie de l'app (1 pt = 1,425 px sur un écran de 562 px) */
.live{position:absolute;left:0;top:0;width:562.2px;height:1220px;transform-origin:0 0;transform:scale(var(--s));
  --pt:1.425px;overflow:hidden;font-family:var(--ui);color:#F5F0E8;background:#000;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;cursor:grab}
/* main fermée : au glisser à la souris (is-dragging n'est posé qu'à la souris) ; :active seulement avec un pointeur fin,
   sinon chaque appui au doigt recalculait le style de tout l'écran vivant pour un curseur invisible */
.live.is-dragging{cursor:grabbing}
@media (hover:hover) and (pointer:fine){.live:active{cursor:grabbing}}
.live img{-webkit-user-drag:none;-webkit-touch-callout:none}
.live svg{display:block;width:100%;height:100%}
.live .red{color:var(--accent)}
.live button:focus-visible{outline-width:4px;outline-offset:4px;border-radius:50%}
.pbg{position:absolute;inset:0;transition:opacity .5s ease}
/* fond tramé calculé par site.js (même dégradé, sans bandes) : deux canvas sous l'écran vivant, hors de son scale() ;
   plus proche voisin, car un lissage moyennerait le tramage et ferait revenir les bandes. Sans canvas, le dégradé CSS de .pbg */
.pbgc{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease;image-rendering:pixelated}
.live.has-cbg{background:transparent}
.live.has-cbg .pbg{display:none}
.sb{position:absolute;left:0;right:0;top:0;height:calc(var(--pt)*54);z-index:5}
.sb .time{position:absolute;left:calc(var(--pt)*38);top:calc(var(--pt)*18);font:600 calc(var(--pt)*17)/1 var(--ui);letter-spacing:-.02em}
.sb .icons{position:absolute;right:calc(var(--pt)*30);top:calc(var(--pt)*19);display:flex;gap:calc(var(--pt)*6);align-items:center}
.sb .icons img{width:auto}
.sb .i-cell,.sb .i-wifi{height:calc(var(--pt)*11.5)}
.sb .i-bat{height:calc(var(--pt)*13)}
.glass{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.circ{position:absolute;width:calc(var(--pt)*40);height:calc(var(--pt)*40);border-radius:50%;display:grid;place-items:center}
.circ svg{width:46%;height:46%}
.ph-row{position:absolute;left:0;right:0;top:calc(var(--pt)*67);height:calc(var(--pt)*40)}
.ph-row .back{left:calc(var(--pt)*16);top:0}
.ph-row .back svg{width:calc(var(--pt)*19);height:calc(var(--pt)*19)}
.pill{position:absolute;right:calc(var(--pt)*16);top:calc(var(--pt)*6);height:calc(var(--pt)*28);padding:0 calc(var(--pt)*12);border-radius:calc(var(--pt)*16);
  display:flex;align-items:center;gap:calc(var(--pt)*6);font:500 calc(var(--pt)*14)/1 var(--ui)}
.pill svg{width:calc(var(--pt)*16);height:calc(var(--pt)*16)}
.pl-name{position:absolute;left:0;right:0;top:calc(var(--pt)*113);text-align:center;font:500 calc(var(--pt)*15)/1.2 var(--ui)}
.counter{position:absolute;left:0;right:0;top:calc(var(--pt)*133);height:calc(var(--pt)*16);overflow:hidden;text-align:center;font:400 calc(var(--pt)*12)/calc(var(--pt)*16) var(--ui);color:rgba(245,240,232,.8)}
.counter span{position:absolute;left:0;right:0;top:0;transition:transform .3s ease,opacity .3s ease}
/* la carte s'arrête sous son contenu (ombre de la pochette comprise, 572 pt) au lieu de couvrir tout l'écran (1220 px) :
   sur iPhone, quand la mémoire libre passe sous 35 %, WebKit découpe en tuiles de 512 px tout calque de plus de 1024 px
   et, sous pression mémoire, ne peint que les tuiles visibles. Lâchée à droite, la carte recevait le titre suivant sans
   sa dernière colonne de tuiles (hors de l'écran à cet instant), qui manquait pendant le retour tant que la page n'avait
   pas repeint : pochette et étoile coupées à droite, la coupure tombant pile sur une limite de tuile. À 829 px de haut,
   le calque reste d'un seul tenant, toujours peint en entier. Rien ne bouge à l'écran : même origine, même pivot */
.card{position:absolute;left:0;top:0;right:0;height:calc(var(--pt)*582);transform-origin:50% calc(var(--pt)*575);will-change:transform;touch-action:pan-y}
.cover{position:absolute;left:calc(var(--pt)*31);top:calc(var(--pt)*165);width:calc(var(--pt)*331);height:calc(var(--pt)*331);border-radius:calc(var(--pt)*12);overflow:hidden;
  box-shadow:0 calc(var(--pt)*20) calc(var(--pt)*40) rgba(0,0,0,.4);background:#111}
.cover .art{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cover .veil{position:absolute;inset:0;background:#000;opacity:0}
.cover .mark{position:absolute;left:50%;top:50%;width:calc(var(--pt)*80);height:calc(var(--pt)*80);margin:calc(var(--pt)*-40) 0 0 calc(var(--pt)*-40);opacity:0;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.cover .mark.like{color:var(--accent)}
.cover .mark.nope{color:#fff}
.meta{position:absolute;left:calc(var(--pt)*32);right:calc(var(--pt)*84);top:calc(var(--pt)*520)}
.meta .t{font:700 calc(var(--pt)*22)/1.15 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .a{margin-top:calc(var(--pt)*4);font:400 calc(var(--pt)*18)/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-btn{left:calc(var(--pt)*321);top:calc(var(--pt)*523)}
.star-btn svg{width:calc(var(--pt)*18);height:calc(var(--pt)*18)}
.prog{position:absolute;left:calc(var(--pt)*32);top:calc(var(--pt)*606);width:calc(var(--pt)*329);height:calc(var(--pt)*4);border-radius:calc(var(--pt)*2);overflow:hidden}
.prog i{position:absolute;inset:0;background:rgba(255,255,255,.8);border-radius:calc(var(--pt)*2);transform:scaleX(0);transform-origin:50% 50%}
.ctrl{position:absolute;top:calc(var(--pt)*643);left:0;right:0;height:calc(var(--pt)*56)}
.ctrl .play{position:absolute;left:50%;top:0;width:calc(var(--pt)*56);height:calc(var(--pt)*56);margin-left:calc(var(--pt)*-28);border-radius:50%;display:grid;place-items:center;color:#1C1C1E;background:rgba(245,240,232,.82);transition:background .3s,transform .15s}
.ctrl .play:active{transform:scale(.92)}
.ctrl .play svg{width:calc(var(--pt)*34);height:calc(var(--pt)*34)}
.ctrl .skip{position:absolute;top:calc(var(--pt)*12);width:calc(var(--pt)*32);height:calc(var(--pt)*32);color:#fff;display:grid;place-items:center;transition:opacity .2s}
.ctrl .skip svg{width:calc(var(--pt)*30);height:calc(var(--pt)*30)}
/* zone de tap élargie, sans rien changer au rendu */
.ctrl .skip::after{content:"";position:absolute;inset:-30%}
.ctrl .prev{left:calc(var(--pt)*104)}
.ctrl .next{left:calc(var(--pt)*257)}
.ctrl .skip[disabled]{opacity:.3;cursor:default}
.acts{position:absolute;top:calc(var(--pt)*729);left:0;right:0;height:calc(var(--pt)*56)}
.acts .circ{width:calc(var(--pt)*56);height:calc(var(--pt)*56);top:0;background:rgba(40,40,44,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:transform .3s var(--spring)}
.acts .circ svg{width:calc(var(--pt)*28);height:calc(var(--pt)*28)}
.acts .act-nope{left:calc(var(--pt)*117);color:#F5F0E8}
.acts .act-like{left:calc(var(--pt)*220)}
.acts .circ.pressed{transform:scale(.9);transition:transform .15s ease}

/* pilules Liquid Glass autour de l'iPhone */
.gpill{position:absolute;top:79.6%;z-index:6;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 19px;border-radius:100px;
  font:600 15px/1 var(--ui);color:var(--text);white-space:nowrap;
  background:rgba(255,255,255,.10);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(0,0,0,.35);
  transition:transform .3s var(--spring),background .2s}
.gpill:hover{background:rgba(255,255,255,.16)}
.gpill:active{transform:scale(.95)}
.gpill svg{width:18px;height:18px}
.gpill-l{right:calc(100% + clamp(10px,4.6vw - 44px,22px))}
.gpill-l svg{color:var(--sec)}
.gpill-r{left:calc(100% + clamp(10px,4.6vw - 44px,22px))}
.gpill-r svg{color:var(--accent)}

/* intro du héros */
.is-motion .lockup .word{transform:translateY(108%)}
.is-motion .lockup .pt{transform:scale(0);transform-origin:50% 50%}
.is-motion .eyebrow,.is-motion .hero-sub,.is-motion .hero-cta{opacity:0;transform:translateY(16px)}
.is-motion .stage{opacity:0;transform:translateY(6%)}
.is-motion.is-ready .lockup .word{transform:none;transition:transform 1.15s var(--ease)}
.is-motion.is-ready .lockup .line:nth-child(1) .word{transition-delay:.15s}
.is-motion.is-ready .lockup .line:nth-child(2) .word{transition-delay:.3s}
.is-motion.is-ready .lockup .line:nth-child(3) .word{transition-delay:.45s}
.is-motion.is-ready .lockup .pt{transform:none;transition:transform .8s var(--ease)}
.is-motion.is-ready .lockup .line:nth-child(1) .pt{transition-delay:.95s}
.is-motion.is-ready .lockup .line:nth-child(2) .pt{transition-delay:1.1s}
.is-motion.is-ready .lockup .line:nth-child(3) .pt{transition-delay:1.25s}
.is-motion.is-ready .eyebrow{opacity:1;transform:none;transition:opacity .9s ease .05s,transform .9s var(--ease) .05s}
.is-motion.is-ready .hero-sub{opacity:1;transform:none;transition:opacity .4s ease .2s,transform 1.1s var(--ease) .2s}
.is-motion.is-ready .hero-cta{opacity:1;transform:none;transition:opacity .45s ease .3s,transform 1.1s var(--ease) .3s}
.is-motion.is-ready .stage{opacity:1;transform:none;transition:opacity 1s ease .4s,transform 1.5s var(--ease) .4s}
.is-motion.intro-done .stage{transition:none}
.intro-done .lockup .word{will-change:auto}

/* ═══ Titres de section ═══ */
.h2{text-align:center;font:800 clamp(36px,4.2vw,60px)/1 var(--display);letter-spacing:-.045em;text-wrap:balance}
.h2 .mw{text-wrap:balance}
/* les grands titres : chaque ligne monte de derrière un masque, comme le titre du héros */
.h2-xl{font-size:clamp(40px,5.5vw,84px);line-height:.98}
.h2-left{text-align:left}
.ml{display:block;overflow:hidden;padding:.14em .1em .12em .04em;margin:-.14em -.1em -.12em -.04em}
/* le masque ne coupe que le haut et le bas : un mot trop large ne serait jamais tronqué */
@supports (overflow:clip){.ml{overflow:visible;overflow-y:clip}}
.mw{display:inline-block}
.is-motion.js .mt .mw{transform:translateY(118%);transition:transform 1.15s var(--ease)}
.is-motion.js .mt .ml+.ml .mw{transition-delay:.09s}
.is-motion.js .mt.in .mw{transform:none}

/* ═══ ÉCOUTE : un extrait, deux sorties (la seule rangée à trois colonnes) ═══ */
.how{position:relative;padding-top:var(--space-sec);overflow-x:clip}
/* Safari < 16 ne connaît pas clip : les pochettes inclinées ne doivent pas faire bouger la page */
@supports not (overflow:clip){.how{overflow:hidden}}
.fork{--c:252px;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--c)*2) minmax(0,1fr);align-items:center;gap:40px;margin-top:clamp(48px,6vw,88px)}
.exit{display:flex;flex-direction:column;gap:12px}
.exit-skip{align-items:flex-end;text-align:right}
.exit-add{align-items:flex-start;text-align:left}
.exit-arrow{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:4px}
.exit-arrow svg{width:24px;height:24px}
.exit-skip .exit-arrow{color:var(--sec);background:rgba(245,240,232,.06);box-shadow:inset 0 0 0 1px var(--line)}
.exit-add .exit-arrow{color:var(--accent);background:rgba(255,0,47,.10);box-shadow:inset 0 0 0 1px rgba(255,0,47,.3)}
.exit-title{font:800 min(52px,calc(8.5vw - 57px))/1 var(--display);letter-spacing:-.04em}
.exit-desc{max-width:24ch;font-size:16px;line-height:1.55;color:var(--sec);text-wrap:balance}
/* les sorties arrivent chacune de leur côté */
.is-motion.js .exit-skip.rv:not(.in){transform:translateX(-36px)}
.is-motion.js .exit-add.rv:not(.in){transform:translateX(36px)}
.exit-add.rv{transition-delay:.08s}
/* l'éventail suit un peu la souris (variables posées par le script, souris seulement) */
.fan{position:relative;width:calc(var(--c)*2);height:calc(var(--c)*1.4);
  transform:perspective(1100px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));transition:transform .9s var(--ease)}
.fcard{position:absolute;left:calc(var(--c)/2);top:calc(var(--c)*.2);width:var(--c);height:var(--c);border-radius:calc(var(--c)*.064);overflow:hidden;background:#111;
  box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);transition:transform 1.3s var(--ease)}
.fcard img{width:100%;height:100%;object-fit:cover}
.fcard-c{z-index:3}
.fcard-l{z-index:1;transform:translateX(-41%) rotate(-12deg) scale(.84);transform-origin:50% 100%}
.fcard-r{z-index:2;transform:translateX(41%) rotate(12deg) scale(.84);transform-origin:50% 100%}
.fan::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,0,47,.22),transparent 72%)}
/* les lueurs : même dégradé recalculé et tramé par site.js dans un canvas posé exactement à la place du ::before */
.fan>.glowc{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.glowc{visibility:hidden}
.has-glow>.glowc{visibility:visible}
.fan.has-glow::before,.seq-stage.has-glow::before{display:none}
.fveil{position:absolute;inset:0;background:rgba(0,0,0,.3);transition:opacity .6s ease .45s}
.fmark{position:absolute;left:50%;top:50%;width:86px;height:86px;margin:-43px 0 0 -43px;color:#fff;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));transition:opacity .6s ease .45s}
.fmark.red{color:var(--accent)}
.fcard-l .fmark{left:34%}
.fcard-r .fmark{left:66%}
.fmark svg{width:100%;height:100%}
/* fermé avant d'arriver : les deux pochettes sont rangées derrière celle qui joue (le défilement l'ouvre, sinon une transition) */
.is-motion.js .fan:not(.in) .fcard-l{transform:translateX(-5%) rotate(-3deg) scale(.8)}
.is-motion.js .fan:not(.in) .fcard-r{transform:translateX(5%) rotate(3deg) scale(.8)}
.is-motion.js .fan:not(.in) .fcard-c{transform:translateY(26px) scale(.94)}
.is-motion.js .fan:not(.in) .fmark,.is-motion.js .fan:not(.in) .fveil{opacity:0}
/* l'extrait joue : un égaliseur discret sur la pochette du centre */
.eq{position:absolute;left:14px;bottom:14px;display:flex;align-items:flex-end;gap:3px;height:22px;padding:7px 8px;box-sizing:content-box;border-radius:10px;
  background:rgba(12,4,7,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eq i{width:3px;height:40%;border-radius:2px;background:var(--text)}
.eq i:nth-child(2){height:90%}
.eq i:nth-child(3){height:60%}
.eq i:nth-child(4){height:75%}
/* animé en transform (compositeur), pas en height : aucune mise en page par image */
.is-motion .eq i{height:100%;transform-origin:50% 100%;animation:eq 1.1s ease-in-out infinite alternate}
.is-motion .eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.is-motion .eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
.is-motion .eq i:nth-child(4){animation-duration:.95s;animation-delay:-.2s}
@keyframes eq{0%{transform:scaleY(.22)}100%{transform:scaleY(1)}}
/* hors de l'écran, tout s'arrête (placé après les raccourcis animation pour l'emporter) */
.is-off .eq i{animation-play-state:paused}

/* ═══ USAGES : un grand iPhone tenu à l'écran pendant que le texte change ═══ */
/* clip (pas hidden) : la section tenue reste collante */
.uses{position:relative;padding-top:var(--space-sec);overflow-x:clip}
.seq{position:relative}
.seq-mark{position:absolute;left:0;width:1px;visibility:hidden;pointer-events:none}
.seq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.seq-stage{position:relative;display:flex;justify-content:center;align-items:center}
.seq-stage::before{content:"";position:absolute;left:50%;top:50%;width:150%;max-width:100vw;height:105%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,0,47,.16),transparent 72%)}
.seq-stage>.glowc{position:absolute;left:50%;top:50%;width:150%;max-width:100vw;height:105%;transform:translate(-50%,-50%);pointer-events:none}
.device-seq{height:min(640px,calc(100vh - 170px));width:auto;margin:24px 0}
.device-seq .dscr>.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* l'écran « Construire » en deux calques : l'interface (WebP avec alpha) sur son dégradé, livré à part, tramé et sans perte
   (une bande de 64 px répétée) : la compression avec perte ne fait plus de paliers dans le fond */
.device-seq .dscr>.scr-build:not([data-lazy]){background:url(/assets/img/screens/build-bg.webp?v=20261013g) 0 50%/auto 100% repeat-x}
.steps{position:relative}
.step+.step{margin-top:48px}
.step-title{font:800 clamp(44px,4.6vw,72px)/1.06 var(--display);letter-spacing:-.045em;padding:.04em 0}
.step-title .pt{margin-left:.04em}
.step-desc{margin-top:16px;max-width:24ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--sec);text-wrap:pretty}
.seq-rail{display:none}
/* avec le script : la section se tient à l'écran pendant deux hauteurs d'écran, les marqueurs donnent l'étape au milieu de l'écran */
.js .seq{--T:200vh;height:calc(100vh + var(--T));margin-top:-40px}
.js .seq-mark[data-i="0"]{top:0;height:calc(50vh + var(--T) / 3)}
.js .seq-mark[data-i="1"]{top:calc(50vh + var(--T) / 3);height:calc(var(--T) / 3)}
.js .seq-mark[data-i="2"]{top:calc(50vh + var(--T) * 2 / 3);bottom:0}
.js .seq-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:56px}
.js .seq-pin>.wrap{width:100%}
/* l'écran du téléphone glisse d'un usage à l'autre, comme un swipe */
.js .device-seq .scr{opacity:0;transform:translateX(16%) scale(1.02);transition:opacity .55s ease,transform .9s var(--ease)}
.js .device-seq .scr.is-past{transform:translateX(-16%) scale(.98)}
.js .device-seq .scr.is-on{opacity:1;transform:none}
/* les trois mots en grand, l'actif allumé ; une seule description à la fois, sous les mots */
.js .steps{display:grid;grid-template-columns:3px minmax(0,1fr);column-gap:clamp(24px,2.6vw,40px)}
.js .seq-rail{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;gap:12px;padding:12px 0}
.seq-rail i{position:relative;flex:1;border-radius:3px;overflow:hidden;background:rgba(245,240,232,.13)}
.seq-rail b{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--f,0))}
.js .step{display:contents}
.js .step+.step{margin-top:0}
.js .step-title{grid-column:2;opacity:.36;transition:opacity .5s ease}
.js .step[data-i="0"] .step-title{grid-row:1}
.js .step[data-i="1"] .step-title{grid-row:2}
.js .step[data-i="2"] .step-title{grid-row:3}
/* fondu décalé : la phrase qui part s'efface vite, la suivante arrive juste après (jamais deux phrases superposées) */
.js .step-desc{grid-column:2;grid-row:4;margin-top:30px;opacity:0;transform:translateY(16px);transition:opacity .18s ease,transform .5s var(--ease)}
.js .step.is-on .step-title{opacity:1}
.js .step.is-on .step-desc{opacity:1;transform:none;transition:opacity .5s ease .2s,transform .8s var(--ease) .2s}

/* ═══ RIVIÈRE : de vraies pochettes qui dérivent, pleine largeur ═══ */
.river{position:relative;padding-top:calc(var(--space-sec)*.6);overflow-x:clip}
@supports not (overflow:clip){.river{overflow:hidden}}
.river-band{position:relative;width:124vw;margin-left:-12vw;transform:rotate(-3.2deg)}
.river-row{--rs:max(112px,14.5vw);--rg:max(12px,1.25vw);display:flex;gap:var(--rg);width:max-content;transform:translate3d(-14%,0,0);will-change:transform}
.river-band+.wrap+.river-band .river-row{transform:translate3d(-14%,0,0)}
.rt{position:relative;flex:none;width:var(--rs);height:var(--rs);border-radius:calc(var(--rs)*.07);overflow:hidden;background:#111;
  box-shadow:0 24px 48px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06)}
.rt img{width:100%;height:100%;object-fit:cover}
.rt-skip::after{content:"";position:absolute;inset:0;background:rgba(12,4,7,.52)}
.rb{position:absolute;z-index:1;right:calc(var(--rs)*.06);top:calc(var(--rs)*.06);width:calc(var(--rs)*.17);height:calc(var(--rs)*.17);min-width:26px;min-height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(12,4,7,.62);box-shadow:inset 0 0 0 1px rgba(245,240,232,.16)}
.rb svg{width:56%;height:56%}
.rt-add .rb{color:var(--accent)}
.rt-skip .rb{color:var(--text)}
.river-title{margin:clamp(56px,6vw,96px) 0;font-size:clamp(38px,5.6vw,88px)}

/* ═══ PREUVES : un bento vivant. La grande tuile reprend la feuille « Choisissez votre mode » de l'app : deux modes, chacun
   avec sa propre session (Favoris, puis Playlist dans une nouvelle session). Le récap suit la session, la bibliothèque garde tout. ═══ */
.features{position:relative;padding-top:calc(var(--space-sec)*.8);overflow-x:clip}
@supports not (overflow:clip){.features{overflow:hidden}}
.bento{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:20px}
.bt{position:relative;overflow:hidden;border-radius:32px;padding:38px 40px 36px;display:flex;flex-direction:column;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 rgba(245,240,232,.05)}
.bt-mode{grid-row:1/3;padding:36px 40px 28px}
.js .bt-mode .bt-head{padding-right:40px}
.bt-title{font:700 clamp(25px,2.2vw,31px)/1.08 var(--display);letter-spacing:-.035em;text-wrap:balance}
.bt-title .pt{margin-left:.04em}
.bt-mode .bt-title{font-size:clamp(30px,2.9vw,42px);line-height:1.04;letter-spacing:-.045em}
.bt-desc{margin-top:10px;max-width:42ch;font-size:16px;line-height:1.5;color:var(--sec);text-wrap:pretty}
.bt-mode .bt-desc{color:var(--text);opacity:.86}
.bt-recap.rv{transition-delay:.08s}
.bt-lib.rv{transition-delay:.16s}
/* le vrai flou du verre là où il y a une souris ; au doigt, la même teinte sans flou à recalculer à chaque image */
@media (hover:hover) and (pointer:fine){
  .bt:not(.bt-recap){-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  /* lave tramée par lava.js : le flou ne ferait que lisser une lave déjà lisse et la ré-arrondir en bandes ;
     on garde la saturation du verre, qui laisse passer le tramage */
  .gl-lava .bt:not(.bt-recap){-webkit-backdrop-filter:saturate(1.35);backdrop-filter:saturate(1.35)}
}

/* la feuille des modes de l'app (#1C1C1E, coins 20, poignée, titre centré), deux options qui jouent chacune leur session */
.modes{position:relative;margin-top:20px;padding:0 10px 10px;border-radius:24px;background:rgba(28,28,30,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05)}
.modes-cap{display:flex;flex-direction:column;align-items:center;padding:7px 0 10px;font:600 15px/1.2 var(--ui);color:rgba(245,240,232,.92)}
.handle{display:block;width:35px;height:4.5px;margin-bottom:11px;border-radius:3px;background:rgba(245,240,232,.3)}
.md-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.md{position:relative;border-radius:16px;padding:12px 16px 14px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background .5s ease,box-shadow .5s ease}
.md.is-on{background:rgba(255,0,47,.11);box-shadow:inset 0 0 0 1px rgba(255,0,47,.55)}
.md-opt{display:flex;align-items:center;gap:12px}
.md-ic{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);
  transition:color .4s,background .4s}
.md-ic svg{width:22px;height:22px}
.md.is-on .md-ic{color:var(--accent);background:rgba(255,0,47,.2)}
.md-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.md-name{font:600 16px/1.25 var(--ui);color:var(--text);transition:color .4s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md.is-on .md-name{color:var(--accent)}
.md-sub{display:flex;flex-wrap:wrap;gap:0 14px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.42)}
.md-chk{flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  opacity:0;transform:scale(.4);transition:opacity .25s,transform .5s var(--spring)}
.md-chk svg{width:14px;height:14px}
.md.is-on .md-chk{opacity:1;transform:none}
/* l'option touchée : un rond qui s'ouvre sous le doigt */
.md-tapw{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.md-tap{position:absolute;left:35px;top:33px;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(255,0,47,.32)}
.md-use{margin:8px 0 0 50px;font-size:14.5px;line-height:1.4;color:var(--text);text-wrap:pretty}
/* les options sont de vrais boutons (posés par le script) : on change de mode à tout moment. Le bouton garde la mise en page
   de la ligne, sa zone de doigt déborde sans rien pousser, et toute la carte du mode répond au clic */
button.md-opt{position:relative;width:100%;padding:0;margin:0;text-align:left;border-radius:12px;-webkit-tap-highlight-color:transparent}
button.md-opt::after{content:"";position:absolute;left:-8px;right:-8px;top:-7px;bottom:-7px}
/* l'anneau du clavier entoure toute la carte du mode, celle qui répond au clic, à égale distance de chaque bord */
button.md-opt:focus-visible{outline:none}
.has-pick .md:has(.md-opt:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.has-pick .md{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (hover:hover) and (pointer:fine){
  .has-pick .md:not(.is-on):hover{background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);transition:background .2s ease,box-shadow .2s ease}
  .has-pick .md:not(.is-on):hover .md-ic{color:var(--text);background:rgba(255,255,255,.13)}
  .has-pick .md:not(.is-on):not(.is-done):hover .dk{opacity:.62}
  .has-pick .md.is-done:not(.is-on):hover .dk{opacity:.85}
  .has-pick .md.is-on:hover{background:rgba(255,0,47,.14);box-shadow:inset 0 0 0 1px rgba(255,0,47,.7);transition:background .2s ease,box-shadow .2s ease}
}

/* la session de chaque mode : la pilule du mode (comme l'en-tête de l'app), la carte, la route, la destination */
.dk{position:relative;margin-top:12px;--cv:clamp(104px,9vw,124px);--ps:clamp(76px,6.8vw,92px);transition:opacity .4s ease,filter .4s ease}
/* un seul mode vit à la fois : la session pas encore choisie n'est qu'un aperçu éteint, celle qui joue s'allume,
   celle qui est finie reste à mi-teinte avec sa pilule : une session passée, « Session terminée », son résultat reste dans Apple Music */
.md:not(.is-on):not(.is-done) .dk{opacity:.45;filter:saturate(.4)}
.md.is-done:not(.is-on) .dk{opacity:.7}
/* la pilule du mode n'existe que pendant la session : avant, elle est repliée (sans laisser de trou) */
.js .md:not(.is-on):not(.is-done) .dk-bar .spill{max-width:0;padding:0;margin-right:-10px;opacity:0;transform:scale(.8);
  transition:opacity .18s ease,transform .3s ease,max-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease)}
.dk-bar{display:flex;align-items:center;gap:10px;height:28px;min-width:0}
.spill{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border-radius:16px;font:500 13.5px/1 var(--ui);color:var(--text);
  max-width:180px;overflow:hidden;white-space:nowrap;
  background:rgba(245,240,232,.09);box-shadow:inset 0 0 0 1px rgba(245,240,232,.16);
  transition:opacity .35s ease .1s,transform .55s var(--spring) .1s,max-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease)}
.spill svg{flex:none;width:16px;height:16px;color:var(--accent)}
.dk-src{min-width:0;font:500 13px/1.2 var(--ui);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-count{position:relative;flex:none;display:block;height:16px;overflow:hidden;font:400 12.5px/16px var(--ui);color:rgba(245,240,232,.7);font-variant-numeric:tabular-nums}
.dk-n{display:block}
/* le compteur aussi n'existe que pendant ou après la session : la ligne pas encore choisie ne laisse lire aucune progression */
.dk-count{transition:opacity .35s ease .1s}
.js .md:not(.is-on):not(.is-done) .dk-count{opacity:0}
.dk-row{position:relative;display:flex;align-items:flex-start;justify-content:space-between;margin-top:8px}
.routes{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route{fill:none;stroke:rgba(245,240,232,.18);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1.5 7;transition:stroke .5s ease}
.md.is-on .route{stroke:rgba(255,0,47,.8)}
.dk-card{position:relative;z-index:2;width:var(--cv)}
.dk-sw{position:relative;transform-origin:50% 125%}
.dk-cover{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.45)}
/* une seule couche peinte au bord arrondi : le fond sombre vit sous la pochette elle-même (pas de fond sur le conteneur
   qui déborderait en liseré sous l'antialiasing du coin), et le filet clair est tracé à l'intérieur, par-dessus l'image */
.dk-cover img{display:block;width:100%;height:100%;object-fit:cover;background:#111;user-select:none;-webkit-user-drag:none;transition:visibility 0s}
.dk-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none;transition:opacity .26s ease}
/* écran de fin : plus de pochette dessous (elle se cache une fois l'écran posé) ni de filet, le dégradé seul touche le bord */
.md.is-done .dk-cover img{visibility:hidden;transition:visibility 0s .32s}
.md.is-done .dk-cover::after{opacity:0}
.dk-veil{position:absolute;inset:0;background:#000;opacity:0}
/* l'écran de fin de l'app (dégradé dessiné plutôt que l'image de lave réduite : pas de stries sur un si petit carré) */
.dk-done{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;background:radial-gradient(125% 105% at 70% 34%,#9a1030 0%,#6a0a1f 36%,#33060f 70%,#1a0407 100%)}
.dk-done i{width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.dk-done svg{width:48%;height:48%}
.md.is-done .dk-done{opacity:1}
.md.is-done .dk-meta{opacity:0}
.dk-mark{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;translate:-50% -50%;opacity:0;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.dk-mark svg{display:block;width:100%;height:100%}
.dk-like{color:var(--accent)}
.dk-nope{color:#fff}
.dk-meta{margin-top:9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-meta b{font:700 14px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-meta span{font:400 12.5px/1.25 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sec)}
/* la copie de la pochette qui file vers sa destination */
.fly{position:absolute;z-index:4;border-radius:12px;overflow:hidden;pointer-events:none;box-shadow:0 20px 40px rgba(0,0,0,.45);will-change:transform}
.fly img{width:100%;height:100%;object-fit:cover}
.fly .dk-mark{opacity:1}
.pile{position:relative;z-index:1;width:calc(var(--ps) + 40px);margin-top:calc((var(--cv) - var(--ps))/2 - 4px);display:flex;flex-direction:column;align-items:center}
.pile-st{position:relative;width:var(--ps);height:var(--ps)}
.pst{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:9px;object-fit:cover;background:#111;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));box-shadow:0 4px 10px rgba(0,0,0,.5),0 18px 36px rgba(0,0,0,.4)}
.pst-ph{display:block;overflow:hidden;background:linear-gradient(150deg,#4a1e2b,#1f1015)}
.pst-ph2{background:linear-gradient(150deg,#3d3442,#1b151a)}
/* les favoris d'avant : des pochettes génériques (aucun titre de la playlist n'est déjà un favori) */
.pst-ph::after{content:"";position:absolute;inset:33%;background:rgba(245,240,232,.2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E") center/contain no-repeat}
.pile-slot{position:absolute;inset:0;border-radius:11px;display:grid;place-items:center;color:rgba(245,240,232,.4);
  background:rgba(245,240,232,.03);box-shadow:inset 0 0 0 1.5px rgba(245,240,232,.18);transition:opacity .4s ease}
.pile-slot svg{width:30%;height:30%}
.pile:not(.is-new) .pile-slot{opacity:0}
/* l'onde qui part de la pile quand un titre s'y pose */
.pile-wave{position:absolute;left:50%;top:calc(var(--ps)/2);width:calc(var(--ps)*1.1);height:calc(var(--ps)*1.1);margin:calc(var(--ps)*-.55) 0 0 calc(var(--ps)*-.55);
  border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 1.5px var(--accent)}
.pile-lab{margin-top:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:100px;white-space:nowrap;
  background:rgba(245,240,232,.08);box-shadow:inset 0 0 0 1px rgba(245,240,232,.2);font:600 13px/1 var(--ui)}
.pile-lab svg{width:14px;height:14px;color:var(--accent)}
.pile-n{position:relative;display:block;height:18px;overflow:hidden;font:400 13px/18px var(--ui);color:rgba(245,240,232,.68);font-variant-numeric:tabular-nums}
.pile-n span{display:block}
.pile.is-new .pile-n{display:none}

/* pause / reprise de la scène (elle joue seule) */
.bt-play{position:absolute;right:28px;top:30px;z-index:5;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--sec);
  background:rgba(245,240,232,.06);box-shadow:inset 0 0 0 1px var(--line);transition:color .2s,background .2s,opacity .3s}
.bt-play:hover{color:var(--text);background:rgba(245,240,232,.12)}
.bt-play svg{width:16px;height:16px}
.bt-play::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.bt-play:focus-visible{border-radius:50%}
html:not(.js) .bt-play,.is-static .bt-play,.is-still .bt-play{display:none}
/* hors de l'écran ou en pause, tout s'arrête */
.bt.is-paused .eq i{animation-play-state:paused}
/* image fixe (mouvement réduit) ou sans script : les deux sessions se montrent en entier, pilule comprise, sans coche */
html:not(.js) .md:not(.is-on):not(.is-done) .dk,.bt-mode.is-still .md:not(.is-on):not(.is-done) .dk{opacity:1}
.js .bt-mode.is-still .md:not(.is-on):not(.is-done) .dk-bar .spill{max-width:180px;padding:0 12px 0 10px;margin-right:0;opacity:1;transform:none}

/* le récap de la session en cours, sur la lave de l'app */
.bt-recap{background:#3a0611 url(/assets/img/lava-card.webp?v=20261013d) 70% 40%/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* la lave de la carte attend que la section approche (classe lz posée dans le head, data-lazy retiré à l'approche) */
.lz .bt-recap[data-lazy]{background-image:none}
.bt-recap::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,4,7,.35),rgba(12,4,7,0) 45%,rgba(12,4,7,.15));pointer-events:none}
.bt-recap>*{position:relative;z-index:1}
/* lave et voile recalculés et tramés par site.js dans un canvas à la résolution de l'écran (plus de paliers) ;
   le filet clair du bord repasse au-dessus du canvas (le ::before, libéré du voile) */
.bt-recap>.lavac{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated}
.bt-recap.has-cbg{background-image:none}
.bt-recap.has-cbg::before{z-index:2;background:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* l'éclat de la lave quand la session se termine */
.bt-recap::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(120% 95% at 70% 40%,rgba(255,96,124,.6),rgba(255,0,47,.2) 46%,transparent 74%)}
.bt-recap .bt-title,.bt-recap .bt-desc{transition:opacity .7s ease}
/* « Session complete. » n'apparaît qu'à la fin : pendant la session, seule la pilule de la session comptée est là */
.bt-recap.is-live .bt-title,.bt-recap.is-live .bt-desc{opacity:0;transition:opacity .25s ease}
.rc-ses{display:flex;align-items:center;gap:10px;min-width:0;margin:0 52px 16px 0}
.rc-ses .spill{background:rgba(12,4,7,.28);box-shadow:inset 0 0 0 1px rgba(245,240,232,.24)}
.rc-src{min-width:0;font:500 13px/1.2 var(--ui);color:rgba(245,240,232,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-recap.is-flare::after{animation:flare 2.4s cubic-bezier(.2,.7,.3,1)}
@keyframes flare{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
.odv{display:inline-block}
.bt-recap .bt-desc{color:rgba(245,240,232,.82)}
.rc-check{position:absolute;right:26px;top:26px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);transition:opacity .4s ease .35s,transform .8s var(--spring) .35s}
.rc-check svg{width:21px;height:21px}
.bt-recap.is-live .rc-check{opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.rx{margin-top:auto;padding-top:26px}
.rx-hero{display:flex;align-items:flex-end;gap:12px}
.rx-hero .odo{font:800 clamp(76px,7vw,104px)/1 var(--display);letter-spacing:-.055em;margin-left:-.04em}
.rx-hero .rx-l{padding-bottom:.9em}
.rx-l{font:500 12.5px/1.2 var(--ui);color:rgba(245,240,232,.8)}
.rx-row{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:10px}
.rx-s .odo{display:block;font:700 clamp(22px,2vw,28px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.rx-s .rx-l{display:block;margin-top:8px}
.odo{display:block}
.rx-hero .odv{transform-origin:0 85%}
.rx-hero .odv.is-wide{font-size:.8em}
.rx-s .odv{transform-origin:0 100%}

/* bibliothèque : la liste de l'app, les titres passés s'éteignent sans quitter leur place */
.lib{position:relative;margin:auto -12px 0;--rh:52px;height:calc(var(--rh)*5.4);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent)}
.bt-lib .bt-head{margin-bottom:18px}
/* liste défilée : le haut se fond aussi */
.lib.is-scrolled{-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 7%,#000 76%,transparent)}
.lib-in{transition:transform .8s var(--ease)}
/* la liste déborde de 12 px dans la marge de la tuile et chaque ligne rentre de 12 px : la pochette reste alignée sur le titre,
   le surlignage (coins de 13 = 7 de la vignette + 6 d'écart) et la colonne des marques tiennent entiers dans la zone visible */
.lr{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;height:var(--rh);padding:0 12px;border-radius:13px;transition:opacity .7s ease}
.lr::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:13px;background:rgba(245,240,232,.08);opacity:0;transition:opacity .4s ease}
.lr.is-cur::after{opacity:1}
.lr+.lr::before{content:"";position:absolute;left:64px;right:12px;top:0;height:1px;background:var(--line)}
.lr.is-cur::before,.lr.is-cur+.lr::before{opacity:0}
.lr-th{position:relative;flex:none;width:40px;height:40px;border-radius:7px;overflow:hidden;background:#111}
.lr-th img{width:100%;height:100%;object-fit:cover}
.lr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lr-tx b{font:600 14.5px/1.25 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-tx span{font:400 12.5px/1.3 var(--ui);color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-ic{flex:none;display:flex;align-items:center;gap:16px;color:rgba(245,240,232,.5)}
/* une seule marque par session : une colonne de 26 px, étoile et rond du + centrés au même endroit */
.lib.m-fav .lr-ic,.lib.m-pl .lr-ic{width:26px;justify-content:center}
.lr-ic svg{width:18px;height:18px}
.lr .ic-fav-on{display:none}
.lr.is-fav .ic-fav{display:none}
.lr.is-fav .ic-fav-on{display:block;color:var(--accent)}
.lr.is-pl .ic-pl{color:#8E8E93}
/* une seule session à la fois dans la liste : étoiles en Favoris, + en Playlist (gris secondaire de l'app, jamais rouge) */
.lib.m-fav .ic-pl,.lib.m-pl .ic-fav,.lib.m-pl .ic-fav-on{display:none}
.lib.m-pl .ic-pl{box-sizing:content-box;padding:4px;margin:-4px;border-radius:50%;color:rgba(142,142,147,.62);transition:background .3s ease}
.lib.m-pl .lr.is-pl .ic-pl{color:#8E8E93;background:rgba(142,142,147,.2)}
.is-motion .lr.is-fav .ic-fav-on,.is-motion .lr.is-pl .ic-pl{animation:pop .55s var(--spring)}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.lr.is-skip{opacity:.34}
/* le titre qui joue : un égaliseur sur sa vignette */
.lr-th .eq{display:none;left:0;top:0;right:0;bottom:0;height:auto;padding:11px 9px;gap:2px;justify-content:center;border-radius:0;background:rgba(12,4,7,.55)}
.lr-th .eq i{width:3px}
.lr.is-cur .eq{display:flex}

/* ═══ FIN : la mise en page du site précédent, modernisée (titre centré, anneaux, prix, FAQ) ═══ */
.final{position:relative;padding:calc(var(--space-sec) + 16px) 0 var(--space-sec);text-align:center;overflow-x:clip}
@supports not (overflow:clip){.final{overflow:hidden}}
.final-rings{position:absolute;left:calc(50% - 500px);top:calc(50% - 500px);width:1000px;height:1000px;pointer-events:none;overflow:visible;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 76%,transparent 96%);mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 76%,transparent 96%)}
.final-rings{transition:scale 2s var(--ease),opacity 1.4s ease}
/* les anneaux s'ouvrent une fois à l'arrivée (transition unique : pas de grand calque animé en permanence) */
.is-motion.js .final:not(.in) .final-rings{scale:.72;opacity:.12}
.final-rings circle{fill:none;stroke:rgba(255,0,47,.2);stroke-width:1.2}
.final-rings circle:nth-child(2){stroke:rgba(255,0,47,.14)}
.final-rings circle:nth-child(3){stroke:rgba(255,0,47,.09)}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center}
.final-icon{width:72px;height:72px;border-radius:17px;box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1)}
/* l'icône flotte doucement (arrêtée hors de l'écran) */
.is-motion .final-icon.in{animation:float 6s ease-in-out 1.2s infinite}
.final.is-off .final-icon{animation-play-state:paused}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.final-title{margin:30px 0 40px;font:800 clamp(48px,7vw,104px)/.93 var(--display);letter-spacing:-.045em;text-wrap:balance}
.final-title .pt{margin-left:.04em}
.final-cta{display:flex;flex-direction:column;align-items:center}
.final-cta.rv{transition-delay:.2s}
.final-price{margin-top:22px;font-size:14px;line-height:1.6;color:rgba(245,240,232,.78);letter-spacing:.01em;text-wrap:pretty}
.final-price .sep{white-space:pre}
.final-faq{margin:6px 0 -6px;padding:6px 0;display:inline-flex;align-items:center;gap:7px;font:500 14px/1.6 var(--ui);color:rgba(245,240,232,.66);
  text-decoration:underline;text-decoration-color:rgba(245,240,232,.25);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.final-faq:hover{color:var(--text);text-decoration-color:var(--accent)}
.final-faq svg{width:14px;height:14px;flex:none}

/* ═══ PIED DE PAGE ═══ */
.foot{border-top:1px solid var(--line);padding:30px 0 40px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.foot-brand .nav-logo{font-size:16px}
.foot-brand .nav-logo img{width:24px;height:24px;border-radius:6px}
.foot-tag{margin-top:6px;font-size:12.5px;color:var(--ter)}
.foot-links{display:flex;gap:26px}
.foot-links a{margin:-6px -2px;padding:6px 2px;font-size:14px;color:var(--sec);transition:color .2s}
.foot-links a:hover{color:var(--text)}

/* ═══ Consentement (mêmes styles pour Refuser et Accepter) ═══ */
.consent-banner{position:fixed;bottom:16px;left:0;right:0;margin-inline:auto;z-index:300;width:fit-content;max-width:min(640px,calc(100% - 32px));
  background:rgba(12,4,7,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--line-strong);border-radius:20px;
  padding:14px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.consent-banner[hidden]{display:none}
/* sur ordinateur, en bas à gauche : les boutons Passez / Ajoutez du héros restent visibles */
@media (min-width:981px){.consent-banner{left:16px;right:auto;margin-inline:0;max-width:520px}}
.consent-text{font-size:13px;color:var(--sec);line-height:1.5;margin:0}
.consent-actions{display:flex;align-items:center;gap:10px}
.consent-more{padding:6px 0;font-size:12px;color:var(--ter);margin-right:auto;text-decoration:underline;text-underline-offset:3px}
.consent-more:hover{color:var(--text)}
.consent-btn{font:600 13px/1.2 var(--ui);cursor:pointer;border-radius:100px;padding:8px 18px;border:1px solid var(--line-strong);background:rgba(245,240,232,.07);color:var(--text);transition:background .2s}
.consent-btn:hover{background:rgba(245,240,232,.12)}

/* ═══ Apparitions (à l'entrée dans l'écran, une fois) ═══ */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ═══ Défilement : animations liées au défilement (compositeur), là où le navigateur les connaît ═══
   Sans elles : l'éventail s'ouvre et le reste apparaît par transition (IntersectionObserver), la rivière suit un petit script. */
@supports (animation-timeline:view()) and (animation-range:0% 100%){
  /* héros : en sortant, le texte glisse un peu moins vite que la page et s'efface en dernier
     (le téléphone de derrière reste fixe : l'animer ferait recomposer tout le lecteur à chaque image) */
  .is-motion .hero{view-timeline:--hero block}
  .is-motion .hero-copy{animation:pxCopy linear both;animation-timeline:--hero;animation-range:exit 0% exit 95%}
  /* écoute : l'éventail s'ouvre à mesure qu'il monte vers le milieu de l'écran */
  .is-motion .fan{view-timeline:--fan block}
  .is-motion .fcard-l{animation:fanL linear both;animation-timeline:--fan;animation-range:entry 35% cover 52%}
  .is-motion .fcard-r{animation:fanR linear both;animation-timeline:--fan;animation-range:entry 35% cover 52%}
  .is-motion .fcard-c{animation:fanC linear both;animation-timeline:--fan;animation-range:entry 10% cover 45%}
  .is-motion .fan .fmark,.is-motion .fan .fveil{animation:fadeIn linear both;animation-timeline:--fan;animation-range:cover 42% cover 54%}
  /* usages : le téléphone tenu à l'écran pivote à peine, les traits se remplissent étape par étape */
  .is-motion .seq{view-timeline:--seq block}
  .is-motion .device-seq{animation:pxSeq linear both;animation-timeline:--seq;animation-range:contain 0% contain 100%}
  .is-motion .seq-rail i b{animation:fillY linear both;animation-timeline:--seq}
  .is-motion .seq-rail i:nth-child(1) b{animation-range:contain 0% contain 33.4%}
  .is-motion .seq-rail i:nth-child(2) b{animation-range:contain 33.3% contain 66.7%}
  .is-motion .seq-rail i:nth-child(3) b{animation-range:contain 66.6% contain 100%}
  /* rivière : les deux rangées glissent en sens contraire pendant toute la traversée */
  .is-motion .river{view-timeline:--river block}
  .is-motion .river-row{animation:riverA linear both;animation-timeline:--river;animation-range:cover 0% cover 100%}
  .is-motion .river-band+.wrap+.river-band .river-row{animation-name:riverB}
}
@keyframes pxCopy{0%{translate:0 0;opacity:1}50%{opacity:1}100%{translate:0 72px;opacity:0}}
@keyframes fanL{from{transform:translateX(-5%) rotate(-3deg) scale(.8)}to{transform:translateX(-41%) rotate(-12deg) scale(.84)}}
@keyframes fanR{from{transform:translateX(5%) rotate(3deg) scale(.8)}to{transform:translateX(41%) rotate(12deg) scale(.84)}}
@keyframes fanC{from{transform:translateY(26px) scale(.94)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pxSeq{from{rotate:-2.5deg;translate:0 2%}to{rotate:2.5deg;translate:0 -2%}}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes riverA{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(-24%,0,0)}}
@keyframes riverB{from{transform:translate3d(-24%,0,0)}to{transform:translate3d(-4%,0,0)}}

/* ═══ Responsive ═══ */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
  .stage{--s:.53;height:calc(1282px*var(--s) + 92px)}
  .device-back{transform:translateX(8%) rotate(10deg)}
  /* les pilules passent sous le téléphone avant de sortir de l'écran */
  .gpill{top:auto;bottom:-70px}
  .gpill-l{right:auto;left:50%;transform:translateX(calc(-100% - 6px))}
  .gpill-r{left:50%;transform:translateX(6px)}
  .gpill-l:active{transform:translateX(calc(-100% - 6px)) scale(.95)}
  .gpill-r:active{transform:translateX(6px) scale(.95)}
  .fork{--c:clamp(200px,21vw,240px);gap:28px}
  .exit-title{font-size:clamp(34px,3.7vw,44px)}
  .bt{padding:32px 30px 30px}
  .bt-mode{padding:34px 30px 30px}
  .modes{padding:0 8px 8px}
  .md{padding:13px 14px 15px}
  .bento{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .rx-s .odo{font-size:clamp(19px,2vw,24px)}
}
/* écrans d'ordinateur peu hauts (portable 1366×768, 1920×1080 à 125 %) : le bouton App Store reste dans le premier écran */
@media (min-width:981px) and (max-height:820px){
  .hero{padding-top:100px}
  .lockup{font-size:min(clamp(52px,5.9vw,86px),10.5vh);margin:22px 0 22px -.04em}
  .hero-cta{margin-top:28px}
  .stage{--s:.5}
}
@media (min-width:981px) and (max-width:1180px) and (max-height:820px){
  .stage{--s:.47}
}
@media (min-width:981px) and (max-height:700px){
  .lockup{font-size:min(clamp(52px,5.9vw,86px),9.5vh);margin:18px 0 18px -.04em}
  .stage{--s:.44}
  .hero-cta{margin-top:22px}
}
@media (max-width:980px){
  .nav-links{display:none}
  /* le héros se centre, le téléphone passe dessous */
  .hero{padding:108px 0 40px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:12px}
  .lockup{font-size:min(11.5vw,96px);margin-left:0}
  .hero-sub{max-width:34em;margin:0 auto}
  .hero-cta{align-items:center}
  .hero-rating{text-align:center}
  .stage{--s:.5;margin-top:36px}
  .device-live{left:50%}
  .rings{left:calc(50% - 700px)}
  .device-back{left:50%;transform:translateX(26%) rotate(10deg)}
  .h2-left{text-align:center}
  .exit-title{font-size:44px}
  .fork{--c:220px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px}
  .fan{grid-column:1/-1;grid-row:1;justify-self:center}
  /* Passez contre le bord gauche, Ajoutez contre le bord droit (comme leurs flèches) */
  .exit-skip{align-items:flex-start;text-align:left}
  .exit-add{align-items:flex-end;text-align:right}
  .is-motion.js .exit-skip.rv:not(.in),.is-motion.js .exit-add.rv:not(.in){transform:translateY(30px)}
  /* usages : le téléphone au-dessus, le mot et sa phrase dessous, une étape à la fois */
  .js .seq{--T:170vh;margin-top:0}
  .js .seq-pin{height:100vh;height:100svh;padding:72px 0 16px}
  .seq-grid{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vh,30px);justify-items:center;text-align:center}
  .device-seq{height:clamp(230px,calc(100vh - 320px),500px);margin:0}
  .js .steps{grid-template-columns:minmax(0,1fr);justify-items:center}
  .js .seq-rail{grid-column:1;grid-row:1;flex-direction:row;width:132px;height:3px;padding:0;gap:8px;margin-bottom:22px}
  .seq-rail b{transform-origin:0 50%;transform:scaleX(var(--f,0))}
  .step-title{font-size:clamp(40px,9vw,64px)}
  .js .step[data-i] .step-title{grid-column:1;grid-row:2;opacity:0;transform:translateY(18px);transition:opacity .18s ease,transform .5s var(--ease)}
  .js .step.is-on .step-title{opacity:1;transform:none;transition:opacity .5s ease .16s,transform .8s var(--ease) .16s}
  .js .step-desc{grid-column:1;grid-row:3;margin-top:12px;max-width:30ch}
  .step-desc{margin-left:auto;margin-right:auto}
  /* le bento passe en une colonne : la grande tuile, puis le récap et la bibliothèque côte à côte (tablette) */
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bt-mode{grid-row:auto;grid-column:1/-1}
  .bt-mode .bt-title{font-size:min(5.4vw,44px)}
  .lib{height:calc(var(--rh)*4.55)}
  .dk{--cv:min(140px,22vw);--ps:min(96px,15vw)}
  .rx-hero .odo{font-size:min(8.6vw,80px)}
  .rx-s .odo{font-size:22px}
  .final-rings{width:820px;height:820px;left:calc(50% - 410px);top:calc(50% - 410px)}
  /* tablette : les grands titres restent grands (les téléphones ont leurs tailles plus bas) */
  .h2-xl{font-size:min(8vw,72px)}
  .river-title{font-size:min(7.6vw,64px)}
  /* le titre occupe toute la largeur dès le premier rendu : rien ne bouge quand Syne arrive */
  .lockup{align-self:stretch}
  .foot-in{flex-direction:column;text-align:center}
  .foot-brand{display:flex;flex-direction:column;align-items:center}
}
@supports (height:100svh){
  @media (max-width:980px){.device-seq{height:clamp(230px,calc(100svh - 320px),500px)}}
}
/* téléphone à l'horizontale : trop bas pour tenir la section, les trois usages s'empilent à côté du téléphone */
@media (max-width:980px) and (max-height:520px){
  .lockup{font-size:min(11.5vw,15vh)}
  .js .seq{height:auto;margin-top:0}
  .js .seq-mark{display:none}
  .js .seq-pin{position:static;height:auto;padding:40px 0 0}
  .seq-grid{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:40px}
  .device-seq,.js .device-seq{height:300px}
  .js .steps{display:block}
  .js .seq-rail{display:none}
  .js .step{display:block}
  .js .step+.step{margin-top:22px}
  .js .step[data-i] .step-title{opacity:1;transform:none;font-size:36px}
  .js .step-desc{opacity:1;transform:none;margin:6px 0 0;max-width:34ch}
}
/* grands écrans (1920×1080 et plus) : le héros grandit avec l'écran */
@media (min-width:1600px) and (min-height:950px){
  .hero .wrap{max-width:1380px}
  .hero-grid{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
  .lockup{font-size:clamp(86px,5.2vw,104px)}
  .hero-sub{font-size:20px}
  .stage{--s:.68}
}
@media (max-width:560px){
  .bg-lava .orb{scale:.6}
  body{font-size:15px}
  .nav{height:52px;padding:0 7px 0 13px;top:10px}
  .nav-logo{font-size:17px}
  .nav-end{gap:7px}
  .btn-sm span{display:none}
  .btn-sm{width:38px;padding:0}
  .hero{padding:96px 0 24px}
  .eyebrow{font-size:12px;padding:7px 14px 7px 12px;gap:8px}
  .lockup{font-size:min(15.4vw,64px);margin:24px 0 20px}
  .hero-sub{font-size:15.5px;line-height:1.55}
  .hero-cta{margin-top:26px;width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn{width:100%;height:54px;font-size:16px}
  .hero-cta .micro{text-align:center;font-size:12.5px}
  .hero-rating{font-size:12.5px;margin-top:-4px}
  .stage{--s:.445;margin-top:40px}
  .device-back{transform:translateX(30%) rotate(10deg)}
  .gpill{height:44px;font-size:14.5px;padding:0 17px}
  .h2{font-size:min(8.4vw,36px)}
  .h2-xl{font-size:min(10.4vw,46px)}
  /* « Add the gems, » tient sur une ligne : deux lignes en tout (11 = largeur du texte en em, avec un peu de marge) */
  .river>.wrap{container-type:inline-size}
  .river-title{font-size:min(8.2vw,44px);font-size:min(calc(100cqi / 11),44px)}
  .fork{--c:min(200px,52vw);margin-top:36px;gap:0 14px}
  .exit{gap:6px}
  .exit-arrow{width:40px;height:40px;border-radius:12px;margin-bottom:6px}
  .exit-arrow svg{width:20px;height:20px}
  .exit-title{font-size:min(28px,7.4vw)}
  .exit-desc{font-size:14.5px;max-width:none}
  .fmark{width:60px;height:60px;margin:-30px 0 0 -30px}
  .eq{left:10px;bottom:10px;height:16px;padding:6px 7px}
  .step-title{font-size:min(11.4vw,46px)}
  .step-desc{font-size:15.5px}
  .river-band{transform:rotate(-4deg)}
  .bento{grid-template-columns:minmax(0,1fr);gap:12px}
  .bt,.bt-mode{padding:24px 20px 22px;border-radius:26px}
  .bt-title{font-size:min(6.2vw,24px)}
  .bt-mode .bt-title{font-size:min(7.6vw,30px)}
  .bt-desc{font-size:15px;margin-top:8px}
  .bt-mode .bt-desc{max-width:none}
  .modes{margin-top:18px;padding:0 6px 6px;border-radius:20px}
  .modes-cap{padding:6px 0 10px;font-size:14.5px}
  .handle{margin-bottom:9px}
  .md-list{gap:6px}
  .md{padding:12px 12px 14px;border-radius:14px}
  .md-opt{gap:11px}
  .md-ic{width:34px;height:34px;border-radius:8px}
  .md-ic svg{width:20px;height:20px}
  .md-tap{left:29px;top:29px}
  .md-name{font-size:15.5px}
  .md-sub{font-size:12px;gap:0 12px}
  .md-use{margin:8px 0 0;font-size:14px;line-height:1.36}
  .dk{margin-top:10px;--cv:min(96px,26vw);--ps:min(70px,19vw)}
  .dk-bar{gap:8px;height:26px}
  .spill{height:26px;padding:0 10px 0 8px;gap:5px;font-size:12.5px}
  .spill svg{width:14px;height:14px}
  /* petit écran : la pilule ne garde que son icône (étoile ou +), le nom du mode est déjà écrit au-dessus ; le nom de la
     playlist, repère commun aux deux sessions, reste entier à côté de « Session complete » */
  .dk-bar{gap:6px}
  .dk-bar .spill{padding:0 6px;gap:0}
  .dk-bar .spill>span{display:none}
  .js .md:not(.is-on):not(.is-done) .dk-bar .spill{margin-right:-6px}
  .dk-src{font-size:12.5px}
  .dk-count{font-size:11.5px}
  .dk-row{margin-top:9px}
  .dk-cover{border-radius:10px}
  .dk-meta{margin-top:7px}
  .dk-meta b{font-size:13px}
  .dk-meta span{font-size:12px}
  .pst{border-radius:8px}
  .pile{width:calc(var(--ps) + 36px)}
  .pile-lab{margin-top:10px;height:28px;padding:0 10px 0 9px;gap:5px;font-size:12px}
  .pile-lab svg{width:13px;height:13px}
  .pile-n{font-size:12px}
  .bt-play{right:16px;top:18px;width:32px;height:32px}
  .dk-meta span{display:none}
  .rc-check{right:20px;top:20px;width:38px;height:38px}
  .rx-hero .odo{font-size:min(22vw,84px)}
  .rx-s .odo{font-size:min(5.6vw,22px)}
  .rx-l{font-size:11.5px}
  .lib{--rh:48px;height:calc(var(--rh)*3.4)}
  .bt-lib .bt-head{margin-bottom:12px}
  .rc-ses{margin-bottom:12px}
  .rx{padding-top:18px}
  .rx-row{margin-top:12px;padding-top:14px}
  .final-rings{width:640px;height:640px;left:calc(50% - 320px);top:calc(50% - 320px)}
  .final-icon{width:60px;height:60px;border-radius:14px}
  .final-title{font-size:min(10.2vw,48px);margin:24px 0 30px}
  .final-cta{width:100%}
  .final-cta .btn{width:100%;height:54px;font-size:16px}
  .final-price{font-size:13.5px;margin-top:18px;line-height:1.55}
  .final-faq{font-size:13.5px}
  /* les quatre liens sur une ligne : zone de toucher plus haute que le texte, le français un peu plus petit */
  .foot-links{gap:18px 20px;flex-wrap:wrap;justify-content:center;margin-inline:-8px}
  .foot-links a{margin:-9px -5px;padding:9px 5px}
  html[lang="fr"] .foot-links{gap:18px 16px}
  html[lang="fr"] .foot-links a{font-size:13px}
  .consent-banner{bottom:10px;padding:13px 15px}
  .consent-actions{flex-wrap:wrap}
}
/* pied de page en français : une ligne jusqu'à 375 px, puis deux lignes de deux liens */
@media (max-width:420px){
  html[lang="fr"] .foot-links{gap:18px 12px}
  html[lang="fr"] .foot-links a{font-size:12px}
}
@media (max-width:370px){
  /* la ligne vide de la coupure compte deux écarts : 9 + 9 */
  html[lang="fr"] .foot-links{gap:9px 18px}
  html[lang="fr"] .foot-links a{font-size:13px}
  html[lang="fr"] .foot-links::after{content:"";flex-basis:100%;order:1}
  html[lang="fr"] .foot-links a:nth-child(n+3){order:2}
}

/* sur téléphone, les traits de progression des usages sont horizontaux */
@supports (animation-timeline:view()) and (animation-range:0% 100%){
  @media (max-width:980px){.is-motion .seq-rail i b{animation-name:fillX}}
}

/* la ligne prix passe sur deux lignes propres dans la colonne étroite, sans point orphelin */
@media (max-width:640px){
  .final-price .sep2{display:none}
  .final-price .p3{display:block}
}

/* le français est plus long */
html[lang="fr"] .final-title{font-size:clamp(36px,5.6vw,84px)}
.final-title .l2{display:none}
html[lang="fr"] .river-title{font-size:clamp(34px,4.6vw,72px)}
html[lang="fr"] .step-title{font-size:clamp(40px,4vw,56px)}
/* « Ajoutez » est plus large que « Add » : la pilule de droite garde de l'air avant le bord de l'écran */
@media (min-width:1181px) and (max-width:1440px){html[lang="fr"] .gpill{padding:0 16px;gap:7px}}
/* très petit écran (320) : le nom de la playlist reste entier à côté de « Session complete » / « Session terminée » */
@media (max-width:340px){.dk-src{font-size:11px;letter-spacing:-.01em}.dk-count{font-size:10px;letter-spacing:-.01em}.dk-bar{gap:4px}.dk-bar .spill{padding:0 5px}html[lang="fr"] .dk-bar{gap:2px}html[lang="fr"] .dk-src{letter-spacing:-.02em}}
@media (max-width:980px){html[lang="fr"] .step-title{font-size:clamp(36px,8.4vw,60px)}}
@media (max-width:560px){
  /* « trois usages. » tient sur une ligne */
  html[lang="fr"] .h2-xl{font-size:min(9.9vw,46px)}
  /* deux lignes : « Commencez » / « par une playlist. », la seconde tient entière (11,8 = sa largeur en em, avec un peu de marge) */
  .final-in{container-type:inline-size}
  html[lang="fr"] .final-title{font-size:7.8vw;font-size:calc(100cqi / 11.8)}
  html[lang="fr"] .final-title .l1{display:none}
  html[lang="fr"] .final-title .l2{display:inline}
  /* « passez le reste. » tient sur une ligne : trois lignes en tout */
  html[lang="fr"] .river-title{font-size:min(7.8vw,40px);font-size:min(calc(100cqi / 11.6),40px)}
  html[lang="fr"] .step-title{font-size:min(10.4vw,42px)}
}

/* mouvement réduit : le fond est figé, rien ne joue tout seul */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
html.is-static .rv{transition:none}

/* ═══ Grands titres : la seconde partie sous un coup de surligneur ═══
   Le texte reste en crème ; site.js pose dans le h2, sous le texte, un SVG par ligne réelle (le passage du geste).
   Encre translucide : la lave passe à travers ; plus dense sur les bords (liseré) et aux deux bouts, comme un feutre.
   Ne pas monter l'encre sans remesurer : le texte crème doit rester à 4,5:1 sur la partie la plus dense
   (5,6:1 au pire mesuré avec ces valeurs). */
.hl-host{position:relative;isolation:isolate}
.hl-layer{position:absolute;inset:0;pointer-events:none;z-index:-1;
  --hl-ink:#FF2450;--hl-a:.5;--hl-pool:.2;--hl-pool1:.135;--hl-streak:.09}
.hl-band{position:absolute;display:block}
.hl-pass{position:absolute;display:block;overflow:visible;clip-path:inset(0 100% 0 0)}
.hl-on .hl-pass{clip-path:none}
.hl-fill{fill:var(--hl-ink);fill-opacity:var(--hl-a)}
.hl-streak{fill:var(--hl-ink);fill-opacity:var(--hl-streak)}
.hl-rim{stroke:var(--hl-ink);stroke-opacity:.16}
.hl-end-0{stop-color:var(--hl-ink);stop-opacity:.14}
.hl-pool-0{stop-color:var(--hl-ink);stop-opacity:var(--hl-pool)}
.hl-pool-1{stop-color:var(--hl-ink);stop-opacity:var(--hl-pool1)}
.hl-pool-2{stop-color:var(--hl-ink);stop-opacity:0}
@media print{.hl-layer{display:none}}