/* ==========================================================================
   FOOT INSIDE — couche mobile (audit UX mobile du 27/09/2026)
   Rapport : audit_mobile/AUDIT-MOBILE-2026-09-27.md ; relevé avant/après :
   python audit_mobile/capturer.py.

   Chargée en DERNIER par gabarits.page(), après extra_css : home-v7.css
   surcharge l'en-tête de l'accueil avec des sélecteurs body.pg-accueil plus
   forts que styles.css. Chaque sélecteur commence donc par html[data-accent]
   (l'attribut porté par <html> sur toutes les pages), assez fort pour passer
   devant sans !important.

   Rien ici ne change l'ordinateur (au-dessus de 820 px), sauf quatre
   corrections valables partout : cœur favori visible, « À partir de »
   lisible, tableau des offres sur tablette, boutons mobiles masqués.
   L'en-tête garde 64 px sur ordinateur (demande de Jérémy).
   ========================================================================== */

/* ---------- Partout ---------- */
html[data-accent] .burger,
html[data-accent] .hbtn.hsearch{display:none}

/* Le cœur favori ne s'affichait jamais : la règle qui le révèle visait
   .card:hover, et les cartes sont des a.deal (M8). */
html[data-accent] .deal .fav{opacity:1;transform:none}

/* « À PARTIR DE » passait à 9,5 px. */
html[data-accent] .deal .dep{font-size:11px}

/* Tableau des offres sous 1 150 px : styles.css ne donnait que 3 colonnes
   aux 5 éléments visibles d'une ligne (marchand, stock, livraison, prix,
   bouton), qui se repliaient sur 2 lignes : bouton coupé en « Voir l'o »,
   page à 411 px de large sur téléphone (B1). */
@media (max-width:1150px){
  html[data-accent] .orow{grid-template-columns:minmax(0,1.9fr) auto minmax(0,1fr) minmax(0,1.3fr) auto;gap:12px}
  html[data-accent] .orow>*{min-width:0}
}

/* ---------- Tiroir du menu (ouvert par le burger, mobile seulement) ---------- */
html[data-accent] .mm{position:fixed;inset:0;z-index:400}
html[data-accent] .mm[hidden]{display:none}
html[data-accent] .mm-fond{position:absolute;inset:0;background:rgba(10,24,38,.55);opacity:0;transition:opacity .22s ease}
html[data-accent] .mm-pan{position:absolute;top:0;left:0;bottom:0;width:min(340px,88vw);background:#fff;
  display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .25s ease;
  box-shadow:12px 0 30px rgba(0,0,0,.18);font-family:var(--fc2)}
html[data-accent] body.mm-ouvert{overflow:hidden}
/* La cloche OneSignal (z-index maximal) passait par-dessus le tiroir ouvert. */
html[data-accent] body.mm-ouvert #onesignal-bell-container{display:none!important}
html[data-accent] body.mm-ouvert .mm-fond{opacity:1}
html[data-accent] body.mm-ouvert .mm-pan{transform:none}
html[data-accent] .mm-h{display:flex;align-items:center;justify-content:space-between;height:56px;
  padding:0 6px 0 16px;background:var(--nuit);flex:none}
