/*
 Theme Name:     HERMITS for Divi
 Theme URI:      https://www.hermits.fr
 Author:         HERMITS — Manon Thiriet & Miguel Clémente
 Author URI:     https://www.hermits.fr
 Description:    Thème enfant Divi conçu et développé sur mesure pour la Verrerie de Biot par HERMITS (hermits.fr).
 Template:       Divi
 Version:        1.0
 License:        GNU General Public License v2 or later
 License URI:    https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:    divi-child
 Domain Path:    /languages
*/

/*
 * HERMITS for Divi — thème enfant du site de la Verrerie de Biot.
 *
 * Copyright © 2026 HERMITS — https://www.hermits.fr
 * Auteurs : Manon Thiriet & Miguel Clémente
 *
 * SPDX-License-Identifier: GPL-2.0-or-later
 *
 * Logiciel libre distribué selon les termes de la Licence Publique Générale GNU,
 * version 2 ou toute version ultérieure (voir le fichier LICENSE).
 * Les mentions de paternité et de copyright ci-dessus doivent être conservées
 * dans toute copie, modification ou œuvre dérivée : le droit moral des auteurs
 * est perpétuel, inaliénable et imprescriptible (art. L.121-1 du Code de la
 * propriété intellectuelle), et la conservation des notices est imposée par la GPL.
 */

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

/* ===========================================
   0. DESIGN TOKENS — palette Verrerie de Biot
   =========================================== */
:root {
  /* Couleurs déjà utilisées dans le site */
  --vdb-bordeaux:         #8B1A2B; /* swatch sélectionné, accents */
  --vdb-bordeaux-fonce:   #6B1F2C; /* header custom */
  --vdb-bordeaux-moyen:   #8A3D4C; /* hover menu mobile */
  --vdb-bleu-marine:      #002B3C; /* texte principal, boutons */
  --vdb-creme:            #FAF6F1; /* fond hover, fond clair */
  --vdb-beige-clair:      #F1E8D9;
  --vdb-beige-tres-clair: #FDFCFB;
  --vdb-bleu-ciel:        #D4EBF4;
  --vdb-rose-saumon:      #F3EBED;
  --vdb-creme-pale:       #F8F3EC; /* fond bouton CTA conclusion */
  --vdb-bordeaux-tres-fonce: #37181E; /* hover boutons wishlist */

  /* Largeurs de conteneur (utilisées par le template d'article) */
  --vdb-content-max-width: 1180px; /* sections wide : produits, patterns détail, galerie */
  --vdb-text-max-width:    823px;  /* largeur de lecture confortable pour paragraphes */
}

/* =====================================================================
   0bis. FIX — Panneau filtres PLP (BeRocket) passe au-dessus du menu Divi
   =====================================================================
   Sur les pages catégorie produits, le panneau latéral filtres
   (.et_pb_section--fixed, z-index:99999) est piégé dans un
   .et_builder_inner_content (z-index:1) ; le row du menu Divi du header
   (.et_pb_row_0_tb_header) est à z-index:999 dans le stacking root.
   Résultat : le menu passait devant le panneau ouvert.
   Fix : remonter le wrapper qui contient la section fixed au-dessus de 999. */
.et-l--body > .et_builder_inner_content:has(> .et_pb_section--fixed) {
  z-index: 9999;
}

/* ===========================================
   1. MENU MOBILE — items parents et sous-menus
   =========================================== */
/* Hover - rouge */
#et-boc .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li a:hover,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li a:hover {
  color: #8a3d4c !important;
}

/* Lien actif */
#et-boc .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current-menu-item > a,
#et-boc .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current_page_item > a,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current-menu-item > a,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current_page_item > a {
  color: #8a3d4c !important;
}

/* Idem pour les sous-menus */
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .sub-menu li a:hover,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .sub-menu li.current-menu-item > a {
  color: #8a3d4c !important;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    position: relative;
}

/* Icône + à droite des items parents */
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after,
#main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    content: '\4c';
    font-size: 18px;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    speak: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 11px;
    right: 13px;
}

/* Icône - quand sous-menu déplié */
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

/* Sous-menus cachés par défaut */
.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}

/* Sous-menus visibles quand parent ouvert */
.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

/* Typographie : tous les items en poids medium */
.et_pb_menu .et_mobile_menu li > a,
#main-header .et_mobile_menu li > a {
    font-weight: 500 !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Interactions tap/hover/active : fond beige + texte bordeaux */
.et_pb_menu .et_mobile_menu li > a:hover,
.et_pb_menu .et_mobile_menu li > a:active,
#main-header .et_mobile_menu li > a:hover,
#main-header .et_mobile_menu li > a:active {
    background-color: #FAF6F1 !important;
    color: #8a3d4c !important;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a:hover:after,
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:active:after,
#main-header .et_mobile_menu .menu-item-has-children > a:hover:after,
#main-header .et_mobile_menu .menu-item-has-children > a:active:after {
    color: #8a3d4c !important;
}

/* Annuler le focus persistant après tap mobile */
.et_pb_menu .et_mobile_menu li > a:focus,
#main-header .et_mobile_menu li > a:focus {
    background-color: transparent !important;
    color: inherit !important;
}

/* Parent avec sous-menu déplié : état actif persistant */
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a,
#main-header .et_mobile_menu .menu-item-has-children.visible > a {
    background-color: #FAF6F1 !important;
    color: #8a3d4c !important;
    font-weight: 500 !important;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    color: #8a3d4c !important;
}

