/*
 * accueil-maquette.css — la page d'accueil de la maquette du 2026-09-22.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * `socle-site.css` a changé les COULEURS et la TYPOGRAPHIE de tout le site.
 * Ce fichier-ci change les DISPOSITIONS de l'accueil : bandeau héros coupé en
 * deux, barre des quatre garanties, trois cartes de service, grille des
 * téléphones disponibles, bloc boutique sombre.
 *
 * Il ne dépend que des jetons de `socle.css`. Aucune couleur écrite en dur :
 * si la marque change, elle change à un seul endroit.
 *
 * Tout est préfixé `.mq-` — « maquette ». Aucune classe existante du site
 * n'est réutilisée, donc aucune page autre que l'accueil ne peut bouger à
 * cause de ce fichier.
 */

/* ═════════════════════ NAVIGATION ═════════════════════
 *
 * DÉPLACÉE le 2026-09-23 vers `css/entete-site.css`.
 *
 * Elle ne pouvait pas rester ici : ce fichier n'est chargé que par l'accueil,
 * donc l'en-tête de la maquette n'existait QUE sur l'accueil. Mesuré à
 * l'écran : la barre d'onglets démarrait à 187 px sur l'accueil et à 628 px
 * partout ailleurs, et les deux actions de droite n'existaient nulle part
 * sauf ici. Un en-tête commun ne peut pas vivre dans une feuille de page.
 *
 * Les classes `.mq-nav`, `.mq-nav-interieur`, `.mq-nav-liens`, `.mq-nav-menu`
 * et `.mq-panier-pastille` ont été SUPPRIMÉES : elles dessinaient une barre
 * de remplacement qu'aucune page n'a jamais portée (vérifié : zéro occurrence
 * dans les 795 fichiers HTML). Git est le musée, pas ce fichier.
 */

/* ═════════════════════ BANDEAU HÉROS ═════════════════════
 *
 * L'IMAGE EST LE FOND, pas une vignette posée à côté du texte.
 *
 * La bannière porte déjà les téléphones, la carte « Votre téléphone entre de
 * bonnes mains » et l'épingle « À Lille et à domicile » : ces trois éléments
 * ont donc été RETIRÉS du HTML le 2026-09-23. Les redessiner par-dessus
 * l'image les aurait affichés deux fois.
 *
 * ⚠️ Conséquence à connaître : ce qui est écrit DANS l'image n'est lu ni par
 * Google ni par un lecteur d'écran. Le `h1` porte toujours les mots qui
 * comptent (« Réparation iPhone à Lille ») ; le reste est décoratif, et c'est
 * pour ça qu'il peut vivre dans une image.
 *
 * `background-color` en plus de l'image : tant que le fichier n'est pas
 * déposé, ou s'il tarde, le texte reste lisible sur un fond franc au lieu de
 * clignoter sur du blanc.
 */
/*
 * LA BANNIÈRE EST UN BLOC, PAS UN BANDEAU PLEINE PAGE (demande de Rami,
 * 2026-09-23 : « une largeur fixe qui suit le reste des blocs »).
 *
 * La section ne porte plus que le fond de page ; c'est le conteneur INTÉRIEUR
 * qui porte l'image. Ses bords tombent donc exactement sur ceux des cartes de
 * service et du bloc boutique en dessous.
 *
 * ⚠️ La largeur n'est pas 1200 px mais 1160. `.mq-section` fait 1200 px
 * AVEC 20 px de marge intérieure de chaque côté : ses cartes commencent donc
 * à 1180 et finissent à 20. Une bannière de 1200 dépasserait des cartes de
 * 20 px de chaque côté — presque juste, donc pire qu'un décalage franc, parce
 * que personne ne saurait dire ce qui cloche.
 */
