/*
 Theme Name:   Campagne (Bricks enfant)
 Theme URI:    https://www.campagne-boulangerie.be/
 Description:  Thème enfant de Bricks pour campagne-boulangerie.be.
 Author:       Butterfly Pixel
 Template:     bricks
 Version:      1.0.0
 Text Domain:  bricks
*/

/* Source de vérité : campagne-boulangerie.be/theme-enfant/ sur le poste.
   Toutes les valeurs viennent des variables posées par bricks/01-systeme-design.php. */

/* ==========================================================================
   EN-TÊTE — barre translucide, logo au centre dans un cercle blanc
   Figma : barre 1800×80 à 30 px du haut et 60 px des bords, #F1E3BE à 70 % + flou.
   ========================================================================== */

/* L'en-tête flotte au-dessus du hero (accueil) et des bandeaux (pages internes). */
#brx-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.cb-entete {
	/* Deux mesures règlent tout l'en-tête. Le cercle du logo est CENTRÉ
	   verticalement sur la barre (demande d'Olivier, 03/10/2026) : il la
	   déborde donc d'autant en haut qu'en bas, et c'est le remplissage haut de
	   l'en-tête qui lui fait de la place — débordement + 12 px d'air. */
	/* QUATRE NOMBRES SANS UNITÉ pilotent toute la géométrie (hauteur de barre,
	   diamètre du cercle blanc, épaisseur de l'anneau, rayon des raccords).
	   Sans unité parce que le raccord arrondi se calcule avec sqrt() et pow(),
	   qui ne prennent que des nombres ; les longueurs en sont dérivées. */
	--n-barre: 80;
	--n-cercle: 184;
	--n-anneau: 10.5;
	--n-raccord: 26;
	--cb-barre-h: calc(var(--n-barre) * 1px);
	--cb-logo-cercle: calc(var(--n-cercle) * 1px);
	/* L'anneau : la barre s'élargit en disque autour du cercle blanc, de cette
	   épaisseur — le logo paraît ENCHÂSSÉ dans la barre (demande d'Olivier,
	   03/10/2026). Le dessin est fait par `.cb-entete__barre::before`. */
	--cb-logo-anneau: calc(var(--n-anneau) * 1px);
	--cb-barre-fond: color-mix(in srgb, var(--color-surface-or) 70%, transparent);
	--cb-logo-debord: calc((var(--cb-logo-cercle) - var(--cb-barre-h)) / 2);
	/* Hauteur de la ligne de coordonnées, au-dessus de la barre : c'est aussi
	   la place qu'il faut au disque du logo pour déborder vers le haut. */
	--cb-infos-h: calc(var(--cb-logo-debord) + var(--cb-logo-anneau) + var(--sp-12));
	padding: 0 var(--container-gutter);
}

/* LA LIGNE DE COORDONNÉES — téléphone et courriel à gauche, adresse à droite,
   en blanc (demande d'Olivier, 03/10/2026). Elle occupe l'espace au-dessus de
   la barre ; son centre reste vide, le disque du logo y déborde. */
.cb-entete__infos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
	width: 100%;
	max-width: calc(var(--container-large) - 2 * var(--container-gutter));
	height: var(--cb-infos-h);
	margin: 0 auto;
	padding: 0 var(--sp-48);
}

.cb-entete__infos-groupe {
	display: flex;
	align-items: center;
	gap: var(--sp-32);
}

.cb-info {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	color: var(--color-inverse);
	font-family: var(--font-texte);
	font-size: var(--fs-16);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	/* Les coordonnées sont posées directement sur une photo : un voile d'ombre
	   très léger tient le blanc lisible quelle que soit l'image dessous. */
	text-shadow: 0 1px 6px rgba(15, 42, 29, 0.45);
	transition: color 0.2s ease;
}

.cb-info:hover { color: var(--color-accent); }

/* Les icônes sont des MASQUES : la forme vient d'un SVG au trait, la couleur
   est celle du texte (`currentColor`) — blanc ici, orange au survol, sans
   deuxième jeu de fichiers. Trait de 1,5 sur une grille de 24. */
.cb-info::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--cb-icone) center / contain no-repeat;
	mask: var(--cb-icone) center / contain no-repeat;
	filter: drop-shadow(0 1px 3px rgba(15, 42, 29, 0.45));
}

.cb-info--tel {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.cb-info--courriel {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7.5l9 6 9-6'/%3E%3C/svg%3E");
}

.cb-info--adresse {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.cb-entete__barre {
	position: relative;
	display: grid;
	/* minmax(0, 1fr) et non 1fr : « 1fr » ne descend pas sous la largeur
	   minimale de son contenu, et le menu gauche (trois liens) poussait le
	   logo de 8 à 13 px à droite du centre sur un écran de 1280. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: calc(var(--container-large) - 2 * var(--container-gutter));
	height: var(--cb-barre-h);
	margin: 0 auto;
	/* 48 et non 24 : avec les bouts arrondis, le premier et le dernier lien
	   doivent respirer autant que la courbe le laisse voir. Même marge pour la
	   ligne de coordonnées, pour que tout s'aligne.
	   LES DEUX MARGES DOIVENT RESTER ÉGALES : le disque du masque est posé à
	   50 % de la barre, le logo au centre de la zone de contenu. Une marge
	   gauche de 60 contre 48 à droite (essai du 06/10/2026, pour l'épi du
	   premier lien) décalait le logo de 6 px par rapport à son anneau — vu par
	   Olivier. L'air de l'épi se donne sur le menu gauche lui-même, plus bas. */
	padding: 0 var(--sp-48);
	isolation: isolate;
}

/* LE FOND : UNE SEULE FORME, barre + disque, découpée dans UN SEUL élément.

   Première version (03/10/2026) : une barre percée d'un trou, plus une couronne
   posée autour du logo. Deux éléments, deux flous d'arrière-plan, et une
   jointure qui dessinait un liseré — vu par Olivier.

   Deuxième version (03→06/10) : un seul pseudo-élément, masqué par l'union de
   dégradés radiaux (disque, bouts ronds, quatre congés calculés en sqrt/pow).
   Un seul fond, un seul flou — mais Chrome rend les bords d'un dégradé radial
   SANS anticrénelage : des « escaliers » sur les arrondis, et pire aux
   jonctions barre/disque, où trois dégradés se rencontrent (vu par Olivier,
   07/10/2026 ; élargir la rampe de 0,5 à 1 px a aggravé les jonctions).

   Troisième version (07/10/2026) : LES ARRONDIS SONT DES SVG, les droites des
   dégradés linéaires. Le masque est l'union de cinq couches :
     - au centre, `assets/entete-centre-184.svg` (ou -124 sous 1100 px) : le
       disque, les quatre congés et un tronçon de barre, dessinés en vecteur et
       lissés par le moteur SVG — GÉNÉRÉS par un script Python à partir des
       mêmes quatre nombres (cercle, barre, anneau, raccord) ; à regénérer si
       on les change ;
     - un bout rond à chaque extrémité : `assets/entete-bout.svg`, un cercle
       étiré à la hauteur de la barre ;
     - deux rectangles (dégradés linéaires, bords droits donc nets) qui relient
       les bouts au centre, en mordant de 3 px sur leurs voisins — deux couches
       posées bord à bord laissent un filet (leçon du 03/10).
   La largeur du centre (--cb-centre-w) est celle du fichier SVG.

   C'est un pseudo-élément et non le fond de la barre elle-même parce que
   `backdrop-filter` ferait de la barre le bloc conteneur de ses descendants en
   `position: fixed` — le panneau du menu mobile y resterait enfermé. */
.cb-entete__barre::before {
	--cb-centre: url("assets/entete-centre-184.svg");
	--cb-centre-w: 245px;
	--cb-bout: url("assets/entete-bout.svg");
	--cb-bar-l: calc(50% - var(--cb-centre-w) / 2 - var(--cb-barre-h) / 2 + 6px);
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--cb-logo-debord) + var(--cb-logo-anneau))) 0;
	z-index: -1;
	background: var(--cb-barre-fond);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-mask:
		var(--cb-centre) center / var(--cb-centre-w) 100% no-repeat,
		var(--cb-bout) left center / var(--cb-barre-h) var(--cb-barre-h) no-repeat,
		var(--cb-bout) right center / var(--cb-barre-h) var(--cb-barre-h) no-repeat,
		linear-gradient(#000, #000) left calc(var(--cb-barre-h) / 2 - 3px) center / var(--cb-bar-l) var(--cb-barre-h) no-repeat,
		linear-gradient(#000, #000) right calc(var(--cb-barre-h) / 2 - 3px) center / var(--cb-bar-l) var(--cb-barre-h) no-repeat;
	mask:
		var(--cb-centre) center / var(--cb-centre-w) 100% no-repeat,
		var(--cb-bout) left center / var(--cb-barre-h) var(--cb-barre-h) no-repeat,
		var(--cb-bout) right center / var(--cb-barre-h) var(--cb-barre-h) no-repeat,
		linear-gradient(#000, #000) left calc(var(--cb-barre-h) / 2 - 3px) center / var(--cb-bar-l) var(--cb-barre-h) no-repeat,
		linear-gradient(#000, #000) right calc(var(--cb-barre-h) / 2 - 3px) center / var(--cb-bar-l) var(--cb-barre-h) no-repeat;
	pointer-events: none;
}

/* Bricks pose une marge de 30 px sur les entrées du menu (en plus de l'écart
   de 52) : la première du menu gauche décalait « Accueil » de 30 px, la barre
   paraissait déséquilibrée (78 à gauche, 48 à droite — vu par Olivier). Les
   bords extérieurs sont remis à zéro ; `!important` parce que la règle de
   Bricks porte l'identifiant de l'élément. */
.cb-entete__menu .bricks-nav-menu > li:first-child { margin-left: 0 !important; }
.cb-entete__menu .bricks-nav-menu > li:last-child  { margin-right: 0 !important; }

/* 12 px d'air pour l'épi du premier lien, posé 46 px avant « Accueil » : sans
   eux il commençait à 2 px du bout arrondi et ses coins en sortaient. Sur le
   menu et non sur la barre : la colonne reste minmax(0, 1fr), le logo ne bouge
   pas. */
.cb-entete__menu--gauche { justify-self: start; padding-left: var(--sp-12); }
.cb-entete__menu--droite { justify-self: end; }
.cb-entete__menu-mobile  { display: none; }

.cb-entete__menu .bricks-nav-menu > li > a {
	position: relative;
	font-family: var(--font-texte);
	font-size: var(--fs-16);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--ls-bouton);
	text-transform: uppercase;
	color: var(--color-text);
	padding: var(--sp-8) 0;
	/* Un libellé ne se coupe jamais : avec l'écart de 52 px, « Nos produits »
	   passait sur deux lignes à 1280 px. */
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* L'ÉPI DE BLÉ DU MENU (demande d'Olivier, 06/10/2026). La page active et le
   lien survolé portent, à leur gauche, un épi du client qui BALANCE comme
   sous le vent. C'est un masque sur `currentColor`, donc toujours de la
   couleur du texte, posé en absolu dans l'écart entre deux liens (52 px,
   réglé dans 05-entete.php) : rien ne bouge dans la barre quand il apparaît.

   Premier essai : la gravure « bouquet courbe » (ble-C-trio.svg), 26 px, ±6°
   en 3,4 s — illisible (traits trop fins pour cette taille, même à 56 px) et
   trop lent, vu par Olivier. On prend la série STYLISÉE (ble-trio-2.svg du
   client, découpée en ble-icone-*.svg), aux formes pleines faites pour les
   petites tailles : l'épi sur tige courbe, 34 px de haut, ±7° en 1,8 s. Pour
   changer de dessin, un seul nom de fichier ci-dessous. */
.cb-entete__menu .bricks-nav-menu > li > a::before {
	content: "";
	position: absolute;
	left: -46px;
	bottom: 4px;
	width: 42px;
	height: 34px;
	background: currentColor;
	-webkit-mask: url("assets/ble-icone-2-courbe.svg") center bottom / contain no-repeat;
	mask: url("assets/ble-icone-2-courbe.svg") center bottom / contain no-repeat;
	opacity: 0;
	/* Au repos l'épi est « sous terre » : écrasé sur sa base. */
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* DEUX ANIMATIONS, deux moments (demande d'Olivier, 06/10/2026) :
   - au SURVOL, l'épi SORT DE TERRE et pousse — 0,8 s, une seule fois : il
     monte depuis sa base, dépasse un peu, se redresse, et se penche en
     poussant comme une vraie tige ;
   - sur la PAGE ACTIVE, il est déjà poussé et BALANCE sous le vent, sans fin.
   Survoler la page active ne relance pas la pousse : elle garde son vent. */
.cb-entete__menu .bricks-nav-menu > li > a:hover::before {
	opacity: 1;
	animation: cb-pousse 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

.cb-entete__menu .bricks-nav-menu > li.current-menu-item > a::before,
.cb-entete__menu .bricks-nav-menu > li.current-menu-item > a:hover::before {
	opacity: 1;
	transform: none;
	animation: cb-vent 1.8s ease-in-out infinite alternate;
}

@keyframes cb-pousse {
	0%   { transform: scaleY(0) rotate(-8deg); }
	55%  { transform: scaleY(1.08) rotate(5deg); }
	80%  { transform: scaleY(0.97) rotate(-2deg); }
	100% { transform: scaleY(1) rotate(0deg); }
}

@keyframes cb-vent {
	from { transform: rotate(-7deg); }
	to   { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-entete__menu .bricks-nav-menu > li > a:hover::before,
	.cb-entete__menu .bricks-nav-menu > li.current-menu-item > a::before {
		animation: none;
		transform: none;
	}
}

/* Le cercle : plus grand que la barre, centré sur elle. Les marges négatives
   égales en haut et en bas le font déborder sans agrandir la barre.
   Le logo occupe 74 % du diamètre (il est lui-même circulaire : deux arcs de
   texte autour de la chouette). */
.cb-entete__logo {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cb-logo-cercle);
	height: var(--cb-logo-cercle);
	margin: calc(-1 * var(--cb-logo-debord)) var(--sp-32);
	border-radius: 50%;
	background: var(--color-surface);
	align-self: center;
}

.cb-entete__logo img {
	display: block;
	width: 74%;
	height: auto;
}

/* 1100 et non 991 : avec cinq liens, l'épi et l'écart de 52 px, la barre ne
   tient plus qu'à partir de ~1100 px (à 1024, « Contact » sortait de la barre
   de 47 px). Mesuré, pas supposé. */
@media (max-width: 1100px) {
	.cb-entete {
		--n-barre: 64;
		--n-cercle: 124;
		--n-anneau: 7.5;
		--n-raccord: 18;
		--cb-infos-h: calc(var(--cb-logo-debord) + var(--cb-logo-anneau) + var(--sp-12));
		padding: 0 var(--sp-16);
	}
	.cb-entete__barre::before { --cb-centre: url("assets/entete-centre-124.svg"); --cb-centre-w: 168px; }
	/* Sous 992 px il n'y a plus la place pour les textes de part et d'autre du
	   disque : les coordonnées deviennent trois icônes à toucher (44 px de
	   cible). Le texte reste dans la page pour les lecteurs d'écran. */
	.cb-entete__infos { padding: 0 var(--sp-4); gap: var(--sp-8); }
	.cb-entete__infos-groupe { gap: 0; }
	.cb-info {
		justify-content: center;
		width: 44px;
		height: 44px;
		gap: 0;
		font-size: 0;
		letter-spacing: 0;
	}
	.cb-info::before { width: 22px; height: 22px; }
	.cb-entete__barre { padding: 0 var(--sp-16); }
	.cb-entete__menu { display: none; }
	.cb-entete__menu-mobile { display: block; grid-column: 3; justify-self: end; }
	.cb-entete__logo {
		grid-column: 2;
		margin: calc(-1 * var(--cb-logo-debord)) 0;
	}
}

/* ==========================================================================
   BOUTONS — Figma « Button/Primary » : 48 px de haut, padding 13/26,
   Afacad Medium 16, capitales, interlettrage 5 %, angles droits.
   ========================================================================== */

.cb-bouton.bricks-button,
.cb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	background: var(--color-primary);
	color: var(--color-inverse);
	font-family: var(--font-texte);
	font-size: var(--fs-16);
	font-weight: 500;
	line-height: 22px;
	letter-spacing: var(--ls-bouton);
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cb-bouton:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.cb-bouton--clair.bricks-button,
.cb-bouton--clair {
	background: var(--color-surface);
	border-color: var(--color-surface);
	color: var(--color-text);
}

/* (le bouton « Voir les avis sur Google » de la section témoignages et le
   « Commander en ligne » de l'appel d'À propos reçoivent la même farine, côté
   gauche, et le même survol or pâle — Olivier, 07/10) */

/* ==========================================================================
   APPARITION DES SECTIONS AU DÉFILEMENT (Olivier, 07/10) : chaque section
   entre en glissant, de la gauche puis de la droite en alternance, quand elle
   arrive à l'écran. `html.cb-js` est posé par un script en ligne dans <head>
   (functions.php) AVANT le premier rendu : sans JavaScript, rien n'est caché.
   hero.js pose cb-section--droite une section sur deux et est-visible à
   l'entrée dans l'écran (IntersectionObserver). Le hero, le bandeau des pages internes et l'en-tête ne
   bougent pas. Une fois visible, `transform: none` : plus de bloc conteneur
   parasite pour les descendants positionnés.
   ========================================================================== */
/* les sections décalées de 72 px avant leur entrée feraient déborder la page
   à droite (ascenseur horizontal vu au contrôle) : le contenu principal les
   rogne — `clip`, pas `hidden`, pour ne pas devenir un conteneur de défilement */
html.cb-js #brx-content { overflow-x: clip; }

html.cb-js #brx-content > .brxe-section:not(.cb-hero):not(.cb-bandeau-page) {
	opacity: 0;
	transform: translateX(-72px);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.cb-js #brx-content > .brxe-section.cb-section--droite { transform: translateX(72px); }

/* .est-visible DOUBLÉ : la règle qui cache porte deux :not() (deux classes de
   spécificité) et l'emportait sur celle-ci — tout le site restait invisible
   (07/10, 11:15, vu par Olivier). Une règle qui révèle doit toujours peser
   plus que celle qui cache. */
html.cb-js #brx-content > .brxe-section.est-visible.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html.cb-js #brx-content > .brxe-section { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HERO — diaporama scindé (js/hero.js)
   Gauche : la photo suivante entre par le haut. Droite : par le bas.
   1 200 ms, power3.inOut.
   ========================================================================== */

.cb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(975px, 100svh);
	padding: 0;
	overflow: hidden;
	background: var(--color-primary);
}

.cb-hero__fond {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Le voile : la démo pose 50 % de noir ; 35 % suffit à tenir le titre blanc
   sans éteindre les photos. Un seul endroit pour le régler. */
.cb-hero__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(15, 42, 29, var(--cb-hero-voile, 0.35));
	pointer-events: none;
}

.cb-hero__moitie {
	position: relative;
	overflow: hidden;
}

.cb-hero__moitie--gauche { --cb-depart: -100%; }
.cb-hero__moitie--droite { --cb-depart: 100%; }

.cb-hero__moitie .cb-hero__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: translateY(var(--cb-depart));
	transition: none;
	will-change: transform;
}

.cb-hero__moitie .cb-hero__img.est-precedente {
	z-index: 2;
	transform: none;
}

.cb-hero__moitie .cb-hero__img.est-active {
	z-index: 3;
	transform: none;
	transition: transform var(--duree-hero) var(--courbe-hero);
}

.cb-hero__contenu {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-24);
	max-width: 900px;
	padding: 200px var(--sp-24) var(--sp-80);
	text-align: center;
}

.cb-hero__titre {
	margin: 0;
	font-size: var(--fs-105);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-titre);
	color: var(--color-inverse);
}

