/* =====================================================================
   Perronnet - feuille de styles unique (front + editeur).

   Les tokens (couleurs, tailles, espacements) vivent dans theme.json et
   sont consommes ici via var(--wp--preset--*). Ce fichier ne contient que
   ce que theme.json ne sait pas exprimer : layout du header/footer, styles
   de blocs enregistres (is-style-*), animations, responsive.

   Sommaire
   1.  Police d'icones
   2.  Bases et layout
   3.  Animations au scroll
   4.  Header
   5.  Menu mobile
   6.  Footer
   7.  Styles de blocs - texte
   8.  Styles de blocs - groupes et sections
   9.  Styles de blocs - boutons
   10. Styles de blocs - images et listes
   11. Compositions recurrentes
   12. Formulaires (Gravity Forms)
   13. Responsive des compositions
   ===================================================================== */

/* =================== 1. Police d'icones ============================== */
/* Auto-hebergee (assets/fonts/), aucune requete externe (regle 9).

   Le fichier ne contient QUE les 28 icones utilisees par le theme : 5,6 Ko
   au lieu des 3,9 Mo de la police complete. Avec font-display: block - qui
   masque le glyphe tant que la police n'est pas la, pour ne pas afficher le
   nom de l'icone en clair - ce poids se voyait a chaque chargement.

   POUR AJOUTER UNE ICONE, regenerer le fichier avec la liste complete :

     curl -H "User-Agent: Mozilla/5.0 ... Chrome/120" \
       "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\
        :opsz,wght,FILL,GRAD@24,400,0,0&icon_names=<liste,separee,par,virgules>\
        &display=block"

   puis telecharger l'URL woff2 retournee dans assets/fonts/. Une icone
   absente du fichier s'affiche en toutes lettres.

   Pour connaitre la liste a demander, relever les icones reellement rendues
   sur les pages en ligne plutot que dans les patterns : le contenu edite en
   base en utilise davantage.

       curl -s <chaque URL du site> \
         | grep -oP 'material-symbols-outlined[^>]*>\s*\K[a-z0-9_]+' | sort -u

   Le @font-face n'est pas ici mais dans gaec_icon_font_face() (functions.php) :
   l'URL doit rester identique a celle du preload, qui porte un ?ver= issu de
   filemtime. Cette declaration est servie a DEUX endroits - au front par
   gaec_preload_icon_font() (wp_head), au canvas de l'editeur par
   gaec_enqueue_editor_icon_font() (enqueue_block_assets). wp_head ne s'execute
   pas cote admin : supprimer ce second point d'entree afficherait toutes les
   icones en toutes lettres dans les deux editeurs, la regle ci-dessous ne
   declarant aucune famille de repli. */

.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* =================== 2. Bases et layout ============================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Le wrapper FSE du header n'a que le header pour enfant : sans ceci, son
   bloc contenant fait la hauteur du header et position:sticky est inerte. */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}

.site-main {
	display: block;
}

/* Les pages qui portent leur propre hero n'ont pas de marge haute. */
.site-main.is-flush > .wp-block-post-content > *:first-child {
	margin-block-start: 0;
}

.page-entete {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.page-404 {
	padding-block: var(--wp--preset--spacing--90);
	max-width: 44rem;
}

/* Pages de texte long (mentions legales, confidentialite). Meme largeur de
   lecture que la 404 : les 1200px du contenu donnent des lignes trop longues
   pour du texte suivi. */
.is-style-document {
	max-width: 44rem;
	padding-bottom: var(--wp--preset--spacing--80);
}

/* Le layout "constrained" centre tout enfant plus etroit que son conteneur :
   le texte se retrouvait au milieu des 1200px alors que le titre de la page,
   lui, part de la gauche. On aligne les deux. */
.site-main .is-style-document {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.is-style-document > * + * {
	margin-block-start: 1.125rem;
}

.is-style-document h2 {
	font-size: 1.375rem;
	margin-block-start: 2.75rem;
}

.is-style-document h2:first-child {
	margin-block-start: 0;
}

.is-style-document :is(p, li) {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-soft);
}

/* Les sections pleine largeur enchainees ne doivent pas cumuler de marges. */
.site-main .alignfull {
	margin-block: 0;
}

/* =================== 3. Animations au scroll ========================= */
/* Le client pose .reveal (+ variante) depuis le panneau "Avance" d'un bloc.
   Le JS ajoute .is-visible a l'entree dans le viewport. */

.reveal {
	opacity: 0;
	transition:
		opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.reveal-up {
	transform: translateY(22px);
}

.reveal-left {
	transform: translateX(-30px);
}

.reveal-right {
	transform: translateX(30px);
}

.reveal-scale {
	transform: scale(0.96);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Amplitude reduite sur mobile pour ne pas penaliser le scroll tactile. */
@media (max-width: 781px) {
	.reveal-up {
		transform: translateY(8px);
	}

	.reveal-left,
	.reveal-right {
		transform: translateX(12px);
	}
}

/* Dans l'editeur, scroll-reveal.js ne tourne pas : sans ce garde-fou, tous les
   blocs portant .reveal resteraient a opacity 0 et l'editeur paraitrait vide.
   Le selecteur ne matche que le canvas de l'editeur (le body de l'iframe porte
   .editor-styles-wrapper) et l'emporte sur .reveal par specificite. */
.editor-styles-wrapper .reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Non negociable : mouvement reduit = aucune animation. */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-up,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =================== 4. Header ======================================= */

/* Le fond et l'ombre sont portes par le header lui-meme, qui occupe toute la
   largeur. Les poser sur .header-inner - qui est borne au wideSize - les
   arretait a 1400px : au defilement, la page reapparaissait de part et
   d'autre de la barre. */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 250, 245, 0.92);
	transition: box-shadow 0.3s ease;
}

/* Le flou va sur un pseudo-element : sur .header directement, il en ferait un
   containing block et le panel mobile resterait piege dedans (regle 19). */
.header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(10px);
	pointer-events: none;
}

.header.is-stuck {
	box-shadow: 0 4px 18px rgba(22, 39, 15, 0.07);
}

/* --- Barre utilitaire (etage haut) --- */

.header-utility {
	background: var(--wp--preset--color--forest);
	color: rgba(255, 255, 255, 0.85);
	padding-block: 0.5625rem;
}

/* Meme gabarit que .header-inner, et surtout padding au MEME niveau : la
   largeur max et le retrait lateral doivent etre portes par le meme element,
   sinon les deux etages du header ne s'alignent pas. Poser le padding sur
   .header-utility revenait a centrer cet inner dans une zone deja retranchee,
   donc a le faire commencer au bord des 1400px quand la navigation, elle,
   commence un padding plus loin - 56px d'ecart en grand ecran.
   Le fond reste sur .header-utility, qui garde toute la largeur. */
.header-utility-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 1.25rem);
	gap: 1.125rem;
}

.header-utility-right {
	gap: 1.125rem;
}

/* Filet separateur entre les mentions, comme dans le mockup.

   Pose en CSS et non comme un bloc : c'est un decor, et un paragraphe ne
   contenant qu'une barre verticale serait un contenu vide de sens a maintenir
   dans l'editeur, que le client pourrait deplacer ou supprimer par megarde.
   Ecrit sur les items SUIVANTS plutot qu'apres le premier : une mention
   ajoutee depuis l'editeur recoit ainsi son separateur sans retoucher au CSS.

   La marge compense le gap de .is-style-icone-texte : le pseudo-element est un
   item flex de ce paragraphe, donc deja suivi de 0.5rem. Sans ce calcul, le
   filet serait colle a l'icone au lieu des 1.125rem du mockup. */
.header-utility-right > * + *::before {
	content: "|";
	margin-inline-end: calc(1.125rem - 0.5rem);
	opacity: 0.35;
}

.header-utility p {
	margin: 0;
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: inherit;
}

.header-utility a {
	color: inherit;
	text-decoration: none;
}

.header-utility a:hover,
.header-utility a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* Tout tient sur une ligne dans la barre : on centre, comme le mockup. */
.header-utility .is-style-icone-texte {
	align-items: center;
	gap: 0.5rem;
}

