/* ==========================================================================
   BimmerControl — site vitrine
   Palette reprise de l'application : fond #0B0B0D · surfaces #17171C /
   #1E1E24 · bleu BMW #1C69D4 · accent #2E9BFF
   ========================================================================== */

:root{
  --bg:#0B0B0D;
  --bg-2:#101015;
  --surface:#17171C;
  --surface-2:#1E1E24;
  --line:#2A2A32;
  --text:#F2F2F5;
  --text-dim:#9A9AA5;
  --text-soft:#C8C8D0;
  --blue:#1C69D4;
  --blue-light:#2E9BFF;
  --gold:#E0A030;
  --radius:18px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-behavior : filet de sécurité si le JS ne tourne pas. Avec le JS,
   les liens du menu sont pris en charge par le vol maison (main.js), dont
   la durée est proportionnelle à la distance — Chrome, lui, saute toujours
   en ~0,5 s quelle que soit la hauteur, d'où les à-coups sur bureau. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Ancres : le header est collant, on décale le point d'arrivée. Cette
   déclaration est LA source unique du décalage — le JS la relit au moment
   du vol, il n'y a aucune hauteur écrite en dur dans main.js. */
[id]{scroll-margin-top:78px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.026em;font-weight:800}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ============================== HEADER ============================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,11,13,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(11,11,13,.94)}
.header-inner{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px}
.brand-name{font-weight:800;letter-spacing:.13em;font-size:16.5px}
/* ── « CONTROL » : le dégradé animé de l'application ───────────────────
   Portage exact de Views/GradientTextView.cs (LoginPage / ConnectPage) :
   le mot est traversé en boucle par les couleurs de l'anneau du logo —
   cyan #29C5FF → bleu #1C69D4 → rouge #E2231A — pendant que « BIMMER »
   reste blanc fixe. Ce ne sont VOLONTAIREMENT pas les trois couleurs M de
   BMW : elles sont déposées, d'où leur retrait du logo.

   Le natif dessine le mot bande par bande faute de pinceau dégradé sur un
   Label MAUI. Le web n'en a pas besoin : background-clip:text peint le
   texte avec l'image de fond, et l'animation n'est que le défilement de
   cette image.

   Les deux nombres viennent du natif, aucun inventé :
     • un cycle de couleurs = 55 % de la largeur du mot, raccord en MIROIR,
       donc un motif complet = 110 % → « CONTROL » mesure 5,854 em (Inter
       800, interlettrage .13em), soit 6,44 em de motif ;
     • course = un motif entier en 3200 ms, linéaire, en boucle.
   Le motif est écrit DÉPLIÉ — cyan → bleu → rouge → bleu → cyan — sa fin
   est donc identique à son début : c'est ce qui remplace TileMode.MIRROR
   et supprime la couture où le rouge recollerait contre le cyan.

   Tout est en em : la même règle sert le logo du menu (16,5 px), celui du
   bloc final (13 px) et celui du pied de page, chacun à sa taille. */
.brand-name span{color:var(--blue-light)}