html[data-accent] .mm-logo img{display:block;height:34px;width:auto}
html[data-accent] .mm-x{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#fff}
html[data-accent] .mm-rech{display:flex;margin:14px 16px 6px;border:1.5px solid var(--line);border-radius:999px;
  overflow:hidden;flex:none;background:#fff}
html[data-accent] .mm-rech:focus-within{border-color:var(--nuit)}
html[data-accent] .mm-rech input{flex:1;min-width:0;border:0;outline:none;padding:11px 16px;font-size:16px;
  font-family:inherit;color:var(--nuit);background:transparent}
html[data-accent] .mm-rech button{padding:0 16px;background:var(--fluo);color:var(--sur-fluo);display:grid;place-items:center}
html[data-accent] .mm-corps{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 0 8px}
html[data-accent] .mm-corps a,
html[data-accent] .mm-corps summary{color:var(--ink);text-decoration:none}
html[data-accent] .mm-corps .mm-lien,
html[data-accent] .mm-sec>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;
  font-size:16px;font-weight:600;border-bottom:1px solid var(--bg-2);list-style:none;cursor:pointer}
html[data-accent] .mm-corps .mm-lien svg,
html[data-accent] .mm-sec>summary svg{flex:none;opacity:.85}
html[data-accent] .mm-corps .mm-lien.on{box-shadow:inset 4px 0 0 var(--fluo)}
html[data-accent] .mm-corps .lv{background:var(--fluo);color:var(--nuit);font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
html[data-accent] .mm-sec>summary::-webkit-details-marker,
html[data-accent] .mm-sous>summary::-webkit-details-marker{display:none}
html[data-accent] .mm-sec>summary::after,
html[data-accent] .mm-sous>summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;opacity:.6;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
html[data-accent] .mm-sec[open]>summary::after,
html[data-accent] .mm-sous[open]>summary::after{transform:rotate(-135deg)}
html[data-accent] .mm-sec[open]>summary{background:var(--bg-3)}
html[data-accent] .mm-corps .mm-tout{display:flex;align-items:center;min-height:46px;padding:0 18px 0 30px;
  font-size:15px;font-weight:700;color:var(--bleu-cta)}
html[data-accent] .mm-sous>summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 30px;
  font-size:15px;font-weight:600;color:var(--ink-2);list-style:none;cursor:pointer;text-transform:none}
html[data-accent] .mm-sous>summary img{width:22px;height:22px;object-fit:contain;flex:none}
html[data-accent] .mm-sous ul{list-style:none;margin:0;padding:0 0 6px}
html[data-accent] .mm-sous li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 44px;font-size:15px}
html[data-accent] .mm-sous li a img{width:22px;height:22px;object-fit:contain;flex:none}
html[data-accent] .mm-sous li a .mega-nologo{width:22px;height:22px;flex:none}
html[data-accent] .mm-pied{border-top:1px solid var(--line);padding:6px 0 calc(10px + env(safe-area-inset-bottom));
  flex:none;background:var(--bg-3)}
html[data-accent] .mm-pied a{display:flex;align-items:center;min-height:44px;padding:0 18px;font-size:14.5px;color:var(--ink-2)}

/* ---------- Barre d'achat collante de la fiche produit (M7) ---------- */
html[data-accent] .fp-barre{display:none}

