/* CTV+ · site vitrine. Structure, rythme et échelle typographique calqués sur les pages Apple TV
   (relevé du 28/09/2026), avec Inter, nos couleurs (noir #050507 de l'app, lavande / menthe / rose) et nos captures.
   Points de rupture : > 1068 (grand), 735 à 1068 (moyen), ≤ 734 (petit). */
@font-face { font-family: Inter; src: url(inter-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Ionicons; src: url(ionicons.woff2) format('woff2'); font-display: block; }

:root {
  --bg: #050507; --bg2: #0b0b0f; --band: #111115; --band2: #141419; --panel: #0c0c10; --card: #16161b; --card2: #1c1c23;
  --text: #f5f5f7; --text2: rgba(235,235,245,0.68); --dim: rgba(235,235,245,0.56); --faint: rgba(235,235,245,0.32);
  --line: rgba(255,255,255,0.14); --link: #a896ff; --avail: #30d158; --live: #ff453a;
  --lavender: #a896ff; --mint: #6eded0; --rose: #f0a0be;
  --ln-h: 52px;
  --ease-ui: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-btn: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--ln-h); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.47059 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ic { font-family: Ionicons; font-style: normal; font-weight: normal; line-height: 1; display: inline-block; speak: never; -webkit-font-smoothing: antialiased; letter-spacing: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10000; background: #fff; color: #000; padding: 10px 16px; border-radius: 980px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 6px; }

/* ——— Gabarits de largeur (valeurs relevées) ——— */
.w980 { width: min(980px, 87.5%); margin-inline: auto; }
.w1224 { width: min(1224px, 85%); margin-inline: auto; }
.w1260 { width: min(1260px, 87.5%); margin-inline: auto; }
.w1360 { width: min(1360px, calc(100% - 80px)); margin-inline: auto; }
.w1008 { width: min(1008px, 87.5%); margin-inline: auto; }
.w720 { width: min(720px, 87.5%); margin-inline: auto; }
.w692 { width: min(692px, 87.5%); margin-inline: auto; }
.w653 { width: min(653px, 87.5%); margin-inline: auto; }
.w572 { width: min(572px, 87.5%); margin-inline: auto; }
.center { text-align: center; }

/* ——— Échelle typographique (tailles et graisses Apple, lettrage resserré pour Inter) ——— */
.t110 { font-size: 110px; line-height: 105px; font-weight: 700; letter-spacing: -0.045em; }
.t80 { font-size: 80px; line-height: 84px; font-weight: 700; letter-spacing: -0.04em; }
.t72 { font-size: 72px; line-height: 76px; font-weight: 700; letter-spacing: -0.04em; }
.t48s { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.03em; }
.t40 { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.028em; }
.t110, .t80, .t72, .t48s, .t40, .hero-title { text-wrap: balance; }
.t21 { font-size: 21px; line-height: 25px; font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }
.mute { color: var(--text2); }
.acc { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--dim); text-wrap: pretty; }
.acc strong, .acc-sm strong { color: var(--text); font-weight: 600; }
.acc-sm { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--dim); text-wrap: pretty; }
.caption { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dim); letter-spacing: -0.005em; }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: 17px; line-height: 25px; font-weight: 400; }
.more .ic { font-size: 13px; margin-top: 1px; transition: transform 250ms linear; }
@media (hover: hover) { .more:hover { text-decoration: underline; } .more:hover .ic { transform: translateX(2px); } }

/* ——— Apparitions : montée de 50 px + opacité, 0,6 s, déclenchée à 85 % de l'écran ; cascade de 0,1 s ——— */
.js [data-reveal] { transition: opacity 600ms ease-in-out, transform 600ms ease-out; transition-delay: calc(var(--i, 0) * 100ms); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(50px); }
.js .dev-grid [data-reveal] { transition: opacity 300ms ease-in; transition-delay: calc(var(--i, 0) * 100ms); }
.js .dev-grid [data-reveal]:not(.in) { transform: none; }
/* titres géants : fondu 0,3 s à l'entrée (la montée verticale est portée par leur conteneur, voir --sy) */
.js [data-slide] { opacity: 0; transition: opacity 300ms ease-in; }
.js [data-slide].in { opacity: 1; }

