/**
 * Fournil du Chablais, styles du thème.
 *
 * Les tokens (couleurs, typo, espacements, rayons) vivent dans theme.json
 * et sont exposés en variables CSS (--wp--preset--*). Ce fichier porte les
 * styles de composants qui ne s'expriment pas dans theme.json : header,
 * hero/bandeau, cartes, sections sombres, footer, responsive.
 */

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

:root {
	--fournil-marge: var(--wp--custom--layout--marge-laterale, clamp(16px, 7.2vw, 104px));
	--fournil-header-h: 134px;
	--fournil-transition: 180ms ease;
}

body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* WordPress core colle un padding par défaut (1.25em 2.375em) à tout
   .wp-block-group qui a un fond (.has-background). Nos sections gèrent leur
   propre espacement via leurs conteneurs internes : on neutralise ce défaut.
   (sélecteur sans :where() pour passer devant la règle core, de spécificité nulle) */
.wp-block-group.has-background {
	padding: 0;
}

/* Conteneur interne aligné sur la maquette (1232px utiles dans 1440px). */
.fournil-conteneur {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
	padding-inline: var(--fournil-marge);
}

/* -------------------------------------------------------------------------
 * 2. Boutons, COMPOSANT UNIQUE (source de vérité front).
 * Toute la définition vit ici, sur .wp-element-button, qui couvre d'un seul
 * tenant les boutons natifs (.wp-block-button__link.wp-element-button) ET le
 * helper fournil_bouton(). Les valeurs s'appuient sur les tokens (theme.json),
 * donc un changement global = changer le token. Ne JAMAIS restyler un bouton
 * ailleurs : utiliser un bloc bouton natif ou fournil_bouton().
 * Variantes : crème (secondaire), contour (sur photo / sombre).
 * ---------------------------------------------------------------------- */

.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--bouton);
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fournil-transition), color var(--fournil-transition);
}

.wp-element-button:hover,
.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
}

/* Variante crème (secondaire). Natif : wrapper .is-style-creme. Helper : sur le lien.
   Fin contour graphite pour rester un bouton lisible même sur fond crème (ex : CTA
   secondaire de la zone offres), sans décaler la mise en page (inset). */
.wp-block-button.is-style-creme .wp-element-button,
.wp-element-button.is-style-creme {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--graphite);
	box-shadow: inset 0 0 0 1px rgba(57, 60, 66, 0.25);
}

.wp-block-button.is-style-creme .wp-element-button:hover,
.wp-element-button.is-style-creme:hover {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
}

/* Variante contour (sur fond photo / sombre). */
.wp-block-button.is-style-contour .wp-element-button,
.wp-element-button.is-style-contour {
	background-color: transparent;
	color: var(--wp--preset--color--blanc);
	box-shadow: inset 0 0 0 2px currentColor;
}

.wp-block-button.is-style-contour .wp-element-button:hover,
.wp-element-button.is-style-contour:hover {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--graphite);
}

/* -------------------------------------------------------------------------
 * 3. Header
 * ---------------------------------------------------------------------- */

.fournil-header {
	position: relative;
	z-index: 20;
	background-color: var(--wp--preset--color--blanc);
}

/* Barre principale : logo / navigation / réseaux. */
.fournil-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: 16px;
}

.fournil-header__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.fournil-header__logo img {
	width: 262px;
	max-width: 100%;
	height: auto;
}

/* Navigation : chaque rubrique porte son picto centré derrière le libellé. */
.fournil-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 29px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fournil-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 8px;
	text-decoration: none;
}

/* Picto : 50x50 au repos, centré derrière le texte, légèrement estompé. */
.fournil-nav__picto {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
	transition: transform var(--fournil-transition);
}

.fournil-nav__label {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--graphite);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--fournil-transition);
}

/* Survol : picto 50 -> 60 (scale centré) + libellé orange, rien d'autre. */
.fournil-nav__link:hover .fournil-nav__picto,
.fournil-nav__link:focus-visible .fournil-nav__picto {
	transform: translate(-50%, -50%) scale(1.2);
}

.fournil-nav__link:hover .fournil-nav__label,
.fournil-nav__link:focus-visible .fournil-nav__label {
	color: var(--wp--preset--color--orange);
}

/* Pastilles sociales orange (icônes SVG fournies). */
.fournil-header__social {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.5vw, 21px);
	flex-shrink: 0;
}

.fournil-header__social a {
	display: inline-flex;
	transition: transform var(--fournil-transition);
}

.fournil-header__social a:hover {
	transform: translateY(-2px);
}

.fournil-header__social img {
	width: 40px;
	height: 40px;
	display: block;
}

/* Burger : masqué en desktop, visible en mobile. */
.fournil-header__toggle,
.fournil-header__burger {
	display: none;
}

/* Vague sous le header : suspendue sous la barre (top:100%), elle chevauche
   le haut du hero. Calée à droite, taille intrinsèque (jamais déformée),
   débord gauche masqué quand le navigateur rétrécit. */
.fournil-header__vague {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	height: 54px;
	overflow: hidden;
	pointer-events: none;
	line-height: 0;
}

.fournil-header__vague img {
	position: absolute;
	right: 0;
	top: 0;
	width: 3129px;
	max-width: none;
	height: 54px;
}

/* -------------------------------------------------------------------------
 * 4. Hero / bandeau temporel
 * ---------------------------------------------------------------------- */

.fournil-hero {
	position: relative;
	min-height: clamp(560px, 64vh, 840px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--wp--preset--color--blanc);
	background-color: var(--wp--preset--color--graphite);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

/* Fond : slideshow de 3 images en fondu lent.
   max-width:none neutralise la contrainte du layout « constrained » du groupe
   (sinon WordPress bride ce calque à la content-size et l'image n'est pas pleine largeur). */
.fournil-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
}

.fournil-hero__slides {
	position: absolute;
	inset: 0;
}

.fournil-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 2000ms ease-in-out;
	will-change: opacity;
}

.fournil-hero__slide.is-active {
	opacity: 1;
}

/* Placeholders de marque tant que hero-1/2/3.jpg ne sont pas fournis. */
.fournil-hero__slide--ph1 { background-image: linear-gradient(135deg, var(--wp--preset--color--creme), var(--wp--preset--color--orange)); }
.fournil-hero__slide--ph2 { background-image: linear-gradient(135deg, var(--wp--preset--color--orange), var(--wp--preset--color--graphite)); }
.fournil-hero__slide--ph3 { background-image: linear-gradient(135deg, var(--wp--preset--color--graphite), var(--wp--preset--color--creme)); }

/* Voile dégradé, plus sombre en bas pour la lisibilité (cf. maquette). */
.fournil-hero__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0.5) 85%);
}

.fournil-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: clamp(64px, 8vw, 120px);
}

.fournil-hero__mascotte img {
	width: clamp(180px, 16vw, 239px);
	height: auto;
}

/* Le bandeau temporel : message dynamique = titre hero. */
.fournil-bandeau__message {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0;
	max-width: 22ch;
}

.fournil-bandeau__visuel {
	margin-bottom: var(--wp--preset--spacing--40);
}

.fournil-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
}

/* Vague basse : même SVG pivoté 180°, calé à gauche (cf. maquette),
   taille intrinsèque, jamais déformé. */
.fournil-hero__vague-bas {
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 2;
	width: 100%;
	max-width: none;
	height: 54px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}

.fournil-hero__vague-bas img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3129px;
	max-width: none;
	height: 54px;
	transform: rotate(180deg);
	transform-origin: center;
}

/* Hero de page (pages internes) : même principe que l'accueil, en plus court.
   Réutilise .fournil-hero__voile et .fournil-hero__vague-bas. */
.fournil-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Un peu plus court que le hero d'accueil (qui plafonne à 840px). */
	min-height: clamp(480px, 64vh, 677px);
	color: var(--wp--preset--color--blanc);
	background-color: var(--wp--preset--color--graphite);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.fournil-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fournil-page-hero__img,