@supports (background-clip:text) or (-webkit-background-clip:text){
  .brand-name span{
    background-image:linear-gradient(90deg,
      #29C5FF 0%, #1C69D4 25%, #E2231A 50%, #1C69D4 75%, #29C5FF 100%);
    background-size:6.44em 100%;
    background-repeat:repeat-x;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:brand-sweep 3.2s linear infinite;
  }
}
@keyframes brand-sweep{
  from{background-position-x:0}
  to  {background-position-x:6.44em}
}

.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--text-soft);font-weight:500}
.nav a{position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blue-light);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);color:var(--text-soft);padding:8px 12px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.lang-btn:hover{border-color:#3A3A46;color:#fff}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:150px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 20px 44px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text-soft);font:inherit;font-size:14px;padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .16s,color .16s}
.lang-menu button:hover{background:#2A2A32;color:#fff}
/* Drapeaux du sélecteur de langue — mêmes images que l'application.
   Les proportions officielles diffèrent d'un pays à l'autre (2:3 pour la
   France, 5:3 pour l'Allemagne) : object-fit:cover les ramène toutes à la
   même vignette 21×14 sans les déformer. */
.lang-btn .flag,.lang-menu .flag{
  width:21px;height:14px;flex:0 0 auto;object-fit:cover;
  border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.lang-menu button{display:flex;align-items:center;gap:10px}
.lang-menu button[aria-selected="true"]{color:var(--blue-light);font-weight:600}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ========================== CADRE TÉLÉPHONE ==========================
   Un seul composant .device pour tous les téléphones du site.
   La coque est dessinée entièrement en CSS — châssis titane, liseré noir,
   îlot dynamique, boutons latéraux — et ne coûte aucune image.

   RÈGLE À NE PAS CASSER : l'écran garde EXACTEMENT le rapport 9/19,5 des
   captures (498×1080 et 540×1170). Avant, le rapport était porté par la
   coque ENTIÈRE, donc l'écran était un peu plus étroit que la capture et
   `object-fit:cover` en rognait 4,7 % sur les côtés — les valeurs de
   droite passaient à la coupe. Le rapport est maintenant sur l'image
   elle-même : cover n'a plus rien à rogner, la capture est intégrale.

   Trois variables pilotent toutes les tailles ; les points de rupture ne
   redéfinissent qu'elles. L'îlot et les boutons sont en pourcentage,
   donc justes à toutes les largeurs — l'ancienne pastille de 88 px fixes
   couvrait 39 % de la largeur d'un téléphone de la grille Modules.
==================================================================== */
.device{
  --bez:8px;                     /* rail + liseré autour de l'écran */
  --gap:4px;                     /* liseré noir entre le rail et l'écran */
  --rad:44px;                    /* rayon extérieur */
  position:relative;width:300px;
  padding:var(--bez);
  border-radius:var(--rad);
  background:
    /* Boutons : volume + / volume − / silencieux à gauche, veille à droite.
       Vus de face ils ne sont qu'un liseré sur la tranche — plus larges ou
       plus clairs, ils accrochent l'œil et font pastille collée. */
    linear-gradient(90deg,#6E6E7A,#3A3A44)  left  0 top 21.5%/.9% 4.4% no-repeat,
    linear-gradient(90deg,#6E6E7A,#3A3A44)  left  0 top 28.5%/.9% 6.6% no-repeat,
    linear-gradient(90deg,#6E6E7A,#3A3A44)  left  0 top 37%  /.9% 6.6% no-repeat,
    linear-gradient(270deg,#6E6E7A,#3A3A44) right 0 top 30%  /.9% 8.8% no-repeat,
    /* châssis brossé : la lumière accroche les arêtes, le milieu reste sombre */
    linear-gradient(148deg,#A8A8B4 0%,#5C5C68 9%,#2E2E37 22%,#1A1A20 46%,
                    #24242C 62%,#4E4E5A 84%,#8E8E9A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),     /* arête haute éclairée */
    inset 0 -1px 0 rgba(0,0,0,.55),          /* arête basse dans l'ombre */
    0 0 0 1px rgba(0,0,0,.55),               /* détourage net sur le fond */
    0 40px 90px rgba(0,0,0,.65);
  will-change:transform;
}
/* Îlot dynamique, avec l'objectif de la caméra. */
.device::after{
  content:"";position:absolute;z-index:2;
  top:calc(var(--bez) + 1.5%);left:50%;transform:translateX(-50%);
  width:28%;aspect-ratio:3.35;border-radius:99px;
  background:radial-gradient(circle at 77% 50%,#223145 0 5%,#0A0A0C 6%);
}
/* L'écran accepte indifféremment une capture fixe ou une capture animée :
   les vidéos sont encodées au même 720×1560, donc au même rapport, et
   passent exactement dans le même cadre. */
.device img,
.device video{
  display:block;width:100%;
  aspect-ratio:9/19.5;           /* le rapport exact des captures */
  object-fit:cover;              /* devenu neutre : plus rien à rogner */
  object-position:top;
  border-radius:calc(var(--rad) - var(--bez));
  background:var(--surface);
  /* Le liseré noir qui sépare l'écran du rail : c'est lui qui donne la
     bordure fine et régulière d'un vrai téléphone. */
  box-shadow:0 0 0 var(--gap) #08080A;
}

/* =============================== HERO =============================== */
.hero{position:relative;height:215vh;overflow-x:clip}
/* Bloc collé : le texte ne bouge plus tant qu'on traverse la section,
   seul le téléphone monte. Les deux repartent ensemble à la sortie. */
.pair-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;
}
.hero-glow{
  position:absolute;top:-360px;left:58%;transform:translateX(-50%);
  width:min(1200px,100vw);height:min(820px,90vh);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(28,105,212,.28),rgba(28,105,212,0) 62%);
}
.hero-grid{
  position:relative;width:100%;display:grid;grid-template-columns:1.05fr .95fr;
  gap:48px;align-items:center;padding-top:68px;
}
.hero-text{padding-bottom:0}
.hero h1{font-size:clamp(40px,5.6vw,66px);letter-spacing:-.035em}
.lead{margin-top:22px;max-width:30ch;font-size:clamp(17px,1.4vw,19px);color:var(--text-dim);line-height:1.62}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.store-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--blue);color:#fff;padding:12px 22px;border-radius:13px;
  transition:transform .26s var(--ease),background .26s var(--ease);
}
.store-btn:hover{transform:translateY(-3px);background:var(--blue-light)}
.store-btn.ghost{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.store-btn.ghost:hover{background:#25252D}
.store-btn span{display:flex;flex-direction:column;line-height:1.18;text-align:left}
.store-btn small{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.72;font-weight:600}
.store-btn b{font-size:16.5px;font-weight:700}
.cta-note{margin-top:16px;font-size:13.5px;color:var(--text-dim)}
/* Mention de non-affiliation BMW AG — obligatoire, sous les boutons stores */
.cta-legal{margin-top:14px;font-size:12px;line-height:1.5;color:var(--text-dim);opacity:.72;max-width:46ch}

.hero-phone-wrap{display:flex;justify-content:center;align-items:center}
.hero-phone{width:min(340px,34vw)}

/* ==================== SCÈNE FIGÉE — REDRESSEMENT ====================
   .scene donne la durée par sa hauteur, .pin reste collé à l'écran.
   Le téléphone et les cartes sont pilotés depuis main.js.
==================================================================== */
.scene{position:relative}
.scene-rotate{height:420vh}
.pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
  perspective:1500px;
}
/* le texte est à droite, le téléphone entre par la gauche */
.rot-copy{
  position:absolute;right:8vw;top:50%;transform:translateY(-50%);
  max-width:min(420px,34vw);z-index:1;will-change:transform,opacity;
}
.rot-copy h2{font-size:clamp(28px,3.4vw,44px)}
.rot-copy p{margin-top:16px;color:var(--text-dim)}
.chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);margin-bottom:16px}

/* La zone occupe tout le cadre figé : c'est elle qui sert de repère aux
   cartes. Sans ça, leurs pourcentages se calculeraient sur la largeur du
   téléphone et elles se poseraient dessus. */
.rot-space{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.rot-phone{width:320px;transform-origin:50% 50%}

.sats{position:absolute;inset:0;pointer-events:none}
.sat{
  position:absolute;margin:0;width:min(230px,24vw);
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  opacity:0;will-change:transform,opacity;
}
.sat-1{left:5%;top:13%}
.sat-2{right:5%;top:10%}
.sat-3{left:2%;top:55%}
.sat-4{right:3%;top:60%}
.sat-5{left:21%;top:77%}

/* ============================== BANDEAU ============================== */
.strip{border-block:1px solid var(--line);background:var(--bg-2)}
.strip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:34px;text-align:center}
.strip-inner div{display:flex;flex-direction:column;gap:4px}
.strip-inner b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff}
.strip-inner span{font-size:13px;color:var(--text-dim)}

/* ========================== BLOCS ALTERNÉS ========================== */
.alt{height:210vh;overflow-x:clip}
.alt-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.alt[data-side="left"] .alt-phone{order:-1}
.alt-text h2{font-size:clamp(26px,3.1vw,40px)}
.alt-text p{margin-top:16px;color:var(--text-dim);max-width:44ch}
.alt-phone{display:flex;justify-content:center}
.alt-phone .device{width:min(310px,32vw)}

[data-follow]{will-change:transform,opacity}
[data-rise]{will-change:transform}

/* =========================== GRANDE CAPTURE =========================== */
.bigshot{padding-block:100px 120px;text-align:center;overflow:hidden}
.bigshot-head h2{font-size:clamp(27px,3.2vw,42px);max-width:22ch;margin-inline:auto}
.bigshot-head p{margin-top:16px;color:var(--text-dim);max-width:58ch;margin-inline:auto}
.bigshot-frame{
  margin:56px auto 0;width:min(1120px,92vw);
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:0 50px 110px rgba(0,0,0,.6);
  will-change:transform;
}

/* ============================= CONFIANCE ============================= */
.trust{height:210vh;overflow-x:clip;background:var(--bg-2);border-block:1px solid var(--line)}
.trust-inner{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.trust-text h2{font-size:clamp(26px,3.1vw,40px)}
.trust-text p{margin-top:18px;color:var(--text-dim)}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--text-soft);font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:16px;height:9px;border-left:2px solid var(--blue-light);border-bottom:2px solid var(--blue-light);transform:rotate(-45deg);border-radius:1px}

/* ========================== SECTIONS TEXTE ========================== */
.adapter,.compat,.plans{padding-block:104px}
.section-title{font-size:clamp(28px,3.4vw,42px);text-align:center;max-width:24ch;margin-inline:auto;text-wrap:balance}
.section-lead{margin:18px auto 0;max-width:640px;text-align:center;color:var(--text-dim)}

.cards{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:#3A3A46}
.card h3{font-size:20px}
.card p{margin-top:12px;color:var(--text-dim);font-size:15.5px}
.tag{display:inline-block;margin-top:18px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-light);background:rgba(46,155,255,.09);border:1px solid rgba(46,155,255,.2);padding:5px 12px;border-radius:999px}
.card-soft{background:linear-gradient(160deg,rgba(28,105,212,.14),var(--surface));border-color:rgba(46,155,255,.24)}

.compat{background:var(--bg-2);border-block:1px solid var(--line)}
.compat-note{margin-top:26px;text-align:center;color:var(--text-dim);font-size:14px;max-width:720px;margin-inline:auto}

.plan-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin-inline:auto}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 30px 32px;transition:transform .3s var(--ease)}
.plan:hover{transform:translateY(-4px)}
.plan-pro{border-color:rgba(46,155,255,.4);background:linear-gradient(170deg,rgba(28,105,212,.15),var(--surface) 55%)}
.badge{position:absolute;top:-12px;left:30px;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#0B0B0D;background:var(--gold);padding:5px 13px;border-radius:999px}
.plan h3{font-size:23px}
.plan-sub{margin-top:6px;color:var(--text-dim);font-size:15px}
.price{margin-top:20px;display:flex;align-items:baseline;gap:8px}
.price-value{font-size:34px;font-weight:800;letter-spacing:-.03em}
.price-per{color:var(--text-dim);font-size:15px}
.plan .ticks{margin-top:24px}
.btn{display:block;margin-top:28px;text-align:center;padding:13px 20px;border-radius:13px;font-weight:700;font-size:15.5px;transition:transform .24s var(--ease),background .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-light)}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.plans-note{margin-top:28px;text-align:center;color:var(--text-dim);font-size:13.6px;max-width:640px;margin-inline:auto}

