/* ============================================================
   NL Saisonnalité — encart accueil, badge catalogue, bloc En-tête saison
   Couleurs : variables CSS du thème Nature Boutique
   ============================================================ */

/* ─── Variables locales ──────────────────────────────────────────────────── */
:root {
	--nl-saison-vert:        #4a7c59;
	--nl-saison-vert-clair:  #edf4f0;
	--nl-saison-or:          var(--wp--preset--color--or, #eeab00);
	--nl-saison-or-clair:    #fdf7e3;
	--nl-saison-violet:      #6b5b8e;
	--nl-saison-violet-clair:#f3f0f8;
	--nl-saison-radius:      8px;
	--nl-saison-gap:         1rem;
}

/* ─── Encart saison — conteneur ─────────────────────────────────────────── */
.nl-encart-saison {
	border-radius: var(--nl-saison-radius);
	padding: 1.5rem;
	margin-block: 2rem;
}

.nl-encart-saison--saison {
	background-color: var(--nl-saison-vert-clair);
	border-left: 4px solid var(--nl-saison-vert);
}

.nl-encart-saison--fete {
	background-color: var(--nl-saison-or-clair);
	border-left: 4px solid var(--nl-saison-or);
}

.nl-encart-saison--terroir {
	background-color: var(--nl-saison-violet-clair);
	border-left: 4px solid var(--nl-saison-violet);
}

/* ─── Encart — en-tête ──────────────────────────────────────────────────── */
.nl-encart-saison__header {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.nl-encart-saison__titre {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--basefoncee, #472e23);
}

.nl-encart-saison--saison .nl-encart-saison__titre {
	color: var(--nl-saison-vert);
}

.nl-encart-saison--fete .nl-encart-saison__titre {
	color: var(--nl-saison-or);
}

.nl-encart-saison--terroir .nl-encart-saison__titre {
	color: var(--nl-saison-violet);
}

.nl-encart-saison__count {
	font-size: 0.85rem;
	color: var(--wp--preset--color--base3, #8D827A);
}

/* ─── Encart — grille produits ──────────────────────────────────────────── */
.nl-encart-saison__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--nl-saison-gap);
	margin-bottom: 1.25rem;
}

.nl-encart-saison__produit {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: calc(var(--nl-saison-radius) - 2px);
	padding: 0.75rem;
	transition: box-shadow 0.2s ease;
}

.nl-encart-saison__produit:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.nl-encart-saison__produit img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 4px;
}

.nl-encart-saison__nom {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--basefoncee, #472e23);
	line-height: 1.3;
}

.nl-encart-saison__prix {
	font-size: 0.9rem;
	color: var(--wp--preset--color--brun, #795035);
}

/* ─── Encart — lien "Voir tous" ─────────────────────────────────────────── */
.nl-encart-saison__lien {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--basefoncee, #472e23);
}

.nl-encart-saison--saison .nl-encart-saison__lien { color: var(--nl-saison-vert); }
.nl-encart-saison--fete   .nl-encart-saison__lien { color: var(--nl-saison-or); }
.nl-encart-saison--terroir .nl-encart-saison__lien { color: var(--nl-saison-violet); }

.nl-encart-saison__lien:hover {
	text-decoration: underline;
}

/* ─── Badge catalogue ───────────────────────────────────────────────────── */
.nl-badge-saison {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--nl-saison-vert);
	border-radius: 3px;
	padding: 0.2em 0.55em;
	margin-top: 0.4rem;
}

/* ─── Bloc En-tête saison (Gutenberg) ───────────────────────────────────── */
/*
 * Les styles de couleur/espacement/typo sont injectés dynamiquement par WP
 * via les supports (get_block_wrapper_attributes). On définit ici uniquement
 * la mise en page et les valeurs par défaut si aucun style éditeur n'est choisi.
 */

.nl-saison-header {
	border-radius: var(--nl-saison-radius);
	padding: 1.25rem 1.5rem;
}

/* Couleurs par défaut (overridables via le color picker éditeur) */
.nl-saison-header--saison {
	background-color: var(--nl-saison-vert-clair);
	border-left: 4px solid var(--nl-saison-vert);
}
.nl-saison-header--fete {
	background-color: var(--nl-saison-or-clair);
	border-left: 4px solid var(--nl-saison-or);
}
.nl-saison-header--terroir {
	background-color: var(--nl-saison-violet-clair);
	border-left: 4px solid var(--nl-saison-violet);
}

/* Quand le client choisit une couleur de fond via le color picker,
   WP injecte has-{slug}-background-color — on retire la bordure colorée
   pour éviter le conflit visuel avec un fond personnalisé. */
.nl-saison-header[class*="has-"][class*="-background-color"] {
	border-left-color: transparent;
}

.nl-saison-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.nl-saison-header__titre {
	font-weight: 700;
	font-size: 1.1rem;
	color: inherit;
}

.nl-saison-header--saison .nl-saison-header__titre { color: var(--nl-saison-vert); }
.nl-saison-header--fete   .nl-saison-header__titre { color: var(--nl-saison-or); }
.nl-saison-header--terroir .nl-saison-header__titre { color: var(--nl-saison-violet); }

/* Si le client a choisi une couleur de texte explicite, elle prime */
.nl-saison-header[class*="has-"][class*="-color"] .nl-saison-header__titre {
	color: inherit;
}

.nl-saison-header__count {
	font-size: 0.85rem;
	color: var(--wp--preset--color--base3, #8D827A);
}

.nl-saison-header__lien {
	margin-left: auto;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}
.nl-saison-header__lien:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.nl-encart-saison__grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.nl-encart-saison__produit img {
		height: 110px;
	}
}