/* =============================================================================
   mobile.css · Allègement du rendu sur petits écrans et appareils tactiles.

   Chargée en dernier, après pages/*.css, pour pouvoir neutraliser n'importe
   quel décor. Tout ce que le site désactive sur mobile est ici, et nulle part
   ailleurs : un seul fichier à lire pour comprendre ce qui change.

   Pourquoi ce fichier existe
   --------------------------
   Le poids n'était pas en cause : l'accueil pèse 110 Ko et se charge en moins
   de 300 ms. Ce qui coûtait cher, c'était le travail d'affichage à chaque image
   du défilement :

     · trois halos de 42vw en « filter: blur(100px) » avec « mix-blend-mode:
       screen », repositionnés à chaque image par --ambient-progress. Un flou de
       ce rayon combiné à un mode de fusion oblige le navigateur à relire le
       fond et à recomposer toute la zone ;
     · l'en-tête collant en « backdrop-filter: blur(22px) », posé juste au-dessus
       de ces halos, donc reflouté à chaque image lui aussi ;
     · les animations décoratives permanentes (orbites, balayage, respiration
       des halos), qui empêchent le processeur graphique de se reposer.

   Un ordinateur absorbe tout cela sans broncher. Un téléphone, non : d'où un
   site fluide sur PC et poussif sur mobile.

   Le point de bascule : moins de 860 px de large, ou aucun survol possible
   (téléphones et tablettes). Un ordinateur portable à écran tactile garde le
   décor complet, puisqu'il déclare « hover: hover » pour sa souris.
   ========================================================================== */

@media (max-width: 860px), (hover: none) {
  /* --- 1. Le décor ambiant s'efface ---------------------------------------
     Les trois dégradés radiaux de .site-root suffisent à donner sa couleur au
     fond. Les halos flous n'ajoutent qu'une nuance, pour un coût majeur. */

  .ambient {
    display: none;
  }

  /* --- 2. Plus aucun flou d'arrière-plan -----------------------------------
     Le fond est déjà très sombre : un aplat un peu plus opaque rend la même
     lisibilité que le flou, sans le recalcul permanent. */

  .site-header__inner {
    backdrop-filter: none;
    background: rgba(6, 14, 32, 0.94);
  }

  .consent,
  .card,
  .note,
  .simulator__panel,
  .simulator__result,
  .journey__prompt,
  .journey__steps li,
  .hero__chip {
    backdrop-filter: none;
  }

  /* --- 3. Les grands flous décoratifs ---------------------------------------
     Un rayon de flou coûte proportionnellement à sa surface. Le halo du hero
     devient un dégradé, visuellement très proche et pratiquement gratuit. */

  .hero__glow {
    background: radial-gradient(circle, rgba(17, 97, 255, 0.26), transparent 68%);
    filter: none;
    animation: none;
  }

  .ambient__lion {
    filter: none;
  }

  /* --- 4. Les animations permanentes s'arrêtent ----------------------------
     Elles ne portent aucune information : elles habillent. Sur mobile, elles
     maintiennent le processeur graphique éveillé en continu, y compris quand
     la page est immobile. Le défilement et les apparitions restent animés. */

  .hero__orbit,
  .hero__frame::after,
  .hero__hud span,
  .lion-badge__ring,
  .security__ring--a,
  .security__ring--b {
    animation: none;
  }

  .hero__frame::after {
    opacity: 0;
  }

  /* --- 5. L'écran d'introduction, en version courte ------------------------
     Il est conservé : c'est la signature de la marque. Mais il est la seule
     chose qui s'interpose entre le visiteur et le contenu, et sur téléphone
     boot.js l'efface dès que la page est prête, avec un plancher de 1,2 s.
     Les deux animations sont réglées ici pour occuper ce temps sans le
     dépasser : le mouvement se termine vers 1 130 ms, juste avant que l'écran
     ne commence à s'effacer. Pour ralentir davantage l'ouverture, augmenter
     PLANCHER dans boot.js et ces deux durées dans le même rapport. */

  .intro__brand {
    animation-duration: 1s;
  }

  .intro__scan {
    animation-duration: 1s;
    animation-delay: 130ms;
  }

  /* Le bandeau de références continue de défiler : il porte du contenu, et
     « translate » reste une transformation composée, sans recalcul de mise en
     page. On demande simplement au navigateur de préparer sa couche une fois
     pour toutes, au lieu de repeindre les logos filtrés à chaque image. */

  .logo-wall__track {
    will-change: transform;
  }

  /* Note pour la suite · « content-visibility: auto » a été essayé sur les
     sections, puis retiré. Mesuré sur l'accueil à 375 px : la page annonçait
     8 666 px au lieu de 18 854 px tant que les sections n'avaient pas été
     rendues une première fois. Les sections font ici 1 400 px en moyenne, très
     loin de la taille de réserve, et la barre de défilement sautait pendant la
     lecture. Le remède était pire que le mal. À reconsidérer seulement avec une
     taille de réserve mesurée section par section. */
}

/* Le mouvement réduit reste prioritaire : il coupe déjà le décor ambiant, et
   il ne doit pas réactiver ce que la règle ci-dessus a désactivé. */
@media (prefers-reduced-motion: reduce) {
  .logo-wall__track {
    animation: none;
  }
}