.fournil-page-hero__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fournil-page-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 14px, rgba(255, 255, 255, 0.03) 14px 28px), var(--wp--preset--color--graphite);
	font-weight: 700;
	opacity: 0.9;
}

.fournil-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding-block: clamp(48px, 8vw, 96px);
}

.fournil-page-hero__titre {
	margin: 0 auto;
	max-width: 24ch;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
}

/* -------------------------------------------------------------------------
 * 5. Bande réassurance (fond blanc, 3 colonnes icône + texte)
 * ---------------------------------------------------------------------- */

.fournil-reassurance {
	background-color: var(--wp--preset--color--blanc);
	padding-block: clamp(56px, 8vw, 120px) clamp(40px, 5.5vw, 80px);
	padding-inline: clamp(16px, 12vw, 176px);
}

.fournil-reassurance__grille {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
}

.fournil-reassurance__item {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 0 1 290px;
}

.fournil-reassurance__item img {
	flex: 0 0 auto;
	width: 67px;
	height: 67px;
}

.fournil-reassurance__item p {
	margin: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--noir);
	text-align: left;
}

/* -------------------------------------------------------------------------
 * 6. Section gamme : fond beige + découpe blanche + 4 cartes parallaxe
 * ---------------------------------------------------------------------- */

.fournil-gamme {
	position: relative;
	background-color: var(--wp--preset--color--creme);
	overflow: hidden;
	padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 96px);
}

/* Découpe blanche : SVG posé en haut, pleine largeur, sans déformation. */
.fournil-gamme__decoupe {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	min-width: 1440px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.fournil-gamme__inner {
	position: relative;
	z-index: 1;
}

/* Rangée de 4 cartes. */
.fournil-gamme__cartes {
	display: flex;
	gap: var(--wp--preset--spacing--40);
}

/* Carte produit (visuel only) : réutilisée par l'accueil ET le slider Gamme
   Plaisir. La disposition (flex) vit dans chaque contexte, pas sur la carte. */
.fournil-gamme-carte {
	position: relative;
	aspect-ratio: 290 / 354;
	border-radius: var(--wp--custom--radius--carte);
	overflow: hidden;
	display: block;
	text-decoration: none;
}

/* Disposition accueil : rangée de cartes flex. */
.fournil-gamme__cartes .fournil-gamme-carte {
	flex: 1 1 0;
	min-width: 0;
}

.fournil-gamme-carte__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Image plus large que la carte : translatée horizontalement (parallaxe). */
.fournil-gamme-carte__media img {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: auto;
	max-width: none;
	transform: translateX(calc(-50% + var(--px, 0px)));
	transition: transform 120ms linear;
	will-change: transform;
}

/* Dégradé bas de carte (transparent -> graphite), comme la maquette. */
.fournil-gamme-carte::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(57, 60, 66, 0) 61%, var(--wp--preset--color--graphite) 103%);
	pointer-events: none;
}

.fournil-gamme-carte__label {
	position: absolute;
	left: 24px;
	bottom: 16px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 700;
	font-size: 28px;
	color: var(--wp--preset--color--creme);
}

/* Titre + paragraphe + bouton, alignés à gauche. */
.fournil-gamme__texte {
	margin-top: clamp(32px, 4vw, 48px);
}

.fournil-gamme__titre {
	margin: 0 0 12px;
	text-transform: uppercase;
}

.fournil-gamme__texte p {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 1000px;
	color: var(--wp--preset--color--graphite);
}

/* -------------------------------------------------------------------------
 * 6a. Focus Gamme Plaisir : texte + bouton à gauche, slider à droite, mascotte
 * ---------------------------------------------------------------------- */

.fournil-gamme-plaisir {
	position: relative;
	overflow: hidden;
}

/* Inner non positionné : la mascotte se cale sur la section (bord gauche). */
.fournil-gamme-plaisir__inner {
	display: flex;
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
	padding-block: clamp(64px, 8vw, 113px) clamp(48px, 6vw, 80px);
}

.fournil-gamme-plaisir__texte {
	position: relative;
	z-index: 1;
	flex: 0 1 460px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.fournil-gamme-plaisir__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-gamme-plaisir__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-gamme-plaisir__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

/* Colonne slider : file jusqu'au bord droit réel (cartes qui débordent). */
.fournil-gamme-plaisir__slider {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	margin-right: calc(50% - 50vw);
}

/* Mascotte décorative, bas-gauche, en arrière-plan. */
.fournil-gamme-plaisir__mascotte {
	position: absolute;
	left: 7px;
	bottom: 0;
	width: clamp(220px, 26vw, 360px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Placeholder de visuel produit (en attendant les photos client). */
.fournil-card-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: repeating-linear-gradient(135deg, rgba(57, 60, 66, 0.55) 0 14px, rgba(57, 60, 66, 0.42) 14px 28px);
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
	font-size: 13px;
	opacity: 0.95;
}

/* -------------------------------------------------------------------------
 * Slider horizontal réutilisable (scroll-snap + flèches + puces)
 * ---------------------------------------------------------------------- */

.fournil-slider {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fournil-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fournil-slider__track::-webkit-scrollbar {
	display: none;
}

.fournil-slider__slide {
	flex: 0 0 min(290px, 78vw);
	scroll-snap-align: start;
}

.fournil-slider__controls {
	display: flex;
	align-items: center;
	gap: 24px;
}

.fournil-slider__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: var(--wp--custom--radius--pastille);
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
	cursor: pointer;
	transition: background-color var(--fournil-transition), opacity var(--fournil-transition);
}

.fournil-slider__arrow svg {
	width: 22px;
	height: 22px;
}

.fournil-slider__arrow:hover:not(:disabled),
.fournil-slider__arrow:focus-visible:not(:disabled) {
	background-color: var(--wp--preset--color--orange);
}

.fournil-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.fournil-slider__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fournil-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: var(--wp--custom--radius--pastille);
	background-color: rgba(255, 121, 0, 0.3);
	cursor: pointer;
	transition: background-color var(--fournil-transition);
}

.fournil-slider__dot.is-active {
	background-color: var(--wp--preset--color--orange);
}

/* Empilement Gamme Plaisir sous 980px : texte au-dessus, slider dessous. */
@media (max-width: 980px) {
	.fournil-gamme-plaisir__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-gamme-plaisir__texte {
		flex: 0 0 auto;
	}

	.fournil-gamme-plaisir__mascotte {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 6a-bis. Formule étudiante : fond graphite, texte + composition, photo droite
 * ---------------------------------------------------------------------- */

.fournil-formule {
	position: relative;
	overflow: hidden;
}

.fournil-formule__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}

.fournil-formule__texte {
	flex: 0 1 652px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 32px);
	padding-block: clamp(56px, 8vw, 100px);
}

.fournil-formule__titre {
	margin: 0;
	color: var(--wp--preset--color--blanc);
}

.fournil-formule__intro {
	margin: 0;
	max-width: 652px;
	color: var(--wp--preset--color--blanc);
}

/* Composition : pills (carte découverte réutilisée) séparées par des « + ». */
.fournil-formule__compo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.fournil-formule__plus {
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--wp--preset--color--blanc);
}

/* Photo droite : même recette que la section ateliers (object-fit + bleed). */
.fournil-formule__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
}

.fournil-formule__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.fournil-formule__photo-mobile {
	display: none;
}