.mq-heros {
  background: var(--fond);
  padding: var(--e5) var(--e5) 0;
}
.mq-heros-interieur {
  max-width: 1160px; margin: 0 auto; padding: var(--e10) var(--e8);
  min-height: 430px;
  display: flex; align-items: center;
  position: relative;
  /* `overflow: hidden` pour que l'image et le voile suivent l'arrondi : sans
     lui, l'image déborderait par les quatre coins. */
  border-radius: var(--r-carte); overflow: hidden;
  background-color: #DCEBF7;      /* le bleu ciel de la bannière */
  /*
   * LA BANNIÈRE ANIMÉE — Rami, 2026-09-25 : « pour avoir un peu plus de
   * vie », l'animation tourne en boucle tant qu'on est sur la page. Version 2
   * le même jour : un rayon de soleil en diagonale (son GIF
   * « banniere_rayon_soleil_diagonal »).
   *
   * 🪤 Ses GIF pesaient 20 puis 24 Mo : sur un téléphone en 4G, la page
   * aurait attendu de longues secondes. Converti en WebP animée à la même
   * définition (2 061 × 763, 8 s, boucle infinie ; les images identiques
   * consécutives fusionnées, durée totale conservée) : 3,77 Mo, même rendu
   * (écart moyen 2/255 avec le GIF, mesuré à cinq instants).
   * Deux couches : la bannière FIXE (80 Ko) dessous s'affiche aussitôt, et
   * l'animée la recouvre une fois chargée. Leur première image est la même
   * au rayon près (écart moyen 2/255) : l'œil ne voit pas la relève.
   *
   * 🪤 UN NOM PAR VERSION. Le serveur fait garder les images UN AN par les
   * navigateurs, sans jamais les redemander. Une nouvelle animation déposée
   * sous l'ancien nom ne serait vue par AUCUN visiteur déjà venu : d'où
   * `banniere-accueil-soleil.webp` et non `banniere-accueil-animee.webp`
   * (la version 1, en ligne du 25/09 à 16 h 55).
   *
   * VERSION 3 — Rami, 2026-09-28 : ciel bleu (« banniere_saaphone_corrigee_animee »,
   * WebP 9 Mo, 2 048 × 758, 191 images, 8 s). Réencodée q68 : 3,6 Mo, écart moyen
   * 1,4/255 à cinq instants, durées et boucle infinie conservées. Sa propre image
   * FIXE dessous (`-ciel-fixe`, 58 Ko, = sa 1re image) : la fixe de la v1 n'a plus
   * le même ciel, la relève se verrait.
   */
  background-image: url("../images/banniere-accueil-ciel.webp"), url("../images/banniere-accueil-ciel-fixe.webp");
  background-size: cover;
  /* Ancré à DROITE : les téléphones y sont. Rogner par la gauche mange du
     ciel, rogner par la droite mangerait le sujet. */
  background-position: right center;
  background-repeat: no-repeat;
}
/* La bannière ANIME même quand le système demande moins de mouvement :
   décision de Rami du 26/09 (« tout anime quand même »), après avoir vu
   l'accueil immobile sur son PC Windows (« Effets d'animation » coupé). */
/*
 * Le texte occupe la MOITIÉ GAUCHE, là où la bannière n'a que du ciel.
 * `max-width` en pourcentage et non en pixels : la zone de ciel se réduit
 * proportionnellement quand la fenêtre rétrécit, le texte doit suivre.
 */
