/* ==========================================================================
   Pro HD — Panneau de la barre de recherche : FENETRE ETROITE ET RUBRIQUES VIDES
   Module `prohdrecherche`, depuis la 1.3.4 (25/09/2026). Interrupteur en
   back-office : « Adapter le panneau aux fenêtres étroites et masquer les
   rubriques vides ».

   1. LES RUBRIQUES VIDES. Doofinder affiche le titre « Marques » (ou
   « Catégories ») meme quand aucune marque ne correspond a la recherche : un
   titre bleu, rien dessous (releve le 25/09 sur « gant nitrile »). Dans le DOM
   la rubrique est un `div` qui ne contient alors QUE son titre :
       <div><div class="dfd-title-lg" role="heading">Marques</div></div>
   On la masque dans ce cas seulement. Des qu une marque arrive, le titre a un
   frere et redevient visible. Sans `:has()` (navigateur ancien), rien ne
   change : le titre reste affiche, comme avant.

   2. LA FENETRE ETROITE. Un vrai telephone recoit la variante plein ecran
   (`.dfd-mobile`), choisie par Doofinder d apres l APPAREIL. Un navigateur
   d ordinateur dans une fenetre etroite — ou une extension qui simule un
   telephone — garde le deroulant (`.dfd-classic`) et SA MISE EN PAGE DE
   BUREAU, sur deux colonnes : categories et marques a gauche (256 px fixes),
   produits a droite. Mesure a 430 px : panneau de 385 px, il restait 31 px a
   la colonne des produits, dont on ne voyait que la fleche du carrousel.
   Sous 768 px (le seuil du theme), les deux colonnes sont empilees :
   categories, puis produits. La colonne de gauche perd sa hauteur fixe et son
   propre defilement ; c est la zone entiere qui defile dans le panneau.
   Marges ramenees de 32 a 16 px, comme les cartes produit du site.

   PORTEE : `.dfd-classic` seulement, comme `ancrage.css` et `boite.css`. Le
   plein ecran du telephone et la page de resultats ne sont pas touches.
   ========================================================================== */

html .dfd-root.dfd-classic .dfd-bc-aside > div:has(> .dfd-title-lg:only-child) {
    display: none !important;
}

@media (max-width: 767px) {
    html .dfd-root.dfd-classic .dfd-initial-content {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: "dfd-filters" "dfd-products" !important;
        align-content: start !important;
        row-gap: 24px !important;
        padding: 20px 16px !important;
        /* 1.3.7 : plus de defilement propre ici, voir « LE PANNEAU DEFILE
           D UN SEUL BLOC » plus bas. */
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 1.3.7 — LE PANNEAU DEFILE D UN SEUL BLOC. En 1.3.4 a 1.3.6, seule la
       zone des resultats defilait, dans la hauteur que Doofinder lui calcule
       (ligne de grille de `.dfd-layer`). Sur l extension du client cette
       hauteur n etait pas bornee : la zone debordait, le panneau coupait ce
       qui depassait, et il n y avait rien a faire defiler — le geste passait
       a la page (1.3.5), puis plus rien ne bougeait une fois la page
       verrouillee (1.3.6). Desormais c est `.dfd-layer`, qui remplit le
       panneau (hauteur posee par `ancrage.css`), qui defile : suggestions,
       categories et produits ensemble. Mesure a 390 x 520 : 819 px de
       contenu pour 325 visibles. La croix de fermeture et la mention
       Doofinder sont positionnees par rapport au panneau et restent en
       place. */
    html .dfd-root.dfd-classic .dfd-layer {
        grid-template-rows: auto auto auto !important;
        align-content: start !important;
        height: 100% !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    html .dfd-root.dfd-classic .dfd-initial-content > .dfd-bc-aside {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html .dfd-root.dfd-classic .dfd-suggestions {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 1.3.6 — L ECRAN D ACCUEIL DE LA RECHERCHE (champ vide : « Dernieres
       recherches », « Recherches populaires », « Produits recommandes »). La
       meme zone y est en `flex` ligne, pas en grille : a 390 px les produits
       recommandes tenaient dans 58 px. Empiles, pleine largeur, sans la marge
       gauche de 32 px que Doofinder leur donne pour les separer d une colonne
       voisine qui n existe plus. `flex-direction` est sans effet sur l ecran
       des resultats, qui est en grille. */
    html .dfd-root.dfd-classic .dfd-initial-content {
        flex-direction: column !important;
    }

    html .dfd-root.dfd-classic .dfd-initial-content > .dfd-popular-searches,
    html .dfd-root.dfd-classic .dfd-initial-content > .dfd-recommended-products {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
    }

    html .dfd-root.dfd-classic .dfd-initial-content > .dfd-recommended-products {
        margin-left: 0 !important;
    }
}

/* 1.3.6 — LA PAGE DEFILAIT A LA PLACE DU PANNEAU (signale le 25/09 sur une
   extension qui simule un telephone). Doofinder verrouille le defilement de la
   page dans sa variante telephone, PAS dans le deroulant : dans une fenetre
   etroite, un glisse qui part hors de la zone defilante du panneau faisait
   defiler le site derriere, et le panneau, qui suit le champ, remontait avec
   lui. On verrouille la page comme Doofinder le fait sur telephone, sous
   768 px et SEULEMENT PANNEAU OUVERT : `prohdrech-ancre` n est posee par
   `ancrage.js` que tant que le deroulant est ouvert, et retiree a la fermeture
   (mesure : `overflow` revenu a `visible`). Sans le script d ancrage, pas de
   classe, donc pas de verrou. */
@media (max-width: 767px) {
    html.prohdrech-ancre,
    html.prohdrech-ancre body {
        overflow: hidden !important;
    }
}