/* GFC 29/10/2026 (Raph, PRÉPROD) : cartes « pop-up E-liquides alternatifs » dans la barre de recherche Skrupt
   (voir 99-gfc-skrupt-cartes-20261029a.js) — version o 29/10 : boutons Ajouter / Je le veux rapidement = meme habillage que le bouton AJOUTER des tuiles (degrade, ombre, pas de grisage au survol) + image alignée sans logo. Les styles des cartes viennent de modules/gfceliquidealternatif/views/css/front.css. */
#skrupt-results-list li.gfc-skrupt-carte,
.skrupt-results li.gfc-skrupt-carte {
    width: auto !important; max-width: 100%; margin: 0 0 14px; padding: 0; background: transparent; border: 0; box-shadow: none;
}
.skrupt-results li.gfc-skrupt-carte > .gfc-alt-carte {
    display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 10px; height: 100%; box-sizing: border-box;   /* 29/10 (Raph) : cartes moins hautes, comme les tuiles de la prod */
    border: 1px solid #dedede; border-radius: 8px; background: #f5f5f5; box-shadow: none;   /* 29/10 (Raph) : même habillage que les tuiles Skrupt de la prod (fond gris, bordure) */
}
#skrupt-results-list.skrupt-results { padding: 8px 8px 24px !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; justify-content: stretch; }   /* 29/10 (Raph) : 240 px mini (= 245 px réels) = 6 cartes par ligne sur un écran 1920 (254 px = 5 seulement) */   /* place pour la bordure et l ombre des premières cartes */
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo-ligne { display: flex; justify-content: center; margin: 0; line-height: 0; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo img { max-width: 120px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo { height: 26px; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-img { display: block; aspect-ratio: auto; height: 208px; background: #fff; border-radius: 6px; overflow: hidden; }   /* image sur fond blanc, bords visibles sur le gris */
.skrupt-results li.gfc-skrupt-carte .gfc-alt-img img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.skrupt-results li.gfc-skrupt-carte select.gfc-alt-decli { background: #fff; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-nom { color: #1d1d1d; font-weight: 700; font-size: 13px; line-height: 1.25; min-height: 33px; text-decoration: none; text-transform: none; flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-nom:hover { color: #EA8914; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-prix { color: #EA8914; font-weight: 700; font-size: 15px; display: flex; flex-direction: row; align-items: baseline; gap: 8px; line-height: 1.15; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-barre { color: #8a8a8a; font-weight: 400; font-size: 12px; order: 2; }
.skrupt-results li.gfc-skrupt-carte select.gfc-alt-decli { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 6px; padding: 0 8px; background: #fff; font-size: 13px; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-actions { display: flex; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-voir {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 10px;
    border: 0; border-radius: 18px; background: #EA8914; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none;
}
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout.gfc-alt-ok { background: #2e9e4f; }
@media (max-width: 767px) {
    #skrupt-results-list li.gfc-skrupt-carte, .skrupt-results li.gfc-skrupt-carte { width: 46vw !important; margin: 0 1vw 10px; }
}
.skrupt-results li.gfc-skrupt-carte .gfc-alt-epuise { color: #8a8a8a; font-weight: 700; font-size: 13px; }   /* 29/10 (Raph) : rupture sans déclinaison */
.gfc-alt-pop .gfc-alt-epuise { color: #8a8a8a; font-weight: 700; font-size: 13px; }

.skrupt-results li.gfc-skrupt-carte > .gfc-alt-carte > .gfc-alt-img:first-child { margin-top: 31px; }   /* 29/10 (Raph) : sans logo, l image reste à la même hauteur (26 px de logo + 5 px d espace) */
.gfc-alt-prix .gfc-alt-epuise { margin-left: auto; order: 3; }   /* 29/10 (Raph) : « Épuisé » tout à droite, sur la ligne du prix (cartes de recherche et pop-up) */
/* 29/10 (Raph) : rupture totale -> bouton d alerte du module Out of stock, habille comme le bouton orange des cartes */
.gfc-alt-oosn { flex: 1; display: flex; }
.gfc-alt-oosn .hi-oosn-pl-wrapper { flex: 1; display: flex; }
.gfc-alt-oosn a.oosn-popup, .gfc-alt-oosn a.oosn-popup.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 18px; background: #EA8914; color: #fff; font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none; text-transform: none; box-shadow: none; }
.gfc-alt-oosn a.oosn-popup:hover { background: #d47a0f; color: #fff; }
.gfc-alt-oosn .oosn-popup-container { display: none; }
/* 29/10 (Raph) : la pop-up fancybox (z-index 8030) doit passer DEVANT l overlay de recherche Skrupt (z-index 2147483000) */
.fancybox-overlay { z-index: 2147483100 !important; }
.fancybox-wrap { z-index: 2147483110 !important; }
/* 29/10 (Raph) : le prix vient juste sous le nom (nom sur 2 lignes reservees) ; c est le prix qui absorbe l espace libre,
   donc selecteur et bouton restent en bas et le prix est a la meme hauteur sur toutes les cartes */
.skrupt-results li.gfc-skrupt-carte .gfc-alt-prix { margin-bottom: auto; align-items: baseline; flex-wrap: wrap; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-apartir, .gfc-alt-pop .gfc-alt-apartir { order: 0; font-size: 11px; font-weight: 400; color: #555; margin-right: 2px; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-prix-val { order: 1; }
/* 29/10 (Raph : « les anciennes tuiles s affichent 0,5 s ») : tuile Skrupt invisible (squelette gris de la taille d une carte)
   tant que la carte n est pas posee ; gfc-skrupt-natif = pas de carte pour ce produit, on rend la tuile d origine */
#skrupt-results-list li[id^="skrupt-product-"]:not(.gfc-skrupt-carte):not(.gfc-skrupt-natif) { position: relative; min-height: 375px; background: #f5f5f5; border: 1px solid #e6e6e6; border-radius: 8px; }
#skrupt-results-list li[id^="skrupt-product-"]:not(.gfc-skrupt-carte):not(.gfc-skrupt-natif) > * { visibility: hidden; }
/* 29/10 (Raph : « logos un peu petits ») : logo agrandi par transformation visuelle (x1,4, 24 -> ~34 px de haut), la ligne garde
   ses 26 px donc la carte ne change pas de taille ; au survol x1,7 (= le x1,22 de la pop-up applique au logo agrandi) */
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo img { transform: scale(1.4); transform-origin: center center; transition: transform .15s ease; max-width: 110px; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo:hover img, .skrupt-results li.gfc-skrupt-carte .gfc-alt-logo img:hover { transform: scale(1.7); }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-logo-ligne { position: relative; z-index: 2; }
/* 29/10 (Raph) : memes boutons que les tuiles : degrade orange + ombre portee, aucun changement au survol, leger assombrissement au clic */
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-oosn a.oosn-popup,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-voir {
    background: linear-gradient(rgb(243, 155, 13) 0%, rgb(227, 123, 26) 100%) !important; color: #fff !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 6px 6px); transition: filter .12s ease;
}
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout:hover,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-oosn a.oosn-popup:hover,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-voir:hover { background: linear-gradient(rgb(243, 155, 13) 0%, rgb(227, 123, 26) 100%) !important; color: #fff !important; }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout:active,
.skrupt-results li.gfc-skrupt-carte .gfc-alt-oosn a.oosn-popup:active { filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 2px 2px) brightness(.93); }
.skrupt-results li.gfc-skrupt-carte .gfc-alt-ajout.gfc-alt-ok { background: #2e9e4f !important; }