/* GFC 03/11/2026 (Raph SEC, PREPROD) : filtres pliables v3, colonne sur le bord gauche (JS du meme nom). Ordinateur seulement. */
#skruptsearch .gfc-filtres-onglet, #skruptsearch .gfc-filtres-racc { display: none; }
@media (min-width: 768px) {
    #skruptsearch .skrupt-filters { transition: flex-basis .2s ease, width .2s ease, min-width .2s ease; }
    #skruptsearch .skrupt-filters > .gfc-filtres-onglet { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid #EA8914; cursor: pointer;
        background: #fff; color: #333; font-weight: 700; font-size: 14px; padding: 9px 12px; margin: 0 0 10px; border-radius: 8px; }
    #skruptsearch .gfc-filtres-onglet:hover { background: #fdf0e1; }
    #skruptsearch .gfc-filtres-ico { display: inline-flex; flex-direction: column; justify-content: space-between; width: 18px; height: 13px; flex: 0 0 auto; }
    #skruptsearch .gfc-filtres-ico i { display: block; height: 2.5px; border-radius: 2px; background: #EA8914; }
    #skruptsearch .gfc-filtres-nb { background: #EA8914; color: #fff; border-radius: 10px; font-size: 11px; line-height: 18px; min-width: 18px; padding: 0 5px; text-align: center; }
    /* plie (par defaut) : colonne de 36 px sur le bord gauche */
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important;
        max-width: 38px !important; padding: 0 !important; overflow: hidden !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > :not(.gfc-filtres-onglet) { display: none !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { flex-direction: column; justify-content: flex-start; height: 100%;
        margin: 0; padding: 12px 0; gap: 12px; }
    #skruptsearch:not(.gfc-filtres-ouverts) .gfc-filtres-txt { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: #EA8914; }
    /* raccourcis (deplie, sans recherche) */
    #skruptsearch.gfc-filtres-ouverts.gfc-filtres-sans .skrupt-filters { flex: 0 0 250px !important; width: 250px !important; }
    #skruptsearch.gfc-filtres-ouverts.gfc-filtres-sans .gfc-filtres-racc { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px 0; }
    #skruptsearch .gfc-filtres-racc p { flex: 0 0 100%; margin: 0 0 4px; color: #555; font-size: 14px; line-height: 1.4; }
    #skruptsearch .gfc-filtres-racc-btn { border: 1px solid #ddd; background: #fff; color: #333; border-radius: 18px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
    #skruptsearch .gfc-filtres-racc-btn:hover { border-color: #EA8914; color: #EA8914; }
}

/* v4 (Raph) : plie = petit bouton carre avec logo (plus de colonne verticale pleine hauteur) */
@media (min-width: 768px) {
    #skruptsearch .gfc-filtres-svg { display: inline-flex; color: #EA8914; flex: 0 0 auto; }
    #skruptsearch .gfc-filtres-ico { display: none !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important;
        background: none !important; border: 0 !important; box-shadow: none !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { position: relative; height: 42px !important; width: 42px !important; padding: 0 !important;
        justify-content: center !important; align-items: center !important; flex-direction: row !important; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
    #skruptsearch:not(.gfc-filtres-ouverts) .gfc-filtres-txt { display: none !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .gfc-filtres-nb { position: absolute; top: -6px; right: -6px; }
}

/* v5 (Raph SEC « le bord droit du bouton filtre est coupe ») : la colonne pliee ne rogne plus le bouton (bordure + ombre) */
@media (min-width: 768px) {
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { flex: 0 0 52px !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important;
        overflow: visible !important; padding: 2px 0 0 2px !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { box-sizing: border-box !important; margin: 0 !important; }
}

/* v6 (Raph SEC « gratter encore de la place ») : marge gauche du panneau 24 -> 8 px, ecart colonne/tuiles 14 -> 6 px,
   colonne du bouton 52 -> 46 px, plus de retrait a gauche de la grille (~34 px gagnes). */
@media (min-width: 768px) {
    #skruptsearch .skrupt-shell { padding-left: 8px !important; }
    #skruptsearch .skrupt-container { column-gap: 6px !important; gap: 6px !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; }
    #skruptsearch #skrupt-results-list { padding-left: 0 !important; }
}

/* v7 (Raph SEC « rajouter le texte Filtre dans le meme badge ») : plie = logo + « Filtres » en petit dessous */
@media (min-width: 768px) {
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { flex-direction: column !important; height: 54px !important; width: 44px !important;
        gap: 3px !important; padding: 4px 0 !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .gfc-filtres-txt { display: block !important; writing-mode: horizontal-tb !important; transform: none !important;
        font-size: 10px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: #EA8914 !important; font-weight: 700 !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; }
}

/* v8 (Raph « ecrit a la verticale ») : logo puis « FILTRES » a la verticale dans le meme badge */
@media (min-width: 768px) {
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { height: auto !important; padding: 9px 0 10px !important; gap: 7px !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .gfc-filtres-txt { writing-mode: vertical-rl !important; transform: rotate(180deg) !important; font-size: 12px !important;
        letter-spacing: 1px !important; text-transform: uppercase !important; }
}
/* v9 : le badge ne s'etire plus sur toute la hauteur de la colonne (contenu qui se retrouvait au milieu de l'ecran) */
@media (min-width: 768px) {
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters { align-items: flex-start !important; align-content: flex-start !important; }
    #skruptsearch:not(.gfc-filtres-ouverts) .skrupt-filters > .gfc-filtres-onglet { align-self: flex-start !important; justify-content: flex-start !important; flex: 0 0 auto !important; }
}
/* v10 (Raph SEC « texte filtre en gras ») */
@media (min-width: 768px) {
    #skruptsearch .gfc-filtres-txt { font-weight: 900 !important; -webkit-text-stroke: 0.4px #EA8914 !important; }
}
/* v11 (Raph SEC « pourquoi masquer les filtres a un fond noir ») : le contour orange du gras se melangeait au texte gris
   fonce du bouton deplie (rendu brun/noir) -> texte orange uni, en gras, sans contour, dans les deux etats */
@media (min-width: 768px) {
    #skruptsearch .gfc-filtres-txt { color: #EA8914 !important; -webkit-text-stroke: 0 !important; font-weight: 800 !important; }
    #skruptsearch.gfc-filtres-ouverts .skrupt-filters > .gfc-filtres-onglet { background: #fff !important; }
}
/* v12 (Raph SEC « filtre a perdu son gras ») : gras rendu par un contour ORANGE sur texte orange (pas de melange de couleurs) */
@media (min-width: 768px) {
    #skruptsearch .gfc-filtres-txt { font-weight: 900 !important; -webkit-text-stroke: 0.5px #EA8914 !important; }
}
/* v13 (Raph SEC « Masquer les filtres parait flou ») : le contour qui epaissit le texte vertical rend flou le texte
   horizontal -> deplie : sans contour, gras 700, orange un peu plus fonce pour le contraste */
@media (min-width: 768px) {
    #skruptsearch.gfc-filtres-ouverts .gfc-filtres-txt { -webkit-text-stroke: 0 !important; font-weight: 700 !important; color: #D97706 !important;
        font-size: 14px !important; -webkit-font-smoothing: antialiased; }
}
/* v14 (Raph SEC) : « Masquer les filtres » change aussi de fond au survol, comme le bouton plie */
@media (min-width: 768px) {
    #skruptsearch.gfc-filtres-ouverts .skrupt-filters > .gfc-filtres-onglet:hover { background: #fdf0e1 !important; }
}