/* GFC 21/10/2026 (Raph : « traite Jimmy », puis « applique le nouveau design des logos marque
   a toutes les categories ») — megamenu : rangees « PAR MARQUE » au design de Jimmy (grille de
   logos + recherche + alphabet + compteur) pour TOUS les blocs categorie en mode 1 (E-liquide,
   DIY, Puff, E-cigarette/Materiel, Coil & Coton, Accessoire, CBD), generees par block.tpl.
   Source : paquet gfc-provap-menu-marques/assets/css/gfc-brands.css, adapte au panneau :
     - parties « demo » retirees (bandeau, en-tete, barre de navigation, rangee Par type :
       la rangee KITS & MODS du site est conservee au-dessus) ;
     - fond transparent et police du site (Jimmy : Arial sur fond #f5f5f5) ;
     - le titre h2 « PAR MARQUE » est masque visuellement sur ordinateur : le bloc garde
       le titre vertical du module, comme KITS & MODS / ATOS / ACCESSOIRES (h2 conserve
       pour les lecteurs d ecran) ;
     - mobile (< 460 px de composant) : 3 colonnes de 64 px au lieu de 2 x 80 px
       (119 logos en 2 colonnes = ~5 300 px de defilement).
   v b (21/10) : titre vertical du module (classe gfc-brands-bloc), tailles retablies malgre
     le !important du theme, h2 masque aussi en mobile (doublon du titre du module).
   v d (21/10, Raph, capture) : recherche descendue sur la MEME LIGNE que les lettres
     (compteur seul au-dessus) ; en etroit (< 660 px de composant) : recherche puis lettres.
   JS : js/autoload/99-gfc-brands-20261021d.js — logos : img/gfc-marques/ */