.header-utility .material-symbols-outlined {
	font-size: 15px;
	line-height: 1;
	color: var(--wp--preset--color--primary-light);
}

/* --- Etage nav --- */

/* Seul le contenu est borne : le fond, lui, court sur toute la largeur (cf.
   .header plus haut). */
.header-inner {
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	gap: 2.375rem;
	padding-block: 1.125rem;
	padding-inline: var(--wp--style--root--padding-right, 1.25rem);
	transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pas de filet sous la navigation : ecart assume avec le mockup, qui en pose
   un. C'est l'ombre portee au scroll (.is-stuck) qui detache le header du
   contenu. */

/* Etat resserre, au-dela de 80px de scroll : 18px de padding tombent a 12,
   et une ombre discrete detache le header du contenu. */
.header.is-stuck .header-inner {
	padding-block: 0.75rem;
}

/* Mouvement reduit : on garde l'ombre, on retire la transition. */
@media (prefers-reduced-motion: reduce) {
	.header-inner {
		transition: none;
	}
}

.header-brand {
	gap: 0.8125rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
}

.header-logo img,
.footer-logo img {
	display: block;
	height: auto;
}

/* Le logo client est un JPG sur fond blanc : on neutralise le fond plutot
   que de le detourer. A retirer des reception d'un PNG/SVG transparent. */
.header-logo img {
	mix-blend-mode: multiply;
}

/* Le logo est un lien vers l'accueil : il doit repondre au survol. Un simple
   agrandissement, le brief proscrivant les zooms marques. */
.header-logo .custom-logo-link,
.footer-logo .custom-logo-link {
	display: inline-block;
	border-radius: 6px;
}

.header-logo .custom-logo-link img,
.footer-logo .custom-logo-link img {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-logo .custom-logo-link:hover img,
.header-logo .custom-logo-link:focus-visible img,
.footer-logo .custom-logo-link:hover img,
.footer-logo .custom-logo-link:focus-visible img {
	transform: scale(1.06);
}

/* Le focus clavier doit rester visible : le survol seul ne suffit pas. */
.header-logo .custom-logo-link:focus-visible,
.footer-logo .custom-logo-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.header-logo .custom-logo-link img,
	.footer-logo .custom-logo-link img {
		transition: none;
	}

	.header-logo .custom-logo-link:hover img,
	.header-logo .custom-logo-link:focus-visible img,
	.footer-logo .custom-logo-link:hover img,
	.footer-logo .custom-logo-link:focus-visible img {
		transform: none;
	}
}

.header-wordmark {
	line-height: 1.05;
}

.header-wordmark p {
	margin: 0;
}

.header-wordmark-name {
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
}

.header-wordmark-baseline {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-meta);
}

/* --- Navigation --- */

.gaec-nav {
	flex: 1 1 auto;
}

.gaec-nav .wp-block-navigation__container {
	gap: clamp(1rem, 2vw, 2.375rem);
}

.gaec-nav .wp-block-navigation-item__content {
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-soft);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.gaec-nav .wp-block-navigation-item__content:hover,
.gaec-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--forest);
}

/* Item actif : classe injectee par le filtre render_block (regle 18). */
.gaec-nav .current-menu-item > .wp-block-navigation-item__content,
.gaec-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.gaec-nav .current-menu-parent > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--forest);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--primary);
}

/* --- CTA --- */

.header-cta {
	margin-left: auto;
	flex-shrink: 0;
}

/* =================== 5. Menu mobile ================================== */
/* Overlay plein ecran, sur le modele eprouve du theme campus-maupassant.
   On s'appuie sur l'overlay natif de core/navigation : le core gere
   ouverture, fermeture, focus trap et aria-*. Aucun JS de menu maison.

   Deux partis pris repris de campus :

   1. `!important` sur les proprietes en conflit avec le core. Le CSS du bloc
      navigation utilise des selecteurs longs (jusqu'a (0,5,0)) : lutter a la
      specificite donne des regles illisibles et fragiles, qui redeviennent
      inertes au moindre changement du core.

   2. La CTA n'est pas deplacee par JS mais dupliquee comme item de menu
      portant la classe `menu-cta` : visible dans l'overlay, masquee sur
      desktop ou c'est le bouton `.header-cta` qui l'affiche. Un item de menu
      reste editable par le client depuis l'editeur, contrairement a un
      deplacement DOM. */

@media (min-width: 1025px) {
	.gaec-nav .wp-block-navigation__responsive-container-open,
	.gaec-nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/* L'item CTA ne sert que dans l'overlay. */
	.gaec-nav .wp-block-navigation-item.menu-cta {
		display: none;
	}
}

/* Classe utilitaire posable sur un item depuis l'editeur, panneau "Avance"
   -> "Classe(s) CSS additionnelle(s)" : `masquer-mobile` retire l'item de
   l'overlay. Sert si un lien fait doublon avec la CTA. */
@media (max-width: 1024px) {
	.gaec-nav .wp-block-navigation-item.masquer-mobile {
		display: none;
	}
}

@media (max-width: 1024px) {
	/* Barre mobile = logo + burger. La CTA quitte la barre, elle est reprise
	   comme item dans l'overlay. */
	.header-cta {
		display: none !important;
	}

	/* Logo a gauche, burger a droite, chacun a un bout de la barre. */
	.header-inner {
		gap: 1rem;
		justify-content: space-between;
	}

	.header-brand {
		margin-right: 0;
	}

	.gaec-nav {
		flex: 0 0 auto;
		margin-left: 0;
	}

	/* core/navigation bascule en overlay a 600px, nous a 1024px : sans ceci,
	   le core cache le burger entre 601 et 1024 alors que nous cachons deja
	   le menu inline, et il ne reste aucune navigation. */
	.gaec-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		/* Le core laisse padding:0, soit une cible de 24px. */
		padding: 10px;
		margin: -10px;
		color: var(--wp--preset--color--forest);
	}

	.gaec-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Plein ecran. Le padding par defaut du core laisserait un liseret. */
	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		padding: 0 !important;
		background: var(--wp--preset--color--base) !important;
		z-index: 100000;
	}

	.gaec-nav .wp-block-navigation__responsive-dialog {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		background: var(--wp--preset--color--base);
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
	}

	.gaec-nav .wp-block-navigation__responsive-container-close {
		top: 16px;
		right: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		color: var(--wp--preset--color--forest);
	}

	/* Liens centres verticalement dans l'ecran. */
	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		padding-top: 0 !important;
	}

	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100%;
	}

	/* Neutralise le style desktop (majuscules serrees, filet bas anime) que
	   le core entraine dans l'overlay en recopiant la className du bloc sur
	   le `ul`, et pas seulement sur le `nav`. */
	/* box-sizing indispensable : le lien n'est pas en border-box par defaut,
	   et sa largeur de 100% s'ajoutait alors a son padding - le bouton CTA
	   depassait de l'ecran d'autant. */
	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		box-sizing: border-box;
		display: block;
		width: 100%;
		padding: 1rem 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: none;
		color: var(--wp--preset--color--text);
	}

	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary-dark);
		font-weight: 700;
	}

	/* Item CTA : bouton primaire centre sous les liens. */
	.gaec-nav .wp-block-navigation-item.menu-cta {
		margin-top: var(--wp--preset--spacing--50);
	}

	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.menu-cta .wp-block-navigation-item__content {
		border-bottom: 0;
		text-align: center;
		padding: 0.875rem 1.25rem;
		border-radius: 999px;
		background: var(--wp--preset--color--primary);
		color: #fff;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: var(--wp--preset--font-size--small);
		transition: background-color 0.2s ease;
	}

	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.menu-cta .wp-block-navigation-item__content:hover,
	.gaec-nav .wp-block-navigation__responsive-container.is-menu-open
		.menu-cta .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--primary-dark);
		color: #fff;
	}
}

