/* GFC 21/10/2026 v5 (Raph) : ecart 520 px, prefixe orange 15px + titre 13px ; rond inchange.
   Remplace ...-20261021d.css.
   v4 (Raph) : boutons ecartes (300 px desktop), libelles prefixes par le JS.
   Remplace ...-20261021c.css.
   v3 (retour Raph) : libelles a la taille des libelles de tuiles du panneau
   (15px / 500 / #444, mesure en headless), boutons ecartes de 100 px, ligne centree
   verticalement entre « Par type » et la recherche de marque. Remplace ...-20261021b.css.
   v2 — megamenu E-liquide / DIY : boutons compacts « PAR SAVEUR + » et
   « PAR PAYS + » cote a cote sous « Par type » ; les lignes se deplient en dessous.
   Voir js/autoload/99-gfc-depliant-saveur-pays-20261021e.js. Remplace ...-20261021.css.
   Les classes gfc-dep* ne sont posees que par ce JS : sans lui, rien ne change. */

/* --- la ligne de boutons (un <li> de colonne du megamenu) --- */
.ets_mm_megamenu .mm_columns_ul > li.gfc-dep-nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 520px;
    row-gap: 0;
    width: 100%;
    /* remonte sous « Par type » et redonne la meme marge dessous : ecarts egaux,
       hauteur totale inchangee par rapport a la v2 */
    margin: -11px 0 11px !important;
    padding: 0 !important;
    /* flottant comme les autres colonnes du module : sinon le « clear » annule la
       marge negative (piege de la v2, ou le -12px n avait aucun effet) */
    float: left !important;
    clear: none !important;
    border: 0 !important;
    background: none !important;
    min-height: 0;
}

/* --- un bouton : texte + petit rond, fond transparent --- */
.ets_mm_megamenu li.gfc-dep-nav > .gfc-dep-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;            /* cible tactile, via padding transparent */
    margin: 0;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: #444;                 /* = libelles des tuiles (.ets_item_name) */
    font-family: Poppins, Lato, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s;
}
.ets_mm_megamenu li.gfc-dep-nav > .gfc-dep-btn:hover,
.ets_mm_megamenu li.gfc-dep-nav > .gfc-dep-btn.gfc-dep-ouvert {
    color: #E8730C;
}
.ets_mm_megamenu li.gfc-dep-nav > .gfc-dep-btn:focus {
    outline: none;
}
.ets_mm_megamenu li.gfc-dep-nav > .gfc-dep-btn:focus-visible {
    outline: 2px solid #E8730C;
    outline-offset: 0;
}

/* --- rond + / − (dessine en CSS) --- */
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid #E8730C;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: background-color .2s;
}
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone:before,
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
    background: #E8730C;
    border-radius: 1px;
    transition: transform .25s, opacity .25s, background-color .2s;
}
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone:after {
    transform: rotate(90deg);
}
.ets_mm_megamenu .gfc-dep-btn:hover .gfc-dep-icone,
.ets_mm_megamenu .gfc-dep-btn.gfc-dep-ouvert .gfc-dep-icone {
    background: #E8730C;
}
.ets_mm_megamenu .gfc-dep-btn:hover .gfc-dep-icone:before,
.ets_mm_megamenu .gfc-dep-btn:hover .gfc-dep-icone:after,
.ets_mm_megamenu .gfc-dep-btn.gfc-dep-ouvert .gfc-dep-icone:before,
.ets_mm_megamenu .gfc-dep-btn.gfc-dep-ouvert .gfc-dep-icone:after {
    background: #fff;
}
.ets_mm_megamenu .gfc-dep-btn.gfc-dep-ouvert .gfc-dep-icone:after {
    transform: rotate(0deg);
    opacity: 0;
}

/* --- lignes depliees ---
   Grand ecran : le libelle vertical garde sa LARGEUR (tuiles alignees sur « Par type »)
   mais devient invisible et sans hauteur (le bouton porte deja le libelle). */
.ets_mm_megamenu:not(.changestatus) .ets_mm_block.gfc-dep > h4 {
    visibility: hidden;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    align-self: flex-start;
}
/* mode liste (mobile / tablette) : le titre horizontal fait doublon avec le bouton */
.ets_mm_megamenu.changestatus .ets_mm_block.gfc-dep > h4 {
    display: none !important;
}
.ets_mm_megamenu.changestatus .mm_columns_ul > li.gfc-dep-nav {
    margin: 0 0 4px !important;
    column-gap: 32px;
}
/* mobile : les libelles de tuiles du theme y sont a 10px (trop petit pour un bouton) ;
   on prend 12px, entre ces libelles et le titre « PAR MARQUE » */
.ets_mm_megamenu.changestatus li.gfc-dep-nav > .gfc-dep-btn {
    font-size: 12px;
}
.ets_mm_megamenu.changestatus .gfc-dep-btn .gfc-dep-icone {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .ets_mm_megamenu .gfc-dep-btn,
    .ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone,
    .ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone:before,
    .ets_mm_megamenu .gfc-dep-btn .gfc-dep-icone:after {
        transition: none;
    }
}

/* --- v5 : prefixe (« E-LIQUIDE : ») en orange a la taille du bouton, titre plus petit --- */
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-prefixe {
    color: #E8730C;
}
.ets_mm_megamenu .gfc-dep-btn .gfc-dep-titre {
    font-size: 13px;                 /* 15px pour le prefixe (taille du bouton) */
}
.ets_mm_megamenu.changestatus .gfc-dep-btn .gfc-dep-titre {
    font-size: 11px;                 /* mobile : prefixe 12px, titre 11px */
}