/**
 * Garbit 2026 - styles complémentaires.
 * Uniquement ce qui n'est pas exprimable via theme.json / les blocs.
 */

/* Évite une barre de défilement horizontale due aux sections plein écran. */
body {
	overflow-x: clip;
	font-size: 18px;
}

:where(.wp-site-blocks) > *{
	margin-top: 0;
}
:root :where(.wp-element-button, .wp-block-button__link){
	border-radius: 0;
	font-size: var(--wp--preset--font-size--large);
}

main{
	overflow-x: hidden;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

main > h1{
	display: none;
}

main > div{
	margin-top: 0 !important;
}

.mxw-700{
	max-width: 700px;
}

/* =========================================================================
   Sections pleine largeur
   -------------------------------------------------------------------------
   Chaque bloc « align full » occupe toute la largeur de la fenêtre (couleurs
   de fond comprises), sans être bridé par le conteneur <main>. Le contenu
   interne reste, lui, limité par la mise en page « constrained » du bloc
   (contentSize) - seule la couleur / le fond va bord à bord.
   S'applique quel que soit le gabarit qui rend la page : front-page,
   page (wp:post-content), single, etc. - d'où les différents conteneurs
   possibles autour du bloc « align full ».
   ========================================================================= */
main.wp-block-group > .alignfull,
main.wp-block-group > .wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull,
.entry-content > .alignfull,
.garbit-fullbleed {
	width: 100dvw;
	max-width: 100dvw;
	/* Recentre par rapport à la fenêtre quel que soit le décalage du parent. */
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50dvw);
}

/* --- Titres « badge » surlignés (comme la maquette : mot dans une pastille de couleur) --- */
.is-style-badge-vert mark,
.is-style-badge-jaune mark,
.is-style-badge-blanc mark {
	background: transparent;
}

.wp-block-heading.is-style-badge-vert,
.wp-block-heading.is-style-badge-jaune,
.wp-block-heading.is-style-badge-blanc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}

.wp-block-heading.is-style-badge-vert.has-text-align-center,
.wp-block-heading.is-style-badge-jaune.has-text-align-center,
.wp-block-heading.is-style-badge-blanc.has-text-align-center {
	justify-content: center;
}

/* Le dernier mot du titre reçoit la pastille via ::after n'est pas possible :
   on stylise plutôt un <mark> ou <strong> interne. Fallback : pastille sur tout le titre. */
.wp-block-heading.is-style-badge-vert strong,
.wp-block-heading.is-style-badge-vert mark {
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	padding: 0 12px 5px 12px;
}

.wp-block-heading.is-style-badge-blanc strong,
.wp-block-heading.is-style-badge-blanc mark {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-fonce);
	padding: 0 12px 5px 12px;
}

.wp-block-heading.is-style-badge-jaune strong,
.wp-block-heading.is-style-badge-jaune mark {
	background-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir);
	padding: 0 12px 5px 12px;
}

/* --- Cadre Polaroïd pour les cartes réseaux sociaux --- */
.wp-block-image.is-style-polaroid img {
	border: 8px solid var(--wp--preset--color--blanc);
	border-bottom-width: 40px;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	background: var(--wp--preset--color--blanc);
}

/* --- Cadre Polaroïd jaune (section « Nos engagements ») --- */
.wp-block-image.is-style-polaroid-jaune img {
	border: 4px solid var(--wp--preset--color--jaune);
}

@media (max-width: 781px){
	.wp-block-image.is-style-polaroid-jaune img{
		aspect-ratio: 16 / 9 !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	.garbit-galerie-fullwidth__col{
		aspect-ratio: 16 / 9;
	}
	/* 
	.garbit-galerie-fullwidth__img{
		aspect-ratio: 16 / 9;
		height: auto;
	} */
}

/* --- Boutons « pilule » (héro) --- */
.wp-block-button.is-style-pilule-blanche .wp-block-button__link {
	border-radius: 999px;
	font-weight: 700;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

/* --- Héro : léger dégradé pour lisibilité du texte sur les visuels --- */
.garbit-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* --- En-tête : liens de navigation en noir sur fond beige --- */
/* Sticky sur le viewport. On cible aussi `.garbit-header` car la page produit
   (single-garbit_produit.php) charge le part via `block_template_part()`, qui
   rend `<header class="garbit-header">` sans la classe `wp-block-template-part`
   des gabarits FSE : sans ce sélecteur, le sticky ne s'appliquait pas là. */
header.wp-block-template-part,
.garbit-header {
	position: sticky;
	top: 0;
	z-index: 10;
}
.home .garbit-header{
	padding-bottom: var(--wp--preset--spacing--30) !important;
}

.garbit-header > div,
.garbit-footer > div {
	max-width: 1440px;
    justify-content: space-between;
}

.garbit-header .wp-block-navigation a {
	color: var(--wp--preset--color--noir);
}

.garbit-header .wp-block-navigation a:hover,
.garbit-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--vert);
}

/* --- En-tête : bordure verte sous la catégorie courante (JED-38) --- */
.garbit-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	position: relative;
}
.garbit-header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -39px;
	left: 0;
	right: 0;
	height: 0px;
	background-color: transparent;
	transition: all 0.3s ease;
}
.garbit-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.garbit-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--vert);
	height: 4px;
}

/* --- En-tête : bouton « Contactez-nous » avec icône e-mail (maquette) --- */
.garbit-btn-contact .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.garbit-btn-contact .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-email.svg") no-repeat center / contain;
	mask: url("../images/icon-email.svg") no-repeat center / contain;
}

.wp-block-button__link.has-vert-background-color{
	transition: all 0.3s ease;
}
.wp-block-button__link.has-vert-background-color:hover {
	background-color: var(--wp--preset--color--vert-fonce) !important;
}

/* Le bouton « Fermer » du panneau overlay reprend le vert de la marque. */
.garbit-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--vert);
}

/* Bouton burger (fermé) : libellé « Menu » + icône, en noir (maquette). */
.garbit-header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--noir);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

.garbit-header .wp-block-navigation__responsive-container-open::before {
	content: "Menu";
}

/* Masque le SVG inline rendu par WP core et le remplace par burger-menu.svg. */
.garbit-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.garbit-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../images/burger-menu.svg") no-repeat center / contain;
	mask: url("../images/burger-menu.svg") no-repeat center / contain;
	flex: 0 0 auto;
}

/* --- Section « Nos produits » : ligne pointillée décorative en fond --- */
.garbit-produits {
	position: relative;
	overflow: hidden;
}

.garbit-produits-columns{
	gap: 30px;
}

.garbit-produits::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 502px;
	height: 341px;
	background: url("../images/ligne-pointilles-1.svg") no-repeat left top / contain;
	pointer-events: none;
	z-index: 0;
}

.garbit-produits > .wp-block-columns {
	position: relative;
	z-index: 1;
}

/* --- Titre « Nos produits » : accent décoratif (deux rectangles verts) --- */
.garbit-produits-titre mark {
	position: relative;
}

.garbit-produits-titre mark::after {
	content: "";
	position: absolute;
	top: -0.9em;
	right: -0.7em;
	width: 0.85em;
	height: 1em;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}

/* --- Cartes produits : cadre polaroïd blanc sur fond jaune --- */
.garbit-produits-columns .garbit-produit:nth-child(odd) {
	transform: rotate(2deg);
}
.garbit-produits-columns .garbit-produit:nth-child(even) {
	transform: rotate(-2deg);
}
.garbit-produit-carte {
	border: 4px solid var(--wp--preset--color--jaune);
}

.garbit-produit-carte > div{
	padding: 0 !important;
}

.garbit-produit-carte p{
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 32px;
}
.garbit-produit-carte h3{
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 32px;
	margin-top: 0;
}