/* Sous 640px, la barre utilitaire se resserre sur l'essentiel. */
@media (max-width: 640px) {
	.header-utility-inner {
		justify-content: center;
	}

	.header-utility-inner > .is-style-icone-texte:first-child,
	.header-utility-right .is-style-icone-texte:first-child {
		display: none;
	}

	/* Le telephone reste seul : masquer sa mention voisine ne suffit pas a
	   retirer le separateur, display: none ne changeant pas le rang dans la
	   fratrie. Sans ceci, un filet orphelin ouvre la ligne. */
	.header-utility-right > * + *::before {
		content: none;
	}

	.header-wordmark-baseline {
		display: none;
	}
}

/* =================== 6. Footer ======================================= */

/* WordPress espace les enfants de .wp-site-blocks avec
   `:where(.wp-site-blocks) > * { margin-block-start: var(--...--spacing--40) }`.
   La marge porte donc sur le wrapper .wp-block-template-part, pas sur le
   <footer> lui-meme : c'est lui qu'il faut viser pour coller le footer a la
   derniere section. */
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
}

.footer {
	color: rgba(255, 255, 255, 0.78);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	margin-block-start: 0;
}

.footer-cols {
	gap: 3rem;
}

.footer-identite {
	gap: 0.8125rem;
	margin-bottom: 1.25rem;
}

.footer-logo img {
	background: #fff;
	border-radius: 10px;
	padding: 4px;
}

.footer-wordmark p {
	margin: 0;
}

.footer-wordmark-name {
	font-weight: 800;
	font-size: 1.1875rem;
	letter-spacing: 0.02em;
	color: #fff;
}

.footer-wordmark-baseline {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
}

.footer-pitch {
	font-size: 0.875rem;
	line-height: 1.7;
	max-width: 38ch;
}

/* Label Origine France. Le fond blanc n'est pas decoratif : le logo est fourni
   sur fond transparent et son trait sombre disparaitrait sur l'aplat du
   footer. Cadre donc comme dans le mockup, en pastille claire. */
.footer-origine {
	margin-block: 1.25rem 0;
}

.footer-origine img {
	display: block;
	height: 54px;
	width: auto;
	background: #fff;
	border-radius: 8px;
	padding: 6px 8px;
}

.footer-titre {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
	margin-bottom: 1.125rem;
	letter-spacing: 0.18em;
}

.footer p {
	font-size: 0.875rem;
	line-height: 1.7;
}

.footer a {
	color: inherit;
	text-decoration: none;
}

.footer a:hover,
.footer a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.footer .material-symbols-outlined {
	font-size: 17px;
	color: var(--wp--preset--color--primary-light);
}

.footer-nav .wp-block-navigation__container {
	gap: 0.625rem;
}

.footer-nav .wp-block-navigation-item__content {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* "Toute l'annee" ferme le bloc horaires, en vert clair et sur la meme
   ligne logique - et non dans un paragraphe a part, qui aurait recu
   l'espacement entre blocs de WordPress. */
.footer-accent {
	color: var(--wp--preset--color--primary-light);
	font-weight: 600;
}

/* margin-block-start, et non margin-top : c'est la propriete que WordPress
   utilise pour espacer les blocs, et il faut la meme pour l'emporter. */
.footer .footer-note {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8125rem;
	margin-block-start: 14px;
}

.footer-legal {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	gap: 1rem;
}

.footer-legal p {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.footer-legal-liens a {
	margin-left: 1.25rem;
}

.footer-legal-liens a:first-child {
	margin-left: 0;
}

@media (max-width: 781px) {
	.footer-legal {
		justify-content: flex-start;
	}

	.footer-legal-liens a {
		margin-left: 0;
		margin-right: 1.25rem;
	}
}

/* =================== 7. Styles de blocs - texte ====================== */

/* Surtitre (eyebrow) : filet + libelle au-dessus des titres de section. */
.is-style-surtitre {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	margin-bottom: 1.125rem;
}

/* Chapo : paragraphe d'introduction, plus grand et plus aere.
   18px dans le mockup, la ou le sous-titre du hero monte a 20px. */
.is-style-intro {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
	color: var(--wp--preset--color--text-soft);
}

/* Note : mention secondaire, plus petite et discrete. */
.is-style-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-meta);
	line-height: 1.6;
}

/* Mention discrete : italique, plus effacee encore qu'une note. Sert aux
   informations de service, comme l'attente des photographies produit. */
.is-style-mention {
	font-size: 13px;
	font-style: italic;
	color: #a8a89c;
	margin-bottom: 0;
}

/* Badge : pastille verte pour une accroche courte en tete de section. */
.is-style-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--surface-green);
	color: var(--wp--preset--color--primary-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

/* Label discret : petites majuscules espacees sous un chiffre ou une icone. */
.is-style-label-meta {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-meta);
	line-height: 1.5;
}

/* Numero decoratif (01, 02, 03) - jamais dans le texte d'un titre (regle 10). */
.is-style-numero {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.125rem;
}

/* Chiffre cle du bandeau de statistiques. */
.is-style-stat {
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--forest);
	margin-bottom: 0.5rem;
}

.is-style-stat em {
	font-size: 0.45em;
	font-weight: 700;
	font-style: normal;
	color: var(--wp--preset--color--primary);
	margin-left: 0.15em;
}

/* Icone seule, sans texte. */
.is-style-icone {
	line-height: 1;
	margin-bottom: 1rem;
}

.is-style-icone .material-symbols-outlined {
	font-size: 30px;
	color: var(--wp--preset--color--primary);
}

/* Icone dans une pastille ronde. */
.is-style-icone-cercle {
	line-height: 1;
	margin-bottom: 1.125rem;
}

.is-style-icone-cercle .material-symbols-outlined {
	font-size: 24px;
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface-green);
	border-radius: 999px;
	padding: 0.75rem;
}

/* Icone alignee avec du texte.

   L'icone reprend la hauteur de ligne du texte : sa boite epouse alors la
   premiere ligne et le glyphe s'y centre tout seul. C'est ce qui remplace le
   decalage en `position: relative` qui trainait ici, lequel dependait de la
   taille du texte et tombait faux des qu'elle changeait - dans la barre
   utilitaire par exemple, ou le texte descend a 11.5px. */
.is-style-icone-texte {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.is-style-icone-texte .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 18px;
	line-height: inherit;
}

/* Titre avec filet decoratif a gauche. */
.is-style-avec-filet {
	position: relative;
	padding-left: 1.125rem;
}

.is-style-avec-filet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 3px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

/* =================== 8. Styles de blocs - groupes ==================== */

/* Carte : fond blanc, bordure fine, coins arrondis. */
.is-style-carte {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
}

/* Carte posee sur une section sombre : bordure et fond translucides plutot
   qu'un aplat, pour laisser transparaitre le vert de la section. */
.is-style-carte-sombre {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	padding: 1.875rem;
	height: 100%;
}

.is-style-carte-sombre h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	margin: 1rem 0 0.5rem;
}

.is-style-carte-sombre p {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin-bottom: 0;
}

.is-style-carte-sombre .is-style-icone {
	margin-bottom: 0;
}

.is-style-carte-sombre .is-style-icone .material-symbols-outlined {
	font-size: 30px;
	color: var(--wp--preset--color--primary-light);
}

/* Carte ombree : meme chose, avec relief. */
.is-style-carte-ombree {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Sections de fond alternees. */
.is-style-section-creme {
	background: var(--wp--preset--color--surface-cream);
}

.is-style-section-beige {
	background: var(--wp--preset--color--surface-beige);
}

.is-style-section-verte {
	background: var(--wp--preset--color--surface-green);
}

.is-style-section-sombre {
	background: var(--wp--preset--color--forest);
	color: rgba(255, 255, 255, 0.86);
}

.is-style-section-sombre :is(h1, h2, h3, h4, h5) {
	color: #fff;
}

.is-style-section-sombre .is-style-surtitre {
	color: var(--wp--preset--color--primary-light);
}

.is-style-section-sombre .is-style-intro,
.is-style-section-sombre p {
	color: rgba(255, 255, 255, 0.86);
}

.is-style-section-sombre .material-symbols-outlined {
	color: var(--wp--preset--color--primary-light);
}

/* ... sauf dans un bouton, ou l'icone suit la couleur du libelle. Sur le CTA
   final, le bouton est blanc a texte vert profond : une icone vert clair y
   serait a la fois hors design et peu lisible. */
.is-style-section-sombre .wp-block-button__link .material-symbols-outlined {
	color: inherit;
}

/* Bandeau dore facon etiquette produit. */
.is-style-bandeau-dore {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--text);
	border-radius: 4px;
	padding: 1rem 1.375rem;
}