/* Lignes de séparation pleine largeur (mobile uniquement) */
@media (max-width: 980px) {
    .et_pb_menu .et_mobile_menu li,
    #main-header .et_mobile_menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .et_pb_menu .et_mobile_menu,
    #main-header .et_mobile_menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .et_pb_menu .et_mobile_menu li > a,
    #main-header .et_mobile_menu li > a {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .et_pb_menu .et_mobile_menu > li:last-child,
    #main-header .et_mobile_menu > li:last-child {
        border-bottom: none !important;
    }
}

/* Item "Visiter" mis en avant */
.et_pb_menu .et_mobile_menu .menu-item-highlight > a,
#main-header .et_mobile_menu .menu-item-highlight > a {
    background-color: #FAF6F1 !important;
    font-weight: 500 !important;
}

.et_pb_menu .et_mobile_menu .menu-item-highlight > a:hover,
.et_pb_menu .et_mobile_menu .menu-item-highlight > a:active,
#main-header .et_mobile_menu .menu-item-highlight > a:hover,
#main-header .et_mobile_menu .menu-item-highlight > a:active {
    background-color: #F1E8D9 !important;
    color: #8a3d4c !important;
}

/* Zone utilitaire (compte) */
.et_pb_menu .et_mobile_menu .menu-item-account,
#main-header .et_mobile_menu .menu-item-account {
    margin-top: 16px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.et_pb_menu .et_mobile_menu .menu-item-account > a,
#main-header .et_mobile_menu .menu-item-account > a {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #8A3D4C !important;
}

.et_pb_menu .et_mobile_menu .menu-item-account > a:hover,
.et_pb_menu .et_mobile_menu .menu-item-account > a:active,
#main-header .et_mobile_menu .menu-item-account > a:hover,
#main-header .et_mobile_menu .menu-item-account > a:active {
    color: #8a3d4c !important;
    background-color: #FAF6F1 !important;
}

/* Sélecteur de langue WPML */
.et_pb_menu .et_mobile_menu .menu-item-languages,
#main-header .et_mobile_menu .menu-item-languages {
    padding: 12px 24px !important;
    border-bottom: none !important;
    border-top: none !important;
    margin-top: 0 !important;
}

.et_pb_menu .et_mobile_menu .menu-item-languages > a,
#main-header .et_mobile_menu .menu-item-languages > a {
    display: none !important;
}

.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls,
.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls ul,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
}

.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls li,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: inline-flex !important;
}

.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls a,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls a {
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6a6a6a !important;
    background: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 2px !important;
    transition: all 0.2s ease;
}

.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls a:hover,
.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls a:active,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls a:hover,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls a:active {
    color: #8a3d4c !important;
    background-color: #FAF6F1 !important;
}

.et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls .wpml-ls-current-language a,
#main-header .et_mobile_menu .menu-item-languages .wpml-ls .wpml-ls-current-language a {
    color: #8a3d4c !important;
    font-weight: 600 !important;
}

.et_mobile_menu .wpml-ls-statics-shortcode_actions,
.et_mobile_menu .wpml-ls-statics-shortcode_actions ul,
.et_mobile_menu .wpml-ls-statics-shortcode_actions li {
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

.et_mobile_menu .wpml-ls-statics-shortcode_actions .wpml-ls-link {
  padding-left: 0 !important;
}

/* FR / EN sur une seule ligne dans le menu mobile.
   Le Custom CSS Divi force le conteneur/ul/li en display:block via
   #et-boc .et_pb_menu .et_mobile_menu … .wpml-ls.wpml-ls-statics-shortcode_actions
   (spécificité (1,5,0) !important) → FR et EN s'empilent. On le bat avec une
   spécificité supérieure (1,6,0 : on ajoute la classe .wpml-ls-legacy-list-horizontal). */
#et-boc .et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls.wpml-ls-statics-shortcode_actions.wpml-ls-legacy-list-horizontal,
#et-boc .et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls.wpml-ls-statics-shortcode_actions.wpml-ls-legacy-list-horizontal ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
}
#et-boc .et_pb_menu .et_mobile_menu .menu-item-languages .wpml-ls.wpml-ls-statics-shortcode_actions.wpml-ls-legacy-list-horizontal li {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Cale le menu mobile pile sous la navbar */
@media (max-width: 980px) {
  .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
    top: 77px !important;
  }
}

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
  scrollbar-gutter: stable !important;
}

.et-l--header .et_pb_link,
.et-l--header [class*="et-interaction-trigger"] {
  cursor: pointer;
}

/* ===========================================
   2. HEADER ICÔNES (recherche, panier, compte)
   =========================================== */