.cb-hero__soustitre {
	margin: 0;
	font-size: var(--fs-24);
	line-height: 1.2;
	letter-spacing: var(--ls-large);
	text-transform: uppercase;
	color: var(--color-inverse);
}

.cb-hero .cb-bouton { margin-top: var(--sp-16); }

/* LES BOUTONS DU HERO, DU BANDEAU ET DU FOURNIL : LA FARINE QUI EXPLOSE (essai n° 5, 06/10/2026 —
   après « farine tamisée », « dorure », « pain qui se tranche » et « pincée de
   grains CSS », écartés par Olivier).
   Au survol, le bouton prend LA COULEUR DE LA BARRE DE MENU (or en aplat —
   la barre est translucide, mais un bouton translucide sur une photo serait
   illisible), et un nuage de farine EXPLOSE depuis son bord gauche : il naît
   petit et dense contre le bouton, gonfle, s'éloigne vers la gauche et le
   haut, puis se dissipe — 1,1 s, rejouée à chaque survol.

   Le nuage est le dessin fourni par Olivier le 06/10 (`farine.svg`, le
   deuxième des quatre en partant de la gauche) : 44 740 tracés, 6 Mo en
   vectoriel — inservable au survol. Rastérisé une fois en WebP transparent
   640 × 596 (120 Ko, `assets/farine-explosion.webp`, source
   `farine-sources/explosion.svg`). Posé en fond du pseudo-élément dès le
   chargement (opacité 0), donc déjà en mémoire au premier survol. Une
   animation et non une transition : elle se rejoue, et ne se déroule pas à
   l'envers quand la souris part. `data-texte` (06-accueil.php) ne sert plus,
   il reste inoffensif. */
.cb-hero .cb-bouton,
.cb-temoignages-section .cb-bouton,
.cb-appel .cb-bouton--clair,
.cb-article__retour,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button,
.cb-bandeau .cb-bouton,
.cb-fournil .cb-bouton {
	position: relative;
	overflow: visible;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.cb-hero .cb-bouton:hover,
.cb-hero .cb-bouton:focus-visible,
.cb-temoignages-section .cb-bouton:hover,
.cb-temoignages-section .cb-bouton:focus-visible,
.cb-appel .cb-bouton--clair:hover,
.cb-appel .cb-bouton--clair:focus-visible,
.cb-article__retour:hover,
.cb-article__retour:focus-visible,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button:hover,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button:focus-visible,
.cb-bandeau .cb-bouton:hover,
.cb-bandeau .cb-bouton:focus-visible,
.cb-fournil .cb-bouton:hover,
.cb-fournil .cb-bouton:focus-visible {
	background: var(--color-surface-or);
	border-color: var(--color-surface-or);
	color: var(--color-text);
}

.cb-hero .cb-bouton::before,
.cb-temoignages-section .cb-bouton::before,
.cb-appel .cb-bouton--clair::before,
.cb-article__retour::before,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button::before,
.cb-bandeau .cb-bouton::before,
.cb-fournil .cb-bouton::before {
	content: "";
	position: absolute;
	/* À l'extérieur, contre le bord gauche, centré sur la hauteur du bouton. */
	right: calc(100% - 18px);
	top: 50%;
	width: 190px;
	height: 177px;
	margin-top: -92px;
	background: url("assets/farine-explosion.webp") center / contain no-repeat;
	opacity: 0;
	/* L'origine de l'explosion : le point de contact avec le bouton. */
	transform-origin: 90% 55%;
	transform: scale(0.2);
	pointer-events: none;
	will-change: transform, opacity;
}

.cb-hero .cb-bouton:hover::before,
.cb-hero .cb-bouton:focus-visible::before,
.cb-temoignages-section .cb-bouton:hover::before,
.cb-temoignages-section .cb-bouton:focus-visible::before,
.cb-appel .cb-bouton--clair:hover::before,
.cb-appel .cb-bouton--clair:focus-visible::before,
.cb-article__retour:hover::before,
.cb-article__retour:focus-visible::before,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button:hover::before,
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button:focus-visible::before,
.cb-bandeau .cb-bouton:hover::before,
.cb-bandeau .cb-bouton:focus-visible::before,
.cb-fournil .cb-bouton:hover::before,
.cb-fournil .cb-bouton:focus-visible::before {
	animation: cb-farine-explose 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* UN SEUL SEGMENT POUR LE MOUVEMENT. La courbe d'accélération s'applique à
   chaque intervalle entre deux keyframes : une étape intermédiaire sur
   `transform` faisait freiner le nuage jusqu'à l'arrêt à mi-course, puis
   repartir — « ça explose, ça se stoppe, puis ça continue » (Olivier, 06/10).
   Le mouvement va donc de 0 à 100 % d'une traite ; seule l'opacité a son
   propre pic au départ (une keyframe qui ne cite que `opacity` ne crée pas
   d'étape pour `transform`). */
@keyframes cb-farine-explose {
	0%   { opacity: 0;    transform: translate(0, 0) scale(0.2); }
	10%  { opacity: 0.95; }
	45%  { opacity: 0.85; }
	100% { opacity: 0;    transform: translate(-32px, -32px) scale(1.25) rotate(-8deg); }
}

/* LE BANDEAU « Le respect des traditions » ET LE FOURNIL « Le métier qu'on
   aime » : la même explosion, mais À DROITE du bouton (demandes d'Olivier,
   06/10) — son texte est calé à gauche
   de l'écran, le nuage a donc la place de ce côté-là. Géométrie en miroir de
   celle du hero, avec une SECONDE IMAGE déjà retournée
   (`farine-explosion-droite.webp`, même raster basculé horizontalement) :
   un `scaleX(-1)` sur le calque aurait renvoyé le nuage sur le bouton, le
   point d'origine de l'explosion se retrouvant du mauvais côté — vu à l'essai. */
.cb-bandeau .cb-bouton::before,
.cb-fournil .cb-bouton::before {
	right: auto;
	left: calc(100% - 18px);
	background-image: url("assets/farine-explosion-droite.webp");
	transform-origin: 10% 55%;
}

.cb-bandeau .cb-bouton:hover::before,
.cb-bandeau .cb-bouton:focus-visible::before,
.cb-fournil .cb-bouton:hover::before,
.cb-fournil .cb-bouton:focus-visible::before {
	animation-name: cb-farine-explose-droite;
}

@keyframes cb-farine-explose-droite {
	0%   { opacity: 0;    transform: translate(0, 0) scale(0.2); }
	10%  { opacity: 0.95; }
	45%  { opacity: 0.85; }
	100% { opacity: 0;    transform: translate(32px, -32px) scale(1.25) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-hero .cb-bouton::before,
	.cb-temoignages-section .cb-bouton::before,
	.cb-appel .cb-bouton--clair::before,
	.cb-bandeau .cb-bouton::before,
	.cb-fournil .cb-bouton::before { animation: none !important; }
}

/* Téléphone : deux moitiés de 195 px ne montrent rien. Une seule photo par
   diapositive (celles de gauche), en fondu. */
@media (max-width: 767px) {
	.cb-hero { min-height: min(720px, 100svh); }
	.cb-hero__fond { grid-template-columns: 1fr; }
	.cb-hero__moitie--droite { display: none; }
	.cb-hero__moitie .cb-hero__img,
	.cb-hero__moitie .cb-hero__img.est-precedente {
		transform: none;
		opacity: 0;
	}
	.cb-hero__moitie .cb-hero__img.est-precedente { opacity: 1; }
	.cb-hero__moitie .cb-hero__img.est-active {
		opacity: 1;
		transition: opacity var(--duree-hero) ease;
	}
	.cb-hero__contenu { padding-top: 170px; }
}

/* Mouvement réduit : plus de glissement, un fondu. */
@media (prefers-reduced-motion: reduce) {
	.cb-hero__moitie .cb-hero__img,
	.cb-hero__moitie .cb-hero__img.est-precedente {
		transform: none;
		opacity: 0;
	}
	.cb-hero__moitie .cb-hero__img.est-precedente { opacity: 1; }
	.cb-hero__moitie .cb-hero__img.est-active {
		opacity: 1;
		transition: opacity 0.6s ease;
	}
}

/* ==========================================================================
   PIED DE PAGE — Figma 01_Main_Home / « Footer 1 » (1920×510)
   Fond #1A311F (un noir a été essayé le 06/10/2026 et écarté par Olivier) ;
   contenu sur 1321 px ; trois colonnes 385 / 556 / 380
   séparées par deux filets verticaux #AEC3B0 ; filet horizontal #E3EED4 ;
   logo au centre, à cheval sur ce filet.
   ========================================================================== */

.cb-pied {
	--cb-pied-cercle: 132px;
	--cb-pied-fond: var(--color-primary);
	padding: var(--sp-120) var(--container-gutter) 0;
	background: var(--cb-pied-fond);
	color: var(--color-light);
}

.cb-pied__colonnes,
.cb-pied__bas {
	width: 100%;
	max-width: 1321px;
	margin: 0 auto;
}

.cb-pied__colonnes {
	display: grid;
	grid-template-columns: 385fr 556fr 380fr;
	/* L'espace sous les colonnes accueille la moitié haute du cercle du logo. */
	/* le moulin monte d'un cercle entier au-dessus du filet (les blés et le
	   logo d'un demi) : l'air sous les colonnes suit */
	padding-bottom: calc(var(--cb-pied-cercle) + var(--sp-24));
}

.cb-pied__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* textes centrés dans la hauteur de la colonne (Olivier, 07/10) */
	justify-content: center;
	min-height: 200px;
	padding: var(--sp-4) var(--sp-32);
	text-align: center;
}

.cb-pied__col + .cb-pied__col { border-left: 1px solid var(--color-light); }

/* Les titres sont des h2 pour la structure du document, mais ils ont l'allure
   d'un surtitre : il faut reprendre la main sur le style de thème des titres. */
.cb-pied .cb-pied__titre {
	margin: 0 0 var(--sp-16);
	font-family: var(--font-texte);
	font-size: var(--fs-14);
	font-weight: 600;
	line-height: 23px;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-inverse);
}

.cb-pied__texte,
.cb-pied__lien {
	margin: 0;
	font-size: var(--fs-16);
	line-height: 1.4;
	color: var(--color-light);
}

.cb-pied__col--centre .cb-pied__texte { max-width: 424px; }

/* sans air entre les lignes : même rythme que la colonne Horaires (Olivier, 07/10) */
.cb-pied__lien {
	padding: 0;
	transition: color 0.2s ease;
}

.cb-pied__lien:hover,
.cb-pied__lien-bas:hover { color: var(--color-accent); }

.cb-pied__bas {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
	padding: var(--sp-28) 0 var(--sp-32);
	border-top: 1px solid var(--color-surface-pale);
	color: var(--color-surface-pale);
	font-size: var(--fs-16);
	line-height: 1.4;
}

.cb-pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8) var(--sp-24);
}