.is-style-bandeau-dore :is(p, h2, h3, h4) {
	color: var(--wp--preset--color--text);
}

/* Encadre a filet : bordure gauche verte, fond clair. */
.is-style-encadre-filet {
	background: var(--wp--preset--color--surface-cream);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 8px 8px 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Colonnes separees par un filet vertical (bandeau chiffres, 3 atouts). */
.is-style-colonnes-separees > .wp-block-column {
	padding-inline: clamp(1rem, 3vw, 2.75rem);
	border-right: 1px solid var(--wp--preset--color--border);
}

.is-style-colonnes-separees > .wp-block-column:first-child {
	padding-left: 0;
}

.is-style-colonnes-separees > .wp-block-column:last-child {
	border-right: 0;
	padding-right: 0;
}

@media (max-width: 781px) {
	.is-style-colonnes-separees > .wp-block-column {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding-inline: 0;
		padding-block: var(--wp--preset--spacing--40);
	}

	.is-style-colonnes-separees > .wp-block-column:last-child {
		border-bottom: 0;
	}
}

/* =================== 9. Styles de blocs - boutons ==================== */

/* Le bouton par defaut (vert plein) est defini dans theme.json. */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	box-shadow: var(--wp--preset--shadow--cta);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.wp-block-button__link .material-symbols-outlined {
	font-size: 19px;
}

/* Contour : bord vert fonce, fond transparent. */
.is-style-contour .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 1.5px solid var(--wp--preset--color--forest);
	box-shadow: none;
	font-size: 0.78125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.6875rem 1.375rem;
}

.is-style-contour .wp-block-button__link:hover,
.is-style-contour .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--forest);
	color: #fff;
}

/* Fantome : simple lien souligne, sans fond ni bordure. Le trait est vert,
   pas de la couleur du texte : c'est lui qui porte l'accent. */
.is-style-fantome .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 0;
	border-bottom: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 0.25rem;
}

.is-style-fantome .wp-block-button__link .material-symbols-outlined {
	font-size: 18px;
}

.is-style-fantome .wp-block-button__link:hover,
.is-style-fantome .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--primary);
}

/* Sur fond sombre, le fantome passe en blanc. C'est une adaptation au
   contexte, pas une variante a part : inutile de cumuler deux is-style-* sur
   le meme bouton, ils se contrediraient. */
.hero .is-style-fantome .wp-block-button__link,
.is-style-section-sombre .is-style-fantome .wp-block-button__link {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Dans les sections sombres, le mockup souligne le lien en dore. */
.is-style-section-sombre .is-style-fantome .wp-block-button__link {
	border-bottom-color: var(--wp--preset--color--gold);
}

.hero .is-style-fantome .wp-block-button__link:hover,
.hero .is-style-fantome .wp-block-button__link:focus-visible,
.is-style-section-sombre .is-style-fantome .wp-block-button__link:hover,
.is-style-section-sombre .is-style-fantome .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--primary-light);
	border-bottom-color: var(--wp--preset--color--primary-light);
}

/* Vert fonce : bouton principal des sections claires de la page Services. */
.is-style-fonce .wp-block-button__link {
	background: var(--wp--preset--color--forest);
	color: #fff;
	padding: 15px 28px;
	box-shadow: none;
}

.is-style-fonce .wp-block-button__link:hover,
.is-style-fonce .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

/* Blanc plein : le bouton du CTA final, sur fond vert profond. */
.is-style-clair .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--forest);
	letter-spacing: 0.03em;
	padding: 1rem 2.125rem;
	box-shadow: none;
}

.is-style-clair .wp-block-button__link:hover,
.is-style-clair .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--forest);
}

/* Sur fond sombre : lisible sur les sections vertes profondes. */
.is-style-sur-sombre .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.is-style-sur-sombre .wp-block-button__link:hover,
.is-style-sur-sombre .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--forest);
	border-color: #fff;
}

/* =================== 10. Images et listes ============================ */

.is-style-arrondie img {
	border-radius: 6px;
}

/* Cadre interieur en lisere, comme sur la section intro de l'accueil. */
.is-style-avec-cadre {
	position: relative;
}

.is-style-avec-cadre img {
	border-radius: 6px;
}

.is-style-avec-cadre::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(28, 58, 20, 0.25);
	border-radius: 4px;
	pointer-events: none;
}

/* Liste a puces vertes. */
.is-style-liste-check {
	list-style: none;
	padding-left: 0;
}

.is-style-liste-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.75rem;
	line-height: 1.7;
}

.is-style-liste-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

/* Le style "Hero de page interieure" ne porte pas de hauteur : core/cover
   ecrit son min-height en style inline, qui l'emporterait. Les hauteurs de
   hero sont ajustees en section 13. */

/* =================== 11. Compositions recurrentes ==================== */