.vdb-header-icons {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}
.vdb-header-icons .vdb-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    /* !important : les icônes Panier/Wishlist/Compte sont des <a> ; sans ça,
       la couleur de lien globale Divi (.et-db #et-boc .et-l a → var(--gcid-link-color,#8a3d4c))
       les repasse en bordeaux sur certains templates (ex. PLP catégories produit). */
    color: #002b3c !important;      /* bleu marine — couleur de repos cohérente */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
}
.vdb-header-icons .vdb-icon:hover { color: #8a3d4c !important; opacity: 1 !important; }  /* bordeaux au survol */
.vdb-header-icons .vdb-icon svg { width: 100%; height: 100%; display: block; }

/* ===========================================
   2bis. SÉLECTEUR DE LANGUE WPML — couleur cohérente sur tout le site
   Les réglages WPML (#002b3c repos / #8a3d4c hover) sont écrasés par un Custom CSS
   Divi attaché au module du sélecteur dans le Theme Builder Header (header global) :
       .wpml-ls-statics-shortcode_actions a { color:#6B1F2C !important }
   On rétablit les bonnes couleurs avec une spécificité supérieure (préfixe
   .et-l--header → bat le !important de Divi). Le mode transparent de la home
   (bloc 11) garde la priorité grâce à sa spécificité body.home plus élevée.
   =========================================== */
.et-l--header .wpml-ls-statics-shortcode_actions a {
    color: #002b3c !important;
}
.et-l--header .wpml-ls-statics-shortcode_actions a:hover {
    color: #8a3d4c !important;
    opacity: 1 !important;
}

/* Badge panier */
.vdb-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #6B1F2C;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    font-family: inherit;
}
.vdb-cart-count.is-empty { display: none; }

/* Badge wishlist (mêmes specs que le panier) */
.vdb-wishlist-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #6B1F2C;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    font-family: inherit;
}
/* Masque le badge si vide (rendu PHP) OU si le JS du plugin TI vide le span (hide_zero_counter) */
.vdb-wishlist-count.is-empty,
.vdb-wishlist-count:empty { display: none; }

/* Overlay recherche */
.vdb-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.98);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vdb-search-overlay.is-open { opacity: 1; visibility: visible; }
body .vdb-search-overlay { z-index: 999999 !important; }