.gfc-brands-menu { width: 100%; container-type: inline-size; color: #282828; background: transparent; font-size: 14px; line-height: 1.4; text-align: left; }
.gfc-brands-menu * { box-sizing: border-box; }
.gfc-brands-menu button, .gfc-brands-menu input { font: inherit; }
.gfc-brands-menu .gfc-content { padding: 4px 0 8px; }
.gfc-brands-menu .gfc-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gfc-brands-menu .gfc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.gfc-brands-menu h2 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0; border-left: 4px solid #ef8c10; padding-left: 10px; text-transform: uppercase; color: #282828; }
.gfc-brands-menu .gfc-count { font-size: 12px; color: #666666; }
.gfc-brands-menu .gfc-search { width: 290px; max-width: 100%; display: flex; align-items: center; gap: 8px; margin: 0; border: 1px solid #bfbfbf; border-radius: 4px; padding: 0 10px; background: #ffffff; font-weight: normal; }
.gfc-brands-menu .gfc-search:focus-within { outline: 2px solid #ef8c10; outline-offset: 2px; }
.gfc-brands-menu .gfc-search input,
.gfc-brands-menu .gfc-search input[type="search"] { min-width: 0; width: 100%; height: 38px; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: inherit; padding: 8px 0; outline: none; font-size: 14px; -webkit-appearance: none; appearance: none; }
.gfc-brands-menu .gfc-search svg { flex-shrink: 0; width: 16px; height: 16px; color: #666666; }
.gfc-brands-menu .gfc-alphabet { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0; }
.gfc-brands-menu .gfc-alphabet button { border: 0; border-radius: 3px; color: #282828; background: #f3f3f3; min-width: 28px; min-height: 30px; margin: 0; padding: 5px 8px; font-size: 12px; line-height: 1.2; text-transform: none; box-shadow: none; cursor: pointer; }
.gfc-brands-menu .gfc-alphabet button:hover { background: #e6e6e6; }
.gfc-brands-menu .gfc-alphabet button[aria-pressed="true"] { background: #353535; color: #ffffff; box-shadow: inset 0 -3px #ef8c10; }
.gfc-brands-menu .gfc-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.gfc-brands-menu a.gfc-brand { min-width: 0; height: 80px; margin: 0; padding: 7px; border: 1px solid #dddddd; border-radius: 4px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.gfc-brands-menu a.gfc-brand:hover, .gfc-brands-menu a.gfc-brand:focus-visible { border-color: #ef8c10; box-shadow: 0 0 0 1px #ef8c10; }
.gfc-brands-menu .gfc-brand img { display: block; width: 100%; max-width: 154px; height: 64px; max-height: 64px; margin: 0 auto; object-fit: contain; opacity: 1; }
.gfc-brands-menu .gfc-empty { margin: 0; padding: 24px 0; color: #666666; }
.gfc-brands-menu [hidden] { display: none !important; }
.gfc-brands-menu a.gfc-brand:focus-visible,
.gfc-brands-menu .gfc-alphabet button:focus-visible { outline: 2px solid #ad5200; outline-offset: 3px; }
.gfc-brands-menu .gfc-logo-fallback { color: #282828; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.gfc-brands-menu .gfc-search input::placeholder { color: #666666; opacity: 1; }
.gfc-brands-menu .gfc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- integration dans le bloc HTML du module (classe posee par le JS) ----
   Le theme ne met le titre vertical qu aux blocs categorie (megamenu.css :
   .mm_block_type_category h4 + bloc en flex). On reprend les memes regles pour que
   « PAR MARQUE » s aligne sur KITS & MODS / ATOS / ACCESSOIRES ; titre en haut
   (flex-start) pour rester a cote de la recherche quand la grille est longue. */
.ets_mm_block.gfc-brands-bloc { position: relative; display: flex; align-items: flex-start; }
.ets_mm_block.gfc-brands-bloc > h4 { transform: rotate(180deg); white-space: nowrap; margin: 0; padding: 0; line-height: 1.5; text-orientation: sideways; writing-mode: vertical-rl; border-bottom: 0 !important; }
.ets_mm_block.gfc-brands-bloc > .ets_mm_block_content { flex: 1 1 0%; min-width: 0; padding-left: 20px; padding-right: 20px; text-align: left; }
@media (max-width: 1199px) {
    .ets_mm_block.gfc-brands-bloc { display: block; }
    .ets_mm_block.gfc-brands-bloc > h4 { transform: none; text-orientation: mixed; writing-mode: horizontal-tb; text-align: left; color: #000 !important; border-bottom: 1px solid !important; margin-bottom: 15px !important; }
    .ets_mm_block.gfc-brands-bloc > .ets_mm_block_content { padding-left: 0; padding-right: 0; }
}
/* le titre du module suffit : le h2 de Jimmy reste pour les lecteurs d ecran */
.gfc-brands-bloc:not(.mm_hide_title) .gfc-brands-menu h2 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gfc-brands-bloc:not(.mm_hide_title) .gfc-brands-menu .gfc-content { padding-top: 0; }

/* le theme impose « .ets_mm_block * { font-size: 14-16px !important } » : on retablit les
   tailles de Jimmy */
.ets_mm_block .gfc-brands-menu h2 { font-size: 19px !important; }
.ets_mm_block .gfc-brands-menu .gfc-count { font-size: 12px !important; font-weight: 400; }
.ets_mm_block .gfc-brands-menu .gfc-search input { font-size: 14px !important; }
.ets_mm_block .gfc-brands-menu .gfc-alphabet button { font-size: 12px !important; font-weight: 400; }
.ets_mm_block .gfc-brands-menu .gfc-empty { font-size: 14px !important; }
.ets_mm_block .gfc-brands-menu .gfc-logo-fallback { font-size: 12px !important; }

/* colonnes selon la largeur du COMPOSANT (container queries, comme Jimmy) */
@container (min-width: 1200px) { .gfc-brands-menu .gfc-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@container (min-width: 1440px) { .gfc-brands-menu .gfc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
@container (max-width: 899px) { .gfc-brands-menu .gfc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (max-width: 659px) {
    .gfc-brands-menu .gfc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gfc-brands-menu .gfc-search { width: 100%; }
    .gfc-brands-menu .gfc-search input, .gfc-brands-menu .gfc-search input[type="search"],
    .ets_mm_block .gfc-brands-menu .gfc-search input { font-size: 16px !important; }
}
@container (max-width: 459px) {
    .gfc-brands-menu .gfc-grid { gap: 6px; }
    .gfc-brands-menu a.gfc-brand { height: 64px; padding: 5px; }
    .gfc-brands-menu .gfc-brand img { height: 50px; max-height: 50px; }
    .gfc-brands-menu .gfc-alphabet { gap: 3px; }
}
@media (pointer: coarse) { .gfc-brands-menu .gfc-alphabet button { min-height: 40px; min-width: 40px; } }
@media (prefers-reduced-motion: reduce) { .gfc-brands-menu a.gfc-brand { transition: none; } }
@supports not (container-type: inline-size) {
    .gfc-brands-menu .gfc-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ---- v d : recherche sur la ligne de l alphabet ----
   .gfc-heading devient transparent pour la grille (display: contents) : ses deux enfants
   (compteur, recherche) se placent dans la grille de .gfc-content. */
.gfc-brands-menu .gfc-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.gfc-brands-menu .gfc-heading { display: contents; }
.gfc-brands-menu .gfc-title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; }
.gfc-brands-menu .gfc-alphabet { grid-column: 1; grid-row: 2; margin: 0 0 14px; }
.gfc-brands-menu .gfc-search { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 14px; width: 260px; }
.gfc-brands-menu .gfc-grid, .gfc-brands-menu .gfc-empty { grid-column: 1 / -1; }
@container (max-width: 659px) {
    .gfc-brands-menu .gfc-content { grid-template-columns: minmax(0, 1fr); }
    .gfc-brands-menu .gfc-search { grid-column: 1; grid-row: 2; width: 100%; }
    .gfc-brands-menu .gfc-alphabet { grid-column: 1; grid-row: 3; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 767px) {
        .gfc-brands-menu .gfc-content { grid-template-columns: minmax(0, 1fr); }
        .gfc-brands-menu .gfc-search { grid-column: 1; grid-row: 2; width: 100%; }
        .gfc-brands-menu .gfc-alphabet { grid-column: 1; grid-row: 3; }
    }
}