.btn-arrow .wp-element-button{
	display: inline-flex !important;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
}
.btn-arrow .wp-element-button::after {
	content: "";
	width: 32px;
	height: 32px;
	display: inline-flex;
	background: url("../images/icon-arrow-right-green.svg") no-repeat center / contain;
}

/* =========================================================================
   Section « Nos engagements »
   ========================================================================= */
.garbit-engagements {
	position: relative;
	overflow: visible;
	margin-top: 0;
}

.garbit-engagements > * {
	position: relative;
	z-index: 1;
}

/* Titre centré avec pastille blanche et apostrophes décoratives */
.garbit-engagements-titre {
	margin-bottom: 0;
}

.garbit-engagements-titre mark,
.garbit-saviezvous-titre mark {
	position: relative;
}

.garbit-saviezvous-titre mark::after,
.garbit-engagements-titre mark::after {
	content: "";
	position: absolute;
	top: -0.9em;
	right: -0.7em;
	width: 0.85em;
	height: 1em;
	background: url("../images/apostrophes-blanc.svg") no-repeat center / contain;
}

.garbit-galerie-fullwidth{
	margin-top: 0;
	padding: 6px;
	background-color: var(--wp--preset--color--jaune);
}

.garbit-galerie-fullwidth .garbit-galerie-fullwidth__grid{
	gap: 6px;
}

/* Colonnes */
.garbit-engagements-columns {
	align-items: flex-start;
}

/* Chaque colonne engagement : séparateur pointillé blanc en bas */
.garbit-engagement {
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 6px dotted var(--wp--preset--color--blanc);
}

.garbit-engagement .is-style-polaroid-jaune {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Titre h3 : bold Exo2 + partie cursive en italique */
.garbit-engagement h3 {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.garbit-engagement h3 em {
	font-family: var(--wp--preset--font-family--vujahday-script, cursive);
	font-style: normal;
	font-weight: 400;
	font-size: 1.25em;
}

.garbit-engagement p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin-top: 0;
}

/* Liste checklist avec coche jaune */
.garbit-engagement-liste {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
}

.garbit-engagement-liste li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	padding: 0;
}

.garbit-engagement-liste li::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
	background: url("../images/icon-check-jaune.svg") no-repeat center / contain;
}

/* Icônes recyclage */
.garbit-engagement-icones {
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.garbit-engagement-icones .garbit-icone-recyclage {
	margin: 0;
}

/* =========================================================================
   Section « Nous suivre »
   ========================================================================= */
.garbit-suivre {
	position: relative;
	overflow: visible;
	margin-top: 0;
}

/* Ligne pointillée verte décorative, en bas à gauche de la section (maquette). */
.garbit-suivre::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 150px;
	background: url("../images/ligne-pointilles-3.svg") no-repeat left bottom / contain;
	pointer-events: none;
	z-index: 0;
}

.garbit-suivre > * {
	position: relative;
	z-index: 1;
}

.garbit-suivre-columns{
	gap: 8px;
}

/* Titre « Nous suivre » : aligné à gauche, pastille verte + accent des 2 pastilles en haut à droite. */
.garbit-suivre-titre {
	position: relative;
	display: inline-flex;
}

.garbit-suivre-titre mark{
	position: relative;
}
.garbit-suivre-titre mark::after {
	content: "";
	position: absolute;
	top: -0.6em;
	right: -0.7em;
	width: 0.6em;
	height: 0.7em;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}

.has-font-weight-700{
	font-weight: 700;
}
.garbit-saviez-vous-columns div p{
	margin-top: 24px;
}

/* Cartes réseaux sociaux : image administrable (publication) + légende sur fond jaune. */
.garbit-suivre-carte {
	align-self: flex-start;
}

.garbit-suivre-carte-image {
	margin: 0;
	background-color: var(--wp--preset--color--vert);
}

.garbit-suivre-carte-image img {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.garbit-suivre-carte-legende {
	margin-top: var(--wp--preset--spacing--30);
	text-align: center;
	font-weight: 700;
}

/* Boutons de suivi : bandeau plein largeur, fond beige carré, picto administrable. */
.garbit-suivre-boutons {
	width: 100%;
	gap: 8px;
	margin-top: 16px;
}

.garbit-suivre-bouton {
	flex: 1 1 0;
	gap: 10px;
	padding: 12px 16px;
}

.garbit-suivre-bouton-texte {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.garbit-suivre-bouton-texte a {
	color: inherit;
	text-decoration: none;
}

.garbit-suivre-picto {
	flex: 0 0 auto;
	margin: 0;
	width: 24px;
	height: 24px;
}

.garbit-suivre-picto img {
	display: block;
	width: 24px;
	height: 24px;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* =========================================================================
   Section « Le saviez-vous »
   ========================================================================= */
.garbit-saviez-vous {
	position: relative;
	overflow: hidden;
	border: 4px solid var(--wp--preset--color--jaune);
	border-radius: 4px;
}

/* Ligne pointillée décorative, en haut à gauche de la section (maquette). */
.garbit-saviez-vous::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 315px;
	height: 203px;
	background: url("../images/ligne-pointilles-5.svg") no-repeat left top / contain;
	pointer-events: none;
	z-index: 0;
}

/* Ligne pointillée décorative, en bas à droite de la section (maquette). */
.garbit-saviez-vous::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 297px;
	height: 120px;
	background: url("../images/ligne-pointilles-6.svg") no-repeat right bottom / contain;
	pointer-events: none;
	z-index: 0;
}

.garbit-saviez-vous > * {
	position: relative;
	z-index: 1;
}

.garbit-saviez-vous-image {
	margin: 0;
}

@media (max-width: 1320px){
	.garbit-produits::before{
		left: -20px;
	}
}

/* --- Responsive : cartes produits / engagements / réseaux en colonne sur mobile --- */
@media (max-width: 781px) {
	.garbit-produits .wp-block-columns,
	.garbit-engagements .wp-block-columns,
	.garbit-suivre .wp-block-columns {
		gap: 1.5rem;
	}

	.garbit-produits .wp-block-columns,
	.garbit-produits > .wp-block-columns > .wp-block-column,
	.garbit-produits .wp-block-column > .wp-block-columns {
		flex-wrap: wrap;
	}

	.garbit-produits > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.garbit-produits .wp-block-column > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.garbit-produits::before {
		width: 240px;
		height: 163px;
		opacity: 0.6;
	}

	.garbit-hero {
		text-align: center;
	}

	/* Nos engagements : 2 colonnes sur tablette */
	.garbit-engagements-columns.garbit-engagements-columns {
		flex-wrap: wrap;
	}
	.wp-block-columns.garbit-engagements-columns > .wp-block-column.garbit-engagement {
		flex-basis: calc(50% - 0.75rem) !important;
	}

	.garbit-suivre .wp-block-columns,
	.garbit-suivre > .wp-block-columns > .wp-block-column,
	.garbit-suivre .wp-block-column > .wp-block-columns {
		flex-wrap: wrap;
	}

	.garbit-suivre > .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
	}

	.garbit-suivre::before {
		width: 160px;
		height: 118px;
	}

	.garbit-suivre-columns,
	.garbit-suivre .wp-block-columns{
		gap: 8px;
	}
	.garbit-suivre-carte-image img{
		display: block;
		margin: auto;
	}
	.garbit-suivre-carte:nth-child(3),
	.garbit-suivre-carte:nth-child(4) {
		display: none;
	}
	.garbit-suivre-boutons{
		flex-direction: column;
	}
	.garbit-suivre-boutons .garbit-suivre-bouton{
		width: 100%;
	}

	.garbit-saviez-vous-columns.garbit-saviez-vous-columns {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.garbit-saviez-vous-columns.garbit-saviez-vous-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.garbit-saviez-vous::before {
		top: -40px;
	}
	.garbit-saviez-vous::after {
		display: none;
	}
}

@media (max-width: 480px) {
	/* Nos engagements : 1 colonne sur mobile. */
	.wp-block-columns.garbit-engagements-columns > .wp-block-column.garbit-engagement {
		flex-basis: 100% !important;
	}

	.garbit-engagement-pill .wp-block-button__link {
		font-size: 12px !important;
		padding: 0.4em 0.9em;
	}

	/* Le titre « Nos engagements » ne doit pas dépasser la largeur de l'écran. */
	h2.wp-block-heading.garbit-engagements-titre.has-xxx-large-font-size {
		font-size: 28px !important;
	}

	/* Nous suivre : 1 photo par ligne, boutons empilés, décor réduit. */
	.garbit-suivre-boutons {
		flex-direction: column;
		align-items: stretch;
	}

	.garbit-suivre-bouton {
		justify-content: center;
	}

	.garbit-suivre::before {
		width: 110px;
		height: 81px;
	}

	h2.wp-block-heading.garbit-suivre-titre.has-xxx-large-font-size {
		font-size: 28px !important;
	}

	.wp-block-heading.is-style-badge-vert strong, .wp-block-heading.is-style-badge-vert mark{
		padding: 5px 10px 10px 10px;
	}

	.btn-arrow{
		width: 100%;
	}
	.btn-arrow .wp-element-button{
		gap: 0px;
		justify-content: space-between;
		box-sizing: border-box;
		font-size: 18px;
	}
}

/* --- En-tête responsive (tablette / mobile) --- */
@media (max-width: 900px) {
	/* Le logo reste lisible sans écraser la barre. */
	.garbit-header .wp-block-site-logo img {
		width: 170px;
		height: auto;
	}

	.garbit-header__end {
		gap: var(--wp--preset--spacing--30);
	}
}

/* Menu superposé (burger) : liens empilés et centrés. */
.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
}