@media (max-width: 980px) {
	.fournil-formule__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-formule__texte {
		flex: 0 0 auto;
	}

	/* Formule empilée : pills l'une sous l'autre, « + » entre. */
	.fournil-formule__compo {
		flex-direction: column;
		align-items: flex-start;
	}

	.fournil-formule__media {
		display: none;
	}

	.fournil-formule__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 6a-ter. Blocs de gamme (Nos pains, etc.) : grille photos + texte, réutilisable
 * ---------------------------------------------------------------------- */

.fournil-gamme-bloc {
	position: relative;
	overflow: hidden;
	scroll-margin-top: 24px;
}

/* Inner non positionné : l'illustration se cale sur la section (bord gauche). */
.fournil-gamme-bloc__inner {
	display: flex;
	align-items: center;
	gap: clamp(40px, 5vw, 78px);
	padding-block: clamp(48px, 7vw, 104px);
}

/* Grille 2x2 de photos. */
.fournil-gamme-bloc__grille {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.fournil-gamme-bloc__grille img {
	display: block;
	width: 100%;
	aspect-ratio: 284 / 146;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--carte);
}

.fournil-gamme-bloc__texte {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Entête : picto (réutilisé du header) + titre. */
.fournil-gamme-bloc__entete {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fournil-gamme-bloc__icone {
	flex: 0 0 auto;
	width: 40px;
	height: auto;
}

.fournil-gamme-bloc__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-gamme-bloc__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-gamme-bloc__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

/* Illustration décorative qui déborde en bas à gauche de la section. */
.fournil-gamme-bloc__illustration {
	position: absolute;
	left: -49px;
	bottom: 0;
	width: clamp(200px, 20vw, 286px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Variante inversée (texte à gauche, photos à droite) : illustration à droite. */
.fournil-gamme-bloc--inverse .fournil-gamme-bloc__illustration {
	left: auto;
	right: -49px;
}

/* Empilement sous 980px : texte d'abord (« ci-dessous nos pains »), photos ensuite. */
@media (max-width: 980px) {
	.fournil-gamme-bloc__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-gamme-bloc__texte {
		order: -1;
	}

	.fournil-gamme-bloc__illustration {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 6a-quater. Duo réutilisable : deux colonnes texte + image arrondie
 * ---------------------------------------------------------------------- */

.fournil-duo__inner {
	display: flex;
	align-items: center;
	gap: clamp(40px, 5vw, 78px);
	padding-block: clamp(48px, 7vw, 104px);
}

.fournil-duo__texte {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.fournil-duo__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-duo__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-duo__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

.fournil-duo__media {
	flex: 1 1 0;
	min-width: 0;
}

.fournil-duo__media img {
	display: block;
	width: 100%;
	aspect-ratio: 577 / 471;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--carte);
}

/* Variante image à gauche. */
.fournil-duo--media-gauche .fournil-duo__media {
	order: -1;
}

@media (max-width: 980px) {
	.fournil-duo__inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* En empilé, l'image repasse toujours après le texte. */
	.fournil-duo--media-gauche .fournil-duo__media {
		order: 0;
	}
}

/* Variante avec vague beige décorative en bas. */
.fournil-duo--vague {
	position: relative;
	overflow: hidden;
}

.fournil-duo--vague .fournil-duo__inner {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(48px, 7vw, 100px);
}

/* Vague beige en bas de section, réutilisable (taille intrinsèque, pas de
   déformation ; la section parente doit être position:relative + overflow:hidden). */
.fournil-vague-beige {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	min-width: 1440px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * 6a-quinquies. Le p'tit resto : photo détourée à gauche, coordonnées à droite
 * ---------------------------------------------------------------------- */

.fournil-resto {
	position: relative;
	overflow: hidden;
}

.fournil-resto__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 4vw, 78px);
}

/* Photo : recette miroir de la formule. Bord détouré côté texte (droite),
   rogne à gauche au rétrécissement, file jusqu'au bord gauche réel. */
.fournil-resto__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-left: calc(50% - 50vw);
}

.fournil-resto__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.fournil-resto__photo-mobile {
	display: none;
}

.fournil-resto__texte {
	position: relative;
	flex: 0 1 512px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-block: clamp(48px, 6vw, 80px);
}

.fournil-resto__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-resto__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-resto__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

/* Coordonnées : pile de pills (carte découverte réutilisée). */
.fournil-resto__coords {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 353px;
}

/* Mascotte décorative, à droite des coordonnées, en arrière-plan. */
.fournil-resto__mascotte {
	position: absolute;
	right: -24px;
	bottom: 0;
	width: clamp(170px, 22vw, 304px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 980px) {
	.fournil-resto__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-resto__media,
	.fournil-resto__mascotte {
		display: none;
	}

	.fournil-resto__coords {
		max-width: none;
	}

	.fournil-resto__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 6a-sexies. Boutiques : carte (placeholder) + onglets de filtre + fiches
 * ---------------------------------------------------------------------- */

.fournil-boutiques__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 48px);
	padding-block: clamp(48px, 7vw, 104px);
}

/* Cadre de la carte interactive (Leaflet/OpenStreetMap), cotes maquette. */
.fournil-boutiques__carte {
	width: 100%;
	aspect-ratio: 1232 / 572;
	min-height: 0;
}

/* Carte Leaflet : remplit le cadre, coins arrondis comme les médias du thème. */
.fournil-carte {
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--carte);
	/* Leaflet pose un z-index élevé sur ses panes : on le contient pour rester
	   sous le header/menu et les popins du thème. */
	z-index: 0;
}

.fournil-carte.leaflet-container {
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--corps);
}

/* Marqueur SVG : pas de fond ni de bordure (la goutte est dans le SVG). */
.fournil-carte-marqueur {
	background: none;
	border: 0;
}

/* Popup : repris des tokens (rayon carte, ombre douce, typo du thème). */
.fournil-carte .leaflet-popup-content-wrapper {
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 26.85px rgba(103, 73, 22, 0.18);
}

.fournil-carte .leaflet-popup-content {
	margin: 16px;
}

.fournil-carte-popup__nom {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 20px;
	color: var(--wp--preset--color--graphite);
}

.fournil-carte-popup__coords {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fournil-carte-popup__coords li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--noir);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

.fournil-carte-popup__coords img {
	flex: 0 0 auto;
	width: 20px;
	height: 19px;
	margin-top: 2px;
}

/* CTA « S'y rendre » dans la popup : pleine largeur, sous les coordonnées. */
.fournil-carte-popup .wp-element-button {
	width: 100%;
	margin-top: 12px;
	min-height: 40px;
	padding: 8px 16px;
}

/* Menu de choix d'application (popin partagée « S'y rendre »). */
.fournil-itineraire .fournil-popin__carte {
	max-width: 420px;
}

.fournil-itineraire__choix {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Options du menu : fond blanc + ombre portée douce (les logos à fond blanc
   s'y fondent proprement, contrairement au bouton orange). */
.fournil-itineraire__choix .wp-element-button {
	width: 100%;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--graphite);
	box-shadow: 0 4px 18px rgba(103, 73, 22, 0.18);
	transition: transform var(--fournil-transition), box-shadow var(--fournil-transition);
}

/* Survol : léger soulèvement, le fond reste blanc (logos toujours lisibles). */
.fournil-itineraire__choix .wp-element-button:hover,
.fournil-itineraire__choix .wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--graphite);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(103, 73, 22, 0.26);
}

/* Bouton avec logo de marque : espace entre le logo et le libellé. */
.fournil-bouton--icone {
	gap: 10px;
}

/* Logos de marque (Waze / Apple Plans / Google Maps) : icônes carrées PNG
   transparentes, sources 80x80 affichées à 40px (x2 pour le retina). */
.fournil-bouton__icone {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* Filtre (filtre.js) : un item masqué porte l'attribut [hidden]. Les cartes ont
   un display: flex propre, plus spécifique que la règle UA [hidden]{display:none},
   donc sans cette règle elles resteraient visibles et les onglets sembleraient
   inopérants. On rétablit le masquage pour tout item filtré (composant générique). */
[data-fournil-filtre-item][hidden] {
	display: none;
}

/* Onglets de filtre par commune. */
.fournil-boutiques__onglets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.fournil-onglet {
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--bouton);
	background: transparent;
	color: var(--wp--preset--color--graphite);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	transition: background-color var(--fournil-transition), color var(--fournil-transition);
}

.fournil-onglet:hover {
	background: rgba(255, 121, 0, 0.1);
}

.fournil-onglet.is-active {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
}

/* Grille de fiches. */
.fournil-boutiques__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	/* Respiration entre les onglets de filtre et la grille (token le plus proche de 40px). */
	margin-top: var(--wp--preset--spacing--60);
}

/* Carte blanche réutilisable : fiches boutique ET fiches offre d'emploi. */
.fournil-boutique-carte,
.fournil-offre-carte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--wp--preset--color--blanc);
	border-radius: 16px;
	box-shadow: 0 2px 26.85px rgba(103, 73, 22, 0.1);
}