.cb-pied__lien-bas {
	color: var(--color-surface-pale);
	transition: color 0.2s ease;
}

.cb-pied__copyright { margin: 0; text-align: right; }
.cb-pied__copyright p { margin: 0; }

/* LE CRÉDIT DE L'AGENCE sous la bande du logo (Olivier, 07/10/2026) : un
   second filet, plus discret, et « Designed with ♥ by butterfly pixel ». Le
   cœur, en or, bat comme sur s-law.be — double pulsation (lub-dub) puis repos,
   mêmes keyframes. */
.cb-pied__credit {
	width: 100%;
	max-width: 1321px;
	margin: 0 auto;
	/* sans filet (retiré par Olivier le 07/10) : juste un peu d'air sous la bande du logo */
	padding: 0 0 var(--sp-28);
	text-align: center;
	font-size: var(--fs-14);
	line-height: 1.4;
	color: var(--color-light);
}

.cb-pied__credit p {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.cb-pied__credit a {
	color: var(--color-light);
	text-decoration: none;
	transition: color 0.3s ease;
}

.cb-pied__credit a:hover { color: var(--color-accent); }

.cb-coeur {
	display: inline-block;
	width: 16px;
	height: 16px;
	/* rouge vif, comme sur s-law.be (Olivier, 07/10 — l'or se voyait mal sur le vert) */
	background: #C70707;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 3.6 13a5.2 5.2 0 0 1 7.4-7.4l1 1 1-1a5.2 5.2 0 0 1 7.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 3.6 13a5.2 5.2 0 0 1 7.4-7.4l1 1 1-1a5.2 5.2 0 0 1 7.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform-origin: center;
	animation: cb-coeur-bat 1.5s ease-in-out infinite;
}

@keyframes cb-coeur-bat {
	0%   { transform: scale(1); }
	10%  { transform: scale(1.28); }
	20%  { transform: scale(1); }
	30%  { transform: scale(1.22); }
	42%  { transform: scale(1); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-coeur { animation: none; }
}

/* DEUX BLÉS QUI POUSSENT DEPUIS LE FILET, aux deux bouts de la ligne de
   séparation (demandes d'Olivier, 06/10/2026) : à 50 px du bord droit le
   troisième dessin de la planche gravée (`ble-C-trio.svg`, trois épis sur une
   longue tige courbe), à 50 px du bord gauche le premier (`ble-A-bouquet-
   gauche.svg`, le bouquet). Pied posé sur la ligne, hauts de LA MOITIÉ du
   cercle du logo, dans la couleur du filet. Rendus par des masques sur les
   deux pseudo-éléments : rien à ajouter dans le gabarit.
   Ils « virevoltent au vent » en OPPOSITION : le bouquet part vers la gauche
   puis revient vers la droite, le trio fait l'inverse — pivot au pied de la
   tige, léger cisaillement pour que les épis penchent plus que la base. */
.cb-pied__bas::before,
.cb-pied__bas::after {
	content: "";
	position: absolute;
	/* le bas du calque sur le filet (bordure haute de .cb-pied__bas) */
	bottom: 100%;
	height: calc(var(--cb-pied-cercle) / 2);
	background: var(--color-surface-pale);
	-webkit-mask-position: center bottom;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-position: center bottom;
	mask-size: contain;
	mask-repeat: no-repeat;
	transform-origin: 50% 100%;
	animation: cb-vent-pied 3.6s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Le bouquet, à gauche. viewBox 1606 × 2672 : 0,601 de large pour 1 de haut. */
.cb-pied__bas::before {
	left: 50px;
	width: calc(var(--cb-pied-cercle) / 2 * 0.601);
	-webkit-mask-image: url("assets/ble-A-bouquet-gauche.svg");
	mask-image: url("assets/ble-A-bouquet-gauche.svg");
}

/* Le trio, JUSTE À CÔTÉ du bouquet (Olivier, 07/10 — il était à droite), en
   opposition de phase. viewBox 1207 × 2469 : 0,489 de large pour 1 de haut. */
.cb-pied__bas::after {
	left: calc(50px + var(--cb-pied-cercle) / 2 * 0.601 + var(--sp-16));
	width: calc(var(--cb-pied-cercle) / 2 * 0.489);
	-webkit-mask-image: url("assets/ble-C-trio.svg");
	mask-image: url("assets/ble-C-trio.svg");
	animation-direction: alternate-reverse;
}

/* LE MOULIN, à droite, à la place du trio (Olivier, 07/10), PALES QUI TOURNENT.
   Le dessin fourni (moulin.svg, gravure d'un moulin dans son paysage) est un
   tracé aplati : la tour, les pales et les buissons sont un seul contour. Il a
   été DÉCOUPÉ par géométrie (theme-enfant/outils/decouper-moulin.py, shapely) :
   quatre rectangles le long des axes des pales, mesurés sur le rendu — le
   corps garde le toit et l'axe. Deux masques :
     - moulin-corps.svg : tout sauf les pales, viewBox 2322 × 1139 (0,2,039:1) ;
     - moulin-pales.svg : les quatre pales dans un carré centré sur le moyeu,
       de côté 0,983 fois la hauteur du corps ; le moyeu est à 36,79 % / 36,41 %
       de la boîte du corps (valeurs imprimées par le script).
   Élément réel (07-pied.php) : ::before porte les pales et tourne. Hauteur =
   la moitié du cercle du logo, comme les blés ; il est plus large qu'eux (le
   paysage), posé sur le filet. */
.cb-pied__moulin {
	/* la hauteur du logo ENTIER (Olivier, 07/10 — à la moitié, la tour faisait 40 px) */
	--cb-moulin-h: var(--cb-pied-cercle);
	position: absolute;
	right: 50px;
	bottom: 100%;
	width: calc(var(--cb-moulin-h) * 2.039);
	height: var(--cb-moulin-h);
	pointer-events: none;
}

/* LE CORPS SUR ::after, PAS SUR L'ÉLÉMENT : un masque s'applique aussi aux
   descendants — posé sur le parent, il découpait les pales (::before) et on ne
   voyait pas tourner (constaté par Olivier, 07/10). */
.cb-pied__moulin::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-surface-pale);
	-webkit-mask: url("assets/moulin-corps.svg") center bottom / 100% 100% no-repeat;
	mask: url("assets/moulin-corps.svg") center bottom / 100% 100% no-repeat;
}

.cb-pied__moulin::before {
	content: "";
	position: absolute;
	width: calc(var(--cb-moulin-h) * 0.983);
	height: calc(var(--cb-moulin-h) * 0.983);
	left: calc(36.79% - var(--cb-moulin-h) * 0.983 / 2);
	top: calc(36.41% - var(--cb-moulin-h) * 0.983 / 2);
	background: var(--color-surface-pale);
	-webkit-mask: url("assets/moulin-pales.svg") center / 100% 100% no-repeat;
	mask: url("assets/moulin-pales.svg") center / 100% 100% no-repeat;
	animation: cb-moulin-tourne 16s linear infinite;
}

@keyframes cb-moulin-tourne {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-pied__moulin::before { animation: none; }
}

/* gauche d'abord, puis droite ; le trio joue la même en sens inverse */
@keyframes cb-vent-pied {
	from { transform: rotate(-6deg) skewX(3deg); }
	to   { transform: rotate(6deg) skewX(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-pied__bas::before,
	.cb-pied__bas::after { animation: none; }
}

/* Le logo : le même cercle blanc que dans l'en-tête, centré SUR le filet. */
.cb-pied__logo {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cb-pied-cercle);
	height: var(--cb-pied-cercle);
	border-radius: 50%;
	background: var(--color-surface);
	/* Un liseré de la couleur du fond détache le cercle du filet qu'il coupe. */
	box-shadow: 0 0 0 10px var(--cb-pied-fond);
	transform: translate(-50%, -50%);
}

.cb-pied__logo img {
	display: block;
	width: 74%;
	height: auto;
}

@media (max-width: 991px) {
	.cb-pied { padding: var(--sp-60) var(--sp-16) 0; }
	.cb-pied__colonnes { grid-template-columns: 1fr; row-gap: var(--sp-32); }
	.cb-pied__col { min-height: 0; padding: 0 var(--sp-16); }
	.cb-pied__col + .cb-pied__col {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--color-light) 45%, transparent);
		padding-top: var(--sp-32);
	}
	/* Sur une colonne, le logo ne peut plus se glisser entre deux textes : il
	   reste à cheval sur le filet, et la bande basse s'empile dessous. */
	.cb-pied__bas {
		flex-direction: column;
		gap: var(--sp-12);
		padding-top: calc(var(--cb-pied-cercle) / 2 + var(--sp-24));
		text-align: center;
	}
	.cb-pied__legal { justify-content: center; }
	.cb-pied__copyright { text-align: center; }
	/* LE MOULIN À DROITE, AVEC SON SOL (Olivier, 07/10 : « laisse le sol, ça
	   débordera un peu ») : réduit à 0,75 × le cercle et calé au bord, le
	   paysage dépasse à droite — c'est accepté. */
	.cb-pied__moulin {
		--cb-moulin-h: calc(var(--cb-pied-cercle) * 0.75);
		right: calc(-1 * var(--sp-24));
	}
}

/* LE LOGO EN HAUT DU MENU MOBILE, centré (Olivier, 07/10) : le panneau de
   Bricks est une liste sur fond vert ; le logo (version blanche du thème) est
   posé en pseudo-élément du conteneur, au-dessus des liens. */