.vdb-search-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    font-size: 36px;
    color: #6B1F2C;
    cursor: pointer;
    line-height: 1;
}
.vdb-search-form {
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #6B1F2C;
    padding-bottom: 12px;
}
.vdb-search-form input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #6B1F2C;
    font-family: inherit;
    outline: none;
}
.vdb-search-form input[type="search"]::placeholder { color: #6B1F2C; opacity: .5; }
.vdb-search-form button {
    background: none;
    border: none;
    cursor: pointer;
    color: #6B1F2C;
    width: 28px;
    height: 28px;
}

/* === Mobile (≤ 980px) === */
@media (max-width: 980px) {
    .vdb-header-icons { gap: 16px; }

    /* classe dédiée : le RUCSS de WP Rocket jette les sélecteurs d'attribut à valeur */
    .vdb-header-icons .vdb-icon-account {
        display: none !important;
    }

    /* Menu mobile en plein écran */
    .et_pb_menu .et_mobile_menu {
        position: fixed !important;
        top: 90px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 30px 20px !important;
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        z-index: 9998 !important;
    }
    .et_pb_menu .et_mobile_menu li {
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
    .et_pb_menu .et_mobile_menu li a {
        display: block !important;
        padding: 18px 0 !important;
        font-size: 16px !important;
        text-align: left !important;
        white-space: normal !important;
    }
}

/* ===========================================
   3. FILTRE COULEUR BEROCKET — 2 colonnes adaptatives
   =========================================== */
/* Grille 2 colonnes sur le <ul> interne UNIQUEMENT — surtout pas sur .bapf_body :
   BeRocket ferme l'accordéon via slideUp()/hide() (display:none inline) et un
   display:grid !important figé sur .bapf_body empêcherait le repli (cf. 2026-06-19). */
.filter-colors-2cols .bapf_body > ul,
.filter-colors-2cols ul.bapf_body,
.filter-colors-2cols ul.berocket_aapf_widget {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    column-gap: 32px;
    row-gap: 0px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.filter-colors-2cols .bapf_body li,
.filter-colors-2cols ul.bapf_body li,
.filter-colors-2cols ul.berocket_aapf_widget > li {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.filter-colors-2cols .bapf_body li label,
.filter-colors-2cols ul.berocket_aapf_widget > li label {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.filter-colors-2cols .bapf_body li img,
.filter-colors-2cols ul.berocket_aapf_widget > li img,
.filter-colors-2cols .bapf_body li .bapf_color {
    flex-shrink: 0;
    margin-right: 8px;
}

/* --- État sélectionné / survol / focus des swatchs couleur --- */
.filter-colors-2cols .bapf_body li {
    position: relative;
}

.filter-colors-2cols .bapf_body li label {
    cursor: pointer;
}

.filter-colors-2cols .bapf_body li .bapf_img_span {
    overflow: visible; /* laisse déborder le badge coche (le plugin met hidden) */
    border-radius: 3px;
    transition: transform .15s ease, box-shadow .15s ease; /* écrase le delay .1s du plugin */
}

.filter-colors-2cols .bapf_body li .bapf_clr_text {
    transition: color .15s ease;
}

@media (hover: hover) {
    .filter-colors-2cols .bapf_body li label:hover .bapf_img_span {
        transform: scale(1.06);
    }
    .filter-colors-2cols .bapf_body li label:hover .bapf_clr_text {
        color: #8a3d4c;
    }
}

/* Coché : anneau bordeaux autour de la photo + badge coche + nom en semi-gras */
.filter-colors-2cols .bapf_body li input:checked + label .bapf_img_span {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8a3d4c;
}

.filter-colors-2cols .bapf_body li input:checked + label .bapf_clr_span_abslt::after {
    content: "";
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #8a3d4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}

.filter-colors-2cols .bapf_body li input:checked + label .bapf_clr_text {
    color: #8a3d4c;
    font-weight: 600;
}

/* Accessibilité clavier : la case redevient focusable mais reste invisible
   (le plugin la met en display:none inline → infocusable) */
.filter-colors-2cols .bapf_body li input[type="checkbox"] {
    display: inline-block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Après la règle "coché" pour gagner à spécificité égale : anneau bleu au focus clavier */
.filter-colors-2cols .bapf_body li input:focus-visible + label .bapf_img_span {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #002B3C;
}

@media (prefers-reduced-motion: reduce) {
    .filter-colors-2cols .bapf_body li .bapf_img_span,
    .filter-colors-2cols .bapf_body li .bapf_clr_text {
        transition: none;
    }
    .filter-colors-2cols .bapf_body li label:hover .bapf_img_span {
        transform: none;
    }
}

/* ===========================================
   4. BOUTONS FILTRER / EFFACER
   =========================================== */
.biot-filter-btns button {
    background-color: #8a3d4c !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 0px !important;
}

.biot-filter-btns button:hover {
    background-color: #6f3140 !important;
    color: #fff !important;
}

/* Titres des widgets BeRocket — Couleur / Prix */
.bapf_sfilter > h3,
.bapf_sfilter .bapf_head,
.bapf_sfilter .bapf_head h3,
.berocket_aapf_widget_title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
    color: #002B3C !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

/* ===========================================
   5. TRI WOOCOMMERCE stylé comme un bouton
   =========================================== */
/* Cache le tri WC original sur la page shop */
.woocommerce-ordering:not(.biot-sort-button .woocommerce-ordering) {
    display: none !important;
}

.woocommerce-ordering {
    margin: 0 !important;
    float: none !important;
}

.woocommerce-ordering select.orderby {
    background-color: #f8f3ec !important;
    color: #002B3C !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.5 !important;
    padding: 12px 46px 11px 24px !important;
    height: auto !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002B3C' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
}

.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
    background-color: #8a3d4c !important;
    color: #fff !important;
    outline: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* ===========================================
   6. BLOG INSPIRATIONS — Onglets catégories actifs
   =========================================== */
.biot-blog-tabs .is-active-tab,
.biot-blog-tabs .is-active-tab a,
.biot-blog-tabs a.is-active,
.biot-blog-tabs .is-active-tab .et_pb_module_inner {
    background-color: #8a3d4c !important;
    color: #ffffff !important;
}

.biot-blog-tabs .is-active-tab *,
.biot-blog-tabs a.is-active * {
    color: #ffffff !important;
}

/* ===========================================
   7. MODULE BLOG INSPIRATIONS — Articles
   Ordre : Image → Catégories → Titre → Extrait
   =========================================== */
.biot-inspirations-blog .et_pb_post {
    display: flex !important;
    flex-direction: column;
}

/* 1. Image */
.biot-inspirations-blog .et_pb_post .entry-featured-image-url,
.biot-inspirations-blog .et_pb_post .et_pb_image_container {
    order: 1;
    margin-bottom: 0 !important;
}

/* 2. Conteneur catégories — DOUBLON FUSIONNÉ ICI */
.biot-inspirations-blog .et_pb_post .post-meta {
    order: 2;
    align-self: flex-start !important;
    width: auto !important;
    background: transparent !important;
    margin: 16px 0 28px 0 !important;
    padding: 0 !important;
    font-size: 0 !important; /* Masque les virgules entre catégories */
}

/* 2bis. Style des badges catégories — DOUBLON FUSIONNÉ ICI */
.biot-inspirations-blog .et_pb_post .post-meta a {
    display: inline-block !important;
    background-color: #D4EBF4 !important;
    color: #1a3a52 !important;
    padding: 10px 10px !important;
    font-size: 12px !important; /* Réaffiche le texte (le parent est en 0) */
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    margin-right: 8px;
    text-decoration: none !important;
}

.biot-inspirations-blog .et_pb_post .post-meta a:last-child {
    margin-right: 0;
}

.biot-inspirations-blog .et_pb_post .post-meta a:hover {
    background-color: #b8dcec !important;
}

/* 3. Titre */
.biot-inspirations-blog .et_pb_post .entry-title,
.biot-inspirations-blog .et_pb_post h2.entry-title {
    order: 3;
    margin-top: 0 !important;
}

/* 4. Extrait */
.biot-inspirations-blog .et_pb_post .post-content {
    order: 4;
}

/* 5. Lire la suite */
.biot-inspirations-blog .et_pb_post .more-link {
    order: 5;
}

/* ===========================================
   8. BADGES PRODUITS WOOCOMMERCE (PISCINE, etc.)
   =========================================== */
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

.biot-product-label {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background-color: #D4EBF4;
    color: #1a3a52 !important;
    padding: 6px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: none;
}

/* Variante Piscine (extensible pour d'autres catégories) */
.biot-label-piscine {
    /* Personnaliser ici si besoin */
}

/* PLP : supprime le filet gris 1px que Divi Theme Builder met sur .et_overlay
   des cards produits (visible quand l'image a un border-radius au hover) */
.et_overlay {
    border: none !important;
}

/* ===========================================
   9. CANVA OVERLAY FILTRES — Fix z-index
   =========================================== */
.et_pb_section--fixed {
    z-index: 999999 !important;
}

/* Fix : WC ajoute z-index:1 sur .et_builder_inner_content de la page Shop,
   ce qui crée un stacking context piégeant le canva offcanvas sous la nav.
   On annule pour libérer le canva. */
body.woocommerce-shop .et_builder_inner_content {
    z-index: auto !important;
}

/* ===========================================
   10. MEGA-MENUS — Overlay automatique
   S'adapte à la hauteur de chaque menu et au scroll
   =========================================== */
/* ⚠️ Ajuste le sélecteur ci-dessous selon les classes de tes mega-menus.
   Exemples courants : [class*="mega-menu"], .biot-mega-menu, .et_pb_menu_mega... */
[class*="mega-menu"]::after {
    content: '';
    position: absolute;
    top: 100%;                          /* commence pile à la fin du menu */
    left: 0;
    right: 0;
    height: 100vh;                      /* couvre tout l'écran en dessous */
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;               /* ou "auto" si tu veux que le clic ferme */
    z-index: 1;
}

/* ===========================================
   11. HOMEPAGE — Navbar transparente (desktop only)
   FR + EN (body.home, ajouté par WordPress)
   Header = Divi Theme Builder → .et_pb_section_0_tb_header
   Menu = modules Link Divi (.et_pb_link_*_tb_header)
   CTA = module Button Divi (.et_pb_button_0_tb_header)
   Spécificité alignée sur Divi (toutes en !important)
   =========================================== */
@media (min-width: 981px) {

    /* === Faire passer le header AU-DESSUS de la section hero (qui a margin-top: -115px)
       Sans ça, le hero (peint après dans le DOM) couvre la section du header — donc le
       fond blanc au hover serait invisible, masqué par la photo du hero qui passe par-dessus. */
    body.home .et-l--header {
        position: relative;
        z-index: 100;
    }

    /* === Fond du header transparent === */
    body.home .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header {
        background-color: transparent !important;
        box-shadow: none !important;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* === Logo SVG rendu blanc via filter === */
    body.home .et_pb_image_0_tb_header img {
        filter: brightness(0) invert(1);
        transition: filter 0.3s ease;
    }

    /* === Liens du menu (modules Link Divi + leurs spans internes) === */
    body.home .et_pb_section_0_tb_header .et_pb_link,
    body.home .et_pb_section_0_tb_header .et_pb_link .et_pb_link_inner,
    body.home .et_pb_section_0_tb_header .et_pb_link .et_pb_link_text {
        color: #fff !important;
        transition: color 0.3s ease;
    }

    /* === Sélecteur de langue WPML === */
    body.home .et_pb_section_0_tb_header .wpml-ls a,
    body.home .et_pb_section_0_tb_header .wpml-ls a span {
        color: #fff !important;
        transition: color 0.3s ease;
    }

    /* === Icônes header (panier, compte, recherche) === */
    body.home .et_pb_section_0_tb_header .vdb-header-icons .vdb-icon {
        color: #fff !important;
        transition: color 0.3s ease;
    }

    /* === Bouton CTA "visiter" — effet glass (fond translucide + backdrop-filter) === */
    body.home #page-container .et_pb_section .et_pb_button_0_tb_header,
    body.home .et_pb_section_0_tb_header .et_pb_button_0_tb_header {
        background-color: var(--Opacity-White-10, rgba(255, 255, 255, 0.10)) !important;
        color: #fff !important;
        border: 1px solid #fff !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    }

    body.home .et_pb_section_0_tb_header .et_pb_button_0_tb_header .et_pb_button_text {
        color: #fff !important;
    }

    /* ============================================
       Retour à l'état d'origine — déclenché par :
       (a) hover natif sur la navbar
       (b) mega menu ouvert (.mega-menu.et_had_animation) — Divi 5 ajoute cette classe
           sur le canvas/mega menu actuellement visible et la retire à la fermeture.
       On garde la navbar blanche tant que l'utilisateur navigue dans un mega menu
       (sinon elle redeviendrait transparente dès que la souris quitte le header).
       ============================================ */

    /* Fond blanc d'origine — on applique le bg sur TOUS les conteneurs du header
       (<header>, .et_builder_inner_content, .et_pb_section_0_tb_header) avec plusieurs
       déclencheurs de hover, pour garantir que le bg blanc soit visible quel que soit
       l'élément qui couvre visuellement la zone. */
    body.home #page-container .et-l--header:hover,
    body.home #page-container .et-l--header:hover .et_builder_inner_content,
    body.home #page-container .et-l--header:hover .et_pb_section.et_pb_section_0_tb_header,
    body.home #page-container .et_pb_section.et_pb_section_0_tb_header:hover,
    body.home:has(.mega-menu.et_had_animation) #page-container .et-l--header,
    body.home:has(.mega-menu.et_had_animation) #page-container .et-l--header .et_builder_inner_content,
    body.home:has(.mega-menu.et_had_animation) #page-container .et-l--header .et_pb_section.et_pb_section_0_tb_header {
        background-color: #FDFCFB !important;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
    }

    /* Logo couleur d'origine */
    body.home .et-l--header:hover .et_pb_image_0_tb_header img,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_image_0_tb_header img {
        filter: none;
    }

    /* Liens du menu — couleur d'origine (bleu marine #002b3c)
       Note : le <a> parent a color bordeaux par défaut, mais le span .et_pb_link_text
       (qui contient le texte visible) a sa propre couleur bleu marine — c'est elle qu'on voit. */
    body.home .et-l--header:hover .et_pb_section_0_tb_header .et_pb_link,
    body.home .et-l--header:hover .et_pb_section_0_tb_header .et_pb_link .et_pb_link_inner,
    body.home .et-l--header:hover .et_pb_section_0_tb_header .et_pb_link .et_pb_link_text,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .et_pb_link,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .et_pb_link .et_pb_link_inner,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .et_pb_link .et_pb_link_text {
        color: rgb(0, 43, 60) !important;
    }

    /* WPML — couleur d'origine (bleu marine) */
    body.home .et-l--header:hover .et_pb_section_0_tb_header .wpml-ls a,
    body.home .et-l--header:hover .et_pb_section_0_tb_header .wpml-ls a span,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .wpml-ls a,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .wpml-ls a span {
        color: rgb(0, 43, 60) !important;
    }

    /* Survol d'une langue précise (header déjà blanc) → bordeaux #8a3d4c */
    body.home .et-l--header:hover .et_pb_section_0_tb_header .wpml-ls a:hover,
    body.home .et-l--header:hover .et_pb_section_0_tb_header .wpml-ls a:hover span {
        color: #8a3d4c !important;
    }

    /* Icônes — bleu marine (#002b3c) quand le header redevient blanc */
    body.home .et-l--header:hover .et_pb_section_0_tb_header .vdb-header-icons .vdb-icon,
    body.home:has(.mega-menu.et_had_animation) .et-l--header .et_pb_section_0_tb_header .vdb-header-icons .vdb-icon {
        color: #002b3c !important;
    }

    /* Survol d'une icône précise (header déjà blanc) → bordeaux #8a3d4c */
    body.home .et-l--header:hover .et_pb_section_0_tb_header .vdb-header-icons .vdb-icon:hover {
        color: #8a3d4c !important;
        opacity: 1 !important;
    }

    /* Bouton CTA — état d'origine au hover navbar (fond beige, texte bleu marine, SANS contour)
       On désactive aussi le backdrop-filter (effet glass) : le bouton revient en mode opaque */
    body.home #page-container .et-l--header:hover .et_pb_button_0_tb_header,
    body.home:has(.mega-menu.et_had_animation) #page-container .et-l--header .et_pb_button_0_tb_header {
        background-color: rgb(248, 243, 236) !important;
        color: rgb(0, 43, 60) !important;
        border-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.home #page-container .et-l--header:hover .et_pb_button_0_tb_header .et_pb_button_text,
    body.home:has(.mega-menu.et_had_animation) #page-container .et-l--header .et_pb_button_0_tb_header .et_pb_button_text {
        color: rgb(0, 43, 60) !important;
    }

    /* Hover navbar + hover bouton → état hover natif du bouton (bordeaux)
       Spécificité supérieure (:hover supplémentaire) pour écraser la règle ci-dessus
       et restaurer le comportement Divi normal du bouton */
    body.home #page-container .et-l--header:hover .et_pb_button_0_tb_header:hover {
        background-color: var(--gcid-link-color) !important;
        color: var(--gcid-a6qbnrzv91, #fff) !important;
        border-color: transparent !important;
    }

    body.home #page-container .et-l--header:hover .et_pb_button_0_tb_header:hover .et_pb_button_text {
        color: var(--gcid-a6qbnrzv91, #fff) !important;
    }

    /* === Remontée du hero sous le header transparent (115px de hauteur) === */
    body.home #main-content .et_pb_section:first-of-type {
        margin-top: -115px;
    }
}

/* =========================================================
   Troncature description SEO catégories produit (WooCommerce)
   Cible : module texte Divi avec la classe custom .biot-cat-seo.
   Affiche ~3 lignes ; bouton "… Lire plus" injecté en JS, inline
   bas-droite sur la dernière ligne avec fondu horizontal.
   Le texte complet reste dans le DOM (overflow: hidden) pour le SEO.
   ========================================================= */
.biot-cat-seo {
    --biot-fade-bg: #f8f3ec; /* fallback ; surchargé par JS depuis le bg réel */
    position: relative; /* ancre du bouton absolu */
}

.biot-cat-seo .et_pb_text_inner {
    max-height: 4.8em; /* ~3 lignes selon line-height */
    overflow: hidden;
    transition: max-height 0.45s ease;
}

.biot-cat-seo .biot-readmore-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 0 0 3em;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0,
        var(--biot-fade-bg) 2em,
        var(--biot-fade-bg) 100%
    );
    border: 0;
    color: #8a3d4c;
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.biot-cat-seo .biot-readmore-toggle::before {
    content: "… ";
}

.biot-cat-seo .biot-readmore-toggle:hover,
.biot-cat-seo .biot-readmore-toggle:focus-visible {
    color: #6f3140;
    text-decoration: underline;
    outline: none;
}

/* État déplié : on enlève la troncature et on remet le bouton dans le flow */
.biot-cat-seo.is-expanded {
    row-gap: 0; /* annule le gap flex Divi qui éloignerait le bouton du texte */
}

.biot-cat-seo.is-expanded .et_pb_text_inner {
    max-height: 200em;
}

.biot-cat-seo.is-expanded .biot-readmore-toggle {
    position: static;
    margin-top: 0.6em;
    padding: 0;
    background: none;
    text-align: left; /* contre le text-align:center natif du <button> */
}

.biot-cat-seo.is-expanded .biot-readmore-toggle::before {
    content: "";
}
/* =========================================================
   WISHLIST — boutons d'action (TI WooCommerce Wishlist)
   =========================================================
   Cible tous les boutons à l'intérieur du wrapper .tinv-wishlist :
   - "Add to Cart" / "Choix des options" (par ligne produit)
   - "Add Selected to Cart" / "Add All to Cart" (actions globales)
   - "Appliquer Action" (groupe d'actions select + bouton)
*/
.tinv-wishlist .button,
.tinv-wishlist a.button,
.tinv-wishlist a.button.alt,
.tinv-wishlist button.button,
.tinv-wishlist button.button.alt,
.tinv-wishlist input[type="submit"].button {
  background-color: var(--vdb-bordeaux-moyen) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap; /* empêche le wrap qui rendait le padding "élastique" entre boutons */
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.tinv-wishlist .button:hover,
.tinv-wishlist .button:focus,
.tinv-wishlist a.button:hover,
.tinv-wishlist a.button:focus,
.tinv-wishlist a.button.alt:hover,
.tinv-wishlist a.button.alt:focus,
.tinv-wishlist button.button:hover,
.tinv-wishlist button.button:focus,
.tinv-wishlist button.button.alt:hover,
.tinv-wishlist button.button.alt:focus,
.tinv-wishlist input[type="submit"].button:hover,
.tinv-wishlist input[type="submit"].button:focus {
  background-color: var(--vdb-bordeaux-tres-fonce) !important;
  color: #fff !important;
}

/* Neutralise le chevron Divi (ETmodules) injecté via ::after sur les boutons WooCommerce. */
.tinv-wishlist .button::before,
.tinv-wishlist .button::after,
.tinv-wishlist .button:hover::before,
.tinv-wishlist .button:hover::after,
.tinv-wishlist .button:focus::before,
.tinv-wishlist .button:focus::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   COMMANDE — boutons d'action (order-received / order-pay)
   =========================================================
   Mêmes specs que les boutons wishlist ci-dessus :
   - "Payer" (a.button.pay.order-actions-button)      → bordeaux
   - "Annuler" (a.button.cancel.order-actions-button) → noir
   - "Vérifier" (form.woocommerce-verify-email)       → bordeaux
*/
a.woocommerce-button.order-actions-button,
form.woocommerce-verify-email button.woocommerce-button.button {
  display: inline-block;
  background-color: var(--vdb-bordeaux-moyen) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

a.woocommerce-button.order-actions-button:hover,
a.woocommerce-button.order-actions-button:focus,
form.woocommerce-verify-email button.woocommerce-button.button:hover,
form.woocommerce-verify-email button.woocommerce-button.button:focus {
  background-color: var(--vdb-bordeaux-tres-fonce) !important;
  color: #fff !important;
}

/* "Annuler" : noir au repos, bordeaux au survol */
a.woocommerce-button.cancel.order-actions-button {
  background-color: var(--vdb-bordeaux-tres-fonce) !important;
}

a.woocommerce-button.cancel.order-actions-button:hover,
a.woocommerce-button.cancel.order-actions-button:focus {
  background-color: var(--vdb-bordeaux-moyen) !important;
}

/* Respiration entre "Payer" et "Annuler" */
a.woocommerce-button.order-actions-button + a.woocommerce-button.order-actions-button {
  margin-left: 12px;
}

/* Neutralise le chevron Divi (ETmodules) injecté via ::before / ::after. */
a.woocommerce-button.order-actions-button::before,
a.woocommerce-button.order-actions-button::after,
a.woocommerce-button.order-actions-button:hover::before,
a.woocommerce-button.order-actions-button:hover::after,
form.woocommerce-verify-email button.woocommerce-button.button::before,
form.woocommerce-verify-email button.woocommerce-button.button::after,
form.woocommerce-verify-email button.woocommerce-button.button:hover::before,
form.woocommerce-verify-email button.woocommerce-button.button:hover::after {
  content: none !important;
  display: none !important;
}

/* ===========================================
   Bouton "Voir le panier" du message WooCommerce (après ajout au panier).
   Repos : fond crème #f8f3ec / texte noir #37181e.
   Hover : inversion → fond noir #37181e / texte crème #f8f3ec.
   Sans chevron (on neutralise le ::after de Divi / ETmodules).
   =========================================== */
.woocommerce-message a.button.wc-forward {
  background-color: var(--vdb-creme-pale) !important;        /* #f8f3ec */
  color: var(--vdb-bordeaux-tres-fonce) !important;          /* #37181e */
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  /* padding figé : Divi élargit padding-right à 2em au hover pour loger le
     chevron → décalait le texte. On le verrouille pour garder le texte centré. */
  padding: 6px 20px !important;
  transition: background-color .2s ease, color .2s ease !important;
}

.woocommerce-message a.button.wc-forward:hover,
.woocommerce-message a.button.wc-forward:focus {
  background-color: var(--vdb-bordeaux-tres-fonce) !important; /* #37181e */
  color: var(--vdb-creme-pale) !important;                     /* #f8f3ec */
  padding: 6px 20px !important;                                /* identique au repos : pas de décalage */
}

.woocommerce-message a.button.wc-forward::before,
.woocommerce-message a.button.wc-forward::after {
  content: none !important;
  display: none !important;
}

/* Masquer le H1 du thème Divi (entry-title) sur les pages qui contiennent
   la wishlist : le plugin TInvWL ré-imprime déjà son propre titre "Wishlist". */
body:has(.tinv-wishlist) h1.entry-title {
  display: none;
}

/* Wishlist vide : le bouton "Continuer mes achats" (p.return-to-shop) a
   margin:0 et collait au bas du conteneur / au footer. On rajoute une
   respiration sous le bouton. Ciblé sur .tinv-wishlist pour ne pas toucher
   le même markup .return-to-shop du panier vide WooCommerce. */
.tinv-wishlist p.return-to-shop {
  margin-bottom: 50px;
}

/* =========================================================
   FICHE PRODUIT — bouton "Ajouter aux favoris" (TI WooCommerce Wishlist)
   =========================================================
   Cible le lien .tinvwl_add_to_wishlist_button placé après le bouton
   "Ajouter au panier" (wrapper .tinvwl-after-add-to-cart).
   Objectif : même gabarit que le bouton "Ajouter au panier" (block, pleine
   largeur, Montserrat 500, typo clampée 14→16px, letter-spacing 0.12em,
   padding vertical 0.3em, uppercase, centré, sans arrondi) mais en version crème.
   IMPORTANT : font-size / letter-spacing / padding vertical sont en valeurs
   RELATIVES (clamp + em) pour suivre exactement la même courbe responsive que
   le bouton "Ajouter au panier" (sinon le favoris restait figé à 16px et
   paraissait plus grand que le panier en mobile).
   Repos  : fond crème #f8f3ec / texte + icône bordeaux très foncé #37181e.
   Hover  : inversion → fond #37181e / texte + icône crème #f8f3ec.
   NB : préfixe #main-content nécessaire pour battre les règles Divi à ID
   qui imposent la couleur de lien (#main-content a … !important).
   On conserve l'icône cœur (::before en police tinvwl-webfont). */
#main-content .tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box;
  background-color: var(--vdb-creme-pale) !important;          /* #f8f3ec */
  color: var(--vdb-bordeaux-tres-fonce) !important;            /* #37181e */
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.3em 16px !important;   /* vertical 0.3em = suit la typo, comme "Ajouter au panier" (≈4.8px @16px) */
  margin: 20px 0 0 !important;      /* même espacement que le margin-top du bouton "Ajouter au panier" */
  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
  font-size: clamp(14px, 13.30px + 0.19vw, 16px) !important;  /* même clamp que "Ajouter au panier" */
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.12em !important;   /* 0.12em = suit la typo (≈1.92px @16px), comme "Ajouter au panier" */
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;   /* même durée/easing que "Ajouter au panier" (0.3s ease) */
}

#main-content .tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button:hover,
#main-content .tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button:focus {
  background-color: var(--vdb-bordeaux-tres-fonce) !important; /* #37181e */
  color: var(--vdb-creme-pale) !important;                     /* #f8f3ec */
}

/* Icône cœur (::before) : taille un peu plus grande, hérite la couleur du bouton. */
#main-content .tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button::before {
  font-size: 20px !important;
  line-height: 1;
  color: inherit !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

#main-content .tinvwl-after-add-to-cart .tinvwl_add_to_wishlist-text {
  letter-spacing: inherit;
  text-transform: inherit;
  font-size: inherit;
  color: inherit !important;
}
/* Hero accueil : neutralise les lignes vides <br> injectées par WPML dans le module Code
   (version EN), qui poussaient les boutons vers le milieu au lieu du bas */
.vdb-hero-code { display: none; }


/* Méga-menu : pont invisible entre la barre de menu et le panneau,
   pour ne pas fermer quand la souris traverse l'espace menu ↔ canva */
.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;      /* remonte jusqu'à la barre de menu pour combler le trou */
  height: 24px;    /* transparent : sert juste de zone de survol */
}
/* =========================================================
   Anti-FOUC titres animés (main.js)
   Les H1/H2 sont wrappés puis fondus par GSAP ; sans ce masquage
   initial ils sont peints normalement puis cachés par le JS,
   d'où un flash au chargement. Le keyframe de secours les
   réaffiche seul au bout de 2,5 s si le JS ne s'exécute pas
   (erreur, blocage, Delay JS). main.js pose opacity/animation
   en inline pour reprendre la main dès qu'il démarre.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  h1:not(.animate-text),
  h2:not(.animate-text) {
    opacity: 0;
    animation: biot-reveal-fallback 0.6s ease 2.5s forwards;
  }
}
@keyframes biot-reveal-fallback {
  to { opacity: 1; }
}

/* =========================================================
   Anti-saut header sticky Divi 5 (~8px au chargement)
   Au premier rendu la rangée logo a padding-bottom:8px ; quand
   le JS Divi pose et_pb_section_sticky, sa règle le passe à 0
   et tout le contenu remonte d'un coup. On pré-applique l'état
   final ; la règle se désactive seule une fois la classe posée.
   Les pages woo (body.woocommerce-page) gardent leur padding
   avant ET après init — on ne les touche pas.
   ========================================================= */
body:not(.woocommerce-page) .et_pb_section_0_tb_header:not(.et_pb_section_sticky) .et_pb_row_1_tb_header.et_pb_row {
    padding-bottom: 0 !important;
}

/* Le logo SVG (149×87 réels) est déclaré 1200×1600 dans le HTML :
   avant l'arrivée du fichier, le navigateur réserve l'espace au
   mauvais ratio (gros reflow à froid). On force le bon ratio. */
.et_pb_image_0_tb_header img {
    aspect-ratio: 149 / 87;
}