/* ====================== CTA FINAL — TÉLÉPHONE 3D ====================== */
.final{padding-block:120px;position:relative;overflow-x:clip;perspective:1400px}
.final::before{content:"";position:absolute;left:60%;top:50%;transform:translate(-50%,-50%);width:1000px;height:600px;background:radial-gradient(ellipse at center,rgba(28,105,212,.22),transparent 65%)}
.final-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.final-text h2{margin-top:18px;font-size:clamp(28px,3.6vw,46px);max-width:16ch}
.final-text p{margin-top:14px;color:var(--text-dim);font-size:18px}
.final-phone-wrap{display:flex;justify-content:center;transform-style:preserve-3d}
.final-phone{width:min(320px,32vw)}

/* ============================== FOOTER ============================== */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-top:52px}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;padding-bottom:38px}
.footer-legal{margin-top:16px;color:var(--text-dim);font-size:13.4px;max-width:52ch;line-height:1.7}
.footer-links{display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:var(--text-soft)}
.footer-links a:hover{color:var(--blue-light)}
.footer-bottom{border-top:1px solid var(--line);padding-block:22px;color:var(--text-dim);font-size:13px}

/* ============================ RÉVÉLATIONS ============================ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .78s var(--ease),transform .78s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}

/* Accessibilité : si l'utilisateur a demandé moins d'animations, tout se
   déroule verticalement, sans transformation ni section haute. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero,.alt,.trust{height:auto}
  .pair-pin{position:static;height:auto;padding-block:70px}
  .scene-rotate{height:auto}
  .pin{position:static;height:auto;padding-block:80px}
  .rot-copy{position:static;transform:none !important;max-width:none;margin-bottom:40px}
  .rot-phone{transform:none !important}
  .sats{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
  .sat{opacity:1 !important;position:static;width:100%;transform:none !important}
  [data-rise],[data-follow]{transform:none !important;opacity:1 !important}
  .brand-name span{animation:none}
  *{transition-duration:.01ms !important}
}

/* ============================= RESPONSIVE =============================
   La mise en page reste à deux colonnes jusqu'en bas : texte d'un côté,
   téléphone de l'autre, comme sur le modèle. On réduit, on n'empile pas.
==================================================================== */
@media (max-width:1100px){
  .rot-copy{right:5vw;max-width:34vw}
  .device{--bez:7px;--gap:3.5px;--rad:38px}
}
@media (max-width:820px){
  .hero-glow{left:50%;top:-200px}
  .header-inner{gap:14px}
  .hero{height:190vh}
  .alt,.trust{height:185vh}
  .hero-grid,.alt-grid,.trust-inner,.final-grid{gap:22px;grid-template-columns:1.1fr .9fr}
  .hero-phone{width:min(220px,34vw)}
  .alt-phone .device,.final-phone{width:min(210px,33vw)}
  .rot-phone{width:min(230px,40vw)}
  .lead{max-width:none}
  .alt-text p,.trust-text p{max-width:none}
  .adapter,.compat,.plans{padding-block:76px}
  .cards,.plan-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:30px}
  .strip-inner{grid-template-columns:repeat(2,1fr);gap:24px}
  .bigshot{padding-block:76px 90px}
  .device{--bez:6px;--gap:3px;--rad:32px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{position:fixed;inset:68px 0 auto;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 24px 20px;transform:translateY(-120%);transition:transform .34s var(--ease);z-index:59}
  .nav.open{transform:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a::after{display:none}
  .burger{display:flex}
  .wrap{padding-inline:18px}
  .hero h1{font-size:clamp(24px,6.6vw,34px)}
  .lead{font-size:15px;margin-top:14px}
  .cta-row{gap:8px;margin-top:20px}
  .store-btn{padding:9px 14px;gap:8px;border-radius:11px}
  .store-btn b{font-size:13px}
  .store-btn small{font-size:9px}
  .store-btn svg{width:18px;height:18px}
  .cta-note{font-size:11.5px;margin-top:12px}
  .cta-legal{font-size:10.5px;margin-top:10px;max-width:none}
  .alt-text h2,.trust-text h2,.rot-copy h2{font-size:clamp(21px,5.4vw,28px)}
  .alt-text p,.trust-text p,.rot-copy p{font-size:14.5px;margin-top:12px}
  .chip{font-size:10px;margin-bottom:10px}
  .ticks li{font-size:14.5px;padding-left:26px}
  /* Quatre cartes aux quatre coins : sur 412 px de large, elles ne
     doivent jamais recouvrir le téléphone. La cinquième est de trop. */
  .rot-phone{width:min(200px,36vw)}
  .sat{width:34vw}
  .sat-1{left:2%;top:10%}
  .sat-2{right:2%;top:10%}
  .sat-3{left:2%;top:64%}
  .sat-4{right:2%;top:64%}
  .sat-5{display:none}
  .final-text h2{font-size:clamp(22px,5.6vw,30px)}
  .final-text p{font-size:15px}
}

/* ============================= RETOUR EN HAUT ============================= */
.back-top{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-soft);
  cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .2s,color .2s;
}
.back-top:hover{background:#25252D;color:#fff}
.back-top.show{opacity:1;visibility:visible;transform:none}

/* Pendant un saut d'ancre du menu : les blocs qui traversent l'écran
   s'affichent sans fondu, le vol reste fluide. */
html.jumping [data-reveal]{transition:none}

/* CRUCIAL — le vol de main.js repositionne la page image par image. Si
   `scroll-behavior` restait à `smooth`, le navigateur lisserait CHACUN de
   ces repositionnements et poursuivrait sa propre animation après la fin de
   la nôtre : la page continuait de glisser une seconde après l'atterrissage.
   main.js passe `behavior:"instant"`, et cette règle couvre les navigateurs
   qui ne connaissent pas encore cette valeur. */
html.jumping{scroll-behavior:auto}

/* Le flou du header doit être recalculé à CHAQUE image, sur toute la
   largeur de l'écran, alors que son arrière-plan change entièrement.
   C'est le poste de peinture le plus lourd du vol, et sur bureau la
   surface à flouter est ~5× celle d'un téléphone. Pendant le vol on le
   remplace par le fond opaque : à cette vitesse le flou est invisible,
   et il revient dès l'atterrissage. */
html.jumping .site-header{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(11,11,13,.94);
  transition:none;
}

/* =========================== PAGES LÉGALES =========================== */
.doc{padding-block:64px 96px;max-width:800px}
.doc h1{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
.doc .doc-date{color:var(--text-dim);font-size:14px;margin-bottom:40px}
.doc h2{font-size:21px;margin-top:44px;margin-bottom:12px}
.doc p,.doc li{color:var(--text-soft);font-size:16px}
.doc p{margin-top:12px}
.doc ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.doc ul li{position:relative;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:2px;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--blue-light)}
.doc a{color:var(--blue-light);text-decoration:underline;text-underline-offset:3px}
.todo{background:rgba(224,160,48,.09);border:1px solid rgba(224,160,48,.32);border-radius:12px;padding:14px 18px;margin-top:16px;color:#F0D8A8;font-size:14.5px}
.back{display:inline-block;margin-bottom:28px;color:var(--text-dim);font-size:14px}
.back:hover{color:var(--blue-light)}

/* ====================== LES AUTRES MODULES (grille) ======================
   Ajouté avec les vraies captures : quatre téléphones alignés, puis une
   rangée de cartes texte pour les fonctions dont la capture arrive plus tard.
====================================================================== */
.modules{padding-block:104px}
.mod-grid{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.mod{display:flex;flex-direction:column;align-items:center;text-align:center}
/* Ombre plus courte dans la grille : les arêtes éclairées du châssis sont
   reprises telles quelles, sinon la coque perd son relief ici. */
.mod .device{width:100%;max-width:225px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.55),
    0 28px 60px rgba(0,0,0,.55)}
.mod h3{margin-top:28px;font-size:19px}
.mod p{margin-top:11px;color:var(--text-dim);font-size:15px;line-height:1.62}
.mod-cards{margin-top:64px}

/* Note secondaire sous un paragraphe de bloc alterné */
.alt-note{margin-top:14px;color:var(--text-dim);font-size:14.6px;max-width:46ch;
  padding-left:16px;border-left:2px solid var(--line)}
.alt-text .ticks{margin-top:24px}
.alt-text .ticks li{font-size:15.4px}
.trust-text .chip{margin-bottom:14px}

@media (max-width:1100px){
  .mod-grid{grid-template-columns:repeat(2,1fr);gap:40px 30px}
  .mod .device{max-width:210px}
}
@media (max-width:820px){
  .modules{padding-block:76px}
  .mod-grid{margin-top:44px;gap:44px 22px}
  .mod .device{max-width:180px}
  .mod h3{margin-top:22px;font-size:18px}
  .mod-cards{margin-top:48px}
}
@media (max-width:560px){
  .mod-grid{grid-template-columns:1fr}
  .mod .device{max-width:220px}
  .mod p{max-width:38ch}
}

/* ==================== VÉHICULES PRIS EN CHARGE (modèle · année) ==================== */
.veh-grid{
  margin-top:52px;display:grid;gap:0 44px;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(11,auto);
  grid-auto-flow:column;
}
.veh{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 2px;border-bottom:1px solid var(--line);
}
.veh b{font-weight:600;font-size:15.4px;color:var(--text-soft);letter-spacing:-.01em}
.veh span{font-size:13.6px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:1100px){
  .veh-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(16,auto);gap:0 34px}
}
@media (max-width:560px){
  .veh-grid{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:auto;margin-top:38px}
  .veh{padding:11px 0}
}