/* Carte offre cliquable : le bouton du titre s'étend sur toute la carte (lien
   étiré). La carte garde sa structure sémantique (article + titre h3), le bouton
   reste l'élément interactif (clavier natif), et le survol soulève la carte. */
.fournil-offre-carte {
	position: relative;
	align-items: flex-start;
	transition: transform var(--fournil-transition), box-shadow var(--fournil-transition);
}

.fournil-offre-carte:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(103, 73, 22, 0.2);
}

/* Bouton du titre : reset, et zone cliquable étendue à toute la carte via ::after. */
.fournil-offre-carte__lien {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.fournil-offre-carte__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* Anneau de focus clavier sur toute la carte (porté par la zone étirée). */
.fournil-offre-carte__lien:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

/* Bouton « Postuler » de la carte : repasse au-dessus du lien étiré pour rester
   cliquable indépendamment (la carte ouvre la popin, Postuler va au contact). */
.fournil-offre-carte__postuler {
	position: relative;
	z-index: 1;
	align-self: flex-start;
}

/* CTA « S'y rendre » : poussé en bas pour aligner les boutons d'une même ligne. */
.fournil-boutique-carte__cta {
	margin-top: auto;
}

.fournil-boutique-carte__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 24px;
	color: var(--wp--preset--color--graphite);
}

.fournil-boutique-carte__coords {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-boutique-carte__coords li {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--wp--preset--color--noir);
	font-size: var(--wp--preset--font-size--medium);
}

.fournil-boutique-carte__coords img {
	flex: 0 0 auto;
	width: 32px;
	height: 30px;
}

@media (max-width: 980px) {
	.fournil-boutiques__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fournil-boutiques__grille {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 6a-septies. Frise d'étapes (numéro + ligne de liaison + nom + description)
 * ---------------------------------------------------------------------- */

.fournil-etapes__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 72px);
	padding-block: clamp(48px, 7vw, 104px);
}

.fournil-etapes__entete {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 752px;
}

.fournil-etapes__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-etapes__intro {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

.fournil-etapes__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
}

.fournil-etape {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Numéro + ligne de liaison qui file vers l'étape suivante. */
.fournil-etape__tete {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fournil-etape__icone {
	flex: 0 0 auto;
	width: 67px;
	height: 67px;
}

.fournil-etape__ligne {
	flex: 1 1 auto;
	height: 2px;
	background-color: var(--wp--preset--color--orange);
}

.fournil-etape__corps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 56px;
}

.fournil-etape__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--noir);
}

.fournil-etape__desc {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

@media (max-width: 980px) {
	.fournil-etapes__liste {
		flex-wrap: wrap;
	}

	.fournil-etape {
		flex: 1 1 calc(50% - 8px);
	}

	.fournil-etape__corps {
		padding-right: 24px;
	}
}

@media (max-width: 600px) {
	.fournil-etape {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * 6a-octies. Évènements : texte + module réservation (placeholder) + photo droite
 * ---------------------------------------------------------------------- */

.fournil-evenements {
	position: relative;
	overflow: hidden;
}

.fournil-evenements__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}

.fournil-evenements__contenu {
	position: relative;
	flex: 0 1 801px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(48px, 6vw, 80px);
}

.fournil-evenements__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-evenements__intro {
	margin: 0;
	max-width: 562px;
	color: var(--wp--preset--color--noir);
}

/* Module maison de réservation : liste de sessions en cartes blanches. */
.fournil-reservation {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.fournil-reservation__vide {
	margin: 0;
	padding: clamp(24px, 3vw, 40px);
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 26.85px rgba(103, 73, 22, 0.1);
	color: var(--wp--preset--color--noir);
}

/* Une session = une carte. */
.fournil-reservation__session {
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 26.85px rgba(103, 73, 22, 0.1);
	padding: clamp(20px, 3vw, 32px);
}

.fournil-reservation__entete {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.fournil-reservation__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.2;
	color: var(--wp--preset--color--graphite);
}

/* Majuscule au seul premier mot (ex : « Mercredi 15 juillet 2026 à 14h30 »). */
.fournil-reservation__date::first-letter {
	text-transform: uppercase;
}

/* Titre de la session (date) + durée empilées à gauche de l'entête. */
.fournil-reservation__titre {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fournil-reservation__duree {
	font-family: var(--wp--preset--font-family--corps);
	font-size: 13px;
	color: rgba(57, 60, 66, 0.7);
}

/* Descriptif / déroulé de la visite, sous le titre. */
.fournil-reservation__desc {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--noir);
}

.fournil-reservation__places {
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--orange);
	white-space: nowrap;
}

/* Badge « Complet » : pastille neutre, inscriptions fermées. */
.fournil-reservation__badge {
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 12px;
	color: var(--wp--preset--color--blanc);
	background: var(--wp--preset--color--graphite);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.fournil-reservation__session.is-complete {
	opacity: 0.85;
}

/* Messages de retour (succès / erreur), rattachés à la session. */
.fournil-reservation__message {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--bouton);
	font-size: 14px;
	line-height: 1.4;
}

.fournil-reservation__message.is-ok {
	color: #1a7d3c;
	background: rgba(26, 125, 60, 0.1);
}

.fournil-reservation__message.is-erreur {
	color: #b32d2e;
	background: rgba(179, 45, 46, 0.1);
}

/* Le formulaire remplit la carte (le composant .fournil-form plafonne à 518px). */
.fournil-reservation__form {
	max-width: none;
}

/* Honeypot : hors écran, jamais affiché à un humain. */
.fournil-reservation__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Consentement RGPD : case + libellé alignés. */
.fournil-reservation__rgpd label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
}

.fournil-reservation__rgpd input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.fournil-evenements__mascotte {
	position: absolute;
	right: -20px;
	bottom: -10px;
	width: clamp(200px, 24vw, 370px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Photo droite : même recette que la formule (object-fit + bleed). */
.fournil-evenements__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
}

.fournil-evenements__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.fournil-evenements__photo-mobile {
	display: none;
}

@media (max-width: 980px) {
	.fournil-evenements__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-evenements__media,
	.fournil-evenements__mascotte {
		display: none;
	}

	.fournil-evenements__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 6a-nonies. Galerie + lightbox (clic = agrandissement, nav, fermeture croix)
 * ---------------------------------------------------------------------- */

.fournil-galerie__inner {
	padding-block: clamp(48px, 7vw, 104px);
}

.fournil-galerie__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.fournil-galerie__item {
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	aspect-ratio: 302 / 146;
	border-radius: var(--wp--custom--radius--carte);
	overflow: hidden;
}

.fournil-galerie__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fournil-transition);
}

.fournil-galerie__item:hover img,
.fournil-galerie__item:focus-visible img {
	transform: scale(1.05);
}

/* Lightbox : dialog plein écran, image centrée + flèches + croix.
   box-sizing:border-box pour que le padding soit inclus dans le 100% (sinon le
   dialog déborde de la largeur du padding et les boutons droits sortent). */
.fournil-lightbox {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(16px, 4vw, 56px);
	border: none;
	background: transparent;
	overflow: hidden;
}

.fournil-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fournil-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.fournil-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--carte);
}