.mq-heros-propos { width: 100%; max-width: 48%; }
.mq-surtitre {
  display: block; margin-bottom: var(--e3);
  color: var(--navigation); font-size: var(--t-detail); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.mq-heros h1 {
  margin: 0 0 var(--e4);
  color: var(--titre); font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
/* La deuxième ligne du titre est ROUGE — c'est la promesse, pas le sujet. */
.mq-heros h1 .mq-promesse { display: block; color: var(--rouge); }
.mq-heros-texte { margin: 0 0 var(--e6); color: var(--texte); font-size: var(--t-base); line-height: 1.6; }
/* Trois boutons depuis le 29/09 (Rami) : « Réparer mon téléphone » seul sur sa
   ligne, puis « Nos produits » et « Notre boutique » côte à côte. En ligne
   souple, le troisième tombait SEUL sous le premier (mesuré à 1167 px). Au
   téléphone, les trois s'empilent (plus bas). */
.mq-heros-actions { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: var(--e3); }
.mq-heros-actions .mq-btn-plein { grid-column: 1 / -1; justify-self: start; }
.mq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--e6);
  border-radius: var(--r-moyen); font-size: var(--t-corps); font-weight: 700;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.mq-btn-plein { background: var(--rouge); color: var(--sur-accent); }
.mq-btn-plein:hover { filter: brightness(0.94); }
.mq-btn-creux { background: var(--carte); color: var(--titre); border-color: var(--trait); }
.mq-btn-creux:hover { border-color: var(--titre); }

/* ═════════════════════ LES QUATRE GARANTIES ═════════════════════ */

.mq-garanties { background: var(--fond); border-bottom: 1px solid var(--trait); }
/* CENTRÉES (Rami, 26/09) : en grille de 4 colonnes égales, chaque garantie
   se calait à GAUCHE de sa case — la première touchait le bord, la dernière
   laissait un grand vide à droite. `space-evenly` met le MÊME espace aux deux
   bords et entre les garanties. */
.mq-garanties-interieur {
  max-width: 1200px; margin: 0 auto; padding: var(--e6) var(--e5);
  display: flex; justify-content: space-evenly; gap: var(--e5);
}
.mq-garantie { display: flex; align-items: center; gap: var(--e3); }
/* Les pictogrammes sont des icônes du site (css/icones.css) : une police, donc
   une TAILLE DE CARACTÈRE et une couleur, plus un trait à régler.
   #3286ec : le bleu choisi par Rami le 2026-09-24 pour ces quatre-là. Il n'est
   PAS celui des liens (--navigation, plus sombre pour le contraste du texte) :
   ce sont des dessins, pas du texte à lire. */
.mq-garantie .ic { flex: none; font-size: 28px; color: #3286ec; }
.mq-garantie strong { display: block; color: var(--titre); font-size: var(--t-base); font-weight: 700; }
.mq-garantie span { display: block; color: var(--doux); font-size: var(--t-detail); }

/* ── Le camion qui part à domicile ────────────────────────────────────────
   Demandé par Rami le 2026-09-27, puis DESSINÉ par lui le même jour : le
   camion au trait des premières heures a laissé la place à son dessin,
   `images/camion-saaphone.svg` — un camion bleu portant le logo SaaPhone, qui
   se tasse, fait patiner ses pneus dans la fumée, file vers la droite et
   revient par la gauche.

   Le mouvement vit DANS le fichier (SMIL : animateTransform / opacity), pas
   ici. D'où la disparition des deux @keyframes qui animaient l'ancien tracé :
   les rejouer par-dessus ferait deux départs concurrents. Git garde l'ancien
   dessin, ce fichier n'a pas à le conserver en commentaire.

   🪤 Une animation SMIL joue dans une balise <img>, mais PAS en
   `background-image` : ce camion doit rester une image du document. */
.mq-camion {
  display: inline-block; width: 4.35em; height: 2.175em;
  margin-left: .3em; vertical-align: -.42em;
  /* AGRANDI de moitié le 27/09 (Rami : « un peu plus grand », on ne
     reconnaissait plus le camion à 39 px) SANS pousser la ligne. Le dessin ne
     remplit pas son cadre : il laisse 24 % de vide en HAUT (le viewBox garde de
     la place pour la fumée et le tassement). Cette marge négative rend ce vide
     à la ligne — sans elle le bandeau grandirait de 7 px. Mesuré : bandeau à
     81,4 px avant comme après. */
  margin-top: -.73em;
}
/* PAS d'arrêt sur « prefers-reduced-motion » : décision de Rami du 26/09 —
   sur son PC Windows, « Effets d'animation » coupé rendait tout l'accueil
   immobile. Le camion anime dans tous les cas, comme la bannière et les
   garanties. Un test le verrouille (accueil-dans-app). */
/* La piste et ses séries n'existent que pendant le défilement (≤ 1080 px) :
   au-dessus, elles s'effacent (`contents`) et les quatre garanties sont les
   éléments de la ligne ; la série copiée est cachée. */
.mq-garanties-piste, .mq-garanties-serie { display: contents; }
.mq-garanties-serie--copie, .mq-garantie--copie { display: none; }

/* ═════════════════════ TROIS CARTES DE SERVICE ═════════════════════ */

.mq-section { max-width: 1200px; margin: 0 auto; padding: var(--e10) var(--e5); }
.mq-section-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); margin-bottom: var(--e6);
}
.mq-section-tete h2 {
  margin: 0; color: var(--titre);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em;
}
.mq-lien-tout {
  flex: none; display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--cible); color: var(--rouge); text-decoration: none;
  font-size: var(--t-base); font-weight: 700;
}
.mq-lien-tout:hover { text-decoration: underline; }

/* TROIS cartes depuis le 30/09 (Rami retire « Réparation », déjà portée par la
   bannière et l'en-tête) : TROIS DE FRONT au-dessus de 1080 px — en deux par
   deux, la troisième restait seule sur sa ligne. À 1167 px (iPad), chacune
   garde ~250 px de texte (quatre de front n'en laissaient que ~150, sept lignes
   de trois mots : d'où le deux par deux du 28/09). Empilées en dessous
   (palier TABLETTE ET TÉLÉPHONE). */
