/*
 * Zarboutan Matériaux — système de cartes/boutons/ombres premium (Phase C).
 *
 * Complète color-palette.css : uniformise la FORME des composants
 * (cartes, boutons, ombres, icônes, espacements) sur toute la palette déjà
 * en place, sans rouvrir les questions de couleur déjà tranchées. Chargé
 * globalement, après color-palette.css (voir functions.php).
 *
 * Portée strictement CSS : aucun gabarit PHP, aucun bloc Gutenberg, aucun
 * snippet WPCode modifié depuis ce fichier (les 2 exceptions couleur-
 * uniquement déjà autorisées — Agrégats #1476, menu flottant #1358 —
 * restent éditées directement dans leur CSS intégré, comme lors de la
 * phase précédente).
 */

:root {
	--zb-card-radius: 18px;
	--zb-card-shadow: 0 4px 14px rgba(35, 38, 31, 0.06);
	--zb-card-shadow-hover: 0 14px 28px rgba(35, 38, 31, 0.12);
	--zb-section-gap: clamp(64px, 8vw, 110px);
	--zb-card-gap: clamp(24px, 3vw, 36px);
}

/* ---------- Phase 2 : grille de produits WooCommerce (aucun habillage de
 * carte n'existait jusqu'ici — image + titre + prix nus). Les autres
 * familles de cartes du site (boutique, Agrégats, Ressources) ont déjà
 * ce traitement depuis la phase précédente ; celle-ci comblait le seul
 * type de carte manquant à l'uniformisation. ---------- */
.woocommerce ul.products li.product {
	background: var(--zb-surface-card);
	border: 1px solid var(--zb-border-subtle);
	border-radius: var(--zb-card-radius);
	overflow: hidden;
	padding: 0 0 20px;
	box-shadow: var(--zb-card-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce ul.products li.product:hover {
		transform: translateY(-3px);
		box-shadow: var(--zb-card-shadow-hover);
		border-color: var(--zb-accent);
	}
}

.woocommerce ul.products li.product figure {
	margin: 0 0 14px;
}

.woocommerce ul.products li.product img {
	border-radius: var(--zb-card-radius) var(--zb-card-radius) 0 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .ct-woo-card-actions {
	padding-left: 18px;
	padding-right: 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--zb-text-heading);
}

.woocommerce ul.products li.product .entry-meta {
	margin: 4px 0 0;
}

.woocommerce ul.products li.product .entry-meta a {
	color: var(--zb-text-secondary);
}

.woocommerce ul.products li.product .ct-woo-card-actions {
	margin-top: 14px;
}

/* ---------- Rayon 18px uniformisé sur les familles de cartes déjà
 * claires depuis la phase précédente (12px → 18px), sans toucher à leurs
 * couleurs déjà validées. ---------- */
.zarboutan-shop-card,
.zarboutan-family-card,
.zb-ressources-hub__card,
.zb-recommended-products__card,
.zb-related-articles__card,
.zb-author-card,
.zb-agregats-category-card,
.zb-agregats-card {
	border-radius: var(--zb-card-radius) !important;
}

.zarboutan-shop-card .card-image,
.zarboutan-family-card .card-image,
.zb-agregats-category-card .zb-agregats-category-image,
.zb-agregats-card .zb-agregats-card-image {
	border-radius: var(--zb-card-radius) var(--zb-card-radius) 0 0 !important;
}

/* ---------- Ombre + survol harmonisés sur les cartes qui n'en avaient
 * pas encore (hub Ressources, articles liés, produits recommandés) —
 * les autres (boutique, Agrégats) ont déjà cette animation depuis la
 * phase précédente. ---------- */
.zb-ressources-hub__card,
.zb-recommended-products__card,
.zb-related-articles__card {
	box-shadow: var(--zb-card-shadow);
}

@media (hover: hover) and (pointer: fine) {
	.zb-ressources-hub__card,
	.zb-recommended-products__card,
	.zb-related-articles__card {
		transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	}

	.zb-ressources-hub__card:hover,
	.zb-recommended-products__card:hover,
	.zb-related-articles__card:hover {
		transform: translateY(-3px);
		box-shadow: var(--zb-card-shadow-hover);
	}
}

/* ---------- Phase 3 : sections premium (vert forêt, texte blanc) ----------
 * "Nos matériaux" (accueil) : remplace le fond PHOTO (Greenshift,
 * background-image) par un dégradé vert forêt — le fichier image lui-même
 * n'est ni supprimé ni modifié (règle "jamais toucher aux images"),
 * seule la déclaration CSS qui l'affiche comme fond de section est
 * neutralisée. Portée strictement à cette section (#gsbp-b6e99a6) et à
 * .home : le même identifiant de bloc n'existe nulle part ailleurs. */
.home #gspb_row-id-gsbp-b6e99a6 {
	background-image: none !important;
	background: linear-gradient(135deg, #1d4a2c 0%, #123422 100%) !important;
	border-top-color: rgba(255, 255, 255, 0.14) !important;
	border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

.home #gspb_row-id-gsbp-b6e99a6 .gspb_heading,
.home #gspb_row-id-gsbp-b6e99a6 .gspb_text {
	color: #ffffff !important;
}

.home #gspb_row-id-gsbp-b6e99a6 .gspb-buttonbox,
.home #gspb_row-id-gsbp-b6e99a6 .gspb-buttonbox svg path {
	color: #ffffff !important;
	fill: #ffffff !important;
}