.fournil-lightbox__nav,
.fournil-lightbox__fermer {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--blanc);
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--wp--custom--radius--pastille);
	transition: background-color var(--fournil-transition);
}

.fournil-lightbox__nav:hover,
.fournil-lightbox__fermer:hover,
.fournil-lightbox__nav:focus-visible,
.fournil-lightbox__fermer:focus-visible {
	background: var(--wp--preset--color--orange);
}

.fournil-lightbox__nav {
	width: 56px;
	height: 56px;
	top: 50%;
	transform: translateY(-50%);
}

.fournil-lightbox__nav svg {
	width: 26px;
	height: 26px;
}

.fournil-lightbox__nav--prev {
	left: clamp(8px, 2vw, 32px);
}

.fournil-lightbox__nav--next {
	right: clamp(8px, 2vw, 32px);
}

.fournil-lightbox__fermer {
	width: 48px;
	height: 48px;
	top: clamp(12px, 3vw, 32px);
	right: clamp(12px, 3vw, 32px);
}

.fournil-lightbox__fermer svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 980px) {
	.fournil-galerie__grille {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.fournil-galerie__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 6a-decies. Recrutement : avantages (photo gauche + accordéons), valeurs
 * ---------------------------------------------------------------------- */

.fournil-avantages {
	position: relative;
	overflow: hidden;
}

.fournil-avantages__inner {
	display: flex;
	align-items: stretch;
	gap: clamp(32px, 4vw, 78px);
}

/* Photo détourée à gauche (recette miroir) : file jusqu'au bord gauche réel. */
.fournil-avantages__media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-left: calc(50% - 50vw);
}

/* Photo desktop : rognée à gauche en rétrécissant, le sujet reste visible côté contenu. */
.fournil-avantages__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.fournil-avantages__photo-mobile {
	display: none;
}

.fournil-avantages__contenu {
	position: relative;
	flex: 0 1 562px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(48px, 6vw, 80px);
}

.fournil-avantages__titre {
	margin: 0;
	color: var(--wp--preset--color--blanc);
}

.fournil-avantages__liste {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Filigrane décoratif derrière les accordéons. */
.fournil-avantages__filigrane {
	position: absolute;
	right: -24px;
	bottom: 0;
	width: clamp(200px, 24vw, 360px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Accordéon natif réutilisable (<details>). */
.fournil-accordeon {
	background-color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 19.3px rgba(103, 73, 22, 0.3);
}

.fournil-accordeon__tete {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	cursor: pointer;
	list-style: none;
}

.fournil-accordeon__tete::-webkit-details-marker {
	display: none;
}

.fournil-accordeon__num {
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
}

.fournil-accordeon__label {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--noir);
}

/* Toggle + / - dessiné en CSS (le « + » devient « - » à l'ouverture). */
.fournil-accordeon__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 2px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--pastille);
}

.fournil-accordeon__toggle::before,
.fournil-accordeon__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--orange);
}

.fournil-accordeon__toggle::before {
	width: 12px;
	height: 2px;
}

.fournil-accordeon__toggle::after {
	width: 2px;
	height: 12px;
	transition: opacity var(--fournil-transition);
}

.fournil-accordeon[open] .fournil-accordeon__toggle::after {
	opacity: 0;
}

.fournil-accordeon__corps {
	padding: 0 16px 16px;
	color: var(--wp--preset--color--noir);
}

.fournil-accordeon__corps p {
	margin: 0;
}

@media (max-width: 980px) {
	.fournil-avantages__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-avantages__media,
	.fournil-avantages__filigrane {
		display: none;
	}

	.fournil-avantages__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* Valeurs : titre + intro, puis 4 colonnes icône + titre + texte (centrées). */
.fournil-valeurs__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 48px);
	padding-block: clamp(48px, 7vw, 104px);
}

.fournil-valeurs__entete {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 993px;
}

.fournil-valeurs__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-valeurs__intro {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

.fournil-valeurs__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fournil-valeur {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 24px;
	background-color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 26.85px rgba(103, 73, 22, 0.1);
}

.fournil-valeur__icone {
	width: 40px;
	height: 40px;
}

.fournil-valeur__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--noir);
}

.fournil-valeur__desc {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

@media (max-width: 980px) {
	.fournil-valeurs__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.fournil-valeurs__grille {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 6a-undecies. Recrutement : offres (même recette que les ateliers de l'accueil,
 * photo PNG détourée à droite). Module de recrutement = placeholder (Phase 4).
 * ---------------------------------------------------------------------- */

.fournil-offres {
	position: relative;
	overflow: hidden;
}

.fournil-offres__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: clamp(32px, 4vw, 48px);
}

.fournil-offres__texte {
	position: relative;
	z-index: 2;
	flex: 0 1 604px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-block: clamp(48px, 6vw, 84px);
}

.fournil-offres__texte h2 {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-offres__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 718px;
}

.fournil-offres__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

/* Module de recrutement : liste d'offres (ou état vide) + CTA Indeed. */
.fournil-offres__module {
	width: 100%;
	max-width: 604px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fournil-offres__liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Fiche offre : réutilise la carte blanche (cf. .fournil-boutique-carte). */
.fournil-offre-carte__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.fournil-offre-carte__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 24px;
	color: var(--wp--preset--color--graphite);
}

.fournil-offre-carte__ville {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
}

/* Badges (contrat, temps de travail) : petites pastilles crème. */
.fournil-offre-carte__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.fournil-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pastille);
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.fournil-offre-carte__debut {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

.fournil-offre-carte__maj {
	margin: 0;
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/* Popin de détail d'une offre : infos en liste + description + bouton Indeed. */
.fournil-offre-popin__infos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fournil-offre-popin__infos li {
	margin: 0;
}

.fournil-offre-popin__maj {
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.fournil-offre-popin__desc {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fournil-offre-popin__desc > * {
	margin: 0;
}

/* Actions de la popin (Postuler, Voir sur Indeed) : en ligne, largeur naturelle. */
.fournil-offre-popin__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* État vide : message sobre quand aucune offre publiée. */
.fournil-offres__vide {
	margin: 0;
	padding: 24px;
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	color: var(--wp--preset--color--noir);
	font-weight: 500;
}

.fournil-offres__cta {
	display: flex;
}

/* Photo desktop : colonne droite qui file jusqu'au bord droit réel de la section.
   object-fit cover + position gauche : le bord détouré reste visible à gauche. */
.fournil-offres__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
}

.fournil-offres__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.fournil-offres__photo-mobile {
	display: none;
}

/* Mascotte : sous le contenu, à droite du texte, plus petite. */
.fournil-offres__mascotte {
	position: absolute;
	left: clamp(420px, 46%, 620px);
	bottom: 0;
	width: clamp(170px, 19vw, 260px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 980px) {
	.fournil-offres__inner {
		flex-direction: column;
		align-items: stretch;
		padding-bottom: clamp(24px, 5vw, 40px);
	}

	.fournil-offres__texte {
		flex: 0 0 auto;
	}

	.fournil-offres__module {
		max-width: none;
	}

	.fournil-offres__media,
	.fournil-offres__mascotte {
		display: none;
	}

	.fournil-offres__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 6a-duodecies. Contact : photo gauche + formulaire droite, pastille info déco.
 * Le composant .fournil-form (champs, lignes, RGPD) est réutilisable (devis,
 * sponsoring...).
 * ---------------------------------------------------------------------- */

.fournil-contact {
	position: relative;
	overflow: hidden;
}

.fournil-contact__inner {
	display: flex;
	align-items: flex-start;
	gap: clamp(40px, 6vw, 78px);
	padding-block: clamp(48px, 6vw, 104px);
}

/* Photo croissants à gauche, hauteur calée sur le formulaire. */
.fournil-contact__media {
	position: relative;
	z-index: 1;
	flex: 0 0 clamp(320px, 42%, 577px);
	align-self: stretch;
}

.fournil-contact__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--carte);
}

.fournil-contact__contenu {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-contact__titre {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-contact__intro {
	margin: 0 0 8px;
	color: var(--wp--preset--color--noir);
}

/* Pastille « info » décorative, bas-gauche, file hors du bord. */
.fournil-contact__info {
	position: absolute;
	left: -39px;
	bottom: clamp(24px, 4vw, 56px);
	width: clamp(150px, 16vw, 234px);
	height: auto;
	z-index: 2;
	pointer-events: none;
}

/* Formulaire réutilisable. */
.fournil-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 518px;
}

.fournil-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fournil-form__champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fournil-form__label {
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 12px;
	line-height: 20px;
	color: var(--wp--preset--color--graphite);
}

.fournil-form__requis {
	color: var(--wp--preset--color--orange);
}

/* Champ : bordure graphite, rayon bouton, padding 16px. box-sizing border-box
   pour que le padding reste dans la largeur : sinon l'input déborde de sa colonne
   et les champs en deux colonnes (nom/prénom, email/téléphone) se chevauchent. */
.fournil-form__input {
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--graphite);
	background-color: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: var(--wp--custom--radius--bouton);
}

.fournil-form__input::placeholder {
	color: rgba(57, 60, 66, 0.5);
}

.fournil-form__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 1px;
}

.fournil-form__textarea {
	min-height: 139px;
	resize: vertical;
}

/* Select : chevron à droite (caret générique), pas d'apparence native. */
.fournil-form__select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23393c42' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.fournil-form__rgpd {
	margin: 0;
	font-size: 10px;
	line-height: 1.4;
	color: var(--wp--preset--color--graphite);
}

/* Bouton submit : reprend le composant bouton orange (.fournil-bouton). */
.fournil-form button[type="submit"] {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Formulaire Fluent Forms habillé à la maquette (page Contact).
 * On mappe les classes Fluent (.ff-*) sur les mêmes tokens que .fournil-form,
 * pour un rendu identique sans style ad hoc.
 * ---------------------------------------------------------------------- */
.fournil-contact .frm-fluent-form {
	width: 100%;
	max-width: 518px;
}

/* Fluent enveloppe les champs dans un <fieldset> : c'est lui le conteneur flex. */
.fournil-contact .frm-fluent-form fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.fournil-contact .frm-fluent-form .ff-el-group {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Champs sur deux colonnes (nom/prénom, email/téléphone). Léger jeu pour éviter
   un retour à la ligne dû aux arrondis sous-pixels. */
.fournil-contact .frm-fluent-form .ff-el-group.ff-fournil-half {
	width: calc(50% - 10px);
}

.fournil-contact .ff-el-input--label label {
	margin: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 12px;
	line-height: 20px;
	color: var(--wp--preset--color--graphite);
}

/* Astérisque requis en orange (Fluent ne le rend pas, la maquette le demande). */
.fournil-contact .ff-el-is-required label::after {
	content: " *";
	color: var(--wp--preset--color--orange);
}

.fournil-contact .ff-el-form-control {
	width: 100%;
	padding: 16px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--graphite);
	background-color: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: var(--wp--custom--radius--bouton);
	box-shadow: none;
}

.fournil-contact .ff-el-form-control::placeholder {
	color: rgba(57, 60, 66, 0.5);
}

.fournil-contact .ff-el-form-control:focus,
.fournil-contact .ff-el-form-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--graphite);
	box-shadow: none;
}

.fournil-contact textarea.ff-el-form-control {
	min-height: 139px;
	resize: vertical;
}

/* Select : chevron custom, pas d'apparence native (identique à .fournil-form__select). */
.fournil-contact select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23393c42' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

/* Case RGPD : texte petit, aligné à la case. */
.fournil-contact .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--wp--preset--color--graphite);
}