/* ---------- Téléphone et petite tablette (≤ 820 px) ---------- */
@media (max-width:820px){
  /* En-tête sur une ligne de 56 px : burger, logo, loupe, alertes, suivis
     (122 à 130 px avant, 14 à 19 % de l'écran en permanence, M3). */
  html[data-accent] .head .wrap-c{height:56px;padding:0 8px 0 4px;flex-wrap:nowrap;gap:4px}
  html[data-accent] .burger{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#fff;flex:none}
  html[data-accent] .burger:active{background:rgba(255,255,255,.12)}
  html[data-accent] .head .logo img{height:36px}
  html[data-accent] .head .rech{display:none}
  html[data-accent] .head-r{gap:0;margin-left:auto}
  html[data-accent] .head .hbtn{width:44px;height:44px;padding:0;justify-content:center;border-radius:10px}
  html[data-accent] .head .hbtn.hsearch{display:flex}
  html[data-accent] .head .hbtn .bul{top:5px;left:25px}
  /* Recherche ouverte par la loupe : une ligne pleine largeur sous l'en-tête.
     Plus de liste « Tout » ni de libellé sur le bouton : le champ faisait
     44 px de large à 375 px (B2). */
  html[data-accent] .head.rech-on .wrap-c{flex-wrap:wrap;height:auto;padding-top:6px;padding-bottom:10px;row-gap:6px}
  html[data-accent] .head.rech-on .rech{display:flex;order:5;flex:1 0 100%;max-width:none;margin:0 4px}
  html[data-accent] .head .rech select{display:none}
  html[data-accent] .head .rech input{font-size:16px;padding:11px 16px}
  html[data-accent] .head .rech .go{padding:0 16px}
  html[data-accent] .head .rech .go span{display:none}

  /* La barre des rayons laisse la place au menu burger, qui reprend tous ses
     liens et ceux des méga-menus (M1). Elle reste dans le HTML. */
  html[data-accent] .rayonsnav{display:none}

  /* Bandeau défilant : liens de 20 px de haut, trop courts au doigt. */
  html[data-accent] .util{padding:4px 0}
  html[data-accent] .util-item{min-height:28px}

  /* Champs à 16 px : en dessous, l'iPhone zoome au toucher (M6). */
  html[data-accent] input:not([type=checkbox]):not([type=radio]):not([type=range]),
  html[data-accent] select,
  html[data-accent] textarea,
  html[data-accent] #q404{font-size:16px}

  /* Barre d'achat collante : prix, marchand et bouton toujours à portée tant
     que le bloc « Meilleure offre » et le tableau ne sont pas à l'écran. */
  html[data-accent] .fp-barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.12);transform:translateY(115%);transition:transform .22s ease;font-family:var(--fc2)}
  html[data-accent] .fp-barre[hidden]{display:none}
  html[data-accent] .fp-barre.visible{transform:none}
  html[data-accent] .fp-barre .fb-t{flex:1;min-width:0;line-height:1.2}
  html[data-accent] .fp-barre .fb-p{display:block;font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;
    font-size:22px;color:var(--ink)}
  html[data-accent] .fp-barre .fb-m{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-accent] .fp-barre .fb-cta{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--fluo);
    color:var(--sur-fluo);font-weight:700;font-size:15px;padding:12px 18px;border-radius:999px;min-height:44px}
  html[data-accent] body.fp-barre-on{padding-bottom:74px}
  html[data-accent] body.fp-barre-on #onesignal-bell-container{bottom:84px!important}
}