.cb-entete__menu-mobile .bricks-mobile-menu-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* SUR ::after, PAS ::before : Bricks peint le FOND du panneau sur
   `.bricks-mobile-menu-wrapper:before` (frontend.min.css, calque absolu en
   z-index -1) — mon premier essai sur ::before l'a remplacé par un carré de
   150 px, le menu est resté transparent sur la page (capture d'Olivier, 07/10).
   Le logo est un MASQUE peint en blanc : le SVG du thème est noir (seule une
   classe est blanche), un `background-image` le rendait noir sur vert. */
.cb-entete__menu-mobile .bricks-mobile-menu-wrapper::after {
	content: "";
	order: -1;
	display: block;
	width: 150px;
	height: 150px;
	margin-bottom: var(--sp-32);
	background: var(--color-inverse);
	-webkit-mask: url("assets/logo-campagne.svg") center / contain no-repeat;
	mask: url("assets/logo-campagne.svg") center / contain no-repeat;
}

/* ==========================================================================
   SECTIONS DE L'ACCUEIL — Figma 03_Home_3_Croissants
   Rythme vertical ≈ 110 px ; sections « larges » sur 1800 px (cadre de 1920).
   ========================================================================== */

.cb-section {
	padding: var(--sp-100) var(--container-gutter);
}

/* Le conteneur large du Figma : 1800 px sur un cadre de 1920. */
.cb-large {
	width: 100%;
	max-width: calc(var(--container-large) - 2 * var(--container-gutter));
	margin: 0 auto;
}

/* Le surtitre : Afacad SemiBold 14, capitales, interlettrage 10 %. */
.cb-surtitre {
	margin: 0;
	font-size: var(--fs-14);
	font-weight: 600;
	line-height: 23px;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.cb-surtitre--clair { color: var(--color-inverse); }
.cb-surtitre--pale  { color: var(--color-surface-pale); }

/* --- Les engagements (« Why us », 1794×174) -------------------------------
   Titre 52 à gauche, puis trois colonnes : icône 32, titre 28, texte 20. */

.cb-engagements__grille {
	display: grid;
	grid-template-columns: 459fr 462fr 462fr 411fr;
	align-items: start;
	column-gap: var(--sp-48);
}

.cb-engagements__titre { margin: 0; }

.cb-engagement {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}

.cb-engagement::before {
	content: "";
	width: 32px;
	height: 32px;
	background: var(--color-accent);
	-webkit-mask: var(--cb-icone) center / contain no-repeat;
	mask: var(--cb-icone) center / contain no-repeat;
}

.cb-engagement--coeur {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.600-7.5 10.200-7.5 10.200z'/%3E%3C/svg%3E");
}

.cb-engagement--ble {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M12 8c-1.800-1.200-2.400-3.200 0-6 2.400 2.800 1.800 4.800 0 6z'/%3E%3Cpath d='M12 13c-3 0-4.600-1.400-5-4.500 3.100.3 4.700 1.800 5 4.500z'/%3E%3Cpath d='M12 13c3 0 4.600-1.400 5-4.500-3.100.3-4.700 1.800-5 4.500z'/%3E%3Cpath d='M12 18.500c-3 0-4.600-1.400-5-4.500 3.100.3 4.700 1.800 5 4.500z'/%3E%3Cpath d='M12 18.500c3 0 4.600-1.400 5-4.500-3.100.3-4.700 1.800-5 4.500z'/%3E%3C/svg%3E");
}

.cb-engagement--sac {
	--cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.500H6z'/%3E%3Cpath d='M8.500 11V7a3.500 3.500 0 0 1 7 0v4'/%3E%3C/svg%3E");
}

.cb-engagement__titre { margin: 0; }

.cb-engagement__texte {
	margin: 0;
	font-size: var(--fs-20);
	line-height: 1.25;
}

/* --- Le bandeau pleine largeur (« Banner section », 1920×800) -------------
   Photo de fond ; surtitre + titre blancs à 60 px du bord, 104 px du haut. */

.cb-bandeau {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: min(800px, 41.67vw);
	padding: var(--sp-100) var(--container-gutter);
	overflow: hidden;
	background: var(--color-primary);
}

.cb-bandeau .cb-bandeau__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Voile en dégradé, plus dense à gauche où se trouve le texte. */
.cb-bandeau::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 42, 29, 0.72) 0%, rgba(15, 42, 29, 0.35) 55%, rgba(15, 42, 29, 0.1) 100%);
	pointer-events: none;
}

.cb-bandeau__contenu {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-12);
	max-width: 568px;
}

.cb-bandeau .cb-bandeau__titre {
	/* 40 et non 24 : plus d'air entre le titre et le bouton (Olivier, 06/10). */
	margin: 0 0 var(--sp-40);
	color: var(--color-inverse);
}

/* --- Les trois familles (« Banners », 1800×790) ---------------------------
   Trois cartes 580×790, rayon 5, écart 30 ; cartouche blanc à 24 px du bas. */

.cb-familles__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.cb-famille {
	position: relative;
	display: block;
	aspect-ratio: 580 / 790;
	overflow: hidden;
	border-radius: 5px;
	background: var(--color-surface-or);
	color: var(--color-text);
}

.cb-famille .cb-famille__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s var(--courbe-hero);
}

.cb-famille:hover .cb-famille__img { transform: scale(1.04); }

.cb-famille__cartouche {
	position: absolute;
	right: var(--sp-24);
	bottom: var(--sp-24);
	left: var(--sp-24);
	padding: var(--sp-16) var(--sp-24);
	border-radius: 5px;
	background: var(--color-surface);
}

.cb-famille .cb-famille__titre { margin: 0; }

.cb-famille__sous {
	margin: 0;
	font-size: var(--fs-20);
	line-height: 1.15;
	color: var(--color-secondary);
}

/* --- Le fournil (« A date at our pastry », 1920×836) ----------------------
   Moitié gauche #0F2A1D, texte centré ; moitié droite : le média. */

.cb-fournil {
	display: grid;
	/* Moitié-moitié (un 40/60 a été essayé le 06/10/2026 pour montrer la photo
	   16:9 entière, puis Olivier a demandé le retour au 50/50 : la photo est
	   recadrée en largeur par object-fit, c'est accepté). */
	grid-template-columns: 1fr 1fr;
	/* Une section Bricks est un flex en colonne aux enfants CENTRÉS : passée en
	   grille, elle garde cet alignement et la photo ne faisait que 320 px de
	   haut au milieu de sa moitié. On étire explicitement. */
	align-items: stretch;
	padding: 0;
}

.cb-fournil__texte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-24);
	min-height: min(836px, 43.5vw);
	padding: var(--sp-80) var(--container-gutter);
	background: var(--color-text);
	text-align: center;
}

.cb-fournil .cb-fournil__titre {
	margin: 0;
	max-width: 626px;
	color: var(--color-surface-pale);
}

.cb-fournil__chapo {
	margin: 0;
	max-width: 598px;
	font-size: var(--fs-20);
	line-height: 1.25;
	color: var(--color-light);
}

.cb-fournil .cb-bouton { margin-top: var(--sp-24); }

.cb-fournil__media { position: relative; min-height: 320px; }

.cb-fournil__media .cb-fournil__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

@media (max-width: 1199px) {
	/* Le titre passe au-dessus des trois colonnes. */
	.cb-engagements__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-40); column-gap: var(--sp-32); }
	.cb-engagements__titre { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
	.cb-section { padding: var(--sp-60) var(--sp-16); }
	.cb-bandeau { min-height: 520px; padding: var(--sp-60) var(--sp-16); }
	.cb-familles__grille { gap: var(--sp-16); }
	.cb-famille__cartouche { right: var(--sp-12); bottom: var(--sp-12); left: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
	.cb-fournil { grid-template-columns: 1fr; }
	.cb-fournil__texte { min-height: 0; padding: var(--sp-60) var(--sp-16); }
	.cb-fournil__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
	/* bandeau de page : le `-200px` du bandeau d'À propos et la hauteur 32 vw
	   sont faits pour 1920 — sur 390 px la photo était décalée et le titre
	   tombait sur un grand aplat vert (Olivier, 07/10). Photo centrée, bandeau
	   de 420 px, titre juste sous le logo. */
	.cb-engagements__grille { grid-template-columns: 1fr; row-gap: var(--sp-32); }
	.cb-familles__grille { grid-template-columns: 1fr; }
	/* Une carte par ligne : le portrait 580×790 ferait 470 px de haut chacune,
	   trois fois. On les ramène à un format plus trapu. */
	.cb-famille { aspect-ratio: 4 / 3.4; }
}

/* ==========================================================================
   BANDEAU DE PAGE INTERNE — Figma « Header » des pages internes (1920×620)
   Photo pleine largeur, titre blanc centré ; l'en-tête flotte par-dessus.
   ========================================================================== */

.cb-bandeau-page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* hauteur du Figma — l'essai à 820 px pour garder tête ET mains sur À propos
	   était « trop haut » (Olivier, 07/10) : on garde la tête, les mains sortent */
	min-height: min(620px, 32.3vw);
	padding: 220px var(--container-gutter) var(--sp-80);
	overflow: hidden;
	background: var(--color-primary);
	text-align: center;
}

.cb-bandeau-page .cb-bandeau-page__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* calée tout en haut : la photo 1920 × 942 est recadrée depuis le haut de
	   la source (la tête de Michel, juste sous le disque du logo) ; ce qui
	   dépasse est pris en bas (la pelle) */
	/* remontée de 200 px (Olivier, 07/10) : on retrouve les mains, le haut du crâne
	   passe sous la barre du menu */
	object-position: 50% -200px;
}

.cb-bandeau-page::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 42, 29, var(--cb-hero-voile, 0.4));
	pointer-events: none;
}

.cb-bandeau-page__contenu {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-12);
	max-width: 900px;
}

.cb-bandeau-page .cb-bandeau-page__titre {
	margin: 0;
	color: var(--color-inverse);
}

.cb-bandeau-page__chapo {
	margin: 0;
	max-width: 640px;
	font-size: var(--fs-20);
	line-height: 1.3;
	color: var(--color-surface-pale);
}

/* ==========================================================================
   EN-TÊTE DE SECTION — Figma « Feature product / Heading » : titre 52 à
   gauche, chapô 20 (#375534, 445 px) à droite, alignés sur la ligne de base.
   ========================================================================== */

.cb-entete-section {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-48);
	margin-bottom: var(--sp-32);
}

.cb-entete-section .cb-entete-section__titre { margin: 0; }

.cb-entete-section__chapo {
	margin: 0;
	/* 445 au Figma pour un texte anglais plus court ; le nôtre tenait sur trois
	   lignes. Élargi pour deux lignes (demande d'Olivier, 06/10/2026). */
	max-width: 640px;
	font-size: var(--fs-20);
	line-height: 1.2;
	color: var(--color-secondary);
}

/* ==========================================================================
   LA VITRINE — [cb_vitrine] (mu-plugin cb-vitrine-bakeronline.php)
   Figma « Big product 1/3 layout » : vignette 428×440, puis famille (14,
   capitales, interlettrage 10 %) et nom ; cartes espacées de 30.
   ========================================================================== */

.cb-vitrine__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-40) 30px;
}

/* Tirage au sort : toutes les cartes sont dans la page, seules les N
   premières s'affichent (N = --cb-limite, posé par le shortcode). */
.cb-vitrine__grille[data-cb-alea] .cb-produit:nth-child(n + 9) { display: none; }

.cb-vitrine__groupe {
	margin: var(--sp-60) 0 var(--sp-24);
	padding-bottom: var(--sp-12);
	border-bottom: 1px solid var(--color-border);
}

.cb-vitrine__groupe:first-child { margin-top: 0; }

.cb-vitrine__categorie {
	margin: var(--sp-40) 0 var(--sp-20);
	font-family: var(--font-texte);
	font-size: var(--fs-14);
	font-weight: 600;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.cb-vitrine__groupe + .cb-vitrine__categorie { margin-top: 0; }

.cb-produit {
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
	color: var(--color-text);
}

.cb-produit__visuel {
	position: relative;
	display: block;
	aspect-ratio: 428 / 440;
	overflow: hidden;
	border-radius: 5px;
	background: var(--color-surface-or);
}

/* Un léger assombrissement du bas de la photo au survol — ton chaud, pas le
   vert : les photos de la boutique sont sur fond or, un voile vert les
   salissait (première version, écartée par Olivier le 06/10). Juste assez pour
   que le bouton se détache sur une photo claire. */
.cb-produit__visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(60, 35, 15, 0.28), rgba(60, 35, 15, 0) 55%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.cb-produit:hover .cb-produit__visuel::after,
.cb-produit:focus-visible .cb-produit__visuel::after { opacity: 1; }

.cb-produit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--courbe-hero);
}

.cb-produit:hover .cb-produit__img { transform: scale(1.05); }

.cb-produit__info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.cb-produit__famille {
	font-size: var(--fs-14);
	line-height: 20px;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.cb-produit__nom {
	font-family: var(--font-titre);
	font-size: var(--fs-28);
	line-height: var(--lh-titre);
	letter-spacing: var(--ls-titre);
}

/* LE BOUTON « COMMANDER » SUR LA PHOTO (demande d'Olivier, 06/10/2026 — à la
   place du lien orange sous le nom). Même dessin que les boutons du site
   (Afacad, capitales, angles droits), dans LA PÊCHE DE LA BARRE DE MENU — la
   même que le survol du bouton du hero, pour que tout le site réponde de la
   même couleur ; il monte de 8 px en apparaissant. La carte entière reste le lien : le bouton
   n'est qu'un repère, pas une seconde cible. */
.cb-produit__action {
	position: absolute;
	left: 50%;
	bottom: var(--sp-20);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 24px;
	background: var(--color-surface-or);
	color: var(--color-text);
	font-size: var(--fs-14);
	font-weight: 600;
	line-height: 22px;
	letter-spacing: var(--ls-bouton);
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(40, 24, 10, 0.18);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease;
}

.cb-produit:hover .cb-produit__action,
.cb-produit:focus-visible .cb-produit__action { opacity: 1; transform: translate(-50%, 0); }

/* Le bouton a son propre survol (demande d'Olivier, 06/10) : la carte entière
   est le lien, mais quand la souris arrive SUR le bouton il passe au vert
   sombre, texte blanc — le dessin des boutons pleins du site. */
.cb-produit__action:hover {
	background: var(--color-primary);
	color: var(--color-inverse);
}

.cb-vitrine__cta {
	/* 80 et non 48 : le bouton doit se détacher de la seconde rangée de cartes
	   (demande d'Olivier, 06/10). */
	margin: var(--sp-80) 0 0;
	text-align: center;
}

/* Son survol répond comme le bouton du hero : l'or de la barre de menu,
   texte vert sombre — et non l'orange des autres boutons. */
.cb-vitrine__cta .cb-bouton:hover,
.cb-vitrine__cta .cb-bouton:focus-visible {
	background: var(--color-surface-or);
	border-color: var(--color-surface-or);
	color: var(--color-text);
}

.cb-vitrine__vide { text-align: center; }

@media (max-width: 1199px) {
	.cb-vitrine__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.cb-entete-section { flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
	.cb-vitrine__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-16); }
	/* Pas de survol au doigt : le bouton est toujours là, et le voile avec. */
	.cb-produit__action { opacity: 1; transform: translate(-50%, 0); min-height: 40px; padding: 9px 18px; bottom: var(--sp-12); }
	.cb-produit__visuel::after { opacity: 1; }
	.cb-bandeau-page { min-height: 420px; padding: 170px var(--sp-16) var(--sp-48); }
}

/* ==========================================================================
   PAGE À PROPOS — Figma 07_About_Us (+ Timeline de 08_Our_Story), 06/10/2026.
   Construite par bricks/09-a-propos.php. Textes du client (2020-2021), à
   faire relire.
   ========================================================================== */