/* La copie du bouton « Contactez-nous » ne doit jamais apparaître sur desktop : elle n'a de
   sens que dans le panneau overlay mobile (voir règle qui la réaffiche plus bas, ≤1050px).
   !important nécessaire : le cœur applique display:flex via .is-layout-flex (2 classes),
   plus spécifique que .garbit-header__cta--overlay seule. */
.garbit-header__cta--overlay {
	display: none !important;
}

/* --- Bascule menu mobile / desktop à 1050px (au lieu du seuil par défaut de 600px) --- */
@media (max-width: 1050px) {
	.garbit-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.garbit-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Le bouton burger s'efface au profit du bouton « Fermer » quand le panneau est ouvert. */
	.garbit-header .wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
		display: none;
	}

	/* Le bouton « Contactez-nous » d'origine (header) ne s'affiche jamais sur mobile :
	   seul le burger « Menu » reste visible dans la barre ; sa copie n'apparaît
	   que dans le panneau overlay une fois ouvert (règle ci-dessous). */
	.garbit-header__end > .garbit-header__cta {
		display: none;
	}

	/* La copie du bouton « Contactez-nous » n'apparaît que dans le panneau overlay ouvert. */
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .garbit-header__cta--overlay {
		display: flex !important;
		margin-top: var(--wp--preset--spacing--40);
	}

	/* Overlay vert plein écran sous la barre d'en-tête (logo + Fermer), qui reste visible au-dessus (maquette). */
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: rgba(0, 128, 31, 0.80) !important;
		top: 111px;
		height: calc(100dvh - 111px) !important;
		padding: var(--wp--preset--spacing--40) !important;
		/* Le panneau est court (pas de scroll nécessaire) : on repasse l'overflow en visible
		   pour que le bouton « Fermer », remonté par-dessus dans la barre d'en-tête, ne soit
		   pas rogné par le conteneur (overflow:auto par défaut du cœur). */
		overflow: visible !important;
		z-index: 3;
	}

	.garbit-header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after{
		bottom: -10px;
	}

	/* Le panneau : carte ancrée en haut, marges vertes autour, hauteur ajustée au contenu (maquette). */
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: fit-content;
		margin: 0;
		padding: var(--wp--preset--spacing--50);
		background-color: var(--wp--preset--color--beige);
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding-top: 0 !important;
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		text-align: left;
		width: 100%;
		gap: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--medium);
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .garbit-header__cta,
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .garbit-btn-contact,
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .garbit-btn-contact .wp-block-button__link {
		width: 100%;
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .garbit-btn-contact .wp-block-button__link {
		justify-content: center;
		font-size: var(--wp--preset--font-size--medium, 1rem) !important;
	}

	/* Bouton « Fermer » : repositionné dans la barre d'en-tête, à côté du logo (maquette).
	   Le panneau overlay (.is-menu-open) est lui-même position:fixed : il devient donc le
	   containing block de ce bouton, qui ne peut plus se positionner par rapport au viewport.
	   On le place en absolute et on remonte du padding du panneau + de la hauteur du header
	   pour revenir dans la barre d'en-tête. */
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: calc(-1 * (111px + var(--wp--preset--spacing--40)));
		right: calc(var(--wp--preset--spacing--50) - var(--wp--preset--spacing--40));
		z-index: 3;
		height: 111px;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0;
		color: var(--wp--preset--color--noir);
		font-weight: 700;
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
		content: "Fermer";
		font-size: var(--wp--preset--font-size--medium, 1rem);
	}
}

@media (max-width: 900px) {
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open {
		top: 116px;
		height: calc(100dvh - 116px) !important;
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc(-1 * 116px - 20px);
		height: 116px;
	}

	.garbit-fil-ariane{
		top: 116px !important;
	}
}

@media (min-width: 1051px) {
	.garbit-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Texte réservé aux lecteurs d'écran (accessibilité). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Pied de page : logo / plan du site / bouton contact alignés (maquette) --- */
.garbit-footer h3{
	font-weight: 700;
}

.garbit-footer-top {
	align-items: flex-start;
}

.garbit-footer-brand {
	flex-grow: 1;
	flex-basis: 320px;
	max-width: 400px;
}

.garbit-footer-brand .wp-block-site-logo {
	margin: 0;
}

.garbit-footer-brand p{
	line-height: 1.3;
}

.garbit-footer-brand p:last-child {
	margin-top: 10px;
}

.garbit-footer-brand .has-blanc-color a {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
}

.garbit-footer-navigation{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 48px;
}

.garbit-footer-navigation .garbit-footer-cta {
	margin-top: 0;
}

.garbit-footer-nav,
.garbit-footer-cta {
	flex-grow: 0;
}

.garbit-footer .wp-block-navigation a {
	color: var(--wp--preset--color--blanc);
}

.garbit-footer .wp-block-navigation a:hover,
.garbit-footer .wp-block-navigation a:focus {
	color: var(--wp--preset--color--beige-clair);
}

.garbit-footer-cta .wp-block-button__link {
	white-space: nowrap;
}

.garbit-footer-bottom {
	margin-top: 120px;
}

.garbit-footer-legal{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

.garbit-footer-legal a {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
}

.garbit-footer-legal a:hover,
.garbit-footer-legal a:focus {
	color: var(--wp--preset--color--beige-clair);
}

@media (max-width: 781px) {
	.garbit-footer{
		text-align: center;
	}
	.garbit-footer-brand{
		max-width: 100%;
		flex-basis: 100%;
	}
	.garbit-footer-navigation{
		margin-top: 48px !important;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}
	.garbit-footer-navigation ul{
		align-items: center;
	}
	.garbit-footer-top {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--40);
	}
	.garbit-footer-nav,
	.garbit-footer-cta {
		flex-basis: 100%;
	}
	.garbit-footer-cta .wp-block-buttons {
		justify-content: flex-start;
	}
	.garbit-footer-bottom,
	.garbit-footer-legal{
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 480px) {
	.garbit-footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}

	.garbit-footer-cta .wp-block-button {
		width: 100%;
	}

	.garbit-footer-cta .wp-block-button__link {
		justify-content: center;
		width: 100%;
	}
}

/* =========================================================================
   Bouton avec flèche - composant réutilisable (flèche blanche intégrée)
   ========================================================================= */
.garbit-btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.85rem 1.5rem;
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.garbit-btn-arrow:hover,
.garbit-btn-arrow:focus-visible {
	background-color: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
	transform: translateY(-1px);
}

.garbit-slider .garbit-btn-arrow.btn-white-bg{
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert);
}

