/**
 * S782 — 1er écran mobile : LOT 1 (header compact site-wide + bandeau B + fix hover + chips sous-catégories)
 * Périmètre tranché Nicolas 09/07/2026. Réf : 14-IMPL-CSS-mobile-astra-child.css (v3) + 17-REVUE-S782.
 * Piloté par le mu-plugin ap-mobile-first-screen.php : chaque volet est scopé sur une classe body
 * (ap-mfs-header / ap-mfs-hover / ap-mfs-chips) activable indépendamment → déploiement prod par étapes,
 * kill-switch par volet dans le mu-plugin. Ce fichier n'a AUCUN effet tant qu'il n'est pas enqueué.
 * HORS LOT 1 (arbitrage Nicolas en attente) : fiche produit (galerie/miniatures/sticky A-B/WAPO), home, panier.
 */

/* Breakpoint mobile Astra (défaut 921px) */
@media (max-width: 921px) {

  /* ================= VOLET HEADER (body.ap-mfs-header) ================= */

  /* 1a. Barre tél / Service client : retirée (portée par #lya-fab) */
  .ap-mfs-header .ap-contact-banner { display: none; }

  /* 1b. Bandeau satisfaction : variante B — 1 ligne statique fusionnée.
     Le carrousel 2 messages est masqué sur mobile (wrap entier : il garde 36px à vide),
     remplacé par .ap-carousel-static (mu-plugin). Desktop non touché. */
  .ap-mfs-header #ast-mobile-header .ap-carousel-wrap { display: none; }
  .ap-mfs-header .ap-carousel-static {
    display: block;
    /* fluide : la ligne complète tient jusqu'à ~280px de large (ellipsis en garde-fou) */
    font-size: min(10px, calc((100vw - 40px) / 34));
    line-height: 1.4;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 4px;
  }
  .ap-mfs-header #ast-mobile-header .ast-above-header-wrap .ast-above-header-bar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .ap-mfs-header #ast-mobile-header .ast-above-header-wrap [data-section*="html"] {
    font-size: 10px;
    line-height: 1.2;
  }

  /* 1c. Logo calé à gauche, agrandi à 40px : la rangée fait déjà 42px (burger + panier),
     un logo 40px ne coûte aucune hauteur. Burger dégonflé 8.9→6px de padding. */
  .ap-mfs-header #ast-mobile-header .custom-logo,
  .ap-mfs-header #ast-mobile-header .ast-logo-title-inline img {
    max-height: 40px;
    width: auto;
  }
  .ap-mfs-header #ast-mobile-header .menu-toggle.main-header-menu-toggle { padding: 6px; }

  /* 1d. Rangée recherche : masquée, révélée par la loupe (JS mu-plugin) */
  .ap-mfs-header #ast-mobile-header .ast-main-header-wrap { display: none; }
  body.ap-mfs-header.ap-search-open #ast-mobile-header .ast-main-header-wrap { display: block; }
  .ap-mfs-header .ap-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: none; border: 0; cursor: pointer;
    vertical-align: middle;
  }
  .ap-mfs-header .ap-search-toggle svg { width: 21px; height: 21px; fill: none; stroke: #17191c; stroke-width: 2; }

  /* 1e. Fil d'ariane : 1 ligne. Sur la fiche, le nom du produit (.breadcrumb_last)
     déborde toujours → retiré (il est dans le H1 juste dessous) ; le chemin restant
     tient en entier. Ellipsis conservée en garde-fou sur les chemins profonds. */
  .ap-mfs-header .ast-header-breadcrumb { padding-top: 2px; padding-bottom: 2px; }
  .ap-mfs-header #ast-breadcrumbs-yoast {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.4;
  }
  .single-product.ap-mfs-header #ast-breadcrumbs-yoast .breadcrumb_last { display: none; }

  /* 1f. Écart header ↔ contenu : Astra pose margin-top ~51px sur #primary (pré-existant,
     criant depuis le header compact — retour Nicolas 09/07) → resserré à 14px. */
  .ap-mfs-header #primary.content-area { margin-top: 14px; }

  /* ================= VOLET FIX HOVER (body.ap-mfs-hover) =================
     L'image de survol s'empile sous l'image principale sur mobile (pas de survol tactile)
     → carte ~490px au lieu de ~300px. Vérifié présent en PROD le 09/07. */
  .ap-mfs-hover ul.products li.product img.show-on-hover { display: none !important; }
  /* Vignettes qui « sautent » au scroll (retour Nicolas 09/07) : pré-existant (contrôle fait
     hover réactivé : 492→306px, encore pire). Cause = lazyload (image 138→158) + font-swap
     (titre 100→66). Ici on fige la moitié image : crop woocommerce_thumbnail = carré.
     La moitié fonts = chantier perf séparé (font-display). */
  .ap-mfs-hover ul.products li.product .astra-shop-thumbnail-wrap img:not(.show-on-hover) {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    object-fit: contain;
  }

  /* ================= VOLET CHIPS (body.ap-mfs-chips) =================
     Tuiles sous-catégories masquées → chips 1 ligne scrollable (nav rendue par le mu-plugin).
     Scroll tactile (swipe) ; scrollbar masquée volontairement, pattern France Bureau. */
  .ap-mfs-chips ul.products li.product-category { display: none !important; }
  .ap-mfs-chips .ap-subcat-chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; padding: 4px 0 10px; margin: 0 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ap-mfs-chips .ap-subcat-chips::-webkit-scrollbar { display: none; }
  .ap-mfs-chips .ap-subcat-chips a {
    flex: 0 0 auto;
    display: block; padding: 7px 13px;
    border: 1px solid #bbb; border-radius: 17px;
    font-size: 12px; font-weight: 600; color: #17191c;
    white-space: nowrap; text-decoration: none;
  }
}

/* ---------- Très petits écrans (<360px : iPhone SE 320, Galaxy Fold 280) ----------
   La rangée logo a un min-content ~296px + 40px de padding : elle ne passait pas
   sous ~338px de viewport (scroll horizontal). On dégonfle padding/gaps/logo. */
@media (max-width: 360px) {
  .ap-mfs-header #ast-mobile-header .ast-above-header-bar {
    padding-left: 10px;
    padding-right: 10px;
  }
  .ap-mfs-header #ast-mobile-header .custom-logo,
  .ap-mfs-header #ast-mobile-header .ast-logo-title-inline img {
    max-width: 34vw;
    height: auto;
  }
  .ap-mfs-header #ast-mobile-header .ast-builder-grid-row { column-gap: 10px; }
  .ap-mfs-header #ast-mobile-header .ast-builder-layout-element { padding-left: 4px; padding-right: 4px; }
  .ap-mfs-header .ap-search-toggle { width: 28px; }
}

/* Desktop : la ligne statique, la loupe et les chips n'existent que sur mobile */
@media (min-width: 922px) {
  .ap-carousel-static { display: none; }
  .ap-search-toggle { display: none; }
  .ap-subcat-chips { display: none; }
}