/* --- Notre mission (« Our mission », 1800×541) : citation Playfair large,
   centrée, sur 1 100 px. ------------------------------------------------- */
.cb-mission__contenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-24);
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.cb-mission .cb-mission__citation {
	margin: 0;
	font-size: var(--fs-36);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ls-titre);
}

.cb-mission__texte {
	margin: 0;
	max-width: 760px;
	font-size: var(--fs-20);
	line-height: 1.4;
	color: var(--color-secondary);
}

/* --- Pourquoi « Campagne » ? : photo à gauche, texte à droite. ---------- */
.cb-nom { background: var(--color-surface-pale); }

.cb-nom__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-80);
	max-width: calc(var(--container-max) - 2 * var(--container-gutter));
	margin: 0 auto;
}

.cb-nom__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 5px; }

.cb-nom__media .cb-nom__img { width: 100%; height: 100%; object-fit: cover; }

.cb-nom__texte { display: flex; flex-direction: column; gap: var(--sp-16); }

.cb-nom .cb-nom__titre { margin: 0 0 var(--sp-8); }

.cb-nom__p { margin: 0; font-size: var(--fs-18); line-height: 1.5; }

/* --- La frise (« Timeline history ») : cinq étapes en ligne, reliées par un
   filet ; un point sur le filet au-dessus de chaque année. ---------------- */
.cb-frise__liste {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-32);
	margin: var(--sp-48) 0 0;
	padding: var(--sp-32) 0 0;
	list-style: none;
}

.cb-frise__liste::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-light);
}

.cb-frise__etape { position: relative; margin: 0 !important; }

/* LE POINT EST DEVENU UNE PASTILLE (Olivier, 07/10) : un disque blanc cerclé
   d'or de 48 px, centré sur le filet là où était le point de 13 px, et dedans
   un dessin de la planche Adobe Stock 1993805723 — un par étape, dans l'ordre
   de la planche : croissant, pain au chocolat, éclair, macarons, tartelette
   (assets/frise-N-*.svg, extraits par script). Le dessin est un masque or
   (::after) ; la pastille (::before) porte l'onde du rayonnement — un masque
   rognerait son ombre, d'où deux pseudo-éléments. */
/* Sans cercle, dessins à 60 px (Olivier, 07/10) : ::before n'est plus qu'un disque
   blanc invisible sur le fond blanc — il masque le filet derrière le dessin et
   porte toujours l'onde du rayonnement. */
.cb-frise__etape::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--sp-32) - 6px - 27.5px);
	left: -27.5px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--color-surface);
}

.cb-frise__etape::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--sp-32) - 6px - 23.5px);
	left: -23.5px;
	width: 60px;
	height: 60px;
	background: var(--color-accent);
	-webkit-mask: var(--cb-picto) center / contain no-repeat;
	mask: var(--cb-picto) center / contain no-repeat;
}

.cb-frise__etape:nth-child(1) { --cb-picto: url("assets/frise-1-croissant.svg"); }
.cb-frise__etape:nth-child(2) { --cb-picto: url("assets/frise-2-pain-chocolat.svg"); }
.cb-frise__etape:nth-child(3) { --cb-picto: url("assets/frise-3-eclair.svg"); }
.cb-frise__etape:nth-child(4) { --cb-picto: url("assets/frise-4-macarons.svg"); }
.cb-frise__etape:nth-child(5) { --cb-picto: url("assets/frise-5-tartelette.svg"); }

.cb-frise__annee {
	margin: 0 0 var(--sp-8);
	font-family: var(--font-titre);
	font-size: var(--fs-36);
	line-height: 1;
	letter-spacing: var(--ls-titre);
	color: var(--color-secondary);
}

.cb-frise .cb-frise__titre { margin: 0 0 var(--sp-8); font-size: var(--fs-24); }

.cb-frise__texte { margin: 0; font-size: var(--fs-16); line-height: 1.45; }

/* LA FRISE SE DÉROULE (Olivier, 07/10) : une fois la section révélée
   (est-visible, posé par hero.js), les étapes apparaissent UNE À UNE, de
   gauche à droite, et le point d'or de chacune RAYONNE à son arrivée — une onde
   (box-shadow qui s'élargit et s'efface) par-dessus l'anneau blanc qui le
   détache du filet. Caché seulement sous html.cb-js (sans script, tout est là).
   Le premier pas attend la fin de la glissade de la section (0,9 s). */
html.cb-js .cb-frise .cb-frise__etape {
	opacity: 0;
	transform: translateY(24px);
}

html.cb-js .cb-frise .cb-frise__etape::before,
html.cb-js .cb-frise .cb-frise__etape::after { transform: scale(0); }

html.cb-js .cb-frise.est-visible .cb-frise__etape {
	animation: cb-frise-entre 0.7s ease forwards;
	animation-delay: var(--cb-pas);
}

html.cb-js .cb-frise.est-visible .cb-frise__etape::before {
	animation: cb-frise-point 1.6s ease-out forwards;
	animation-delay: var(--cb-pas);
}

/* le dessin surgit juste après la pastille, sans onde */
html.cb-js .cb-frise.est-visible .cb-frise__etape::after {
	animation: cb-frise-picto 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	animation-delay: calc(var(--cb-pas) + 0.2s);
}

@keyframes cb-frise-picto {
	to { transform: scale(1); }
}

.cb-frise__etape:nth-child(1) { --cb-pas: 0.6s; }
.cb-frise__etape:nth-child(2) { --cb-pas: 1.05s; }
.cb-frise__etape:nth-child(3) { --cb-pas: 1.5s; }
.cb-frise__etape:nth-child(4) { --cb-pas: 1.95s; }
.cb-frise__etape:nth-child(5) { --cb-pas: 2.4s; }

@keyframes cb-frise-entre {
	to { opacity: 1; transform: none; }
}

@keyframes cb-frise-point {
	0%   { transform: scale(0);    box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.9); }
	20%  { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(201, 162, 75, 0.8); }
	35%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(201, 162, 75, 0.55); }
	100% { transform: scale(1);    box-shadow: 0 0 0 34px rgba(201, 162, 75, 0); }
}

@media (prefers-reduced-motion: reduce) {
	html.cb-js .cb-frise .cb-frise__etape { opacity: 1; transform: none; animation: none; }
	html.cb-js .cb-frise .cb-frise__etape::before,
	html.cb-js .cb-frise .cb-frise__etape::after { transform: none; animation: none; }
}

/* --- Campagne en cinq mots : fond vert, en-tête centré ; les cartes sont
   devenues une orbite (voir « L'ORBITE DES CINQ VALEURS » plus bas). ------- */
.cb-valeurs { background: var(--color-primary); color: var(--color-light); }

.cb-valeurs__entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-8);
	margin-bottom: var(--sp-48);
	text-align: center;
}

.cb-valeurs .cb-surtitre { color: var(--color-light); }

.cb-valeurs .cb-valeurs__titre { margin: 0; color: var(--color-surface-pale); }

/* --- L'appel (« Contact ») : bandeau vert, titre, texte, deux boutons. --- */
/* (fond or essayé le 07/10, remis en vert par Olivier) */
/* #0F2A1D = --color-text, le vert le plus sombre de la palette (Olivier, 07/10) */
.cb-appel { background: var(--color-text); color: var(--color-surface-pale); }

.cb-appel__contenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-16);
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.cb-appel .cb-appel__titre { margin: 0; color: var(--color-inverse); }

.cb-appel__texte { margin: 0; font-size: var(--fs-20); line-height: 1.4; }

.cb-appel__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-8); }

/* Bouton au contour, pour les fonds sombres. */
.cb-bouton--contour.bricks-button,
.cb-bouton--contour {
	background: transparent;
	border-color: var(--color-surface-pale);
	color: var(--color-surface-pale);
}

.cb-bouton--contour:hover {
	background: var(--color-surface-or);
	border-color: var(--color-surface-or);
	color: var(--color-text);
}

/* ==========================================================================
   RETOUR EN HAUT (demande d'Olivier, 06/10/2026) — bouton rond en bas à
   droite, imprimé par functions.php, montré par js/hero.js dès 600 px de
   défilement. Couleur de la barre de menu, flèche vert sombre.
   ========================================================================== */
.cb-haut {
	position: fixed;
	right: var(--sp-24);
	bottom: var(--sp-24);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-surface-or);
	color: var(--color-text);
	box-shadow: 0 6px 18px rgba(15, 42, 29, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.3s ease;
}

.cb-haut.est-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.cb-haut:hover { background: var(--color-primary); color: var(--color-inverse); }

.cb-haut svg { width: 20px; height: 20px; display: block; }

@media (max-width: 1199px) {
	.cb-frise__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-48); }
	.cb-frise__liste::before,
	.cb-frise__etape::before,
	.cb-frise__etape::after { display: none; }
	.cb-frise__etape { padding-top: var(--sp-16); border-top: 1px solid var(--color-light); }
}

@media (max-width: 991px) {
	.cb-nom__grille { grid-template-columns: 1fr; gap: var(--sp-32); }
	.cb-frise__liste { grid-template-columns: 1fr 1fr; }
	.cb-haut { right: var(--sp-16); bottom: var(--sp-16); width: 44px; height: 44px; }
}

@media (max-width: 767px) {
	.cb-frise__liste { grid-template-columns: 1fr; }
	.cb-mission .cb-mission__citation { font-size: var(--fs-28); }
	/* le dessin de chaque étape revient, à droite de la date (Olivier, 07/10) ;
	   plus de pastille ni d'onde, juste le masque or de 48 px */
	.cb-frise__etape { padding-right: 72px; }
	.cb-frise__etape::after { display: block; top: var(--sp-16); left: auto; right: 0; width: 48px; height: 48px; transform: none !important; animation: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   TÉMOIGNAGES QUI DÉFILENT — [cb_temoignages] (mu-plugin cb-temoignages.php),
   accueil, entre la vitrine et les engagements (demande d'Olivier, 06/10).
   Deux rangées, sens opposés ; carte blanche à bordure, une sur cinq en or.
   Mécanique : chaque rangée porte DEUX pistes identiques côte à côte ; la
   rangée glisse de -50 % (= une piste entière) puis repart : boucle sans
   à-coup. Durée proportionnelle au nombre de cartes (10 cartes → 60 s).
   ========================================================================== */
/* Photo pleine largeur en fond, voile vert sombre, titres en clair (Olivier,
   06/10). Les cartes blanches et or restent telles quelles. */
.cb-temoignages-section {
	position: relative;
	overflow: hidden;
	background: var(--color-primary);
}

.cb-temoignages-section .cb-temoignages-section__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.cb-temoignages-section::after {
	content: "";
	position: absolute;
	inset: 0;
	/* voile OR à 0,42 (Olivier, 07/10 : photo encore un peu plus présente, et la
	   couleur du voile en or plutôt qu'en vert) — #C9A24B = --color-accent */
	background: rgba(201, 162, 75, 0.42);
	pointer-events: none;
}

/* à droite du titre, aligné sur la limite de contenu : le bouton vers la fiche
   Google (sans chapô depuis le 07/10). Son survol : or, texte sombre. */
.cb-temoignages-section__droite { display: flex; justify-content: flex-end; }

.cb-temoignages-section .cb-temoignages-section__bouton:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.cb-temoignages-section__entete,
.cb-temoignages-section .cb-temoignages { position: relative; z-index: 2; }

.cb-temoignages-section .cb-entete-section__titre { color: var(--color-inverse); }
.cb-temoignages-section .cb-entete-section__chapo { color: var(--color-surface-pale); }

.cb-temoignages {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	/* déborde le conteneur : les cartes sortent par les bords de l'écran */
	margin: var(--sp-32) calc(-1 * var(--container-gutter)) 0;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cb-temoignages__rangee {
	display: flex;
	width: max-content;
	animation: cb-defile 60s linear infinite;
}

.cb-temoignages__rangee--droite { animation-direction: reverse; }

.cb-temoignages:hover .cb-temoignages__rangee { animation-play-state: paused; }

.cb-temoignages__piste { display: flex; gap: var(--sp-24); padding-right: var(--sp-24); }

@keyframes cb-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.cb-temoignage {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-20);
	width: 400px;
	margin: 0;
	padding: var(--sp-28) var(--sp-32);
	border: 1px solid var(--color-light);
	border-radius: 5px;
	background: var(--color-surface);
}

.cb-temoignage--accent {
	border-color: var(--color-surface-or);
	background: var(--color-surface-or);
}

/* la note en étoiles, en or ; sur la carte or, en vert sombre */
.cb-temoignage__etoiles { display: flex; gap: 3px; }

.cb-temoignage__etoiles svg { width: 18px; height: 18px; fill: var(--color-accent); }

.cb-temoignage__etoiles svg.est-vide { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }

.cb-temoignage--accent .cb-temoignage__etoiles svg { fill: var(--color-secondary); }

.cb-temoignage--accent .cb-temoignage__etoiles svg.est-vide { fill: none; stroke: var(--color-secondary); }

/* le thème pose un filet à gauche des blockquote : pas ici */
.cb-temoignage__texte { position: relative; margin: 0; padding: 0; border: 0; background: none; }

/* QUATRE LIGNES AU PLUS (Olivier, 07/10) : le texte est coupé par line-clamp ;
   hero.js mesure le débordement et pose est-tronque sur la carte. */
.cb-temoignage__texte p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-titre);
	font-size: var(--fs-20);
	line-height: 1.35;
	letter-spacing: var(--ls-titre);
}

/* « Lire la suite » : quand le texte déborde, il est coupé à TROIS lignes et
   le bouton occupe la quatrième, seul — la première version le posait par-dessus
   la fin de la quatrième ligne, qui restait lisible dessous (vu par Olivier,
   07/10). Caché tant que le texte tient en quatre lignes. */
.cb-temoignage.est-tronque .cb-temoignage__texte p { -webkit-line-clamp: 3; }

.cb-temoignage__suite {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-texte);
	font-size: var(--fs-14);
	font-weight: 600;
	line-height: calc(var(--fs-20) * 1.35);
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-secondary);
	cursor: pointer;
}