.garbit-slider .garbit-btn-arrow.btn-green-bg{
	background-color: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
}

.garbit-slider .garbit-btn-arrow.btn-white-bg:hover,
.garbit-slider .garbit-btn-arrow.btn-white-bg:focus-visible {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-fonce);
}

.garbit-slider .garbit-btn-arrow.btn-green-bg:hover,
.garbit-slider .garbit-btn-arrow.btn-green-bg:focus-visible {
	background-color: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
}

/* La flèche blanche est toujours présente dans le bouton (composant). */
.garbit-btn-arrow__icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right-white.svg") no-repeat center / contain;
	mask: url("../images/icon-arrow-right-white.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.garbit-btn-arrow:hover .garbit-btn-arrow__icon {
	transform: translateX(3px);
}

/*
 * Dans le hero/carrousel (fond vert), le bouton reprend la pilule blanche
 * de la maquette : fond blanc, texte + flèche verts. Le bouton vert plein
 * serait illisible sur le fond vert du slide.
 */
.garbit-slider .garbit-btn-arrow {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert);
}

.garbit-slider .garbit-btn-arrow:hover,
.garbit-slider .garbit-btn-arrow:focus-visible {
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--vert-fonce);
}

/* =========================================================================
   Slider / carrousel
   ========================================================================= */
:root {
	--garbit-slider-min-height: max(80dvh, 600px);
	--garbit-slider-aspect-ratio: 1440 / 767;
}

.garbit-slider {
	position: relative;
	overflow: hidden;
	min-height: var(--garbit-slider-min-height); /* Pour que le slider occupe toute la hauteur de la fenêtre sur mobile. */
	aspect-ratio: var(--garbit-slider-aspect-ratio); /* Pour que le slider conserve un ratio correct sur desktop. */
	position: relative;
}

.garbit-slider--empty {
	padding: 2rem;
	text-align: center;
	background: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--noir);
}

.garbit-slider__viewport {
	position: relative;
}

.garbit-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: max(var(--garbit-slider-min-height, 560px), 600px);
}

.garbit-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: var(--garbit-slider-min-height);
	aspect-ratio: var(--garbit-slider-aspect-ratio); /* Pour que le slider conserve un ratio correct sur desktop. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--vert);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.garbit-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	position: relative; /* Le slide actif définit la hauteur du carrousel. */
}

.garbit-slider__content {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
}

.garbit-slider__title {
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 800;
	line-height: 1.2;
	font-size: var(--wp--preset--font-size--display);
	margin: 0;
}

/* Mot mis en avant : pastille au choix (fond blanc/texte vert ou fond vert/texte blanc). */
.garbit-slider__highlight {
	padding: 0 20px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.garbit-slider__highlight--white-bg {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert);
}

.garbit-slider__highlight--green-bg {
	background-color: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--blanc);
}