/* ---------- Téléphone (≤ 640 px) ---------- */
@media (max-width:640px){
  /* Ligne d'offre empilée : le marchand sur toute la largeur, puis stock et
     livraison à gauche du prix, puis le bouton pleine largeur (B1). */
  html[data-accent] .orow{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"m m" "s p" "d p" "c c";gap:8px 12px;padding:16px 14px;align-items:center}
  html[data-accent] .orow.best-row{padding-left:12px}
  html[data-accent] .orow .o-march{grid-area:m}
  html[data-accent] .orow .o-dispo{grid-area:s;align-self:end}
  html[data-accent] .orow .o-port{grid-area:d;align-self:start}
  html[data-accent] .orow .o-prix{grid-area:p}
  html[data-accent] .orow .o-tailles{display:none}
  html[data-accent] .orow .btn-sm.o-cta{grid-area:c;justify-content:center;width:100%;padding:13px 16px;font-size:15px}
  html[data-accent] .orow .v-ligne{gap:8px}
  html[data-accent] .orow.best-row .o-prix .v{font-size:27px}
  /* Bulle du cashback : invisible mais toujours dans la mise en page, elle
     debordait a droite et elargissait la page a 440 px. Elle ne prend plus
     de place tant qu'elle n'est pas ouverte, et s'ouvre sur la largeur de la
     ligne d'offre, au-dessus d'elle. */
  html[data-accent] .orow{position:relative}
  html[data-accent] .orow .o-cashback{position:static}
  html[data-accent] .orow .o-cashback-bulle{display:none;left:12px;right:12px;width:auto;transform:none;bottom:calc(100% - 6px)}
  html[data-accent] .orow .o-cashback-bulle::after{display:none}
  html[data-accent] .orow .o-cashback:hover .o-cashback-bulle,
  html[data-accent] .orow .o-cashback:focus .o-cashback-bulle,
  html[data-accent] .orow .o-cashback:focus-visible .o-cashback-bulle{display:block;opacity:1}

  /* Galerie plus basse : le bloc « Meilleure offre » remonte (M7). */
  html[data-accent] .gmain{aspect-ratio:4/3}
  html[data-accent] .gthumbs{grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}

  /* Bloc de réponse des pages modèle : texte aligné à gauche (le justifié
     creusait des trous sur colonne étroite), replié sous 5 lignes par
     menu-mobile.js, texte complet dans le HTML (M5). */
  html[data-accent] .geo-rep p,
  html[data-accent] .seo-bloc p{text-align:left}
  html[data-accent] .geo-rep p{font-size:16px;line-height:1.55}
  html[data-accent] .geo-rep.replie{max-height:10.4em;overflow:hidden;position:relative}
  html[data-accent] .geo-rep.replie::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;
    background:linear-gradient(rgba(255,255,255,0),var(--accent-soft))}
  html[data-accent] .geo-suite{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
    font-weight:700;font-size:15px;color:var(--bleu-cta);font-family:var(--fc2)}

  /* Cartes compactes sur téléphone, où qu'elles soient (listings, bons plans,
     fiches joueur, blocs et rails de l'accueil). Le logo de marque porte sa taille en
     style en ligne (carte_deal, hub-filtres.js) : seul !important la réduit. */
  html[data-accent] .deal-b{padding:10px 10px 11px}
  html[data-accent] .deal .ligne-m{gap:6px}
  html[data-accent] .deal .marq img{height:22px!important;max-width:64px!important}
  html[data-accent] .deal .stock{font-size:12px;gap:5px}
  html[data-accent] .deal .nom{font-size:13px;margin-bottom:8px}
  html[data-accent] .deal .bas{flex-direction:column;align-items:stretch;gap:8px}
  html[data-accent] .deal .cta-mini{justify-content:center;padding:9px 10px;min-height:36px}
  html[data-accent] .deal .rem{font-size:14px;padding:4px 9px;top:8px;left:8px}
  html[data-accent] .deal .cat{left:8px;bottom:8px}

  /* Cibles tactiles trop courtes : fil d'Ariane (20 px), questions de la FAQ (26 px). */
  html[data-accent] .crumb a{display:inline-block;padding:10px 0}
  html[data-accent] .pg-legal .lp-faq summary{min-height:44px}
}

/* ---------- Listings : 2 cartes par ligne au lieu d'une (M4) ---------- */
/* styles.css passait .ligue-grid.grid4 à une seule colonne sous 520 px :
   une carte d'environ 450 px de haut par écran, 25 600 px de page pour 48
   produits. */
@media (max-width:520px){
  html[data-accent] .ligue-grid.grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-accent] .ligue-grid .promo-large{grid-column:1/-1}
}

