.grecaptcha-badge{visibility:hidden;}
.bkg-recaptcha-mention{font-size:11px;line-height:1.4;opacity:.75;margin:0;}
.bkg-recaptcha-mention a{color:inherit;text-decoration:underline;}
    /* --- accès à la boutique depuis la barre du haut de la vitrine ---
       Placé là plutôt que dans le menu : les 7 entrées occupent déjà toute la
       largeur disponible, un bouton supplémentaire basculait à la ligne.
       Les deux widgets (contact puis bouton) vivent dans une même colonne :
       on les met en ligne, groupés à droite. */
    .bkg-topbar-vitrine > .elementor-widget-wrap{
      display:flex!important;flex-direction:row!important;flex-wrap:wrap;
      align-items:center;justify-content:flex-end;gap:0 18px;}
    .bkg-topbar-vitrine > .elementor-widget-wrap > .elementor-widget{
      width:auto!important;margin:0!important;}
    .bkg-lien-boutique{display:inline-flex;align-items:center;gap:8px;
      padding:5px 16px;border-radius:30px;background:#276AB2;
      color:#fff!important;font-family:Rubik,sans-serif;font-size:13.5px;font-weight:600;
      text-decoration:none!important;transition:background .3s ease;white-space:nowrap;}
    .bkg-lien-boutique:hover{background:#fff;color:#276AB2!important;}
    .bkg-lien-boutique svg{flex:0 0 auto;}
    @media(max-width:767px){
      .bkg-lien-boutique{font-size:13px;padding:5px 13px;}
    }

    /* --- voile de chargement AJAX : SOUS l'en-tête collant ---
       WooCommerce recalcule le panier et la commande par blockUI (cocher
       « expédier à une adresse différente », changer une quantité, appliquer un
       code promo…). blockUI pose z-index:1000 sur son voile et 1001 sur son
       message, alors que l'en-tête collant est à z-index:99 : le voile blanc et
       le rouet passaient DEVANT l'en-tête, qui semblait disparaître le temps du
       calcul. On repasse le voile juste sous l'en-tête — il continue de couvrir
       le bloc rafraîchi, qui n'a aucun z-index propre. */
    .blockUI.blockOverlay{z-index:90!important;}
    .blockUI.blockMsg{z-index:91!important;}

    /* --- barre de recherche --- */
    .bkg-recherche{display:flex;align-items:stretch;width:100%;max-width:520px;
      background:#fff;border:1px solid #e5e8ee;border-radius:30px;overflow:hidden;}
    .bkg-recherche input[type="search"]{flex:1 1 auto;min-width:0;border:0;background:transparent;
      padding:11px 18px;font-family:Rubik,sans-serif;font-size:15px;color:#171B2A;}
    .bkg-recherche input[type="search"]:focus{outline:0;}
    .bkg-recherche input::placeholder{color:#9aa1ac;}
    .bkg-recherche button{flex:0 0 auto;border:0;background:#276AB2;color:#fff;padding:0 20px;
      cursor:pointer;display:flex;align-items:center;transition:.3s ease;}
    .bkg-recherche button:hover{background:#171B2A;}

    /* --- en-tête collant : les trois bandeaux restent solidaires au défilement.
       Replier le bandeau contact au scroll faisait sauter le contenu d'une
       soixantaine de pixels à chaque franchissement du seuil. --- */
    .bkg-header-boutique .bkg-barre-contact{overflow:hidden;}

    /* Elementor ajoute 10 px de padding haut/bas sur CHAQUE colonne peuplée
       (.elementor-widget-wrap.elementor-element-populated) : c'est ce qui gonflait
       les trois bandeaux de 20 px chacun, d'où l'écart sous la barre du haut.
       Dans un en-tête, ce sont les bandeaux qui fixent leur propre respiration. */
    .bkg-header-boutique .elementor-widget-wrap{padding:0!important;}
    .bkg-header-boutique .elementor-widget:not(:last-child){margin-bottom:0!important;}
    .bkg-header-boutique .elementor-widget-container{margin:0!important;}
    .bkg-header-boutique p{margin:0;}
    /* le lien « Retour au site » et la ligne de contact sur la même ligne de base */
    .bkg-header-boutique .bkg-barre-contact .elementor-widget-wrap{align-content:center;}

    /* --- bloc compte + panier, aligné à droite --- */
    .bkg-actions{display:flex;align-items:center;justify-content:flex-end;gap:28px;}
    /* Le burger, l'en-tête du panneau et son voile sont posés par le script sur
       TOUTES les tailles d'écran : sans ces règles ils apparaissent sur grand
       écran, où ils n'ont aucune raison d'être. Ils ne sont rendus visibles que
       dans le média mobile.
       (« Nos pièces détachées » suivi d'une croix bleue s'affichait ainsi en
       plein milieu de la page sur ordinateur.) */
    .bkg-burger,.bkg-menu-tete,.bkg-nav-voile{display:none;}
    /* la pastille du compteur déborde du panier : sans marge elle chevauchait « Mon compte » */
    .bkg-actions .bkg-panier{margin-left:2px;}

    /* --- compte / retour --- */
    .bkg-compte{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
      font-family:Rubik,sans-serif;font-size:15px;font-weight:500;transition:.3s ease;white-space:nowrap;}
    .bkg-compte:hover{color:#276AB2;}
    .bkg-retour{display:inline-flex;align-items:center;gap:5px;color:#c8cdd6;text-decoration:none;
      font-family:Rubik,sans-serif;font-size:13px;transition:.3s ease;white-space:nowrap;}
    .bkg-retour:hover{color:#fff;}

    /* --- menu des familles --- */
    .bkg-nav-fam{font-family:Rubik,sans-serif;}
    /* space-between : les 7 familles occupent toute la largeur du conteneur */
    .bkg-nav-fam-l1{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;
      gap:0;margin:0;padding:0;list-style:none;}
    .bkg-nav-fam-l1 > li{position:relative;list-style:none;}
    .bkg-nav-fam-l1 > li > a{display:flex;align-items:center;gap:6px;padding:11px 16px;
      color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:background .25s ease;}
    .bkg-nav-fam-l1 > li > a:hover,.bkg-nav-fam-l1 > li.is-actif > a{background:#276AB2;color:#fff;}
    .bkg-nav-fam-l1 > li > a svg{opacity:.75;transition:transform .25s ease;}
    .bkg-nav-fam-l1 > li:hover > a svg{transform:rotate(180deg);}

    /* sous-menu : ouvert au survol ET au focus clavier */
    .bkg-nav-fam-l2{position:absolute;top:100%;left:0;z-index:400;min-width:262px;margin:0;padding:8px 0;
      list-style:none;background:#fff;border:1px solid #e5e8ee;border-top:2px solid #276AB2;
      box-shadow:0 14px 34px rgba(0,0,0,.13);
      opacity:0;visibility:hidden;transform:translateY(6px);
      transition:opacity .2s ease,transform .2s ease,visibility .2s;}
    /* OUVERTURE AU SURVOL : RÉSERVÉE AU GRAND ÉCRAN — ne pas retirer ce média.
       Cette règle valait auparavant à toutes les largeurs, et elle est plus
       spécifique (0,3,1) que la règle mobile qui range le sous-panneau (0,1,0).
       Conséquence sur un vrai téléphone : le survol RESTE COLLÉ à l'élément
       tapé (il n'y a pas de pointeur à éloigner), et « :focus-within » reste
       vrai puisque le bouton de retour vit DANS ce même <li>. Le bouton
       fonctionnait donc parfaitement — le JS retirait bien « est-ouvert » —
       mais le survol rouvrait aussitôt le panneau : clic visible, rien qui
       bouge. Invisible en réduisant une fenêtre de bureau, où la souris quitte
       l'élément et lève le survol. */
    @media(min-width:1025px){
      .bkg-nav-fam-l1 > li:hover > .bkg-nav-fam-l2,
      .bkg-nav-fam-l1 > li:focus-within > .bkg-nav-fam-l2{opacity:1;visibility:visible;transform:translateY(0);}
    }
    /* avec space-between les dernières familles touchent le bord droit : leur
       sous-menu s'ouvre vers la gauche, sinon il sort de l'écran sous 1600 px */
    .bkg-nav-fam-l1 > li:nth-last-child(-n+2) > .bkg-nav-fam-l2{left:auto;right:0;}
    .bkg-nav-fam-l2 li{list-style:none;margin:0;}
    .bkg-nav-fam-l2 a{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:9px 18px;color:#171B2A;text-decoration:none;font-size:14.5px;transition:.2s ease;}
    .bkg-nav-fam-l2 a:hover,.bkg-nav-fam-l2 a.is-actif{background:#EEF1F6;color:#276AB2;}
    .bkg-fam-n{flex:0 0 auto;min-width:22px;padding:1px 7px;border-radius:11px;background:#EEF1F6;
      color:#7a828e;font-size:12px;text-align:center;}
    .bkg-nav-fam-l2 a:hover .bkg-fam-n{background:#fff;}

    /* =====================================================================
       CARTES PRODUIT — dessin unique pour les pages de liste (boutique,
       catégories, recherche) ET le bloc « Produits similaires » des fiches.
       Portée par .woocommerce (posée sur <body>) : les deux contextes en héritent.
       ===================================================================== */
    /* !important sur flex-direction et sur les cotes de la vignette : Astra empile
       l'image et le texte EN LIGNE via des règles plus spécifiques que les nôtres
       (la carte partait en deux colonnes, vignette de 126px à gauche). */
    .woocommerce ul.products li.product{
      display:flex!important;flex-direction:column!important;margin:0!important;padding:0!important;
      background:#fff;border:1px solid #e5e8ee;border-radius:8px;overflow:hidden;
      transition:box-shadow .3s ease,border-color .3s ease;}
    .woocommerce ul.products li.product:hover{border-color:#cfd6e2;box-shadow:0 6px 22px rgba(0,0,0,.09);}

    /* visuel sur fond neutre, hauteur constante pour aligner les cartes entre elles */
    .woocommerce ul.products .astra-shop-thumbnail-wrap{position:relative;margin:0!important;
      width:100%!important;flex:0 0 auto!important;background:#F7F8FA;}
    .woocommerce ul.products .astra-shop-thumbnail-wrap a{display:block;}
    .woocommerce ul.products .astra-shop-thumbnail-wrap img{display:block;width:100%!important;
      height:210px!important;max-width:none!important;object-fit:contain;padding:14px;
      box-sizing:border-box;margin:0!important;}
    /* Astra pose un bouton flottant sur la vignette : doublon du bouton de la carte */
    .woocommerce ul.products .ast-on-card-button{display:none!important;}

    /* colonne de contenu : c'est elle qui pousse le bouton en bas.
       L'espacement passe par « gap » et non par des margin-bottom : le prix
       n'est pas rendu du tout pour un visiteur non validé (WooCommerce n'écrit
       le <span class="price"> que s'il a une valeur), et sa marge disparaissait
       avec lui — le bouton se collait alors au titre. */
    .woocommerce ul.products .astra-shop-summary-wrap{display:flex;flex-direction:column;flex:1 1 auto;
      gap:14px;padding:16px 16px 18px;text-align:left;}
    .woocommerce ul.products .ast-woo-product-category{margin:0!important;font-size:12px;color:#7a828e;
      text-transform:none;letter-spacing:0;line-height:1.3;}
    .woocommerce ul.products .woocommerce-loop-product__title{margin:0!important;padding:0!important;
      font-family:Rubik,sans-serif;font-size:15px;font-weight:600;line-height:1.4;color:#171B2A;}
    .woocommerce ul.products a.ast-loop-product__link{margin:0;}
    .woocommerce ul.products a:hover .woocommerce-loop-product__title{color:#276AB2;}
    .woocommerce ul.products .price{display:block;margin:0!important;font-family:Rubik,sans-serif;
      font-size:20px;font-weight:600;color:#171B2A;}
    /* auto : absorbe l'espace restant quand le titre tient sur une seule ligne.
       Le « gap » du conteneur garantit en plus un écart minimum au-dessus. */
    .woocommerce ul.products li.product .button{margin:auto 0 0!important;width:100%;
      padding:11px 12px!important;border:1px solid #276AB2!important;border-radius:30px!important;
      background:transparent!important;color:#276AB2!important;font-family:Rubik,sans-serif!important;
      font-size:15px!important;font-weight:600!important;text-align:center;text-transform:none!important;
      transition:.3s ease!important;}
    .woocommerce ul.products li.product .button:hover{background:#276AB2!important;color:#fff!important;}
    .woocommerce ul.products li.product .added_to_cart{display:none;}

    /* --- disponibilité, fiche ET cartes ---
       Point plein plutôt que coche : c’est le dessin retenu. Il se lit de loin
       et reste le même des deux côtés — c’est la même information, elle doit se
       reconnaître d’un écran à l’autre. */
    .bkg-stock{display:inline-flex;align-items:center;gap:7px;
      font-family:Rubik,sans-serif;font-size:13px;font-weight:600;line-height:1.3;}
    .bkg-stock::before{content:"";flex:0 0 auto;width:8px;height:8px;
      border-radius:50%;background:currentColor;}
    .bkg-stock.est-dispo{color:#1e8e4e;}
    .bkg-stock.est-rupture{color:#c0392b;}
    .woocommerce ul.products li.product .bkg-stock{font-size:12.5px;}

    /* Le prix et sa disponibilité forment UN bloc. Sans ce groupement, le
       « gap » de 14 px de la colonne éloignait autant la mention du prix que du
       bouton : elle flottait entre les deux au lieu de compléter le tarif. */
    .bkg-prix-dispo{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
    .bkg-prix-dispo .price{margin:0!important;}

    /* Sur la fiche, même principe : la mention passe SOUS le prix, pas à côté.
       « flex » et non « inline-flex » pour qu’elle prenne sa propre ligne à
       l’intérieur du paragraphe de prix, où elle est injectée. */
    .bkg-achat-prix .bkg-stock{display:flex;margin-top:9px;}

    /* =====================================================================
       COLONNE DE FILTRES DES PAGES DE LISTE
       ===================================================================== */
    .bkg-filtres-prod{font-family:Rubik,sans-serif;background:#EEF1F6;padding:22px 20px;border-radius:6px;}
    /* Le bouton n'existe que sur les petits écrans ; sur grand écran la colonne
       de filtres est toujours dépliée et le bouton n'aurait aucun sens. */
    .bkg-fp-bascule{display:none;}
    .bkg-fp-titre{margin:0 0 16px;font-size:16px;font-weight:600;text-transform:uppercase;color:#171B2A;}
    .bkg-fp-tous{display:block;margin:0 0 8px;padding:9px 12px;border-radius:4px;background:#fff;
      color:#171B2A;font-size:14.5px;font-weight:600;text-decoration:none;transition:.2s ease;}
    .bkg-fp-tous:hover,.bkg-fp-tous.is-actif{background:#276AB2;color:#fff;}
    .bkg-fp-bloc{border-top:1px solid #dfe4ec;}
    .bkg-fp-bloc:first-of-type{border-top:0;}
    /* Astra stylise tous les <button> au survol : on neutralise pour garder un titre sobre */
    .bkg-fp-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
      padding:12px 2px;border:0!important;background:none!important;box-shadow:none!important;
      color:#171B2A!important;font-family:Rubik,sans-serif;font-size:15px;font-weight:600;
      text-align:left;cursor:pointer;}
    .bkg-fp-btn:hover,.bkg-fp-btn:focus{background:none!important;color:#276AB2!important;outline:0;}
    .bkg-fp-btn svg{flex:0 0 auto;transition:transform .25s ease;}
    .bkg-fp-bloc.is-ouvert .bkg-fp-btn svg{transform:rotate(180deg);}
    .bkg-fp-liste{display:none;padding:0 0 10px 2px;}
    .bkg-fp-bloc.is-ouvert .bkg-fp-liste{display:block;}
    .bkg-fp-lien{display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:7px 10px;border-radius:4px;color:#54595F!important;font-size:14px;text-decoration:none;
      transition:.2s ease;}
    .bkg-fp-lien:hover{background:#fff;color:#276AB2!important;}
    .bkg-fp-lien.is-actif{background:#276AB2;color:#fff!important;font-weight:600;}
    .bkg-fp-n{flex:0 0 auto;min-width:22px;padding:1px 6px;border-radius:11px;background:#fff;
      color:#7a828e;font-size:12px;text-align:center;}
    .bkg-fp-lien.is-actif .bkg-fp-n{background:rgba(255,255,255,.25);color:#fff;}
    .bkg-fp-total{margin:16px 0 0;padding-top:14px;border-top:1px solid #dfe4ec;
      font-size:13px;color:#7a828e;}

    /* --- la colonne de filtres suit le défilement (ordinateur) ---
       Les listes font plusieurs écrans de haut : arrivé au dernier produit, il
       fallait remonter tout en haut pour changer de famille.

       C’est le WIDGET Elementor qui devient collant, pas le panneau lui-même.
       Un élément collant se déplace dans la hauteur de SON PARENT : le parent
       du panneau est le widget, haut comme son contenu — pas un pixel de
       course. Le parent du widget, lui, est la colonne, étirée sur toute la
       hauteur de la rangée par Elementor. La classe est posée par le script,
       faute de pouvoir désigner un parent en CSS.

       En dessous de 1025 px la colonne est repliée derrière le bouton
       « Filtres » : il n’y a rien à faire tenir à l’écran. */
    @media(min-width:1025px){
      .bkg-fp-colle{position:sticky;top:calc(var(--bkg-entete,0px) + 16px);
        align-self:flex-start;}

      /* Une famille dépliée peut rendre la colonne plus haute que l’écran : on
         la borne et on la laisse défiler pour elle-même, sinon son bas
         devenait inatteignable. La barre reste discrète tant qu’elle ne sert
         pas. */
      .bkg-filtres-prod{max-height:calc(100vh - var(--bkg-entete,0px) - 32px);
        overflow-y:auto;
        scrollbar-width:thin;scrollbar-color:#c3cad6 transparent;}
      .bkg-filtres-prod::-webkit-scrollbar{width:6px;}
      .bkg-filtres-prod::-webkit-scrollbar-track{background:transparent;}
      .bkg-filtres-prod::-webkit-scrollbar-thumb{background:#c3cad6;border-radius:3px;}
    }

    /* --- titre des pages de liste --- */
    .bkg-titre-liste{margin:0;font-family:Rubik,sans-serif;font-size:34px;font-weight:600;
      line-height:1.25;color:#171B2A;}
    @media(max-width:767px){.bkg-titre-liste{font-size:26px;}}

    /* --- famille encore vide : le message brut d'Elementor n'a aucune mise en forme --- */
    .bkg-grille-produits .elementor-nothing-found{padding:26px 28px;background:#EEF1F6;
      border-left:3px solid #276AB2;font-family:Rubik,sans-serif;font-size:15px;color:#171B2A;}

    /* --- barre « N résultats » + tri, au-dessus de la grille --- */
    .bkg-grille-produits .woocommerce-result-count{margin:0 0 22px;font-family:Rubik,sans-serif;
      font-size:14px;color:#7a828e;}
    .bkg-grille-produits .woocommerce-ordering select{font-family:Rubik,sans-serif;font-size:14px;
      padding:8px 12px;border:1px solid #e5e8ee;border-radius:4px;background:#fff;color:#171B2A;}

    /* --- pagination : pastilles rondes à bordure grise ---
       Le sélecteur ne passe PAS par .bkg-grille-produits : sur la page Boutique,
       la pagination est rendue hors de ce conteneur, et la règle ne s'appliquait
       alors pas du tout — d'où le cadre CARRÉ bleu du thème qu'on voyait.
       !important sur border : Astra colore la bordure du ul et des li
       (« nav.woocommerce-pagination ul li{border-color:var(--ast-global-color-0)} »),
       et WooCommerce encadre le ul entier — c'est cet encadré qu'il faut retirer,
       la pastille ronde de chaque numéro, elle, est conservée.
       overflow:visible — WooCommerce pose overflow:hidden sur ce ul, ce qui
       rognerait les pastilles arrondies aux extrémités. */
    .woocommerce-pagination ul.page-numbers{display:flex;flex-wrap:wrap;gap:8px;
      margin:34px 0 0;padding:0;border:0!important;list-style:none;justify-content:center;
      overflow:visible;}
    .woocommerce-pagination ul.page-numbers li{border:0!important;margin:0;overflow:visible;}
    .woocommerce-pagination ul.page-numbers li a,
    .woocommerce-pagination ul.page-numbers li span{display:flex;align-items:center;
      justify-content:center;min-width:42px;height:42px;padding:0 12px;
      border:1px solid #e5e8ee!important;border-radius:30px;background:#fff;color:#171B2A;
      font-family:Rubik,sans-serif;font-size:15px;font-weight:500;text-decoration:none;
      transition:.25s ease;}
    .woocommerce-pagination ul.page-numbers li a:hover,
    .woocommerce-pagination ul.page-numbers li a:focus{border-color:#276AB2!important;color:#276AB2;}
    .woocommerce-pagination ul.page-numbers li span.current,
    .woocommerce-pagination ul.page-numbers li a.current{background:#276AB2!important;
      border-color:#276AB2!important;color:#fff!important;font-weight:600;}
    .woocommerce-pagination ul.page-numbers li a.next,
    .woocommerce-pagination ul.page-numbers li a.prev{font-size:18px;}

    /* --- sur les écrans étroits, le menu passe en liste déroulée --- */
    /* l'en-tête et le « voir toute la famille » n'existent que pour le volet mobile */
    .bkg-fam-tete,.bkg-fam-tout{display:none;}

    /* =====================================================================
       SOUS 1025 px — menu qui défile à l'horizontale, sous-familles en volet

       L'ancienne version dépliait TOUTES les sous-familles en même temps :
       le menu occupait alors plusieurs écrans et masquait la boutique.
       Ici les familles restent sur une seule ligne que l'on fait défiler du
       doigt, et un appui ouvre un volet latéral avec ses sous-familles.
       ===================================================================== */
    /* --- MARGES LATÉRALES DES RÉSULTATS DE RECHERCHE ---
       La page catégorie et la page de résultats rendent le MÊME modèle
       Elementor (662), mais Astra ne les enveloppe pas pareil : la catégorie
       reçoit « ast-plain-container », la recherche « ast-page-builder-template ».
       Or Astra vide le conteneur dans ce second cas :
         .ast-page-builder-template .site-content > .ast-container{padding:0}
       à (0,3,0), ce qui bat le .ast-container{padding:20px} à (0,1,0). Il ne
       restait que les 10 px du widget-wrap et les cartes touchaient le bord.
       Astra prévoit bien une compensation, mais elle vise « .site-main », qui
       n'existe pas dans notre chaîne (site-content > ast-container > elementor).
       On rétablit donc la marge nous-mêmes, en longhands : elles l'emportent
       sur le raccourci « padding:0 » d'Astra à spécificité supérieure.
       Portée limitée aux pages boutique : la classe ast-woo-shop-archive n'est
       posée que là, les pages vitrine en page-builder gardent leur pleine
       largeur. */
    body.ast-page-builder-template.ast-woo-shop-archive .site-content > .ast-container{
      padding-left:20px;padding-right:20px;}

    @media(max-width:1024px){

      /* --- bandeau du haut : on ne garde que le retour vitrine ---
         Le téléphone et l'e-mail passaient sur une deuxième ligne et
         allongeaient l'en-tête d'autant. Ils restent accessibles : le pied de
         page les porte, et la page Contact est dans le menu.
         Ciblage par identifiant Elementor faute de classe sur ce widget ; il
         est scopé au modèle 660 (en-tête boutique). Si le bandeau était un
         jour reconstruit, la seule conséquence serait le retour du texte en
         mobile — aucune casse. Le widget « Retour au site BKG France »
         (86f0761) n'est PAS touché. */
      .elementor-660 .elementor-element-cd2a0eb{display:none!important;}

      /* --- bandeau logo / recherche / compte --- */
      /* Elementor empile ses colonnes à 100 % : on rétablit une ligne, avec la
         recherche renvoyée dessous par « order » et une base de 100 %. */
      /* nth-of-type et NON nth-child : le burger est inséré comme premier
         enfant du conteneur, ce qui décale toute la numérotation en nth-child.
         nth-of-type ne compte que les <div> des colonnes et ignore le <button>.
         Ordre voulu : burger · logo · [espace] · compte · panier, recherche dessous. */
      .bkg-barre-principale > .elementor-container{display:flex!important;flex-wrap:wrap;
        align-items:center;row-gap:12px;}
      .bkg-barre-principale > .elementor-container > .elementor-column{width:auto!important;}
      .bkg-barre-principale .elementor-widget-image{margin:0!important;}
      .bkg-barre-principale > .elementor-container > .bkg-burger{order:0;}
      .bkg-barre-principale > .elementor-container > div.elementor-column:nth-of-type(1){order:1;}
      .bkg-barre-principale > .elementor-container > div.elementor-column:nth-of-type(3){order:2;
        margin-left:auto;}
      .bkg-barre-principale > .elementor-container > div.elementor-column:nth-of-type(2){order:3;
        flex:1 1 100%;width:100%!important;}
      /* La barre est enveloppée par « .bkg-recherche-zone », créée par le script
         des suggestions et plafonnée à 520 px : c'est elle qui l'empêchait de
         tenir toute la largeur, pas le formulaire lui-même. */
      .bkg-barre-principale .bkg-recherche,
      .bkg-barre-principale .bkg-recherche-zone{max-width:none!important;width:100%!important;}
      .bkg-barre-principale .elementor-widget-wrap{padding:0!important;}
      .bkg-barre-principale > .elementor-container > div.elementor-column:nth-of-type(2)
        .elementor-widget-container{width:100%;}

      /* --- bouton burger, posé par le script dans le bandeau principal --- */
      .bkg-burger{display:inline-flex!important;align-items:center;justify-content:center;
        width:42px;height:42px;margin-right:10px;padding:0;flex:0 0 auto;
        border:0!important;border-radius:8px;background:transparent!important;
        color:#fff!important;cursor:pointer;transition:background .25s ease;}
      .bkg-burger:hover{background:rgba(255,255,255,.12)!important;}

      /* Compte et panier en icônes seules, comme sur la référence du client :
         « Prénom N. » à côté du logo ne laisse plus de place sur un téléphone. */
      .bkg-actions{gap:16px;}
      .bkg-compte span{display:none;}
      .bkg-compte{gap:0;}

      /* --- le bandeau des familles devient le panneau du burger --- */
      /* On ne déplace rien dans le DOM : le bandeau existant se transforme en
         panneau. Un déplacement en JavaScript casserait le retour au grand
         écran et le fil d'accessibilité. */
      /* La barre d'administration de WordPress est fixée en haut de l'écran et
         recouvrait le haut du panneau : son bouton de retour recevait donc les
         clics de la barre d'admin, jamais les nôtres. Invisible pour un
         visiteur, bloquant pour toute personne connectée. */
      body.admin-bar .bkg-barre-familles{top:32px;}
      .bkg-barre-familles{position:fixed!important;top:0;bottom:0;left:0;right:auto;
        z-index:1200;width:min(86vw,340px);margin:0!important;padding:0!important;
        background:#171B2A;box-shadow:14px 0 40px rgba(0,3,6,.45);
        transform:translateX(-100%);visibility:hidden;
        transition:transform .28s ease,visibility 0s linear .28s;
        overflow-y:auto;overflow-x:hidden;}
      body.bkg-menu-ouvert .bkg-barre-familles{transform:translateX(0);visibility:visible;
        transition:transform .28s ease,visibility 0s;}
      .bkg-barre-familles > .elementor-container{display:block!important;padding:0!important;
        max-width:none!important;}
      /* position:static sur TOUS les conteneurs intermédiaires : Elementor pose
         « position:relative » sur ses colonnes et ses widgets. Sans ça, le
         sous-panneau en « absolute » se cale sur l'un d'eux au lieu de couvrir
         le panneau entier — il s'ouvrait donc hors de la zone visible, ce qui
         donnait l'impression que le clic ne faisait rien. */
      .bkg-barre-familles .elementor-column,
      .bkg-barre-familles .elementor-widget-wrap,
      .bkg-barre-familles .elementor-widget,
      .bkg-barre-familles .elementor-widget-container,
      .bkg-barre-familles .bkg-nav-fam{width:100%!important;padding:0!important;
        position:static!important;}

      /* en-tête du panneau, injecté par le script */
      .bkg-menu-tete{display:flex!important;align-items:center;justify-content:space-between;gap:12px;
        padding:18px 18px 15px;border-bottom:1px solid rgba(255,255,255,.12);
        font-family:Rubik,sans-serif;font-size:16px;font-weight:600;color:#fff;}
      .bkg-menu-fermer{display:inline-flex;align-items:center;justify-content:center;
        width:34px;height:34px;padding:0;border:0!important;border-radius:50%;
        background:rgba(255,255,255,.1)!important;color:#fff!important;cursor:pointer;}

      /* --- niveau 1 : les familles, en liste --- */
      .bkg-nav-fam-l1{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;
        gap:0;padding:6px 0 20px;overflow:visible;}
      /* position:static — sur grand écran chaque <li> est « relative » pour porter
         son menu déroulant. Ici le sous-panneau doit couvrir TOUT le panneau :
         on retire ce repère pour qu'il se cale sur .bkg-barre-familles. */
      .bkg-nav-fam-l1 > li{flex:0 0 auto;width:100%;position:static;}
      .bkg-nav-fam-l1 > li > a{display:flex;align-items:center;justify-content:space-between;
        gap:10px;padding:14px 18px;border-radius:0;background:transparent;font-size:15px;}
      .bkg-nav-fam-l1 > li > a svg{transform:rotate(-90deg);}   /* chevron vers la droite */
      .bkg-nav-fam-l1 > li.is-actif > a{background:rgba(39,106,178,.22);
        box-shadow:inset 3px 0 0 #276AB2;color:#fff;}

      /* --- niveau 2 : sous-panneau qui glisse par-dessus ---
         position:fixed et non absolute. Le panneau parent défile (overflow-y),
         et un enfant « absolute » défilait avec lui : passé le premier écran,
         le sous-panneau ne recouvrait plus le niveau 1 — on voyait le texte des
         deux à la fois — et son bouton de retour se retrouvait hors de vue,
         donc inutilisable.
         Le parent porte un « transform » : un enfant « fixed » s'y rattache
         alors au lieu de la fenêtre. On obtient exactement la couverture du
         panneau, insensible au défilement. */
      .bkg-nav-fam-l2{position:fixed!important;top:0;right:0;bottom:0;left:0;
        z-index:2;display:block!important;width:100%;margin:0;padding:0;
        background:#171B2A;box-shadow:none;border:0;border-radius:0;
        overflow-y:auto;-webkit-overflow-scrolling:touch;
        transform:translateX(100%);opacity:1;visibility:hidden;
        transition:transform .26s ease,visibility 0s linear .26s;}
      .bkg-fam.est-ouvert > .bkg-nav-fam-l2{transform:translateX(0);visibility:visible;
        transition:transform .26s ease,visibility 0s;}

      /* La barre entière EST le bouton : une seule cible, rien à traverser.
         Auparavant un petit bouton était imbriqué dans une barre elle-même
         cliquable — deux cibles concurrentes, et le clic sur l'icône se perdait
         entre les deux selon le navigateur. Le contenu du bouton (icône, texte)
         est rendu transparent au pointeur pour que l'événement vise toujours
         le bouton lui-même. */
      .bkg-fam-tete{display:block!important;padding:0;
        border-bottom:1px solid rgba(255,255,255,.12);}
      .bkg-fam-retour{display:flex!important;align-items:center;gap:11px;
        width:100%;padding:15px 16px;border:0!important;border-radius:0;
        background:transparent!important;color:#fff!important;
        font-family:Rubik,sans-serif;font-size:16px;font-weight:600;text-align:left;
        cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,.15);}
      .bkg-fam-retour:active{background:rgba(255,255,255,.08)!important;}
      .bkg-fam-retour > *{pointer-events:none;}
      .bkg-fam-retour-ico{display:inline-flex;align-items:center;justify-content:center;
        width:34px;height:34px;flex:0 0 auto;border-radius:50%;
        background:rgba(255,255,255,.12);}
      .bkg-fam-tete + .bkg-fam-tout{display:block!important;}
      .bkg-fam-tout a{display:block;padding:13px 16px;color:#8fb8e0!important;
        font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);}
      .bkg-nav-fam-l2 li a{padding:13px 16px;font-size:14.5px;}
      .bkg-nav-fam-l2 a{color:#c8cdd6;}
      .bkg-nav-fam-l2 a:hover,.bkg-nav-fam-l2 a.is-actif{background:rgba(255,255,255,.06);color:#fff;}
      .bkg-fam-n{background:rgba(255,255,255,.12);color:#c8cdd6;}

      /* voile derrière le panneau */
      /* display:block explicite : le voile est masqué par défaut hors mobile,
         il faut le rétablir ici — c'est « visibility » qui pilote son apparition. */
      .bkg-nav-voile{display:block!important;position:fixed;inset:0;z-index:1199;
        background:rgba(0,3,6,.5);
        opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;}
      .bkg-nav-voile.est-visible{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s;}
      body.bkg-menu-ouvert{overflow:hidden;}
      /* sous 783 px WordPress épaissit sa barre d'administration */
      @media screen and (max-width:782px){
        body.admin-bar .bkg-barre-familles{top:46px;}
      }

      /* L'en-tête est collant avec z-index:99, ce qui crée un CONTEXTE
         D'EMPILEMENT : le z-index:1200 du panneau ne vaut qu'à l'intérieur de
         ce contexte, plafonné à 99. Le voile, enfant du body à 1199, passait
         donc AU-DESSUS du panneau et interceptait tous les clics — d'où
         « rien ne se passe, et le menu se ferme ».
         On élève le contexte entier le temps de l'ouverture ; le voile est par
         ailleurs déplacé dans l'en-tête par le script, pour partager ce contexte. */
      body.bkg-menu-ouvert .bkg-header-boutique,
      body.bkg-menu-ouvert .bkg-header-boutique.elementor-sticky--effects{z-index:1300!important;}

      /* --- filtres produits repliés derrière un bouton --- */
      .bkg-fp-bascule{display:inline-flex!important;align-items:center;gap:9px;
        margin:0 0 16px;padding:11px 18px;border:1px solid #d7dce4!important;
        border-radius:8px;background:#fff!important;color:#171B2A!important;
        font-family:Rubik,sans-serif;font-size:14.5px;font-weight:600;
        cursor:pointer;transition:.25s ease;}
      .bkg-fp-bascule svg{color:#276AB2;flex:0 0 auto;}
      .bkg-fp-bascule:hover{border-color:#276AB2!important;}
      .bkg-fp-bascule.est-actif{background:#276AB2!important;color:#fff!important;
        border-color:#276AB2!important;}
      .bkg-fp-bascule.est-actif svg{color:#fff;}
      /* la colonne reste dans le flux, simplement repliée */
      .bkg-filtres-prod{display:none;}
      .bkg-filtres-prod.est-deplie{display:block;margin-bottom:22px;}

      /* --- marges latérales ---
         Le fond noir #000306 est porté par les BANDEAUX (barre-contact,
         barre-principale), pas par la section racine. Le padding doit donc
         vivre À L'INTÉRIEUR de chaque bandeau : posé sur la racine, il les
         rétrécissait, fond compris, et laissait deux bandes claires sur les
         côtés — exactement ce que le client a constaté. */
      .bkg-header-boutique > .elementor-container{padding-left:0!important;
        padding-right:0!important;max-width:none!important;}
      .bkg-barre-contact > .elementor-container,
      .bkg-barre-principale > .elementor-container{padding-left:16px!important;
        padding-right:16px!important;}
    }

    @media(max-width:600px){
      .bkg-barre-contact > .elementor-container,
      .bkg-barre-principale > .elementor-container{padding-left:13px!important;
        padding-right:13px!important;}
      .bkg-barre-principale .elementor-widget-image img{max-width:118px;}
      .bkg-barre-contact{font-size:12.5px;}
    }
    

    /* La liste est posée dans une enveloppe SŒUR du formulaire, pas dedans :
       « .bkg-recherche » est un conteneur flex avec overflow:hidden (coins
       arrondis), qui ferait de la liste un élément de la ligne et la rognerait. */
    .bkg-recherche-zone{position:relative;width:100%;max-width:520px;}
    .bkg-recherche-zone .bkg-recherche{max-width:none;}
    .bkg-sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:500;
      display:none;max-height:70vh;overflow-y:auto;padding:6px;
      background:#fff;border:1px solid #e5e8ee;border-radius:8px;
      box-shadow:0 12px 34px rgba(0,3,6,.16);font-family:Rubik,sans-serif;text-align:left;}
    .bkg-sugg.est-ouvert{display:block;}
    .bkg-sugg-item{display:flex;align-items:center;gap:12px;padding:9px 10px;
      border-radius:6px;color:#171B2A!important;text-decoration:none!important;}
    .bkg-sugg-item:hover,.bkg-sugg-item.est-actif{background:#F7F8FA;}
    .bkg-sugg-img{flex:0 0 auto;width:44px;height:44px;object-fit:contain;padding:3px;
      background:#fff;border:1px solid #e5e8ee;border-radius:5px;box-sizing:border-box;}
    .bkg-sugg-txt{min-width:0;flex:1 1 auto;line-height:1.35;}
    .bkg-sugg-nom{display:block;font-size:14px;font-weight:500;}
    .bkg-sugg-nom mark{background:transparent;color:#276AB2;font-weight:700;padding:0;}
    .bkg-sugg-meta{display:block;margin-top:2px;font-size:12px;color:#7a828e;}
    .bkg-sugg-vide{padding:16px 12px;font-size:14px;color:#7a828e;}
    .bkg-sugg-tout{display:block;margin-top:4px;padding:11px 10px;border-top:1px solid #eef0f4;
      color:#276AB2!important;font-size:13.5px;font-weight:600;text-decoration:none!important;}
    .bkg-sugg-tout:hover{background:#F7F8FA;}
    .bkg-sugg-attente{padding:16px 12px;font-size:13.5px;color:#7a828e;}
    @media(max-width:600px){.bkg-sugg-img{width:38px;height:38px;}}
    
.bkg-legal{font-family:Rubik,sans-serif;max-width:820px;margin:0 auto;color:#3d4657;
  font-size:15.5px;line-height:1.7;}
.bkg-legal p{margin:0 0 16px;}
.bkg-legal a{color:#276AB2;text-decoration:underline;}
.bkg-legal a:hover{color:#171B2A;}

/* Chapô : résume à qui s’adresse le document, avant d’entrer dans le détail. */
.bkg-legal-chapo{padding:18px 20px;margin:0 0 30px!important;background:#F5F6F8;
  border-left:3px solid #276AB2;border-radius:0 6px 6px 0;font-size:16px;color:#171B2A;}

/* Les titres numérotés servent de repères dans une lecture longue : on les
   détache nettement plutôt que de les fondre dans le texte. */
.bkg-legal h2{margin:38px 0 14px;padding-top:22px;border-top:1px solid #e5e8ee;
  font-family:Rubik,sans-serif;font-size:19px;font-weight:600;color:#171B2A;line-height:1.35;}
.bkg-legal h2:first-of-type{border-top:0;padding-top:0;}

/* Titre de page écrit dans le texte (le thème masque celui des pages) : même
   tenue que le titre des mentions légales. */
.bkg-legal .bkg-legal-titre{margin:0 0 26px;font-family:Rubik,sans-serif;font-size:28px;
  font-weight:500;line-height:1.2;color:#171B2A;text-transform:uppercase;}

/* Sous-parties d'un article (un traitement de données, par exemple). */
.bkg-legal h3{margin:26px 0 10px;font-family:Rubik,sans-serif;font-size:16.5px;
  font-weight:600;color:#276AB2;line-height:1.4;}

.bkg-legal ul{margin:0 0 16px;padding-left:22px;}
.bkg-legal li{margin-bottom:8px;}

/* Identité du vendeur et service client : des données, donc un tableau —
   plus lisible qu’une suite de lignes séparées par des tirets. */
.bkg-legal-identite{width:100%;border-collapse:collapse;margin:0 0 18px;
  border:1px solid #e5e8ee;border-radius:6px;overflow:hidden;}
.bkg-legal-identite th{width:34%;padding:12px 16px;background:#FAFBFC;
  border-bottom:1px solid #f0f2f5;color:#6b7280;font-size:13px;font-weight:600;
  text-align:left;vertical-align:top;}
.bkg-legal-identite td{padding:12px 16px;border-bottom:1px solid #f0f2f5;
  color:#171B2A;font-size:14.5px;vertical-align:top;}
.bkg-legal-identite tr:last-child th,
.bkg-legal-identite tr:last-child td{border-bottom:0;}

/* Une clause dont dépend l’acceptation d’une réclamation mérite d’être vue. */
.bkg-legal-alerte{padding:14px 18px;background:#FFF7E8;border:1px solid #f0e2c0;
  border-radius:6px;color:#8a5f0b;font-weight:500;}

@media(max-width:600px){
  .bkg-legal{font-size:15px;}
  .bkg-legal .bkg-legal-titre{font-size:23px;}
  .bkg-legal h2{font-size:17.5px;margin-top:30px;}
  .bkg-legal-identite th,.bkg-legal-identite td{display:block;width:auto;}
  .bkg-legal-identite th{border-bottom:0;padding-bottom:2px;}
  .bkg-legal-identite td{padding-top:0;}
}
.bkg-panier-zone{display:inline-flex;}

/* Sous 993 px : pas de survol possible, le panneau n’existe pas. */
.bkg-panier-apercu{display:none;}

@media(min-width:993px){
  .bkg-panier-zone{position:relative;}

  .bkg-panier-apercu{
    display:block;position:absolute;top:100%;right:0;z-index:9999;
    width:330px;margin-top:10px;padding:16px 18px;
    background:#fff;border:1px solid #e5e8ee;border-radius:10px;
    box-shadow:0 14px 38px rgba(23,27,42,.16);
    font-family:Rubik,sans-serif;color:#171B2A;text-align:left;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;}

  /* Pont invisible entre l’icône et le panneau : sans lui, le survol se perd
     dans les 10 px de marge et le panneau se referme en cours de route. */
  .bkg-panier-apercu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}

  /* « focus-within » ouvre aussi au clavier ; « visibility » suffit à sortir
     les liens du parcours de tabulation tant que le panneau est fermé. */
  .bkg-panier-zone:hover .bkg-panier-apercu,
  .bkg-panier-zone:focus-within .bkg-panier-apercu{
    opacity:1;visibility:visible;transform:none;}

  .bkg-apercu-titre{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:#8d96a3;}
  .bkg-apercu-vide{margin:0 0 12px;font-size:14px;color:#6b7280;}

  .bkg-apercu-liste{margin:0;padding:0;list-style:none;}
  .bkg-apercu-ligne{display:flex;gap:11px;padding:9px 0;border-top:1px solid #f0f2f5;}
  .bkg-apercu-ligne:first-child{border-top:0;padding-top:0;}
  .bkg-apercu-vignette{flex:0 0 auto;width:46px;height:46px;border:1px solid #eef0f4;
    border-radius:6px;overflow:hidden;background:#fff;}
  .bkg-apercu-vignette img{width:100%;height:100%;object-fit:contain;display:block;margin:0;}
  .bkg-apercu-texte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .bkg-apercu-nom{font-size:13.5px;font-weight:500;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .bkg-apercu-options{font-size:11.5px;line-height:1.35;color:#8d96a3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .bkg-apercu-qte{font-size:12.5px;color:#6b7280;}
  .bkg-apercu-qte em{font-style:normal;font-weight:600;color:#171B2A;margin-left:6px;}

  .bkg-apercu-reste{margin:8px 0 0;font-size:12.5px;color:#8d96a3;}

  .bkg-apercu-total{display:flex;justify-content:space-between;align-items:baseline;
    margin:12px 0 0;padding-top:11px;border-top:1px solid #e5e8ee;font-size:13.5px;color:#6b7280;}
  .bkg-apercu-total strong{font-size:16px;color:#171B2A;}

  .bkg-apercu-cta{display:block;margin-top:13px;padding:11px 16px;border-radius:7px;
    background:#276AB2;color:#fff!important;font-size:14px;font-weight:600;
    text-align:center;text-decoration:none!important;transition:background .15s ease;}
  .bkg-apercu-cta:hover{background:#1d5391;color:#fff!important;}
}
    /* ================= barre horizontale (au-dessus de 1100 px) ========== */
    .bkg-nav{display:flex;align-items:center;justify-content:flex-end;font-family:Rubik,sans-serif;}
    .bkg-nav-liste{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;}
    .bkg-nav-item{position:relative;margin:0;padding:0;list-style:none;display:flex;align-items:center;}
    .bkg-nav-item > a{display:block;padding:10px 9px;color:#fff;font-size:16px;font-weight:600;
      text-transform:uppercase;text-decoration:none;line-height:1.3;transition:color .25s ease;}
    .bkg-nav-item > a:hover,.bkg-nav-item.est-actif > a{color:#276AB2;}

    /* le chevron est un bouton à part : le libellé reste un lien vers la page
       parent, et le sous-menu s'ouvre aussi au doigt et au clavier */
    .bkg-nav-plus{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
      margin-left:-4px;padding:0;border:0;background:none;color:#fff;cursor:pointer;
      transition:color .25s ease,transform .25s ease;}
    .bkg-nav-plus:hover,.bkg-nav-item.est-actif .bkg-nav-plus{color:#276AB2;}
    .bkg-nav-item.est-ouvert .bkg-nav-plus{transform:rotate(180deg);color:#276AB2;}

    .bkg-nav-sous{position:absolute;top:100%;left:0;z-index:120;min-width:246px;margin:0;padding:6px 0;
      list-style:none;background:#fff;border-top:4px solid #276AB2;
      box-shadow:0 3px 24px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(6px);
      transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;}
    .bkg-nav-item:hover > .bkg-nav-sous,
    .bkg-nav-item.est-ouvert > .bkg-nav-sous,
    .bkg-nav-item:focus-within > .bkg-nav-sous{opacity:1;visibility:visible;transform:translateY(0);
      transition:opacity .2s ease,transform .2s ease,visibility 0s;}
    .bkg-nav-sous li{margin:0;padding:0;list-style:none;}
    .bkg-nav-sous a{display:block;padding:8px 15px;color:#171B2A;font-size:15px;font-weight:500;
      text-transform:uppercase;text-decoration:none;line-height:1.4;transition:background .2s ease;}
    .bkg-nav-sous a:hover,.bkg-nav-sous .est-actif > a{color:#276AB2;}
    /* le dernier menu déborderait à droite du conteneur */
    .bkg-nav-item:nth-last-child(-n+2) .bkg-nav-sous{left:auto;right:0;}

    /* Elementor rend l'en-tête COLLANT en clonant la section dans un
       .elementor-sticky__spacer, qui garde la place occupée. Le clone emporte
       la navigation : deux burgers côte à côte, et deux croix une fois le
       panneau ouvert. visibility:hidden plutôt que display:none — l'espaceur
       doit conserver sa hauteur, mais son contenu sort du parcours de
       tabulation et ne reçoit plus les clics. */
    .elementor-sticky__spacer .bkg-nav{visibility:hidden;}

    /* ================= bouton burger ========== */
    .bkg-nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
      padding:0;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer;
      transition:background .25s ease;}
    .bkg-nav-burger:hover{background:rgba(255,255,255,.12);}
    .bkg-nav-burger-traits{display:block;width:24px;height:16px;position:relative;}
    .bkg-nav-burger-traits span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
      background:currentColor;transition:transform .28s ease,opacity .2s ease,top .28s ease;}
    .bkg-nav-burger-traits span:nth-child(1){top:0;}
    .bkg-nav-burger-traits span:nth-child(2){top:7px;}
    .bkg-nav-burger-traits span:nth-child(3){top:14px;}
    body.bkg-nav-ouverte .bkg-nav-burger-traits span:nth-child(1){top:7px;transform:rotate(45deg);}
    body.bkg-nav-ouverte .bkg-nav-burger-traits span:nth-child(2){opacity:0;}
    body.bkg-nav-ouverte .bkg-nav-burger-traits span:nth-child(3){top:7px;transform:rotate(-45deg);}

    /* ================= panneau latéral ========== */
    /* défilement bloqué derrière le panneau : position:fixed sur le body, et le
       décalage posé en JS conserve la position de lecture au moment de l'ouverture */
    body.bkg-nav-ouverte{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

    /* « fond » et non « voile » : bkg-boutique-nav.php possède déjà une classe
       .bkg-nav-voile, servie sur la vitrine aussi, avec un display:none global et
       un display:block!important dans son média mobile — nos deux voiles se
       seraient annulés puis imposés l'un l'autre. */
    .bkg-nav-fond{position:fixed;inset:0;z-index:1190;background:rgba(0,3,6,.5);
      opacity:0;transition:opacity .28s ease;}
    .bkg-nav-fond[hidden]{display:none;}
    body.bkg-nav-ouverte .bkg-nav-fond{opacity:1;}

    .bkg-nav-panneau{position:fixed;top:0;bottom:0;left:0;z-index:1200;
      display:flex;flex-direction:column;width:min(86vw,340px);background:#fff;
      font-family:Rubik,sans-serif;box-shadow:0 0 40px rgba(0,3,6,.28);
      transform:translateX(-100%);transition:transform .28s ease;}
    .bkg-nav-panneau[hidden]{display:none;}
    body.bkg-nav-ouverte .bkg-nav-panneau{transform:translateX(0);}
    /* la barre d'administration ne doit pas recouvrir l'en-tête du panneau */
    body.admin-bar .bkg-nav-panneau{top:32px;}
    @media screen and (max-width:782px){body.admin-bar .bkg-nav-panneau{top:46px;}}

    .bkg-nav-tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
      gap:12px;padding:14px 16px;background:#000306;}
    .bkg-nav-logo img{display:block;width:104px;height:auto;}
    .bkg-nav-fermer{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
      padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
      transition:background .2s ease;}
    .bkg-nav-fermer:hover{background:rgba(255,255,255,.22);}

    /* les niveaux se superposent : le sous-niveau entre par la droite */
    .bkg-nav-corps{position:relative;flex:1 1 auto;overflow:hidden;}
    .bkg-nav-niveau{position:absolute;inset:0;margin:0;padding:6px 0 20px;list-style:none;
      overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
      transform:translateX(100%);transition:transform .28s ease;}
    .bkg-nav-niveau[data-niveau="0"]{transform:translateX(0);}
    .bkg-nav-niveau[hidden]{display:none;}
    .bkg-nav-niveau.est-visible{transform:translateX(0);}
    /* le niveau 0 recule d'un tiers pendant que le sous-niveau entre : le geste
       se lit comme un déplacement, pas comme une substitution */
    .bkg-nav-niveau[data-niveau="0"].est-reculee{transform:translateX(-34%);}
    .bkg-nav-niveau li{margin:0;padding:0;list-style:none;}

    /* même dessin pour un lien simple et pour un parent : seule l'action diffère */
    .bkg-nav-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;
      width:100%;min-height:52px;padding:12px 18px;color:#171B2A;font-family:Rubik,sans-serif;
      font-size:15.5px;font-weight:500;text-transform:uppercase;line-height:1.35;text-align:left;
      text-decoration:none;transition:background .2s ease,color .2s ease;}
    button.bkg-nav-ligne{border:0;background:none;cursor:pointer;}
    .bkg-nav-ligne:hover{color:#276AB2;}
    .bkg-nav-ligne.est-actif{color:#276AB2;}
    .bkg-nav-fleche{flex:0 0 auto;display:flex;align-items:center;color:#9aa1ac;
      transition:color .2s ease,transform .2s ease;}
    .bkg-nav-ligne:hover .bkg-nav-fleche{color:#276AB2;transform:translateX(2px);}

    .bkg-nav-retour{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;
      padding:12px 18px;border:0;border-bottom:1px solid #eef0f4;background:#F7F8FA;
      color:#7a828e;font-family:Rubik,sans-serif;font-size:13px;font-weight:600;
      letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:color .2s ease;}
    .bkg-nav-retour:hover{color:#276AB2;}
    .bkg-nav-parent{color:#276AB2;font-weight:600;border-bottom:1px solid #eef0f4;}

    .bkg-nav-pied{flex:0 0 auto;padding:16px 18px;border-top:1px solid #e5e8ee;background:#F7F8FA;}
    .bkg-nav-contact{display:block;padding:13px 20px;margin-bottom:14px;border-radius:30px;
      background:#276AB2;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;
      text-align:center;text-decoration:none;transition:background .3s ease;}
    .bkg-nav-contact:hover{background:#171B2A;color:#fff;}
    .bkg-nav-coord{display:flex;align-items:center;gap:9px;padding:5px 0;color:#54595F;
      font-size:13.5px;text-decoration:none;word-break:break-word;transition:color .2s ease;}
    .bkg-nav-coord:hover{color:#276AB2;}
    .bkg-nav-coord svg{flex:0 0 auto;color:#276AB2;}

    /* ================= bascule ========== */
    @media (max-width:1099px){
      html.bkg-nav-prete .bkg-nav-bureau{display:none;}
      html.bkg-nav-prete .bkg-nav-burger{display:inline-flex;}
      /* barre du haut : l'adresse e-mail ne tient pas, le téléphone reste
         appelable et le bouton Boutique reste visible. Elle est reprise en bas
         du panneau, où la place ne manque pas. */
      .bkg-topbar-vitrine .elementor-icon-list-item:nth-child(2){display:none;}

      /* --- barre principale sur une seule ligne ---
         Sous 768 px Elementor empile ses colonnes à 100 % : le logo occupait
         une rangée, le burger la suivante, et l'en-tête mangeait un quart de
         l'écran. On remet les deux colonnes côte à côte et on resserre les
         gouttières que le constructeur pose par défaut.

         DÉSIGNATION DE LA SECTION — le champ « Classes CSS » d'Elementor
         n'existe QUE pour les widgets et les colonnes (il est déclaré dans
         includes/widgets/common-base.php) : une classe posée sur une section
         est bien enregistrée, mais jamais rendue. On identifie donc la barre
         par ce qu'elle contient, avec :has(), et le script pose la classe en
         renfort pour les navigateurs qui ne le connaissent pas encore. */
      .bkg-barre-principale > .elementor-container,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container{flex-direction:row!important;
        flex-wrap:nowrap!important;align-items:center!important;}
      .bkg-barre-principale > .elementor-container > .elementor-column,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container > .elementor-column{width:auto!important;}
      /* Le logo garde sa largeur propre, c'est la colonne du menu qui absorbe le
         reste. L'inverse — colonne du logo en flex:1 — donnait une colonne de
         ZÉRO pixel : .elementor-widget-wrap est en width:100 %, un pourcentage
         qui ne résout rien dans une colonne dimensionnée par son contenu. Le
         logo ne tenait plus que par son débordement, et disparaissait dès qu'un
         ancêtre rognait. */
      .bkg-barre-principale > .elementor-container > .elementor-column:first-child,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container > .elementor-column:first-child{
        flex:0 0 auto;}
      .bkg-barre-principale > .elementor-container > .elementor-column:first-child .elementor-widget-wrap,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container > .elementor-column:first-child .elementor-widget-wrap{
        width:auto!important;}
      .bkg-barre-principale > .elementor-container > .elementor-column:last-child,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container > .elementor-column:last-child{
        flex:1 1 auto;min-width:0;}
      .bkg-barre-principale > .elementor-container > .elementor-column:last-child .elementor-widget-wrap,
      .elementor-inner-section:has(.bkg-nav) > .elementor-container > .elementor-column:last-child .elementor-widget-wrap{
        justify-content:flex-end;}
      .bkg-barre-principale .elementor-widget-wrap,
      .elementor-inner-section:has(.bkg-nav) .elementor-widget-wrap{padding:0!important;align-content:center;}
      .bkg-barre-principale .elementor-widget,
      .elementor-inner-section:has(.bkg-nav) .elementor-widget{margin:0!important;}
      .bkg-barre-principale .elementor-widget-image img,
      .elementor-inner-section:has(.bkg-nav) .elementor-widget-image img{width:96px!important;height:auto;}
    }
    @media (max-width:520px){
      /* on ne garde que le combiné : le numéro complet poussait le bouton hors écran */
      .bkg-topbar-vitrine .elementor-icon-list-text{display:none;}
      .bkg-topbar-vitrine .elementor-icon-list-icon{margin:0!important;}
      .bkg-barre-principale .elementor-widget-image img,
      .elementor-inner-section:has(.bkg-nav) .elementor-widget-image img{width:84px!important;}
      .bkg-nav-burger{width:40px;height:40px;}
    }
    /* sans JavaScript la barre horizontale reste servie : mieux vaut un menu
       serré qu'un burger qui n'ouvre rien */
    html:not(.bkg-nav-prete) .bkg-nav-burger{display:none;}

    @media (prefers-reduced-motion:reduce){
      .bkg-nav-panneau,.bkg-nav-niveau,.bkg-nav-fond,.bkg-nav-sous{transition-duration:.01ms;}
    }
    
    /* --- rangée de pictos de la section de tête ----------------------

       Les pictos chevauchent la bordure basse de l'image de tête, à toutes les
       largeurs — c'est le geste de l'original. Le débordement vaut 40 % de la
       hauteur du picto, comme les 50 px sur 125 du site de référence.

       QUATRE niveaux à neutraliser, pas deux. Elementor pose en position:relative
       le conteneur, la colonne, l'enveloppe de widgets ET chaque widget. Le bloc
       de référence d'un « bottom » est le premier ancêtre non-static en remontant :
       en n'ayant traité que le conteneur et la colonne, on laissait le widget HTML
       faire office de référence. Ce widget est une boîte de hauteur nulle posée
       juste sous le titre — les pictos venaient se coller au titre, au milieu de
       l'image. Les sélecteurs sont plus spécifiques que ceux d'Elementor pour ne
       pas dépendre de l'ordre de chargement des feuilles. */
    .elementor-section.bkg-hero{position:relative;overflow:visible;}
    .elementor-section.bkg-hero > .elementor-container,
    .bkg-hero .elementor-column,
    .bkg-hero .elementor-widget-wrap,
    .bkg-hero .elementor-widget,
    .bkg-hero .elementor-widget-container{position:static;}

    .bkg-hero .bkg-hero-badges{
      /* Une seule ligne, quelle que soit la page : les fiches vont de 5 pictos
         (références, services) à 8 (Monte-charge). Repliés, ils formeraient un
         pavé de deux rangées qui recouvrirait le fil d'Ariane. On garde donc la
         ligne et on laisse défiler à l'horizontale quand ça déborde. */
      position:absolute;
      left:0;
      right:0;
      bottom:calc(var(--picto) * -0.4);
      /* La section suivante est elle aussi en position:relative et vient plus bas
         dans le DOM : sans z-index elle repasserait par-dessus les pictos qui
         débordent chez elle. La valeur reste basse pour passer sous l'en-tête
         collant. */
      z-index:5;
      display:flex;
      align-items:center;
      flex-wrap:nowrap;
      margin:0;
      overflow-x:auto;
      /* « safe » évite la perte de contenu propre au centrage d'un conteneur
         défilant : centré tant que ça tient, aligné à gauche dès que ça déborde,
         donc jamais de picto inatteignable à gauche. La ligne sans « safe » sert
         de repli aux navigateurs qui l'ignorent. */
      justify-content:center;
      justify-content:safe center;
      scrollbar-width:none;
      -ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
    }
    .bkg-hero .bkg-hero-badges::-webkit-scrollbar{display:none;}
    .bkg-hero .bkg-hero-badges img{
      width:var(--picto);
      height:auto;
      flex:0 0 auto;
      /* box-shadow:none — Astra pose une ombre sur TOUTE image d'une page d'article
         seul (.ast-article-single img:not(figure img)). Les pictos sont des PNG
         transparents : l'ombre se dessinait sur la boîte de l'élément, donc en
         carré derrière le rond. Deux classes dans le sélecteur, pas une : la règle
         d'Astra vaut (1 classe, 3 éléments) grâce à son :not(figure img) et
         l'emportait sur un simple « .bkg-hero-badges img ». Le nombre de classes
         est comparé en premier, celui-ci passe donc devant sans !important. */
      box-shadow:none;
    }

    /* Mobile et tablette : 46 px de plancher, les 8 pictos de Monte-charge tiennent
       alors sur 430 px et ne demandent qu'un court défilement sur les écrans les
       plus étroits. Le débordement de 40 % reste sous les 40 px de blanc que la
       section suivante réserve en haut. */
    .bkg-hero .bkg-hero-badges{
      --picto:clamp(46px,13vw,78px);
      /* Réglé au plus juste : à 390 px, les 6 pictos de Monte-plat tiennent
         exactement dans la ligne. Un cran au-dessus et ils déclenchaient un
         défilement de 4 px, inutile et désagréable. */
      --picto-gap:clamp(6px,2.2vw,16px);
      gap:var(--picto-gap);
      padding:0 8px;
    }

    /* Galerie basique Elementor : la rangée réelle est la .gallery, enveloppée
       par .elementor-image-gallery. On rend l’enveloppe à sa largeur de contenu
       (la rangée reste centrée et défilable) et on remet la .gallery en ligne,
       sans les largeurs en pourcentage que la galerie donne à ses colonnes. */
    .bkg-hero .bkg-hero-badges .elementor-image-gallery{flex:0 0 auto;max-width:none;}
    .bkg-hero .bkg-hero-badges .gallery{
      display:flex;align-items:center;flex-wrap:nowrap;gap:var(--picto-gap);margin:0;}
    .bkg-hero .bkg-hero-badges .gallery .gallery-item{
      display:block;flex:0 0 auto;width:auto;max-width:none;margin:0;padding:0;}
    .bkg-hero .bkg-hero-badges .gallery-icon{line-height:0;}
    .bkg-hero .bkg-hero-badges .gallery br{display:none;}

    @media(min-width:992px){
      .bkg-hero .bkg-hero-badges{
        /* 125 px, la taille de l'original, dès 1360 px de large — c'est-à-dire sur
           l'écrasante majorité des postes. En dessous on réduit, sans quoi les
           8 pictos de Monte-charge (8 × 125 + 7 × 40 = 1 280 px) passeraient à la
           ligne. Le plancher à 74 px garde la rangée sur une seule ligne. */
        --picto:clamp(74px,9.2vw,125px);
        --picto-gap:clamp(10px,2.2vw,40px);
        padding:0;
      }
    }