.fournil-contact .ff-el-form-check input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* Note conditionnelle (candidature spontanée). */
.fournil-contact .fournil-form__note {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--bouton);
	background: var(--wp--preset--color--creme);
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--graphite);
}

/* Bouton d'envoi = composant bouton orange de la charte. */
.fournil-contact .ff_submit_btn_wrapper {
	width: 100%;
}

.fournil-contact .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--bouton);
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--fournil-transition), color var(--fournil-transition);
}

.fournil-contact .ff-btn-submit:hover,
.fournil-contact .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
}

@media (max-width: 980px) {
	.fournil-contact__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fournil-contact__media {
		flex: 0 0 auto;
		max-height: 360px;
	}

	.fournil-form {
		max-width: none;
	}

	/* Pastille info en décor desktop uniquement. */
	.fournil-contact__info {
		display: none;
	}
}

@media (max-width: 540px) {
	.fournil-form__row {
		grid-template-columns: 1fr;
	}

	.fournil-contact .frm-fluent-form .ff-el-group.ff-fournil-half {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 6a-terdecies. Entête de page (band graphite + vague), réutilisée par les
 * pages utilitaires (blog, pages légales). Même raccord que le hero, sans image.
 * Le journal (liste d'articles) et l'article seul (prose) en dérivent.
 * ---------------------------------------------------------------------- */

.fournil-entete {
	position: relative;
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
	text-align: center;
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px);
}

.fournil-entete__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.fournil-entete__titre {
	margin: 0;
	max-width: 24ch;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
}

.fournil-entete__intro {
	margin: 0;
	max-width: 60ch;
	color: var(--wp--preset--color--blanc);
}

/* Page 404 : sous l'entête, bouton retour accueil + liens utiles, centrés. */
.fournil-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-block: clamp(48px, 7vw, 96px);
	text-align: center;
}

.fournil-404__liens {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
}

.fournil-404__liens a {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	text-decoration: none;
}

.fournil-404__liens a:hover,
.fournil-404__liens a:focus-visible {
	text-decoration: underline;
}

/* Journal : grille d'articles (cartes blanches, photo + titre + extrait). */
.fournil-journal {
	padding-block: clamp(48px, 6vw, 96px);
}

/* Grille sur le <ul> du post-template ; chaque carte = un <li>. */
.fournil-journal__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fournil-journal__grille > li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

/* Le cadre (figure) porte le ratio et le rayon ; l'image se contente de le
   remplir. Important : ne PAS remettre d'aspect-ratio sur l'img, qui a déjà
   height:100% (inline du bloc) : ce double ratio + hauteur en % crée une boucle
   de recalcul qui fait grossir l'image au survol sous WebKit/Safari. */
.fournil-article-carte__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--carte);
}

.fournil-article-carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fournil-article-carte__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.fournil-article-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.fournil-article-carte__titre a:hover {
	color: var(--wp--preset--color--orange);
}

.fournil-article-carte__extrait,
.fournil-article-carte__extrait p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

.fournil-journal__pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(32px, 4vw, 56px);
}

/* Article seul : retour, photo, méta, prose à largeur de lecture. */
.fournil-article {
	padding-block: clamp(40px, 5vw, 72px);
}

.fournil-article__retour {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
	font-weight: 700;
}

.fournil-article__retour:hover {
	color: var(--wp--preset--color--orange);
}

.fournil-article__media img {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--carte);
	margin-bottom: 24px;
}

.fournil-article__date {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	margin-bottom: 8px;
}

/* Prose partagée (article + pages légales) : largeur de lecture confortable. */
.fournil-prose {
	max-width: 760px;
	margin-inline: auto;
}

.fournil-prose > * + * {
	margin-top: 1em;
}

.fournil-prose h2,
.fournil-prose h3 {
	font-family: var(--wp--preset--font-family--titre);
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	line-height: 1.1;
	margin-top: 1.6em;
}

.fournil-prose a {
	color: var(--wp--preset--color--orange);
}

/* Page légale : prose seule, sous l'entête. */
.fournil-page-corps {
	padding-block: clamp(40px, 5vw, 72px);
}