.garbit-slider__text {
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

/* --- Flèches de navigation (SVG flèche verte ; gauche = rotation) --- */
.garbit-slider__nav {
	position: absolute;
	bottom: var(--wp--preset--spacing--40);
	transform: translateY(-50%);
	z-index: 1;
	width: 48px;
	height: 48px;
	border: none;
	background-color: var(--wp--preset--color--blanc);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.garbit-slider__nav::before {
	content: "";
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	background: url("../images/icon-arrow-right-green.svg") no-repeat center / contain;
}

.garbit-slider__nav--prev {
	left: calc(50% - 48px - 8px);
}

.garbit-slider__nav--next {
	left: calc(50% + 8px);
}

/* Flèche gauche : même ressource, pivotée de 180°. */
.garbit-slider__nav--prev::before {
	transform: rotate(180deg);
}

.garbit-slider__nav:hover {
	background-color: var(--wp--preset--color--beige);
}

.garbit-slider__nav:focus-visible {
	outline: 3px solid var(--wp--preset--color--jaune);
	outline-offset: 2px;
}

/* --- Responsive slider --- */
@media (max-width: 781px) {
	.garbit-slider__slide {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.garbit-slider__nav {
		width: 2.5rem;
		height: 2.5rem;
	}

	.garbit-slider__nav::before {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* Respect des préférences de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
	.garbit-slider__slide {
		transition: none;
	}

	.garbit-btn-arrow,
	.garbit-btn-arrow__icon,
	.garbit-slider__nav,
	.garbit-slider__dot {
		transition: none;
	}
}

.garbit-engagement-decor{
	position: absolute;
	top: -230px;
	right: -150px;
	width: 260px;
}

.garbit-engagement > figure{
	position: relative;
	z-index: 1;
}

.garbit-engagement-decor .wp-block-image.is-style-polaroid-jaune{
	border: 4px solid var(--wp--preset--color--jaune);
	background-color: var(--wp--preset--color--blanc);
	padding: 10px 10px 50px 10px;
	transform: rotate(-18deg);
	box-sizing: border-box;
	position: relative;
}

.garbit-engagement-decor .wp-block-image.is-style-polaroid-jaune::after{
	content: "";
	position: absolute;
	top: -50px;
	right: -40px;
	width: 47px;
	height: 50px;
	background: url("../images/apostrophes-orange.svg") no-repeat center / contain;
	pointer-events: none;
}

.garbit-engagement-decor .wp-block-image.is-style-polaroid-jaune img{
	border: none;
	width: 100%;
}

@media (max-width: 1200px){
	:root{
		--garbit-produit: 250px;
		--wp--preset--font-size--display: 50px;
	}

	.garbit-produits > div {
		flex-direction: column;
	}
	.garbit-produits > div > div {
		flex-basis: 100% !important;
		align-self: flex-start !important;
	}
	.garbit-produits > div > div:last-child{
		max-width: 100dvw !important;
		transform: translateX(-40px);
		overflow-x: scroll;
		scrollbar-width: none;
		padding: 24px;
		box-sizing: border-box;
	}
	.garbit-produits .garbit-produits-columns{
		flex-wrap: nowrap !important;
		width: calc(var(--garbit-produit) * 3 + (24px * 2));
	}
	.garbit-produits .garbit-produit-carte{
		width: var(--garbit-produit);
	}

	.garbit-engagement-decor{
		top: -146px;
    	right: -90px;
	}
	.garbit-engagement-decor figure{
		width: 150px;
	}
}

@media (max-width: 781px){
	.garbit-engagement-decor{
		display: none;
	}
}

/* =========================================================================
   Bloc « Titre Garbit » (garbit2026/titre)
   ========================================================================= */

/* --- Section conteneur --- */
.garbit-titre-section {
	position: relative;
	overflow: hidden;
	padding: 80px var(--wp--preset--spacing--50, 2rem);
}

.garbit-titre-section--bg-vert {
	background-color: var(--wp--preset--color--vert, #2e7d32);
	color: var(--wp--preset--color--blanc, #fff8ee);
}

.garbit-titre-section--bg-jaune {
	background-color: var(--wp--preset--color--jaune, #f5c200);
	color: var(--wp--preset--color--vert-fonce, #1a3c1e);
}

.garbit-titre-section--bg-beige {
	background-color: var(--wp--preset--color--beige, #f9f5f0);
	color: var(--wp--preset--color--vert-fonce, #1a3c1e);
}

/* Ligne pointillée : bord droit de la section, courbe vers le bas */
.garbit-titre-section--pointilles::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 557px;
	height: 227px;
	background: url("../images/ligne-pointilles-4.svg") no-repeat right center / contain;
	pointer-events: none;
	z-index: 0;
}

.garbit-titre-section__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --- Titre --- */
.garbit-titre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	margin-bottom: 0.5em;
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
}

.garbit-titre.has-text-align-left {
	justify-content: flex-start;
}

.garbit-titre.has-text-align-right {
	justify-content: flex-end;
}

/* neutralise la marge par défaut des headings */
.garbit-titre-section h1.garbit-titre,
.garbit-titre-section h2.garbit-titre,
.garbit-titre-section h3.garbit-titre,
.garbit-titre-section h4.garbit-titre,
.garbit-titre-section h5.garbit-titre,
.garbit-titre-section h6.garbit-titre {
	margin-top: 0;
}

/* mark sans fond natif du navigateur */
.garbit-titre mark {
	background: transparent;
}

/* --- Pastilles badge --- */
.garbit-titre__highlight {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Badge blanc (fond blanc, texte vert foncé) */
.garbit-titre--badge-blanc .garbit-titre__highlight {
	background-color: var(--wp--preset--color--blanc, #fff8ee);
	color: var(--wp--preset--color--vert-fonce, #1a3c1e);
	padding: 4px 12px 8px;
}

/* Badge vert (fond vert, texte blanc) */
.garbit-titre--badge-vert .garbit-titre__highlight {
	background-color: var(--wp--preset--color--vert, #2e7d32);
	color: var(--wp--preset--color--blanc, #fff8ee);
	padding: 4px 12px 8px;
}

/* Badge jaune (fond jaune, texte noir) */
.garbit-titre--badge-jaune .garbit-titre__highlight {
	background-color: var(--wp--preset--color--jaune, #f5c200);
	color: var(--wp--preset--color--noir, #1a1a1a);
	padding: 4px 20px 8px;
}

/* Apostrophe blanche en haut à droite du badge */
.garbit-titre__highlight--apostrophe::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: 0.75em;
	height: 0.9em;
	background: url("../images/apostrophes-blanc.svg") no-repeat center / contain;
	pointer-events: none;
}

.garbit-produit__colonne--droite .garbit-titre__highlight--apostrophe::after {
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}
.garbit-produit__colonne--droite .garbit-produit__titre{
	align-self: flex-start;
}
.garbit-produit__colonne--droite .garbit-produit__soustitre{
	font-weight: 600;
}

/* --- Sous-titre --- */
.garbit-titre-section__subtitle {
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
	margin: 0.75em auto 0;
	max-width: 680px;
	line-height: 1.6;
}

.garbit-titre-section--bg-vert .garbit-titre-section__subtitle {
	color: var(--wp--preset--color--blanc, #fff8ee);
}

/* --- Responsive --- */
@media (max-width: 782px) {
	.garbit-titre-section {
		padding: 60px var(--wp--preset--spacing--40, 1.5rem);
	}

	.garbit-titre-section--pointilles::after {
		bottom: -100px;
		right: 50px;
		transform: rotate(15deg);
		transform-origin: bottom right;
	}
}

/* --- Bloc « Liste des produits » : filtres + grille de cartes --- */
.garbit-produits-liste--empty {
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	color: var(--wp--preset--color--vert-fonce);
}

.garbit-produits-liste__filtres {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	justify-content: flex-start;
	margin-bottom: var(--wp--preset--spacing--50);
	overflow-x: scroll;
	touch-action: pan-x;
	scrollbar-width: none;
}

.garbit-produits-liste__filtre {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.6rem 1.4rem;
	border: 2px solid var(--wp--preset--color--vert);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--vert);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	min-height: 40px;
	width: fit-content;
	white-space: nowrap;
}

.garbit-produits-liste__filtre:hover,
.garbit-produits-liste__filtre:focus-visible {
	background: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
}

.garbit-produits-liste__filtre.is-active {
	background: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
}

.garbit-produits-liste__categorie-titre {
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--vert);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.garbit-produits-liste__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.garbit-produits-liste__carte {
	display: flex;
	flex-direction: column;
	flex-basis: calc((100% - (32px * 3)) / 4);
	text-decoration: none;
	color: inherit;
}

.garbit-produits-liste__carte .garbit-produits-liste__visuel{
	padding: 34px;
	box-sizing: border-box;
	overflow: hidden;
	transition: background 0.3s ease;
}

.garbit-produits-liste__carte:hover .garbit-produits-liste__visuel{
	background-color: var(--wp--preset--color--jaune);
}

.garbit-produits-liste__carte .garbit-produits-liste__visuel img{
	transition: transform 0.3s ease;
}

.garbit-produits-liste__carte:hover .garbit-produits-liste__visuel img{
	transform: rotate(5deg) scale(1.1);
	transform-origin: center;
}

.garbit-produits-liste__carte.is-hidden {
	display: none;
}

/* =========================================================================
   Bloc « Fil d'Ariane » (garbit2026/fil-ariane)
   ========================================================================= */
.home .garbit-fil-ariane{
	display: none;
}
.garbit-fil-ariane {
	display: block;
	width: 100dvw;
	background-color: var(--wp--preset--color--jaune);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: 0;
	position: sticky;
	top: 111px;
	z-index: 2;
}

.garbit-fil-ariane + div,
.garbit-fil-ariane + section,
.garbit-fil-ariane + article{
	margin-top: 0;
}

.garbit-fil-ariane__liste {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	max-width: 1440px;
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--noir);
	overflow-x: scroll;
	scrollbar-width: none;
}

.garbit-fil-ariane__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
}

.garbit-fil-ariane__item:last-child{
	padding-right: clamp(1rem, 4vw, 3rem);
}

.garbit-fil-ariane__lien {
	color: var(--wp--preset--color--noir);
	text-decoration: underline;
}

.garbit-fil-ariane__lien:hover,
.garbit-fil-ariane__lien:focus-visible {
	text-decoration: none;
}

.garbit-fil-ariane__actuel {
	color: var(--wp--preset--color--noir);
	font-weight: 400;
}

.garbit-fil-ariane__separateur {
	color: var(--wp--preset--color--noir);
	opacity: 0.7;
}

.garbit-fil-ariane__separateur::before {
	content: "\276F";
	font-size: 0.85em;
}

.garbit-produits-liste__visuel {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--wp--preset--color--beige-fonce);
}

.garbit-produits-liste__visuel img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.garbit-produits-liste__titre {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 24px 0 0 0;
	font-weight: 600;
}

.garbit-produits-liste__titre mark {
	background: transparent;
	color: inherit;
}

.garbit-produits-liste__soustitre {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--noir);
	margin: 0;
}

.garbit-produits-liste__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: auto;
}

.garbit-produits-liste__poids {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--vert-fonce);
}

/* Badge Nutriscore : rond coloré avec la lettre, échelle officielle A-E. */
.garbit-badge-nutriscore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--garbit-nutriscore-color, #ccc);
	color: var(--wp--preset--color--blanc);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	line-height: 1;
}

/* Badge Yuka : score numérique coloré selon la note (rouge/orange/vert). */
.garbit-badge-yuka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--garbit-yuka-color, #ccc);
	color: var(--wp--preset--color--blanc);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
}

@media (max-width: 782px) {
	.garbit-produits-liste__carte {
		flex-basis: calc((100% - 32px) / 2);
	}
	.garbit-produits-liste__filtres{
		width: 100dvw;
		padding: 0 24px;
		transform: translateX(-24px);
	}
}

@media (max-width: 480px) {
	.garbit-produits-liste__carte {
		flex-basis: 100%;
	}
}

@media (max-width: 782px) {
	.garbit-titre--pointilles::after {
		width: 300px;
		height: 122px;
		right: -20px;
		bottom: -50px;
	}
}

/* --- Page produit (single garbit_produit) --- */
/* La page produit utilise un <main> classique (single-garbit_produit.php).
   La règle globale `main { overflow-x: hidden }` transforme ce <main> en
   conteneur de défilement et casse `position: sticky` sur ses descendants
   (colonne gauche). On rétablit `overflow: visible` uniquement ici pour que
   le sticky s'ancre bien sur le viewport. */
main.garbit-produit {
	overflow: visible;
}

.garbit-produit__grid {
	display: flex;
	flex-direction: row;
	gap: 80px;
	justify-content: space-between;
	align-items: flex-start;
	background-color: var(--wp--preset--color--beige-clair);
}

.garbit-produit__colonne--gauche {
	background-color: var(--wp--preset--color--beige-fonce);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 50%;
	position: sticky;
	top: calc(111px + 42px);
	height: calc(100dvh - 111px - 42px);
	padding: 16px;
	box-sizing: border-box;
}

.garbit-produit__colonne--droite {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: 50%;
	padding: 80px 80px 80px 0;
	box-sizing: border-box;
}

@media (max-width: 900px){
	.garbit-produit__grid{
		flex-direction: column;
		gap: 0;
	}

	.garbit-produit__colonne--droite,
	.garbit-produit__colonne--gauche {
		position: relative;
		top: 0;
		height: auto;
		min-height: 400px;
		flex-basis: 100%;
		width: 100%;
	}

	.garbit-produit__colonne--droite{
		padding: 56px 24px;
	}

	.garbit-produit__colonne--gauche .garbit-produit-carousel__dots{
		bottom: 16px;
	}
}

@media (max-width: 600px){
	.garbit-produit__colonne--gauche .garbit-produit-carousel__dots{
		bottom: -32px;
	}
}

/* --- Carousel (bloc gauche) --- */
.garbit-produit-carousel {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	width: 100%;
	max-width: 640px;
}

.garbit-produit-carousel__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
}

.garbit-produit-carousel__slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease;
	aspect-ratio: 4 / 3;
}

.garbit-produit-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Fallback sans JS : afficher la première image. */
.no-js .garbit-produit-carousel__slide {
	opacity: 1;
	visibility: visible;
}

.garbit-produit-carousel__slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

@media (max-width: 600px){
	.garbit-produit-carousel__slide{
		aspect-ratio: auto;
	}
}

.garbit-produit-carousel__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--wp--preset--color--vert);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.garbit-produit-carousel__arrow:hover {
	background: rgba(0, 128, 31, 0.08);
}

.garbit-produit-carousel__arrow:active {
	transform: scale(0.94);
}

.garbit-produit-carousel__arrow:focus-visible {
	outline: 3px solid var(--wp--preset--color--vert);
	outline-offset: 2px;
}

.garbit-produit-carousel__arrow img {
	width: 24px;
	height: 24px;
}

.garbit-produit-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.garbit-produit-carousel__dot {
	width: 88px;
	max-width: calc(100% / 10);
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(0, 128, 31, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.garbit-produit-carousel__dot:hover {
	background: rgba(0, 128, 31, 0.5);
}

.garbit-produit-carousel__dot.is-active {
	background: var(--wp--preset--color--vert);
}

.garbit-produit-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--vert);
	outline-offset: 2px;
}

/* --- Bloc droit : titre + infos --- */
.garbit-produit__titre {
	font-size: clamp(2rem, 3vw, var(--wp--preset--font-size--xx-large));
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	line-height: 1.1;
}

.garbit-produit__titre .garbit-titre__prefix {
	color: var(--wp--preset--color--noir);
}

.garbit-produit__soustitre {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--noir);
	margin: 0.25rem 0 0;
}

.garbit-produit__poids {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--noir);
	margin: 0.25rem 0 1.25rem;
}

.garbit-produit__description {
	color: var(--wp--preset--color--noir);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.garbit-produit__description p {
	margin: 0 0 1rem;
}

.garbit-produit__avantages {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.garbit-produit__avantage {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--noir);
}

.garbit-produit__check {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* --- Scores Nutri-Score / Yuka --- */
.garbit-produit__scores {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 80px;
}

.garbit-score {
	display: block;
	width: auto;
	height: 46px;
}

/* --- Accordéons Ingrédients / Conseils de préparation --- */
.garbit-produit__accordions {
	margin-top: auto;
}

.garbit-produit-accordion__heading {
	margin: 0;
	font-size: inherit;
	border-bottom: 1px solid var(--wp--preset--color--vert);
}

.garbit-produit-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--noir);
	text-align: left;
}

.garbit-produit-accordion__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--vert);
	outline-offset: 2px;
}

