/* ==========================================================================
   Cartoffset — feuille de style du thème
   Valeurs relevées dans Figma (maquettes de Laura Berthier, cadre 1512 px).
   Règle de la charte appliquée partout : « bleu foncé à la place du gris » :
   les états survol dessinés en #1B1E23 dans les composants passent en #002140,
   comme sur les pages validées.

   Sommaire
   1. Réglages            8. Cartes (marché, service, détail)
   2. Base                9. Cartes produit
   3. Accessibilité      10. Sections spécifiques
   4. Mise en page       11. Formulaire de devis
   5. Fonds de section   12. En-tête et méga-menu
   6. Boutons, étiquettes 13. Pied de page
   7. En-têtes de section 14. Bandeau cookies, divers
   ========================================================================== */

/* 1. Réglages ------------------------------------------------------------ */

:root {
	--c-marine: #002140;
	--c-rouge: #e5001a;
	/* Rouge sombre #B80015, défini une seule fois (palette de theme.json) :
	   survol des boutons rouges et fond de la section « carte de France ». */
	--c-rouge-sombre: var(--wp--preset--color--rouge-sombre);
	--c-rouge-survol: var(--c-rouge-sombre);
	--c-bordeaux: #3c0903;
	--c-sable: #e8dcba;
	--c-creme: #f6f1ed;
	--c-blanc: #fff;
	--c-encre: #1b1e23;
	--c-gris-image: #d9d9d9;
	--c-linkedin: #05498c;

	--police: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;

	/* Marges : 36 px de gouttière et 40 px de retrait à 1512 px, réduits en mobile. */
	--gouttiere: clamp(16px, 2.38vw, 36px);
	--retrait: clamp(0px, 2.65vw, 40px);
	--largeur: 1440px;
	--largeur-texte: 1200px;
	--section-haut: clamp(24px, 2.38vw, 36px);
	--section-bas: clamp(48px, 5.03vw, 76px);
	--section-80: clamp(56px, 5.3vw, 80px);
	--rayon: 6px;
	--transition: 180ms cubic-bezier(0.2, 0, 0, 1);

	/* Typographie (tailles fluides : mobile 375 px → maquette 1512 px). */
	--t-h1: clamp(36px, 26.77px + 2.463vw, 64px);
	--t-h2: clamp(32px, 26.72px + 1.407vw, 48px);
	--t-h3: clamp(24px, 21.36px + 0.704vw, 32px);
	--t-chapo: clamp(18px, 16.02px + 0.528vw, 24px);
	--t-courant: clamp(16px, 15.34px + 0.176vw, 18px);

	/* Couleurs de texte par défaut (fond clair) ; redéfinies sur fond sombre. */
	--texte-fort: rgba(0, 33, 64, 0.9);
	/* Maquette : 0,6 et 0,4 ; relevés à 0,65 pour atteindre le contraste AA (4,5:1)
	   sur blanc, crème et sable. */
	--texte: rgba(0, 33, 64, 0.65);
	--texte-discret: rgba(0, 33, 64, 0.65);
	--texte-plein: var(--c-marine);
	--trait: rgba(0, 33, 64, 0.2);
	--filet-fort: rgba(0, 33, 64, 0.9);
	--icone-etat: rgba(0, 33, 64, 0.55);
	/* Boutons : états de la feuille de composants Figma (« Button primary /
	   secondary / tertiary / nav », capture du 22/09), sur fond clair ; les
	   fonds foncés les redéfinissent (§ 5) et les styles du § 6 ne font que les
	   lire. Le filet de 1 px reprend la couleur du fond, comme dans Figma.
	   Libellés en couleur pleine (la feuille les met à 90 % au repos). */
	--bouton-fond: rgba(0, 33, 64, 0.1);
	--bouton-texte: var(--c-marine);
	--bouton-survol-fond: var(--c-marine);
	--bouton-survol-texte: var(--c-blanc);
	--bouton-secondaire-survol-fond: rgba(0, 33, 64, 0.1);
	--bouton-tertiaire-survol-fond: var(--c-marine);
	--bouton-tertiaire-survol-texte: var(--c-blanc);
	/* « Button nav » (bouton devis de la barre) : bleu, rouge au survol. */
	--bouton-nav-fond: var(--c-marine);
	--bouton-nav-survol-fond: var(--c-rouge);
	--focus: var(--c-rouge);
}

/* 2. Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 100px;
}

body {
	margin: 0;
	font-family: var(--police);
	font-size: var(--t-courant);
	line-height: 1.2;
	color: var(--c-marine);
	background: var(--c-blanc);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
video,
svg {
	max-width: 100%;
}

img,
video {
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol {
	margin: 0;
}

h1,
h2,
h3 {
	font-weight: 400;
	text-wrap: balance;
}

/* Rognage des interlignes, comme la maquette (Figma « Vertical trim: Cap
   height ») : la boîte du titre est ramenée de la hauteur de ligne à la
   hauteur de capitale, ce qui retirait +6 px par H2 de 48 px et +24 px par H1
   de 64 px à tous les en-têtes. Amélioration progressive : un navigateur sans
   prise en charge garde les hauteurs actuelles. Front seulement (l'éditeur a
   besoin des boîtes complètes pour la sélection des blocs). */
@supports (text-box: trim-both cap alphabetic) {
	.wp-site-blocks :is(h1, h2, h3, .titre-section, .chiffres-cles__nombre) {
		text-box: trim-both cap alphabetic;
	}

	/* Sous 1 024 px, l'étiquette du titre passe à la ligne : rognée à la ligne
	   de base, elle débordait de ~40 px sur le bouton de l'en-tête de section. */
	@media (max-width: 1023px) {
		.wp-site-blocks h2:has(.etiquette-titre) {
			text-box: trim-start cap alphabetic;
		}
	}
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.icone {
	flex: none;
	overflow: visible;
}

/* Mots composés des titres : pas de coupure sur le trait d'union (inc/typographie.php). */
.insecable {
	white-space: nowrap;
}

/* 3. Accessibilité -------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	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;
}

.lien-evitement {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--c-blanc);
	color: var(--c-marine);
	font-weight: 600;
	transform: translateY(-200%);
}

.lien-evitement:focus {
	transform: none;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

/* Sur fond rouge ou très sombre, le contour reste visible en blanc. */
.bouton--rouge:focus-visible,
.wp-block-button.is-style-rouge .wp-block-button__link:focus-visible {
	outline-color: var(--c-blanc);
	box-shadow: 0 0 0 5px var(--c-rouge);
}

/* 4. Mise en page ---------------------------------------------------------- */

.wp-site-blocks {
	padding: 0;
}

main,
.wp-block-post-content {
	display: block;
}

/* Une section occupe toute la largeur ; son contenu est centré à 1440 px. */
.section {
	position: relative;
	padding-inline: var(--gouttiere);
	color: var(--texte-fort);
}

.section > * {
	max-width: var(--largeur);
	margin-inline: auto;
}

.section > .pleine-largeur,
.section > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gouttiere) * -1);
}

.section--sans-marge {
	padding-inline: 0;
}

.section--sans-marge > * {
	max-width: none;
}

.section--haut-bas {
	padding-top: var(--section-haut);
	padding-bottom: var(--section-bas);
}

.section--80 {
	padding-block: var(--section-80);
}