/* RESSERRÉES (Rami, 29/09 : « réduire la taille, ils prennent un peu trop de
   place, réduire un peu le padding intérieur ») : marge 16/20 au lieu de 24,
   icône 48 au lieu de 60, titre 18 au lieu de 21. Le lien « Voir… » garde ses
   44 px de cible tactile : c'est la marge SOUS lui qui se réduit (le lien porte
   déjà 14 px de vide sous son texte). */
.mq-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.mq-service {
  display: flex; gap: var(--e3); padding: var(--e4) var(--e5) var(--e1);
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-carte); box-shadow: var(--ombre);
}
.mq-service-icone {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: var(--r-rond); color: var(--titre);
}
.mq-service-icone .ic { font-size: 22px; }
.mq-service h3 { margin: 0 0 var(--e1); color: var(--titre); font-size: var(--t-sous-titre); font-weight: 800; letter-spacing: -.02em; }
.mq-service p { margin: 0 0 var(--e1); color: var(--doux); font-size: var(--t-base); line-height: 1.5; }
/* `inline-flex` + `min-height` : la cible fait 44 px de haut sans que le texte
   quitte sa ligne. Mesuré à 26 px avant — Adhem lit ce site sur un iPad, et
   un lien de 26 px se rate au doigt. */
.mq-service a {
  /* `gap` : dans une boîte flex, l'espace avant la flèche disparaît ; sans
     lui, « Voir les téléphones→ » colle son icône au dernier mot. */
  display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--cible);
  color: var(--rouge); text-decoration: none; font-size: var(--t-base); font-weight: 700;
}
.mq-service a:hover { text-decoration: underline; }

/* ═════════════════════ LES BANDES ALTERNÉES ═════════════════════
 * Rami, 30/09 : « les blocs pairs un peu plus grisés, les impairs blancs comme
 * maintenant ». En retirant des blocs (comparateur, blog, « Nous trouver »),
 * des voisins avaient pris la même couleur et se fondaient l'un dans l'autre.
 * Ce choix remplace, SUR L'ACCUEIL, celui de css/socle-site.css (« une seule
 * page grise, des cartes posées dessus »).
 *
 * La parité se compte sur les blocs VISIBLES, pas dans le code :
 *   - « Nos téléphones disponibles » reste `hidden` tant que le catalogue n'a
 *     pas répondu. `:nth-child(… of …)` recompte dès que l'attribut change ;
 *     une parité écrite en dur se tromperait d'un cran une fois sur deux ;
 *   - la bannière et ses garanties forment le PREMIER bloc (clair) ;
 *   - l'appel final (`.cta-section`) garde son dégradé, hors du compte.
 * Deux tons seulement : `--fond` (#F8FAFC, le « blanc » d'aujourd'hui) et
 * `--surface` (#F1F5F9, le gris des vidéos TikTok). */
main > :nth-child(odd of :is(section, #notre-boutique):not([hidden], .mq-garanties, .cta-section)) { background-color: var(--fond); }
main > :nth-child(even of :is(section, #notre-boutique):not([hidden], .mq-garanties, .cta-section)) { background-color: var(--surface); }
/* `.mq-section` est bornée à 1200 px et centrée : au-delà (écran de 1440 px),
   sa bande grise s'arrêterait avant les bords. L'ombre pleine la prolonge
   jusqu'aux bords ; `clip-path` la coupe en haut et en bas. Une ombre ne crée
   pas de défilement horizontal. */
main > .mq-section:nth-child(even of :is(section, #notre-boutique):not([hidden], .mq-garanties, .cta-section)) { box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
/* Le bloc boutique n'avait pas de marge en haut : il empruntait celle du bloc
   précédent, de même couleur. Il a désormais sa propre bande. */
#notre-boutique { padding-top: var(--e10); }

/* ═════════════════════ LES TÉLÉPHONES DISPONIBLES ═════════════════════ */

.mq-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); }
.mq-produit {
  display: flex; flex-direction: column;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-carte); box-shadow: var(--ombre); overflow: hidden;
  color: inherit; text-decoration: none;
}
.mq-produit:hover { box-shadow: var(--ombre-portee); }
/* `max-height` EN PLUS du carré : à deux colonnes (tablette), une colonne de
   482 px donnait un visuel de 482 px et une carte de 609 px de haut — une
   seule carte remplissait l'écran. Le carré reste la forme, la borne empêche
   qu'il devienne un poster. */
.mq-produit-visuel {
  position: relative; aspect-ratio: 1 / 1; max-height: 260px;
  background: var(--surface);
}
.mq-produit-visuel img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--e4); }
.mq-produit-corps { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e1); }
/* Les gommettes sont les ÉTIQUETTES PHYSIQUES du comptoir : vert =
   reconditionné, bleu = occasion, jaune = neuf. Texte bleu nuit et non blanc —
   du blanc sur le jaune serait illisible. */