/* ---------- Lot 3 (27/09/2026) : ce que le relevé en ligne a encore trouvé ---------- */
@media (max-width:820px){
  /* Pied de page : liens de 17 à 23 px de haut, sur toutes les pages. */
  html[data-accent] .pied ul{gap:0}
  html[data-accent] .pied-col li a{display:inline-flex;align-items:center;min-height:40px}
  html[data-accent] .pied-liens .wrap-c{gap:0 22px;padding:6px 16px}
  html[data-accent] .pied-liens a,
  html[data-accent] .pied-b a,
  html[data-accent] .pied-b #gerer-cookies{display:inline-flex;align-items:center;min-height:44px}
  /* Pastilles de remise du bandeau défilant : 11,5 px. */
  html[data-accent] .util-item .remise{font-size:12px}
  /* Cases des filtres : 16 px, portées à 20 px (la ligne entière reste cliquable). */
  html[data-accent] .hf-chk input{width:20px;height:20px}
  /* Accueil : bandeau des clubs (liens de 23 px) et points du carrousel
     (4 px de haut) : zone de toucher agrandie, dessin inchangé. */
  html[data-accent] body.pg-accueil .marques li{padding:7px 0}
  html[data-accent] body.pg-accueil .marques li a{min-height:44px}
  html[data-accent] body.pg-accueil .hero-dots{gap:4px}
  html[data-accent] body.pg-accueil .hero-dots button{height:24px;padding:10px 0;background-clip:content-box}
}
@media (max-width:640px){
  /* Tuiles club de l'accueil : sur une photo claire (OM), le texte blanc ne se
     lisait plus, le dégradé ne couvrait pas la zone de texte d'une tuile large. */
  html[data-accent] body.pg-accueil .club::after{background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.82) 100%)}
  html[data-accent] body.pg-accueil .club b,
  html[data-accent] body.pg-accueil .club .sur,
  html[data-accent] body.pg-accueil .club .ss{text-shadow:0 1px 10px rgba(0,0,0,.6)}
}

/* ---------- Animations des boutons, téléphone seulement (29/09/2026) ----------
   Demande de Jérémy après le PageSpeed mobile. Les trois halos pulsés (.btn-cta
   de la fiche, bouton MEILLEUR PRIX du tableau, .cta-offre de l'accueil)
   animaient box-shadow : l'ombre était repeinte à chaque image par le fil
   principal, tant que la page restait ouverte. Le reflet des boutons du
   tableau animait `left` : mise en page recalculée à chaque image, sur chaque
   ligne. Ici, mêmes boutons, mêmes durées, mais uniquement transform, que le
   navigateur anime seul sans toucher au fil principal. L'ordinateur garde les
   animations de styles.css et home-v7.css, inchangées. */
@media (max-width:640px){
  /* Halos : ombre fixe (celle du repos) et le bouton qui respire. */
  html[data-accent] .btn-cta{box-shadow:0 6px 18px -8px rgba(46,109,166,.5);
    animation:cta-respire-m 2.6s ease-in-out infinite}
  html[data-accent] .orow.best-row .btn-sm.o-cta{box-shadow:0 6px 16px -8px rgba(163,209,25,.55);
    animation:cta-respire-m 2.6s ease-in-out infinite}
  html[data-accent] body .cta-offre{box-shadow:0 10px 22px -8px rgba(163,209,25,.6);
    animation:cta-respire-m 2.8s ease-in-out infinite}
  /* Au toucher, l'animation s'arrête comme au survol sur ordinateur, et le
     léger enfoncement de :active (translateY) redevient visible. */
  html[data-accent] .btn-cta:hover,html[data-accent] .btn-cta:focus-visible,html[data-accent] .btn-cta:active,
  html[data-accent] .orow.best-row .btn-sm.o-cta:hover,html[data-accent] .orow.best-row .btn-sm.o-cta:active{animation:none}
  /* Reflet : même trajet (de -30 % à 130 % de la largeur du bouton), en
     translateX. Le reflet fait 22 % du bouton : -30 % du bouton = -136 % de sa
     propre largeur, 130 % = 591 %. */
  html[data-accent] .btn-sm.o-cta::after{left:0;transform:translateX(-136%) skewX(-18deg);animation-name:cta-reflet-m}
}
@keyframes cta-respire-m{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes cta-reflet-m{
  0%,18%{transform:translateX(-136%) skewX(-18deg)}
  55%,100%{transform:translateX(591%) skewX(-18deg)}
}
/* Les règles ci-dessus sont plus fortes que celles de styles.css : sans ce
   rappel, elles relanceraient les animations coupées par « réduire les
   animations » du téléphone. */
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  html[data-accent] .btn-cta,html[data-accent] .orow.best-row .btn-sm.o-cta,html[data-accent] body .cta-offre{animation:none}
  html[data-accent] .btn-sm.o-cta::after{animation:none;display:none}
}