/*
 * La Vitrine (LRI-DEC-0094) — le style de base des pages boutique.
 *
 * AUCUNE COULEUR EN DUR : seulement les couleurs de la boutique, posées par le
 * Connector (LRI_Vitrine_Couleurs) depuis Divi — --gcd-couleur-principale,
 * -secondaire, -accent, -titres, -texte. Les teintes neutres (bordures, fonds)
 * sont dérivées de la couleur du texte ; le texte d'un bouton est celui que le
 * Connector juge lisible sur sa couleur (--gcd-couleur-sur-*). Le design de Jan (thème enfant « GCD »)
 * peut tout surcharger.
 */
.gcd-vitrine {
	--gcd-trait: color-mix(in srgb, var(--gcd-couleur-texte) 18%, transparent);
	--gcd-fond-doux: color-mix(in srgb, var(--gcd-couleur-principale) 6%, transparent);
	--gcd-rayon: 6px;
	color: var(--gcd-couleur-texte);
}
.gcd-vitrine h1, .gcd-vitrine h2 { color: var(--gcd-couleur-titres); }

.gcd-ariane { margin: 0 0 1.5em; font-size: .9em; }
.gcd-ariane a { color: var(--gcd-couleur-principale); }

.gcd-gamme-entete { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; margin-bottom: 32px; }
.gcd-gamme-image img { width: 100%; height: auto; border-radius: var(--gcd-rayon); }
.gcd-gamme-titre { margin: 0 0 .4em; }
.gcd-gamme-prix { font-size: 1.25em; color: var(--gcd-couleur-principale); }
.gcd-gamme-nombre { opacity: .75; }

.gcd-variantes { margin: 0 0 40px; overflow-x: auto; }
.gcd-variantes-table { width: 100%; border-collapse: collapse; }
/* `:not(#gcd)` donne à ces règles le poids d'un identifiant : la feuille de Divi
   rembourre toute cellule de son contenu par `#content-area table td` (vu au banc,
   lot V1), qui l'emporterait sur une simple classe. */
.gcd-variantes-table:not(#gcd) th, .gcd-variantes-table:not(#gcd) td { padding: 10px 12px; border-bottom: 1px solid var(--gcd-trait); text-align: left; vertical-align: middle; }
.gcd-variantes-table thead th { color: var(--gcd-couleur-titres); font-weight: 600; }
/* La référence, le prix, la disponibilité, le bouton : sur une ligne ; une caractéristique
   courte (« 108 mm ») aussi, une longue passe à la ligne. */
.gcd-variantes-table .gcd-ref, .gcd-variantes-table .gcd-prix, .gcd-variantes-table .gcd-dispo, .gcd-variantes-table .gcd-bouton { white-space: nowrap; }
.gcd-variantes-table .gcd-carac { min-width: 5.5em; }
.gcd-variante { cursor: pointer; }
.gcd-variante:hover, .gcd-variante:focus { background: var(--gcd-fond-doux); outline: none; }
.gcd-variante:focus-visible { outline: 2px solid var(--gcd-couleur-principale); outline-offset: -2px; }
.gcd-variante-nom { font-weight: 600; color: var(--gcd-couleur-titres); }

.gcd-ajout { display: flex; gap: 8px; align-items: center; margin: 0; }
.gcd-quantite input { width: 4.5em; padding: 6px; border: 1px solid var(--gcd-trait); border-radius: var(--gcd-rayon); }
.gcd-bouton { padding: 8px 16px; border: 0; border-radius: var(--gcd-rayon); cursor: pointer; background: var(--gcd-couleur-principale); color: var(--gcd-couleur-sur-principale); font-weight: 600; }
.gcd-bouton:hover { background: var(--gcd-couleur-secondaire); color: var(--gcd-couleur-sur-secondaire); }
.gcd-bouton-secondaire { background: transparent; color: var(--gcd-couleur-principale); box-shadow: inset 0 0 0 1px var(--gcd-couleur-principale); }
.gcd-bouton-secondaire:hover { background: var(--gcd-couleur-principale); color: var(--gcd-couleur-sur-principale); }

.gcd-gamme-description { margin: 0 0 40px; }

.gcd-relations { margin: 0 0 40px; }
.gcd-relations-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.gcd-relation { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--gcd-trait); border-radius: var(--gcd-rayon); }
.gcd-relation-lien { display: flex; flex-direction: column; gap: 8px; color: var(--gcd-couleur-titres); }
.gcd-relation-lien img { width: 100%; height: auto; }
.gcd-prix { color: var(--gcd-couleur-principale); font-weight: 600; }
.gcd-dispo { font-size: .9em; opacity: .8; }

/* Fermés tant que le script ne les ouvre pas : la feuille de Divi affiche toute balise `aside`
   (display: block) et passerait par-dessus l'attribut `hidden` (vu au banc, lot V1). */
.gcd-drawer[hidden], .gcd-drawer-fond[hidden] { display: none !important; }
.gcd-drawer-fond { position: fixed; inset: 0; background: color-mix(in srgb, var(--gcd-couleur-texte) 45%, transparent); z-index: 99998; }
.gcd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: Canvas; color: var(--gcd-couleur-texte); box-shadow: -8px 0 32px color-mix(in srgb, var(--gcd-couleur-texte) 25%, transparent); padding: 24px; overflow-y: auto; z-index: 99999; }
.gcd-drawer-fermer { position: sticky; top: 0; float: right; font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--gcd-couleur-titres); }
.gcd-detail-image img { width: 100%; height: auto; border-radius: var(--gcd-rayon); }
.gcd-detail-ref { display: flex; gap: 16px; flex-wrap: wrap; }
.gcd-detail-caracteristiques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; margin: 20px 0; }
.gcd-detail-caracteristiques dt { font-weight: 600; color: var(--gcd-couleur-titres); }
.gcd-detail-caracteristiques dd { margin: 0; }
body.gcd-drawer-ouvert { overflow: hidden; }

@media (max-width: 767px) {
	.gcd-gamme-entete { grid-template-columns: 1fr; }
}
/* Les variantes en cartes sous 980 px : la largeur où Divi passe lui-même en tablette. */
@media (max-width: 980px) {
	.gcd-variantes-table thead { display: none; }
	.gcd-variantes-table, .gcd-variantes-table tbody, .gcd-variantes-table tr, .gcd-variantes-table th, .gcd-variantes-table td { display: block; }
	.gcd-variantes-table:not(#gcd) tr { border: 1px solid var(--gcd-trait); border-radius: var(--gcd-rayon); margin-bottom: 12px; padding: 8px 12px; }
	.gcd-variantes-table:not(#gcd) th, .gcd-variantes-table:not(#gcd) td { border: 0; padding: 3px 0; }
	.gcd-variantes-table td:empty { display: none; }
	.gcd-variantes-table td[data-gcd-libelle]::before { content: attr(data-gcd-libelle) " : "; font-weight: 600; }
	.gcd-variante-action { padding-top: 8px; }
}