/* 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.d6d4d921.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-500.868cce5c.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-600.15df312d.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-700.34798659.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url(inter-800.3299ccb9.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Ionicons; src: url(ionicons.28cd5e73.woff2) format('woff2'); font-display: block; }
/* Arabe (14/10/2026) : Inter n'a aucun glyphe arabe. IBM Plex Sans Arabic (OFL), réduite par build.py au bloc arabe avec
   toutes les fonctions OpenType de l'écriture arabe (formes contextuelles, ligatures, signes) et renommée « CTV Sans Arabic »
   (« Plex » est un nom réservé par la licence, voir AR_FAMILY dans build.py). Nommée seulement dans la police des pages arabes
   (bloc « Arabe » en fin de fichier) : les autres pages ne la téléchargent jamais, même avec « العربية » dans leur liste des
   langues. Graisses 400 à 700 (800 demandé = 700). */
@font-face { font-family: 'CTV Sans Arabic'; src: url(arabic-400.b1d5958c.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: 'CTV Sans Arabic'; src: url(arabic-500.ea0ec29d.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: 'CTV Sans Arabic'; src: url(arabic-600.a5b978a9.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }
@font-face { font-family: 'CTV Sans Arabic'; src: url(arabic-700.6016a6af.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+200C-200F, U+25CC; }

: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%; }
/* ancres arrêtées sous la barre collante : marge sur les cibles et non scroll-padding sur html (dans Chrome, scroll-padding
   faisait remonter la page d'une demi-hauteur d'écran quand le focus clavier arrivait dans la barre, 14/10/2026) */
[id] { scroll-margin-top: var(--ln-h); }
/* focus clavier dans la page (Maj+Tab en remontant) : l'élément atteint s'arrête sous la barre et non dessous (jamais dans la
   barre elle-même, sinon le saut reviendrait) */
:is(main, .foot) :is(a, button, summary, [tabindex]) { scroll-margin-top: calc(var(--ln-h) + 8px); }
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; inset-inline-start: 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; }
/* flex: none : le logo garde ses 62 px quand la barre est pleine (portugais à 735 px, 14/10/2026) */
.ln-brand { display: flex; flex: none; align-items: center; height: 100%; margin-inline-end: auto; }
.ln-brand img { height: 20px; width: auto; }
.ln-items { display: flex; align-items: center; gap: 16px; }
/* ordinateur (demande de Clément, 15/10/2026) : liens des sections centrés entre le logo et les boutons (langue, Discord, Télécharger) */
@media (min-width: 735px) { .ln-menu { flex: 1; display: flex; justify-content: center; padding-inline: 24px; } .ln .ln-brand { margin-inline-end: 0; } .ln .ln-actions { margin-inline-start: 0; } }
/* pages légales (pas de liens de sections) : langue et retour au site restent au bout de la barre, pas collés au logo */
.ln .ln-brand + .ln-actions { margin-inline-start: auto; }
/* 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-inline-start: 24px; }
/* lien vers le Discord de la communauté (logo seul, 10/2026) */
.ln-discord { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: rgba(255,255,255,0.8); font-size: 17px; transition: color 240ms var(--ease-ui); }
@media (hover: hover) { .ln-discord:hover { color: #fff; } }
/* sélecteur de langue (14/10/2026, menu déroulant façon nachoz.app depuis le passage à 7 langues) : globe et nom de la langue
   de la page sur ordinateur (« English », « Français »), globe et code sur mobile ; même ton que le logo Discord.
   <details> : sans JavaScript, le menu s'ouvre quand même et ses liens marchent ; main.js ajoute Échap, clic extérieur,
   flèches et ferme le menu des sections (un seul menu ouvert). Propriétés logiques (inset-inline) : prêt pour l'arabe. */
.ln-lang { position: relative; }
.ln-lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color 240ms var(--ease-ui); }
.ln-lang-btn::-webkit-details-marker { display: none; }
.ln-lang-btn .ic { font-size: 16px; }
.ln-lang[open] .ln-lang-btn { color: #fff; }
.ln-lang-s { display: none; letter-spacing: 0.02em; }
/* code seul : sur mobile, et de 735 à 899 px sur l'accueil (le nom complet y colle le logo aux liens des sections en français
   et dans les langues aux libellés longs) ; les pages légales, sans liens de sections, gardent le nom dès 735 px */
@media (max-width: 899px) { .ln-menu ~ .ln-actions .ln-lang-l { display: none; } .ln-menu ~ .ln-actions .ln-lang-s { display: inline; } }
@media (max-width: 734px) { .ln-lang-l { display: none; } .ln-lang-s { display: inline; } }
@media (hover: hover) { .ln-lang-btn:hover { color: #fff; } }
/* liste des langues : petit panneau sous la barre, aligné sur le bouton (fond opaque, mêmes teintes que le menu des sections) */
.ln-lang-list { position: absolute; top: calc(100% + 16px); inset-inline-end: -14px; min-width: 196px; padding: 6px; border-radius: 14px; background: #161618; box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,0.55); }
.ln-lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 18px; letter-spacing: -0.01em; color: rgba(255,255,255,0.8); white-space: nowrap; transition: background-color 240ms var(--ease-ui), color 240ms var(--ease-ui); }
.ln-lang-list a:focus-visible { outline-offset: -2px; }
.ln-lang-list a[aria-current] { color: #fff; font-weight: 500; }
.ln-lang-list .ic { font-size: 15px; color: var(--link); }
/* « العربية » dans les pages des autres langues : lettrage à 0 (un lettrage négatif desserre les liaisons de l'arabe) */
.ln-lang-list a:lang(ar), .foot-lang a:lang(ar) { letter-spacing: 0; }
@media (hover: hover) { .ln-lang-list a:hover { background: rgba(255,255,255,0.08); color: #fff; } }
.ln-lang[open] .ln-lang-list { animation: ln-drop 240ms var(--ease-ui); }
@keyframes ln-drop { from { opacity: 0; transform: translateY(-6px); } }
.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); }
/* ordre des boutons : langue, Discord (ordinateur) ou flèche du menu (mobile), Télécharger */
.ln-lang { order: 0; } .ln-discord, .ln-toggle { order: 1; } .ln-cta { order: 2; }
/* ligne Discord du menu déroulant : mobile seulement, l'ordinateur garde le logo dans la barre */
.ln-item-discord { display: none; }
.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; text-wrap: balance; }
.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-inline-start: 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; inset-inline-start: 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; inset-inline-start: 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; inset-inline-end: 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; inset-inline-start: 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 { inset-inline-start: 60px; }
.shows-next { inset-inline-end: 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; inset-inline-end: 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; inset-inline-start: 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-discord { white-space: nowrap; }
.faq-discord .ic { margin-inline-end: 5px; font-size: 0.95em; vertical-align: -0.08em; }
.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; inset-inline-end: 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); }
/* fil d'Ariane à gauche, langues à droite (retour à la ligne si la place manque) */
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
/* 7 langues (14/10/2026) : la liste passe à la ligne sur petit écran. Point séparateur dans l'écart entre deux langues ;
   celui d'une langue en début de ligne tombe hors de la liste et il est rogné (clip-path), aucune ligne ne commence par « · » */
.foot-lang { display: flex; align-items: baseline; padding: 11px 0; }
.foot-lang .ic { flex: none; font-size: 13px; margin-inline-end: 7px; color: rgba(255,255,255,0.56); }
.foot-lang-l { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; padding-inline-start: 6px; margin-inline-start: -6px; clip-path: inset(-8px -8px -8px 0); }
[dir="rtl"] .foot-lang-l { clip-path: inset(-8px 0 -8px -8px); }
.foot-lang-l a { position: relative; }
.foot-lang-l a + a::before { content: '·'; position: absolute; inset-inline-start: -20px; width: 20px; text-align: center; color: rgba(255,255,255,0.3); pointer-events: none; }
.foot .foot-lang a[aria-current] { color: rgba(255,255,255,0.88); }
.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-discord { display: inline-flex; align-items: center; gap: 6px; }
.foot-discord .ic { font-size: 14px; }
.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; inset-inline-end: -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; inset-inline-start: -46%; bottom: 20%; width: 320px; display: flex; align-items: center; gap: 14px; padding: 12px; padding-inline-end: 16px; 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-inline-start: 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-block: 0 30px; margin-inline: 0 -12vw; }
  .acc { font-size: 21px; line-height: 25px; }
  .loop-tiles, .quick { gap: 20px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .shows-prev { inset-inline-start: 12px; } .shows-next { inset-inline-end: 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; }
  /* barre allégée (14/10/2026) : logo, langue, flèche, Télécharger ; Discord passe dans le menu */
  .ln-discord { display: none; }
  .ln-lang-btn { height: 44px; gap: 3px; letter-spacing: 0.02em; }
  .ln-lang-btn .ic { font-size: 16px; }
  /* liste des langues : sous la barre, toute la largeur, comme le menu des sections (un seul des deux ouvert, main.js) */
  .ln-lang { position: static; }
  .ln-lang-list { inset: 100% 0 auto 0; min-width: 0; max-height: calc(100vh - var(--ln-h)); overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 12px; border-radius: 0; background: #161618; box-shadow: inset 0 -1px 0 var(--line); }
  .ln-lang-list li + li { box-shadow: inset 0 1px 0 var(--line); }
  .ln-lang-list a { padding: 13px 0; border-radius: 0; font-size: 17px; line-height: 21px; }
  .ln-lang-list .ic { font-size: 18px; }
  /* écarts égaux langue › flèche › Télécharger (mesurés : 20,5 px de part et d'autre à 390 px, 16,5 px à 320 px) */
  .ln-toggle { display: inline-flex; width: 44px; height: 44px; margin-inline: -4px; }
  .ln-actions { margin-inline-start: 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; }
  .ln-item-discord { display: block; }
  .ln-link-discord { display: flex; align-items: center; gap: 10px; }
  .ln-link-discord > .ic:first-child { font-size: 20px; color: #8c96ff; }
  .ln-link-discord > .ic:last-child { margin-inline-start: auto; font-size: 15px; color: rgba(255,255,255,0.4); }

  .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-block: 0 30px; margin-inline: 0 -18vw; }
  .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-inline-start: 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-inline-end: 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; inset-inline-start: 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; inset-inline-end: 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; padding-inline-start: 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; }
}

/* ——— Très petits téléphones (≤ 374, iPhone SE 1re génération, Android 320 à 360) ———
   barre du haut : écart réduit pour garder logo, langue, menu et bouton sur une ligne ;
   pilules des stores hors français : « Coming soon to the », « Download on the » et les formules des autres langues sont plus
   longues que « Bientôt sur », pilule plus compacte (chaque langue vérifie que ses pilules tiennent à 320 px). */
@media (max-width: 374px) {
  .ln-actions { gap: 6px; }
  .store:not(:lang(fr)) { padding: 0 8px; gap: 6px; }
  .store:not(:lang(fr)) .ic { font-size: 19px; }
  .store:not(:lang(fr)) .store-k { font-size: 10px; letter-spacing: -0.01em; }
}

/* ——— 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 { inset-inline-start: -34%; }
}
@media (max-width: 734px) {
  .hero-phone { --pw: 25vw; inset-inline-end: -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 { inset-inline-start: -24%; bottom: 14%; width: 250px; padding: 10px; padding-inline-end: 12px; 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; }
  .ln-lang[open] .ln-lang-list { animation: 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; }
}

/* ——— Droite à gauche (arabe, 14/10/2026) : la page entière en miroir ———
   build.py pose dir="rtl" sur <html>. Les positions, marges et alignements qui dépendent du sens sont écrits en propriétés
   logiques (inset-inline-*, margin-inline-*, padding-inline-*) : rien à refaire ici. Ce bloc ne touche que les pages RTL
   (sélecteurs [dir="rtl"]) ; les pages des autres langues restent identiques au pixel près.
   Restent physiques à dessein : glyphe « lecture » décalé de 2 px (triangle jamais retourné), contenu des iPhone dessinés,
   centrages à 50 %. */
/* icônes de direction (chevrons avant / arrière, « ouvrir », séparateur du fil d'Ariane) retournées ; build.py les marque
   .ic-dir. `scale` se compose avec les `transform` existants (le décalage au survol de .more part donc vers la gauche).
   Jamais retournés : lecture, pause, avance (médias), logos, globe, coches. */
[dir="rtl"] .ic-dir { scale: -1 1; }
/* appareils dessinés : géométrie interne inchangée (barre d'état de l'iPhone : heure à gauche, comme sur les captures).
   Sur l'écran et non sur .phone, dont la place (inset-inline-end du héros) suit le sens de la page. */
[dir="rtl"] .phone-scr { direction: ltr; }
/* textes alignés à gauche en LTR (left et non start : valeur calculée inchangée pour les autres langues) */
[dir="rtl"] :is(.store-t, .show-info) { text-align: right; }
/* halos décoratifs en miroir */
[dir="rtl"] .hero-glow, [dir="rtl"] .rb-glow, [dir="rtl"] .follow-visual::before { transform: scaleX(-1); }
/* ombres et dégradés orientés */
[dir="rtl"] .tile { box-shadow: rgba(0,0,0,0.55) -3px 3px 20px 2px, inset 0 0 0 1px rgba(255,255,255,0.08); }
[dir="rtl"] .qt { background: linear-gradient(225deg, var(--c1), var(--c2)); }
[dir="rtl"] .plan-pro { background: radial-gradient(110% 80% at 100% 0%, rgba(123,77,255,0.22), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(32,201,151,0.12), transparent 60%), var(--bg); }
[dir="rtl"] .show.is-on .show-card::after { background: linear-gradient(270deg, 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%); }
/* lecteur : cartes voisines de part et d'autre (la précédente à droite) ; --tx est calculé par main.js dans le bon sens */
[dir="rtl"] .show.is-prev .show-card { transform: translateX(calc(270px * (1 - var(--p)))) scale(calc(1 + 0.12 * (1 - var(--p)))); }
[dir="rtl"] .show.is-next .show-card { transform: translateX(calc(-270px * (1 - var(--p)))) scale(calc(1 + 0.12 * (1 - var(--p)))); }
/* Suivi : iPhone penché dans l'autre sens, carte « Reprendre » de l'autre côté (inset-inline-start), barre qui se remplit
   depuis la droite comme dans une app en arabe */
[dir="rtl"] .tilt { transform: rotate(8deg); }
[dir="rtl"] .resume { transform: rotate(-8deg); }
[dir="rtl"] .resume-bar i { background: linear-gradient(270deg, var(--mint), var(--lavender)); }
/* captures de l'app en arabe (assets-src/i18n/ar, 15/10/2026) : interface retournée comme une vraie app en arabe, donc le
   héros (iPhone devant le coin bas gauche de la télé) et les débordements des captures suivent le miroir de la page.
   Pastilles posées sur les captures du lecteur et points de zoom : en miroir aussi (recadrages miroir dans build.py). */
[dir="rtl"] .hot { left: auto; right: var(--x); translate: 50% -50%; }
[dir="rtl"] .tile-zoom > img { transform-origin: calc(100% - var(--ox)) var(--oy); }
/* interrupteurs façon iOS en arabe : pastille à droite, elle glisse vers la gauche */
[dir="rtl"] .sw[aria-checked='true'] .sw-track::after { transform: translateX(-20px); }
@media (prefers-reduced-motion: no-preference) {
  /* vitrine : la nouvelle série arrive par la gauche, l'ancienne sort par la droite */
  [dir="rtl"] .loop-set .loop-title, [dir="rtl"] .loop-set .tile { transform: translateX(-30px); }
  [dir="rtl"] .loop-set.is-on .loop-title, [dir="rtl"] .loop-set.is-on .tile { transform: none; }
  [dir="rtl"] .loop-set.is-out .loop-title, [dir="rtl"] .loop-set.is-out .tile { transform: translateX(30px); }
  /* défilant de fin : la rangée (calée à droite) part vers la droite, la seconde en sens inverse */
  [dir="rtl"] .rb-track { animation-name: marquee-rtl; }
  @keyframes marquee-rtl { to { transform: translateX(calc(50% + 6px)); } }
}

/* ——— Arabe : police et typographie ———
   Inter d'abord (lettres latines : CTV+, Google Play, prix), puis CTV Sans Arabic (IBM Plex Sans Arabic) pour l'arabe, puis la police du
   système. Lettrage à 0 (un lettrage négatif casse les liaisons de l'écriture cursive), interlignage plus ample que le latin
   (hampes et points au-dessus, boucles en dessous), jamais d'italique. Valeurs sans unité : elles suivent les tailles de chaque
   point de rupture. Les liens vers les autres langues (lang="en"…) gardent leur typographie. */
html:lang(ar) body { font-family: Inter, 'CTV Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.7; }
html:lang(ar) body, html:lang(ar) body :lang(ar), html:lang(ar) body :lang(ar)::before, html:lang(ar) body :lang(ar)::after { letter-spacing: 0 !important; }
html:lang(ar) :is(em, i, cite, dfn, .caption-left):lang(ar) { font-style: normal; }
html:lang(ar) em:lang(ar) { font-weight: 600; }
html:lang(ar) :is(.t110, .hero-title) { line-height: 1.25; }
/* titre du héros : les jambages arabes (points du « ي ») descendent de 0,17 em sous la boîte de ligne. Sans marge, une fois le
   bloc titre arrivé au bas de la télé (il y reste épinglé, visible en mouvement réduit), ils dépassaient sous la télé comme
   deux petites pastilles. La boîte du titre les inclut (0,18 em) et la télé remonte d'autant : même place qu'avant. */
html:lang(ar) .hero-title { padding-bottom: 0.18em; }
html:lang(ar) .hero-media { margin-top: calc(60px - 0.18 * 110px); }
@media (max-width: 1068px) { html:lang(ar) .hero-media { margin-top: calc(36px - 0.18 * 80px); } }
@media (max-width: 734px) { html:lang(ar) .hero-media { margin-top: calc(30px - 0.18 * 40px); } }
html:lang(ar) :is(.t80, .t72) { line-height: 1.3; }
html:lang(ar) :is(.t48s, .prop, .legal h1) { line-height: 1.35; }
html:lang(ar) :is(.t40, .q-title, .card-title, .rb-title, .legal h2, .who-title) { line-height: 1.4; }
html:lang(ar) :is(.intro, .acc, .acc-sm, .chick-lead, .chick-block .more, .tablet-copy, .dev-sub, .hero-eyebrow, .pocket-card h3, .show-info h3, .faq-list summary) { line-height: 1.5; }
html:lang(ar) :is(.t21, .q-eyebrow, .q-text, .card-text, .card-eyebrow, .dev-n, .steps h3, .legal h3, .follow-list li, .faq-help, .resume-n) { line-height: 1.6; }
html:lang(ar) :is(.more, .show-info p, .feat li, .steps p, .ew-text, .faq-a p, .legal p, .legal li, .pocket-card figcaption, .plan-note, .caption, .dev-s, .perks li, .resume-k, .foot) { line-height: 1.7; }
/* petits textes : un pixel de plus que le latin. À taille égale, le corps des lettres arabes (ه، م : 0,41 em) est environ 25 %
   plus petit que la hauteur d'x d'Inter (0,546 em) ; barre, pied de page, pilules et légendes étaient difficiles à lire
   (relecture du 14/10/2026). Titres et texte courant gardent l'échelle commune. Liens de la barre : dès 900 px seulement
   (de 735 à 899 px la barre est pleine), le code « AR » du bouton des langues reste en latin. */
html:lang(ar) :is(.foot, .ln-cta, .resume-k, .caption-left) { font-size: 13px; }
@media (min-width: 900px) { html:lang(ar) :is(.ln-link, .ln-lang-btn) { font-size: 13px; } }
html:lang(ar) .store .store-k { font-size: 12px; }
html:lang(ar) .caption { font-size: 15px; }
@media (max-width: 734px) { html:lang(ar) .hero .caption { font-size: 13px; } }
/* paragraphe centré d'Installer : lignes équilibrées (sinon un mot seul en dernière ligne à 1440 px) */
html:lang(ar) .ew-text { text-wrap: balance; }
/* grille des appareils : les formules arabes des stores (« احصل عليه من Google Play ») remplissent la colonne, un écart les
   sépare (elles passent sur deux lignes équilibrées) */
@media (min-width: 735px) { html:lang(ar) .dev-grid { column-gap: 20px; } }