/* ==========================================================================
   BimmerControl — version téléphone (≤ 760 px)
   La version bureau est intacte : rien dans ce fichier ne s'applique
   au-delà de 760 px. Sur mobile, on reprend la grammaire du bureau —
   mêmes titres, mêmes puces, mêmes cartes, mêmes coques — mais on
   empile proprement : plus de scènes figées, plus de bande qui défile,
   une seule taille de téléphone, des sections qui respirent sans creuser.
   ========================================================================== */

/* Le <span class="screen"> ne sert que de conteneur structurel : il
   disparaît de la mise en page, sur bureau comme sur téléphone. */
.screen{display:contents}

/* Le triptyque du bureau est remplacé sur téléphone par une coque. */
.bigshot-phone{display:none}

/* La bande de captures qui défilait n'existe plus. */
.reel-band{display:none}

@media (max-width:760px){

  /* Ancres : le header est collant, on décale le point d'arrivée. */
  section[id]{scroll-margin-top:78px}

  /* ==================== EMPILEMENT GÉNÉRAL ====================
     On garde l'ordre du bureau : texte, puis capture. Chaque bloc
     se lit en défilant, sans hauteur de scène ni bloc collé. */
  .hero,.alt,.trust{height:auto;overflow:visible}
  .pair-pin{position:static;height:auto;display:block;padding-block:40px 48px}
  .hero .pair-pin{padding-top:44px;padding-bottom:6px}
  .hero-grid,.alt-grid,.trust-inner,.final-grid{grid-template-columns:1fr;gap:26px}
  .hero-grid{padding-top:4px}
  .alt[data-side="left"] .alt-phone{order:0}
  .hero-phone-wrap,.alt-phone,.final-phone-wrap{justify-content:center}

  /* ==================== ACCROCHE : ENTRÉE EN CASCADE ====================
     Titre, sous-titre, boutons et note se posent l'un après l'autre
     au chargement. Le reste de la page reste piloté par le défilement. */
  .hero-text > *{opacity:0;transform:translate3d(0,22px,0);
    animation:hero-in .8s var(--ease) forwards}
  .hero-text > *:nth-child(1){animation-delay:.05s}
  .hero-text > *:nth-child(2){animation-delay:.18s}
  .hero-text > *:nth-child(3){animation-delay:.32s}
  .hero-text > *:nth-child(4){animation-delay:.46s}
  @keyframes hero-in{to{opacity:1;transform:none}}

  /* ==================== LES COQUES ====================
     Une seule taille partout, juste sous le tiers de l'écran :
     la capture reste grande et lisible, la page respire. */
  .hero-phone,.alt-phone .device,.final-phone,.rot-phone,.bigshot-phone{width:min(252px,60vw)}
  .rot-phone{margin-inline:auto}
  .mod .device{width:100%;max-width:min(224px,54vw);margin-inline:auto}
  /* Seules les trois variables changent : l'îlot, les boutons et le
     liseré de l'écran en découlent (voir style.css, « CADRE TÉLÉPHONE »). */
  .device{--bez:5px;--gap:2.5px;--rad:30px}

  /* ==================== SCÈNE « TABLEAU DE BORD » ====================
     Plus de cartes satellites autour du téléphone : le téléphone seul,
     mis en scène comme dans les autres blocs. Les transformations
     d'entrée (redressement, pose) sont pilotées par main.js. */
  .scene-rotate{height:auto}
  .pin{position:static;height:auto;display:block;padding:44px 18px 52px;perspective:none}
  .rot-copy{position:static;max-width:none;margin-bottom:24px}
  .rot-space{position:static;display:block;transform-style:flat}
  .sats{display:none}

  /* ==================== GRANDE CAPTURE ====================
     Le triptyque du bureau (1400 px de large) est illisible à l'écran
     d'un téléphone : on le remplace par la liste des tableaux de bord
     dans une coque, la même que partout ailleurs. */
  .bigshot{padding-block:44px 52px;text-align:left}
  .bigshot-head h2{font-size:clamp(23px,5.8vw,30px);margin-inline:0;max-width:none}
  .bigshot-head p{margin-inline:0;max-width:none;font-size:14.6px}
  .bigshot-frame{margin:24px 0 0;width:100%;background:none;border:0;
                 box-shadow:none;overflow:visible;transform:none !important}
  .bigshot-wide{display:none}
  .bigshot-phone{display:block;margin-inline:auto}

  /* ==================== BLOCS ALTERNÉS ==================== */
  .alt-text .ticks{margin-top:18px;gap:9px}
  .alt-text .ticks li{font-size:14.4px}
  .alt-note{font-size:13.6px;padding-left:12px;margin-top:12px}

  /* ==================== SECTIONS TEXTE ==================== */
  .adapter,.compat,.plans,.modules{padding-block:50px}
  .section-title{font-size:clamp(23px,5.8vw,30px);text-align:left;margin-inline:0;max-width:none}
  .section-lead{font-size:14.6px;margin-top:12px;text-align:left;margin-inline:0;max-width:none}
  .compat-note,.plans-note{text-align:left;margin-inline:0;max-width:none}
  .compat-note{margin-top:22px}

  .cards{margin-top:28px;gap:13px}
  .card{padding:22px 18px}

  /* ==================== LES AUTRES MODULES ==================== */
  .mod-grid{grid-template-columns:1fr;margin-top:28px;gap:34px}
  .mod{text-align:left;align-items:stretch}
  .mod h3{margin-top:18px;font-size:18px}
  .mod p{font-size:14.4px;max-width:none}
  .mod-cards{margin-top:34px}

  /* ==================== COMPATIBILITÉ ====================
     Une rangée par modèle, comme sur le bureau : nom à gauche,
     année à droite, aucune coupure de libellé. */
  .veh-grid{margin-top:26px;grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:auto}
  .veh{padding:9px 0}
  .veh b{font-size:14px}
  .veh span{font-size:12.8px}
  .compat-note{margin-top:22px}

  /* ==================== FORMULES ==================== */
  .plan-grid{margin-top:30px;gap:20px}
  .plan{padding:26px 20px}

  /* ==================== CTA FINAL ==================== */
  .final{padding-block:52px}
  .final-text h2{font-size:clamp(22px,5.6vw,30px)}
  .final-text p{font-size:15px}

  /* ==================== RETOUR EN HAUT ==================== */
  .back-top{right:16px;bottom:16px;width:42px;height:42px}
}

/* Accessibilité : moins d'animations → tout s'affiche directement
   (main.js ne pose alors aucune transformation). */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-text > *{opacity:1;transform:none;animation:none}
}