.mq-gommette {
  align-self: flex-start; margin-bottom: var(--e2);
  padding: 3px var(--e3); border-radius: var(--r-rond);
  font-size: var(--t-micro); font-weight: 700; color: var(--bleu-nuit);
}
.mq-gommette-recond { background: var(--gommette-recond); }
.mq-gommette-occasion { background: var(--gommette-occasion); }
.mq-gommette-neuf { background: var(--gommette-neuf); }
.mq-produit-nom { color: var(--titre); font-size: var(--t-base); font-weight: 700; }
.mq-produit-detail { color: var(--doux); font-size: var(--t-detail); }
.mq-produit-prix { margin-top: var(--e2); color: var(--rouge); font-size: var(--t-sous-titre); font-weight: 800; }
.mq-produit-prix s { margin-left: var(--e2); color: var(--doux); font-size: var(--t-detail); font-weight: 500; }
.mq-produit-batterie { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); color: var(--doux); font-size: var(--t-detail); }
.mq-produit-batterie .ic { flex: none; font-size: 15px; color: var(--vert); }
.mq-produits-vide { grid-column: 1 / -1; padding: var(--e6); color: var(--doux); text-align: center; }

/* ═════════════════════ LE BLOC BOUTIQUE ═════════════════════ */
/* Parti dans css/boutique-bloc.css (Rami, 29/09) : le même bloc vit aussi en
   bas de Reprise et de Contact, qui ne chargent pas cette feuille. Laissé ici,
   il s'y serait affiché NU (le piège de l'en-tête le 23/09, de la FAQ le 24/09). */

/* ═════════════════════ LES AVIS ═════════════════════ */
/* Le bouton « Laisser un avis Google » tout en bas du bloc des avis (Rami,
   26/09) : le bloc « Votre avis compte ! » qui le portait a été retiré. */
.reviews-laisser-avis { margin-top: var(--e6); text-align: center; }
/* Les avis DÉFILENT même quand le système demande moins de mouvement
   (Windows : « Effets d'animation » coupé ; iPhone : « Réduire les
   animations »). style.css les arrête dans ce cas ; décision de Rami du
   26/09 : « tout anime quand même ». Même animation que style.css ; la pause
   au survol et au focus reste la sienne. */
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: reviewsMarquee 90s linear infinite; }
}

/* ═════════════════════ TABLETTE ET TÉLÉPHONE ═════════════════════
 *
 * Le site est servi à l'iPad en boutique et au téléphone chez le client :
 * ces deux paliers ne sont pas décoratifs.
 */