.garbit-produit-accordion__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 32px;
	height: 32px;
}

.garbit-produit-accordion__icon img {
	width: 32px;
	height: 32px;
}

/* Bascule des icônes +/- selon l'état ouvert/fermé. */
.garbit-produit-accordion__icon-moins {
	display: none;
}

.garbit-produit-accordion.is-open .garbit-produit-accordion__icon-plus {
	display: none;
}

.garbit-produit-accordion.is-open .garbit-produit-accordion__icon-moins {
	display: inline;
}

.garbit-produit-accordion__panel {
	padding: 24px 0;
}

.garbit-produit-accordion__texte {
	margin: 0;
	line-height: 1.6;
	color: var(--wp--preset--color--noir);
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.garbit-produit {
		grid-template-columns: 1fr;
	}

	.garbit-produit__colonne {
		min-height: 0;
	}

	.garbit-produit__colonne--gauche {
		padding-bottom: 4rem;
	}

	.garbit-produit__colonne--droite {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.garbit-produit__colonne {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Le titre à badge ne doit jamais déborder de la colonne. */
	.garbit-produit__titre {
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	.garbit-produit-carousel {
		gap: 0.5rem;
		position: relative;
	}

	.garbit-produit-carousel__arrow {
		width: 40px;
		height: 40px;
	}

	.garbit-produit-carousel__arrow img {
		width: 20px;
		height: 20px;
	}

	.garbit-produit-carousel__dot {
		width: 40px;
	}
}

@media (max-width: 360px){
	.garbit-header .wp-block-site-logo img{
		width: 120px;
	}
	.garbit-header .wp-block-navigation__responsive-container.is-menu-open {
		top: 93px;
		height: calc(100dvh - 93px) !important;
	}

	.garbit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc(-1 * 93px - 20px);
		height: 93px;
	}

	.garbit-fil-ariane{
		top: 93px !important;
	}
}

/* =========================================================================
   Section « Dates clés » (carrousel)
   ========================================================================= */
.garbit-dates-cles {
	position: relative;
	overflow: hidden;
	padding: 80px var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--beige);
	margin-top: 0;

}

.garbit-dates-cles::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 586px;
	height: 479px;
	background: url("../images/ligne-pointilles-7.svg") no-repeat left top / contain;
	pointer-events: none;
	z-index: 0;
}

.garbit-dates-cles__titre,
.garbit-dates-cles__panels,
.garbit-dates-cles__timeline {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Titre : deux pastilles vertes de part et d'autre, comme la maquette. */
.garbit-dates-cles__titre {
	position: relative;
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0 auto var(--wp--preset--spacing--60);
}

.garbit-dates-cles__titre mark{
	position: relative;
}

.garbit-dates-cles__titre mark::before{
	content: "";
	position: absolute;
	top: -36px;
	right: -32px;
	width: 34px;
	height: 40px;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}

.garbit-dates-cles__titre::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 40px;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}

.garbit-dates-cles__titre::before {
	top: -0.5em;
	right: -1.2em;
}

.garbit-dates-cles__titre::after {
	display: none;
}

.garbit-dates-cles__panels {
	position: relative;
	display: grid;
	margin-bottom: var(--wp--preset--spacing--60);
}