.cb-temoignage.est-tronque .cb-temoignage__suite { display: block; }

.cb-temoignage__suite:hover { color: var(--color-accent); }

.cb-temoignage--accent .cb-temoignage__suite:hover { color: var(--color-primary); }

/* La fenêtre de l'avis entier (élément <dialog> créé par hero.js). */
.cb-dialogue {
	width: min(640px, calc(100vw - 2 * var(--sp-24)));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.cb-dialogue::backdrop { background: rgba(15, 42, 29, 0.6); }

.cb-dialogue__corps { position: relative; padding: var(--sp-40) var(--sp-40) var(--sp-32); }

.cb-dialogue__contenu { display: flex; flex-direction: column; gap: var(--sp-20); }

.cb-dialogue__texte { margin: 0; padding: 0; border: 0; background: none; }

.cb-dialogue__texte p {
	margin: 0;
	font-family: var(--font-titre);
	font-size: var(--fs-24);
	line-height: 1.35;
	letter-spacing: var(--ls-titre);
}

.cb-dialogue__texte p::before { content: "« "; color: var(--color-accent); }

.cb-dialogue__texte p::after { content: " »"; color: var(--color-accent); }

.cb-dialogue .cb-temoignage__etoiles svg { width: 20px; height: 20px; fill: var(--color-accent); }

/* la croix : un trait dessiné, centré dans le disque — le caractère × se
   posait trop haut dans son cercle (vu par Olivier, 07/10) */
.cb-dialogue__fermer {
	position: absolute;
	top: var(--sp-12);
	right: var(--sp-12);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-surface-pale);
	color: var(--color-primary);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.cb-dialogue__fermer::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cb-dialogue__fermer:hover { background: var(--color-accent); color: var(--color-text); }

/* le guillemet ouvrant, en or — en vert sombre sur la carte or */
.cb-temoignage__texte p::before {
	content: "« ";
	color: var(--color-accent);
}

.cb-temoignage--accent .cb-temoignage__texte p::before { color: var(--color-secondary); }

.cb-temoignage__auteur {
	font-size: var(--fs-14);
	font-weight: 600;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.cb-temoignage__lieu { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
	.cb-temoignages { -webkit-mask: none; mask: none; margin-left: 0; margin-right: 0; }
	.cb-temoignages__rangee { width: auto; animation: none; flex-wrap: wrap; }
	.cb-temoignages__piste { flex-wrap: wrap; }
	.cb-temoignages__piste[aria-hidden] { display: none; }
}

/* ==========================================================================
   L'ORBITE DES CINQ VALEURS — page À propos (demande d'Olivier, 06/10) : la
   photo ronde du pain au centre, cinq disques reliés au centre par un filet,
   portés par un anneau qui tourne en 90 s ; chaque disque tourne en sens
   inverse à la même vitesse pour rester droit. Tout est en unités de la
   taille de l'orbite (--o), fluide jusqu'à 1 100 px.
   ========================================================================== */
.cb-orbite {
	/* En vw et non en % : une propriété personnalisée résout ses pourcentages
	   LÀ OÙ ELLE EST LUE — dans le disque, enfant d'un bras de 1 px de large,
	   « 100 % » valait 1 px et les disques sortaient à 0 (vu au premier essai). */
	--o: min(1100px, 100vw - 2 * var(--container-gutter));
	/* 0,26 → 0,34 puis 0,30 pour l'essai des épis (Olivier, 07/10) */
	--pain: calc(var(--o) * 0.30);
	--disque: calc(var(--o) * 0.21);
	/* 0,395 → 0,35 : miches rapprochées du pain pour laisser ressortir les épis (Olivier, 07/10) */
	--rayon: calc(var(--o) * 0.35);
	position: relative;
	width: var(--o);
	aspect-ratio: 1;
	/* 150 px d'air sous le titre : les épis dépassent les miches de 130 px et
	   montaient dans « Campagne en cinq mots » (Olivier, 07/10) */
	margin: 150px auto 0;
}

.cb-orbite__centre {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--pain);
	height: var(--pain);
	transform: translate(-50%, -50%);
	z-index: 2;
}

/* le pain est un PNG détouré (Olivier, 07/10) : plus de disque ni d'anneau, la
   miche seule, avec une ombre portée douce pour qu'elle se pose sur le vert */
.cb-orbite__centre .cb-orbite__pain {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* la miche tourne lentement À L'ENVERS de l'orbite, comme un pain qu'on
	   retourne sur la sole (Olivier, 07/10) ; l'ombre est sur le conteneur, pas
	   sur l'image, sinon elle tournerait avec le pain */
	animation: cb-pain-tourne 180s linear infinite reverse;
}

.cb-orbite__centre { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }

@keyframes cb-pain-tourne {
	to { transform: rotate(360deg); }
}

/* le cercle de l'orbite, en filet */
.cb-orbite::before {
	content: "";
	position: absolute;
	inset: calc(50% - var(--rayon));
	border: 1px solid rgba(174, 195, 176, 0.35);
	border-radius: 50%;
}

.cb-orbite__anneau {
	position: absolute;
	inset: 0;
	animation: cb-orbite-tourne 90s linear infinite;
}

.cb-orbite:hover .cb-orbite__anneau,
.cb-orbite:hover .cb-orbite__disque { animation-play-state: paused; }

/* un bras = un filet du centre vers le disque, qui porte le disque à son bout.
   Le bras est une boîte de la hauteur du rayon, pivotée autour du centre. */
.cb-orbite__bras {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: var(--rayon);
	transform-origin: 50% 0;
	transform: rotate(var(--a));
}

/* LE BRAS EST UN ÉPI (Olivier, 07/10) : plus de filet, un épi de blé gravé
   (ble-D-epi-seul.svg, le quatrième dessin de la planche) tendu entre la miche
   et la petite miche de la valeur — tige côté pain, grains côté valeur. Le
   dessin a les grains en haut : retourné de 180°. En or, comme le reste. */
.cb-orbite__bras::before {
	content: "";
	position: absolute;
	/* l'épi est plus long que le bras : sa tige court du pain à la petite miche,
	   PASSE DERRIÈRE elle (la pastille est peinte par-dessus), et ses grains
	   ressortent de 90 px au-delà, vers l'extérieur (Olivier, 07/10) */
	top: calc(var(--pain) / 2 + 4px);
	left: 50%;
	width: 130px;
	height: calc(var(--rayon) - var(--pain) / 2 + var(--disque) / 2 + 130px);
	background: var(--color-accent);
	-webkit-mask: url("assets/ble-D-epi-seul.svg") center / contain no-repeat;
	mask: url("assets/ble-D-epi-seul.svg") center / contain no-repeat;
	transform: translateX(-50%) rotate(180deg);
	opacity: 0.9;
}

/* (essai du 07/10 d'un épi stylisé sur deux bras : retiré, Olivier a gardé la
   gravure — « les trois branches sont très bien ») */

.cb-orbite__bras--0 { --a: 180deg; }
.cb-orbite__bras--1 { --a: 252deg; }
.cb-orbite__bras--2 { --a: 324deg; }
.cb-orbite__bras--3 { --a: 36deg; }
.cb-orbite__bras--4 { --a: 108deg; }

.cb-orbite__disque {
	position: absolute;
	bottom: calc(-1 * var(--disque) / 2);
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--disque);
	height: var(--disque);
	/* Bricks borne ses éléments à max-width: 100 % — ici 100 % du bras de
	   1 px : le disque sortait à 1 px malgré sa largeur. On lève la borne. */
	max-width: none;
	/* en px dérivés, pas en % : un % se lirait sur le bras de 1 px */
	padding: calc(var(--disque) * 0.08);
	border-radius: 50%;
	/* une petite miche (Olivier, 07/10) : mie crème au centre, croûte dorée au
	   bord, et une grigne (::before) sur le dessus */
	background: radial-gradient(circle at 42% 38%, #FBF3DE 0%, var(--color-surface-or) 55%, #D8BF86 100%);
	box-shadow: inset 0 -6px 14px rgba(150, 105, 40, 0.18), 0 10px 30px rgba(0, 0, 0, 0.25);
	color: var(--color-text);
	text-align: center;
	/* contre-rotation : annule celle du bras (--a) puis celle de l'anneau */
	transform: translateX(-50%) rotate(calc(-1 * var(--a)));
	animation: cb-orbite-contre 90s linear infinite;
}

/* la grigne : un trait courbe, couleur croûte, en haut de la miche */
.cb-orbite__disque::before {
	content: "";
	position: absolute;
	top: 11%;
	left: 28%;
	width: 44%;
	height: 14%;
	border-top: 2px solid rgba(150, 105, 40, 0.45);
	border-radius: 50%;
	pointer-events: none;
}

.cb-orbite .cb-orbite__mot {
	margin: 0;
	font-size: clamp(16px, calc(var(--o) * 0.022), 24px);
	line-height: 1.1;
	color: var(--color-text);
}

.cb-orbite__texte {
	margin: 0;
	font-size: clamp(12px, calc(var(--o) * 0.014), 15px);
	line-height: 1.3;
	color: var(--color-secondary);
}

@keyframes cb-orbite-tourne {
	to { transform: rotate(360deg); }
}

@keyframes cb-orbite-contre {
	from { transform: translateX(-50%) rotate(calc(-1 * var(--a))); }
	to   { transform: translateX(-50%) rotate(calc(-1 * var(--a) - 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-orbite__anneau, .cb-orbite__disque, .cb-orbite__pain { animation: none; }
}

/* Sous 992 px, plus de place pour une orbite : le pain au-dessus, les cinq
   disques en liste de cartes rondes-carrées. */
@media (max-width: 991px) {
	.cb-orbite { width: 100%; aspect-ratio: auto; margin-top: 0; }
	.cb-orbite::before { display: none; }
	.cb-orbite__centre { position: relative; top: auto; left: auto; width: 200px; height: 200px; margin: 0 auto var(--sp-32); transform: none; }
	.cb-orbite__anneau { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); animation: none; }
	.cb-orbite__bras { position: static; width: auto; height: auto; transform: none; background: none; }
	.cb-orbite__bras::before { display: none; }
	.cb-orbite__disque { position: static; width: auto; height: auto; padding: var(--sp-24); border-radius: 12px; transform: none; animation: none; }
	.cb-orbite .cb-orbite__mot { font-size: var(--fs-24); }
	.cb-orbite__texte { font-size: var(--fs-16); }
}

@media (max-width: 575px) {
	.cb-orbite__anneau { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DES MATIÈRES CHOISIES, v2 — pleine largeur sur photo (demande d'Olivier,
   06/10) : pains et épis en fond, voile vert, texte centré.
   ========================================================================== */
.cb-matieres {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(760px, 39.6vw);
	padding: var(--sp-120) var(--container-gutter);
	overflow: hidden;
	background: var(--color-primary);
	color: var(--color-light);
	text-align: center;
}

.cb-matieres .cb-matieres__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.cb-matieres::after {
	content: "";
	position: absolute;
	inset: 0;
	/* le même voile or que les témoignages de l'accueil (Olivier, 07/10) */
	background: rgba(201, 162, 75, 0.42);
	pointer-events: none;
}

.cb-matieres__contenu {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-20);
	max-width: 820px;
}

.cb-matieres .cb-matieres__titre { margin: 0; color: var(--color-inverse); }

.cb-matieres__p { margin: 0; font-size: var(--fs-18); line-height: 1.5; color: var(--color-surface-pale); }

.cb-matieres .cb-bouton { margin-top: var(--sp-8); }

/* ==========================================================================
   ILS NOUS ACCOMPAGNENT, v2 — marque qui défile de droite à gauche, logos à
   90 px (demande d'Olivier, 06/10). Même mécanique que les témoignages.
   ========================================================================== */
/* LA FENÊTRE : largeur du contenu (1400), centrée, 64 px sous le titre ; elle
   rogne la bande et fond ses deux bords. Le titre, lui, est hors de la fenêtre
   — la première version masquait .cb-large entier et rognait « Ils » et
   « que » (vu par Olivier, 07/10). */
.cb-partenaires__fenetre {
	max-width: var(--container-max);
	/* 100 px sous le titre — demandé trois fois par Olivier le 07/10, 60 ne suffisait pas */
	margin: var(--sp-100) auto 0;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* LA BANDE : deux pistes identiques côte à côte ; elle glisse vers la gauche
   d'exactement UNE piste (−50 % de sa largeur) puis repart de zéro — comme la
   seconde piste est la copie de la première, le raccord est invisible, à
   condition que chaque piste ait une largeur stable : les logos ont une
   hauteur fixe et une largeur dérivée de leurs attributs width/height, connue
   AVANT le chargement (sinon la bande vaut 0 et les deux pistes se superposent
   — le « chevauchement » vu par Olivier). `flex: none` partout : rien ne
   rétrécit. 30 s par piste. */
.cb-partenaires__bande {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	/* BRICKS PLAFONNE SES DIVS À max-width: 100 % : la bande et chaque piste
	   étaient forcées à la largeur de la fenêtre (1 400) alors que huit logos en
	   occupent ~1 680 — la fin de la piste 1 passait sous le début de la piste 2
	   (Keser sur Foricher, vu par Olivier le 07/10). Plafond levé ici et sur les
	   pistes. */
	max-width: none;
	animation: cb-defile 30s linear infinite;
	will-change: transform;
}

.cb-partenaires__bande:hover { animation-play-state: paused; }

.cb-partenaires__piste {
	display: flex;
	flex: none;
	max-width: none;
	width: max-content;
	align-items: center;
	gap: var(--sp-80);
	/* l'écart APRÈS le dernier logo = l'écart entre logos : la boucle est régulière */
	padding-right: var(--sp-80);
}

.cb-partenaires .cb-partenaires__logo {
	flex: none;
	display: block;
	height: 90px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.cb-partenaires .cb-partenaires__logo:hover { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.cb-partenaires__bande { width: auto; animation: none; flex-wrap: wrap; justify-content: center; }
	.cb-partenaires__piste[aria-hidden] { display: none; }
}

@media (max-width: 767px) {
	.cb-temoignage { width: 300px; padding: var(--sp-24); }
	.cb-partenaires .cb-partenaires__logo { height: 64px; }
}

/* ==========================================================================
   NEWS — Figma 31_Blog_Grid (liste) et 36_Single_Blog (article), sans
   sidebar, sans dates ni catégories, grille de 3 (Olivier, 07/10/2026).
   Cartes « Post big 1/3 item » : photo paysage 580 × 320 (ratio 1,81), titre
   28, extrait 16. Mu-plugin cb-news.php.
   ========================================================================== */
.cb-news {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-48) var(--sp-32);
}

.cb-news-carte { margin: 0; }

.cb-news-carte__lien {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	color: var(--color-text);
	text-decoration: none;
}

.cb-news-carte__visuel {
	display: block;
	aspect-ratio: 580 / 320;
	overflow: hidden;
	border-radius: 5px;
	background: var(--color-surface-pale);
}

.cb-news-carte .cb-news-carte__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cb-news-carte__lien:hover .cb-news-carte__img { transform: scale(1.04); }

.cb-news-carte__texte { display: flex; flex-direction: column; gap: var(--sp-8); }

.cb-news-carte .cb-news-carte__titre {
	margin: 0;
	font-size: var(--fs-28);
	line-height: 1.2;
	letter-spacing: var(--ls-titre);
	transition: color 0.2s ease;
}

.cb-news-carte__lien:hover .cb-news-carte__titre { color: var(--color-secondary); }

.cb-news-carte__extrait { font-size: var(--fs-16); line-height: 1.4; color: var(--color-secondary); }

.cb-news-carte__lire {
	margin-top: var(--sp-4);
	font-size: var(--fs-14);
	font-weight: 600;
	letter-spacing: var(--ls-surtitre);
	text-transform: uppercase;
	color: var(--color-accent);
}

/* pagination : chiffres, page courante soulignée d'or, flèches */
.cb-news__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-24);
	margin-top: var(--sp-60);
	font-size: var(--fs-16);
	font-weight: 600;
}

.cb-news__pagination .page-numbers { color: var(--color-text); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.cb-news__pagination .page-numbers.current { border-bottom-color: var(--color-accent); }
.cb-news__pagination a.page-numbers:hover { color: var(--color-accent); }
.cb-news__pagination .prev::before { content: "←"; }
.cb-news__pagination .next::before { content: "→"; }

.cb-news__vide { text-align: center; color: var(--color-secondary); font-size: var(--fs-20); }

/* --- L'article ----------------------------------------------------------- */
/* le bandeau EST l'image mise en avant de l'article (Olivier, 07/10 : « deux
   bandeaux qui se chevauchent » dans la première version, qui empilait la photo
   de la page News et l'image de l'article) ; le titre y est centré sur 996 px.
   Les photos d'article ont des cadrages variés : on les centre, le -200px du
   bandeau générique est fait pour la photo de Michel sur À propos. */
.cb-bandeau-page--article .cb-bandeau-page__contenu { max-width: 996px; }
.cb-bandeau-page--article .cb-bandeau-page__img { object-position: 50% 50%; }
/* cadrage par article, via la classe de corps WordPress `postid-N` :
   #153 « Une année chez Campagne » — photo de Michel, calée en haut pour garder
   la tête (Olivier, 07/10) */
.postid-153 .cb-bandeau-page--article .cb-bandeau-page__img { object-position: 50% 0; }

/* bouton de retour à la liste, sous le titre du bandeau, avec une flèche */
.cb-article__retour.bricks-button,
.cb-article__retour {
	margin-top: var(--sp-24);
	gap: 10px;
}
.cb-article__retour::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 3 4.5 8l5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 3 4.5 8l5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	order: -1;
}

/* --- Galerie (Figma 28_Gallery_2 : 3 colonnes de 407 px espacées de 30 px dans
   le conteneur 1280 ; ici en mosaïque, les photos gardant leur format — 19
   paysages 3:2 et 4 portraits, les recadrer toutes en 407 × 570 aurait coupé
   les pains et les visages) ------------------------------------------------ */
.cb-bandeau-page--galerie .cb-bandeau-page__img { object-position: 50% 50%; }

.cb-galerie {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	column-count: 3;
	column-gap: 30px;
}
.cb-galerie .cb-galerie__photo {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 30px;
	break-inside: avoid;
	line-height: 0;
}
.cb-galerie .cb-galerie__photo img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease, filter 0.6s ease;
}
.cb-galerie .cb-galerie__photo a { display: block; overflow: hidden; }
.cb-galerie .cb-galerie__photo a:hover img,
.cb-galerie .cb-galerie__photo a:focus-visible img {
	transform: scale(1.04);
	filter: brightness(1.04);
}
@media (max-width: 991px) {
	.cb-galerie { column-count: 2; column-gap: 20px; }
	.cb-galerie .cb-galerie__photo { margin-bottom: 20px; }
}
@media (max-width: 600px) {
	.cb-galerie { column-count: 1; }
}

.cb-article__colonne {
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
}

.cb-article__contenu {
	font-size: var(--fs-20);
	line-height: 1.5;
	color: var(--color-text);
}

.cb-article__contenu p { margin: 0 0 var(--sp-24); }
.cb-article__contenu h2 { margin: var(--sp-48) 0 var(--sp-16); font-size: var(--fs-36); }
.cb-article__contenu h3 { margin: var(--sp-40) 0 var(--sp-12); font-family: var(--font-texte); font-size: var(--fs-20); font-weight: 700; }
.cb-article__contenu img { display: block; width: 100%; height: auto; margin: var(--sp-32) 0; border-radius: 5px; }
.cb-article__contenu ul { margin: 0 0 var(--sp-24); padding-left: 1.4em; }
.cb-article__contenu a { color: var(--color-secondary); text-decoration: underline; }
.cb-article__contenu a:hover { color: var(--color-accent); }

/* précédent / suivant : deux bouts, séparés par un filet */
.cb-news-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-32);
	margin-top: var(--sp-60);
	padding-top: var(--sp-32);
	border-top: 1px solid var(--color-border);
}