@media (max-width: 980px) {
	.fournil-journal__grille {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fournil-journal__grille {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 6b. Section histoire (sombre) : texte + photo équipe + dépliable dirigeant
 * ---------------------------------------------------------------------- */

.fournil-histoire {
	position: relative;
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
	overflow: hidden;
}

/* Logo en filigrane, bas-gauche. Ton sur ton (#4D5055 sur graphite), pleine
   opacité pour qu'il ressorte comme dans la maquette. */
.fournil-histoire__filigrane {
	position: absolute;
	left: -33px;
	bottom: -24px;
	width: clamp(240px, 27vw, 387px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Largeur + padding gérés par .fournil-conteneur (conteneur standard du thème). */
.fournil-histoire__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: clamp(32px, 4vw, 48px);
}

.fournil-histoire__texte {
	flex: 0 1 574px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	padding-block: clamp(48px, 6vw, 80px);
}

.fournil-histoire__texte h2 {
	margin: 0;
	color: var(--wp--preset--color--blanc);
}

.fournil-histoire__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-histoire__corps p {
	margin: 0;
	color: var(--wp--preset--color--blanc);
}

/* Photo équipe : colonne droite qui file jusqu'au bord droit réel de la section.
   object-fit cover + position gauche : le bord détouré reste visible à gauche, et
   c'est la droite de la photo qui se fait rogner quand la fenêtre rétrécit. */
.fournil-histoire__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
}

.fournil-histoire__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Version mobile (image dédiée), masquée en desktop. */
.fournil-histoire__photo-mobile {
	display: none;
}

/* « Le mot du dirigeant » : déclencheur de la popin (pastille citation). */
.fournil-dirigeant__tete {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 574px;
	padding: 20px 16px;
	background-color: var(--wp--preset--color--blanc);
	border: none;
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 19px rgba(103, 73, 22, 0.3);
	cursor: pointer;
	text-align: left;
	font: inherit;
}

.fournil-dirigeant__quote {
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
}

.fournil-dirigeant__label {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--noir);
}

.fournil-dirigeant__plus {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	transition: transform var(--fournil-transition);
}

.fournil-dirigeant__tete:hover .fournil-dirigeant__plus,
.fournil-dirigeant__tete:focus-visible .fournil-dirigeant__plus {
	transform: scale(1.12);
}

/* -------------------------------------------------------------------------
 * 6c. Popin réutilisable (dialog natif)
 *     Carte centrée sur desktop, plein écran sur mobile.
 * ---------------------------------------------------------------------- */

/* Le <dialog> sert de calque plein écran qui centre la carte. */
.fournil-popin {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(16px, 5vw, 48px);
	border: none;
	background: transparent;
	overflow: hidden;
}

/* Le dialog reçoit le focus à l'ouverture (cf. popin.js) : pas d'anneau dessus,
   il sert seulement à éviter le contour de focus sur le bouton fermer. */
.fournil-popin:focus {
	outline: none;
}

.fournil-popin[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fournil-popin::backdrop {
	background-color: rgba(57, 60, 66, 0.55);
	backdrop-filter: blur(2px);
}

/* Verrou de scroll de l'arrière-plan quand une popin est ouverte. */
.fournil-popin-ouverte {
	overflow: hidden;
}

.fournil-popin__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 562px;
	max-height: 85vh;
	padding: 20px 16px;
	background-color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 19.3px rgba(103, 73, 22, 0.3);
}

.fournil-popin__tete {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fournil-popin__quote {
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
}

.fournil-popin__titre {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--noir);
}

/* Bouton fermer : le « plus » pivoté à 45deg forme une croix. */
.fournil-popin__fermer {
	flex: 0 0 auto;
	display: inline-flex;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.fournil-popin__fermer img {
	width: 32px;
	height: 32px;
	transform: rotate(45deg);
	transition: transform var(--fournil-transition);
}

.fournil-popin__fermer:hover img,
.fournil-popin__fermer:focus-visible img {
	transform: rotate(45deg) scale(1.12);
}

/* Le <dialog> ouvert avec showModal() met le focus sur ce bouton (premier
   élément focusable) : Safari peint alors un contour bleu à l'ouverture à la
   souris. On retire le contour par défaut et on garde un anneau de marque
   uniquement au clavier (:focus-visible), pour préserver l'accessibilité. */
.fournil-popin__fermer:focus {
	outline: none;
}

.fournil-popin__fermer:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

/* Corps défilable si le texte dépasse la hauteur de la carte.
   flex + min-height:0 : le corps se contracte et défile au lieu de pousser la carte. */
.fournil-popin__corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--wp--preset--color--noir);
}

.fournil-popin__corps p {
	margin: 0;
}

.fournil-popin__signature {
	color: var(--wp--preset--color--orange);
	font-weight: 500;
}

/* Mobile : la popin occupe tout l'écran, sans rayon ni marge. */
@media (max-width: 600px) {
	.fournil-popin {
		padding: 0;
	}

	.fournil-popin[open] {
		align-items: stretch;
	}

	.fournil-popin__carte {
		max-width: none;
		max-height: none;
		height: 100%;
		border-radius: 0;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	}
}

/* Empilement sous 980px : visuel mobile dédié, pleine largeur, sous le contenu. */
@media (max-width: 980px) {
	.fournil-histoire__inner {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	.fournil-histoire__texte {
		flex: 0 0 auto;
		min-width: 0;
	}

	/* La photo desktop et le filigrane (décor desktop) sont masqués. */
	.fournil-histoire__media,
	.fournil-histoire__filigrane {
		display: none;
	}

	.fournil-histoire__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 7. Ateliers : fond crème, photo (PNG détouré) à droite, mascotte sous le texte
 * ---------------------------------------------------------------------- */

.fournil-ateliers {
	position: relative;
	overflow: hidden;
}

/* Largeur + gouttières gérées par .fournil-conteneur (texte aligné comme partout).
   Seule la photo s'échappe du conteneur pour filer au bord droit (voir __media). */
.fournil-ateliers__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: clamp(32px, 4vw, 48px);
}

.fournil-ateliers__texte {
	position: relative;
	z-index: 2;
	flex: 0 1 604px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-block: clamp(48px, 6vw, 84px);
}

.fournil-ateliers__texte h2 {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.fournil-ateliers__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 554px;
}

.fournil-ateliers__corps p {
	margin: 0;
	color: var(--wp--preset--color--noir);
}

/* Grille 2 colonnes des cartes découverte. */
.fournil-ateliers__cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 272px));
	gap: 8px;
	width: 100%;
	max-width: 554px;
}

/* Photo desktop : colonne droite qui file jusqu'au bord droit réel de la section.
   object-fit cover + position gauche : le bord détouré reste visible à gauche, et
   c'est la droite de la photo qui se fait rogner quand la fenêtre rétrécit. La
   colonne flex ne déborde jamais sur le texte. */
.fournil-ateliers__media {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
}

.fournil-ateliers__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.fournil-ateliers__photo-mobile {
	display: none;
}

/* Mascotte : sous le contenu, à gauche, plus petite. */
.fournil-ateliers__mascotte {
	position: absolute;
	left: clamp(300px, 40%, 470px);
	bottom: 0;
	width: clamp(170px, 19vw, 260px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

/* Carte « découverte » : composant réutilisable (pill blanche, épis, libellé). */
.fournil-carte-decouverte {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 12px 16px 12px 76px;
	background-color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--carte);
	box-shadow: 0 2px 19.3px rgba(103, 73, 22, 0.3);
	overflow: hidden;
}

/* Épis qui déborde en haut à gauche, rogné par la carte. */
.fournil-carte-decouverte__icone {
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 71px;
	height: 71px;
}

.fournil-carte-decouverte__label {
	font-family: var(--wp--preset--font-family--corps);
	font-size: 16px;
	color: var(--wp--preset--color--noir);
}

/* Empilement sous 980px : visuel mobile dédié, pleine largeur, sous le contenu. */
@media (max-width: 980px) {
	.fournil-ateliers__inner {
		flex-direction: column;
		align-items: stretch;
		padding-bottom: clamp(24px, 5vw, 40px);
	}

	.fournil-ateliers__texte {
		flex: 0 0 auto;
	}

	.fournil-ateliers__cartes {
		grid-template-columns: 1fr;
		max-width: none;
	}

	/* La photo desktop et la mascotte (décor desktop) sont masquées. */
	.fournil-ateliers__media,
	.fournil-ateliers__mascotte {
		display: none;
	}

	.fournil-ateliers__photo-mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* -------------------------------------------------------------------------
 * 8. Instagram / réseaux
 * ---------------------------------------------------------------------- */

/* Fond blanc, rythme vertical de 104px (comme la maquette). */
.fournil-instagram {
	padding-block: var(--wp--preset--spacing--90);
}

.fournil-instagram__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.fournil-instagram__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--graphite);
}