.garbit-dates-cles__panel {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	visibility: hidden;
	opacity: 0;
	transform: translateX(0);
	transition: transform 0.45s ease, opacity 0.45s ease, visibility 0s linear 0.45s;
}

.garbit-dates-cles__panel.is-active {
	position: relative;
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.garbit-dates-cles__panel.is-leaving-to-left {
	opacity: 0;
	transform: translateX(-40px);
}

.garbit-dates-cles__panel.is-leaving-to-right {
	opacity: 0;
	transform: translateX(40px);
}

.garbit-dates-cles__panel.is-entering-from-left {
	transform: translateX(-40px);
}

.garbit-dates-cles__panel.is-entering-from-right {
	transform: translateX(40px);
}

@media (max-width: 781px){
	.garbit-dates-cles::before{
		top: -80px;
        right: -450px;
	}
}

@media (max-width: 480px){
	.garbit-dates-cles::before{
        right: -500px;
	}
	.garbit-saviezvous-titre mark::after{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.garbit-dates-cles__panel {
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.garbit-dates-cles__panel.is-active {
		transition: opacity 0.2s ease;
	}

	.garbit-dates-cles__panel.is-leaving-to-left,
	.garbit-dates-cles__panel.is-leaving-to-right,
	.garbit-dates-cles__panel.is-entering-from-left,
	.garbit-dates-cles__panel.is-entering-from-right {
		transform: none;
	}
}

.garbit-dates-cles__colonne {
	flex: 1 1 50%;
	min-width: 0;
}

.garbit-dates-cles__colonne--texte .garbit-dates-cles__annee {
	display: inline-block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
	color: #fff;
	background-color: var(--wp--preset--color--vert);
	padding: 0.35em 0.9em;
	margin-bottom: var(--wp--preset--spacing--30);
	transform: rotate(3deg);
}

.garbit-dates-cles__panel-titre {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 600;
	margin: 20px 0;
}

.garbit-dates-cles__description {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.5;
	margin: 0;
}

/* Image : polaroïd légèrement pivoté, deux pastilles oranges de part et d'autre. */
.garbit-dates-cles__colonne--image {
	display: flex;
	justify-content: center;
}

.garbit-dates-cles__image {
	position: relative;
	margin: 0;
	width: 250px;
	max-width: 100%;
	padding: 14px 14px 40px;
	background-color: #fff;
	border: 2px solid var(--wp--preset--color--orange, #f39323);
	border-radius: 4px;
	transform: rotate(3deg);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	aspect-ratio: 4 / 3;
}

.garbit-dates-cles__image img {
	max-width: 100%;
	max-height: 230px;
	display: block;
	margin: auto;
	object-fit: contain;
    aspect-ratio: 1;
}

.garbit-dates-cles__image::before{
	content: "";
	position: absolute;
	top: -46px;
	right: -32px;
	width: 47px;
	height: 51px;
	background: url("../images/apostrophes-orange.svg") no-repeat center / contain;
	z-index: 1;
}

.garbit-dates-cles__image::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 46px;
	background: url("../images/apostrophes-orange.svg") no-repeat center / contain;
	z-index: 1;
}

.garbit-dates-cles__image::after {
	display: none;
}

/* Frise chronologique : largeur de chaque onglet = 100% / nombre de dates,
   avec un minimum de 60px. Au-delà, la frise défile horizontalement. */
.garbit-dates-cles__timeline {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.garbit-dates-cles__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	list-style: none;
	margin: 0;
	gap: 4px;
	padding: 0;
	justify-content: center;
}

.garbit-dates-cles__item {
	width: 50px;
}

.garbit-dates-cles__annee-btn {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0 0 var(--wp--preset--spacing--20) 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	font-weight: 600;
	color: var(--wp--preset--color--vert);
	opacity: 0.5;
	position: relative;
	white-space: nowrap;
}

.garbit-dates-cles__annee-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--wp--preset--color--vert);
	opacity: 0.35;
}

.garbit-dates-cles__annee-btn.is-active {
	opacity: 1;
}

.garbit-dates-cles__annee-btn.is-active::after {
	opacity: 1;
	height: 4px;
}

.garbit-dates-cles__annee-btn:hover,
.garbit-dates-cles__annee-btn:focus-visible {
	opacity: 0.8;
}

@media (max-width: 782px) {
	.garbit-dates-cles__panel {
		flex-direction: column;
		align-items: stretch;
	}

	.garbit-dates-cles__colonne--image {
		order: -1;
	}

	.garbit-dates-cles__timeline{
		width: 72px;
		float: left;
	}

	.garbit-dates-cles__liste{
		flex-direction: column;
	}
	.garbit-dates-cles__annee-btn{
		position: relative;
	}
	.garbit-dates-cles__annee-btn::after{
		width: 4px;
		height: 100%;
		bottom: 0;
	}
	.garbit-dates-cles__annee-btn.is-active::after{
		height: 100%;
	}

	.garbit-dates-cles__panels{
		float: right;
		width: calc(100% - 72px - 20px);
	}

	.garbit-dates-cles__panel{
		flex-direction: column-reverse;
	}
}

@media (max-width: 480px) {
	.garbit-dates-cles {
		padding: 80px var(--wp--preset--spacing--30);
	}

	.garbit-dates-cles__titre::before {
		width: 24px;
		height: 28px;
	}
}

/* --- Bloc « Liste des recettes » : grille de cartes encadrées --- */
.garbit-recettes-liste--empty {
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	color: var(--wp--preset--color--vert-fonce);
}

.garbit-recettes-liste__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.garbit-recettes-liste__carte {
	display: flex;
	flex-direction: column;
	flex-basis: calc((100% - (32px * 3)) / 4);
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--jaune);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	background-color: var(--wp--preset--color--blanc);
}

.garbit-recettes-liste__visuel {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 16px;
	box-sizing: border-box;
	transition: transform 0.3s ease;
}

.garbit-recettes-liste__visuel img:not(.garbit-recettes-liste__logo-jow) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.garbit-recettes-liste__visuel img.garbit-recettes-liste__logo-jow {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 54px;
	height: auto;
	object-fit: contain;
	z-index: 1;
	pointer-events: none;
}

.garbit-recettes-liste__carte:hover .garbit-recettes-liste__visuel{
	transform: scale(1.05);
}

.garbit-recettes-liste__titre {
	margin: 0;
	padding: 16px 20px 20px;
	text-align: center;
	line-height: 1.2;
	font-family: var(--wp--preset--font-family--exo-2);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--noir);
}

.garbit-recettes-liste__titre strong {
	font-family: var(--wp--preset--font-family--vujahday-script);
	font-size: var(--wp--preset--font-size--x-large);
	display: block;
	font-weight: 400;
}

@media (max-width: 782px) {
	.garbit-recettes-liste__carte {
		flex-basis: calc((100% - 32px) / 2);
	}
}

@media (max-width: 480px) {
	.garbit-recettes-liste__carte {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Page recette (single garbit_recette) — JED-54
   ========================================================================== */

/* Le <main> classique casse `position: sticky` avec la règle globale
   `main { overflow-x: hidden }` : on rétablit `overflow: visible` ici,
   comme pour la fiche produit. */
main.garbit-recette {
	overflow: visible;
}

.garbit-recette__grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background-color: var(--wp--preset--color--beige);
}

.garbit-recette__colonne--gauche {
	position: sticky;
	top: calc(111px + 42px);
	height: calc(100dvh - 111px - 42px);
	flex-basis: 50%;
	flex-shrink: 0;
	overflow: hidden;
}

.garbit-recette__visuel {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: default;
	position: relative;
}

.garbit-recette__visuel--video {
	cursor: pointer;
}

.garbit-recette__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.garbit-recette__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	pointer-events: none;
}