@media (max-width: 1080px) {
  .mq-produits { grid-template-columns: repeat(2, 1fr); }
  .mq-services { grid-template-columns: 1fr; }
  /* Plus de ligne sous le carrousel (Rami, 30/09) : le bloc suivant a sa propre
     couleur (bandes alternées). Le carrousel est ainsi centré dans sa bande :
     16 px au-dessus, 16 px en dessous, mesuré à 390 et 768 px. */
  .mq-garanties { border-bottom: 0; }
  /*
   * LES GARANTIES DÉFILENT dès que la ligne n'a plus la place (Rami, 26/09 :
   * « ne jamais mettre deux lignes » — avant, 2 × 2 entre 681 et 1080 px).
   * Une seule ligne, de droite à gauche, sans fin. La piste porte DEUX séries
   * identiques et recule d'exactement la moitié : la copie prend la place de
   * l'original, l'œil ne voit pas le saut.
   * 🪤 Chaque série fait AU MOINS la largeur de l'écran (min-width 100vw) :
   * sur une tablette plus large que quatre garanties, la fin de la piste
   * aurait laissé un trou avant que la boucle ne revienne. L'espace libre se
   * répartit autour de chaque garantie (`space-around`) : l'écart reste le
   * même d'une série à l'autre.
   * 🪤 L'écart est une MARGE à droite de chaque garantie, pas un `gap` : avec
   * `gap`, une demi-piste vaudrait un demi-écart de moins qu'un tour.
   */
  .mq-garanties-interieur { display: block; overflow: hidden; padding: var(--e4) 0 var(--e4) var(--e4); }
  .mq-garanties-piste {
    display: flex; width: max-content;
    animation: mq-garanties-defile 28s linear infinite;
  }
  .mq-garanties-serie { display: flex; flex: none; min-width: 100vw; justify-content: space-around; }
  .mq-garanties-serie--copie { display: flex; }
  .mq-garanties-serie .mq-garantie { flex: none; margin-right: var(--e8); white-space: nowrap; }
  .mq-garanties-serie .mq-garantie--copie { display: flex; }
  /* On peut l'arrêter pour lire (survol, doigt posé) : WCAG 2.2.2. */
  .mq-garanties-interieur:hover .mq-garanties-piste, .mq-garanties-interieur:active .mq-garanties-piste { animation-play-state: paused; }
}
@media (max-width: 980px) {
  /*
   * Sous 980 px, la bannière n'offre plus assez de ciel à gauche : le texte
   * viendrait se poser sur les téléphones. On l'étale sur toute la largeur et
   * on glisse un VOILE dégradé entre l'image et lui — opaque à gauche, nul à
   * droite. Le texte reste lisible, l'image reste visible.
   */
  .mq-heros { padding: var(--e4) var(--e5) 0; }
  .mq-heros-interieur { padding: var(--e8) var(--e5); min-height: 380px; }
  .mq-heros-propos { max-width: 100%; position: relative; z-index: 1; }
  .mq-heros-interieur::before {
    content: ""; position: absolute; inset: 0;
    /* Mesure a l'ecran : a 390 px le paragraphe court jusqu'au bord droit et
       passait sur les telephones — lisible, mais pas net. Le voile reste donc
       presque opaque sur toute la largeur du texte et ne s'ouvre que sur le
       dernier quart. On perd un peu d'image, on garde une phrase lisible. */
    background: linear-gradient(100deg, rgba(248,250,252,.97) 0%, rgba(248,250,252,.93) 58%, rgba(248,250,252,.45) 100%);
  }
}
@media (max-width: 680px) {
  /*
   * LES VIDÉOS TIKTOK SUR UNE LIGNE (Rami, 26/09) : un carrousel AUTOMATIQUE,
   * qui défile en continu comme celui des téléphones (js/carrousel-tiktok.js),
   * et se fait aussi glisser au doigt ; la suivante dépasse sur le bord.
   * Remplace l'empilement en rangées de style.css (`flex-wrap`, 150 px).
   */
  .tiktok-section .tiktok-grid {
    flex-wrap: nowrap; justify-content: flex-start; gap: var(--e3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: var(--e2);
  }
  .tiktok-section .tiktok-grid::-webkit-scrollbar { display: none; }
  .tiktok-section .tiktok-card { width: min(62vw, 240px); scroll-snap-align: start; }
  /* Défilement continu (js) : l'aimantation se battrait contre une ligne qui
     avance d'une fraction de pixel à chaque image. */
  .tiktok-section .tiktok-grid--continu { scroll-snap-type: none; }
  .tiktok-section .tiktok-card--copie { display: block; }
  .mq-produits { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
  .mq-section { padding: var(--e8) var(--e4); }
  #notre-boutique { padding-top: var(--e8); }
  /* Au téléphone, le sujet de la bannière est en haut à droite : on ancre là
     plutôt qu'au centre, sinon le cadrage ne montre que du ciel. */
  /* Sous 680 px, `.mq-section` passe à 16 px de marge : la bannière et le
     bloc boutique suivent, pour que les quatre bords tombent au même endroit. */
  .mq-heros { padding: var(--e3) var(--e4) 0; }
  .mq-heros-interieur { background-position: 72% top; min-height: 340px; }
  .mq-btn { width: 100%; }
  .mq-heros-actions { grid-template-columns: 1fr; }
  /* `.mq-bouton-rdv` a suivi l'en-tête vers `css/entete-site.css` (2026-09-23).
     Resserré ici, il aurait été plus étroit sur l'accueil que sur les 785
     autres pages sous 680 px — le défaut même que Rami a signalé. */
}

/* ═════════════ Le rappel sous la grille des téléphones ═════════════
 *
 * Demandé par Rami : « Voir tout » vit sur la ligne de titre, donc EN HAUT —
 * on le rate quand on vient de faire défiler quatre cartes. Le même geste est
 * reproposé là où le regard finit.
 *
 * Bordé plutôt que plein : un deuxième aplat rouge sur la page entrerait en
 * concurrence avec « Prendre rendez-vous », qui est LE geste de la page.
 */
.mq-produits-pied { display: flex; justify-content: center; margin-top: var(--e6); }
.mq-lien-rouge {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--cible); padding: 0 var(--e6);
  background: var(--carte); color: var(--rouge);
  border: 2px solid var(--rouge); border-radius: var(--r-moyen);
  font-size: var(--t-base); font-weight: 700; text-decoration: none;
}
.mq-lien-rouge:hover { background: var(--rouge); color: var(--sur-accent); }

/* ═════════════════ LE CARROUSEL DES TÉLÉPHONES (Rami, 2026-09-25) ═════════════════
 *
 * « Une rangée par 4 et un carrousel […] qui slide […] tout seul », puis
 * « en continu et très doucement », sans boutons — sur une sélection de 8
 * téléphones (js/accueil-produits.js). Quatre visibles sur ordinateur, trois
 * sur tablette, deux au téléphone ; la piste défile à l'horizontale.
 *
 * 🪤 `grid-template-columns: none` : `.mq-produits` pose 4 puis 2 colonnes
 * EXPLICITES selon la largeur. Avec `grid-auto-flow: column`, les deux
 * premières cartes prendraient ces colonnes-là (1fr chacune) et les suivantes
 * les colonnes implicites : une rangée aux largeurs inégales. Ces règles sont
 * écrites APRÈS celles de `.mq-produits` : à spécificité égale, elles gagnent.
 * Un peu de marge dans la piste : sans elle, `overflow` rognerait l'ombre des
 * cartes en haut et en bas.
 */
.mq-carrousel-piste {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--e5)) / 4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: auto;
  padding: 4px 2px 8px;
}
.mq-carrousel-piste::-webkit-scrollbar { display: none; }
.mq-carrousel-piste > .mq-produit { scroll-snap-align: start; }
@media (max-width: 1080px) {
  .mq-carrousel-piste { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * var(--e5)) / 3); }
}
@media (max-width: 680px) {
  .mq-carrousel-piste { grid-template-columns: none; gap: var(--e3); grid-auto-columns: calc((100% - var(--e3)) / 2); }
}