/* Zone du flux : accueille le placeholder de consentement, puis le flux cloné. */
.fournil-instagram__zone {
	min-height: clamp(320px, 38vw, 491px);
}

/* Placeholder de consentement (charte), avant acceptation des cookies. */
.fournil-instagram__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: clamp(320px, 38vw, 491px);
	padding: clamp(24px, 5vw, 48px);
	text-align: center;
	border-radius: var(--wp--custom--radius--carte);
	background-color: var(--wp--preset--color--creme);
}

.fournil-instagram__consent-icone {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.fournil-instagram__consent-texte {
	margin: 0;
	max-width: 42ch;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
}

/* Flux Smash Balloon : visuels portrait (maquette ~393x491), coins arrondis.
   Le nombre de colonnes (3) se règle dans Smash Balloon une fois le compte
   connecté ; on garde ici le format et le rayon dans la charte. */
.fournil-instagram__zone #sb_instagram .sbi_item {
	aspect-ratio: 393 / 491;
	border-radius: var(--wp--custom--radius--carte);
	overflow: hidden;
}

.fournil-instagram__zone #sb_instagram .sbi_item img,
.fournil-instagram__zone #sb_instagram .sbi_item .sbi_photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * 9. Footer
 * ---------------------------------------------------------------------- */

.fournil-footer {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--blanc);
}

/* Bandeau principal : logo + 3 colonnes, centrés. */
.fournil-footer__principal {
	padding-block: 40px;
	padding-inline: var(--fournil-marge);
}

.fournil-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(40px, 6vw, 86px);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.fournil-footer__logo img {
	display: block;
	width: clamp(240px, 26vw, 308px);
	height: auto;
}

.fournil-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(40px, 6vw, 86px);
	padding-top: 16px;
}

.fournil-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Titre de colonne : Archer (accent), orange, majuscules. */
.fournil-footer__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.fournil-footer__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fournil-footer__liste a {
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
	transition: color var(--fournil-transition);
}

.fournil-footer__liste a:hover,
.fournil-footer__liste a:focus-visible {
	color: var(--wp--preset--color--orange);
}

.fournil-footer__social {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fournil-footer__social img {
	display: block;
	width: 32px;
	height: 32px;
	transition: transform var(--fournil-transition);
}

.fournil-footer__social a:hover img,
.fournil-footer__social a:focus-visible img {
	transform: scale(1.1);
}

/* Sous-footer : bandeau crème, liens légaux + crédit, centrés. */
.fournil-footer__bas {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--graphite);
	padding-block: 16px;
	padding-inline: var(--fournil-marge);
}

.fournil-footer__bas-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 12px;
	font-weight: 300;
}

.fournil-footer__bas a {
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
	transition: color var(--fournil-transition);
}

.fournil-footer__bas a:hover,
.fournil-footer__bas a:focus-visible {
	color: var(--wp--preset--color--orange);
}

.fournil-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fournil-footer__credit img {
	display: block;
	width: auto;
	height: 12px;
}

/* -------------------------------------------------------------------------
 * 10. Menu mobile (hamburger natif core/navigation)
 * ---------------------------------------------------------------------- */

/* En-tête : bascule en burger avant que la nav desktop ne déborde (~1100px).
   Le menu déroulant fonctionne sans JS, via la case à cocher. */
@media (max-width: 1100px) {
	.fournil-header__social {
		display: none;
	}

	.fournil-header__bar {
		position: relative;
		flex-wrap: wrap;
	}

	.fournil-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 9px;
		cursor: pointer;
	}

	.fournil-header__burger span {
		display: block;
		height: 3px;
		border-radius: 2px;
		background-color: var(--wp--preset--color--graphite);
		transition: transform var(--fournil-transition), opacity var(--fournil-transition);
	}

	.fournil-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--wp--preset--color--blanc);
		box-shadow: 0 10px 24px rgba(57, 60, 66, 0.12);
		z-index: 30;
	}

	.fournil-header__toggle:checked ~ .fournil-header__bar .fournil-nav {
		display: block;
	}

	.fournil-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 8px;
	}

	.fournil-nav__link {
		justify-content: flex-start;
		gap: 12px;
		padding: 14px var(--fournil-marge);
	}

	/* En liste verticale, le picto passe à côté du libellé. */
	.fournil-nav__picto {
		position: static;
		transform: none;
		width: 38px;
		height: 38px;
	}

	.fournil-nav__link:hover .fournil-nav__picto,
	.fournil-nav__link:focus-visible .fournil-nav__picto {
		transform: scale(1.1);
	}
}

@media (max-width: 781px) {
	.fournil-gamme__cartes {
		flex-wrap: wrap;
	}

	.fournil-gamme__cartes .fournil-gamme-carte {
		flex: 1 1 calc(50% - 12px);
	}

	.fournil-instagram__zone #sb_instagram .sbi_item {
		aspect-ratio: 16 / 10;
	}

	.fournil-bandeau__message {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

@media (max-width: 480px) {
	.fournil-gamme__cartes .fournil-gamme-carte {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * 11. Compléments de composants (patterns accueil)
 * ---------------------------------------------------------------------- */

/* Hero plein écran (réglages dans la section 4). */
.fournil-hero.alignfull {
	margin-block: 0;
}

/* Placeholder média (photo client à venir). */
.fournil-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 320px;
	border-radius: var(--wp--custom--radius--carte);
	background: repeating-linear-gradient(135deg, rgba(251, 236, 211, 0.5) 0 14px, rgba(251, 236, 211, 0.3) 14px 28px);
	color: var(--wp--preset--color--graphite);
	font-weight: 700;
	opacity: 0.85;
}

/* Section engagement : photo à gauche, texte + logos à droite. */
.fournil-engagement__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 78px);
	padding-block: clamp(48px, 7vw, 104px);
}

.fournil-engagement__media {
	flex: 1 1 0;
	min-width: 0;
}

.fournil-engagement__media img,
.fournil-engagement__media .fournil-media-placeholder {
	width: 100%;
	aspect-ratio: 577 / 471;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--carte);
}

.fournil-engagement__texte {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.fournil-engagement__texte h2 {
	margin: 0;
}

.fournil-engagement__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fournil-engagement__corps p {
	margin: 0;
}

/* Logos partenaires : pastilles crème rondes. */
.fournil-engagement__logos {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}

.fournil-engagement__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 10vw, 114px);
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--pastille);
	background-color: var(--wp--preset--color--creme);
}

.fournil-engagement__logo img {
	width: 53%;
	height: 53%;
	object-fit: contain;
}

@media (max-width: 980px) {
	.fournil-engagement__inner {
		flex-direction: column;
		align-items: stretch;
	}
}


/* Responsive complémentaire. */
@media (max-width: 781px) {
	.fournil-reassurance__grille {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.fournil-reassurance__item {
		flex-basis: auto;
	}

	.fournil-footer__cols {
		gap: 32px;
	}

	.fournil-footer__bas {
		flex-direction: column;
		text-align: center;
	}
}