/* En-tete de section centre (surtitre + titre). */
.section-entete {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* WordPress ajoute `margin-block-start` a tout bloc qui suit un autre
   (`:root :where(.is-layout-flow) > *`). Cette marge s'additionnait au
   margin-bottom des en-tetes : l'ecart reel valait 54 + 24px la ou le mockup
   en demande 54. */
.section .section-entete + *,
.section .entete-gauche + *,
.section .services-entete + *,
.section-raisonnee .raisonnee-cartes,
.section-cta-duo .cta-duo {
	margin-block-start: 0;
}

.section-entete .is-style-surtitre {
	margin-bottom: 0.875rem;
}

/* Rythme vertical par defaut d'une section pleine largeur (88px au max, la
   valeur du mockup). */
.section {
	padding-block: var(--wp--preset--spacing--80);
}

.section-compacte {
	padding-block: var(--wp--preset--spacing--60);
}

/* Le mockup separe les sections claires successives par un filet fin. */
.section-filet-haut {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Les deux sections en deux colonnes (Notre metier, Notre exploitation) sont
   plus hautes et plus aerees que le rythme courant : 96px et 64px de gouttiere,
   la ou le blockGap global vaut 24px. */
.intro-cols,
.exploitation-cols {
	gap: clamp(2.5rem, 5vw, 4rem);
}

.section-intro,
.section-exploitation {
	padding-block: clamp(3.5rem, 7.5vw, 6rem);
}

/* Hero : le contenu doit rester lisible sur la photo. */
.hero .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
}

/* Le layout "constrained" de WordPress pose
   `margin-left: auto !important; margin-right: auto !important`
   sur chaque enfant direct. Un bloc portant une max-width plus etroite que
   le conteneur se retrouve donc CENTRE, alors que le mockup l'aligne a
   gauche (titre en 18ch, sous-titre en 58ch, chapo de Contact en 24ch...).
   L'effet est invisible sur les blocs pleine largeur, d'ou l'impression que
   seul le titre "decroche".

   Les blocs reellement centres (en-tetes de section, CTA finaux) portent
   leur propre margin-inline:auto et ne passent pas par ici. */
.hero .wp-block-cover__inner-container > *,
.contact-entete .contact-entete-inner > *,
.site-main .page-404 > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.hero :is(h1, h2) {
	color: #fff;
}

.hero p {
	color: rgba(255, 255, 255, 0.92);
}

/* Le surtitre du hero est precede d'un filet clair.
   Selecteur double : `.hero p` plus haut vaut (0,1,1) et l'emporterait sur
   une simple classe, le surtitre sortirait alors en blanc. */
.hero .hero-surtitre,
.contact-entete .hero-surtitre {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	color: #dff0d2;
	margin-bottom: 1.5rem;
}

.hero-surtitre::before {
	content: "";
	width: 46px;
	height: 1px;
	background: var(--wp--preset--color--primary-light);
	flex-shrink: 0;
}

/* La page produit decline le surtitre en dore plutot qu'en vert. */
.hero .hero-surtitre.is-dore {
	color: #e8dcb8;
}

.hero-surtitre.is-dore::before {
	background: var(--wp--preset--color--gold);
}

.hero-titre {
	max-width: 18ch;
	margin-bottom: 1.375rem;
}

.hero-soustitre {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	max-width: 58ch;
	margin-bottom: 2.125rem;
}

/* Les bannieres de pages interieures sont un cran en dessous de l'accueil :
   titre plus court, sous-titre plus etroit, et pas de boutons. */
.is-style-hero-page .hero-titre {
	font-size: clamp(1.875rem, 4.4vw, 3.125rem);
	max-width: 20ch;
	margin-bottom: 1.25rem;
}

.is-style-hero-page .hero-soustitre {
	font-size: 1.1875rem;
	max-width: 52ch;
	margin-bottom: 0;
}

.is-style-hero-page .hero-surtitre {
	margin-bottom: 1.375rem;
}

.hero-actions {
	gap: 1.125rem;
	align-items: center;
}

/* --- Bandeau de chiffres --- */

.section-chiffres {
	padding-block: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.section-chiffres .wp-block-columns {
	margin-block: 0;
	gap: 0;
}

.section-chiffres .wp-block-column {
	padding-block: var(--wp--preset--spacing--50);
}

.section-chiffres p {
	margin-block: 0;
}

/* --- Intro : photo encadree + badge dore --- */

.intro-visuel {
	position: relative;
}

.intro-visuel .wp-block-image {
	margin-block: 0;
}

.intro-visuel img {
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	object-fit: cover;
}

.intro-badge {
	position: absolute;
	right: -1.375rem;
	bottom: 2.125rem;
	max-width: 210px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.intro-badge p {
	margin: 0;
	font-weight: 800;
	font-size: 0.9375rem;
	line-height: 1.35;
}

@media (max-width: 781px) {
	.intro-badge {
		position: static;
		max-width: none;
		margin-top: 1rem;
	}
}

/* --- Notre exploitation --- */
/* Meme composition que "Notre metier", en miroir : le badge deborde a gauche. */

.exploitation-visuel {
	position: relative;
}

.exploitation-visuel .wp-block-image {
	margin-block: 0;
}

.exploitation-visuel img {
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	object-fit: cover;

	/* Le portrait est cadre haut, pas au centre. La photo est verticale (3:4)
	   dans une boite horizontale : `cover` n'en garde qu'une bande, centree
	   par defaut - soit de 20 % a 80 % de l'image, ce qui coupait le haut du
	   crane. Le sujet occupe 15 % (tete) a 70 % (les mains qui tiennent les
	   pommes de terre).

	   La valeur est dictee par le cas le plus defavorable, la boite la plus
	   aplatie : vers 640px de large elle ne montre plus que 42 % de la photo,
	   et tout reglage au-dela de 20 % y ramene le cadre sur le visage. Aux
	   largeurs superieures la bande s'elargit et laisse aussi passer les
	   mains. Sert aussi a "Notre equipe", meme photo. */
	object-position: center 20%;

	/* Le visuel de "Notre equipe" n'a pas de lisere : le rayon doit donc
	   etre porte ici, et pas seulement par is-style-avec-cadre. */
	border-radius: 6px;
}

.exploitation-badge {
	position: absolute;
	left: -1.5rem;
	bottom: 2.25rem;
	max-width: 210px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.exploitation-badge p {
	margin: 0;
	font-weight: 800;
	font-size: 0.9375rem;
	line-height: 1.35;
}

@media (max-width: 781px) {
	.exploitation-badge {
		position: static;
		max-width: none;
		margin-top: 1rem;
	}
}

/* Portrait en cover : encore utilise par Exploitation et Vente directe. */
.exploitation-portrait {
	border-radius: 6px;
	overflow: hidden;
}

.exploitation-portrait .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-end;
	height: 100%;
}

.exploitation-legende {
	margin: 0;
	color: #fff;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

/* --- Services aux magasins (section sombre) --- */

.services-entete {
	gap: clamp(2rem, 4vw, 3.75rem);
	margin-bottom: var(--wp--preset--spacing--60);
}

.services-entete h2 {
	margin-bottom: 0;
}

.services-chapo {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0;
}

.services-cartes {
	gap: 1.375rem;
}

/* --- Placeholder video --- */

/* Vignette du film : le bouton lecture et les textes sont poses SUR la video,
   comme dans le mockup. Le lecteur reste un core/video, l'habillage un groupe
   superpose en absolu, et assets/js/video-vignette.js declenche la lecture. */
.video-cadre {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
}

.video-film {
	margin: 0;
}

.video-film video {
	display: block;
	width: 100%;
	height: 520px;
	background: var(--wp--preset--color--forest-deep);
	object-fit: cover;
	object-position: center 62%;
}

/* Masque tant que le script n'a pas pris la main : sans JavaScript, mieux vaut
   le lecteur natif seul qu'une vignette qui recouvre la video sans pouvoir la
   lancer. Retire des que la lecture demarre. */
.video-overlay {
	display: none;
}

.video-cadre.is-interactif .video-overlay {
	display: flex;
	position: absolute;
	inset: 0;

	/* WordPress espace les blocs freres en posant un margin-block-start sur le
	   second. Sur un element en absolu, cette marge ne pousse rien : elle
	   s'ajoute a `top: 0` et decale l'habillage vers le bas, laissant une
	   bande de video a nu en haut du cadre. */
	margin: 0;

	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: 6vw;
	text-align: center;
	background: linear-gradient(
		180deg,
		rgba(15, 28, 10, 0.3),
		rgba(15, 28, 10, 0.55)
	);
	cursor: pointer;
}

.video-cadre.is-lecture .video-overlay {
	display: none;
}

.video-overlay > * {
	margin-block: 0;
}

.video-overlay .is-style-surtitre {
	justify-content: center;
	margin-bottom: 0.625rem;
	color: #dff0d2;
}

.video-overlay .video-titre {
	max-width: 24ch;
	margin-inline: auto;
	font-size: clamp(1.375rem, 2.4vw, 1.625rem);
	letter-spacing: -0.02em;
	color: #fff;
}

.video-play {
	margin-bottom: 1.375rem;
}

.video-play .material-symbols-outlined {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-inline: auto;
	font-size: 42px;
	color: var(--wp--preset--color--forest);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cadre.is-interactif .video-overlay:hover .material-symbols-outlined,
.video-cadre.is-interactif .video-overlay:focus-visible .material-symbols-outlined {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.video-play .material-symbols-outlined {
		transition: none;
	}
}

/* --- Bandeau Origine France --- */

.section-origine {
	padding-block: var(--wp--preset--spacing--60);
}

.bandeau-origine {
	gap: 2.5rem;
}

.bandeau-origine-logo {
	margin-block: 0;
	flex: none;
}

.bandeau-origine-logo img {
	height: 84px;
	width: auto;
}

.bandeau-origine-texte {
	flex: 1;
	min-width: 280px;
}

.bandeau-origine-texte .is-style-surtitre {
	letter-spacing: 0.2em;
	margin-bottom: 0.5rem;
}

.bandeau-origine-titre {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	max-width: 34ch;
	margin-bottom: 0;
}

/* --- CTA final --- */

.cta-final-inner {
	text-align: center;
}

.cta-final-titre {
	max-width: 24ch;
	margin-inline: auto;
	line-height: 1.15;
	margin-bottom: 1.25rem;
}

.cta-final-texte {
	font-size: var(--wp--preset--font-size--medium);
	color: rgba(255, 255, 255, 0.8);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 2.125rem;
}

.cta-final-inner .wp-block-buttons {
	justify-content: center;
}

.section-actions {
	margin-top: var(--wp--preset--spacing--50);
}

/* Image encadree utilisee sur les pages interieures. */
.visuel-cadre img {
	width: 100%;
	height: clamp(320px, 40vw, 440px);
	object-fit: cover;
}

/* --- Frise des cinq etapes (Exploitation) --- */
/* Colonnes jointives separees par un filet, et non des cartes : c'est le
   filet vertical qui donne la lecture de frise. Les valeurs sont celles du
   mockup, y compris le filet de la premiere colonne, qui ouvre la frise. */

.frise-etapes {
	gap: 0;
}

.frise-etapes .wp-block-column {
	padding: 0 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Le filet ne separe que les etapes entre elles : porte aussi par la
   premiere, il decalerait son texte de 22px et celui-ci ne partirait plus du
   meme axe que l'en-tete de section. */
.frise-etapes .wp-block-column:first-child {
	padding-left: 0;
	border-left: 0;
}

.frise-etapes .wp-block-column:last-child {
	padding-right: 0;
}

.frise-etapes .is-style-icone {
	margin: 0;
	line-height: 1;
}

.frise-etapes .is-style-icone .material-symbols-outlined {
	font-size: 32px;
	color: var(--wp--preset--color--primary-light);
}

.frise-etapes .is-style-numero {
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary-light);
	margin: 16px 0 8px;
}

.frise-etapes h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0 0 10px;
}

.frise-etapes p:last-child {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

/* En-tete de section aligne a gauche (frise, et sections sombres larges).

   Le bloc occupe la meme boite que la grille qui le suit - contentSize,
   centree par le layout constrained - et c'est son CONTENU qui est borne a
   760px. Le borner lui-meme puis le caler a gauche du conteneur le ferait
   partir d'un autre axe que les colonnes des que la fenetre depasse le
   contentSize : l'en-tete resterait a gauche pendant que la grille, elle,
   se centre. */
.entete-gauche {
	max-width: var(--wp--style--global--content-size);
	margin-bottom: 54px;
}

.entete-gauche > * {
	max-width: 760px;
}

.entete-gauche .is-style-surtitre {
	margin-bottom: 16px;
}

.entete-gauche h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1.12;
	margin: 0 0 18px;
}

.entete-chapo {
	font-size: 17px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

/* Carte avec icone et titre alignes horizontalement. */
.carte-entete {
	gap: 0.625rem;
	margin-bottom: 0.625rem;
}

.carte-entete .is-style-icone-cercle,
.carte-entete .is-style-icone {
	margin-bottom: 0;
}

.carte-entete .is-style-icone .material-symbols-outlined {
	font-size: 24px;
}

.carte-entete h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* --- Agriculture raisonnee : colonne etroite sur fond beige --- */

.section-raisonnee {
	padding-block: clamp(3.5rem, 7.5vw, 6rem);
}

.raisonnee-titre {
	margin-bottom: 1.75rem;
}

.section-raisonnee .is-style-intro {
	line-height: 1.85;
	margin-bottom: 1.125rem;
}

.raisonnee-dernier {
	margin-bottom: var(--wp--preset--spacing--40);
}

.raisonnee-cartes {
	gap: 1.5rem;
}

.raisonnee-cartes .is-style-carte {
	border-radius: 12px;
	padding: 1.625rem 1.75rem;
	height: 100%;
}

.raisonnee-cartes p:last-child {
	font-size: 0.90625rem;
	line-height: 1.7;
	margin-bottom: 0;
}

/* --- Galerie : mosaique, premiere image sur deux rangees --- */

.galerie-titre {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Le layout grid du groupe pose deja les colonnes ; on ne fixe ici que la
   hauteur de rangee et la premiere image, qui court sur deux rangees. */
.galerie-mosaique {
	grid-auto-rows: 240px;
	gap: 0.875rem;
}

.galerie-mosaique .wp-block-image {
	margin: 0;
	height: 100%;
}

.galerie-mosaique .wp-block-image:first-child {
	grid-row: span 2;
}

.galerie-mosaique img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Sur telephone, les photos s'empilent simplement : la mosaique n'a plus de
   sens dans une colonne etroite, et la premiere image perd son chevauchement
   de deux rangees. */
@media (max-width: 781px) {
	.galerie-mosaique {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 0.75rem;
	}

	.galerie-mosaique .wp-block-image:first-child {
		grid-row: auto;
	}

	.galerie-mosaique img {
		height: 240px;
	}
}

/* --- CTA en deux temps : titre a gauche, boutons a droite --- */

/* Le fond peut venir d'un style de bloc (Exploitation) ou d'une couleur de
   palette (page produit, en vert profond). La couleur du texte est donc
   portee par la section elle-meme, et non par le style de fond. */
.section-cta-duo {
	padding-block: clamp(3rem, 6.5vw, 5rem);
	color: rgba(255, 255, 255, 0.86);
}

.section-cta-duo :is(h1, h2, h3, h4) {
	color: #fff;
}

.cta-duo {
	gap: 40px;
}

/* Titre et boutons se partagent la ligne explicitement : le titre prend la
   place restante et peut retrecir (min-width:0, sans quoi un mot long le
   maintient a sa largeur de contenu et pousse les boutons a la ligne), les
   boutons gardent la leur. */
.cta-duo-titre {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	max-width: 24ch;
	margin-bottom: 0;
}

/* Le bloc de boutons porte une justification explicite dans le markup : sans
   elle, WordPress lui applique `width: 100%` via
   `.wp-block-buttons:not(.is-content-justification-*)`, et il passe sous le
   titre au lieu de rester a sa droite. La regle ci-dessous n'est qu'un
   garde-fou si la justification venait a sauter cote editeur. */
.cta-duo-actions {
	gap: 16px;
	width: auto;
	flex: 0 0 auto;
}

/* Sous 1024px, le bandeau repasse en deux temps empiles. */
@media (max-width: 1024px) {
	.cta-duo {
		gap: 1.75rem;
	}

	.cta-duo-titre {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Sur telephone, les deux actions passent l'une sous l'autre : cote a cote,
   elles depassent la largeur disponible. */
@media (max-width: 640px) {
	.cta-duo-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.75rem;
	}

	.cta-duo-actions .wp-block-button {
		width: 100%;
	}

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

/* Boutons du CTA en deux temps : un peu plus compacts que la valeur par
   defaut du theme. */
.cta-duo-actions .wp-block-button__link {
	padding: 15px 28px;
}


/* --- Familles et fiches de varietes --- */
/* Une variete par ligne, visuel d'un cote et texte de l'autre, cote inverse
   d'une variete a l'autre. */

/* --- Page produit : rythme vertical uniforme ---
   Toutes les sections de la page recoivent la meme marge en haut et en bas.
   Le mockup y alterne des paddings asymetriques (48/24, 80/24, 96/40...) qui
   donnaient un rythme irregulier d'une section a l'autre. */
.section-varietes-intro,
.section-famille,
.section-usages,
.section-origine-produit {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

/* --- Usages culinaires (page produit) --- */
/* Cellules jointives separees par des filets, facon tableau : ni pastilles
   ni cartes. Le filet du haut ferme la grille, chaque cellule porte le sien
   a droite et en bas. */

.section-usages .usages-entete {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 52px;
}

/* Ici le surtitre est dore, pas vert clair. */
.section-usages .is-style-surtitre {
	color: var(--wp--preset--color--gold);
	letter-spacing: 0.24em;
	margin-bottom: 16px;
}

.usages-titre {
	font-size: clamp(1.625rem, 3.2vw, 2rem);
	line-height: 1.16;
	margin-bottom: 16px;
}

.usages-chapo {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 0;
}

.grille-usages {
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.usage-item {
	flex: 1 1 25%;
	min-width: 130px;
	padding: 28px 16px;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.usage-item .is-style-icone {
	margin: 0;
	line-height: 1;
}

.usage-item .is-style-icone .material-symbols-outlined {
	font-size: 28px;
	color: var(--wp--preset--color--primary-light);
}

.usage-libelle {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.9);
	margin: 10px 0 0;
}

/* --- Origine France (page produit) --- */
/* Logo et texte poses directement sur le beige, sans encart. */

.origine-produit {
	gap: 48px;
	flex-wrap: nowrap;
}

.origine-produit-logo {
	margin-block: 0;
	flex: none;
}

.origine-produit-logo img {
	height: 118px;
	width: auto;
}

.origine-produit-texte {
	flex: 1;
}

.origine-produit-texte .is-style-surtitre {
	margin-bottom: 12px;
}

.origine-produit-titre {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	max-width: 30ch;
	margin-bottom: 14px;
}

.origine-produit-desc {
	font-size: 16px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-soft);
	max-width: 62ch;
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.origine-produit {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	.origine-produit-logo img {
		height: 84px;
	}
}

/* Chapo de la page produit : colonne etroite et centree. */
.section-varietes-intro {
	text-align: center;
}

.section-varietes-intro h2 {
	font-size: clamp(1.625rem, 3.4vw, 2.125rem);
	line-height: 1.16;
	margin-bottom: 26px;
}

.varietes-intro-texte {
	font-size: 18px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-soft);
	margin-bottom: 28px;
}

.famille-entete {
	text-align: center;
	margin-bottom: 64px;
}

.famille-titre {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

/* Le libelle d'usages est encadre d'un filet dore de chaque cote. */
.famille-usages {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-meta);
	margin-bottom: 0;
}

.famille-usages::before,
.famille-usages::after {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	flex-shrink: 0;
}

.variete-ligne {
	gap: 56px;
	margin-bottom: 64px;
}

.section-famille .variete-ligne:last-child {
	margin-bottom: 0;
}

/* Visuel provisoire : initiale en filigrane sur un fond degrade, lisere
   dore et mention en bas. A remplacer par un bloc Image a la livraison des
   photographies. */
.variete-visuel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 340px;
	background: linear-gradient(165deg, #faf6ec, #ece2cd);
	border-radius: 3px;
	overflow: hidden;
}

.variete-visuel::after {
	content: "";
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(184, 155, 83, 0.4);
	pointer-events: none;
}

.variete-initiale {
	margin: 0;
	font-size: 210px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.05em;
	color: rgba(28, 58, 20, 0.05);
}

.variete-mention {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}

.variete-nom {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	margin: 0 0 18px;
}

/* Filet dore entre le nom et la description. */
.variete-texte .variete-description::before {
	content: "";
	display: block;
	width: 40px;
	height: 1.5px;
	background: var(--wp--preset--color--gold);
	margin-bottom: 20px;
}

.variete-description {
	font-size: 16px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-soft);
	max-width: 44ch;
	margin: 0;
}

/* Ligne inversee : le texte se cale a droite, face a son visuel. */
.variete-texte.is-droite {
	text-align: right;
}

.variete-texte.is-droite .variete-description {
	margin-left: auto;
}

.variete-texte.is-droite .variete-description::before {
	margin-left: auto;
}

/* --- Services --- */
/* Sections a deux colonnes : 96px de hauteur, 64px de gouttiere, colonnes
   calees en haut pour la premiere (le bloc de cartes est plus long que son
   texte). */

.section-services-duo {
	padding-block: clamp(3.5rem, 7.5vw, 6rem);
}

.section-services-duo .services-cols {
	align-items: flex-start;
}

.services-cols {
	gap: clamp(2.5rem, 5vw, 4rem);
}

/* Les titres de section de la page Services sont d'un cran en dessous. */
.services-cols h2,
.section-cta-centre h2 {
	font-size: clamp(1.625rem, 3.2vw, 2rem);
	line-height: 1.14;
	margin-bottom: 20px;
}

.services-texte {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-soft);
}

.grille-points {
	gap: 14px;
}

.point-cle {
	border-radius: 14px;
	padding: 22px;
}

.point-cle .is-style-icone {
	margin-bottom: 0.75rem;
}

.point-cle .is-style-icone .material-symbols-outlined {
	font-size: 24px;
}

.point-cle h3 {
	font-size: 15px;
	margin-bottom: 0.375rem;
}

.point-cle p:last-child {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-meta);
	margin-bottom: 0;
}

/* Sur fond sombre, les cartes de points cles suivent la section. */
.is-style-section-sombre .point-cle p:last-child,
.is-style-section-sombre .offre-vrac p:last-child {
	color: rgba(255, 255, 255, 0.72);
}

/* CTA centre (Services) : plus bas que les autres, titre borne. */
.section-cta-centre {
	padding-block: clamp(3rem, 6.5vw, 5rem);
	text-align: center;
}

.section-cta-centre h2 {
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: 28px;
}

.section-cta-centre .wp-block-buttons {
	justify-content: center;
}

/* --- Negociants : cartes empilees sur fond sombre --- */

.offre-vrac {
	gap: 20px;
	padding: 26px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.offre-vrac h3 {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.is-style-section-sombre .offre-vrac p:last-child {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

/* --- Vente directe : photo et badge horaires --- */

.vente-visuel {
	position: relative;
}

.vente-visuel .wp-block-image {
	margin-block: 0;
}

.vente-visuel img {
	width: 100%;
	height: clamp(300px, 38vw, 420px);
	object-fit: cover;
	border-radius: 6px;
}

/* Badge vert - et non dore comme ailleurs - avec un coin rentrant. */
.vente-badge {
	position: absolute;
	left: -22px;
	bottom: 32px;
	max-width: 230px;
	padding: 14px 20px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 18px;
	border-bottom-left-radius: 4px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.vente-badge p {
	margin: 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: #fff;
}

.vente-infos {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 26px;
}

.vente-infos p {
	margin: 0;
	font-size: 15px;
	align-items: center;
	gap: 12px;
}

.vente-infos p .material-symbols-outlined {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.vente-badge {
		position: static;
		max-width: none;
		margin-top: 1rem;
	}
}

/* --- Zone de livraison --- */

.grille-departements {
	gap: 18px;
	max-width: 760px;
	margin-inline: auto;
}

/* Quatre departements de front deviennent illisibles sur telephone : deux
   par ligne sur tablette, puis empiles. */
@media (max-width: 1024px) {
	.grille-departements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.grille-departements {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

.departement {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 28px 20px;
	text-align: center;
}

.departement-numero {
	font-size: 34px;
	letter-spacing: -0.02em;
	margin-bottom: 0;
}

.departement .is-style-label-meta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 6px;
}

.offre-vrac .is-style-icone {
	margin-bottom: 0;
	flex-shrink: 0;
}

.offre-vrac-texte h3 {
	margin-bottom: 0.25rem;
}

.offre-vrac-texte p:last-child {
	margin-bottom: 0;
}

.infos-pratiques p:last-child {
	margin-bottom: 0;
}

/* --- Contact --- */

.contact-entete {
	padding-block: 72px 64px;
}

.contact-entete-inner {
	max-width: var(--wp--style--global--content-size);
}

.contact-entete h1 {
	color: #fff;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.08;
	max-width: 24ch;
	margin-bottom: 20px;
}

.contact-entete .is-style-intro {
	max-width: 64ch;
}

.section-contact {
	padding-block: 80px;
}

.contact-cols {
	gap: 56px;
	align-items: flex-start;
}

.contact-cols h2 {
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
	letter-spacing: -0.02em;
	margin-bottom: 26px;
}

/* Le mockup empile les trois coordonnees dans un flex a `gap: 22px`. Ici ce
   sont trois blocs freres : la marge de 22px est portee par chacun, et celle
   que WordPress ajoute entre blocs est neutralisee pour ne pas s'y ajouter. */
.coordonnee {
	gap: 16px;
	margin-block-start: 0;
	margin-bottom: 22px;
}

.coordonnee:last-child {
	margin-bottom: 0;
}

/* Pastille carree arrondie, et non un cercle. */
.coordonnee-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	margin: 0;
	border-radius: 11px;
	background: var(--wp--preset--color--surface-green);
}

.coordonnee-icone .material-symbols-outlined {
	font-size: 22px;
	color: var(--wp--preset--color--primary-dark);
}

/* Selecteur descendant pour passer devant `.coordonnee-texte p` plus bas, qui
   remet les paragraphes de l'ensemble a zero. */
.coordonnee-texte .coordonnee-titre {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--text);
	margin-bottom: 3px;
}

/* WordPress espace les blocs qui se suivent de `--spacing--40`, soit 24px.
   Dans les petits ensembles - un intitule suivi de son contenu, un surtitre
   suivi de son titre - cette marge s'ajoute a celle du mockup et creuse un
   vide. On la neutralise partout ou l'ecart est porte explicitement. */
.coordonnee .coordonnee-texte > *,
.point-cle > * + *,
.offre-vrac .offre-vrac-texte > * + *,
.departement > * + *,
.section-chiffres .wp-block-column > * + *,
.bandeau-origine-texte > * + *,
.origine-produit-texte > * + * {
	margin-block-start: 0;
}

.coordonnee-texte p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-soft);
	margin-bottom: 0;
}

.coordonnee-texte .coordonnee-accent {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

/* Carte du formulaire : plus arrondie et plus aeree que les cartes courantes,
   avec une ombre a peine marquee. */
.contact-formulaire {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 40px;
	box-shadow: 0 2px 14px rgba(26, 26, 26, 0.04);
}

.contact-formulaire h2 {
	margin-bottom: 24px;
}

@media (max-width: 781px) {
	.contact-formulaire {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Carte d'acces : l'iframe occupe toute la largeur du conteneur, dans un
   cadre arrondi comme le reste des visuels. */
.carte-acces {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-green);
	line-height: 0;
}

.carte-acces iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

.carte-legende {
	margin-top: 24px;
	text-align: center;
	font-size: 13px;
	color: var(--wp--preset--color--text-meta);
}

.carte-actions {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.carte-acces iframe {
		height: 320px;
	}
}


/* =====================================================================
   13. Responsive des compositions

   Le design de reference (_design/) est desktop uniquement : aucune media
   query, aucun menu mobile, des largeurs en px. Tout ce qui suit est donc
   deduit, pas transpose - a valider sur appareil reel.

   Les breakpoints du header et du menu mobile restent dans leurs sections
   (4 et 5) : ils sont indissociables de leur composant. Cette section ne
   traite que les compositions de contenu.

   Reperes :
   - 1024px : bascule du menu en panel (cf. section 5).
   - 781px  : breakpoint natif des colonnes WordPress (elles s'empilent).
   - 480px  : petits telephones.
   ===================================================================== */

/* --- Garde-fou : aucune page ne doit scroller horizontalement --- */
/* Aucun overflow pose sur html ni body : sur l'element racine il se propage
   au viewport, et le header sticky cesse de coller. Les debordements sont
   traites a leur source (badges en position absolue, grilles) plutot que
   masques ici. */
body {
	max-width: 100%;
}

/* Le garde-fou se pose sur le conteneur de contenu, qui n'est pas un ancetre
   du header : les badges en debord (Notre metier, Notre equipe, Vente
   directe) ne peuvent plus provoquer de defilement lateral, et le header
   continue de coller. */
.site-main {
	overflow-x: clip;
}

img,
figure {
	max-width: 100%;
}

/* Les tableaux debordent plutot que de casser la page : on les fait defiler
   dans leur propre conteneur. */
.wp-block-table {
	overflow-x: auto;
}

/* --- Tablette : 782px a 1024px --- */
/* Les colonnes WordPress sont encore en ligne a cette largeur. Les grilles
   les plus denses (5 etapes, 5 varietes, 6 points cles) y deviennent
   illisibles : on les laisse passer a la ligne. */
@media (min-width: 782px) and (max-width: 1024px) {
	/* Au-dessus de 782px WordPress force `flex-wrap: nowrap !important` sur
	   les colonnes : il faut du !important pour le lever. */
	.wp-block-columns.frise-etapes {
		flex-wrap: wrap !important;
	}

	/* La frise est jointive (gap 0) : pas de gouttiere a soustraire. */
	.wp-block-columns.frise-etapes > .wp-block-column {
		flex-basis: 33.333% !important;
		padding-block: 1rem;
	}

	/* Les deux colonnes de la page Services deviennent trop etroites pour
	   porter une grille de 2 cartes cote a cote. */
	.services-cols {
		gap: 2rem;
	}

	}

/* --- Mobile : jusqu'a 781px --- */
@media (max-width: 781px) {
	/* Hero : la hauteur desktop occuperait tout l'ecran. Le min-height est
	   pose en style inline par core/cover, d'ou le !important. */
	.hero {
		min-height: 460px !important;
	}

	.hero.is-style-hero-page {
		min-height: 340px !important;
	}

	.hero-titre {
		max-width: none;
	}

	.hero-actions {
		gap: 0.875rem;
	}

	.hero-actions .wp-block-button {
		width: 100%;
	}

	.hero-actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	/* Chiffres cles, departements et varietes : 2 par ligne plutot qu'une
	   longue colonne de blocs empiles.

	   Les selecteurs sont volontairement longs : WordPress empile les
	   colonnes avec
	   `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`
	   en !important, soit une specificite (0,3,0). Une regle plus courte
	   serait inerte, meme avec !important. */
	.section-chiffres .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.section-chiffres .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 0.625rem) !important;
	}

	.section-chiffres .wp-block-columns > .wp-block-column {
		padding-block: var(--wp--preset--spacing--40);
	}

	/* Empilee, la frise se lit comme une timeline verticale : le filet qui
	   separait les colonnes bascule a l'horizontale, entre les etapes. Le
	   padding lateral tombe avec lui, sinon le texte des etapes 2 a 5 partirait
	   d'un autre axe que l'en-tete de section. */
	.frise-etapes .wp-block-column {
		padding: 1.25rem 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}

	/* Meme logique qu'en bureau : le filet separe les etapes, il n'ouvre pas
	   la frise. */
	.frise-etapes .wp-block-column:first-child {
		padding-top: 0;
		border-top: 0;
	}

	/* Varietes : le visuel repasse au-dessus du texte, qui revient a gauche
	   meme sur les lignes inversees. */
	.variete-ligne {
		gap: 1.5rem;
		margin-bottom: var(--wp--preset--spacing--60);
	}

	.variete-visuel {
		height: 240px;
	}

	.variete-initiale {
		font-size: 140px;
	}

	.variete-texte.is-droite,
	.variete-texte.is-droite .variete-description {
		text-align: left;
		margin-left: 0;
	}

	.variete-texte.is-droite .variete-description::before {
		margin-left: 0;
	}

	/* Les visuels en cover perdent leur hauteur fixe de bureau. */
	.exploitation-portrait {
		min-height: 320px !important;
	}

	.video-film video {
		height: clamp(240px, 52vw, 360px);
	}

	.intro-visuel img,
	.visuel-cadre img {
		height: clamp(240px, 55vw, 320px);
	}

	/* Le lisere interieur devient trop serre sur petite image. */
	.is-style-avec-cadre::after {
		inset: 10px;
	}

	/* Encarts et cartes : padding resserre. */
			/* Les en-tetes de section restent lisibles a gauche plutot que centres
	   sur trois lignes. */
	.section-entete,
	.famille-entete {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.contact-cols {
		gap: 2.25rem;
	}

	.coordonnee {
		margin-bottom: 1.25rem;
	}

	.usage-item {
		flex: 1 1 50%;
		padding: 22px 12px;
	}

}

/* --- Petits telephones : jusqu'a 480px --- */
@media (max-width: 480px) {
	/* Une seule carte par ligne : en dessous, le texte se casse. */
	.section-chiffres .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.grille-points {
		grid-template-columns: 1fr !important;
	}


	/* Le logo et le nom prennent trop de place a cote du burger. */
	.header-logo img {
		width: 44px !important;
	}

	.header-wordmark-name {
		font-size: 1rem;
	}

	.hero {
		min-height: 420px !important;
	}

	/* Les etapes de la frise s'aerent moins - uniquement en vertical, le
	   padding lateral doit rester nul pour garder l'axe de l'en-tete. */
	.frise-etapes .wp-block-column {
		padding-block: var(--wp--preset--spacing--30);
	}

	.offre-vrac {
		gap: 0.875rem;
		padding: 1rem;
	}
}