.home #gspb_row-id-gsbp-b6e99a6 .gspb-buttonbox:hover {
	color: #a9e0bb !important;
}

.home #gspb_row-id-gsbp-b6e99a6 .gspb-buttonbox:hover svg path {
	fill: #a9e0bb !important;
}

/* ---------- Fiche auteur (bas d'article) : carte blanche → vert forêt,
 * texte blanc, cohérente avec le CTA. Label/bio utilisaient du texte noir
 * translucide (rgba(0,0,0,X)), remplacé par du blanc translucide
 * équivalent. Nom d'auteur (lien) : vert clair au survol au lieu du vert
 * de marque plein, qui manquerait de contraste sur ce fond. */
.zb-author-card {
	background: linear-gradient(135deg, #1d4a2c 0%, #123422 100%);
	border-color: transparent;
	color: #ffffff;
}

.zb-author-card__label {
	color: rgba(255, 255, 255, 0.7) !important;
}

.zb-author-card__bio {
	color: rgba(255, 255, 255, 0.82) !important;
}

.zb-author-card__name:hover {
	color: #a9e0bb !important;
}

/* ---------- Phase 5 : survol élégant uniformisé sur tous les boutons du
 * site (léger agrandissement + ombre douce), en plus du changement de
 * couleur déjà en place partout. N'écrase aucune des couleurs déjà
 * validées (uniquement transform/box-shadow, jamais background/color) ;
 * respecte prefers-reduced-motion (aucun changement, cette transition
 * reste subtile et non appliquée aux appareils tactiles). */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.zarboutan-shop-card .card-button,
	.zarboutan-family-card .card-button,
	.zb-ressources-hub__card,
	.zb-ressources-hub__pill,
	.zb-toc__summary {
		transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}

	.wp-block-button__link:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 18px rgba(35, 38, 31, 0.16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.zb-calc__button,
	.gspb-buttonbox {
		transition: none !important;
	}
}

/* ---------- Phase 9 : espacement entre cartes harmonisé (30–40px, via
 * --zb-card-gap) sur les grilles qui utilisaient un espacement plus serré
 * (16–24px). N'affecte que le `gap` de la grille — aucune mise en page,
 * aucun contenu. ---------- */
.woocommerce ul.products,
.zb-agregats-categories-grid,
.zb-agregats-grid,
.zarboutan-shop-main-cats,
.zarboutan-wood-family-grid,
.zb-ressources-hub__cpts {
	gap: var(--zb-card-gap) !important;
}

/* ---------- Grille produits WooCommerce en 2 colonnes sur mobile
 * (demande propriétaire, référence comptoirdecambaie.re) ----------
 * Gabarit natif Blocksy, pas WooCommerce : `[data-products]` (attribut
 * Blocksy) en `display:grid`, colonnes pilotées par la variable
 * `--shop-columns`, définie dans le CSS dynamique du thème
 * (wp-content/uploads/blocksy/css/global.css, généré par le
 * Personnalisateur, jamais modifié directement) : 4 colonnes ≥1000px,
 * 3 colonnes 690-999px, **1 seule colonne ≤689.98px** — c'est ce dernier
 * palier qui donnait 1 colonne sur mobile. Variable redéfinie ici au même
 * mécanisme, jamais une réécriture de `grid-template-columns` en dur, pour
 * rester compatible avec le reste du système Blocksy (colonnes par
 * gabarit, largeur de grille, etc.). Point de rupture à 767px (demandé),
 * qui recouvre aussi la zone 690-767px où Blocksy applique sinon 3
 * colonnes (trop serré sur mobile).
 * Emballage réduit à 16px (au lieu de --zb-card-gap, jusqu'à 36px) pour
 * garder une largeur de carte confortable (~164px sur un écran de 390px)
 * suffisante pour le titre, le prix et le bouton. */
@media (max-width: 767px) {
	.woocommerce ul.products[data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}

	/* Page /agregats/ : catalogue interactif du snippet WPCode #1476, grille
	   distincte (`.zb-agregats-grid`, CSS intégré au snippet — jamais
	   modifié directement) qui passait à 1 colonne dès 600px de son propre
	   fait (`@media (max-width:600px){.zb-agregats-grid{grid-template-
	   columns:1fr}}`). Même correctif, même principe : surcouche externe
	   au même point de rupture que le reste de cette règle. */
	.zb-agregats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	/* Bouton "Ajouter au panier" pleine largeur de carte : sur une carte
	   étroite (~164px), un bouton à largeur automatique ("Ajouter au
	   panier" sur deux mots) devenait difficile à cibler au doigt. */
	.woocommerce ul.products[data-products] li.product .ct-woo-card-actions .add_to_cart_button,
	.woocommerce ul.products[data-products] li.product .ct-woo-card-actions a.button {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	/* Titre : 2 lignes maximum plutôt qu'une troncature abrupte ou un
	   débordement — les intitulés produits de ce catalogue sont longs
	   ("Bardage bois classe 4 marron/vert — 22 × 135 mm — L. 4 m"). */
	.woocommerce ul.products[data-products] li.product .woocommerce-loop-product__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
	}

	.woocommerce ul.products[data-products] li.product .price {
		font-size: 14px;
	}
}

/* ---------- Cartes "Accès chantier / Volume adapté / Devis rapide /
 * Particuliers & pros" (accueil) — dernier vestige du thème sombre,
 * redesign carte premium claire (audit précédent : dégradé
 * rgba(10,43,18,.42)→#0c0c0c, titre anthracite illisible dessus).
 *
 * Portée : les 4 cartes sont des blocs Greenshift "container" distincts
 * (ids gsbp-34ac33a / 553dcd3 / 6e869eb / 6477491), tous enfants directs de
 * la même ligne #gspb_row-id-gsbp-2feb4d5 — ciblées via ce parent commun
 * plutôt que 4 sélecteurs répétés. Contenu et structure HTML strictement
 * inchangés (icône SVG + titre h3 déjà en place).
 *
 * !important nécessaire partout : Greenshift génère ces règles avec un
 * sélecteur #id.gspb_container (ID + classe) directement dans la page,
 * plus spécifique qu'un simple sélecteur de classe externe — vérifié en
 * inspectant le HTML généré (background-image, box-shadow, border-radius
 * et le survol :hover y sont tous fixés à cette spécificité). */
.home #gspb_row-id-gsbp-2feb4d5 .gspb_container {
	background: #ffffff !important;
	border: 1px solid var(--zb-border-subtle, #e6e0d3) !important;
	border-radius: var(--zb-card-radius) !important;
	box-shadow: var(--zb-card-shadow) !important;
	backdrop-filter: none !important;
	padding: 36px 30px !important;
}

@media (hover: hover) and (pointer: fine) {
	.home #gspb_row-id-gsbp-2feb4d5 .gspb_container {
		transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
	}

	.home #gspb_row-id-gsbp-2feb4d5 .gspb_container:hover {
		background-color: #ffffff !important;
		transform: translateY(-3px);
		box-shadow: var(--zb-card-shadow-hover) !important;
		border-color: var(--zb-accent, #39a751) !important;
	}
}

/* Icônes : mêmes SVG (contenu inchangé), stroke="#ffffff" en dur dans le
 * HTML → recoloré en vert Zarboutan. Un attribut de présentation SVG a une
 * spécificité nulle, une règle CSS externe l'emporte déjà sans !important,
 * ajouté ici uniquement par cohérence avec le reste du bloc. */
.home #gspb_row-id-gsbp-2feb4d5 .zarboutan-card-svg-icon svg {
	stroke: var(--zb-accent, #39a751) !important;
}

/* Titre : déjà anthracite (héritage --theme-headings-color, cf. audit) —
 * c'était la cause de l'invisibilité sur l'ancien fond sombre, devient
 * automatiquement correct sur le nouveau fond blanc. Déclaré ici pour
 * expliciter l'intention et se prémunir d'une régression future, pas parce
 * que la couleur doit changer. */
.home #gspb_row-id-gsbp-2feb4d5 .gspb_heading {
	color: var(--zb-text-heading, #23261f) !important;
	font-weight: 700;
}