/* Défilement continu (js) : l'aimantation carte par carte se battrait contre
   une piste qui avance d'une fraction de pixel à chaque image. Elle ne vaut
   que pour la piste immobile (mouvement réduit, défilement à la main). */
.mq-carrousel-piste--continu { scroll-snap-type: none; }

/* « Batterie non renseignée » : dite plus bas que la batterie mesurée, sans
   alarmer, et lisible (#6B7280 : contraste 4,8 sur blanc). */
.mq-produit-batterie--inconnue { color: #6B7280; font-style: italic; }
.mq-produit-batterie--inconnue .ic { color: #6B7280; }

/* Les copies du carrousel TikTok (js/carrousel-tiktok.js) n'existent qu'au
   téléphone : tourné en paysage (> 680 px), chaque vidéo s'affichait deux fois. */
.tiktok-card--copie { display: none; }

/* Défilement des garanties sous 1080 px. Une moitié de piste = une série. */
@keyframes mq-garanties-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Pas d'arrêt « moins de mouvement » : la ligne défile quand même (Rami,
   26/09, « tout anime quand même »). La pause au doigt et au survol reste. */

/*
 * AVATARS DES AVIS — les initiales, dessinées ici (26/09).
 *
 * Elles venaient de ui-avatars.com : vingt images demandées à un service tiers
 * à chaque visite, avec l'adresse IP du visiteur. Même rond de 32 px, mêmes
 * trois couleurs, mêmes initiales — l'œil ne voit pas la différence, le
 * visiteur n'est plus annoncé à personne. Et l'app cliente, qui n'embarque
 * aucun service tiers, peut reprendre ce bloc tel quel.
 */
.review-avatar {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600; font-style: normal;
  letter-spacing: 0.02em; line-height: 1;
}
.review-avatar--rouge { background: #DC2626; }
.review-avatar--nuit { background: #0A1628; }
.review-avatar--bordeaux { background: #991B1B; }