.garbit-recette__play img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.garbit-recette__colonne--droite {
	flex-basis: 50%;
	box-sizing: border-box;
	padding: 64px 80px;
}

.garbit-recette__logo-jow {
	display: block;
	width: 72px;
	height: auto;
	margin-bottom: 24px;
}

.garbit-recette__titre {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0 0 24px;
	line-height: 1.1;
	justify-content: flex-start;
}

.garbit-recette__titre .garbit-titre__highlight--apostrophe::after {
	width: 33px;
	height: 39px;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;
}

.garbit-recette__titre .garbit-titre__prefix {
	color: var(--wp--preset--color--noir);
	font-weight: 700;
}

.garbit-recette__video-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 40px;
	padding: 8px 20px;
	border: 1px solid var(--wp--preset--color--vert);
	background: transparent;
	color: var(--wp--preset--color--vert);
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.garbit-recette__video-cta:hover {
	background: var(--wp--preset--color--blanc);
}

.garbit-recette__video-cta img {
	width: 32px;
	height: 32px;
}

/* --- Méta : préparation / cuisson / personnes / niveau --- */
.garbit-recette__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin-top: 80px;
}

.garbit-recette__meta-item {
	min-width: 120px;
	padding-bottom: 8px;
	border-bottom: 4px solid var(--wp--preset--color--vert);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}

.garbit-recette__meta-item img {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 6px;
}

.garbit-recette__meta-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--noir);
	white-space: nowrap;
}

.garbit-recette__meta-valeur {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--noir);
}

/* --- Ingrédients / étapes --- */
.garbit-recette__section, .garbit-recette__reseaux {
	margin-top: 80px;
}

.garbit-recette__section-titre {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--noir);
}

.garbit-recette__section-souligne {
	margin: 0 0 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--vert);
	color: var(--wp--preset--color--noir);
}

.garbit-recette__ingredients {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--noir);
}

.garbit-recette__ingredients li {
	position: relative;
	padding: 8px 0 8px 20px;
	line-height: 1.5;
	margin-left: 16px;
}

.garbit-recette__ingredients li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--vert);
}

.garbit-recette__etapes {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--noir);
}

.garbit-recette__etape {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}

.garbit-recette__etape-numero {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.garbit-recette__etape-texte {
	line-height: 1.6;
}

@media (max-width: 900px) {
	.garbit-recette__grid {
		flex-direction: column;
	}

	.garbit-recette__colonne--droite {
		padding: 40px 24px;
	}
	.garbit-recette__colonne--gauche{
		position: relative;
		top: 0;
		height: auto;
		flex-basis: 100%;
		width: 100%;
	}
	.garbit-recette__titre .garbit-titre__highlight--apostrophe::after{
		display: none;
	}
}

@media (max-width: 600px) {
	.garbit-recette__meta {
		gap: 16px 24px;
	}

	.garbit-recette__meta-item {
		min-width: calc(50% - 12px);
	}
}

/* --- Modale vidéo YouTube --- */
.garbit-recette-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.garbit-recette-modal[hidden] {
	display: none;
}

.garbit-recette-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
}

.garbit-recette-modal__dialog {
	position: relative;
	width: min(90vw, 960px);
	aspect-ratio: 16 / 9;
	background: #000;
}

.garbit-recette-modal__close {
	position: absolute;
	top: -44px;
	right: -44px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--blanc);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.garbit-recette-modal__player,
.garbit-recette-modal__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

body.garbit-recette-modal-open {
	overflow: hidden;
}

/* Le <main> classique casse `position: sticky` avec la règle globale
   `main { overflow-x: hidden }` : on rétablit `overflow: visible` sur le
   <main> qui contient la page contact, comme pour la fiche produit/recette. */
main:has(#garbit-contact) {
	overflow: visible;
}

#garbit-contact{
	align-items: flex-start !important;
	margin-top: 80px;
	margin-bottom: 80px;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper{
	max-width: 100%;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper input,
#garbit-contact .wp-block-column:first-child .gform_wrapper select,
#garbit-contact .wp-block-column:first-child .gform_wrapper textarea,
#garbit-contact .wp-block-column:first-child .gform_wrapper label
{
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: normal;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper input,
#garbit-contact .wp-block-column:first-child .gform_wrapper select,
#garbit-contact .wp-block-column:first-child .gform_wrapper textarea{
	width: 100%;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--noir);
	border-radius: 0;
	line-height: 48px;
	min-height: 48px;
	box-sizing: border-box;
	padding-left: 12px;
	box-shadow: none;
}
#garbit-contact .gform_wrapper input[type="submit"],
#garbit-contact .gform_footer button{
	display: inline-block;
	width: auto;
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	padding: 10px 58px 12px 16px;
	border: none;
	font-weight: 700;
	line-height: 32px;
	margin-right: 0;
	font-size: 20px;
	font-family: var(--wp--preset--font-family--exo-2);
}
#garbit-contact .gform_footer{
	position: relative;
	width: fit-content;
	padding: 0;
}
#garbit-contact .gform_footer::after{
	content: "";
	position: absolute;
	top: 10px;
	right: 16px;
	display: block;
	width: 32px;
	height: 32px;
	background: url("../images/icon-arrow-right-white.svg") no-repeat center / contain;
	z-index: 1;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper .ginput_container_fileupload > div:not(.ginput_preview_list){
	width: 100%;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir);
	border: 1px dashed var(--wp--preset--color--noir);
	border-radius: 0;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper .ginput_container_fileupload > div .gform_drop_area,
.gform_legacy_markup_wrapper .gform_fileupload_multifile .gform_drop_area{
	margin-bottom: 0;
	border: none;
	background-color: transparent;
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--exo-2);
}
#garbit-contact .wp-block-column:first-child .gform_wrapper .ginput_container_fileupload > div .gform_drop_area button,
.gform_legacy_markup_wrapper .gform_fileupload_multifile .gform_drop_area button{
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--noir);
	border-radius: 0;
	line-height: 48px;
	min-height: 48px;
	box-sizing: border-box;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--exo-2);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	font-weight: 700;
	font-size: 20px;
	margin: auto;
}
.gform_legacy_markup_wrapper .gform_fileupload_multifile .gform_drop_area button:hover{
	transform: none;
}
#garbit-contact .wp-block-column:first-child .gform_wrapper .ginput_container_fileupload > div .gform_drop_area button::after,
.gform_legacy_markup_wrapper .gform_fileupload_multifile .gform_drop_area button::after{
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: url("../images/arrow-right-noir.svg") no-repeat center / contain;
}
#garbit-contact .wp-block-column:last-child{
	position: sticky;
	top: 200px;
}
#garbit-contact .wp-block-column:last-child > div{
	padding: 40px;
	background-color: var(--wp--preset--color--vert);
	position: relative;
}
#garbit-contact .wp-block-column:last-child > div::after{
	content: "";
	position: absolute;
	top: -35px;
	right: -35px;
	width: 33px;
	height: 40px;
	background: url("../images/apostrophes-vert.svg") no-repeat center / contain;

}
#garbit-contact .wp-block-column:last-child p{
	margin-top: 16px;
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--exo-2);
}
#garbit-contact .wp-block-column:last-child h2,
#garbit-contact .wp-block-column:last-child strong{
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--exo-2);
	font-weight: 600;
}

#garbit-contact .not-displayed input{
	display: none;
}

@media (max-width: 900px){
	main:has(#garbit-contact) {
		overflow: auto;
		overflow-x: hidden;
	}
	#garbit-contact{
		flex-direction: column-reverse;
	}
	#garbit-contact .wp-block-column:last-child{
		position: static;
		top: 0;
		width: 100%;
	}
}

@media (max-width: 782px){
	#garbit-contact .wp-block-column:last-child > div::after{
		display: none;
	}
}