/* ============================================================================
   ALLÈGEMENT DU RENDU SUR TÉLÉPHONE

   La page d'accueil porte 81 éléments en `backdrop-filter` et 34 animations
   en boucle. Un ordinateur les absorbe. Un téléphone non.

   `backdrop-filter` est le plus lourd des effets : il oblige le navigateur
   à RECAPTURER ce qui se trouve derrière l'élément, à le flouter, puis à
   composer — et à recommencer à chaque image du défilement. Quatre-vingt-un
   éléments, c'est quatre-vingt-une captures par image. Safari abandonne :
   le défilement se fige, les sections restent blanches, et plus rien ne
   répond au doigt le temps qu'il reprenne la main.

   On retire donc l'effet au doigt, et on rend opaques les quelques fonds
   qui comptaient sur le flou pour être lisibles. Le rendu est légèrement
   plus plat sur téléphone ; il est surtout utilisable.

   `(pointer: coarse)` vise le pointeur PRINCIPAL : un portable à écran
   tactile garde le rendu complet, comme pour Lenis et les animations
   d'entrée.

   Chargé APRÈS les autres feuilles — c'est ce qui lui permet de gagner
   sans avoir à surenchérir en spécificité partout.
   ========================================================================= */

@media (pointer: coarse) {

  /* ---- 1. Plus aucune capture d'arrière-plan -------------------------- */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ces trois-là tenaient leur lisibilité du flou : à 20 % d'opacité sans
     lui, le texte passait sur n'importe quelle image. On les opacifie. */
  .scx-explainer-video-info,
  .scx-reviews-pause-toggle {
    background-color: rgba(255, 255, 255, 0.92) !important;
  }

  .scx-pill {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Un halo décoratif en `blur(100px)` sur une surface transparente : le
     plus cher de tous, et il ne porte aucun contenu. */
  .scx-reviews-featured-overlay {
    display: none !important;
  }

  /* ---- 2. Les animations qui tournent pour rien ----------------------- */

  /* (Le logo garde son reflet : il ne coûtait rien face au fond animé du
     héros, et c'est un signe de vie que la marque mérite.) */

  /* Le miroitement des blocs de chargement : il tourne même sur les
     squelettes déjà remplacés par leur contenu. */
  .am-shimmer,
  .ft-skeleton-block {
    animation: none !important;
  }

  /* ---- 3. (retiré) ----------------------------------------------------

     On masquait ici la moitié des photos du héros pour ne pas les
     télécharger. Mauvaise idée : le bandeau CLONE ses cartes pour boucler
     sans couture, et les clones deviennent les enfants 13 et suivants —
     donc masqués eux aussi par le même `nth-child`. Le carrousel n'avait
     plus rien à faire défiler.

     Les images portent déjà `loading="lazy"` : celles qui restent hors de
     l'écran ne sont pas téléchargées. C'est suffisant, et cela ne casse
     rien. */

  /* ---- 4. LE FOND ANIMÉ DU HÉROS --------------------------------------

     C'est le poste le plus lourd de tout le site, et de loin.

     `.hb-root` empile six taches colorées et trois faisceaux de lumière.
     Chaque faisceau porte un `filter: blur()` de 14, 30 ou 38 px de rayon,
     ANIMÉ EN BOUCLE, sur des surfaces de 1,6 à 2,5 mégapixels. Une tache
     anime même un `hue-rotate`. Mesuré sur la page d'accueil : 167 couches
     de composition, 34,5 mégapixels à composer — dont 6 pour ce seul fond.

     Le GPU d'un téléphone n'y arrive pas. Safari renonce alors à peindre
     certaines tuiles : ce sont les grandes zones blanches qui apparaissent
     au défilement, et l'impression que la page « ne répond pas ».

     La racine porte déjà son propre dégradé crème en style en ligne. On
     masque donc ses enfants et on garde ce dégradé : le héros perd ses
     taches mouvantes sur téléphone, il garde sa couleur. Le grain reste,
     c'est une image de fond, elle ne coûte rien. */
  .hb-root > *:not(.hb-noise) {
    display: none !important;
  }

  /* `will-change: transform` réserve une couche en permanence, même à
     l'arrêt. Deux bandeaux de 1,4 mégapixel chacun, gardés en mémoire
     graphique du début à la fin de la visite. */
  .scx-ticker-track,
  .scx-reviews-ticker-track {
    will-change: auto !important;
  }

  /* ---- 5. Les ombres démesurées --------------------------------------- */

  /* Une ombre de 60 px de diffusion sur une carte large coûte presque aussi
     cher qu'un flou. Celles de l'en-tête et des cartes sont resserrées :
     l'élévation reste lisible, le coût s'effondre. */
  .nvg-card {
    box-shadow: 0 8px 24px -12px rgba(255, 99, 99, 0.3) !important;
  }
}

/* Qui a demandé moins d'animation en reçoit moins, quel que soit l'appareil. */
@media (prefers-reduced-motion: reduce) {
  .mn-logo__l,
  .am-shimmer,
  .ft-skeleton-block {
    animation: none !important;
  }
}