.cb-news-nav__lien { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 46%; color: var(--color-text); text-decoration: none; }
.cb-news-nav__lien--suiv { text-align: right; margin-left: auto; }
.cb-news-nav__mot { font-size: var(--fs-14); font-weight: 600; letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--color-accent); }
.cb-news-nav__lien--prec .cb-news-nav__mot::before { content: "← "; }
.cb-news-nav__lien--suiv .cb-news-nav__mot::after { content: " →"; }
.cb-news-nav__titre { font-family: var(--font-titre); font-size: var(--fs-20); line-height: 1.3; transition: color 0.2s ease; }
.cb-news-nav__lien:hover .cb-news-nav__titre { color: var(--color-secondary); }

.cb-news-lies { background: var(--color-surface-pale); }

@media (max-width: 991px) {
	.cb-news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
}

@media (max-width: 575px) {
	.cb-news { grid-template-columns: 1fr; }
	.cb-news-nav { flex-direction: column; }
	.cb-news-nav__lien { max-width: none; }
	.cb-news-nav__lien--suiv { margin-left: 0; text-align: left; }
}

/* ==========================================================================
   CONTACT — Figma 18_Contact_Us : trois cartes 482 × 186 (titre 28, texte 20,
   valeurs 16), puis « Fill the form » : panneau vert pâle #E3EED4 de 945 px
   à gauche (titre 52 + chapô 20, formulaire 827, champs blancs 46 px bordés
   #AEC3B0, zone de texte 108, bouton 194 × 48), colonne de droite calée à
   1059 px (titre 52, texte, bouton). Pas de carte intégrée (traceurs).
   ========================================================================== */
.cb-bandeau-page--contact .cb-bandeau-page__img,
.cb-bandeau-page--404 .cb-bandeau-page__img { object-position: 50% 50%; } /* tartes (AdobeStock_842163174), recadrées en 1920 × 800 */

.cb-contact-cartes-section { padding-bottom: var(--sp-60); }
.cb-contact-cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-48) 129px; /* 671 - 60 - 482 */
	max-width: 1800px;
}
.cb-contact-carte { display: flex; flex-direction: column; gap: var(--sp-24); }
.cb-contact-carte .cb-contact-carte__titre { margin: 0; font-size: var(--fs-28); line-height: 34px; }
.cb-contact-carte__texte { margin: 0; font-size: var(--fs-20); line-height: 1.12; color: var(--color-secondary); }
.cb-contact-carte__valeurs { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.cb-contact-carte__valeur { margin: 0; font-size: var(--fs-16); line-height: 1.4; }
.cb-contact-plan .cb-contact-plan__lien {
	font-size: var(--fs-16);
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 4px;
	transition: color 0.25s ease;
}
.cb-contact-plan .cb-contact-plan__lien:hover { color: var(--color-accent); }

/* --- le plan (classe `cb-contact-plan`, PAS `cb-contact-carte` qui est la
   carte-texte des trois coordonnées — collision payée le 07/10) : image OSM
   pleine largeur, toute la bande est un lien ----- */
.cb-contact-plan { padding: 0; line-height: 0; }
.cb-contact-plan .cb-contact-plan__lien { position: relative; display: block; width: 100%; max-width: none; overflow: hidden; }
.cb-contact-plan .cb-contact-plan__img { display: block; width: 100%; max-width: none; height: min(560px, 29vw); object-fit: cover; transition: transform 0.8s ease; }
.cb-contact-plan .cb-contact-plan__lien:hover .cb-contact-plan__img { transform: scale(1.03); }
.cb-contact-plan__etiquette {
	position: absolute;
	left: 50%;
	bottom: var(--sp-40);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-12);
	padding: var(--sp-20) var(--sp-24);
	background: var(--color-surface);
	line-height: 1.3;
	box-shadow: 0 12px 32px rgba(15, 42, 29, 0.18);
}
.cb-contact-plan__adresse { margin: 0; font-size: var(--fs-18); color: var(--color-text); white-space: nowrap; }
.cb-contact-plan .cb-contact-plan__lien:hover .cb-contact-plan__bouton { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
@media (max-width: 767px) {
	.cb-contact-plan .cb-contact-plan__img { height: 320px; }
	.cb-contact-plan__etiquette { bottom: var(--sp-16); padding: var(--sp-12) var(--sp-16); }
	.cb-contact-plan__adresse { white-space: normal; text-align: center; font-size: var(--fs-16); }
}

/* --- le formulaire : panneau pâle à gauche, horaires à droite ------------- */
.cb-contact-form {
	display: grid;
	grid-template-columns: minmax(0, 945fr) minmax(0, 975fr);
	align-items: start;
	padding: 0;
}
.cb-contact-form__panneau {
	display: flex;
	flex-direction: column;
	gap: var(--sp-40);
	padding: var(--sp-100) var(--sp-60);
	background: var(--color-surface-pale);
}
.cb-contact-form__entete { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 636px; }
.cb-contact-form .cb-contact-form__titre { margin: 0; }
.cb-contact-form__chapo { margin: 0; font-size: var(--fs-20); line-height: 1.12; color: var(--color-secondary); }
.cb-contact-form__cote {
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	padding: var(--sp-100) var(--container-gutter) var(--sp-100) 114px; /* 1059 - 945 */
	/* la photo de fond (AdobeStock_96071815, posée par Bricks) sous un voile
	   clair : le texte reste sombre et lisible, la photo reste une ambiance */
}
.cb-contact-form__cote::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.72);
	pointer-events: none;
}
.cb-contact-form__cote-contenu {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	max-width: 747px;
}
/* les réseaux sous les horaires : deux icônes rondes, masques SVG, or au survol */
.cb-contact-reseaux { margin-top: var(--sp-16); }
.cb-contact-reseaux__titre { margin: 0 0 var(--sp-12); font-size: var(--fs-14); font-weight: 600; letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--color-secondary); }
.cb-contact-reseaux__liens { display: flex; gap: var(--sp-12); }
/* « Commander en ligne » sous les réseaux (Olivier, 07/10) : second bloc titré,
   séparé par un filet, bouton vers la boutique Bakeronline */