/* ——— Barre locale collante ——— */
.ln {
  position: sticky; top: 0; z-index: 9997; height: var(--ln-h);
  background: rgba(22,22,24,0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background-color 240ms var(--ease-ui);
}
.ln.is-sticking { background: rgba(22,22,24,0.8); }
.ln-content { position: relative; height: 100%; max-width: 1024px; margin-inline: auto; padding-inline: 22px; display: flex; align-items: center; }
.ln-brand { display: flex; align-items: center; height: 100%; margin-right: auto; }
.ln-brand img { height: 20px; width: auto; }
.ln-items { display: flex; align-items: center; gap: 16px; }
/* zone tactile = toute la hauteur de la barre, sans changer l'apparence (4 px de marge compensés par l'écart) */
.ln-link { display: inline-flex; align-items: center; height: var(--ln-h); padding-inline: 4px; font-size: 12px; line-height: 1; color: rgba(255,255,255,0.8); letter-spacing: -0.01em; white-space: nowrap; transition: color 240ms var(--ease-ui); }
.ln-link.is-on { color: rgba(255,255,255,0.5); }
@media (hover: hover) { .ln-link:hover { color: var(--link); } }
.ln-actions { display: flex; align-items: center; gap: 14px; margin-left: 24px; }
.ln-toggle { display: none; width: 28px; height: 28px; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); font-size: 15px; transition: transform 320ms var(--ease-btn); }
.ln.is-open .ln-toggle { transform: rotate(180deg); }
.ln-cta {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 11px; border-radius: 980px; white-space: nowrap;
  background: linear-gradient(180deg, #fff, #e8e8ed); color: #000; font-size: 12px; font-weight: 500; line-height: 1;
  transition: background 320ms var(--ease-btn), transform 320ms var(--ease-btn);
}
.ln-cta .ic { font-size: 11px; }
@media (hover: hover) { .ln-cta:hover { background: #fff; } }
.ln-cta:active { transform: scale(0.97); }

/* ——— Boutons ——— */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 22px; border-radius: 980px;
  background: #fff; color: #000; font-size: 17px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap;
  transition: background-color 320ms var(--ease-btn), transform 320ms var(--ease-btn);
}
@media (hover: hover) { .pill:hover { background: #e8e8ed; } }
.pill:active { transform: scale(0.97); }
.play-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; font-size: 15px; transition: background-color 320ms var(--ease-btn); flex: none; }
@media (hover: hover) { .play-btn:hover { background: rgba(255,255,255,0.24); } }
.play-btn .i-play, .play-btn.is-paused .i-pause { display: none; }
.play-btn.is-paused .i-play { display: inline-block; margin-left: 2px; }

/* Boutons des stores : pilule blanche « Télécharger sur » (URL publiée), pilule verre « Bientôt sur » sinon.
   Logo du store à gauche, toutes les pilules de la même largeur (voir STORES dans build.py). */
.stores { display: grid; grid-auto-flow: column; grid-auto-columns: 212px; gap: 12px; }
.store {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 980px;
  background: #fff; color: #000; transition: background-color 320ms var(--ease-btn), transform 320ms var(--ease-btn);
}
.store .ic { font-size: 24px; flex: none; }
.store-t { display: grid; gap: 2px; text-align: left; }
.store-k { font-size: 11px; font-weight: 500; line-height: 1; opacity: 0.66; letter-spacing: 0; }
.store-n { font-size: 17px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
a.store:active { transform: scale(0.97); }
@media (hover: hover) { a.store:hover { background: #e8e8ed; } }
.store.is-soon { background: rgba(255,255,255,0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); cursor: default; }
.store.is-soon .store-k { opacity: 1; color: var(--text2); }

/* ——— Cadre de télé dessiné en CSS (jamais d'image d'appareil) ——— */
.tv {
  position: relative; padding: clamp(4px, 0.5vw, 7px); border-radius: clamp(5px, 0.5vw, 8px);
  background: linear-gradient(180deg, #1b1b20, #09090b 22%, #09090b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13), 0 0 0 1px rgba(0,0,0,0.7), 0 40px 90px -30px #000, 0 20px 140px -30px rgba(120,104,255,0.20);
}
.tv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #000; }
.tv-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(118deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 34%); }

/* ——— Halos de l'app (lavande, menthe, rose) ——— */
.g { position: absolute; width: var(--s); aspect-ratio: 1; left: var(--x); top: var(--y); translate: -50% -50%; background: var(--img) center / 100% 100% no-repeat; opacity: var(--o); pointer-events: none; }
.g1 { --img: url(glow-lavender.webp); } .g2 { --img: url(glow-mint.webp); } .g3 { --img: url(glow-rose.webp); }
@media (prefers-reduced-motion: no-preference) {
  .g { animation: drift var(--t, 11s) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
  .g1 { --t: 9s; } .g2 { --t: 11s; animation-delay: -3s; } .g3 { --t: 13s; animation-delay: -6s; }
  @keyframes drift { to { transform: translate(var(--dx, 3%), var(--dy, 4%)) scale(1.1); } }
}

/* ——— 1. Héros : bloc titre épinglé sous la barre, la télé monte par-dessus ——— */
.hero { position: relative; isolation: isolate; text-align: center; overflow-x: clip;
  --tvw: min(1216px, 84.5vw);
  background: linear-gradient(var(--band), var(--band)) top / 100% calc(530px + var(--tvw) * 0.5625 * 0.55) no-repeat;
}
.hero-stage { position: relative; }
.hero-head { position: sticky; top: var(--ln-h); z-index: 1; padding-top: 112px; will-change: opacity; }
.hero-icon { width: 89px; height: 89px; margin: 0 auto; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 10px 30px -8px rgba(0,0,0,0.8); }
.hero-eyebrow { margin-top: 14px; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.hero-title { margin-top: 6px; font-size: 110px; line-height: 105px; font-weight: 700; letter-spacing: -0.045em; }
.hero-media { position: relative; z-index: 2; width: var(--tvw); margin: 60px auto 0; }
.tv-hero { will-change: transform; }
.hero-glow { position: absolute; inset: -20% -12%; z-index: -1; }
.hero-glow .g1 { --x: 18%; --y: 35%; --s: 70%; --o: 0.34; }
.hero-glow .g2 { --x: 84%; --y: 70%; --s: 64%; --o: 0.26; --dx: -3%; --dy: -3%; }
.hero-glow .g3 { --x: 70%; --y: 18%; --s: 44%; --o: 0.18; }
.hero-intro { padding: 140px 0 0; }
.intro { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
.hero-cta { margin-top: 44px; }
.hero-cta .stores, .ew-stores .stores, .rb-stores .stores { justify-content: center; }
.hero .caption { margin-top: 26px; }

/* ——— Tous tes écrans (dans Installer) : titre, accroche, grille de pictos 4 × 2 ——— */
.ew-devices { margin-top: 64px; }
.dev-sub { max-width: 640px; margin: 16px auto 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--dim); text-wrap: balance; }
.dev-grid { width: min(720px, 100%); margin: 64px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 0; }
.dev { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dev-ic { height: 72px; display: flex; align-items: flex-end; justify-content: center; font-size: 64px; color: var(--text); }
.dev-n { margin-top: 16px; font-size: 19px; line-height: 23px; font-weight: 600; letter-spacing: -0.012em; }
.dev-s { margin-top: 6px; font-size: 14px; line-height: 18px; color: var(--link); text-wrap: balance; }
.dev-s.is-soon { color: var(--dim); }
.dev-s .ic { font-size: 11px; margin-left: 3px; }

/* ——— 3. L'app : titre géant sur bande, écran collant qui déborde à droite ———
   Le contenu de la section (bande, titre, colonnes) part 200 px plus bas et remonte à la verticale
   (--sy, posé par main.js sur la section) ; la télé collante compense --sy pour rester calée une fois collée. */
.chick { position: relative; isolation: isolate; margin-top: 170px; padding-top: 200px; overflow-x: clip; }
.chick::before { content: ''; position: absolute; inset: 0 0 auto; height: 1049px; background: var(--band); z-index: -1; }
.chick::before, .find::before, .chick-head, .find-head, .chick-body, .find-media, .find-copy { transform: translate3d(0, var(--sy, 0px), 0); }
.chick-head, .find-head, .chick-body, .find-media, .find-copy { will-change: transform; }
.chick-head { margin-bottom: 96px; }
.chick-body { display: grid; grid-template-columns: 326px minmax(0, 1fr); column-gap: 112px; }
.chick-block { min-height: 740px; display: flex; flex-direction: column; justify-content: center; padding: 60px 0; }
.chick-block:first-child { min-height: 1200px; justify-content: flex-end; padding-bottom: 160px; }
.chick-block:last-child { min-height: 700px; }
.chick-fig { display: none; }
.chick-logo { align-self: flex-start; height: 32px; width: auto; margin-bottom: 22px; }
.chick-lead { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--dim); }
.links { margin-top: 12px; display: grid; justify-items: start; gap: 8px; }
.chick-block .more { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.chick-block .more .ic { font-size: 18px; margin-top: 2px; }
.caption-left { margin-top: 26px; font-weight: 400; font-style: italic; font-size: 12px; line-height: 16px; }
.chick-stage { position: relative; }
/* télé collante de 1150 px au plus, centrée dans la hauteur de l'écran, ombre visible */
.tv-chick { position: sticky; top: calc(max(var(--ln-h) + 24px, 50vh - min(1150px, 80vw) * 0.29) - var(--sy, 0px)); width: min(1150px, 80vw); }
.chick-shot { opacity: 0; transition: opacity 300ms ease-in-out; }
.chick-shot.is-on { opacity: 1; }

/* ——— 4. TV en direct : titre géant, télé en parallaxe, vitrines ——— */
.find { position: relative; isolation: isolate; margin-top: 60px; padding-top: 200px; overflow-x: clip; }
.find::before { content: ''; position: absolute; inset: 0 0 auto; height: 870px; background: var(--band); z-index: -1; }
.find-head { margin-bottom: 64px; }
.find-media .tv { will-change: transform; }
.find-copy { padding: 130px 0 150px; }
.acc-center { text-align: center; }

.panel { background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(255,255,255,0.05); }
.loop { padding: 88px 0 96px; }
.loop-in { position: relative; }
.loop-sets { display: grid; grid-template-columns: minmax(0, 1fr); }
.loop-set { grid-area: 1 / 1; min-width: 0; }
.loop-title { margin-bottom: 36px; }
.loop-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.tile { position: relative; aspect-ratio: 398 / 224; border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: rgba(0,0,0,0.55) 3px 3px 20px 2px, inset 0 0 0 1px rgba(255,255,255,0.08); isolation: isolate; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.tile figcaption { position: absolute; left: 18px; bottom: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.tile:not(.qt):has(figcaption)::after { content: ''; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6)); }
.tile-zoom > img { transform: scale(var(--z)); transform-origin: var(--ox) var(--oy); }
/* tuiles pictogramme : le picto suit la hauteur de la tuile et remonte au-dessus de la légende */
.qt { display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); container-type: size; }
.qt figcaption { text-shadow: none; }
.qt .qt-ic { font-size: min(68px, 38cqh); color: #fff; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.3)); }
.qt:has(figcaption) .qt-ic { font-size: min(68px, 34cqh); translate: 0 -9cqh; }
.t-green { --c1: #1f7a4d; --c2: #08251a; } .t-blue { --c1: #1d4e89; --c2: #0b1d3a; }
.t-rose { --c1: #a8325a; --c2: #3a0d1f; } .t-purple { --c1: #5a4a8a; --c2: #1b1530; } .t-graphite { --c1: #4a4a55; --c2: #16161b; }
.badge-live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; background: rgba(0,0,0,0.62); font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.badge-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* changement de vitrine : glissement de 30 px et fondus, tuiles en cascade */
.loop-set .loop-title, .loop-set .tile { opacity: 0; transform: translateX(30px); transition: opacity 500ms ease, transform 700ms var(--ease-out); }
.loop-set.is-on .loop-title, .loop-set.is-on .tile { opacity: 1; transform: none; }
.loop-set.is-on .tile:nth-child(1) { transition-delay: 80ms; } .loop-set.is-on .tile:nth-child(2) { transition-delay: 160ms; } .loop-set.is-on .tile:nth-child(3) { transition-delay: 240ms; }
.loop-set.is-out .loop-title, .loop-set.is-out .tile { opacity: 0; transform: translateX(-30px); transition-duration: 400ms; transition-delay: 0ms; }
.loop-btn { position: absolute; right: 0; top: 6px; }
.loop-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.12); font-size: 15px; transition: background-color 320ms var(--ease-btn); }
@media (hover: hover) { .loop-btn:hover { background: rgba(255,255,255,0.22); } }
.loop-btn .i-play, .loop-btn.is-paused .i-pause { display: none; }
.loop-btn.is-paused .i-play { display: inline-block; margin-left: 2px; }
.loop-texts { display: grid; padding: 64px 0 120px; }
.loop-texts p { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s 400ms; }
.loop-texts p.is-on { opacity: 1; visibility: visible; transition: opacity 400ms ease 200ms, visibility 0s; }

.quick-panel { padding: 96px 0 104px; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.q-eyebrow { margin-top: 26px; font-size: 19px; line-height: 23px; font-weight: 700; letter-spacing: 0.012em; color: var(--dim); }
.q-title { margin-top: 6px; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; }
.q-text { margin-top: 10px; font-size: 19px; line-height: 23px; font-weight: 600; letter-spacing: -0.012em; color: var(--dim); max-width: 34ch; }
.keys { display: flex; gap: 12px; }
.key { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(180deg, #34343c, #1d1d23); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 0 #0d0d11, 0 12px 24px rgba(0,0,0,0.5); }

/* ——— 5. Lecteur : scène collante, l'image se range en carte, carrousel ———
   --p : 0 = plein écran (image Sintel propre, sans interface, titre posé dessus), 1 = carte rangée (recadrage du lecteur). */
.shows { position: relative; background: #000; }
.shows-wrap { --p: 1; --s0: 1.7; --dy: 0px; --tx: 0px; --cw: max(280px, min(900px, 62.5vw, calc((100vh - 400px) * 1.7778))); height: calc(100vh + 1300px); }
.shows-stage { position: sticky; top: var(--ln-h); height: calc(100vh - var(--ln-h)); min-height: 600px; overflow: hidden; display: flex; flex-direction: column; }
.shows-title { position: relative; z-index: 2; text-align: center; padding-top: clamp(28px, 5vh, 54px); opacity: clamp(0, (var(--p) - 0.82) * 5.5, 1); transform: translateY(calc((1 - var(--p)) * 20px)); }
.shows-cover { position: absolute; z-index: 4; left: max(6.25vw, calc(50vw - 490px)); bottom: 18vh; max-width: 11em; pointer-events: none; opacity: clamp(0, 1 - var(--p) * 2.6, 1); transform: translateY(calc(var(--p) * -40px)); text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.shows-viewport { position: relative; margin-top: clamp(20px, 4vh, 40px); touch-action: pan-y; }
.shows-track { display: flex; gap: 40px; width: max-content; transform: translateX(var(--tx)); transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1); }
/* bouclage : saut sans animation de la copie vers la vraie carte */
.shows-track.no-anim, .shows-track.no-anim * { transition: none !important; }
.show { width: var(--cw); flex: none; }
.show-card { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #111; transform-origin: 50% 50%; transition: opacity 500ms ease; }
.show-zoom { position: absolute; inset: 0; }
.show-zoom img { width: 100%; height: 100%; object-fit: cover; }
.show-clean { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: clamp(0, 1 - var(--p) * 2, 1); }
.show.is-on .show-card { z-index: 3; transform: translateY(calc(var(--dy) * (1 - var(--p)))) scale(calc(1 + (var(--s0) - 1) * (1 - var(--p)))); border-radius: calc(18px * var(--p)); }
.show.is-on .show-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.82), rgba(0,0,0,0.45) 42%, rgba(0,0,0,0) 72%), linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0) 50%); opacity: clamp(0, 1 - var(--p) * 1.6, 1); }
.show:not(.is-on) .show-card { opacity: calc(var(--p) * 0.5); }
.show.is-prev .show-card { transform: translateX(calc(-270px * (1 - var(--p)))) scale(calc(1 + 0.12 * (1 - var(--p)))); }
.show.is-next .show-card { transform: translateX(calc(270px * (1 - var(--p)))) scale(calc(1 + 0.12 * (1 - var(--p)))); }
/* légende sous la carte, alignée à gauche comme le bas des cartes du modèle (le texte n'est jamais posé sur l'interface) */
.show-info { margin: 26px 0 0; text-align: left; opacity: 0; transition: opacity 400ms ease; }
.show.is-on .show-info { opacity: clamp(0, (var(--p) - 0.7) * 3.4, 1); }
.show-info h3 { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.show-info h3 .ic { font-size: 24px; color: var(--lavender); }
.show-info p { max-width: 640px; margin-top: 8px; font-size: 19px; line-height: 25px; color: var(--text2); letter-spacing: -0.012em; }
.hot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); translate: -50% -50%; border-radius: 999px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(255,255,255,0.16), 0 0 50px 10px rgba(255,255,255,0.2); transition: opacity 400ms ease; }
.hot-sq { border-radius: 14px; }
.show.is-on .hot { opacity: clamp(0, (var(--p) - 0.85) * 6.6, 1); }
@media (prefers-reduced-motion: no-preference) { .show.is-on .hot { animation: breathe 2.4s ease-in-out infinite; } @keyframes breathe { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 14px rgba(255,255,255,0.08), 0 0 70px 16px rgba(255,255,255,0.16); } } }
.shows-arrow { position: absolute; z-index: 5; top: calc(var(--cw) * 0.28125 - 45px); height: 90px; width: 56px; display: grid; place-items: center; font-size: 40px; color: rgba(255,255,255,0.72); opacity: clamp(0, (var(--p) - 0.8) * 5, 1); transition: color 250ms linear; }
/* flèches aux bords de l'écran, visibles au survol du carrousel (toujours visibles sur écran tactile) */
.shows-prev { left: 60px; }
.shows-next { right: 60px; }
@media (hover: hover) {
  .shows-arrow:hover { color: #fff; }
  .shows-arrow { opacity: 0; transition: opacity 250ms linear, color 250ms linear; }
  .shows-viewport:hover .shows-arrow, .shows-arrow:focus-visible { opacity: clamp(0, (var(--p) - 0.8) * 5, 1); }
}
.shows-foot { position: relative; z-index: 2; margin-top: auto; padding: 0 0 clamp(20px, 4vh, 36px); width: min(1224px, 85%); margin-inline: auto; display: flex; align-items: center; justify-content: center; opacity: clamp(0, (var(--p) - 0.8) * 5, 1); }
/* points : cible de 24 × 24 px, point dessiné de 8 px (24 px pour le point actif) */
.shows-dots { display: flex; gap: 0; padding: 6px 10px; border-radius: 980px; background: rgba(255,255,255,0.08); }
.shows-dots button { position: relative; width: 24px; height: 24px; transition: width 300ms var(--ease-out); }
.shows-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.4); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.shows-dots button[aria-current='true'] { width: 40px; }
.shows-dots button[aria-current='true']::after { width: 24px; background: #fff; }
.shows-foot .play-btn { position: absolute; right: 0; }

/* ——— 6. Profils : écran centré en parallaxe + paragraphe à accroche ——— */
.tablet { padding: 190px 0 150px; overflow-x: clip; }
.tv-prof { will-change: transform; }
.who-screen { container-type: inline-size; background: radial-gradient(90% 90% at 50% 100%, #1a1a22, #08080b 72%); }
.prof-glow { position: absolute; inset: 0; background: radial-gradient(42% 58% at 50% 60%, rgba(var(--glow, 91,140,255), 0.38), transparent 72%), radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.05), transparent 70%); transition: background 600ms ease; pointer-events: none; }
.who { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 5cqw; }
.who-title { font-size: 4cqw; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.avatars { display: flex; gap: 4.4cqw; }
.av { display: grid; justify-items: center; gap: 1.6cqw; }
.av-disc { width: 10.5cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 4.4cqw; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.av-name { color: var(--text2); font-size: max(11px, 1.7cqw); font-weight: 500; transition: color 200ms ease; }
.av.is-on .av-disc { box-shadow: 0 0 0 0.45cqw #050507, 0 0 0 0.85cqw #fff, 0 2cqw 5cqw -1cqw rgba(0,0,0,0.7); transform: scale(1.08); }
.av.is-on .av-name { color: #fff; font-weight: 600; }
.av-add .av-disc { background: rgba(255,255,255,0.10); color: var(--text2); font-size: 3.6cqw; }
@media (hover: hover) { .av:not(.av-add):hover .av-disc { transform: scale(1.1); } }
.tablet-copy { margin-top: 96px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.acc-h, .acc-p { display: inline; font: inherit; letter-spacing: inherit; }
.acc-h { color: var(--text); }
.acc-p { color: var(--dim); }
.perks { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 0; text-align: center; }
.perks li { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.perk-ic { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--text); }
.perk-ic .ic { display: block; }

/* ——— 7 et 9. Bandes à cartes (modèle des offres) ——— */
.band { background: var(--band2); }
.prefs { padding: 100px 0 90px; }
.prefs-sub, .offers-sub { margin-top: 12px; max-width: 680px; }
.cards { margin-top: 50px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card, .plan { display: flex; flex-direction: column; align-items: flex-start; border-radius: 18px; background: var(--bg); padding: 34px 40px 40px; min-height: 334px; }
.card-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.card-eyebrow .ic { font-size: 19px; }
.card-title { margin-top: 4px; font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.025em; }
.card-text { margin-top: 12px; font-size: 19px; line-height: 23px; color: var(--dim); letter-spacing: -0.012em; text-wrap: pretty; }
.card-val { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 17px; }
.card-val .ic { font-size: 13px; }
.sw { margin-top: auto; padding-top: 28px; display: inline-flex; }
.sw-track { position: relative; width: 51px; height: 31px; border-radius: 99px; background: rgba(255,255,255,0.2); transition: background-color 220ms ease; }
.sw-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.3); transition: transform 240ms var(--ease-out); }
.sw[aria-checked='true'] .sw-track { background: var(--avail); }
.sw[aria-checked='true'] .sw-track::after { transform: translateX(20px); }

/* ——— 8. Affirmations sur image collante ——— */
.props { position: relative; isolation: isolate; background: #000; --veil: 0.5; overflow: clip; }
.props-bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; z-index: -1; }
.props-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: blur(3px) saturate(0.9); }
.props-veil { position: absolute; inset: 0; background: #000; opacity: var(--veil); }
.props-list { display: grid; gap: 50px; padding: 44vh 0 150px; }
.prop { max-width: none; font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); text-wrap: pretty; }

/* ——— Tarifs ——— */
.offers { padding: 100px 0 80px; }
.plans { margin-top: 50px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan { min-height: 0; }
.plan-pro { background: radial-gradient(110% 80% at 0% 0%, rgba(123,77,255,0.22), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(32,201,151,0.12), transparent 60%), var(--bg); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 980px; background: #fff; color: #000; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.035em; }
.plan-price span { color: var(--text2); font-size: 17px; white-space: nowrap; }
.feat { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; align-self: stretch; }
.feat li { display: flex; align-items: flex-start; gap: 11px; font-size: 17px; line-height: 23px; color: rgba(245,245,247,0.9); }
.feat .ic { color: var(--text2); font-size: 18px; margin-top: 2px; flex: none; }
.feat .feat-lead { color: var(--dim); font-size: 14px; font-weight: 600; }
/* boutons des deux offres posés au bas de leur carte, à la même hauteur */
.plan .feat { margin-bottom: 30px; }
.plan .pill, .plan .feat + .pill { margin-top: auto; }
.plan-note { margin-top: 30px; font-size: 14px; line-height: 20px; color: var(--dim); max-width: 760px; }

/* ——— Installer : l'app partout ——— */
.everywhere { padding: 160px 0 140px; }
.ew-icon { width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,0.16); }
.ew-text { width: min(58%, 560px); margin: 22px auto 0; font-size: 17px; line-height: 25px; color: var(--text2); }
.ew-stores { margin-top: 38px; }
.steps { margin-top: 104px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.steps li { display: flex; flex-direction: column; align-items: center; }
.rank { font-size: 96px; line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; background: linear-gradient(180deg, #ffffff 18%, rgba(205,205,212,0.78) 62%, rgba(150,150,158,0.5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps h3 { margin-top: 18px; font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: -0.016em; }
.steps p { margin-top: 8px; font-size: 17px; line-height: 23px; color: var(--text2); max-width: 30ch; }

/* ——— Questions ——— */
.faq { padding: 120px 0 160px; }
.faq h2 { margin-bottom: 52px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ic { flex: none; font-size: 24px; color: var(--dim); transition: transform 400ms ease-in-out; }
.faq-list details[open] summary .ic { transform: rotate(180deg); }
@media (hover: hover) { .faq-list summary:hover span { color: var(--link); } }
.faq-a { overflow: hidden; }
.faq-a p { max-width: 817px; padding: 0 0 30px; font-size: 17px; line-height: 25px; color: var(--text2); }
.faq-a a, .faq-help a { color: var(--link); }
.faq-help { margin-top: 36px; font-size: 19px; line-height: 27px; font-weight: 600; color: var(--text2); text-align: center; }

/* ——— Fin : bandeau sombre + vignettes qui défilent ——— */
.router { padding: 0 0 120px; }
.rb { position: relative; overflow: hidden; isolation: isolate; background: #0c0c11; padding: 58px 0 14px; text-align: center; }
.rb-glow { position: absolute; inset: 0; z-index: -1; }
.rb-glow .g1 { --x: 18%; --y: 10%; --s: 60%; --o: 0.3; } .rb-glow .g2 { --x: 88%; --y: 40%; --s: 55%; --o: 0.22; } .rb-glow .g3 { --x: 60%; --y: -10%; --s: 40%; --o: 0.16; }
.rb-logo { width: 100px; margin: 0 auto; }
.rb-title { margin-top: 16px; font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.022em; }
.rb-stores { margin-top: 26px; }
.rb-rows { margin-top: 46px; display: grid; gap: 12px; }
.rb-row { overflow: hidden; }
.rb-track { display: flex; gap: 12px; width: max-content; animation: marquee 110s linear infinite; }
.rb-row-2 .rb-track { animation-direction: reverse; animation-duration: 125s; }
.rb-track img { width: 238px; height: 135px; object-fit: cover; border-radius: 10px; flex: none; background: var(--card); }
.rb-rows.is-paused .rb-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }
/* pause 14 px au-dessus des vignettes, à droite (2 rangées de 135 px + 12 px d'écart + 14 px de marge basse) */
.rb-btn { position: absolute; right: 30px; bottom: 310px; }

/* ——— Pied de page (notes, fil d'Ariane, colonnes, ligne légale) ——— */
.foot { background: var(--bg2); color: rgba(255,255,255,0.56); font-size: 12px; line-height: 16px; letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.foot-in { max-width: 1024px; margin-inline: auto; padding: 17px 22px 21px; }
.foot a { color: rgba(255,255,255,0.72); }
@media (hover: hover) { .foot a:hover { text-decoration: underline; color: rgba(255,255,255,0.88); } }
.foot-notes { padding: 0 0 17px; border-bottom: 1px solid var(--line); }
.foot-notes p { max-width: 860px; }
.foot-notes p + p { margin-top: 8px; }
.foot-tmdb { display: inline-block; height: 10px; width: auto; vertical-align: -1px; margin: 0 2px; }
.foot-crumbs { display: flex; align-items: center; gap: 9px; padding: 11px 0; }
.foot-crumbs img { height: 12px; width: auto; opacity: 0.8; }
.foot-crumbs .ic { font-size: 10px; color: rgba(255,255,255,0.4); }
.foot-crumbs span:last-child { color: rgba(255,255,255,0.8); }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 20px 0 6px; border-top: 1px solid var(--line); }
.foot-col summary { list-style: none; font-weight: 600; color: rgba(255,255,255,0.88); margin-bottom: 10px; pointer-events: none; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col summary .ic { display: none; }
.foot-col li { margin-bottom: 9px; }
.foot-legal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.foot-legal-links a { white-space: nowrap; }
.foot-legal-links a + a::before { content: '|'; display: inline-block; margin: 0 9px; color: rgba(255,255,255,0.3); }

/* ——— iPhone dessiné en CSS (jamais d'image d'appareil) : la capture (393 × 798 pt) se loge sous une barre d'état dessinée ——— */
.phone {
  --pw: 300px; position: relative; width: var(--pw); flex: none; padding: calc(var(--pw) * 0.034); border-radius: calc(var(--pw) * 0.165);
  background: linear-gradient(145deg, #3a3a40, #121215 38%, #1e1e23);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.16), 0 0 0 1px rgba(0,0,0,0.7), 0 40px 80px -30px #000, 0 20px 100px -30px rgba(120,104,255,0.22);
}
.phone-scr { position: relative; aspect-ratio: 393 / 852; border-radius: calc(var(--pw) * 0.132); overflow: hidden; background: #000; isolation: isolate; }
.phone-scr::before { content: ''; position: absolute; z-index: 3; top: 1.35%; left: 50%; width: 31%; height: 3.6%; translate: -50% 0; border-radius: 99px; background: #000; }
.phone-scr::after { content: ''; position: absolute; z-index: 3; bottom: 0.9%; left: 50%; width: 34%; height: 0.55%; translate: -50% 0; border-radius: 99px; background: rgba(255,255,255,0.75); }
.sb { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 6.34%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; color: #fff; font-size: calc(var(--pw) * 0.047); font-weight: 600; letter-spacing: -0.01em; }
.sb svg { width: 21%; height: auto; }
.phone-scr > img { position: absolute; left: 0; bottom: 0; width: 100%; height: 93.66%; object-fit: cover; object-position: top; }

/* héros : l'iPhone posé devant le coin bas droit de la télé, il monte un peu plus vite qu'elle */
.hero-phone { --pw: clamp(120px, 18vw, 250px); position: absolute; z-index: 3; right: -5%; bottom: -14%; will-change: transform; }

/* ——— 3 bis. Dans ta poche : carrousel de cartes, un iPhone par écran ——— */
.pocket { padding: 150px 0 20px; overflow-x: clip; }
.pocket-sub { margin: 18px auto 0; max-width: 640px; }
.pocket-rail { display: flex; gap: 24px; margin-top: 64px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 10px max(6.25vw, calc((100vw - 1224px) / 2)) 30px; scroll-padding-inline: max(6.25vw, calc((100vw - 1224px) / 2)); }
.pocket-rail::-webkit-scrollbar { display: none; }
.pocket-rail:focus-visible { outline-offset: -4px; }
.pocket-card { scroll-snap-align: start; flex: none; width: 380px; padding: 38px 30px 34px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); display: flex; flex-direction: column; align-items: center; text-align: center; }
.pocket-card h3 { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 30px; }
.pocket-card .phone { --pw: 236px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.16), 0 30px 60px -30px #000; }
.pocket-card figcaption { margin-top: 28px; max-width: 290px; font-size: 17px; line-height: 23px; color: var(--text2); letter-spacing: -0.012em; text-wrap: pretty; }
.pocket-nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.pocket-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.86); transition: background-color 320ms var(--ease-btn), opacity 320ms var(--ease-btn); }
@media (hover: hover) { .pocket-arrow:not([disabled]):hover { background: rgba(255,255,255,0.22); } }
.pocket-arrow[disabled] { opacity: 0.36; cursor: default; }

/* ——— 5 bis. Suivi : phrase qui s'allume mot à mot, liste et iPhone penché ——— */
.follow { padding: 170px 0 60px; overflow-x: clip; }
.follow-t { max-width: 1060px; }
.follow-t .w { color: rgba(255,255,255,0.2); transition: color 500ms var(--ease-out); }
.follow-t .w.on { color: var(--text); }
.follow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-top: 90px; }
.follow-list { display: grid; gap: 28px; }
.follow-list li { display: flex; align-items: flex-start; gap: 18px; font-size: 21px; line-height: 27px; letter-spacing: -0.016em; color: var(--dim); }
.follow-list strong { color: var(--text); font-weight: 600; }
.follow-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; color: #fff; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); margin-top: -8px; }
.follow-list li:nth-child(3n+1) .follow-ic { color: var(--lavender); } .follow-list li:nth-child(3n+2) .follow-ic { color: var(--mint); } .follow-list li:nth-child(3n) .follow-ic { color: var(--rose); }
.follow-visual { position: relative; display: flex; justify-content: center; padding: 40px 0 70px; }
.follow-visual::before { content: ''; position: absolute; inset: 0 -10%; z-index: -1; background: radial-gradient(50% 45% at 55% 50%, rgba(123,104,255,0.28), transparent 70%), radial-gradient(35% 35% at 30% 75%, rgba(110,222,208,0.16), transparent 70%); pointer-events: none; }
.tilt { position: relative; transform: rotate(-8deg); }
.tilt .phone { --pw: 300px; }
.resume { position: absolute; left: -46%; bottom: 20%; width: 320px; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; transform: rotate(8deg);
  background: rgba(40,40,48,0.62); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 30px 60px -20px #000; }
.resume img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; flex: none; }
.resume-t { flex: 1; min-width: 0; }
.resume-k { font-size: 12px; line-height: 16px; color: var(--text2); }
.resume-n { font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.015em; }
.resume-bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,0.16); overflow: hidden; }
.resume-bar i { display: block; width: 62%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--lavender)); }
.resume-play { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-size: 15px; padding-left: 2px; }

/* ——— Pages légales ——— */
.ln-back { background: rgba(255,255,255,0.12); color: #fff; }
@media (hover: hover) { .ln-back:hover { background: rgba(255,255,255,0.2); } }
.legal { width: min(692px, 87.5%); margin: 0 auto; padding: 80px 0 120px; }
.legal-kicker { color: var(--dim); font-size: 14px; font-weight: 600; }
.legal h1 { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.035em; margin: 10px 0 36px; }
.legal h2 { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 52px 0 14px; }
.legal h3 { font-size: 19px; line-height: 23px; font-weight: 600; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--text2); font-size: 17px; line-height: 26px; text-wrap: pretty; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { margin: 12px 0; padding-left: 22px; display: grid; gap: 8px; }
.legal ul { list-style: disc; } .legal ol { list-style: decimal; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--link); }
.legal a:hover { text-decoration: underline; }
.legal-box { background: var(--card); border-radius: 18px; padding: 24px 28px; margin: 8px 0; }
.legal-box p { color: rgba(245,245,247,0.86); }

/* ——— Moyen (735 à 1068) ——— */
@media (max-width: 1068px) {
  .t110, .hero-title { font-size: 80px; line-height: 84px; }
  .t80 { font-size: 64px; line-height: 68px; }
  .t72 { font-size: 56px; line-height: 60px; }
  .t48s, .prop { font-size: 40px; line-height: 44px; }
  .t40 { font-size: 32px; line-height: 36px; }
  .intro { font-size: 28px; line-height: 34px; }
  .hero-media { margin-top: 36px; }
  /* L'app en colonne dès la tablette : chaque texte sous sa capture (plus de télé collante à moitié hors cadre) */
  .chick::before { height: 620px; }
  .chick-head { margin-bottom: 40px; }
  .chick-body { grid-template-columns: minmax(0, 1fr); }
  .chick-stage { display: none; }
  .chick-block, .chick-block:first-child, .chick-block:last-child { min-height: 0; padding: 36px 0 30px; justify-content: flex-start; }
  .chick-fig { display: block; margin: 0 -12vw 30px 0; }
  .acc { font-size: 21px; line-height: 25px; }
  .loop-tiles, .quick { gap: 20px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .shows-prev { left: 12px; } .shows-next { right: 12px; }
  .ln-items { gap: 10px; }
}

/* ——— Lecteur « à plat » : téléphone, téléphone couché (hauteur ≤ 540) et tablette en portrait.
   Pas de scène collante ni de zoom plein écran : carte à taille fixe, carrousel en flux. Même requête dans main.js. ——— */
@media (max-width: 734px), (max-height: 540px), (max-width: 1068px) and (orientation: portrait) {
  .shows-wrap { height: auto; --p: 1; --cw: min(87.5vw, 560px); }
  .shows-stage { position: relative; top: auto; height: auto; min-height: 0; padding: 72px 0 56px; }
  .shows-title { padding: 0 6.25%; }
  .shows-cover, .show-clean { display: none; }
  .shows-viewport { margin-top: 30px; }
  .shows-foot { margin-top: 32px; padding: 0; }
}
@media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
  .shows-wrap { --cw: min(80vw, 640px); }
}

/* ——— Petit (≤ 734) ——— */
@media (max-width: 734px) {
  :root { --ln-h: 48px; }
  body { font-size: 17px; }
  .w1224, .w1260, .w1008, .w720, .w692, .w653, .w572, .w980 { width: 87.5%; }
  .w1360 { width: 100%; }
  .t110, .hero-title { font-size: 40px; line-height: 44px; letter-spacing: -0.035em; }
  .t80 { font-size: 34px; line-height: 38px; }
  .t72 { font-size: 34px; line-height: 38px; letter-spacing: -0.03em; }
  .t48s, .prop { font-size: 28px; line-height: 32px; letter-spacing: -0.025em; }
  .t40 { font-size: 28px; line-height: 32px; }
  .t21 { font-size: 19px; line-height: 24px; }
  .acc, .acc-sm, .tablet-copy { font-size: 19px; line-height: 24px; letter-spacing: -0.016em; }

  /* barre locale : logo, chevron qui déplie les sections, bouton */
  .ln-content { padding-inline: 16px; }
  .ln-brand img { height: 18px; }
  .ln-toggle { display: inline-flex; width: 44px; height: 44px; margin-right: -8px; }
  .ln-actions { margin-left: 0; gap: 10px; }
  /* fond opaque : un flou imbriqué dans .ln ne floute pas la page */
  .ln-menu {
    position: absolute; left: 0; right: 0; top: 100%; visibility: hidden; opacity: 0; transform: translateY(-6px);
    background: #161618;
    box-shadow: inset 0 -1px 0 var(--line); transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui), visibility 0s 240ms;
  }
  .ln.is-open .ln-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui); }
  .ln-items { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 12px; }
  .ln-items li + li { box-shadow: inset 0 1px 0 var(--line); }
  .ln-link { display: block; height: auto; padding: 13px 0; font-size: 17px; }

  .hero { --tvw: 88vw; background-size: 100% calc(300px + var(--tvw) * 0.5625 * 0.55); }
  .hero-head { padding-top: 44px; }
  .hero-icon { width: 64px; height: 64px; border-radius: 15px; }
  .hero-eyebrow { margin-top: 10px; font-size: 17px; line-height: 21px; }
  .hero-media { margin-top: 30px; }
  .hero-intro { padding-top: 64px; }
  .intro { font-size: 21px; line-height: 26px; }
  .hero-cta { margin-top: 30px; }
  .stores { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 10px; }
  .store { height: 52px; padding: 0 10px; justify-content: center; gap: 8px; }
  .store .ic { font-size: 21px; }
  .store-n { font-size: 15px; }
  .hero .caption { font-size: 12px; line-height: 16px; }

  .ew-devices { margin-top: 56px; }
  .dev-sub { font-size: 19px; line-height: 24px; letter-spacing: -0.016em; }
  .dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; margin-top: 44px; }
  .dev-ic { height: 52px; font-size: 48px; }
  .dev-n { margin-top: 10px; font-size: 17px; line-height: 21px; }
  .dev-s { font-size: 12px; line-height: 16px; }

  .chick { margin-top: 110px; padding-top: 90px; }
  .chick::before { height: 480px; }
  .chick-head { margin-bottom: 10px; }
  .chick-fig { margin: 0 -18vw 30px 0; }
  .chick-logo { height: 26px; margin-bottom: 14px; }
  .chick-lead { font-size: 19px; line-height: 24px; letter-spacing: -0.016em; }
  .chick-block .more { font-size: 19px; line-height: 25px; }
  .chick-block .more .ic { font-size: 15px; }

  .find { margin-top: 60px; padding-top: 90px; }
  .find::before { height: 420px; }
  .find-head { margin-bottom: 36px; }
  .find-media { width: 100%; padding-left: 6.25%; }
  .find-copy { padding: 64px 0 76px; }

  /* vitrine : les 3 tuiles visibles sans défilement (une grande, deux petites) */
  .loop { padding: 56px 0 60px; }
  .loop-title { margin-bottom: 22px; padding-right: 50px; }
  .loop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .loop-tiles .tile:first-child { grid-column: 1 / -1; }
  .tile figcaption { font-size: 15px; left: 14px; bottom: 11px; }
  .loop-texts { padding: 40px 0 76px; }
  .quick-panel { padding: 56px 0 64px; }
  .quick-panel .w1224 { width: 100%; }
  .quick { grid-template-columns: repeat(3, 76vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 6.25% 8px; scroll-padding-inline: 6.25%; scrollbar-width: none; }
  .quick::-webkit-scrollbar { display: none; }
  .q { scroll-snap-align: start; }
  .q-eyebrow { margin-top: 18px; font-size: 17px; line-height: 21px; }
  .q-title { font-size: 24px; line-height: 28px; }
  .q-text { font-size: 17px; line-height: 23px; }

  .shows-wrap { --cw: 87.5vw; }
  .shows-track { gap: 14px; }
  .show-card { border-radius: 12px; }
  .show.is-on .show-card { border-radius: 12px; }
  .show-info { padding: 0 2px; margin-top: 20px; }
  .show-info h3 { font-size: 19px; line-height: 23px; }
  .show-info h3 .ic { font-size: 19px; }
  .show-info p { font-size: 17px; line-height: 23px; }
  .shows-arrow { display: none; }
  .shows-foot { margin-top: 28px; }

  .tablet { padding: 110px 0 96px; }
  .tablet-copy { margin-top: 56px; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; margin-top: 44px; }
  .perks li { font-size: 15px; line-height: 19px; }
  .perk-ic { font-size: 28px; }

  .prefs, .offers { padding: 72px 0 64px; }
  .cards, .plans { grid-template-columns: 1fr; gap: 15px; margin-top: 34px; }
  .card, .plan { padding: 28px 26px 30px; }
  .card-eyebrow { font-size: 14px; line-height: 18px; }
  .card-eyebrow .ic { font-size: 17px; }
  .card-title { font-size: 24px; line-height: 28px; }
  .card-text { font-size: 17px; line-height: 23px; }
  .plan-price b { font-size: 40px; line-height: 44px; }

  .props-list { gap: 40px; padding: 46vh 0 110px; }

  .everywhere { padding: 110px 0 90px; }
  .ew-icon { width: 64px; height: 64px; border-radius: 15px; }
  .ew-text { width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 44px; margin-top: 72px; }
  .rank { font-size: 80px; }

  .faq { padding: 90px 0 110px; }
  .faq h2 { margin-bottom: 34px; }
  .faq-list summary { padding: 19px 0; font-size: 19px; line-height: 23px; }
  .faq-list summary .ic { font-size: 19px; }

  .router { padding: 0 0 0; }
  .rb { padding: 48px 0 14px; }
  .rb-logo { width: 80px; }
  .rb-title { font-size: 24px; line-height: 28px; padding: 0 6.25%; }
  .rb-stores { padding: 0 6.25%; }
  .rb-rows { margin-top: 36px; }
  .rb-track img { width: 180px; height: 101px; }
  .rb-btn { top: 12px; bottom: auto; right: 12px; }

  .foot-in { padding: 17px 6.25% 24px; }
  .foot-cols { grid-template-columns: 1fr; padding: 4px 0 0; }
  .foot-col { border-bottom: 1px solid var(--line); }
  .foot-col summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 0; font-weight: 400; color: rgba(255,255,255,0.8); }
  .foot-col summary .ic { display: inline-block; font-size: 12px; transition: transform 320ms var(--ease-btn); }
  .foot-col[open] summary .ic { transform: rotate(180deg); }
  .foot-col ul { padding: 0 0 12px 12px; }
  .foot-legal { flex-direction: column; align-items: flex-start; }
  /* liens légaux : retour à la ligne sans séparateur orphelin en début de ligne */
  .foot-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .foot-legal-links a + a::before { display: none; }

  .legal { padding: 56px 0 96px; }
  .legal h1 { font-size: 34px; line-height: 38px; }
  .legal h2 { font-size: 24px; line-height: 28px; margin-top: 44px; }
}

/* ——— iPhone, Dans ta poche, Suivi : moyen et petit ——— */
@media (max-width: 1068px) {
  .follow-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 64px; }
  .follow-visual { padding: 60px 0 40px; }
  .resume { left: -34%; }
}
@media (max-width: 734px) {
  .hero-phone { --pw: 25vw; right: -3%; bottom: -16%; }
  .hero-intro { padding-top: 92px; }
  .pocket { padding: 100px 0 10px; }
  .pocket-rail { gap: 14px; margin-top: 40px; padding: 6px 6.25% 24px; scroll-padding-inline: 6.25%; }
  .pocket-card { width: 78vw; max-width: 330px; padding: 30px 18px 26px; border-radius: 22px; }
  .pocket-card h3 { font-size: 21px; line-height: 25px; margin-bottom: 24px; }
  .pocket-card .phone { --pw: 200px; }
  .pocket-card figcaption { font-size: 15px; line-height: 20px; margin-top: 22px; }
  .pocket-nav { margin-top: 6px; }
  .follow { padding: 110px 0 40px; }
  .follow-grid { margin-top: 48px; }
  .follow-list { gap: 22px; }
  .follow-list li { font-size: 17px; line-height: 23px; gap: 14px; }
  .follow-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; margin-top: -6px; }
  .tilt .phone { --pw: 210px; }
  .resume { left: -24%; bottom: 14%; width: 250px; padding: 10px 12px 10px 10px; gap: 10px; border-radius: 16px; }
  .resume img { width: 48px; height: 48px; border-radius: 10px; }
  .resume-n { font-size: 14px; line-height: 18px; }
  .resume-play { width: 30px; height: 30px; font-size: 13px; }
}

/* Mouvement réduit : aucun effet lié au défilement (main.js ne les enregistre pas non plus), rien ne tourne tout seul */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.in), .js [data-slide] { opacity: 1; transform: none; }
  [data-reveal], [data-slide], .follow-t .w, .chick-shot, .loop-set *, .loop-texts p, .shows-track, .show-card, .show-info { transition: none !important; }
  [data-slide], [data-parallax], [data-hero-tv], [data-hero-phone], [data-hero-head], .chick-head, .find-head, .chick-body, .find-media, .find-copy, .chick::before, .find::before { transform: none !important; }
  [data-hero-head] { opacity: 1 !important; }
  .rb-track { animation: none; }
  .rb-btn { display: none; }
  .shows-wrap { height: auto; --p: 1; }
  .shows-stage { position: relative; top: auto; height: auto; min-height: 0; padding: 80px 0 60px; }
  .shows-cover, .show-clean { display: none; }
  /* vitrine : les trois séries empilées et lisibles, sans rotation ni bouton */
  .loop-set { grid-area: auto; }
  .loop-sets { gap: 56px; }
  .loop-set .loop-title, .loop-set .tile { opacity: 1; transform: none; }
  .loop-btn { display: none; }
  .loop-texts { gap: 16px; }
  .loop-texts p { grid-area: auto; visibility: visible; opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .ln, .ln-menu { background: #161618; -webkit-backdrop-filter: none; backdrop-filter: none; }
}