.section--centre {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.retrait {
	padding-inline: var(--retrait);
}

.pile {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Titres du contenu éditorial (articles, pages de texte, pages reprises de
   l'ancien site) : échelle resserrée pour une colonne de lecture de 750 px ;
   les H1 restés dans le texte des anciennes pages (le titre de la page est
   déjà le H1) prennent la taille des H2. Avant le 05/10, ces titres
   retombaient à 18 px : theme.json appelait --wp--preset--font-size--h2 alors
   que WordPress génère --h-2. */
/* Textes repris de l'ancien éditeur : intertitres collés depuis Word (mots
   liés par des espaces insécables), légendes à largeur fixe (720 px), médias
   et tableaux intégrés. Rien ne dépasse de la colonne sur téléphone. */
.page-texte__contenu {
	overflow-wrap: break-word;
}

.page-texte__contenu :is(.wp-caption, iframe, video, embed, object) {
	max-width: 100%;
}

.page-texte__contenu .wp-caption img {
	max-width: 100%;
	height: auto;
}

/* Colonnes et groupes des anciennes pages : espacements de lecture. */
.page-texte__contenu .wp-block-columns {
	gap: 32px 48px;
}

.page-texte__contenu :is(.wp-block-column, .wp-block-group, .wp-block-cover__inner-container) > * + * {
	margin-top: 0.75em;
}

.page-texte__contenu table:not(.wp-block-table table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.page-texte__contenu :is(h1, h2) {
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.page-texte__contenu h3 {
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

.page-texte__contenu :is(h4, h5, h6) {
	font-size: inherit;
	font-weight: 600;
	line-height: 1.3;
}

/* Flux de contenu éditorial : espacements lisibles entre paragraphes. */
.contenu-texte > * + *,
.page-texte__contenu > * + * {
	margin-top: 1em;
}

.contenu-texte > h2 + *,
.contenu-texte > h3 + *,
.page-texte__contenu > h2 + *,
.page-texte__contenu > h3 + * {
	margin-top: 24px;
}

.contenu-texte > * + h2,
.contenu-texte > * + h3,
.page-texte__contenu > * + h2,
.page-texte__contenu > * + h3 {
	margin-top: 48px;
}

/* 5. Fonds de section (couleurs de la palette WordPress) ------------------ */

.has-marine-background-color,
.has-bordeaux-background-color,
.has-encre-background-color,
.has-rouge-background-color,
.has-rouge-sombre-background-color,
.has-rouge-fonce-background-color,
.has-vert-background-color,
.has-marche-cosmetique-background-color,
.has-marche-industrie-background-color,
.is-style-texte-blanc,
.fond-sombre,
.hero,
.section-temoignages,
.bandeau-cookies,
.carte__bouton {
	--texte-fort: rgba(255, 255, 255, 0.9);
	--texte: rgba(255, 255, 255, 0.6);
	--texte-discret: rgba(255, 255, 255, 0.6);
	--texte-plein: var(--c-blanc);
	--trait: rgba(255, 255, 255, 0.2);
	--filet-fort: rgba(255, 255, 255, 0.5);
	--icone-etat: rgba(255, 255, 255, 0.6);
	/* Boutons sur fond foncé (colonnes « fond foncé » de la feuille Figma) :
	   principal blanc 10 % → rouge ; secondaire transparent → blanc 20 % ;
	   tertiaire blanc 10 % → blanc plein, texte bleu. */
	--bouton-fond: rgba(255, 255, 255, 0.1);
	--bouton-texte: var(--c-blanc);
	--bouton-survol-fond: var(--c-rouge);
	--bouton-survol-texte: var(--c-blanc);
	--bouton-secondaire-survol-fond: rgba(255, 255, 255, 0.2);
	--bouton-tertiaire-survol-fond: var(--c-blanc);
	--bouton-tertiaire-survol-texte: var(--c-marine);
	--focus: var(--c-blanc);
	color: var(--texte-fort);
}

.has-marine-background-color {
	background-color: var(--c-marine);
}

.has-bordeaux-background-color {
	background-color: var(--c-bordeaux);
}

.has-sable-background-color {
	background-color: var(--c-sable);
}

.has-creme-background-color {
	background-color: var(--c-creme);
}

.has-blanc-background-color {
	background-color: var(--c-blanc);
}

/* Sur rouge, le survol rouge du bouton principal ne se verrait pas (cas absent
   de la feuille) : fond blanc, texte rouge (4,8:1). */
.has-rouge-background-color {
	--bouton-survol-fond: var(--c-blanc);
	--bouton-survol-texte: var(--c-rouge);
	background-color: var(--c-rouge);
}

/* Rouge sombre (celui du survol des boutons rouges) : section « carte de
   France » de la page Entreprise, dont le rouge était trop vif (Laura, 22/09,
   point 8). Texte en blanc plein, 6,9:1. */
.has-rouge-sombre-background-color {
	--bouton-survol-fond: var(--c-blanc);
	--bouton-survol-texte: var(--c-rouge-sombre);
	background-color: var(--c-rouge-sombre);
}

/* Sur rouge, sur vert et sur les couleurs des marchés, le blanc transparent de
   la maquette n'est pas assez contrasté : texte en blanc plein (rouge 4,8:1 ;
   vert #5C784E validé par Laura le 22/09 4,9:1 ; marché cosmétique 6,1:1 ;
   marché industrie 4,5:1, voir la recette accessibilité). */
.has-rouge-background-color,
.has-rouge-sombre-background-color,
.has-vert-background-color,
.has-marche-cosmetique-background-color,
.has-marche-industrie-background-color {
	--texte-fort: var(--c-blanc);
	--texte: var(--c-blanc);
	--texte-discret: var(--c-blanc);
}

.has-rouge-fonce-background-color {
	background-color: #7d030a;
}

.has-vert-background-color {
	background-color: #5c784e;
}

/* Couleurs des pages Marché (client, 22/09 ; l'agro-alimentaire utilise le
   rouge foncé #7D030A). Sections où les poser : capture attendue. */
.has-marche-cosmetique-background-color {
	background-color: #63634c;
}

.has-marche-industrie-background-color {
	background-color: #d14826;
}

/* Sur fond coloré, les titres de texte riche passent en blanc plein (maquette page produit). */
.has-vert-background-color h2,
.has-vert-background-color h3,
.has-rouge-background-color h2,
.has-rouge-sombre-background-color h2,
.is-style-texte-blanc h2,
.is-style-texte-blanc h3 {
	color: var(--c-blanc);
}

/* 6. Boutons et étiquettes ------------------------------------------------- */

/* Boutons du cœur (bloc Bouton) et boutons générés par le thème (.bouton),
   d'après la feuille de composants Figma (capture du 22/09) : Principal (avec
   ou sans flèche), Secondaire ↓, Tertiaire (capitales), Rouge (exception) et
   bouton de la barre (.entete__devis). Les couleurs viennent des variables de
   contexte (§ 1, fond clair ; § 5, fonds foncés) : aucun style ne teste le
   fond de sa section. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.bouton,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 24px;
	border: 1px solid var(--bouton-fond);
	border-radius: 0;
	background: var(--bouton-fond);
	color: var(--bouton-texte);
	font-family: var(--police);
	font-size: 16px;
	font-weight: 600;
	/* Interligne de la maquette (« normal » dans Figma) : boutons de 57 px,
	   42 px pour la variante tertiaire, barre de navigation de 89 px. La valeur
	   « normal » de Chakra Petch donne 21 px (soit 59 px de bouton) : 1,2 colle
	   aux hauteurs dessinées. */
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.bouton:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	border-color: var(--bouton-survol-fond);
	background: var(--bouton-survol-fond);
	color: var(--bouton-survol-texte);
}

/* Flèche → (style « Principal avec flèche », « Rouge ») : même tracé que Figma. */
.wp-block-button.is-style-fleche .wp-block-button__link::after,
.wp-block-button.is-style-rouge .wp-block-button__link::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../images/icones/fleche.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche.svg") center / contain no-repeat;
}

/* Rouge : action forte, hors feuille de composants. Exception accordée par
   Laura (22/09, point 13) : rouge au repos dans les sections de bas de page
   (section devis, formulaire), rouge assombri (#B80015, palette « Rouge
   sombre ») au survol. Partout ailleurs, le bouton principal suit la feuille. */
.bouton--rouge,
.wp-block-button.is-style-rouge .wp-block-button__link {
	border-color: var(--c-rouge);
	background: var(--c-rouge);
	/* Blanc plein (maquette : 90 %) pour le contraste AA sur le rouge (4,8:1). */
	color: var(--c-blanc);
}

.bouton--rouge:hover,
.wp-block-button.is-style-rouge .wp-block-button__link:hover {
	border-color: var(--c-rouge-survol);
	background: var(--c-rouge-survol);
	color: var(--c-blanc);
}

/* Effet verre sur photo (hero). */
.hero .wp-block-button:not(.is-style-rouge, .is-style-secondaire, .is-style-tertiaire) .wp-block-button__link {
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}

/* Secondaire : lien fléché ↴, sans fond au repos. */
.wp-block-button.is-style-secondaire .wp-block-button__link,
.bouton--secondaire {
	border-color: transparent;
	background: transparent;
	color: var(--bouton-texte);
	font-weight: 500;
}

.wp-block-button.is-style-secondaire .wp-block-button__link::after,
.bouton--secondaire::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../images/icones/fleche-bas.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche-bas.svg") center / contain no-repeat;
}

/* Survol : bleu 10 % sur fond clair, blanc 20 % sur fond foncé ; le texte ne change pas. */
.wp-block-button.is-style-secondaire .wp-block-button__link:hover,
.bouton--secondaire:hover {
	border-color: var(--bouton-secondaire-survol-fond);
	background: var(--bouton-secondaire-survol-fond);
	color: var(--bouton-texte);
}

/* Tertiaire : petites capitales, 12 × 20 px. */
.wp-block-button.is-style-tertiaire .wp-block-button__link,
.bouton--tertiaire {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Survol inversé : bleu plein et texte blanc sur fond clair, blanc plein et
   texte bleu sur fond foncé (au lieu du rouge du bouton principal). */
.wp-block-button.is-style-tertiaire .wp-block-button__link:hover,
.bouton--tertiaire:hover {
	border-color: var(--bouton-tertiaire-survol-fond);
	background: var(--bouton-tertiaire-survol-fond);
	color: var(--bouton-tertiaire-survol-texte);
}

.bouton .icone,
.wp-block-button__link .icone {
	width: 12px;
	height: 12px;
}

/* Étiquette (badge) : capitales mini sur crème. */
.etiquette {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 10px;
	border-radius: var(--rayon);
	background: var(--c-creme);
	color: var(--c-marine);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Grande étiquette accolée à un titre de section (« Nos spécialités [Agro-alimentaire] »). */
.etiquette-titre {
	display: inline-flex;
	align-items: center;
	height: 42px;
	margin-left: 10px;
	padding: 6px 10px;
	border: 1px solid rgba(0, 33, 64, 0.2);
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, 0.5);
	color: rgba(0, 33, 64, 0.65);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	vertical-align: 0.15em;
	white-space: nowrap;
}

/* Sur fond sombre ou coloré : étiquette translucide claire. */
:is(.has-marine-background-color, .has-bordeaux-background-color, .has-encre-background-color, .has-rouge-background-color, .has-rouge-sombre-background-color, .has-rouge-fonce-background-color, .has-vert-background-color, .has-marche-cosmetique-background-color, .has-marche-industrie-background-color, .is-style-texte-blanc, .fond-sombre) .etiquette-titre {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
}

/* 7. En-têtes de section --------------------------------------------------- */

@media (min-width: 1024px) {
	.entete-section h2:has(.etiquette-titre) {
		white-space: nowrap;
	}
}

.entete-section {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: var(--retrait);
}

/* Le composant « Section header » de la maquette réserve 40 px sous sa
   dernière ligne. Ce retrait interne s'ajoutait à l'écart du conteneur
   (« pile », marge de .section-services ou de .section-frise) : 80 px de blanc
   au lieu de 40 dans 12 sections, et 76 au lieu de 36 pour la frise. */
.pile > .entete-section:not(:last-child),
.section-services > .entete-section,
.section-frise > .entete-section {
	padding-bottom: 0;
}

.entete-section__texte {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
	min-width: 0;
}

.entete-section h2,
.titre-section {
	color: var(--texte-fort);
	font-size: var(--t-h2);
	line-height: 1;
	letter-spacing: -0.03em;
}

.entete-section p,
.chapo {
	color: var(--texte);
	font-size: var(--t-chapo);
	line-height: 1.2;
}

/* Sans bouton d'action, le titre peut dépasser la demi-largeur (titres sur une
   ligne de la maquette) ; le chapô reste dans la colonne de gauche. */
.entete-section:not(.entete-section--centre) > .entete-section__texte:only-child {
	grid-column: 1 / -1;
}

.entete-section:not(.entete-section--centre) > .entete-section__texte:only-child > :not(h2) {
	max-width: calc(50% - 5px);
}

.entete-section__actions,
.entete-section > .wp-block-buttons {
	justify-content: flex-end;
	align-self: start;
	padding-left: 70px;
}

.entete-section--centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	text-align: center;
}

.entete-section--centre .entete-section__texte {
	align-items: center;
	max-width: 760px;
}

.section__action {
	display: flex;
	justify-content: center;
}

/* 8. Cartes (marché, service, détail) -------------------------------------- */

.carte {
	position: relative;
	display: flex;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	background: var(--c-gris-image);
	isolation: isolate;
}

.carte__visuel {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.carte__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
}

a.carte:hover .carte__image {
	transform: scale(1.03);
}

.carte__titre {
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 400;
}

.carte__bouton-fleche {
	display: inline-flex;
	align-items: center;
	padding: 12px 12px 9px 9px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 0;
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	transition: background-color var(--transition);
}

.carte__bouton-fleche .icone {
	width: 19px;
	height: 19px;
}

/* — Marché : grand titre dans un cartouche de verre, flèche dessous. */
.carte--marche {
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 504 / 605;
}

.carte--marche .carte__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px 80px 40px 40px;
	/* Pas de flou sur la bande (retours Cartoffset du 05/10 : il coupait le
	   bas des photos) ; seuls le cartouche et la flèche restent en verre. */
	background: linear-gradient(180deg, rgba(27, 30, 35, 0) 0%, rgba(27, 30, 35, 0.25) 100%);
}

.carte--marche .carte__titre {
	align-self: stretch;
	padding: 12px 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	transition: background-color var(--transition);
}

/* Survol (dessiné sur la carte « Cosmétique ») : cartouches en bleu Cartoffset,
   bord compris (la maquette 1:4863 montre un cartouche plein). */
a.carte--marche:hover .carte__titre,
a.carte--marche:hover .carte__bouton-fleche,
a.carte--marche:focus-visible .carte__titre,
a.carte--marche:focus-visible .carte__bouton-fleche {
	/* Composant « Market card », état Hover : fond sombre (bleu marine depuis
	   la version du 1/09), le filet blanc à 20 % est conservé. */
	background: var(--c-marine);
}

.grille-cartes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grille-cartes--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grille-cartes--2 .carte--marche {
	aspect-ratio: 756 / 605;
}

.grille-cartes--2 .carte--marche .carte__titre {
	max-width: 384px;
}

/* — Services : rangées de cartes en accordéon (maquettes « Service Section Grid »
   et « Service card », exemples diwprint / ardamez). Chaque rangée compte une
   grande carte (2 unités) et des petites (1 unité) ; au survol ou au focus, la
   carte visée s'ouvre et la grande se referme (assets/js/app.js). */
.rangee-cartes {
	display: flex;
	aspect-ratio: 1512 / 378.5;
}

.rangee-cartes > .carte {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: auto;
	transition: flex-grow 500ms cubic-bezier(0.2, 0, 0, 1);
}

.rangee-cartes > .carte.est-ouverte {
	flex-grow: 2;
}

.carte--service,
.carte--service-large {
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 302.4 / 378.5;
}

.carte--service .carte__visuel::after,
.carte--service-large .carte__visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

/* Carte fermée : petit titre en bas, le reste masqué (mais lu par les lecteurs d'écran). */
.carte--service .carte__texte,
.carte--service-large .carte__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 40px;
	background: linear-gradient(180deg, rgba(27, 30, 35, 0) 0%, rgba(27, 30, 35, 0.25) 100%);
	--flou: 5px;
}

/* Flou progressif (retours du 06/10) : le flou des bandes de texte sur photo
   s'arrêtait net sur une ligne horizontale. Il est porté par un calque qui
   commence 72 px au-dessus de la bande et dont le masque passe du transparent
   à l'opaque : le flou se fond dans l'image. Intensité : --flou. Les cartes
   Marché et Machine n'ont plus de bande floutée (retours du 05/10). */
:is(.carte--service, .carte--service-large) .carte__texte,
.entete-interactif__visuel figcaption {
	position: relative;
	isolation: isolate;
}

:is(.carte--service, .carte--service-large) .carte__texte::before,
.entete-interactif__visuel figcaption::before {
	content: "";
	position: absolute;
	inset: -72px 0 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(var(--flou, 5px));
	backdrop-filter: blur(var(--flou, 5px));
	-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 72px, #000 calc(72px + 50%));
	mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 72px, #000 calc(72px + 50%));
	pointer-events: none;
}

.carte--service .carte__titre,
.carte--service-large .carte__titre {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}

.carte--service:not(.est-ouverte) .carte__description,
.carte--service:not(.est-ouverte) .carte__etiquette,
.carte--service-large:not(.est-ouverte) .carte__description,
.carte--service-large:not(.est-ouverte) .carte__etiquette {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.carte--service:not(.est-ouverte) .carte__bouton-fleche,
.carte--service:not(.est-ouverte) .carte__bouton,
.carte--service-large:not(.est-ouverte) .carte__bouton-fleche,
.carte--service-large:not(.est-ouverte) .carte__bouton {
	display: none;
}

/* « Les autres étapes » (pages Service) : « Étape précédente » et « Étape
   suivante » restent visibles, carte repliée comprise (retours du 06/10). */
.section-etapes-grille .carte:not(.est-ouverte) .carte__bouton {
	display: inline-flex;
}

/* Carte ouverte : grand titre, texte, étiquette et flèche (rouge au survol). */
.carte.est-ouverte .carte__texte {
	min-width: min(40vw, 604px);
	padding-right: 120px;
	--flou: 15px;
}

.carte.est-ouverte .carte__titre {
	color: var(--c-blanc);
	font-size: var(--t-h3);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.carte.est-ouverte .carte__description {
	margin-top: -6px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	line-height: 1.2;
}

.carte.est-ouverte .carte__bouton-fleche {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

a.carte.est-ouverte:hover .carte__bouton-fleche,
a.carte.est-ouverte:focus-visible .carte__bouton-fleche {
	/* Composant « Service card », état Hover : flèche sur fond rouge, filet blanc à 20 % conservé. */
	background: var(--c-rouge);
}

/* Changement d'état animé (une fois le script actif) : le texte réapparaît
   quand la carte a presque fini de s'élargir. */
.est-accordeon > .carte.est-ouverte .carte__texte {
	animation: carte-ouverture 520ms cubic-bezier(0.2, 0, 0, 1) both;
}

.est-accordeon > .carte:not(.est-ouverte) .carte__texte {
	animation: carte-fermeture 360ms ease both;
}

@keyframes carte-ouverture {
	0%,
	35% {
		opacity: 0;
		transform: translateY(12px);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes carte-fermeture {
	0%,
	25% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* — Détail : image à gauche (227 px), titre fléché et texte, fond blanc. */
.grille-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-inline: var(--retrait);
}

.grille-details--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.carte--detail {
	min-height: 219px;
	border: 1px solid rgba(0, 33, 64, 0.2);
	margin: 0 -1px -1px 0;
	background: var(--c-blanc);
	color: var(--c-marine);
}

.carte--detail .carte__visuel {
	position: relative;
	z-index: 0;
	flex: 0 0 227px;
	background: var(--c-gris-image);
}

/* Carte détail sans photo (étapes et atouts des pages Service, Rémy 03/11 :
   pas de visuel plutôt qu'un visuel qui ne correspond pas au texte). */
.carte--detail.carte--sans-visuel .carte__visuel {
	display: none;
}

.carte--detail .carte__image {
	position: absolute;
	inset: 0;
}

.carte--detail .carte__texte {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
	padding: 36px;
}

.carte--detail .carte__entete {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

.carte--detail .carte__titre {
	color: rgba(0, 33, 64, 0.9);
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

.carte--detail .carte__fleche {
	width: 12px;
	height: 12px;
	margin-top: 8px;
	color: rgba(0, 33, 64, 0.9);
	transition: transform var(--transition);
}

a.carte--detail:hover .carte__fleche {
	transform: translateX(4px);
}

/* Titre rogné (hauteur de capitale, 0,7 em) : la flèche est centrée sur les
   capitales de la première ligne (retours du 06/10, elle tombait 5 px trop
   bas et poussait le titre de 2 px par rapport aux cartes voisines). */
@supports (text-box: trim-both cap alphabetic) {
	.carte--detail .carte__fleche {
		margin-top: calc((0.7 * var(--t-chapo) - 12px) / 2);
	}
}

.carte--detail .carte__description {
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	line-height: 1.2;
}

/* Textes longs des cartes non cliquables (« Nos engagements », retours du
   06/10 : les blocs doublaient de hauteur) : quatre lignes, puis « Lire la
   suite » (app.js, initDescriptionsRepliables) qui déplie la carte. La classe
   n'est posée que si le texte dépasse ; sans script, tout reste affiché. */
.carte--detail .carte__description.est-repliable:not(.est-deplie) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
}

.carte__suite {
	align-self: flex-start;
	margin-top: -12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-marine);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	cursor: pointer;
}

.carte__suite:hover {
	text-decoration-color: var(--c-rouge);
}

/* 9. Cartes produit --------------------------------------------------------- */

.grille-produits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 10px;
}

.carte-produit {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.carte-produit__visuel {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 12px;
	aspect-ratio: 352.5 / 402.86;
	overflow: hidden;
	border-radius: var(--rayon);
	background: var(--c-creme);
}

.carte-produit__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
}

.carte-produit:hover .carte-produit__image {
	/* Annotation « hover : zoom-in » : 6 %, perceptible sans être brutal. */
	transform: scale(1.06);
}

.carte-produit__etiquette {
	position: relative;
}

.carte-produit__texte {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 36px;
}

.carte-produit__titre {
	color: var(--c-marine);
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

.carte-produit__titre a {
	text-decoration: none;
}

.carte-produit__titre a:hover {
	/* La maquette ne dessine pas de soulignement : le survol, c'est le zoom. */
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.carte-produit__description {
	display: -webkit-box;
	overflow: hidden;
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	line-height: 1.2;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Toute la carte est cliquable, le lien reste celui du titre (lecteurs d'écran). */
.lien-etendu::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lien-etendu:focus-visible {
	outline: none;
}

.lien-etendu:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
	border-radius: var(--rayon);
}

/* 10. Sections spécifiques -------------------------------------------------- */

/* — Hero d'accueil : 800 px, vidéo ou photo, dégradé bleu vers le bas. */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(800px, 100svh);
	padding-top: 89px;
	overflow: hidden;
	background: #e2e3e5;
	color: var(--c-blanc);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__image,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__video {
	opacity: 0;
	transition: opacity 600ms ease;
}

.hero__video.est-prete {
	opacity: 1;
}

/* Voile allégé à la demande de Rémy (06/10, relancé le 08/10 : « plus de
   transparence ») : bleu 30 % + noir 10 % (maquette : 50 % + 20 %). Le dégradé
   bleu du bas (.hero__contenu) garde le texte lisible. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 33, 64, 0.3), rgba(0, 33, 64, 0.3)), linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.hero__contenu {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 0 var(--gouttiere);
	background: linear-gradient(0deg, var(--c-marine) 0%, rgba(0, 33, 64, 0) 100%);
}

.hero__contenu > * {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
}

.hero__contenu > :not(.bandeau-defilant, .wp-block-list, .wp-block-gallery) {
	padding-inline: var(--retrait);
}

/* Bandeau défilant du hero (ou bandeau de logos) : d'un bord à l'autre de
   l'écran. Limité à 1 440 px, il laissait un vide à droite sur grand écran
   (capture de Rémy, 14/10, écran de 1 896 px). */
.hero__contenu > :is(.bandeau-defilant, .wp-block-list.is-style-bandeau, .wp-block-gallery.is-style-logos) {
	width: auto;
	max-width: none;
	margin-inline: calc(var(--gouttiere) * -1);
}

/* Annotation de la maquette « Possibilité de mettre des logos ? » : le bandeau du
   hero peut être remplacé par une galerie au style « Bandeau de logos ». */
.hero .wp-block-gallery.is-style-logos {
	height: 103px;
	margin-top: 0;
	margin-bottom: 0;
	padding-block: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero .wp-block-gallery.is-style-logos .wp-block-image img {
	height: 56px !important;
}

.hero h1,
.hero .wp-block-heading {
	max-width: calc(754px + 2 * var(--retrait));
	margin-inline: max(0px, calc((100% - var(--largeur)) / 2)) auto;
	color: var(--c-blanc);
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.hero .wp-block-buttons {
	margin-top: 0;
}

/* Chapô sous le titre (proposition de Damien, validée par Laura le 13/10). */
.hero .chapo {
	max-width: calc(640px + 2 * var(--retrait));
	margin-top: -16px;
	/* Même alignement que le titre (voir .hero h1). */
	margin-inline: max(0px, calc((100% - var(--largeur)) / 2)) auto;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--t-chapo);
	line-height: 1.3;
}

.hero__pause {
	position: absolute;
	top: 104px;
	right: var(--gouttiere);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-blanc);
	cursor: pointer;
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}

.hero__pause-icone {
	width: 10px;
	height: 12px;
	border-inline: 3px solid currentColor;
}

.hero__pause[aria-pressed="true"] .hero__pause-icone {
	width: 0;
	height: 0;
	border-width: 6px 0 6px 10px;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
}

/* — Bandeau de réassurance : capitales, filets verticaux, défilement doux. */
.wp-block-list.is-style-bandeau,
.bandeau-defilant {
	--bandeau-couleur: rgba(255, 255, 255, 0.8);
	position: relative;
	display: flex;
	gap: 40px;
	align-items: center;
	height: 103px;
	margin: 0;
	padding: 0 40px;
	overflow: hidden;
	list-style: none;
	color: var(--bandeau-couleur);
	/* 18 px à la largeur de la maquette (1512), 14 px sur téléphone :
	   l'ancien clamp n'atteignait 18 px que vers 2650 px de large. */
	font-size: clamp(14px, 12.61px + 0.357vw, 18px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	/* Fondu latéral de 8 %, comme le bandeau de logos (docs/annotations-maquettes.md). */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.wp-block-list.is-style-bandeau li {
	display: flex;
	flex: none;
	align-items: center;
	gap: 40px;
	height: 100%;
	margin: 0;
}

.wp-block-list.is-style-bandeau li::after {
	content: "";
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}

.has-marine-background-color.wp-block-list.is-style-bandeau,
.section-bandeau .wp-block-list.is-style-bandeau {
	--bandeau-couleur: rgba(255, 255, 255, 0.6);
}

/* Variante claire (composant « Trust bar ») : section bandeau sur fond crème, sable ou blanc. */
:is(.has-creme-background-color, .has-sable-background-color, .has-blanc-background-color).section-bandeau .wp-block-list.is-style-bandeau,
:is(.has-creme-background-color, .has-sable-background-color, .has-blanc-background-color).wp-block-list.is-style-bandeau {
	--bandeau-couleur: rgba(0, 33, 64, 0.65);
}

:is(.has-creme-background-color, .has-sable-background-color, .has-blanc-background-color) .wp-block-list.is-style-bandeau li::after,
.wp-block-list.is-style-bandeau:is(.has-creme-background-color, .has-sable-background-color, .has-blanc-background-color) li::after {
	background: rgba(0, 33, 64, 0.1);
}

.section-bandeau {
	padding: 0;
}

.section-bandeau:not(.has-background) {
	background: var(--c-marine);
}

.section-bandeau > * {
	max-width: none;
}

/* Défilement : app.js double les éléments et les fait glisser ensemble. */
.est-anime > * {
	animation: cartoffset-defilement var(--bandeau-duree, 40s) linear infinite;
}

.est-anime:hover > *,
.est-anime:focus-within > * {
	animation-play-state: paused;
}

@keyframes cartoffset-defilement {
	to {
		transform: translateX(var(--decalage, 0));
	}
}

/* — Section scindée 2fr / 5fr : image 6:7 et texte sur sable. */
.section-scindee {
	display: grid;
	grid-template-columns: 40fr 60fr;
	min-height: 708px;
	padding: 0;
}

.section-scindee > * {
	max-width: none;
	margin: 0;
}

.section-scindee__image {
	position: relative;
	min-height: 320px;
	background: #aeaeae;
}

.section-scindee__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-scindee__image figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* — Plan d'accès (bloc cartoffset/plan-acces) : plan fixe (OpenStreetMap
   assombri, ou image de la médiathèque) et, en bas sur un dégradé, le bouton
   « Ouvrir dans Google Maps ». Plus de carte Google intégrée (22/10). Dans une
   section scindée, il occupe la colonne de l'image. */
.plan-acces {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	background: #2b2f33;
}

.plan-acces:not(.section-scindee__image) {
	aspect-ratio: 16 / 9;
}

.plan-acces .plan-acces__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plan-acces__invite {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 40px 24px 48px;
	/* Dégradé de lisibilité ; .fond-sombre ne sert qu'aux variables. */
	background: linear-gradient(180deg, rgba(27, 30, 35, 0) 50%, rgba(27, 30, 35, 0.9) 100%);
	pointer-events: none;
}

.plan-acces__invite > * {
	pointer-events: auto;
}

/* Mention de la licence OpenStreetMap (ODbL), au-dessus du dégradé. */
.plan-acces__credit {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 3px 8px;
	background: rgba(27, 30, 35, 0.7);
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	line-height: 1.3;
}

.plan-acces__credit a {
	color: inherit;
}

.section-scindee__texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 76px clamp(24px, 7.94vw, 120px);
}

.section-scindee__texte > .contenu-texte {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 665px;
}

/* Le conteneur est en flex : l'écart vient du « gap ». Les marges de flux de
   .contenu-texte s'y ajoutaient (48 px entre le H2 et le paragraphe au lieu
   des 24 px de la maquette). */
.section-scindee__texte > .contenu-texte > * {
	margin-top: 0;
}

.section-scindee__texte h2 {
	color: var(--texte-fort);
	font-size: var(--t-h2);
	line-height: 1;
	letter-spacing: -0.03em;
}

.section-scindee__texte p {
	color: var(--texte);
	font-size: var(--t-chapo);
	line-height: 1.2;
}

/* — Témoignages : trois cartes (précédente sable, active blanche, suivante sable). */
.section-temoignages {
	padding: 36px clamp(16px, 5.03vw, 76px);
	overflow: hidden;
	background: var(--c-marine);
}

.section-temoignages > * {
	max-width: none;
}

.section-temoignages__fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.section-temoignages__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-temoignages__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(27, 30, 35, 0.5);
}

.section-temoignages > :not(.section-temoignages__fond) {
	position: relative;
	z-index: 1;
}

.section-temoignages .entete-section {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

.temoignages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	/* Idem frise : le balayage horizontal ne doit pas être repris par le
	   défilement de la page (le geste finissait en « pointercancel »). */
	touch-action: pan-y;
}

.temoignages__piste {
	display: flex;
	gap: 0;
	align-items: flex-start;
	justify-content: center;
	max-width: 100%;
}

.temoignage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;
	width: 273px;
	height: 342px;
	padding: 26px;
	background: var(--c-sable);
	color: rgba(0, 33, 64, 0.9);
	/* Le changement de témoignage s'enchaîne comme le reste du site (180 ms)
	   au lieu de sauter de 273 à 378 px d'un coup. */
	transition: width var(--transition), min-height var(--transition), padding var(--transition), opacity var(--transition), background-color var(--transition);
}

.temoignage.est-actif {
	width: 378px;
	height: auto;
	/* 473 px (maquette) ou la hauteur du plus long témoignage, mesurée par
	   app.js (--temoignage-hauteur) : la carte active garde la même hauteur
	   d'un témoignage à l'autre, la section et ses points ne sautent pas. */
	min-height: max(473px, var(--temoignage-hauteur, 0px));
	padding: 36px;
	background: var(--c-blanc);
}

/* Logo de l'entreprise en tête de carte (retours Cartoffset du 05/10), en
   masque : bleu marine quelle que soit la couleur du fichier. */
.temoignage__logo {
	flex: none;
	width: 100%;
	/* 104 px de haut (72 auparavant : logos hauts ou carrés, Grain de Sail,
	   Estime & Sens, SDA, « en tout petit », Rémy 03/11) ; les logos larges
	   restent bornés par la largeur. */
	max-width: 200px;
	height: var(--logo-hauteur, 104px);
	margin-bottom: auto;
	background: var(--c-marine);
	-webkit-mask: var(--logo) left center / contain no-repeat;
	mask: var(--logo) left center / contain no-repeat;
	opacity: 0.85;
}

.temoignage__auteur {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.temoignage__nom {
	font-size: 24px;
	line-height: 1.2;
}

.temoignage__fonction {
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.temoignage__fonction strong {
	font-weight: 700;
}

.temoignage__citation {
	display: none;
	flex-direction: column;
	gap: 24px;
}

.temoignage.est-actif .temoignage__citation {
	display: flex;
}

.temoignage__accroche {
	color: var(--c-marine);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.temoignage__texte {
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	line-height: 1.2;
}

.temoignage__texte > * + * {
	margin-top: 0.8em;
}

/* Sans JavaScript : liste défilante, toutes les citations visibles. */
.temoignages:not(.est-interactif) .temoignages__piste {
	justify-content: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.temoignages:not(.est-interactif) .temoignage {
	flex: none;
	width: 378px;
	height: auto;
	scroll-snap-align: center;
	background: var(--c-blanc);
}

.temoignages:not(.est-interactif) .temoignage__citation {
	display: flex;
}

/* Cartes hors champ : réduites et masquées (opacité + visibilité) plutôt que
   « display: none », pour que l'enchaînement reste animé. */
.temoignages.est-interactif .temoignage:not(.est-actif, .est-precedent, .est-suivant) {
	width: 0;
	height: 0;
	min-height: 0;
	padding-inline: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}

.temoignages.est-interactif .temoignage.est-precedent {
	order: 0;
}

.temoignages.est-interactif .temoignage.est-actif {
	order: 1;
	/* De 768 à 1023 px, les trois cartes (924 px) ne tiennent pas : seules les
	   voisines se resserrent, la carte active garde sa largeur de lecture. */
	flex-shrink: 0;
}

.temoignages.est-interactif .temoignage.est-suivant {
	order: 2;
}

.temoignages.est-interactif .temoignage:not(.est-actif) {
	cursor: pointer;
}

/* Mesure de la hauteur commune (app.js) : sans transition, pour lire la
   hauteur finale de chaque carte active. */
.temoignages.est-mesure *,
.temoignages.est-mesure *::before {
	transition: none;
}

.temoignages__points {
	display: flex;
	align-items: center;
}

/* Points et bouton pause. Sans JavaScript, ils ne servent à rien : masqués
   (attribut hidden). */
.temoignages__navigation {
	display: flex;
	gap: 8px;
	align-items: center;
}

.temoignages__navigation[hidden],
.temoignages__pause[hidden] {
	display: none;
}

/* Défilement automatique (app.js) : pause et relance, cible de 24 × 24 px. */
.temoignages__pause {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-blanc);
	opacity: 0.8;
	cursor: pointer;
	transition: opacity var(--transition);
}

.temoignages__pause:hover {
	opacity: 1;
}

.temoignages__pause-icone {
	width: 8px;
	height: 10px;
	border-inline: 2px solid currentColor;
}

.temoignages__pause.est-arrete .temoignages__pause-icone {
	width: 0;
	height: 0;
	border-width: 5px 0 5px 8px;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
}

/* Cible tactile de 24 × 24 px (WCAG 2.5.8) ; la pastille est dessinée au centre. */
.temoignages__point {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width var(--transition);
}

.temoignages__point::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--c-blanc);
	opacity: 0.6;
	transform: translate(-50%, -50%);
	transition: width var(--transition), opacity var(--transition);
}

.temoignages__point[aria-current="true"] {
	width: 34px;
}

.temoignages__point[aria-current="true"]::before {
	width: 26px;
	opacity: 1;
}

.marque-provisoire {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff3cd;
	color: #7a5b00;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* — Bandeau de logos clients (galerie, style « Bandeau de logos »). */
.wp-block-gallery.is-style-logos {
	display: flex;
	flex-wrap: nowrap;
	gap: 80px;
	align-items: center;
	justify-content: flex-start;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	/* 103 px de haut comme la maquette et comme la variante du hero
	   (logos de 71 px + 16 px de marge en haut et en bas). */
	padding: 16px 40px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.wp-block-gallery.is-style-logos .wp-block-image {
	flex: none;
	width: auto !important;
	margin: 0 !important;
}

/* Le cœur impose « max-width: 100% !important » aux images de galerie avec le
   sélecteur « .wp-block-gallery.has-nested-images figure.wp-block-image img »,
   plus spécifique que le nôtre : un logo très allongé (MJC, 13:1) s'étirait
   sur 926 px et laissait un trou dans la bande. On reprend le même niveau de
   spécificité, plus la classe de style. */
.wp-block-gallery.has-nested-images.is-style-logos figure.wp-block-image img {
	width: auto !important;
	height: 71px !important;
	max-width: 200px !important;
	object-fit: contain !important;
}

/* Grain de Sail n'existe qu'en couleur : passé en blanc comme les autres
   (Rémy, 04/11). Pas de filtre général : il change en aplat blanc les logos
   à fond ou à formes pleines. */
.wp-block-gallery.is-style-logos img[src*="logo-grain-de-sail"] {
	filter: brightness(0) invert(1);
}

/* — Section contact : titre centré, devis + téléphone. */
.section-contact {
	padding-block: var(--section-80);
	text-align: center;
}

.section-contact > * {
	max-width: var(--largeur-texte);
}

.section-contact .entete-section--centre {
	padding: 0;
	margin-bottom: 32px;
}

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

.mention {
	margin-top: 32px;
	color: var(--texte-discret);
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
}

/* — En-tête de page : blanc par défaut (« Page header basic »), bleu quand
   il surmonte une image (« Page header with image »). */
.entete-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 40px;
	padding: 120px var(--gouttiere) 40px;
	background: var(--c-blanc);
}

.entete-page.fond-sombre,
.entete-page.has-marine-background-color {
	background: var(--c-marine);
}

/* Q1 — la page 404 se réduisait à ~230 px suivis du pied : un peu de
   respiration pour qu'elle ne paraisse pas inachevée sur grand écran. */
.erreur-404 {
	justify-content: center;
	min-height: min(60svh, 520px);
	padding-block: clamp(120px, 12vh, 160px) clamp(64px, 8vh, 120px);
}

.entete-page > * {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--retrait);
}

.entete-page__texte {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.entete-page__texte > * {
	max-width: calc(50% - 12px);
}

.entete-page h1 {
	color: var(--texte-fort);
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* En-tête avec image (marchés, produits, services) : titre réservé sur deux
   lignes pour que les en-têtes aient la même hauteur d'une page à l'autre
   (annotation de la maquette). */
@media (min-width: 768px) {
	.entete-page:has(+ .image-parallaxe) h1 {
		min-height: 2.2em;
	}

	/* Avec les interlignes rognés, deux lignes de titre occupent 1,8em. */
	@supports (text-box: trim-both cap alphabetic) {
		.entete-page:has(+ .image-parallaxe) h1 {
			min-height: 1.8em;
		}
	}
}

.entete-page .chapo {
	color: var(--texte);
}

.entete-page .wp-block-buttons {
	margin-top: 16px;
}

.article__meta {
	gap: 10px;
	color: var(--texte);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.wp-block-breadcrumbs,
.fil-ariane {
	color: var(--texte-discret);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.wp-block-breadcrumbs ol,
.fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Séparateur « · » à égale distance des deux libellés (retours du 06/10) :
   le cœur met 0,5 em de part et d'autre et l'écart de la liste s'ajoutait à
   droite (8 px à gauche, 18 px à droite). */
.wp-block-breadcrumbs li:not(:last-child)::after {
	margin-inline: 10px;
}

.wp-block-breadcrumbs a,
.fil-ariane a {
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover,
.fil-ariane a:hover {
	color: var(--texte-fort);
	text-decoration: underline;
}

.wp-block-breadcrumbs [aria-current="page"],
.fil-ariane [aria-current="page"] {
	font-weight: 700;
}

/* Bannière sous l'en-tête, comme la référence Freight (retours du 06/10) :
   image haute (59,5 % de la largeur, au plus la hauteur de l'écran) qui
   dépasse du premier écran et se découvre au défilement, avec une légère
   translation. Elle était de 300 px : un packshot portrait n'en montrait
   que 17 %, d'où l'effet « zoomé ». */
.image-parallaxe {
	position: relative;
	height: clamp(320px, 59.5vw, 100svh);
	margin: 0;
	overflow: hidden;
	background: var(--c-gris-image);
	/* Repère de défilement nommé, posé sur la figure : avec « animation-timeline:
	   view() » posé sur l'image, c'est la figure (en « overflow: hidden ») qui
	   servait de conteneur de défilement le plus proche, la progression ne
	   changeait jamais et l'effet restait inerte. */
	view-timeline-name: --parallaxe;
}

.image-parallaxe img {
	position: absolute;
	inset: -15% 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
}

/* Photo d'article : bandeau très large, souvent des personnes (retours
   Cartoffset du 05/10) ; cadrage par défaut sur le tiers haut, où sont les
   visages. Le point de cadrage de l'image (médiathèque, inc/cadrage.php),
   posé en style en ligne, l'emporte. */
.article__image img {
	object-position: 50% 30%;
}

@supports (animation-timeline: view()) {
	.image-parallaxe img {
		animation: cartoffset-parallaxe linear both;
		animation-timeline: --parallaxe;
	}

	@keyframes cartoffset-parallaxe {
		from {
			transform: translateY(-10%);
		}

		to {
			transform: translateY(10%);
		}
	}
}

/* — Texte riche asymétrique (et FAQ) : grille 5 colonnes, 2 + 3. */
.texte-asymetrique {
	padding-block: var(--section-80);
}

.texte-asymetrique__grille {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	padding-inline: clamp(0px, 7.94vw, 120px);
}

.texte-asymetrique__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	grid-column: span 2;
	padding-right: 70px;
}

.texte-asymetrique__intro h2 {
	color: var(--texte-fort);
	font-size: var(--t-h2);
	line-height: 1;
	letter-spacing: -0.03em;
}

.texte-asymetrique__intro p {
	color: var(--texte);
	font-size: var(--t-chapo);
	line-height: 1.2;
}

.texte-asymetrique__corps {
	grid-column: span 3;
}

.texte-asymetrique__corps h3 {
	color: var(--texte-fort);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.texte-asymetrique__corps p {
	color: var(--texte-fort);
	font-size: 18px;
	line-height: 1.2;
}

.texte-asymetrique__corps h4 {
	display: list-item;
	margin-left: 27px;
	color: var(--texte-fort);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	list-style: disc;
}

.texte-asymetrique__corps h4 + p {
	margin-top: 12px;
	color: var(--texte);
	font-size: 16px;
	font-weight: 500;
}

.texte-asymetrique__corps > * + * {
	margin-top: 24px;
}

.texte-asymetrique__corps > p + h3,
.texte-asymetrique__corps > p + h4 {
	margin-top: 36px;
}

/* FAQ : bloc Accordéon du cœur, filets bleus, + / −. */
.wp-block-accordion {
	border-bottom: 1px solid var(--filet-fort);
}

.wp-block-accordion-item {
	border-top: 1px solid var(--filet-fort);
}

.wp-block-accordion-heading {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.wp-block-accordion-heading__toggle {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: none;
	color: var(--texte-fort);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: none;
	width: 21px;
	height: 21px;
	font-size: 0;
	color: transparent;
}

.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 21px;
	height: 1px;
	background: var(--icone-etat);
	transition: transform var(--transition);
}

.wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(90deg);
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after,
[aria-expanded="true"] > .wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(0deg);
}

.wp-block-accordion-panel {
	padding: 0 0 16px;
	color: rgba(0, 33, 64, 0.65);
	font-size: 16px;
	line-height: 1.35;
}

/* — Liens de spécialités : deux colonnes remplies l'une après l'autre (ordre de lecture). */
.liens-specialites {
	columns: 2;
	column-gap: 36px;
	margin: 0;
	padding: 0 var(--retrait);
	list-style: none;
}

.liens-specialites li {
	margin-top: -1px;
	border-top: 1px solid var(--filet-fort);
	border-bottom: 1px solid var(--filet-fort);
	break-inside: avoid;
}

.liens-specialites li:first-child {
	margin-top: 0;
}

.liens-specialites a {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 16px 0;
	color: var(--texte-fort);
	font-size: var(--t-chapo);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), padding var(--transition);
}

.liens-specialites a::after {
	content: "";
	width: 12px;
	height: 12px;
	margin-top: 5px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../images/icones/fleche.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche.svg") center / contain no-repeat;
}

/* Maquette 1:6222 : texte blanc franc sur la barre bleue (et non 60 %). */
.liens-specialites a:hover,
.liens-specialites a:focus-visible {
	padding-inline: 10px;
	background: var(--c-marine);
	color: var(--c-blanc);
}

/* Sur fond sombre ou coloré, le survol passe en blanc. */
:is(.has-marine-background-color, .has-bordeaux-background-color, .has-encre-background-color, .has-rouge-background-color, .has-rouge-sombre-background-color, .has-rouge-fonce-background-color, .has-vert-background-color, .has-marche-cosmetique-background-color, .has-marche-industrie-background-color, .is-style-texte-blanc, .fond-sombre) .liens-specialites a:is(:hover, :focus-visible) {
	background: var(--c-blanc);
	color: var(--c-marine);
}

/* 11. Formulaire de devis ---------------------------------------------------- */

.section-devis {
	padding-block: var(--section-80);
}

.section-devis > * {
	max-width: var(--largeur-texte);
}

.section-devis .entete-section {
	padding: 0;
	margin-bottom: 32px;
}

.formulaire-devis {
	--champ-fond: rgba(255, 255, 255, 0.1);
	--champ-bord: rgba(255, 255, 255, 0.2);
	color: var(--c-blanc);
}

.formulaire-devis__formulaire {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.formulaire-devis__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.formulaire-devis [hidden] {
	display: none !important;
}

/* Version progressive : bouton « Préciser mon projet », champs qui apparaissent en fondu. */
.formulaire-devis__details {
	align-self: flex-start;
}

.formulaire-devis .est-devoile {
	animation: champ-apparition 400ms ease both;
}

@keyframes champ-apparition {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.formulaire-devis__obligatoire {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.5;
}

.champ {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.champ--large {
	grid-column: 1 / -1;
}

.champ__libelle {
	padding: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 1.5;
}

.champ__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

/* Le <legend> du groupe « Nom complet » n'est pas un élément de flex : l'écart
   de 10 px de .champ ne s'y appliquait pas et les champs Nom / Prénom
   remontaient de 10 px par rapport à « Entreprise / Fonction ». */
.champ--groupe > .champ__duo {
	margin-top: 10px;
}

.champ__saisie {
	width: 100%;
	min-height: 54px;
	padding: 12px 12px 12px 16px;
	border: 2px solid var(--champ-bord);
	border-radius: var(--rayon);
	background: var(--champ-fond);
	color: var(--c-blanc);
	font-size: 18px;
	line-height: 1.2;
	transition: border-color var(--transition), background-color var(--transition);
}

.champ__saisie::placeholder {
	color: rgba(255, 255, 255, 0.65);
	opacity: 1;
}

.champ__saisie:hover {
	border-color: rgba(255, 255, 255, 0.35);
}

.champ__saisie:focus-visible {
	outline: 2px solid var(--c-blanc);
	outline-offset: 2px;
	border-color: rgba(255, 255, 255, 0.65);
}

.champ__saisie[aria-invalid="true"] {
	border-color: #ff8a95;
}

.champ__saisie--texte {
	min-height: 130px;
	resize: vertical;
}

.champ__liste {
	position: relative;
}

.champ__liste select {
	appearance: none;
	padding-right: 44px;
	cursor: pointer;
}

.champ__liste select option {
	color: var(--c-marine);
}

.champ__chevron {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	color: var(--c-blanc);
	pointer-events: none;
	transform: translateY(-50%);
}

.champ__erreur {
	color: #ffb3ba;
	font-size: 14px;
	line-height: 1.4;
}

/* Précisions techniques : volet replié natif, barre calquée sur le champ
   à choix multiples ; la grille intérieure suit celle du formulaire. */
.formulaire-devis__precisions-resume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
	cursor: pointer;
}

.formulaire-devis__precisions-resume::-webkit-details-marker {
	display: none;
}

.formulaire-devis__precisions-resume .champ__chevron {
	position: static;
	flex: none;
	transform: none;
	transition: transform var(--transition);
}

.formulaire-devis__precisions[open] .champ__chevron {
	transform: rotate(180deg);
}

.formulaire-devis__precisions-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 6px;
}

/* Choix multiple : puces « Offset × » dans le champ, options en panneau. */
.champ-multiple {
	position: relative;
}

.champ-multiple__resume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
	cursor: pointer;
}

.champ-multiple__resume::-webkit-details-marker {
	display: none;
}

.champ-multiple__resume .champ__chevron {
	position: static;
	transform: none;
	transition: transform var(--transition);
}

.champ-multiple[open] .champ__chevron {
	transform: rotate(180deg);
}

.champ-multiple__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.champ-multiple__vide {
	color: rgba(255, 255, 255, 0.65);
}

.champ-multiple__puce {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 10px;
	border-radius: var(--rayon);
	background: var(--c-creme);
	color: var(--c-marine);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Le dessin reste à 12 px ; la zone cliquable fait 24 × 24 px (WCAG 2.5.8),
   comme les pastilles du carrousel de témoignages. */
.champ-multiple__retirer {
	width: 24px;
	height: 24px;
	margin: -6px -8px -6px -6px;
	background: currentColor;
	opacity: 0.5;
	cursor: pointer;
	-webkit-mask: url("../images/icones/croix.svg") center / 10px no-repeat;
	mask: url("../images/icones/croix.svg") center / 10px no-repeat;
	transition: opacity var(--transition);
}

.champ-multiple__retirer:hover {
	opacity: 1;
}

.champ-multiple__options {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 16px;
	margin: 0;
	padding: 16px;
	border: 2px solid var(--champ-bord);
	border-radius: var(--rayon);
	background: #0d2c4a;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.champ-multiple__option {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 36px;
	font-size: 16px;
	cursor: pointer;
}

.champ-multiple__option input {
	width: 18px;
	height: 18px;
	accent-color: var(--c-rouge);
}

/* Dépôt de fichiers : zone en pointillés. */
.depot {
	position: relative;
}

.depot__entree {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.depot__zone {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
	min-height: 66px;
	padding: 10px 16px;
	border: 2px dashed var(--champ-bord);
	border-radius: var(--rayon);
	background: var(--champ-fond);
	color: var(--c-blanc);
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}

.depot__zone:hover,
.depot.est-survole .depot__zone {
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.15);
}

.depot__entree:focus-visible + .depot__zone {
	outline: 2px solid var(--c-blanc);
	outline-offset: 2px;
}

.depot__aide {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
}

.depot__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.depot__liste li {
	padding: 6px 10px;
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, 0.1);
	font-size: 14px;
}

.formulaire-devis__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Pendant l'envoi : bouton inactif, libellé « Envoi… » (posé par le script).
   Rouge assombri (celui du survol) plutôt qu'une opacité de 60 %, qui laissait
   le libellé à 3,9:1 sur le fond bleu : blanc sur #B80015, 6,9:1. Le survol
   ne le change plus. */
.formulaire-devis__envoi .bouton[disabled] {
	border-color: var(--c-rouge-survol);
	background: var(--c-rouge-survol);
	color: var(--c-blanc);
	cursor: progress;
}

.formulaire-devis__envoi {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-top: 8px;
}

.formulaire-devis__mention {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
}

.formulaire-devis__mention a {
	color: rgba(255, 255, 255, 0.7);
}

.formulaire-devis__erreurs,
.formulaire-devis__confirmation {
	padding: 20px 24px;
	border-left: 4px solid var(--c-rouge);
	background: rgba(255, 255, 255, 0.08);
	font-size: 16px;
	line-height: 1.4;
}

.formulaire-devis__erreurs ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.formulaire-devis__confirmation {
	border-left-color: #4caf7d;
}

.formulaire-devis__confirmation-titre {
	margin-bottom: 4px;
	font-size: var(--t-chapo);
}

/* 12. En-tête et méga-menu ---------------------------------------------------- */

/* L'en-tête se superpose au haut de page (hero, en-tête bleu). */
.wp-site-blocks > .wp-block-template-part:first-child,
.entete-conteneur {
	position: relative;
	z-index: 100;
	height: 0;
}

.entete {
	--logo-mot: var(--c-blanc);
	--logo-gris: #e3e3e3;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 10px;
	pointer-events: none;
}

.entete > * {
	pointer-events: auto;
}

body.admin-bar .entete {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.entete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color var(--transition);
}

.entete__logo {
	display: flex;
	align-items: center;
	padding-left: 22px;
	color: var(--logo-mot);
	text-decoration: none;
}

.logo {
	display: block;
	width: 224px;
	height: auto;
}

.logo .logo__rouge {
	fill: var(--c-rouge);
}

.logo .logo__gris {
	fill: var(--logo-gris);
}

.logo .logo__mot {
	fill: var(--logo-mot);
	transition: fill var(--transition);
}

.entete__nav {
	display: flex;
	gap: 36px;
	align-items: center;
	/* Bloc blanc affiné (Rémy, 14/10 : moins de cadre blanc autour du bouton
	   bleu) : 3 px autour du bouton au lieu de 6, bouton de 49 px au lieu de 57. */
	padding: 3px 3px 3px 28px;
	background: var(--c-blanc);
}

.entete__menu {
	display: flex;
	gap: 36px;
	align-items: stretch;
	align-self: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entete__entree {
	display: flex;
	align-items: stretch;
}

.entete__lien {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -6px;
	background: none;
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}

.entete__lien:hover,
.est-courant > .entete__lien,
.entete__lien[aria-current="page"] {
	color: var(--c-marine);
}

.entete__lien[aria-expanded="true"] {
	border-bottom-color: var(--c-rouge);
	color: var(--c-marine);
}

/* « Button nav » de la feuille Figma : bleu, rouge au survol (variables du § 1),
   filet blanc à 10 % comme dans Figma. */
.entete__devis {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--bouton-nav-fond);
	color: var(--c-blanc);
	font-size: 16px;
	font-weight: 600;
	/* Même interligne que les autres boutons ; barre de 55 px depuis le 19/10 (89 dans la maquette 1:2247). */
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition);
}

.entete__devis:hover {
	background: var(--bouton-nav-survol-fond);
}

.entete__burger,
.entete__devis--mobile {
	display: none;
}

/* Panneau ouvert sous 1 100 px : rien de particulier (la barre y est toujours
   blanche). Le nom du logo passe en noir sur fond clair (est-sur-clair, posé
   par app.js d'après ce qui se trouve sous le logo). */
.entete.est-sur-clair {
	--logo-mot: #000;
}

/* Barre au défilement. Trois états posés par app.js (initEntete), à toutes les
   largeurs (sous 1 100 px : voir le bloc @media plus bas) :
   - haut de page : seul le bloc du menu est blanc ; le logo est posé sur le
     fond de la page, son nom blanc sur fond sombre, noir sur fond clair
     (est-sur-clair) ;
   - défilement vers le bas (est-reduite) : logo et menu s'effacent, seul le
     bouton « Demander un devis » reste, avec un filet blanc fin qui le
     détache des fonds bleus (retours Cartoffset du 05/10 : le cadre blanc de
     6 px faisait lourd) ;
   - défilement vers le haut (est-remontee) : logo et menu reviennent, comme
     en haut de page.
   Pas de barre blanche sur toute la largeur, ni au défilement ni panneau
   ouvert (retours Cartoffset du 05/10) : à gauche, le logo reste sur le fond
   du site ; sur une photo, app.js lit la clarté des pixels sous le logo et
   choisit le nom noir ou blanc (21/10 : plus de cartouche blanc) ; le
   cartouche (est-sur-image) ne reste que si la photo est illisible (image de
   fond CSS, image pas encore chargée). Pas de voile ni d'ombre
   (retours de Laura du 22/09, points 1 et 10). Un panneau ouvert ou le focus
   clavier dans l'en-tête gardent la barre entière. Transitions en opacité et
   translation ; « réduire les animations » les coupe (règle générale). Le menu
   ne se translate pas : une transformation ferait de lui le bloc conteneur du
   panneau (.mega, en position absolue sur l'en-tête). */
@media (min-width: 1100px) {
	.entete__logo {
		align-self: stretch;
		padding-right: 22px;
		background-color: transparent;
		transition: opacity 300ms ease, transform 300ms ease, visibility 300ms, background-color 300ms ease;
	}

	.entete.est-sur-image {
		--logo-mot: #000;
	}

	.entete.est-sur-image .entete__logo {
		background-color: var(--c-blanc);
	}

	.entete__menu {
		transition: opacity 300ms ease, visibility 300ms;
	}

	.entete__nav {
		transition: background-color 300ms ease;
	}

	.entete__devis {
		transition: background-color var(--transition), border-color 300ms ease;
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) .entete__logo {
		visibility: hidden;
		opacity: 0;
		transform: translateY(-16px);
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) .entete__menu {
		visibility: hidden;
		opacity: 0;
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) .entete__nav {
		background-color: transparent;
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) .entete__devis {
		border-color: var(--c-blanc);
	}

	/* Seuls le logo et le bloc du menu reçoivent les clics : l'espace entre
	   les deux laisse passer vers le contenu. */
	.entete__barre {
		pointer-events: none;
	}

	.entete__logo,
	.entete__nav {
		pointer-events: auto;
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) :is(.entete__logo, .entete__nav) {
		pointer-events: none;
	}

	.entete.est-reduite:not(.est-ouvert, :has(:focus-visible)) .entete__devis {
		pointer-events: auto;
	}

	/* Panneau ouvert : il prolonge le bloc blanc du menu (plus d'intervalle
	   de 10 px, qui était comblé par la barre pleine largeur), un filet les
	   sépare. */
	.entete.est-ouvert .mega {
		top: calc(100% - 10px);
		border-top: 1px solid rgba(0, 33, 64, 0.1);
	}
}

/* Panneau du méga-menu. Jamais plus haut que la fenêtre : sur un petit écran
   (portable 1 366 × 768 et barre du navigateur), le bas reste atteignable. */
.mega {
	position: absolute;
	top: 100%;
	left: 10px;
	right: 10px;
	max-height: calc(100vh - 75px - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	padding: 32px 32px 40px;
	background: var(--c-blanc);
	box-shadow: 0 24px 48px rgba(0, 33, 64, 0.08);
}

.mega[hidden] {
	display: none;
}

.mega__contenu {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	max-width: 1472px;
	margin-inline: auto;
}

/* Colonnes à leur largeur (325,5 px, maquette), cartes dans la place restante. */
.mega__colonnes {
	display: flex;
	flex: none;
	gap: 24px;
	min-width: 0;
}

.mega__colonne {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 325.5px;
	max-width: 100%;
}

.mega__titre {
	padding-bottom: 6px;
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mega__tout {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	align-self: flex-start;
	color: rgba(0, 33, 64, 0.9);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform var(--transition);
}

/* Survol : pas de soulignement, le lien glisse un peu vers la droite et la
   flèche un peu plus (retours de Laura du 06/10). */
.mega__tout .icone {
	transition: transform var(--transition);
}

.mega__tout:is(:hover, :focus-visible) {
	transform: translateX(4px);
}

.mega__tout:is(:hover, :focus-visible) .icone {
	transform: translateX(4px);
}

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

.mega__liens a {
	display: inline-flex;
	gap: 4px;
	align-items: flex-end;
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
	transition: color var(--transition);
}

.mega__liens a:hover,
.mega__liens a[aria-current="page"] {
	color: var(--c-marine);
}

.mega__note {
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	line-height: 1.5;
}

.mega__liens > [hidden] {
	display: none;
}

/* Bouton « Voir tous nos emballages » (liens repliés, classe « plus » du menu). */
.mega__deplier {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(0, 33, 64, 0.65);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color var(--transition);
}

.mega__deplier[hidden] {
	display: none;
}

.mega__deplier:hover {
	color: var(--c-marine);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__deplier-icone {
	width: 12px;
	height: 12px;
}

.mega__deplier[aria-expanded="true"] .icone-plus__vertical {
	display: none;
}

/* Liste dépliée : une seule colonne (le panneau gagne ~13 px, rien d'autre ne
   bouge). Fenêtre basse (portable 1 366 × 768, ~660 px utiles sous la barre du
   navigateur) : deux sous-colonnes (--lignes posé par inc/navigation.php), la
   colonne s'élargit, les cartes se resserrent et le panneau tient en hauteur. */
@media (max-height: 800px) {
	.mega__colonne.est-deplie {
		width: auto;
		margin-right: 24px;
	}

	.mega__colonne.est-deplie .mega__liens {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--lignes, 8), auto);
		gap: 10px 32px;
	}
}

/* Même cas sous 1 366 px de large : une seule carte, plutôt que deux cartes de
   190 px au titre sur trois lignes. */
@media (max-height: 800px) and (max-width: 1365px) {
	.mega__colonnes:has(> .est-deplie) + .mega__cartes .carte-produit--menu:nth-child(n + 2) {
		display: none;
	}
}

/* Deux ou trois cartes : 352,5 px au plus (maquette), réduites ensemble pour
   tenir à côté des colonnes (3 × 343 px à 1 512 px, 3 × 295 px à 1 366 px). */
.mega__cartes {
	display: flex;
	flex: 1 1 0;
	gap: 24px;
	justify-content: flex-end;
	min-width: 0;
}

.carte-produit--menu {
	flex: 0 1 352.5px;
	min-width: 0;
	gap: 10px;
}

/* Fenêtre basse : l'image se recadre plutôt que de pousser le panneau hors de
   l'écran (sans effet dès 765 px de haut : 403 px, hauteur de la maquette). */
.carte-produit--menu .carte-produit__visuel {
	max-height: calc(100vh - 360px);
}

/* Le texte occupe la hauteur libre : les boutons des cartes restent alignés
   quand les descriptions n'ont pas la même longueur. */
.carte-produit--menu .carte-produit__texte {
	flex-grow: 1;
	gap: 10px;
}

/* « Découvrir » : bouton tertiaire du fond clair (bleu 10 %, texte bleu ; bleu
   plein au survol), et non le gris #1B1E23 à 10 % de la maquette du menu. */
.carte-produit--menu .carte-produit__lien {
	position: static;
	align-self: flex-start;
	margin-top: 8px;
}

.carte-produit--menu .carte-produit__lien::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Menu mobile (référence de comportement : freight.framer.website/about). */
.menu-mobile {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow-y: auto;
	padding: 96px var(--gouttiere) 40px;
	background: var(--c-blanc);
	color: var(--c-marine);
	overscroll-behavior: contain;
}

.menu-mobile[hidden] {
	display: none;
}

.menu-mobile__contenu {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 640px;
}

.menu-mobile__rubrique {
	margin-top: 16px;
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.menu-mobile__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-mobile__lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--c-marine);
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.menu-mobile__lien .icone {
	transition: transform var(--transition);
}

.menu-mobile__lien[aria-expanded="true"] .icone-plus__vertical {
	display: none;
}

.menu-mobile__sous-menu {
	padding: 8px 0 16px;
}

.menu-mobile__sous-menu ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.menu-mobile__sous-menu a {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 6px 0;
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	text-decoration: none;
}

.menu-mobile__sous-menu .menu-mobile__tout {
	color: rgba(0, 33, 64, 0.9);
	font-weight: 600;
	font-size: 16px;
}

.menu-mobile__titre {
	margin: 8px 0 4px;
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.menu-mobile__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.menu-mobile__reseau {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--c-linkedin);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

body.menu-mobile-ouvert {
	overflow: hidden;
}

/* 13. Pied de page --------------------------------------------------------------- */

.pied {
	padding: 80px var(--gouttiere) 40px;
	border-top: 1px solid var(--c-gris-image);
	background: var(--c-blanc);
	color: rgba(0, 33, 64, 0.65);
}

/* Pas de filet quand le pied suit une section colorée ou à image (retours du
   06/10) : il ne sépare plus que d'un contenu blanc (pages de texte, listes
   d'articles, 404). */
.wp-site-blocks:has(> main > :last-child:is(.has-background, .section--sans-marge), > main > .wp-block-post-content:last-child > :last-child:is(.has-background, .section--sans-marge)) .pied {
	border-top-color: transparent;
}

.pied__grille {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
	max-width: var(--largeur);
	margin-inline: auto;
}

.pied__logo img {
	display: block;
	width: 186px;
	height: auto;
}

.pied__coordonnees {
	display: flex;
	flex-direction: column;
	gap: 36px;
	font-size: 16px;
	line-height: 1.35;
}

.pied__coordonnees > div {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pied__nom {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pied__siret {
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	line-height: 1.5;
}

.pied__carte {
	padding-right: 24px;
}

.pied__carte img {
	display: block;
	width: 137px;
	height: 137px;
}

.pied__presentation-bloc {
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	gap: 32px;
}

/* Logos de certification sous la présentation, au niveau de LinkedIn
   (retours Cartoffset du 22/10) : les deux colonnes s'étirent sur la hauteur
   de la rangée, les deux rangées sont poussées en bas. */
.pied__presentation-bloc .pied__certifications {
	max-width: none;
	margin: auto 0 0;
}

.pied__presentation-bloc .certifications {
	gap: 16px 20px;
	padding: 0;
}

/* Logos de 60 à 76 px : sur une ligne en grand écran, à la ligne plutôt
   qu'illisibles sur un écran moyen. */
.pied__presentation-bloc .certifications li {
	flex: 1 1 60px;
	max-width: 76px;
}

.pied__presentation-bloc .certifications li:not(.certifications__logo) {
	flex-basis: auto;
	max-width: none;
	font-size: 10px;
	white-space: nowrap;
}

.pied__presentation-bloc .certification {
	width: 100%;
	height: 40px;
}

/* Logo en longueur (Réseau Entreprendre, 4:1), plein et coloré : un peu plus
   bas que les autres pour garder le même poids visuel. */
.pied__presentation-bloc .certifications li.certifications__logo--large {
	flex-basis: 120px;
	max-width: 120px;
}

.pied__presentation-bloc .certifications__logo--large .certification {
	height: 30px;
}

/* « ISO 9001 » sous le logo Polycert, dans la police du site (pied de page
   seulement : la version claire de la bande Entreprise le porte déjà). */
.certification__legende {
	display: none;
}

.pied .certification__legende {
	display: block;
	margin-top: 4px;
	color: var(--c-marine);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: center;
	white-space: nowrap;
}

.pied__linkedin {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin-top: auto;
}



.pied__presentation {
	max-width: 374px;
	color: rgba(0, 33, 64, 0.9);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
}

.pied__liens {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.liste-liens {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pas de 32 px comme la maquette (les liens faisaient 45,6 px d'écart, soit
   +62 px sur la hauteur du pied) : cible tactile de 24 px + 8 px d'écart. */
.liste-liens--pied-ressources {
	gap: 8px;
}

.liste-liens--pied-ressources a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.liste-liens--pied-ressources a:hover,
.liste-liens--pied-ressources a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--c-rouge);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

.pied__reseau {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 24px;
	color: var(--c-linkedin);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.pied__certifications {
	max-width: var(--largeur);
	margin: 56px auto 0;
}

/* Pied de page blanc : logos en couleur. Imprim'Vert et Polycert n'existent
   qu'en blanc (dossier d'Eliott) : affichés en noir plein en attendant leurs
   versions couleur. */
.pied .certification[data-assombrir] {
	opacity: 1;
}

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	max-width: var(--largeur);
	margin: 80px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--c-gris-image);
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	line-height: 1.4;
}

.liste-liens--pied-legal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.liste-liens--pied-legal li + li::before {
	content: "·";
	margin-right: 10px;
}

.liste-liens--pied-legal a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	text-decoration: none;
}

.liste-liens--pied-legal a:hover {
	text-decoration: underline;
}

/* 14. Bandeau cookies, divers ------------------------------------------------------- */

.bandeau-cookies {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
	max-width: 760px;
	margin-inline: auto;
	padding: 20px 24px;
	background: var(--c-marine);
	color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	/* Boutons : variables du fond foncé (§ 5), survol rouge comme la feuille. */
}

.bandeau-cookies[hidden] {
	display: none;
}

.bandeau-cookies__texte {
	flex: 1 1 320px;
	font-size: 16px;
	line-height: 1.4;
}

.bandeau-cookies__actions {
	display: flex;
	gap: 10px;
}

/* Réduction des animations : rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.est-anime > * {
		animation: none !important;
		transform: none !important;
	}

	.image-parallaxe img {
		animation: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Adaptations tablette et mobile
   Aucune maquette mobile n'a été fournie : ces choix sont des déclinaisons
   de la maquette 1512 px, à valider par Laura (voir docs/suivi-provisoire.md).
   ========================================================================== */

@media (max-width: 1279px) {
	.entete__menu,
	.entete__nav {
		gap: 24px;
	}

	.logo {
		width: 190px;
	}

	.carte--marche .carte__texte {
		padding: 32px 48px 32px 32px;
	}

	.carte--service .carte__texte,
	.carte--service-large .carte__texte {
		padding: 28px;
	}

	.carte.est-ouverte .carte__texte {
		padding-right: 48px;
	}

	/* Méga-menu de 1 100 à 1 279 px : deux cartes à côté d'une colonne, une
	   seule à côté de deux (Nos produits). */
	.mega__cartes .carte-produit--menu:nth-child(n + 3),
	.mega__colonnes:has(> :nth-child(2)) + .mega__cartes .carte-produit--menu:nth-child(n + 2) {
		display: none;
	}
}

/* Barre de navigation compacte sous 1100 px : logo, menu, devis. */
@media (max-width: 1099px) {
	.entete {
		padding: 0;
	}

	.entete__barre {
		gap: 12px;
		min-height: 64px;
		padding: 0 var(--gouttiere);
		border-bottom: 1px solid rgba(0, 33, 64, 0.1);
		background: var(--c-blanc);
	}

	.entete {
		--logo-mot: #000;
	}

	.entete__logo {
		padding-left: 0;
	}

	.logo {
		width: 168px;
	}

	.entete__nav {
		display: none;
	}

	.entete__burger {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0;
		border: 0;
		background: none;
		color: var(--c-marine);
		cursor: pointer;
	}

	.entete__burger-traits,
	.entete__burger-traits::before {
		display: block;
		width: 28px;
		height: 2px;
		background: currentColor;
		transition: transform var(--transition);
	}

	.entete__burger-traits {
		position: relative;
		transform: translateY(-4px);
	}

	.entete__burger-traits::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 0;
	}

	.entete__burger[aria-expanded="true"] .entete__burger-traits {
		transform: translateY(0) rotate(45deg);
	}

	.entete__burger[aria-expanded="true"] .entete__burger-traits::before {
		transform: translateY(-8px) rotate(-90deg);
	}

	.entete__devis--mobile {
		display: inline-flex;
		padding: 14px 16px;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	/* Barre au défilement, sous 1 100 px aussi (retour de Tommy du 23/09 : le
	   point 1 de Laura vaut pour toutes les largeurs ; transparente en haut de
	   page depuis le 14/10, voir plus bas) : en descendant, la barre
	   blanche, le logo et le bouton ☰ s'effacent, seul « Devis » reste dans son
	   filet blanc fin ; en remontant, la barre blanche complète revient. Le menu
	   mobile ouvert et le focus clavier dans l'en-tête gardent la barre entière. */
	.entete__barre {
		transition: background-color 300ms ease, border-color 300ms ease;
	}

	.entete__logo,
	.entete__burger {
		transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
	}

	.entete__devis--mobile {
		transition: background-color var(--transition), border-color 300ms ease;
	}

	.entete.est-reduite:not(.est-ouvert-mobile, :has(:focus-visible)) .entete__barre {
		border-bottom-color: transparent;
		background: transparent;
		pointer-events: none;
	}

	.entete.est-reduite:not(.est-ouvert-mobile, :has(:focus-visible)) .entete__devis--mobile {
		border-color: var(--c-blanc);
		pointer-events: auto;
	}

	.entete.est-reduite:not(.est-ouvert-mobile, :has(:focus-visible)) .entete__logo,
	.entete.est-reduite:not(.est-ouvert-mobile, :has(:focus-visible)) .entete__burger {
		visibility: hidden;
		opacity: 0;
		transform: translateY(-16px);
	}

	/* Haut de page, sous 1 100 px aussi : barre transparente, comme sur
	   ordinateur (Rémy, 14/10). Nom du logo et ☰ en blanc sur fond sombre,
	   en foncé sur fond clair (est-sur-clair, app.js). La barre blanche
	   revient en remontant, menu ouvert, au focus clavier, et sur une photo
	   dont la luminance ne se devine pas (est-sur-image). */
	.entete:not(.est-reduite, .est-remontee, .est-ouvert-mobile, .est-sur-image, :has(:focus-visible)) .entete__barre {
		border-bottom-color: transparent;
		background: transparent;
	}

	.entete:not(.est-reduite, .est-remontee, .est-ouvert-mobile, .est-sur-image, .est-sur-clair, :has(:focus-visible)) {
		--logo-mot: var(--c-blanc);
	}

	.entete:not(.est-reduite, .est-remontee, .est-ouvert-mobile, .est-sur-image, .est-sur-clair, :has(:focus-visible)) .entete__burger {
		color: var(--c-blanc);
	}

	.hero {
		padding-top: 64px;
	}

	.entete-page {
		padding-top: 104px;
	}

	.hero__pause {
		top: 80px;
	}
}

@media (max-width: 1023px) {
	/* Les grilles de trois cartes marché gardent leurs trois colonnes sur
	   tablette (Laura, 22/09, point 11) ; une seule colonne sur téléphone. */
	.grille-cartes .carte--marche {
		aspect-ratio: 5 / 6;
	}

	.carte--service .carte__texte,
	.carte--service-large .carte__texte {
		gap: 10px;
		padding: 20px;
	}

	.carte--service .carte__titre,
	.carte--service-large .carte__titre {
		font-size: 16px;
	}

	.carte.est-ouverte .carte__texte {
		min-width: 0;
		padding-right: 24px;
	}

	.carte.est-ouverte .carte__description {
		font-size: 16px;
	}

	.texte-asymetrique__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.texte-asymetrique__intro,
	.texte-asymetrique__corps {
		grid-column: auto;
		padding-right: 0;
	}

	/* T2 — le retrait de 7,94vw décalait la section de 31 px (390) à 61 px (768)
	   par rapport aux sections voisines : sur une colonne, il n'a plus d'objet. */
	.texte-asymetrique__grille {
		padding-inline: 0;
	}

	/* T4 / R1 / E4 — empilées, les cartes détail lisaient comme un seul bloc
	   blanc : on les espace (la bordure visible est rendue plus bas, avec les
	   variantes de fond sombre). */
	.grille-details,
	.grille-details--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* M1 / N4 — la bannière tombait à 180 px (bande de 2,2:1) : format généreux
	   (référence freight), compatible avec la parallaxe (hauteur définie). */
	.image-parallaxe {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* M2 / R3 — 4 produits dans 3 colonnes laissaient une carte orpheline. */
	.grille-produits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-scindee {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* Avec un ratio, l'élément de grille n'est plus étiré : sous 384 px, la
	   hauteur mini de 320 px imposait 384 px de large (débordement à 320/360). */
	.section-scindee__image {
		width: 100%;
		min-height: 0;
		aspect-ratio: 6 / 5;
	}

	/* Plan d'accès : carré, pour que le repère du site reste au-dessus du
	   bouton « Afficher la carte ». */
	.plan-acces.section-scindee__image {
		aspect-ratio: 1;
	}

	.plan-acces__invite {
		gap: 12px;
		padding-bottom: 28px;
	}

	.pied__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 48px;
	}

	.pied__presentation-bloc {
		grid-column: span 2;
	}

	.entete-page__texte > * {
		max-width: 100%;
	}
}

/* Tablette : aucune tablette tactile n'a de survol, et l'accordéon des rangées
   de cartes ne démarre qu'à 1024 px (assets/js/app.js). Les compositions qui
   reposent sur le survol se réorganisent donc ici. */
@media (min-width: 768px) and (max-width: 1023px) {
	/* A1 — les trois marchés de l'accueil restent sur trois colonnes (Laura,
	   22/09, point 11 ; 256 × 307 px à 768 px). Cartouche et titre réduits
	   pour tenir dans la carte : « Santé et Bien-être » sur une ligne, titre
	   de 22 px à 768 px, 26 px à partir de 910 px (32 px sur ordinateur). Les
	   rangées de cartes services : voir « Cartes de services sous 1 024 px ». */
	.grille-cartes:not(.grille-cartes--2) .carte--marche .carte__texte {
		padding: 20px 24px 20px 20px;
	}

	.grille-cartes:not(.grille-cartes--2) .carte--marche .carte__titre {
		padding: 8px 10px 10px;
		font-size: clamp(22px, 2.86vw, 26px);
	}
}

@media (max-width: 767px) {
	/* T1 — le retrait de 2,65vw valait encore 10 px à 390 px : les H1 des
	   en-têtes de page et les boutons du hero étaient à 26 px du bord quand
	   tous les H2 de section étaient à 16 px. Marges uniformes sur téléphone. */
	:root {
		--retrait: 0px;
	}

	.entete-section {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-inline: 0;
	}

	.entete-section__actions,
	.entete-section > .wp-block-buttons {
		justify-content: flex-start;
		padding-left: 0;
	}

	.entete-section:not(.entete-section--centre) > .entete-section__texte:only-child > :not(h2) {
		max-width: none;
	}

	/* Sections pleine largeur : l'en-tête garde la gouttière du téléphone. */
	.section--sans-marge > .entete-section,
	.section--sans-marge > .section__action,
	.section-frise > .entete-section {
		padding-inline: var(--gouttiere);
	}

	/* Libellés longs : les boutons passent à la ligne plutôt que de déborder. */
	.bouton,
	.wp-block-button__link {
		white-space: normal;
		text-align: center;
	}

	/* Plus spécifique que la règle générale (écrite plus bas) : sinon l'écart de
	   80 px l'emportait et les badges s'empilaient un par ligne. */
	.bande-certifications.section .certifications {
		gap: 16px;
	}

	/* Idem : la règle générale (40 px 80 px, plus bas) l'emportait. */
	.carte.carte--machine .carte__texte {
		padding: 20px;
	}

	/* A5 / P2 — gouttière alignée sur la marge de page (16 px), au lieu de 10. */
	.grille-produits {
		gap: 32px 16px;
	}

	/* M1 / N4 — bannière d'en-tête en 4:3 sur téléphone (≈ 292 px à 390). */
	.image-parallaxe {
		aspect-ratio: 4 / 3;
	}

	/* T5 — hero : 800 px fixes occupaient 95 % de l'écran pour une photo
	   paysage recadrée ; la hauteur suit maintenant la largeur (image 4:5). */
	.hero {
		min-height: min(100svh, 150vw);
	}

	/* Les deux boutons du hero passent déjà sur deux lignes avec Chakra Petch
	   (382 px demandés pour 380 disponibles) mais tiennent sur une seule avec
	   la police de repli, plus étroite : le contenu du hero, calé en bas,
	   sautait de 67 px à l'arrivée de la police. En colonne, la mise en page
	   est la même dans les deux cas (rendu final inchangé). */
	.hero .wp-block-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.carte-produit__texte {
		padding-right: 0;
	}

	.carte-produit__description {
		font-size: 16px;
	}

	.grille-cartes,
	.grille-cartes--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.grille-cartes .carte--marche,
	.grille-cartes--2 .carte--marche {
		aspect-ratio: 4 / 3;
	}

	.carte--marche .carte__texte {
		padding: 24px 24px 24px 20px;
	}

	.carte--service .carte__texte,
	.carte--service-large .carte__texte {
		padding: 20px;
	}

	.carte--detail {
		flex-direction: column;
	}

	.carte--detail .carte__visuel {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}

	.carte--detail .carte__texte {
		padding: 24px;
	}

	.liens-specialites {
		columns: 1;
		padding-inline: 0;
	}

	.etiquette-titre {
		max-width: 100%;
		height: auto;
		margin: 8px 0 0;
		padding: 4px 8px;
		vertical-align: baseline;
		white-space: normal;
	}

	.temoignages__piste {
		width: 100%;
	}

	/* Une seule carte à l'écran : les voisines sont réduites et masquées (même
	   principe que les cartes hors champ, pour garder l'enchaînement animé). */
	.temoignages.est-interactif .temoignage.est-precedent,
	.temoignages.est-interactif .temoignage.est-suivant {
		width: 0;
		height: 0;
		min-height: 0;
		padding-inline: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
	}

	/* Hauteur commune (voir plus haut) : au téléphone, sans voisines avec
	   lesquelles s'aligner, le texte part du haut de la carte. */
	.temoignage.est-actif {
		width: 100%;
		min-height: var(--temoignage-hauteur, 0px);
		justify-content: flex-start;
		padding: 28px;
	}

	.temoignage__logo {
		margin-bottom: 0;
	}

	.wp-block-gallery.is-style-logos {
		gap: 48px;
	}

	.wp-block-gallery.is-style-logos .wp-block-image img {
		height: 48px !important;
	}

	.formulaire-devis__grille,
	.champ__duo {
		grid-template-columns: minmax(0, 1fr);
	}

	.champ-multiple__options {
		grid-template-columns: minmax(0, 1fr);
	}

	.formulaire-devis__precisions-grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.formulaire-devis__precisions-resume {
		font-size: 16px;
	}

	/* Sur une colonne, la barre tenait sur trois lignes : la liste des champs
	   entre parenthèses est retirée, les libellés suffisent. */
	.formulaire-devis__precisions-liste {
		display: none;
	}

	.depot__zone {
		font-size: 16px;
	}

	.wp-block-list.is-style-bandeau,
	.bandeau-defilant {
		height: 72px;
		padding: 0 16px;
	}

	.pied {
		padding-top: 56px;
	}

	/* T7 — en deux colonnes, tout le pied sauf les liens passait en « 1 / -1 » :
	   la moitié droite restait vide sur toute la hauteur. Une seule colonne. */
	.pied__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.pied__presentation-bloc {
		grid-column: auto;
	}

	/* Sur petit écran, les mots composés peuvent de nouveau se couper. */
	.insecable {
		white-space: normal;
	}

	.hero h1 br,
	.entete-page h1 br {
		display: none;
	}

	.pied__logo img {
		width: 140px;
	}

	.pied__bas {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 48px;
	}

	.bandeau-cookies {
		flex-direction: column;
		align-items: stretch;
	}

	.bandeau-cookies__actions .bouton {
		flex: 1;
	}

	/* T3 — le texte de la section scindée était à 31 px du bord au lieu de 16. */
	.section-scindee__texte {
		padding: 48px var(--gouttiere);
	}

	/* T6 / D1 — corps de texte du formulaire à 16 px minimum sur téléphone. */
	.champ__libelle,
	.formulaire-devis__obligatoire {
		font-size: 16px;
	}

	/* N1 — les paragraphes des articles, justifiés dans l'ancien site, créaient
	   de larges blancs inter-mots sur une colonne de 358 px. La justification
	   est en style en ligne (d'où !important) ; ne viser qu'elle, sinon les
	   paragraphes centrés des sections (chapôs, chiffres clés) passaient à gauche. */
	.wp-block-post-content p:is([style*="justify"], .has-text-align-justify) {
		text-align: left !important;
	}

	/* S3 — parc machines : la liste était en blanc à 60 % sur une photo claire. */
	.carte--machine .carte__liste {
		color: rgba(255, 255, 255, 0.85);
	}

	.carte--machine .carte__cartouche {
		background: rgba(0, 33, 64, 0.45);
	}
}

/* ==========================================================================
   Compléments de sections
   ========================================================================== */

/* Sections pleine largeur dont seul l'en-tête reste dans le conteneur. */
.section--sans-marge > .conteneur {
	max-width: var(--largeur);
	margin-inline: auto;
}

.section-services {
	padding-top: var(--section-haut);
	padding-bottom: var(--section-bas);
}

.section-services > .grille-services + .section__action {
	margin-top: 40px;
}

.section-services > .entete-section {
	margin-bottom: 40px;
}

/* FAQ : blocs « Détails » natifs, filets bleus, + / −. */
.faq > * + * {
	margin-top: 0 !important;
}

.faq .wp-block-details {
	border-top: 1px solid var(--filet-fort);
}

.faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--filet-fort);
}

.faq summary {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	color: var(--texte-fort);
	font-size: 18px;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	background: var(--icone-etat);
	-webkit-mask: url("../images/icones/plus.svg") center / contain no-repeat;
	mask: url("../images/icones/plus.svg") center / contain no-repeat;
}

.faq details[open] > summary::after {
	-webkit-mask-image: url("../images/icones/moins.svg");
	mask-image: url("../images/icones/moins.svg");
}

.faq .wp-block-details > :not(summary) {
	margin: -8px 0 0;
	padding-bottom: 16px;
	color: var(--texte);
	font-size: 16px;
	line-height: 1.35;
}

/* Texte de référencement centré (906 px). */
.texte-seo p {
	max-width: 906px;
	margin-inline: auto;
	color: rgba(0, 33, 64, 0.9);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
}

/* Navigation entre gammes (« Emballage carton & synthétique | PLV de comptoir ↓ »). */
.onglets-gammes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 40px var(--retrait);
	list-style: none;
}

.onglets-gammes li {
	display: flex;
	align-items: center;
	padding-inline: 20px;
	line-height: 1;
}

.onglets-gammes li:first-child {
	padding-left: 0;
}

.onglets-gammes li + li {
	border-left: 1.5px solid var(--c-marine);
}

.onglets-gammes a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: rgba(0, 33, 64, 0.65);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.onglets-gammes a::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("../images/icones/fleche-verticale.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche-verticale.svg") center / contain no-repeat;
}

/* Flèches (retours de Laura du 06/10) : droites, sans coude ; aucune sur
   l'onglet de la section affichée ; vers le bas pour une gamme plus loin dans
   la page, vers le haut pour une gamme au-dessus (chaque section a sa liste,
   dans l'ordre des sections). */
.onglets-gammes .est-actif a::after {
	display: none;
}

.onglets-gammes li:has(~ .est-actif) a::after {
	transform: rotate(180deg);
}

/* Onglet actif : souligné et en couleur pleine. */
.onglets-gammes .est-actif a {
	color: var(--c-marine);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* Le décalage de l'ancre est déjà donné par « scroll-padding-top » sur html :
   un « scroll-margin-top » ici s'y ajoutait (section 190 px sous le haut). */
.section-gamme {
	padding-bottom: 0;
}

/* Dernière gamme : de l'air avant la section suivante (Rémy, 03/11 : le bloc
   « Plus de 70 millions » touchait les cartes PLV). */
.section-gamme:not(:has(+ .section-gamme)) {
	padding-bottom: var(--section-80);
}

/* Pied de page : liens en ligne. */
.pied a {
	color: inherit;
}

.pied .pied__reseau {
	color: var(--c-linkedin);
	text-decoration: none;
}

.pied__coordonnees a {
	text-decoration: none;
}

/* Liens téléphone et e-mail isolés : cible tactile d'au moins 24 px de haut. */
.pied__coordonnees a,
.contenu-texte a[href^="tel:"],
.contenu-texte a[href^="mailto:"] {
	display: inline-block;
	padding-block: 3px;
}

.pied__coordonnees a[href^="mailto:"] {
	text-decoration: underline;
}

.pied__linkedin a::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/icones/linkedin.svg") center / contain no-repeat;
	mask: url("../images/icones/linkedin.svg") center / contain no-repeat;
}

/* Certifications (PROVISOIRE : en attente des logos, ordre d'importance du client).
   Le logo Cartoffset reste plus grand que chaque certification. */
.certifications {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	align-items: center;
	margin: 0;
	padding: 24px 0 0;
	list-style: none;
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.certifications img {
	display: block;
	width: auto;
	max-height: 48px;
}

/* Logos des certifications (inc/blocs.php) : version « fonce » sur fond clair
   (pied de page), « clair » sur fond sombre (bande « Nos engagements »). */
.certification {
	display: block;
	width: 112px;
	height: 48px;
	background: var(--logo-fonce) center / contain no-repeat;
}

.certification[data-assombrir] {
	filter: brightness(0);
	opacity: 0.7;
}

:is(.has-marine-background-color, .fond-sombre) .certification {
	background-image: var(--logo-clair);
	filter: none;
	opacity: 1;
}

/* Grille d'articles (actualités) : même famille que les cartes produit. */
.grille-articles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.carte-article {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.carte-article__visuel {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--rayon);
	background: var(--c-creme);
}

.carte-article__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carte-article__date {
	color: rgba(0, 33, 64, 0.65);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.carte-article__titre {
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

/* Le cœur pose le lien du titre en inline-block : avec le rognage des titres
   (text-box), un titre sur deux lignes remontait d'une ligne sur la date. */
.carte-article__titre a,
.wp-block-post-title a {
	display: inline;
}

.carte-article__titre a {
	text-decoration: none;
}

.carte-article__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.carte-article__extrait {
	color: rgba(0, 33, 64, 0.65);
	font-size: 16px;
	line-height: 1.35;
}

.pagination {
	gap: 12px;
	margin-top: 48px;
	font-weight: 600;
}

@media (max-width: 1023px) {
	.grille-articles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.grille-articles {
		grid-template-columns: minmax(0, 1fr);
	}

	/* P1 — empilés, les onglets gardaient le filet séparateur et le retrait de
	   20 px : un trait vertical parasite et la 2e gamme décalée à 36 px. */
	.onglets-gammes {
		gap: 4px;
		padding-inline: 0;
	}

	.onglets-gammes li {
		padding-block: 6px;
	}

	.onglets-gammes li + li {
		padding-left: 0;
		border-left: 0;
	}
}


/* ==========================================================================
   Gabarits Produit, Service et Entreprise
   ========================================================================== */

/* Cartes détail sur fond sombre : filets bordeaux clair (maquette « Personnalisation & options »). */
.has-bordeaux-background-color .carte--detail {
	border-color: #633a35;
}

.has-marine-background-color .carte--detail {
	border-color: rgba(255, 255, 255, 0.2);
}

/* T4 / R1 / E4 — empilées en une colonne, ces bordures claires sont invisibles
   sur le blanc des cartes : les quatre blocs lisaient comme un seul aplat. On
   les sépare (retrait des marges négatives de la grille) et on leur rend un
   filet visible. */
@media (max-width: 1023px) {
	.carte--detail,
	.has-bordeaux-background-color .carte--detail,
	.has-marine-background-color .carte--detail {
		margin: 0;
		border-color: rgba(0, 33, 64, 0.2);
	}
}

.carte--statique {
	cursor: default;
}

/* Étapes des pages Service sans photo (Rémy, 03/11) : cartes texte posées sur
   le bleu de la section, filet clair, comme les intitulés de la maquette. */
.section-etapes-grille .grille-details {
	gap: 0;
}

.section-etapes-grille .carte--sans-visuel,
.section-etapes-grille .carte--sans-visuel .carte__titre,
.section-etapes-grille .carte--sans-visuel .carte__description {
	background: transparent;
	color: var(--c-blanc);
}

.section-etapes-grille .carte--sans-visuel {
	min-height: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-etapes-grille .carte--sans-visuel .carte__description {
	color: rgba(255, 255, 255, 0.7);
}

/* Cartes texte (étapes et atouts des pages Service) : un peu de vie au
   survol (Rémy, 03/11 : « plus dynamique qu'un simple tableau ») : la carte
   se soulève, un filet rouge se dessine en haut, le fond s'éclaircit. */
.carte--detail.carte--sans-visuel {
	position: relative;
	transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), background-color 300ms, box-shadow 300ms;
}

.carte--detail.carte--sans-visuel::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 3px;
	background: var(--c-rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);
}

.carte--detail.carte--sans-visuel:hover,
.carte--detail.carte--sans-visuel:focus-within {
	z-index: 1;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 33, 64, 0.12);
}

.carte--detail.carte--sans-visuel:hover::before,
.carte--detail.carte--sans-visuel:focus-within::before {
	transform: scaleX(1);
}

.section-etapes-grille .carte--sans-visuel:hover,
.section-etapes-grille .carte--sans-visuel:focus-within {
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.carte--detail.carte--sans-visuel,
	.carte--detail.carte--sans-visuel::before {
		transition: none;
	}

	.carte--detail.carte--sans-visuel:hover,
	.carte--detail.carte--sans-visuel:focus-within {
		transform: none;
	}
}

/* Grand numéro d'étape (Chakra Petch Light : l'ExtraLight de la maquette n'existe pas dans la famille). */
.carte__numero {
	position: absolute;
	top: 40px;
	left: 40px;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(64px, 44.2px + 5.28vw, 128px);
	font-weight: 300;
	line-height: 0.55;
	letter-spacing: -0.03em;
	pointer-events: none;
}

.carte--numerotee .carte__visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.carte__etiquette {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 10px;
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, 0.2);
	color: var(--c-blanc);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Bouton d'une carte à image (« Étape suivante ») : tertiaire de fond foncé
   (variables du § 5) ; la carte entière est le lien, son survol donne l'état
   survol du bouton. */
.carte__bouton {
	pointer-events: none;
}

a.carte:hover .carte__bouton {
	border-color: var(--bouton-tertiaire-survol-fond);
	background: var(--bouton-tertiaire-survol-fond);
	color: var(--bouton-tertiaire-survol-texte);
}

/* Machine : titre et liste dans le cartouche de verre (maquette « Notre parc machines »). */
.carte--machine {
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 504 / 605;
}

.carte--machine .carte__texte {
	padding: 40px 80px 40px 40px;
	/* Sans flou de bande, comme les cartes Marché. */
	background: linear-gradient(180deg, rgba(27, 30, 35, 0) 0%, rgba(27, 30, 35, 0.25) 100%);
}

.carte__cartouche {
	padding: 12px 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}

.carte--machine .carte__titre {
	color: rgba(255, 255, 255, 0.9);
}

.carte__liste {
	margin: 12px 0 0;
	padding-left: 22px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	line-height: 1.35;
}

/* Grille d'étapes numérotées (page Service) : rangées de 4 unités de 378 × 473. */
.grille-etapes .rangee-cartes {
	aspect-ratio: 1512 / 473;
}

.section-etapes-grille {
	padding-top: var(--section-haut);
	padding-bottom: 40px;
}

.section-etapes-grille > .grille-etapes + .section__action {
	margin-top: 76px;
}

.section-etapes-grille > .entete-section {
	margin-bottom: 0;
}

/* « Les autres étapes de la fabrication » se termine sur la grille : la
   maquette la colle au bloc suivant. Le retrait bas ne sert que dans la
   variante qui se termine par un bouton (« Comment fonctionne… »). */
.section-etapes-grille:not(:has(> .section__action)) {
	padding-bottom: 0;
}

/* Défilement horizontal (étapes, parc machines) avec flèches. */
.defilement {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.defilement.est-defilable {
	cursor: grab;
}

.defilement::-webkit-scrollbar {
	display: none;
}

.defilement.est-glisse {
	cursor: grabbing;
	scroll-snap-type: none;
}

.defilement > * {
	flex: none;
	scroll-snap-align: start;
}

.defilement-commandes {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	max-width: var(--largeur);
	margin-inline: auto;
	padding: 40px 0;
}

.defilement-commandes[hidden] {
	display: none;
}

.defilement-commandes__bouton {
	display: grid;
	place-items: center;
	width: 31px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--bouton-fond);
	background: var(--bouton-fond);
	color: var(--c-marine);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.fond-sombre .defilement-commandes__bouton,
.has-marine-background-color .defilement-commandes__bouton {
	color: var(--c-blanc);
}

.defilement-commandes__bouton:hover:not(:disabled) {
	background: var(--bouton-survol-fond);
	color: var(--bouton-survol-texte);
}

.defilement-commandes__bouton:disabled {
	opacity: 0.4;
	cursor: default;
}

.defilement-commandes__icone {
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("../images/icones/fleche.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche.svg") center / contain no-repeat;
}

.defilement-commandes__bouton--precedent .defilement-commandes__icone {
	transform: rotate(180deg);
}

/* Étapes « De l'idée à la livraison » : bande rouge, intro à gauche, cartes hautes. */
.section-etapes {
	padding: 0;
}

.section-etapes > * {
	max-width: none;
}

.section-etapes__rangee {
	display: flex;
	align-items: stretch;
	padding-left: var(--gouttiere);
}

.section-etapes__intro {
	display: flex;
	flex: 0 0 418px;
	flex-direction: column;
	gap: 24px;
	padding: 76px 40px 40px;
}

.section-etapes__intro h2 {
	color: var(--c-blanc);
	font-size: var(--t-h2);
	line-height: 1;
	letter-spacing: -0.03em;
}

.section-etapes__intro p {
	color: var(--texte);
	font-size: var(--t-chapo);
	line-height: 1.2;
}

.section-etapes .defilement {
	flex: 1;
	min-width: 0;
	background: var(--c-marine);
}

.section-etapes .defilement .carte {
	width: 302px;
	height: 600px;
	aspect-ratio: auto;
	transition: width 500ms cubic-bezier(0.2, 0, 0, 1);
}

.section-etapes .defilement .carte.est-ouverte {
	width: 604px;
}

.section-etapes .defilement-commandes {
	padding-inline: var(--gouttiere);
	max-width: none;
	background: var(--c-blanc);
}

/* Flèches déplacées dans le bloc rouge (app.js), en bas à gauche. */
.section-etapes__intro .defilement-commandes {
	margin: auto 0 0;
	padding: 0;
	justify-content: flex-start;
	background: none;
}

.section-etapes__intro .defilement-commandes__bouton {
	color: var(--c-blanc);
}

.section-etapes__intro .defilement-commandes__bouton:hover:not(:disabled) {
	background: var(--c-blanc);
	color: var(--c-rouge);
}

/* Parc machines : trois cartes par écran, défilement au-delà. */
.section-machines .defilement .carte {
	width: calc(100% / 3);
}

.section-machines .defilement-commandes {
	padding-inline: var(--gouttiere);
	max-width: none;
}

/* Cartes de services sous 1 024 px (Laura, 22/09, points 11 et 12). Les
   rangées en accordéon (« Suivez la fabrication… » de l'accueil, étapes des
   pages Service) et la bande « De l'idée à la livraison » des fiches produit
   deviennent des grilles de cartes 4:5 toutes fermées : pas de survol, pas
   d'état ouvert, pas d'animation. Tablette : une rangée par ligne (quatre
   cartes à l'accueil, trois pour les étapes), la bande en 4 × 2. Téléphone :
   deux cartes par ligne. Chaque carte reste un lien vers sa page ;
   l'accordéon (assets/js/app.js) ne s'active qu'à partir de 1 024 px. */
@media (max-width: 1023px) {
	.rangee-cartes,
	.grille-etapes .rangee-cartes {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		aspect-ratio: auto;
	}

	.section-etapes .defilement {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
	}

	/* Plus rien à faire défiler : pas de flèches (le script les masque aussi). */
	.section-etapes .defilement-commandes {
		display: none;
	}

	.rangee-cartes > .carte,
	.section-etapes .defilement > .carte,
	.section-etapes .defilement > .carte.est-ouverte {
		width: auto;
		height: auto;
		aspect-ratio: 4 / 5;
		transition: none;
	}

	/* La grande carte, ouverte par défaut à partir de 1 024 px, prend
	   l'apparence des autres : petit titre, texte et flèche masqués (le texte
	   reste lu par les lecteurs d'écran), aucune animation d'ouverture. */
	.rangee-cartes > .carte:is(.carte--service, .carte--service-large) .carte__texte,
	.section-etapes .defilement > .carte:is(.carte--service, .carte--service-large) .carte__texte {
		min-width: 0;
		padding: 20px;
		--flou: 5px;
		animation: none;
	}

	.rangee-cartes > .carte.est-ouverte .carte__titre,
	.section-etapes .defilement > .carte.est-ouverte .carte__titre {
		color: inherit;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0;
	}

	.rangee-cartes > .carte.est-ouverte :is(.carte__description, .carte__etiquette),
	.section-etapes .defilement > .carte.est-ouverte :is(.carte__description, .carte__etiquette) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rangee-cartes > .carte.est-ouverte :is(.carte__bouton-fleche, .carte__bouton),
	.section-etapes .defilement > .carte.est-ouverte :is(.carte__bouton-fleche, .carte__bouton) {
		display: none;
	}

	/* Pas de zoom au survol. */
	.rangee-cartes > a.carte:hover .carte__image,
	.section-etapes .defilement > a.carte:hover .carte__image {
		transform: none;
	}

	/* Numéro d'étape à l'échelle de la carte (128 px sur ordinateur). */
	.rangee-cartes > .carte .carte__numero,
	.section-etapes .defilement > .carte .carte__numero {
		top: 20px;
		left: 20px;
		font-size: 56px;
	}
}

@media (max-width: 767px) {
	/* Deux cartes par ligne : les rangées d'une même grille se fondent en une
	   seule suite (deux rangées de trois étapes : trois lignes de deux). */
	.rangee-cartes,
	.grille-etapes .rangee-cartes,
	.grille-services,
	.grille-etapes,
	.section-etapes .defilement {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
	}

	.grille-services > .rangee-cartes,
	.grille-etapes > .rangee-cartes {
		display: contents;
	}

	/* Étapes sans photo (pages Service) : une seule grille de cartes texte,
	   en pleine largeur. */
	.grille-etapes:has(> .grille-details) {
		display: block;
	}

	/* Rangée seule de trois cartes (« Les autres étapes ») : la dernière
	   prend la largeur, à la hauteur des autres. */
	.grille-services > .rangee-cartes:only-child > .carte:last-child:nth-child(odd),
	.grille-etapes > .rangee-cartes:only-child > .carte:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		aspect-ratio: 8 / 5;
	}

	/* Le bouton de l'en-tête (« Tous nos services », « Tous nos marchés »)
	   touchait la grille : le retrait qui le sépare des cartes est nul sur
	   téléphone. Même écart de 40 px que la section services de l'accueil. */
	.section-etapes-grille > .entete-section,
	.section-machines > .entete-section,
	.section--sans-marge > .entete-section:has(+ .grille-cartes) {
		padding-bottom: 40px;
	}

	/* Le retrait est nul sur téléphone : le titre touchait le haut du fond marine. */
	.section-machines > .entete-section {
		padding-top: 40px;
	}

	/* Accueil : « Nous connaissons votre marché » touchait le bandeau du hero. */
	.hero + .section--sans-marge > .entete-section:first-child {
		padding-top: 32px;
	}

	/* Même cause : le chapô ou le bouton de l'en-tête collait au contenu. */
	.section-temoignages .entete-section,
	.entete-section:has(+ .grille-equipe),
	.entete-section:has(+ .liens-specialites) {
		padding-bottom: 32px;
	}
}

/* Chiffres clés. */
.chiffres-cles {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	padding: var(--section-80) clamp(24px, 7.94vw, 120px);
	text-align: center;
}

.chiffres-cles > * {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.chiffres-cles__nombre {
	color: var(--c-blanc);
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -0.03em;
	/* Chiffres à chasse fixe : le comptage (app.js, initChiffresCles) ne fait
	   pas trembler la largeur du nombre d'une image à l'autre. */
	font-variant-numeric: tabular-nums;
}

.chiffres-cles__libelle {
	color: var(--c-blanc);
	font-size: var(--t-chapo);
	line-height: 1.2;
}

/* Frise historique : carte active au centre, voisines de plus en plus petites. */
.section-frise {
	padding: 36px 0 76px;
	overflow: hidden;
}

.section-frise > * {
	max-width: none;
}

.section-frise .entete-section {
	max-width: 1360px;
	margin-inline: auto;
	margin-bottom: 36px;
}

.frise {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* Le navigateur laisse passer le geste horizontal (balayage) et garde le
	   défilement vertical de la page. */
	touch-action: pan-y;
}

.frise > .wp-block-cover {
	flex: 196 1 0;
	align-items: flex-end;
	min-width: 0;
	min-height: 245px !important;
	margin: 0;
	padding: 20px;
	cursor: pointer;
	transition: flex-grow 500ms cubic-bezier(0.2, 0, 0, 1), min-height 500ms cubic-bezier(0.2, 0, 0, 1), padding 500ms cubic-bezier(0.2, 0, 0, 1);
}

.frise > .wp-block-cover.est-voisin-1 {
	flex-grow: 273;
	min-height: 342px !important;
	padding: 26px;
}

.frise > .wp-block-cover.est-actif {
	flex-grow: 378;
	/* 473 px (maquette) ou la hauteur de la plus longue description, mesurée
	   par app.js (--frise-hauteur, voir plus bas) : même hauteur pour toutes
	   les années. */
	min-height: max(473px, var(--frise-hauteur, 0px)) !important;
	padding: 36px;
	cursor: default;
}

.frise > .wp-block-cover:focus-visible {
	outline-offset: -4px;
}

/* Hauteur constante (Laura, 22/09, point 8) : pendant la transition, l'ancienne
   carte active rapetisse pendant que la nouvelle grandit ; à mi-parcours, la
   plus haute des deux ne faisait plus que ~380 px et la section suivante
   remontait d'autant (97 px mesurés) avant de redescendre. La frise garde la
   hauteur de la carte active.
   Textes réels (29/09, 260 à 494 signes) : la carte active s'allongeait
   d'une année à l'autre. Comme pour les témoignages, app.js (initFrises)
   mesure chaque carte rendue active et pose la plus grande hauteur dans
   --frise-hauteur : frise et carte active la gardent pour toutes les années. */
.frise.est-interactif {
	min-height: max(473px, var(--frise-hauteur, 0px));
}

/* Mesure de la hauteur commune (app.js) : sans transition (« !important » :
   les règles du carrousel, plus bas, sont plus précises), et texte de la
   carte active à sa largeur minimale — celle qu'il garde tant que la carte
   s'élargit, au début de chaque transition (règle « min-width » plus bas) —,
   pour lire la plus grande hauteur qu'une carte puisse prendre. Au-delà de
   1 512 px, et sur les cartes des bords, le texte s'élargit ensuite : il a
   un peu plus d'air, la hauteur ne bouge pas. */
.frise.est-mesure *,
.frise.est-mesure *::before {
	transition: none !important;
}

.frise.est-mesure > .est-actif .wp-block-cover__inner-container {
	width: 0;
}

/* Fond : voile léger sur les photos (sans photo : bleu), rouge sombre plein sur la carte active. */
.frise.est-interactif .wp-block-cover__background {
	transition: background-color 400ms ease, opacity 400ms ease;
}

/* Cartes inactives : le voile reste celui réglé dans l'éditeur, carte par carte
   (la maquette en met 20 % de noir sur les photos couleur, presque rien sur les
   photos d'archives 1970 et 1974). Seule la carte active impose le rouge. */
.frise.est-interactif > .wp-block-cover:not(.est-actif):not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background {
	background-color: var(--c-marine) !important;
	opacity: 1 !important;
}

/* Carte active : rouge sombre à 100 %, aucune photo visible — seulement
   l'année, le titre et le texte (Laura, 22/09, point 8 ; remplace le voile à
   85 % qui laissait deviner la photo). */
.frise.est-interactif > .wp-block-cover.est-actif > .wp-block-cover__background {
	background-color: var(--wp--preset--color--rouge-fonce) !important;
	opacity: 1 !important;
}

.frise .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: rgba(255, 255, 255, 0.9);
}

.frise .frise__annee {
	font-size: 18px;
	line-height: 1.2;
}

.frise .est-voisin-1 .frise__annee,
.frise .est-actif .frise__annee {
	font-size: 24px;
}

.frise .frise__titre {
	color: var(--c-blanc);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.frise .frise__texte {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	line-height: 1.2;
}

/* Cartes inactives : titre et texte masqués à l'écran, lus par les lecteurs d'écran. */
.frise.est-interactif > :not(.est-actif) :is(.frise__titre, .frise__texte) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Le texte prend d'emblée sa largeur finale (378 − 2 × 36 à 1 512 px) : il ne
   se recompose pas pendant que la carte s'élargit. La carte active fait le
   quart de la frise : sous 1 512 px, la largeur suit (25vw − 72 px), sinon le
   texte mangeait les marges (6 px à 1 280 px) puis était rogné (1 024 px). */
.frise.est-interactif > .est-actif .wp-block-cover__inner-container {
	min-width: min(306px, 25vw - 72px);
	animation: carte-ouverture 520ms cubic-bezier(0.2, 0, 0, 1) both;
}

.frise:not(.est-interactif) {
	justify-content: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.frise:not(.est-interactif) > .wp-block-cover {
	flex: none;
	width: 300px;
	scroll-snap-align: start;
}

/* Équipe : cartes portrait, fond blanc voilé, survol rouge (maquette). */
.grille-equipe {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 10px;
}

.carte-equipe {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.carte-equipe .wp-block-image {
	position: relative;
	margin: 0;
	aspect-ratio: 352.5 / 402.86;
	overflow: hidden;
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, 0.9);
}

.carte-equipe .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: mix-blend-mode var(--transition);
}

/* Portrait attendu (section-equipe.php) : initiales au format des photos. */
.carte-equipe .carte-equipe__vide {
	display: grid;
	place-items: center;
	aspect-ratio: 352.5 / 402.86;
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, 0.1);
}

.carte-equipe .carte-equipe__vide p {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--t-h2);
	letter-spacing: 0.05em;
}

.carte-equipe:hover .wp-block-image {
	background: var(--c-rouge);
}

.carte-equipe:hover .wp-block-image img {
	mix-blend-mode: multiply;
}

.carte-equipe h3 {
	color: var(--texte-fort);
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

.carte-equipe p {
	color: var(--texte);
	font-size: 18px;
	line-height: 1.2;
}

/* Lien LinkedIn de chaque portrait (demande du client, 29/09) : pictogramme et
   petites capitales, comme le lien LinkedIn du pied de page, mais en blanc sur
   le bordeaux (le bleu LinkedIn n'y serait pas lisible) ; 24 px de haut au
   moins (cible tactile, WCAG 2.5.8). */
.carte-equipe .carte-equipe__linkedin {
	font-size: 14px;
}

.carte-equipe__linkedin a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 24px;
	color: var(--texte-fort);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.carte-equipe__linkedin a::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("../images/icones/linkedin.svg") center / contain no-repeat;
	mask: url("../images/icones/linkedin.svg") center / contain no-repeat;
}

.carte-equipe__linkedin a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* Offres d'emploi et variantes d'un produit : cartes texte sur fond crème. */
.grille-offres,
.grille-variantes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 10px;
}

.carte-offre,
.carte-variante {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 28px 20px;
	border-radius: var(--rayon);
	background: var(--c-creme);
}

.carte-offre h3,
.carte-variante h3 {
	color: rgba(0, 33, 64, 0.9);
	font-size: var(--t-chapo);
	line-height: 1.2;
	letter-spacing: 0;
}

.carte-offre p,
.carte-variante p {
	color: rgba(0, 33, 64, 0.65);
	font-size: 18px;
	line-height: 1.2;
}

/* Variantes : texte coupé à trois lignes (maquette). Les accroches des offres
   d'emploi (bloc « Offres d'emploi »), textes réels saisis courts dans
   l'administration, s'affichent en entier : coupées à trois lignes, elles
   perdaient leur fin (cinq à six lignes dans une carte de 353 px). */
.carte-variante p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* « Envoyez votre CV » (bouton tertiaire, comme « Découvrir » des cartes du
   méga-menu) : en bas de carte, aligné d'une carte à l'autre quelle que soit
   la longueur de l'accroche, à 24 px au moins du texte. */
.carte-offre__texte {
	margin-bottom: 14px;
}

.carte-offre__lien {
	align-self: flex-start;
	margin-top: auto;
}

/* Image pleine largeur (atelier). */
.image-pleine-largeur {
	margin: 0;
}

/* Le cœur pose « height: auto » sur les images de bloc : sans spécificité
   supérieure, la photo gardait sa hauteur naturelle (1006 px au lieu des
   772 px de la maquette). Format imposé, recadrage « cover ». */
figure.image-pleine-largeur img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 280px;
	aspect-ratio: 1512 / 772;
	object-fit: cover;
}

/* Section scindée : sous-titre (H3) et coordonnées, variante rouge sombre « site de production ». */
.section-scindee__texte h3 {
	color: var(--texte-fort);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Bande de certifications (logos reçus le 02/10 ; ImpriFrance en attente). */
.bande-certifications {
	padding: 40px var(--gouttiere) 80px;
}

.bande-certifications .certifications {
	justify-content: center;
	gap: 24px 80px;
	padding: 0;
}

.bande-certifications .certifications li.certifications__logo {
	border: 0;
	background: none;
}

.bande-certifications .certification {
	width: 140px;
	height: 64px;
}

.bande-certifications .certifications li {
	display: grid;
	place-items: center;
	width: 140px;
	height: 71px;
	border: 1px solid rgba(112, 112, 112, 0.6);
	border-radius: 10px;
	background: rgba(112, 112, 112, 0.1);
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

@media (max-width: 1279px) {
	.grille-equipe,
	.grille-offres,
	.grille-variantes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.section-etapes__rangee {
		flex-direction: column;
		padding-left: 0;
	}

	.section-etapes__intro {
		flex-basis: auto;
		padding: 48px var(--gouttiere) 32px;
	}

	.section-machines .defilement .carte {
		width: 80%;
	}

	.chiffres-cles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Frise sous 1 024 px (Laura, 22/09, points 11 et 12 : pas de réduction à trois
   cartes) : carrousel de toutes les cartes, aux proportions de l'ordinateur
   (378 × 473, 273 × 342, 196 × 245). Les cartes sont décalées pour centrer la
   carte active d'après son rang (--frise-rang, posé par le script) : avant
   elle, une voisine et des cartes lointaines. La précédente et la suivante
   dépassent aux deux bords pour inviter à balayer ; sur téléphone, toutes les
   dimensions sont réduites d'un même facteur pour que la carte active tienne
   en largeur avec 24 px de chaque voisine. Pas de survol (script) : toucher ou
   cliquer une carte, balayer, flèches du clavier, repères sous la frise. */
@media (max-width: 1023px) {
	/* « clip » et non « hidden » : la section ne peut pas défiler, le focus
	   d'une carte hors champ ne décale donc pas la piste. */
	.section-frise {
		overflow: clip;
	}

	.frise.est-interactif {
		--frise-l-actif: min(378px, 100vw - 48px);
		--frise-l-voisin: calc(var(--frise-l-actif) * 273 / 378);
		--frise-l-loin: calc(var(--frise-l-actif) * 196 / 378);
		justify-content: flex-start;
		/* Hauteur de la carte active, constante pendant la transition (au
		   moins celle de la plus longue description : --frise-hauteur). */
		min-height: max(var(--frise-l-actif) * 473 / 378, var(--frise-hauteur, 0px));
	}

	.frise.est-interactif > .wp-block-cover {
		flex: none;
		width: var(--frise-l-loin);
		min-height: calc(var(--frise-l-actif) * 245 / 378) !important;
		padding: calc(var(--frise-l-actif) * 20 / 378);
		transition: margin-left 500ms cubic-bezier(0.2, 0, 0, 1), width 500ms cubic-bezier(0.2, 0, 0, 1), min-height 500ms cubic-bezier(0.2, 0, 0, 1), padding 500ms cubic-bezier(0.2, 0, 0, 1);
	}

	/* Le décalage est la marge de la première carte : la boîte de la frise reste
	   en place (pleine largeur), et c'est un décalage de mise en page plutôt
	   qu'un « transform » — les bords des cartes restent calés sur les pixels,
	   sans filet clair entre deux cartes quand le centre tombe sur un
	   demi-pixel. --frise-glisse : la piste suit le doigt pendant un balayage. */
	.frise.est-interactif > .wp-block-cover:first-child {
		margin-left: calc(50% + var(--frise-glisse, 0px) - var(--frise-l-actif) / 2 - min(var(--frise-rang, 0), 1) * var(--frise-l-voisin) - max(var(--frise-rang, 0) - 1, 0) * var(--frise-l-loin));
	}

	.frise.est-interactif.est-glisse > .wp-block-cover:first-child {
		transition: none;
	}

	.frise.est-interactif > .wp-block-cover.est-voisin-1 {
		width: var(--frise-l-voisin);
		min-height: calc(var(--frise-l-actif) * 342 / 378) !important;
		padding: calc(var(--frise-l-actif) * 26 / 378);
	}

	.frise.est-interactif > .wp-block-cover.est-actif {
		width: var(--frise-l-actif);
		min-height: max(var(--frise-l-actif) * 473 / 378, var(--frise-hauteur, 0px)) !important;
		padding: calc(var(--frise-l-actif) * 36 / 378);
	}

	.frise.est-interactif > .est-actif .wp-block-cover__inner-container {
		min-width: calc(var(--frise-l-actif) * 306 / 378);
	}
}

/* Repères de la frise (créés par le script, affichés sous 1 024 px) : un
   bouton radio par carte, cible de 24 × 24 px (WCAG 2.5.8) avec une pastille
   de 7 px au centre ; celle de la carte active s'allonge. Les flèches
   parcourent le groupe (comportement natif des boutons radio). */
.frise__points {
	display: none;
	justify-content: center;
	margin-top: 24px;
}

@media (max-width: 1023px) {
	.frise__points {
		display: flex;
	}
}

.frise__point {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 8.5px;
	border: 0;
	border-radius: 999px;
	background: var(--icone-etat);
	background-clip: content-box;
	cursor: pointer;
	transition: width var(--transition), padding var(--transition), background-color var(--transition);
}

.frise__point:hover,
.frise__point:checked {
	background-color: var(--c-marine);
}

.frise__point:checked {
	width: 34px;
	padding-inline: 4px;
}

@media (max-width: 767px) {
	.grille-equipe,
	.grille-offres,
	.grille-variantes {
		grid-template-columns: minmax(0, 1fr);
	}

	.carte__numero {
		top: 24px;
		left: 24px;
	}
}

/* ==========================================================================
   En-tête interactif (hubs Nos services / Nos marchés — maquette « Header
   Interactive carousel », annotation « Intéraction : Decathlon »)
   ========================================================================== */

.entete-interactif {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: clamp(560px, 50vw, 900px);
	background: var(--c-blanc);
}

.entete-interactif__texte {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-inline: var(--gouttiere);
}

.entete-interactif__titre {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 120px var(--retrait) 40px;
}

.entete-interactif__titre h1 {
	color: var(--texte-fort);
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.entete-interactif__liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 40px var(--retrait) 76px;
	list-style: none;
}

.entete-interactif__liste a {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	color: var(--texte-fort);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color var(--transition);
}

.entete-interactif__liste a::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: currentColor;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity var(--transition), transform var(--transition);
	-webkit-mask: url("../images/icones/fleche.svg") center / contain no-repeat;
	mask: url("../images/icones/fleche.svg") center / contain no-repeat;
}

.entete-interactif__liste a:is(:hover, :focus-visible) {
	color: var(--c-rouge);
}

.entete-interactif__liste a:is(:hover, :focus-visible)::after {
	opacity: 1;
	transform: none;
}

/* Lien dont l'image est affichée : repéré seulement à la souris (au doigt, pas de survol). */
@media (hover: hover) and (pointer: fine) {
	.entete-interactif__liste .est-actif a {
		color: var(--c-rouge);
	}

	.entete-interactif__liste .est-actif a::after {
		opacity: 1;
		transform: none;
	}
}

.entete-interactif__visuels {
	position: relative;
	overflow: hidden;
	background: var(--c-gris-image);
}

/* Piste créée par le script : sans effet sur ordinateur (« display: contents »,
   les visuels restent superposés), elle devient la zone balayable sous 1024 px
   et laisse les repères hors du défilement. */
.entete-interactif__piste {
	display: contents;
}

.entete-interactif__visuel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0;
}

.entete-interactif__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entete-interactif__visuel figcaption {
	position: relative;
	margin: 0;
	padding: clamp(32px, 5vw, 76px) clamp(32px, 20vw, 302px) clamp(32px, 5vw, 76px) clamp(24px, 5vw, 76px);
	background: linear-gradient(180deg, rgba(27, 30, 35, 0) 0%, rgba(27, 30, 35, 0.25) 100%);
	--flou: 5px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.2;
	text-align: left;
}

/* Sans script : la première image seulement. */
.entete-interactif:not(.est-interactif) .entete-interactif__visuel:not(:first-child) {
	display: none;
}

/* Avec script : l'image du lien actif entre par la droite (exemple decathlon). */
.entete-interactif.est-interactif .entete-interactif__visuel {
	opacity: 0;
	visibility: hidden;
	transform: translateX(6%) scale(0.97);
	transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 700ms;
}

.entete-interactif.est-interactif .entete-interactif__visuel.est-actif {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;
}

/* Repères de position (décoratifs : la liste sert de navigation). */
.entete-interactif__points {
	position: absolute;
	top: 50%;
	right: 36px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 7px;
	transform: translateY(-50%);
}

.entete-interactif__points span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--c-blanc);
	opacity: 0.6;
	transition: height var(--transition), opacity var(--transition);
}

.entete-interactif__points .est-actif {
	height: 26px;
	opacity: 1;
}

/* U1 / U2 — au doigt il n'y a ni survol ni focus : la liste passe au-dessus des
   visuels, qui deviennent un carrousel balayable (une image par écran avec sa
   légende). Les repères suivent le défilement et restent indicatifs. */
@media (max-width: 1023px) {
	.entete-interactif {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.entete-interactif__titre {
		gap: 24px;
		padding: 96px 0 24px;
	}

	.entete-interactif__liste {
		padding: 16px 0 40px;
	}

	.entete-interactif__visuels {
		aspect-ratio: 4 / 3;
	}

	.entete-interactif__points {
		right: 16px;
	}

	.entete-interactif__piste {
		display: flex;
		width: 100%;
		height: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	/* Les visuels passent en flux (une image par écran) : plus de superposition,
	   ni pour le carrousel, ni pour la version sans script. */
	.entete-interactif .entete-interactif__visuel,
	.entete-interactif.est-interactif .entete-interactif__visuel,
	.entete-interactif.est-interactif .entete-interactif__visuel.est-actif,
	.entete-interactif:not(.est-interactif) .entete-interactif__visuel:not(:first-child) {
		position: relative;
		flex: none;
		display: flex;
		width: 100%;
		height: 100%;
		scroll-snap-align: start;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}