.cb-contact-commande {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-16);
	margin-top: var(--sp-24);
	padding-top: var(--sp-40);
	border-top: 1px solid rgba(15, 42, 29, 0.18);
}
.cb-contact-commande .cb-contact-commande__titre { font-size: var(--fs-36); }
.cb-contact-commande__texte { margin: 0; max-width: 520px; font-size: var(--fs-20); line-height: 1.2; color: var(--color-secondary); }
.cb-reseau {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cb-reseau:hover, .cb-reseau:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
.cb-reseau__icone { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--cb-icone) center / contain no-repeat; mask: var(--cb-icone) center / contain no-repeat; }
.cb-reseau--facebook { --cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.5 0-4.1 1.5-4.1 4.2v2.3H7.4V14h2.8v8z'/%3E%3C/svg%3E"); }
.cb-reseau--instagram { --cb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3'/%3E%3C/svg%3E"); }
.cb-contact-horaires { display: flex; flex-direction: column; gap: 6px; }
.cb-contact-horaires__ligne { margin: 0; font-size: var(--fs-20); line-height: 1.3; }
.cb-contact-form__adresse { margin: 0; font-size: var(--fs-18); line-height: 1.4; color: var(--color-secondary); }
.cb-contact-form .cb-contact-form__bouton { align-self: flex-start; margin-top: var(--sp-8); }

/* --- Gravity Forms habillé par ses variables (thème « orbital »).
   Figma : champs blancs 46 px, bordure 1 px #AEC3B0 (= --color-light), sans
   rayon ; bouton 194 × 48 comme nos boutons. */
.cb-formulaire-gf { width: 100%; max-width: 827px; }
.cb-formulaire-gf .gform_wrapper {
	--gf-ctrl-bg-color: var(--color-surface);
	--gf-ctrl-bg-color-hover: var(--color-surface);
	--gf-ctrl-bg-color-focus: var(--color-surface);
	--gf-ctrl-color: var(--color-text);
	--gf-ctrl-border-color: var(--color-light);
	--gf-ctrl-border-color-hover: var(--color-secondary);
	--gf-ctrl-border-color-focus: var(--color-secondary);
	--gf-ctrl-radius: 0;
	--gf-ctrl-padding-x: 16px;
	--gf-ctrl-padding-y: 12px;
	--gf-ctrl-placeholder-color: #7A8A7C;
	--gf-ctrl-label-color-primary: var(--color-text);
	--gf-ctrl-label-color-secondary: var(--color-secondary);
	--gf-ctrl-label-color-req: var(--color-accent);
	--gf-ctrl-desc-color: var(--color-secondary);
	--gf-ctrl-btn-bg-color-primary: var(--color-primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--color-accent);
	--gf-ctrl-btn-color-primary: var(--color-inverse);
	--gf-ctrl-btn-color-hover-primary: var(--color-text);
	--gf-ctrl-btn-border-color-primary: var(--color-primary);
	--gf-ctrl-btn-border-color-hover-primary: var(--color-accent);
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-padding-x: 26px;
	--gf-ctrl-btn-padding-y: 13px;
	--gf-ctrl-btn-size: lg;
	--gf-form-gap-x: var(--sp-16);
	--gf-form-gap-y: var(--sp-24);
	--gf-color-primary: var(--color-secondary);
	--gf-color-primary-contrast: var(--color-inverse);
	--gf-ctrl-checkbox-check-color: var(--color-inverse);
	--gf-ctrl-checkbox-check-bg-color: var(--color-primary);
	--gf-ctrl-checkbox-check-bg-color-hover: var(--color-primary);
	--gf-ctrl-checkbox-check-border-color: var(--color-primary);
	--gf-ctrl-checkbox-check-border-color-hover: var(--color-primary);
	--gf-ctrl-checkbox-check-border-color-focus: var(--color-primary);
	--gf-ctrl-checkbox-check-border-radius: 0;
	--gf-ctrl-checkbox-bg-color-hover: var(--color-surface);
	--gf-ctrl-checkbox-bg-color-focus: var(--color-surface);
	--gf-ctrl-checkbox-border-color-focus: var(--color-primary);
	--gf-ctrl-checkbox-border-color-hover: var(--color-secondary);
	--gf-ctrl-checkbox-border-color: var(--color-light);
	--gf-ctrl-checkbox-radius: 0;
	--gf-ctrl-checkbox-shadow-focus: none;
	--gf-ctrl-shadow-focus: none;
}
.cb-formulaire-gf .gform_wrapper .gfield_label,
.cb-formulaire-gf .gform_wrapper legend.gfield_label { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cb-formulaire-gf .gform_wrapper .gfield_required { color: var(--color-accent); }
.cb-formulaire-gf .gform_wrapper textarea { min-height: 108px; }
.cb-formulaire-gf .gform_wrapper .gform_footer { display: flex; justify-content: flex-start; }
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button,
.cb-formulaire-gf .gform_wrapper .gform-button--submit {
	font-family: var(--font-texte);
	font-size: var(--fs-16);
	font-weight: 500;
	letter-spacing: var(--ls-bouton);
	text-transform: uppercase;
	min-height: 48px;
}
.cb-formulaire-gf .gform_wrapper .gfield_consent_label { font-size: var(--fs-16); line-height: 1.4; }
/* le champ téléphone en deux morceaux (pays + saisie) rendu comme un seul champ */
.cb-formulaire-gf .gform-phone__input-wrapper {
	display: flex; align-items: stretch;
	background: var(--color-surface); border: 1px solid var(--color-light);
	--gf-ctrl-btn-size: auto; --gf-ctrl-btn-padding-y: 0;
	--gf-ctrl-btn-bg-color-tertiary: transparent; --gf-ctrl-btn-bg-color-hover-tertiary: var(--color-surface-pale);
	--gf-ctrl-btn-bg-color-focus-tertiary: var(--color-surface-pale);
	--gf-ctrl-btn-color-tertiary: var(--color-text); --gf-ctrl-btn-color-hover-tertiary: var(--color-text);
	--gf-ctrl-btn-color-focus-tertiary: var(--color-text); --gf-ctrl-btn-icon-color-tertiary: var(--color-text);
	--gf-ctrl-btn-border-color-tertiary: transparent; --gf-ctrl-btn-border-color-hover-tertiary: transparent;
	--gf-ctrl-btn-border-color-focus-tertiary: transparent; --gf-ctrl-btn-border-width-tertiary: 0;
}
.cb-formulaire-gf .gform-phone__input-wrapper:focus-within { border-color: var(--color-secondary); }
.cb-formulaire-gf .gform_wrapper.gform-theme .gform-phone__country-selector { display: flex; align-items: center; align-self: stretch; gap: var(--sp-8); margin: 0; background: transparent; border: 0; border-radius: 0; padding: 0 var(--sp-12) 0 var(--sp-16); height: auto; min-height: 0; line-height: 1; cursor: pointer; }
.cb-formulaire-gf .gform-phone__input-wrapper .gform-phone__country-selector * { line-height: 1; }
/* le conteneur du sélecteur de pays est une colonne flex de GF : le bouton
   (20 px) tombait en bas des 38 px — on l'étire sur toute la hauteur */
.cb-formulaire-gf .gform_wrapper.gform-theme .ginput_country-selector_container { display: flex; flex-direction: row; align-items: stretch; }
.cb-formulaire-gf .gform_wrapper.gform-theme .ginput_country-selector_container .gform-phone__country-selector { height: 100%; min-height: 100%; }
/* la légende « Consentement » est redondante avec la case elle-même : rangée
   pour les lecteurs d'écran, retirée de l'œil (Olivier, 07/10) */
.cb-formulaire-gf .gfield--type-consent > .gfield_label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cb-formulaire-gf .gfield--type-consent { position: relative; }
/* le bouton d'envoi reprend .cb-bouton (Olivier, 07/10) — plus le survol or + farine, posé plus haut avec les autres.
   SPÉCIFICITÉ : la feuille de GF (chargée après la nôtre) pose ses variables locales sur
   `.gform-theme.gform-theme--framework.gform_wrapper .button` (0-4-0) ; à égalité elle
   gagnait. D'où `.gform_wrapper.gform-theme … .gform_button.button` (0-6-0). Même
   raison pour le sélecteur de pays du téléphone. */
.cb-formulaire-gf .gform_wrapper.gform-theme .gform_footer .gform_button.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 13px 26px;
	border: 1px solid var(--color-primary); border-radius: 0;
	background: var(--color-primary); color: var(--color-inverse);
	font-family: var(--font-texte); font-size: var(--fs-16); font-weight: 500; line-height: 22px;
	letter-spacing: var(--ls-bouton); text-transform: uppercase;
	/* GF résout la typo du bouton par ses variables LOCALES (`--gf-local-*`),
	   qui battent nos déclarations : on les pose aussi */
	--gf-local-font-size: var(--fs-16);
	--gf-local-font-weight: 500;
	--gf-local-line-height: 22px;
	--gf-local-letter-spacing: var(--ls-bouton);
	--gf-local-text-transform: uppercase;
	--gf-local-padding-x: 26px;
	--gf-local-padding-y: 13px;
	--gf-local-height: 48px;
	--gf-local-min-height: 48px;
}
.cb-formulaire-gf .ginput_phone_container { flex: 1 1 auto; display: flex; }
.cb-formulaire-gf .gform_wrapper .gform-phone__input { background: transparent; border: 0; border-radius: 0; }
.cb-formulaire-gf .gform-phone .gform-field-label--type-sub { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cb-formulaire-gf .gform_confirmation_message { font-size: var(--fs-20); line-height: 1.4; }

@media (max-width: 1100px) {
	.cb-contact-cartes { grid-template-columns: 1fr; gap: var(--sp-40); }
	.cb-contact-form { grid-template-columns: 1fr; }
	.cb-contact-form__panneau { padding: var(--sp-80) var(--container-gutter); }
	.cb-contact-form__cote { padding: var(--sp-80) var(--container-gutter); }
}

/* ==========================================================================
   PAGE 404 — Figma 25_404_Page : colonne centrée de 633 px entre en-tête et
   pied — illustration 245 × 245 (ici la miche détourée d'À propos, qui tourne
   lentement), « 404 » Afacad SemiBold 110 / 100, titre 52, texte 20 (écart
   16), bouton 48 (écart 41). Précédée d'un bandeau de page comme les autres
   pages internes (tartes), demande d'Olivier du 07/10 ; fond vert pâle.
   ========================================================================== */
.cb-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-100) var(--container-gutter);
	background: var(--color-surface-pale);
	text-align: center;
}
.cb-404__colonne {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 633px;
	margin: 0 auto;
}
.cb-404__pain {
	width: 245px;
	height: 245px;
	margin-bottom: var(--sp-24);
	filter: drop-shadow(0 18px 24px rgba(15, 42, 29, 0.18));
	animation: cb-pain-tourne 120s linear infinite reverse;
}
.cb-404 .cb-404__pain-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cb-404__code {
	margin: 0;
	font-family: var(--font-texte);
	font-size: clamp(72px, 5.7vw, 110px);
	font-weight: 600;
	line-height: 1;
	color: var(--color-secondary);
}
.cb-404 .cb-404__titre { margin: var(--sp-24) 0 0; font-size: var(--fs-52); line-height: var(--lh-titre); }
.cb-404__texte { margin: var(--sp-16) 0 0; font-size: var(--fs-20); line-height: 1.12; color: var(--color-secondary); }
.cb-404__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); margin-top: 41px; }
@media (prefers-reduced-motion: reduce) { .cb-404__pain { animation: none; } }
@media (max-width: 767px) { .cb-404__pain { width: 180px; height: 180px; } }

/* ==========================================================================
   PAGES LÉGALES — colonne de lecture de 860 px sous le bandeau ; h2 par
   article ; le document de cookies est généré par Complianz (shortcode).
   ========================================================================== */
.cb-bandeau-page--legal .cb-bandeau-page__img { object-position: 50% 50%; }
.cb-legal {
	width: 100%;
	max-width: 1100px; /* 860 « ressemblait à du mobile » (Olivier, 07/10) */
	margin: 0 auto;
	font-size: var(--fs-20);
	line-height: 1.5;
}
.cb-legal .cb-legal__titre { margin: var(--sp-48) 0 var(--sp-16); font-size: var(--fs-28); line-height: 1.2; }
.cb-legal .cb-legal__titre:first-child { margin-top: 0; }
.cb-legal .cb-legal__texte p { margin: 0 0 var(--sp-16); }
.cb-legal .cb-legal__texte ul,
.cb-legal .cb-legal__texte ol { margin: 0 0 var(--sp-16); padding-left: 1.4em; list-style: disc; }
.cb-legal .cb-legal__texte li { margin-bottom: 6px; }
.cb-legal .cb-legal__texte a { color: var(--color-secondary); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.cb-legal .cb-legal__texte a:hover { color: var(--color-accent); }
/* le document Complianz : ses h2/h3 et ses tableaux reprennent nos styles */
.cb-legal .cmplz-document h2, .cb-legal .cmplz-document h3 { margin: var(--sp-40) 0 var(--sp-12); font-size: var(--fs-28); line-height: 1.2; }
.cb-legal .cmplz-document h2:first-child { margin-top: 0; }
.cb-legal .cmplz-document table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-16); font-size: var(--fs-16); }
.cb-legal .cmplz-document th, .cb-legal .cmplz-document td { padding: 8px 10px; border-bottom: 1px solid var(--color-light); text-align: left; vertical-align: top; }
.cb-legal .cmplz-document .cmplz-manage-consent { display: inline-flex; margin: var(--sp-8) 0; }

/* « Gérer le consentement » du pied : sur mobile seulement — sur ordinateur
   Complianz affiche son onglet flottant (hover-hide-mobile). ET seulement
   quand Complianz sert une bannière : avec des cookies fonctionnels seuls (pas
   de mesure d'audience, pas de service tiers — l'état du 07/10/2026), le
   greffon n'en injecte aucune (`site_needs_cookie_warning()` = faux) et le
   lien ne ferait rien. `body:has(#cmplz-cookiebanner-container)` le fait
   apparaître de lui-même le jour où un service soumis au consentement est
   ajouté (Analytics, carte, vidéo). */
.cb-pied__gerer { display: none; }
@media (max-width: 767px) { body:has(#cmplz-cookiebanner-container) .cb-pied__gerer { display: inline; } }

/* l'onglet flottant « Gérer le consentement » À GAUCHE (Olivier, 07/10) ; la
   bannière, elle, reste en bas à droite */
/* `!important` : Complianz pose `right: 40px` sur le même sélecteur dans une
   feuille chargée après la nôtre (vérifié : left 1050 / right 40 au premier essai) */
.cmplz-manage-consent.cmplz-manage-consent { left: 20px !important; right: auto !important; }
/* la bannière Complianz dans nos polices */
#cmplz-cookiebanner-container .cmplz-cookiebanner { font-family: var(--font-texte); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title { font-family: var(--font-titre); font-weight: 400; font-size: 24px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn { font-family: var(--font-texte); text-transform: uppercase; letter-spacing: var(--ls-bouton); font-weight: 500; }

/* --- BANDEAU DE PAGE SUR TÉLÉPHONE — en fin de feuille, volontairement : les
   règles de base (`-200px` pour la photo de Michel, `50% 0` pour l'article
   #153, le padding de 220 px) sont écrites plus bas que le bloc 767 px des
   sections, et à spécificité égale la dernière gagne. Mesuré le 07/10 :
   placées dans ce bloc, elles perdaient (object-position resté à -200px). */
@media (max-width: 767px) {
	.cb-bandeau-page { min-height: 420px; padding: 190px var(--sp-16) var(--sp-40); }
	.cb-bandeau-page .cb-bandeau-page__img,
	.cb-bandeau-page--article .cb-bandeau-page__img,
	.postid-153 .cb-bandeau-page--article .cb-bandeau-page__img { object-position: 50% 35%; }
}