/* SOCLE — jetons d'interface metaconcept.
 *
 * POURQUOI CE FICHIER EXISTE
 * --------------------------
 * Constat du 30/09/2026, mesuré sur la préprod et non supposé : six
 * feuilles de style du plugin redéclaraient chacune dans son coin l'or
 * #D5AE05, et s'en servaient comme fond de bouton. Or le site porte DÉJÀ,
 * sur :root, un jeton --cta-action valant #D87A00 — l'orange d'action.
 * Les maquettes HTML montrent des boutons dorés parce qu'elles datent
 * d'avant cet arbitrage : sur ce point elles sont périmées.
 *
 * Deuxième mesure du même jour : les boutons du site sortent avec un
 * rayon de 0 px. La nouvelle direction artistique les veut en pilule.
 * Corriger cela feuille par feuille ne marchait pas — la règle globale
 * du thème gagnait à chaque fois. C'est donc un sujet de socle.
 *
 * CE QUE CE FICHIER A LE DROIT DE FAIRE
 * ------------------------------------
 * 1. Déclarer les jetons, une fois.
 * 2. Donner aux boutons leur couleur et leur forme.
 * Rien d'autre. Pas de typographie, pas de rythme vertical, pas de
 * réécriture de composant : ces sujets se traitent séparément, quand ils
 * seront arbitrés. Un socle qui grossit sans mandat redevient le
 * problème qu'il corrige.
 *
 * INTERRUPTEUR
 * ------------
 * Metaconcept > Réglages > « Socle graphique ». Décoché, ce fichier
 * n'est pas chargé et le site reprend exactement son apparence
 * précédente. Aucune modification n'est irréversible.
 *
 * Référence écrite : cahier des charges, onglet « 18. Charte interface ».
 */

/* ------------------------------------------------------------------
   1. Les jetons
   ------------------------------------------------------------------

   Chaque jeton est déclaré avec var(--jeton-du-site, repli) : si le
   site définit déjà la valeur, c'est la sienne qui passe. Le plugin
   ne s'impose que là où rien n'existe. --cta-action est dans ce cas
   défini par le site (#D87A00) ; --cta-action-hover, lui, ne l'est
   pas — c'est le repli ci-dessous qui sert. */

:root {

	/* Couleur d'ACTION. Tout bouton qui déclenche quelque chose. */
	--mc-action: var(--cta-action, #D87A00);
	--mc-action-hover: var(--cta-action-hover, #B86A00);
	--mc-action-texte: #FFFFFF;

	/* Couleur de MARQUE. Accent éditorial : sur-titre, lien dans le
	   texte, picto, chiffre clé, soulignement d'onglet actif.
	   JAMAIS un fond de bouton — c'est l'erreur corrigée ici. */
	--mc-or: var(--c-link, #D5AE05);

	/* Texte. Le site sert #12100a via --c-base ; la charte officielle
	   dit #4D4D4D. L'écart est relevé au cahier des charges et reste à
	   arbitrer : en attendant, le jeton du site fait foi. */
	--mc-encre: var(--c-base, #4D4D4D);

	/* Formes. */
	--mc-rayon-bouton: 100px;
	--mc-rayon-carte: 12px;
	--mc-rayon-champ: 100px;

	/* Filets et fonds neutres, repris tels quels des composants
	   existants pour qu'ils cessent d'être recopiés. */
	--mc-filet: rgba(77, 77, 77, 0.16);
	--mc-fond-doux: #FAFAFA;

	--mc-ease: 0.18s ease;
}

/* ------------------------------------------------------------------
   2. Les boutons
   ------------------------------------------------------------------

   PORTÉE. La liste ci-dessous est explicite, classe par classe, et non
   un sélecteur attrape-tout du type « tout ce qui ressemble à un
   bouton ». C'est délibéré : sur un site de 990 pages monté avec Divi,
   un sélecteur large touche des éléments qu'on ne verra jamais pendant
   les essais. Une classe s'ajoute ici en connaissance de cause.

   Sont EXCLUS volontairement : les boutons de l'administration, ceux du
   constructeur Divi, et la pagination — ce ne sont pas des appels à
   l'action. */

#page-container .gg-ref-cta,
#page-container .gg-qc-add,
#page-container .gg-qc-submit,
#page-container .mc-bouton,
#page-container .mc-doc-btn,
#page-container .mc-cta,
#page-container .wpcf7-submit,
#page-container .et_pb_button.mc-action {
	border-radius: var(--mc-rayon-bouton);
	background-color: var(--mc-action);
	border: 1px solid var(--mc-action);
	color: var(--mc-action-texte);

	/* LA TYPOGRAPHIE D'UN BOUTON EST CELLE DU MENU.
	 *
	 * Le bouton « Contact » de l'en-tête est la référence, parce qu'il
	 * est visible sur toutes les pages : Poppins 15 px, graisse 600,
	 * casse normale. Relevé le 01/10 sur l'en-tête en ligne.
	 *
	 * Les boutons de contenu arrivaient en 800 et en capitales — deux
	 * boutons côte à côte dans la même page qui ne se ressemblaient
	 * pas. Les trois déclarations ci-dessous les ramènent à la même
	 * voix. Elles sont écrites ici, et nulle part ailleurs : c'est ce
	 * qui fait qu'un futur bouton n'aura pas à être corrigé à son
	 * tour. */
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;

	/* ET LA MÊME BOÎTE, PAS SEULEMENT LA MÊME VOIX.
	   « Ajouter au devis » recevait 12px 18px de quote-cart.css, «
	   Télécharger la fiche technique » 14px 28px du site : deux boutons
	   côte à côte de 49 et 50 px de haut, mesuré le 01/10 sur RR100005.
	   Un écart d'un pixel ne se nomme pas, il se voit. Le gabarit de
	   boîte rejoint donc la typographie, au même endroit. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	line-height: 1.2;
	/* Et une hauteur plancher commune : un <button> mesure sa ligne de
	   texte, un <a> en display:flex mesure la strut de la police — 48 px
	   contre 50 pour les deux mêmes règles. min-height les met d'accord
	   sans toucher au rembourrage. */
	min-height: 50px;

	transition: background-color var(--mc-ease), border-color var(--mc-ease),
		color var(--mc-ease);
}

#page-container .gg-ref-cta:hover,
#page-container .gg-qc-add:hover,
#page-container .gg-qc-submit:hover,
#page-container .mc-bouton:hover,
#page-container .mc-doc-btn:hover,
#page-container .mc-cta:hover,
#page-container .wpcf7-submit:hover,
#page-container .et_pb_button.mc-action:hover {
	background-color: var(--mc-action-hover);
	border-color: var(--mc-action-hover);
	color: var(--mc-action-texte);
}

/* ------------------------------------------------------------------
   2 bis. Le bouton secondaire
   ------------------------------------------------------------------

   ORANGE SUR ORANGE — l'erreur du 30/09, visible en capture.

   Le bloc ci-dessus donnait un fond orange à tout ce qui porte
   .gg-ref-cta, y compris .gg-ref-cta-secondary. Or le site colore le
   TEXTE de ce bouton-là en orange, puisqu'il l'attendait sur fond
   blanc. Résultat : un bouton plein orange dont le libellé « Recevoir
   la brochure en PDF » était invisible. La règle globale avait bien
   changé la couleur — et effacé le texte au passage.

   Un second niveau existe donc, et il doit être déclaré ici, au même
   endroit que le premier : c'est la seule façon qu'ils restent
   cohérents. Le fond se vide, le contour et le texte prennent
   l'orange, et le survol inverse les deux.

   Ces sélecteurs passent APRÈS ceux du bloc précédent et ont la même
   spécificité : l'ordre suffit, aucun !important n'est nécessaire. */

#page-container .gg-ref-cta-secondary,
#page-container .mc-bouton--secondaire,
#page-container .mc-doc-btn--secondaire,
#page-container .mc-cta--secondaire {
	background-color: #FFFFFF;
	border-color: var(--mc-action);
	color: var(--mc-action);
}

#page-container .gg-ref-cta-secondary:hover,
#page-container .mc-bouton--secondaire:hover,
#page-container .mc-doc-btn--secondaire:hover,
#page-container .mc-cta--secondaire:hover {
	background-color: var(--mc-action);
	border-color: var(--mc-action);
	color: var(--mc-action-texte);
}

/* Sur fond sombre — hero du recyclage, carte du méga-menu — l'orange
   foncé du survol serait illisible : c'est le blanc qui remplit. */

#page-container .mc-hero--sombre .gg-ref-cta-secondary {
	background-color: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
}

#page-container .mc-hero--sombre .gg-ref-cta-secondary:hover {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--mc-action);
}

/* Divi pose parfois ::after sur ses boutons — une flèche qui apparaît au
   survol et décale le libellé. Sur nos boutons d'action, on n'en veut
   pas : la forme en pilule porte déjà l'affordance. */

#page-container .et_pb_button.mc-action::after {
	display: none;
}

/* ------------------------------------------------------------------
   3. Les champs
   ------------------------------------------------------------------ */

#page-container .mc-champ,
#page-container .mc-hero__recherche input[type="search"],
#page-container .mc-hero__recherche input[type="text"] {
	border-radius: var(--mc-rayon-champ);
}

/* ------------------------------------------------------------------
   4. L'or reste l'or
   ------------------------------------------------------------------

   Rappel utile à la relecture plus qu'au navigateur : les composants
   consomment --mc-or pour leurs accents. Aucun d'eux ne doit reposer sur
   une valeur écrite en dur. Une recherche de « D5AE05 » dans
   assets/css/ ne doit plus rien renvoyer en dehors de ce fichier. */

/* ==================================================================
   5. LE VOCABULAIRE DE SECTION
   ==================================================================

   D'OÙ ÇA VIENT
   -------------
   Des six maquettes HTML, où ces règles sont présentes À L'IDENTIQUE.
   Elles avaient déjà été extraites le 20/09 dans
   maquettes/metaconcept-socle.css — fichier que je n'ai jamais ouvert
   en montant les gabarits, d'où six composants qui réinventent chacun
   leur mise en page. C'est la correction du 30/09.

   POURQUOI TOUT EST PRÉFIXÉ mc-
   -----------------------------
   Les maquettes emploient des noms génériques : .eyebrow, .btn,
   .section-title, .card-v. Sur une page Divi, ces noms peuvent déjà
   exister — dans le thème, dans Divi Pixel, dans le CSS hérité de
   65 000 signes. Les reprendre tels quels, c'est prendre le risque de
   repeindre des éléments qu'on ne verra jamais pendant les essais.

   La correspondance est donc explicite :
     .eyebrow        → .mc-kicker
     .section-title  → .mc-titre
     .section-sub    → .mc-chapo
     .section-pad    → .mc-section
     .spec-table     → .mc-specs
     .card-v / .card-h → .mc-carte / .mc-carte--h
     .doc-card       → .mc-doc
     .subnav         → .mc-subnav (déjà en place)
   ================================================================== */

:root {
	--mc-gris: #6E757C;
	--mc-gris-clair: #9BA1A6;
	--mc-bord: #ECECEC;
	--mc-sombre: #1C1B18;
	--mc-ombre-s: 0 2px 8px rgba(0, 0, 0, 0.05);
	--mc-ombre-m: 0 8px 24px rgba(0, 0, 0, 0.09);
	--mc-ombre-l: 0 20px 40px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------------
   5.1 Le trio de tête — sur-titre, titre, chapô
   ------------------------------------------------------------------

   Posé par [mc_intro] en haut de chaque section. C'est lui qui donne
   aux six gabarits leur air de famille : le filet doré, la casse, les
   trois tailles, l'espacement. */

.mc-intro {
	margin-bottom: 38px;
}

.mc-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
}

/* Le filet devant le sur-titre. Il est décoratif : un lecteur d'écran
   n'a rien à en faire, d'où ::before plutôt qu'un élément. */
.mc-kicker::before {
	content: "";
	flex: 0 0 26px;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--mc-or, #D5AE05);
}

.mc-titre {
	margin: 0 0 14px;
	font-weight: 700;
}

.mc-chapo {
	margin: 0;
	max-width: 700px;
	color: var(--mc-gris);
}

/* Sur fond sombre, le trio s'inverse. */
.mc-sombre .mc-titre,
.et_pb_section_dark .mc-intro .mc-titre {
	color: #FFFFFF;
}

.mc-sombre .mc-chapo,
.et_pb_section_dark .mc-intro .mc-chapo {
	color: #C9C4B6;
}

/* ------------------------------------------------------------------
   5.2 Le tableau de caractéristiques
   ------------------------------------------------------------------

   Deux colonnes, libellé à gauche, valeur à droite en gras, une ligne
   sur deux teintée. C'est le .spec-table des maquettes — présent sur
   la gamme comme sur la référence. */

.mc-specs {
	width: 100%;
	border: 1px solid var(--mc-bord);
	border-radius: var(--mc-rayon-carte, 12px);
	overflow: hidden;
	background: #fff;
}

.mc-specs__ligne {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--mc-bord);
	font-size: 0.8125rem;
}

.mc-specs__ligne:last-child {
	border-bottom: none;
}

.mc-specs__ligne:nth-child(even) {
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-specs__cle {
	color: var(--mc-gris);
	font-weight: 500;
	min-width: 0;
}

.mc-specs__valeur {
	color: var(--mc-encre, #4D4D4D);
	font-weight: 700;
	text-align: right;
	min-width: 0;
}

/* La mise en page « texte à gauche, specs à droite » de la section
   Description. minmax(0, …) : sans lui, un mot long du texte pousse
   la colonne des specs hors de la page. */
.mc-desc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 50px;
	align-items: start;
}

/* Variante de la fiche référence : le tableau tient la gauche, à sa
   largeur de lecture, et le contenu rédigé occupe le reste. Le tableau
   seul laissait 900 px de blanc à sa droite. */
.mc-desc--specs-gauche {
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

/* ------------------------------------------------------------------
   5.3 Les cartes
   ------------------------------------------------------------------ */

.mc-carte {
	background: #fff;
	border: 1px solid var(--mc-bord);
	border-radius: var(--mc-rayon-carte, 12px);
	overflow: hidden;
	box-shadow: var(--mc-ombre-s);
	transition: transform 0.32s var(--mc-ease, 0.18s ease),
		box-shadow 0.32s var(--mc-ease, 0.18s ease);
}

.mc-carte:hover {
	transform: translateY(-6px);
	box-shadow: var(--mc-ombre-l);
}

.mc-carte__corps {
	padding: 18px;
}

.mc-carte__corps h4 {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.mc-carte__corps p {
	margin: 0;
	font-size: 0.78125rem;
	color: var(--mc-gris);
}

/* La carte de document — icône, titre, méta, bouton en bas. */
.mc-doc {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--mc-bord);
	border-radius: var(--mc-rayon-carte, 12px);
	box-shadow: var(--mc-ombre-s);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mc-doc:hover {
	transform: translateY(-5px);
	box-shadow: var(--mc-ombre-l);
}

.mc-doc__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--mc-fond-doux, #FAFAFA);
	font-size: 19px;
}

.mc-doc__meta {
	margin-bottom: 14px;
	font-size: 0.65625rem;
	color: var(--mc-gris-clair);
}

/* margin-top:auto colle le bouton en bas quelle que soit la longueur
   du titre : sans lui, une grille de cartes a ses boutons en escalier. */
.mc-doc .mc-bouton,
.mc-doc .mc-doc-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* ------------------------------------------------------------------
   5.4 Les grilles
   ------------------------------------------------------------------ */

.mc-grille {
	display: grid;
	gap: 22px;
}

.mc-grille--1,
.mc-grille--2,
.mc-grille--3,
.mc-grille--4 {
	/* LES MODIFICATEURS SE SUFFISENT À EUX-MÊMES.
	   Ils ne portaient que le nombre de colonnes, et comptaient sur
	   .mc-grille pour display:grid. Une grille écrite « mc-grille--3 »
	   seule retombait donc en bloc : les trois cartes du catalogue se
	   sont empilées à la verticale sur l'accueil, relevé le 01/10.
	   Un modificateur qui ne marche qu'accompagné est un piège : les
	   deux déclarations manquantes sont rapatriées ici. */
	display: grid;
	gap: 22px;
}

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

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

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

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

@media (max-width: 1100px) {

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

	.mc-desc,
	.mc-desc--specs-gauche {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

@media (max-width: 900px) {

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

/* ==================================================================
   6. LE RYTHME VERTICAL
   ==================================================================

   MESURÉ AVANT D'ÊTRE CHANGÉ — 30/09, gamme CERRO : chaque section
   Divi porte 72 px de marge haute et basse, et la rangée qu'elle
   contient en rajoute 36. Soit 108 px de chaque côté, donc 216 px de
   blanc entre deux sections. Les maquettes en prévoient 80.

   UN SEUL JETON. La valeur ci-dessous est le seul endroit où le
   rythme du site se règle. C'est précisément ce qui manquait : un
   espacement corrigé section par section redevient incohérent à la
   première page ajoutée.

   LA RANGÉE PASSE À ZÉRO. Divi empile deux espacements — celui de la
   section et celui de la rangée — pour un résultat que personne ne
   lit dans le constructeur. On garde la section, qui est l'unité que
   voit l'éditeur, et on neutralise la rangée.

   PORTÉE. #main-content seulement : l'en-tête, le méga-menu et le
   pied de page ont leur propre mise en page et n'ont rien à faire
   ici. Les sections qui se règlent elles-mêmes — fil d'Ariane,
   sous-navigation, sections ancrées — passent après ce bloc dans
   leurs feuilles respectives et gardent la main. */

:root {
	--mc-section-y: 56px;
}

#main-content .et_pb_section {
	padding-top: var(--mc-section-y);
	padding-bottom: var(--mc-section-y);
}

#main-content .et_pb_section > .et_pb_row,
#main-content .et_pb_section > .et_pb_row_inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* Une section vide masquée ne doit pas laisser ses marges derrière
   elle : sans cette règle, elle disparaît en laissant 112 px de blanc. */
#main-content .et_pb_section.mc-section-vide,
#main-content .et_pb_row.mc-ligne-vide {
	display: none;
}

@media (max-width: 900px) {

	:root {
		--mc-section-y: 40px;
	}
}

/* ==================================================================
   7. LES FONDS DE SECTION
   ==================================================================

   Les maquettes alternent trois fonds : blanc, gris très clair, et
   deux fonds particuliers — le hero sombre et le bloc conseil sur
   dégradé doré pâle.

   POURQUOI UNE CLASSE ET PAS UN RÉGLAGE DIVI. Un fond posé dans le
   constructeur vit dans la section, donc en autant d'exemplaires
   qu'il y a de gabarits, et il faudrait rouvrir les six pour changer
   une teinte. La classe se pose une fois sur la section, la couleur
   vit ici. */

#main-content .et_pb_section.mc-sec-sombre {
	background: linear-gradient(135deg, #3a352a 0%, #26241f 55%, #1c1b18 100%);
	color: #E4E1D8;
}

#main-content .et_pb_section.mc-sec-sombre h1,
#main-content .et_pb_section.mc-sec-sombre h2,
#main-content .et_pb_section.mc-sec-sombre h3,
#main-content .et_pb_section.mc-sec-sombre .mc-titre {
	color: #FFFFFF;
}

#main-content .et_pb_section.mc-sec-sombre .mc-chapo,
#main-content .et_pb_section.mc-sec-sombre .mc-hero__intro {
	color: #C9C4B6;
}

/* ------------------------------------------------------------------
   LA BANDE FONCÉE À CARTES BLANCHES
   ------------------------------------------------------------------

   Demandée le 06/10 : « fond plus foncé, car ça fait blanc partout, ce
   qui ne découpe pas bien chaque section ». Puis, après un premier
   essai : « je ne te parle pas des blurb, mais du fond de la section,
   les blurb ont un fond blanc ».

   D'OÙ UNE SECONDE VARIANTE SOMBRE, ET NON UN RÉGLAGE DE LA PREMIÈRE.
   .mc-sec-sombre rend ses cartes translucides — c'est juste pour le
   process du recyclage, où les cartes sont des étapes dessinées DANS la
   bande. Ici les cartes sont des objets POSÉS sur la bande : elles
   restent blanches, et c'est le fond qui recule.

   CE QUE L'ESSAI A RÉVÉLÉ EN PASSANT. En cartes translucides, les logos
   de maxmatic et de msp disparaissaient : ce sont des tracés sombres sur
   fond transparent, invisibles sur un fond sombre. Eurotechni et SPAP
   Soucille survivaient parce que leur fichier porte un aplat blanc. Sur
   carte blanche, les quatre se lisent — le problème ne se pose plus. */

#main-content .et_pb_section.mc-sec-fonce {
	background: linear-gradient(135deg, #3a352a 0%, #26241f 55%, #1c1b18 100%);
	color: #E4E1D8;
}

#main-content .et_pb_section.mc-sec-fonce h1,
#main-content .et_pb_section.mc-sec-fonce h2,
#main-content .et_pb_section.mc-sec-fonce h3,
#main-content .et_pb_section.mc-sec-fonce .mc-titre {
	color: #FFFFFF;
}

#main-content .et_pb_section.mc-sec-fonce .mc-chapo,
#main-content .et_pb_section.mc-sec-fonce .et_pb_text_inner > p {
	color: #C9C4B6;
}

/* Les cartes gardent leur fond blanc et leur encre : c'est la demande.
   Seul le filet s'éclaircit, sinon un bord gris sur fond sombre dessine
   un halo au lieu d'un contour. */
#main-content .et_pb_section.mc-sec-fonce .mc-carte-v,
#main-content .et_pb_section.mc-sec-fonce .mc-carte-fixe {
	background: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.18);
}

#main-content .et_pb_section.mc-sec-fonce .mc-carte-v__titre,
#main-content .et_pb_section.mc-sec-fonce .mc-carte-fixe__titre {
	color: var(--mc-encre, #4D4D4D);
}

#main-content .et_pb_section.mc-sec-fonce .mc-carte-v__texte,
#main-content .et_pb_section.mc-sec-fonce .mc-carte-fixe__texte {
	color: var(--mc-gris, #6E757C);
}

/* L'ombre portée remplace l'éclaircissement au survol : sur fond
   sombre, une carte déjà blanche ne peut pas devenir plus claire. */
#main-content .et_pb_section.mc-sec-fonce .mc-carte-v:hover {
	background: #FFFFFF;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

/* ------------------------------------------------------------------
   LA SECTION BLANCHE, DÉCLARÉE
   ------------------------------------------------------------------
   Elle existait par défaut — une section sans classe est blanche — mais
   elle n'avait pas de nom, donc pas de rembourrage vertical et aucun
   moyen de dire « celle-ci est blanche À DESSEIN ». Les pages refaites
   le 05 et le 06/10 ont toutes été taguées mc-sec-clair faute de mieux,
   d'où huit sections grises de suite sur /presentation/ et l'impression
   de bloc unique qui a motivé cette demande. */

#main-content .et_pb_section.mc-sec-blanc {
	background: #FFFFFF;
}

/* Le bloc conseil : dégradé doré pâle, filet haut — c’est lui qui
   annonce la fin de page dans les six maquettes. */
#main-content .et_pb_section.mc-sec-devis {
	background: linear-gradient(160deg, #FBF6DE 0%, var(--mc-fond-doux, #FAFAFA) 60%);
	border-top: 1px solid var(--mc-bord, #ECECEC);
}

#main-content .et_pb_section.mc-sec-clair {
	background: var(--mc-fond-doux, #FAFAFA);
}

/* LE BLOC CONSEIL PEINT SA SECTION, MÊME SANS CLASSE.
   Les six gabarits de pages posent mc-sec-devis à la main sur leur
   section. Un gabarit d'archive, lui, n'a qu'un module de code dans une
   section ordinaire : le bloc s'affichait sur fond blanc, et sa carte
   blanche disparaissait dedans (relevé le 02/10 sur /formes/baguette/).
   On reconnaît donc la section à ce qu'elle CONTIENT. Le :not() évite
   d'écrire deux fois la même chose là où la classe est déjà posée. */
#main-content .et_pb_section:not(.mc-sec-devis):has(.mc-devis) {
	background: linear-gradient(160deg, #FBF6DE 0%, var(--mc-fond-doux, #FAFAFA) 60%);
	border-top: 1px solid var(--mc-bord, #ECECEC);
}

#page-container .et_pb_section:not(.mc-sec-devis):has(.mc-devis) {
	padding-top: 88px;
	padding-bottom: 88px;
}

#page-container .et_pb_section:not(.mc-sec-devis):has(.mc-devis) > .et_pb_row {
	width: 92%;
	max-width: 1440px;
}

/* ------------------------------------------------------------------
   7.1 Le corps de texte rendu par [mc_contenu]
   ------------------------------------------------------------------ */

.mc-contenu > :first-child {
	margin-top: 0;
}

.mc-contenu > :last-child {
	margin-bottom: 0;
}

.mc-contenu p {
	color: var(--mc-gris, #6E757C);
}

/* ==================================================================
   8. LA TYPOGRAPHIE DES SECTIONS EXISTANTES
   ==================================================================

   POURQUOI CE BLOC EXISTE. [mc_intro] donne le trio de tête aux
   sections que je monte. Mais le site compte des centaines de pages
   dont les titres sont des modules Divi natifs, et qui ne passeront
   jamais par ce shortcode. Sans ce bloc, le site aurait deux
   typographies : celle des maquettes sur mes sections, l'ancienne
   partout ailleurs. C'est exactement l'écart que Matthieu a relevé.

   CE QUE ÇA TOUCHE, ET RIEN D'AUTRE : la taille, la graisse et les
   marges des titres de section. Pas les couleurs — elles viennent des
   jetons —, pas les corps de texte, pas les largeurs. Un socle qui
   toucherait au texte courant changerait le rendu de 990 fiches d'un
   coup, sans que personne ait pu les regarder.

   Réversible par l'interrupteur « Socle graphique ».
   ================================================================== */

#main-content .et_pb_section h2,
#main-content .et_pb_section .mc-titre {
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}

#main-content .et_pb_section h3 {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 10px;
}

/* Le premier titre d'une section ne doit pas rajouter de marge haute :
   la section en pose déjà une, et les deux s'additionnaient. */
#main-content .et_pb_section .et_pb_text_inner > h2:first-child,
#main-content .et_pb_section .et_pb_text_inner > h3:first-child {
	margin-top: 0;
}

/* Le chapô sous un titre : même largeur de lecture que les maquettes,
   pour que les lignes ne traversent pas 1 440 px. */
#main-content .et_pb_section .mc-chapo,
#main-content .et_pb_section .mc-contenu p {
	max-width: 74ch;
}

/* ==================================================================
   9. LES CARTES PRODUIT DU SITE
   ==================================================================

   UNE SEULE CARTE, PARTOUT — et c'est le point.

   Le site n'emploie pas le même balisage d'un endroit à l'autre :
   relevé le 30/09, le listing /produits/ sort 20 cartes Divi
   FilterGrid (.dp-dfg-item, coins carrés, ombre portée lourde),
   tandis que les produits liés d'une fiche sortent un carrousel
   hérité (.project-item). Habiller l'un sans l'autre produit
   exactement ce qui a été reproché : un composant à la nouvelle
   charte, le reste à l'ancienne.

   Les deux familles reçoivent donc la même carte : cadre fin, rayon
   de 12 px, ombre discrète qui se lève au survol. Une famille
   s'ajoute en complétant les deux listes de sélecteurs ci-dessous —
   et nulle part ailleurs.

   ON NE TOUCHE PAS À LA MISE EN PAGE. Ni la grille de FilterGrid, ni
   les transformations que Swiper pose en ligne : seulement
   l'apparence de la carte. C'est ce qui rend la règle sûre sur 990
   pages qu'on ne peut pas toutes regarder.
   ================================================================== */

#main-content .dp-dfg-item,
#main-content .slider_related_products .project-item {
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #fff;
	box-shadow: var(--mc-ombre-s);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#main-content .dp-dfg-item:hover,
#main-content .slider_related_products .project-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--mc-ombre-l);
	border-color: #F2E6B0;
}

/* L'image occupe toute la largeur de la carte et garde sa proportion. */
#main-content .dp-dfg-item .dp-dfg-featured-image,
#main-content .slider_related_products .project-item img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

#main-content .dp-dfg-item .entry-title,
#main-content .slider_related_products .project-title {
	margin: 2px 0 0;
	padding: 0 16px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mc-encre, #4D4D4D);
}

/* Le code référence, en doré, au-dessus du nom — comme dans le
   tableau des références. C'est le seul endroit où le doré porte du
   texte sur fond clair, et il y est lisible. */
#main-content .slider_related_products .reference {
	padding: 14px 16px 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mc-or, #D5AE05);
}

#main-content .dp-dfg-item .dp-dfg-meta,
#main-content .dp-dfg-item .dp-dfg-content {
	padding-left: 16px;
	padding-right: 16px;
	font-size: 0.78125rem;
	color: var(--mc-gris, #6E757C);
}

#main-content .slider_related_products .cta.maillage {
	padding: 10px 16px 16px;
	font-size: 0.71875rem;
	font-weight: 700;
	color: var(--mc-action, #D87A00);
}

/* Le « lire la suite » de FilterGrid est un bouton Divi : il reprend
   la forme et la couleur d'action du socle. */
#main-content .dp-dfg-item .dp-dfg-more-button {
	margin: 0 16px 16px;
	padding: 9px 18px;
	border-radius: var(--mc-rayon-bouton, 100px);
	background-color: var(--mc-action, #D87A00);
	border: 1px solid var(--mc-action, #D87A00);
	color: #FFFFFF;
	font-size: 0.78125rem;
	font-weight: 600;
}

#main-content .dp-dfg-item .dp-dfg-more-button:hover {
	background-color: var(--mc-action-hover, #B86A00);
	border-color: var(--mc-action-hover, #B86A00);
	color: #FFFFFF;
}

/* Divi ajoute une flèche en ::after au survol, qui décale le libellé. */
#main-content .dp-dfg-item .dp-dfg-more-button::after {
	display: none;
}

/* Les diapositives d'une même rangée prennent la hauteur de la plus
   haute : sans ça, les cartes sont en escalier dès qu'un titre passe
   sur deux lignes. */
#main-content .slider_related_products .swiper-wrapper {
	align-items: stretch;
}

#main-content .slider_related_products .swiper-slide {
	height: auto;
}

/* ==================================================================
   10. LE HERO D'UNE PAGE ÉDITORIALE
   ==================================================================

   LA DIFFÉRENCE QUI SAUTE AUX YEUX. Comparé le 30/09, capture contre
   maquette : le hero en ligne est un bloc de texte aligné à gauche
   dans un cadre, sur une photo. La maquette le veut centré, sur 880
   px, titre de 46 px, deux boutons au milieu, sur un dégradé chaud.
   Aucun jeton de couleur ne fait passer de l'un à l'autre — c'est une
   composition, pas une teinte. D'où ce bloc.

   La classe mc-sec-hero se pose sur la SECTION, dans le constructeur
   ou dans le contenu de la page. Le fond, la vidéo et le contenu
   restent ceux de la page : on ne touche qu'à la mise en page.
   ================================================================== */

#main-content .et_pb_section.mc-sec-hero {
	position: relative;
	isolation: isolate;
	padding-top: clamp(64px, 8vw, 130px);
	padding-bottom: clamp(56px, 7vw, 100px);
	text-align: center;
	color: #E4E1D8;
}

/* Le voile. La maquette assombrit du haut vers le bas pour que le
   texte tienne quelle que soit l'image dessous — une photo claire en
   son milieu rendrait le titre illisible sans lui. */
#main-content .et_pb_section.mc-sec-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Allégé le 01/10, en même temps que .mc-hero-voile : ce voile-ci
	   venait S'AJOUTER à l'autre, et la vidéo passait sous les deux. Il
	   garde son rôle — assombrir le bas, là où le texte descend — mais
	   d'une main beaucoup plus légère. */
	background: linear-gradient(180deg, rgba(20, 19, 16, 0.10) 0%,
		rgba(20, 19, 16, 0.20) 60%, rgba(20, 19, 16, 0.30) 100%);
	pointer-events: none;
}

#main-content .et_pb_section.mc-sec-hero .et_pb_row {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
   LE CENTRAGE DE CE BLOC A ÉTÉ ABANDONNÉ LE 01/10 — nettoyé le 07/10
   ------------------------------------------------------------------

   Ce bloc, écrit le 30/09, centrait le hero : « la maquette le veut
   centré, deux boutons au milieu ». La section 13.2, le 01/10, est
   revenue dessus et l'a aligné à GAUCHE, pour la raison qu'elle
   explique — un titre long centré oblige l'œil à chercher le début de
   chaque ligne. Cette décision-là est celle qui tient.

   Mais les marges automatiques posées ici n'avaient pas été retirées,
   et elles GAGNENT sur la 13.2 : « #main-content .et_pb_section
   .mc-sec-hero h1 » porte deux classes, « #page-container .mc-sec-hero
   h1 » une seule. La 13.2 arrive plus tard dans la feuille, mais la
   spécificité passe avant l'ordre.

   Chaque bloc du hero se centrait donc sur SA PROPRE largeur, et
   commençait à une abscisse différente. Mesuré le 07/10 sur l'accueil,
   colonne à 232,5 px : sur-titre à 382,8 — titre à 251,9 — boutons à
   359,5. Trois bords gauches pour un même bloc. Le chapô, lui,
   paraissait aligné par chance : il remplit exactement les 660 px, et
   « auto » y vaut zéro.

   Les déclarations de centrage sont donc retirées, pas neutralisées
   ailleurs : les écrire deux fois, une pour poser et une pour défaire,
   serait exactement multiplier les endroits où vit le CSS.
   ------------------------------------------------------------------ */

#main-content .et_pb_section.mc-sec-hero h1 {
	max-width: 880px;
	margin: 0 0 22px;
	font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem);
	line-height: 1.1;
	color: #FFFFFF;
}

#main-content .et_pb_section.mc-sec-hero .mc-kicker {
	color: var(--mc-or, #D5AE05);
}

/* .mc-kicker et .gg-ref-cta-wrap sont des <p> eux aussi : c'est par
   cette règle qu'ils recevaient leurs marges automatiques, donc leur
   centrage. */
#main-content .et_pb_section.mc-sec-hero p {
	max-width: 660px;
	color: #E4E1D8;
	font-size: 1.03125rem;
}

/* Les boutons se regroupent, quel que soit le module qui les porte —
   lien Divi, CTA de référence ou bouton du panier. Ils s'alignent sur
   le bord gauche du bloc, comme tout le reste depuis le 01/10. */
#main-content .et_pb_section.mc-sec-hero .et_pb_text_inner,
#main-content .et_pb_section.mc-sec-hero .gg-ref-cta-wrap,
#main-content .et_pb_section.mc-sec-hero .mc-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

#main-content .et_pb_section.mc-sec-hero .et_pb_button_module_wrapper,
#main-content .et_pb_section.mc-sec-hero .gg-ref-cta-wrap {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

/* Divi contraint parfois la colonne du hero à une largeur réduite
   héritée d'un réglage de section : on la libère pour que le centrage
   porte sur toute la largeur de lecture. */
#main-content .et_pb_section.mc-sec-hero .et_pb_column {
	width: 100%;
	margin-right: 0;
}

/* ==================================================================
   11. LES RESTES DU CORPS DE GABARIT
   ==================================================================

   Masquées par assets/js/biblio.js quand un gabarit de bibliothèque
   est présent sur la page. Hors flux, hors lecture d'écran, mais
   toujours dans le document : rien n'est supprimé, et retirer la
   classe les fait réapparaître.

   La règle est ici et pas en ligne dans le script pour qu'elle reste
   visible à la relecture du socle — une section qui disparaît sans
   qu'on sache où c'est écrit est le genre de chose qu'on cherche une
   heure. */

#main-content .et_pb_section.mc-section-reste {
	display: none !important;
}

/* La section vide, elle, garde la même règle — c'est le même besoin :
   une section qui n'affiche rien ne doit pas laisser ses marges. */
#main-content .et_pb_section.mc-section-vide {
	display: none !important;
}

/* Le fil d'Ariane du gabarit : hauteur réduite, comme la maquette. */
#main-content .et_pb_section.mc-sec-ariane,
#main-content .et_pb_section.mc-sec-ariane > .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

#main-content .et_pb_section.mc-sec-ariane {
	padding-top: 10px;
	padding-bottom: 10px;
	background: var(--mc-fond-doux, #FAFAFA);
}

/* ==================================================================
   12. LA MARGE DE 128 px EN HAUT DE PAGE
   ==================================================================

   D'OÙ ELLE VIENT. Du personnalisateur de thème, fichier
   et-divi-customizer.min.css :

     #main-content .et-l .et_pb_section:first-child .et_pb_row:first-child
     { margin-top: 8rem; }

   Elle porte sur la première RANGÉE de la première section — pas sur
   la section, pas sur l'en-tête. C'est pourquoi mettre à zéro les
   rembourrages de la section et du menu ne changeait rien : la marge
   est un étage plus bas, et le fichier du personnalisateur se charge
   après les feuilles du plugin.

   POURQUOI ON PEUT LA RETIRER ICI. Mesuré le 01/10 : l'en-tête est en
   position static, dans le flux, 130 px de haut. Cette marge était une
   réserve pour un en-tête fixe ou absolu — il ne l'est plus. Sur un
   gabarit qui commence par le fil d'Ariane, elle ajoute 128 px de
   blanc sans aucune raison.

   PORTÉE VOLONTAIREMENT ÉTROITE. On ne neutralise la règle que quand
   la première section est NOTRE fil d'Ariane. Les pages qui
   commencent autrement gardent le comportement actuel : si un en-tête
   fixe réapparaît quelque part, elles ne passeront pas dessous.

   La règle du personnalisateur devrait être supprimée à la source —
   Apparence > Personnaliser > CSS additionnel. Tant qu'elle y est,
   celle-ci la neutralise par spécificité : un identifiant et quatre
   classes contre un identifiant et trois.
   ================================================================== */

#main-content .et-l .et_pb_section.mc-sec-ariane:first-child .et_pb_row:first-child,
#main-content .et_pb_section.mc-sec-ariane:first-child .et_pb_row:first-child {
	margin-top: 0;
}

/* ==================================================================
   13. LA MISE EN SCÈNE DES SECTIONS — relevé sur la maquette du 01/10
   ==================================================================

   Trois constats faits en direct sur /accueil-v5/ :

   1. .mc-sec-hero ne peignait AUCUN fond. Le titre, écrit en blanc, se
      retrouvait blanc sur blanc — invisible. Idem pour .mc-sec-sombre,
      dont le fond était transparent.
   2. Les rangées Divi plafonnaient à 900 px là où la maquette respire
      sur 1240.
   3. Le titre de page sortait en 46 px graisse 500 ; la maquette le pose
      en 56 px graisse 800, et le chapeau en 12 px capitales espacées.

   Tout ce bloc ne touche QUE nos sections. Une page Divi ordinaire,
   ailleurs sur le site, n'en voit rien. */

/* ------------------------------------------------------------------
   13.1 La largeur de lecture
   ------------------------------------------------------------------ */

#page-container .mc-sec-hero > .et_pb_row,
#page-container .mc-sec-clair > .et_pb_row,
#page-container .mc-sec-sombre > .et_pb_row,
#page-container .mc-sec-devis > .et_pb_row,
#page-container .mc-sec-ariane > .et_pb_row,
#page-container .et_pb_section:has(.mc-intro) > .et_pb_row {
	width: 92%;
	max-width: 1440px;
}

/* ------------------------------------------------------------------
   13.2 Le hero
   ------------------------------------------------------------------

   LE TEXTE EST À GAUCHE. Pas par goût : un titre long centré oblige
   l'œil à chercher le début de chaque ligne. La maquette l'aligne à
   gauche sur une colonne d'environ 620 px, le reste de la largeur
   restant libre — c'est ce vide qui donne sa tenue au bloc. */

#page-container .mc-sec-hero {
	background-color: var(--mc-noir, #1A1816);
	background-image: linear-gradient(115deg, #1A1816 0%, #2A2620 55%, #3A332A 100%);
	padding-top: 96px;
	padding-bottom: 96px;
}

#page-container .mc-sec-hero .et_pb_text_inner {
	max-width: 660px;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

#page-container .mc-sec-hero h1 {
	margin: 0 0 18px;
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

#page-container .mc-sec-hero p {
	color: #D8D2C6;
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 56ch;
}

#page-container .mc-sec-hero .gg-ref-cta-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* ------------------------------------------------------------------
   13.2 bis Le hero en BANDE — variante .mc-sec-hero--bande
   ------------------------------------------------------------------

   POURQUOI UNE VARIANTE ET PAS UN RÉGLAGE GLOBAL. Le hero de l'accueil
   est une scène : vidéo de fond, titre plein format, c'est la première
   image du site et elle est validée. Les pages intérieures, elles,
   n'ont rien à mettre en scène — le visiteur y arrive pour le contenu,
   et 834 px de bandeau (relevé sur /formations-v2/ le 01/10) repoussent
   la sous-navigation sous la ligne de flottaison.

   La bande vise la même hauteur que les fiches et les gammes, autour de
   400 px : deux pages voisines dont le bandeau ne fait pas la même
   hauteur se voient au basculement de l'une à l'autre.

   TROIS LEVIERS, PAS UN SEUL. Rogner le seul rembourrage aurait laissé
   un titre en 46 px sur quatre lignes. On réduit donc le rembourrage,
   on descend le titre d'un cran, ET on élargit la colonne de texte :
   élargie, la même phrase tient en deux lignes au lieu de quatre, et
   c'est ce qui fait le plus de hauteur gagnée.

   LA DOUBLE CLASSE N'EST PAS UNE COQUETTERIE. Le hero est déjà réglé
   deux fois dans ce fichier, dont une par
   « #main-content .et_pb_section.mc-sec-hero » — plus spécifique qu'un
   « #page-container .mc-sec-hero--bande ». Écrite simplement, la
   variante était ignorée sans bruit : le titre restait en 46 px et la
   section en 130 px de rembourrage (mesuré en direct le 01/10). On
   répète donc la classe de base devant le modificateur. */

#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* La colonne de lecture passe de 660 à 1040 px. Le !important n'est pas
   un raccourci : la largeur de 660 est elle-même posée en !important
   plus bas dans ce fichier (section 17), pour reprendre la main sur les
   styles en ligne de Divi. Sans lui, la variante est simplement
   ignorée. */
#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande .et_pb_text {
	max-width: 1040px !important;
}

/* ET TOUT S'EST RETROUVÉ CENTRÉ. Le titre et le chapô portent chacun
   « margin: 0 auto » et une largeur maximale propre. Tant que la
   colonne faisait 660 px, ces marges automatiques valaient zéro — les
   enfants étaient plus larges que leur parent. Élargie à 1040, la
   colonne leur a laissé de la place, et les marges automatiques ont
   fait leur travail : tout au milieu. On reprend donc l'alignement. */
#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande .et_pb_text_inner > * {
	margin-left: 0;
	margin-right: auto;
}

#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande h1 {
	margin: 0 0 12px;
	max-width: none;
	padding-bottom: 0;
	/* Espaces obligatoires autour du + : « 1.15rem+1.4vw » est une
	   expression invalide, et la déclaration entière est ignorée sans
	   le moindre avertissement. */
	font-size: clamp(1.625rem, 1.15rem + 1.4vw, 2.25rem);
	line-height: 1.15;
}

#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande p {
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 92ch;
}

#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande .mc-kicker {
	margin-bottom: 10px;
}

#main-content .et_pb_section.mc-sec-hero.mc-sec-hero--bande .gg-ref-cta-wrap {
	margin-top: 20px;
}

/* ------------------------------------------------------------------
   13.2 ter L'IMAGE À LA UNE, À DROITE DE LA BANDE
   ------------------------------------------------------------------

   Garde : body.mc-h-heroimage — posée par PHP, et seulement quand
   TROIS conditions tiennent ensemble : la case 13 est cochée, on est
   sur une page, et la page porte une image à la une. L'adresse de
   l'image arrive en variable --mc-hero-visuel, publiée dans l'en-tête
   par la même main. Aucune autre condition n'est écrite ici : un
   sélecteur ne sait pas lire une image à la une.

   LA MOITIÉ DROITE ÉTAIT VIDE. Relevé le 07/10 sur la page
   Formations : la bande fait 400 px de haut sur 1 905, le texte en
   occupe 1 040, et le reste est un aplat sombre où il ne se passe
   rien. C'est ce vide que l'image vient prendre.

   PAS DE VOILE SUR LA PHOTO, ET C'EST LE POINT. Un voile existe pour
   rendre un texte lisible par-dessus une image. Ici le texte n'est
   jamais dessus : il est à GAUCHE, l'image à DROITE. Un voile ne
   ferait donc que ternir la photo sans rien résoudre — c'est
   exactement ce qui rend ternes les bandeaux photo du web. Ce qui fait
   entrer l'image dans la bande, c'est un MASQUE : son bord gauche
   s'efface progressivement dans le noir au lieu de s'arrêter net.

   POURQUOI UN MASQUE ET PAS UN DÉGRADÉ PAR-DESSUS. Un dégradé posé
   sur l'image devrait reprendre exactement la couleur du fond, qui est
   lui-même un dégradé à 115° : le raccord se verrait au premier
   changement. Le masque, lui, rend l'image TRANSPARENTE, et c'est le
   fond réel qui apparaît dessous — quel qu'il soit, et quoi qu'on en
   fasse plus tard.

   LE PSEUDO-ÉLÉMENT PLUTÔT QU'UNE BALISE. L'image est décorative : la
   page la montre déjà en tant qu'image à la une, et le hero ne fait
   que la reprendre. Mise en fond, elle n'est pas annoncée deux fois
   par un lecteur d'écran et n'a pas d'alternative textuelle à inventer.

   La section porte déjà ::before — le voile — et isolation: isolate.
   ::after prend donc le même z-index négatif : derrière le texte,
   devant le fond, à l'intérieur de la section.

   SOUS 900 PX, L'IMAGE DISPARAÎT. Empilée, elle doublerait la hauteur
   de la bande, et les 400 px sont une règle de marque. Un écran étroit
   n'a pas la place d'une illustration à côté d'un titre.
   ------------------------------------------------------------------ */

body.mc-h-heroimage #page-container .mc-sec-hero--bande::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	z-index: -1;
	background-image: var(--mc-hero-visuel);
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 55%);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 55%);
}

/* Le texte se resserre pour ne pas courir sous l'image. 620 px est
   aussi une meilleure longueur de ligne que les 1 040 px d'avant : au
   delà, l'œil cherche le début de la ligne suivante. */
body.mc-h-heroimage #page-container .mc-sec-hero--bande .et_pb_text_inner {
	max-width: 620px;
}

@media (max-width: 900px) {
	body.mc-h-heroimage #page-container .mc-sec-hero--bande::after {
		display: none;
	}

	body.mc-h-heroimage #page-container .mc-sec-hero--bande .et_pb_text_inner {
		max-width: none;
	}
}

/* ------------------------------------------------------------------
   13.3 Le chapeau — « — EXPERTISE SECTORIELLE »
   ------------------------------------------------------------------
   Le tiret est dessiné, pas écrit : écrit, il serait lu à voix haute
   comme un mot et se retrouverait dans les résultats de recherche. */

#page-container .mc-kicker,
#page-container .mc-intro__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
}

#page-container .mc-kicker::before,
#page-container .mc-intro__kicker::before {
	content: "";
	width: 34px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   13.4 Les titres de section
   ------------------------------------------------------------------ */

#page-container .mc-sec-hero h2,
#page-container .mc-sec-clair h2,
#page-container .mc-sec-sombre h2,
#page-container .mc-sec-devis h2,
#page-container .mc-titre {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.015em;
}

#page-container .mc-chapo {
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mc-gris, #6E757C);
}

/* ------------------------------------------------------------------
   13.5 Le fond sombre
   ------------------------------------------------------------------ */

#page-container .mc-sec-sombre {
	background-color: var(--mc-noir, #1A1816);
}

#page-container .mc-sec-sombre,
#page-container .mc-sec-sombre h2,
#page-container .mc-sec-sombre h3,
#page-container .mc-sec-sombre p {
	color: #E8E3D8;
}

#page-container .mc-sec-sombre h2,
#page-container .mc-sec-sombre .mc-etape__titre {
	color: #FFFFFF;
}

#page-container .mc-sec-sombre .mc-chapo {
	color: #B9B4A6;
}

/* ------------------------------------------------------------------
   UNE PHOTO SOUS LE FOND SOMBRE — 09/10
   ------------------------------------------------------------------
   Demandé pour la section Recyclage de l'accueil.

   POURQUOI PAS LE RÉGLAGE DE FOND DE DIVI. Il existe, mais il perdrait :
   le fond sombre est écrit ici avec un identifiant dans le sélecteur, et
   une image posée dans le constructeur n'a que des classes. Elle serait
   recouverte sans un mot d'explication, et on chercherait longtemps.

   LA PHOTO EST DU CONTENU, LE TRAITEMENT EST DU STYLE. L'adresse de
   l'image reste donc dans la page — une propriété personnalisée posée
   sur la section — et le voile, le cadrage et le repli vivent ici. Une
   autre section pourra prendre une autre photo sans toucher à la CSS,
   et le jour où le voile change, il change pour toutes.

   LE VOILE N'EST PAS UN CAPRICE. Le fond sombre existe pour que le
   texte clair se lise ; une photo posée nue en dessous ferait tomber le
   contraste là où elle est claire. On garde donc exactement le dégradé
   d'origine, rendu translucide : la section reste la même, la photo
   s'invite dedans. Comparé à l'écran à 90 % et à 78 % — à 90 %, on
   devine un aplat vaguement vert et la photo ne sert à rien ; à 78 %,
   les collines se lisent et le texte ne faiblit pas.

   LA VALEUR DE REPLI « none » COMPTE. Sans elle, une section qui
   porterait la classe sans l'adresse rendrait toute la déclaration
   invalide — et perdrait son fond, dégradé compris. Avec, elle retombe
   simplement sur le fond sombre ordinaire.
   ------------------------------------------------------------------ */

/* LA MÊME RÈGLE SERT LES SECTIONS NOMMÉES — 14/10.
   mc-sec-photo--<clé> est la classe que porte une section à qui l'on a
   donné SA photo dans les réglages. Elle fait deux choses à la fois :
   elle déclenche ce traitement, et elle redéfinit --mc-sec-visuel pour
   elle seule (la valeur est publiée par class-harmonisation.php, qui
   seule connaît l'adresse du fichier).
   Le dégradé est exactement celui de mc-sec-fonce et de mc-sec-sombre,
   aux alphas près : une section qui prend une photo garde donc
   EXACTEMENT la teinte qu'elle avait en aplat. C'est ce qui permet à la
   page À propos de passer « Notre groupe » en photo sans que la section
   change de couleur. */
#main-content .et_pb_section.mc-sec-sombre--photo,
#main-content .et_pb_section[class*="mc-sec-photo--"] {
	background-image:
		linear-gradient(135deg, rgba(58, 53, 42, 0.78) 0%, rgba(38, 36, 31, 0.70) 55%, rgba(28, 27, 24, 0.80) 100%),
		var(--mc-sec-visuel, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* LES ÉTAPES REDEVIENNENT OPAQUES — relevé à l'écran dans la foulée.
 *
 * Les cartes d'étape sont un film de blanc à 4 %, posé là pour se
 * détacher d'un APLAT sombre : un voile sur un voile, c'est l'aplat qui
 * tient le contraste. Sous une photo, ce film ne tient plus rien — les
 * collines traversaient les quatre cartes, qui cessaient d'être des
 * cartes.
 *
 * Elles reprennent donc un fond plein, à la teinte qu'elles avaient sur
 * le dégradé : ni plus claires, ni plus sombres qu'avant, simplement
 * opaques. Le filet blanc à 14 % ne bouge pas, il dessine toujours le
 * même contour.
 *
 * La règle ne vit que sous --photo : partout ailleurs, la
 * transparence reste la bonne réponse. */
#main-content .et_pb_section.mc-sec-sombre--photo .mc-etape {
	background: #2B2924;
}

/* ------------------------------------------------------------------
   13.6 La respiration verticale
   ------------------------------------------------------------------
   56 px suffisaient tant que les sections n'avaient qu'un titre. Avec
   un chapeau, une grille et un bouton, la maquette passe à 96. */

/* RAMENÉ DE 88 À 64 PX LE 08/10. Demandé à l'écran : « la hauteur de la
   section est trop grande ». 88 px venait de la maquette et se défendait
   sur une section chargée ; répété sur sept sections d'affilée, il
   étirait l'accueil sans rien ajouter. 64 px gardent la respiration
   entre deux fonds différents et rendent 48 px par section. */
#page-container .mc-sec-clair,
#page-container .mc-sec-blanc,
#page-container .mc-sec-sombre,
#page-container .mc-sec-fonce,
#page-container .mc-sec-devis,
#page-container .et_pb_section:has(> .et_pb_row .mc-intro) {
	padding-top: 64px;
	padding-bottom: 64px;
}

/* UNE BANDE N'EST PAS UNE SECTION — 08/10.
 *
 * La bande de chiffres de l'accueil mesurait 261 px pour 85 px de
 * contenu : le rembourrage valait deux fois ce qu'il entourait. Une
 * rangée de chiffres n'est pas une section de contenu, c'est un liseré
 * entre deux sections ; elle n'a pas besoin du rythme des autres.
 *
 * La règle se déclenche sur ce que la section CONTIENT — rien d'autre
 * qu'une rangée de chiffres — et non sur une classe à poser : une
 * section qui gagnerait du contenu reprendrait d'elle-même le rythme
 * normal. Mesuré après : 133 px au lieu de 261. */
#page-container .et_pb_section:has(> .et_pb_row:only-child .mc-chiffres) {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Une section qui porte une introduction est une section de contenu :
   elle suit le même rythme, qu'elle ait un fond ou non. :has() n'est pas
   imbriqué ici, donc le sélecteur est valide. */

/* SAUF LE HERO D'UNE FICHE, QUI PORTE DÉJÀ LE SIEN.
   .mc-hero a ses 52 px, ceux de la maquette. Les 88 px de la section
   s'y ajoutaient : 140 px entre le fil d'Ariane et la photo du produit,
   mesuré le 01/10 sur RR100005. Un gouffre, et personne ne sait d'où il
   vient parce qu'il est fait de deux rembourrages corrects. La section
   laisse donc le hero respirer seul.

   LA RÈGLE VISE LE HERO, PAS UN GABARIT. Écrite d'abord sur
   .mc-sec-fiche, elle ne couvrait que la section du gabarit Référence :
   celle de la gamme, qui porte mc-sec-sombre, gardait ses 88 px et sa
   bande faisait 478 px contre 425 sur la fiche. Toute section qui
   contient un hero laisse désormais le hero décider. */
#page-container .mc-sec-fiche,
#page-container .et_pb_section:has(.mc-hero) {
	padding-top: 0;
	padding-bottom: 0;
}

/* ==================================================================
   14. LE HERO EN VIDÉO, ET SON TEXTE À GAUCHE
   ==================================================================

   LE TEXTE ÉTAIT ENCORE CENTRÉ. Poser max-width sur la boîte de texte
   ne suffisait pas : Divi applique text-align:center en amont, et un
   bloc étroit centré DANS une boîte alignée à gauche reste visuellement
   au milieu. Il faut donc reprendre l'alignement explicitement, à la
   fois sur la boîte, sur ses enfants, et sur le chapeau — dont la
   disposition en flex a son propre axe. */

#page-container .mc-sec-hero .et_pb_text_inner,
#page-container .mc-sec-hero .et_pb_text_inner > * {
	text-align: left !important;
	margin-left: 0;
	margin-right: auto;
}

#page-container .mc-sec-hero .mc-kicker {
	justify-content: flex-start;
}

/* ------------------------------------------------------------------
   LA VIDÉO DE FOND
   ------------------------------------------------------------------

   Elle est DÉCORATIVE : muette, en boucle, sans commande, et retirée de
   l'arbre d'accessibilité. Un lecteur d'écran n'a rien à en dire.

   LE VOILE N'EST PAS UNE COQUETTERIE. Sans lui, le texte blanc passe
   sur des images claires et devient illisible une seconde sur deux. Le
   dégradé garde le côté gauche — celui qui porte le texte — nettement
   plus sombre que le droit.

   SI LA VIDÉO NE CHARGE PAS, le fond dégradé de la section reste
   dessous : la page ne montre jamais un rectangle vide. */

#page-container .mc-sec-hero {
	position: relative;
	overflow: hidden;
}

#page-container .mc-sec-hero > .et_pb_row {
	position: relative;
	z-index: 2;
}

.mc-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.mc-hero-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* ALLÉGÉ LE 01/10 : à 0.94 / 0.86 / 0.55, la vidéo ne se devinait pas
	   — autant poser une image fixe. Les trois arrêts descendent d'un
	   cran chacun. Le premier reste le plus dense parce que c'est là que
	   passe le texte blanc : c'est lui qui fixe le plancher, pas le
	   rendu de la vidéo.
	   ATTENTION, CE VOILE N'EST PAS SEUL : la section pose le sien en
	   ::before, par-dessus. Les deux se multiplient — c'est ce qui
	   faisait 92 % d'obscurité à gauche. Toucher à l'un sans l'autre ne
	   change presque rien. */
	background: linear-gradient(100deg, rgba(16, 14, 12, 0.74) 0%, rgba(16, 14, 12, 0.56) 42%, rgba(16, 14, 12, 0.22) 100%);
}

/* Quelqu'un qui a demandé moins d'animations à son système ne doit pas
   subir une vidéo en boucle : le voile et le dégradé suffisent. */
@media (prefers-reduced-motion: reduce) {
	.mc-hero-video {
		display: none;
	}
}

/* ------------------------------------------------------------------
   15. LE VISUEL D'UNE CARTE
   ------------------------------------------------------------------
   Posé en tête de carte, hauteur fixe, recadré au centre : six cartes
   de secteur dont les images ont six formats différents doivent donner
   six cartes identiques. */

.mc-carte__visuel {
	display: block;
	width: 100%;
	height: 172px;
	overflow: hidden;
	background: linear-gradient(140deg, #3A332A 0%, #6E6A5F 60%, #9A9183 100%);
}

.mc-carte__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mc-carte:hover .mc-carte__visuel img {
	transform: scale(1.04);
}

/* ------------------------------------------------------------------
   14 bis. LA LUMIÈRE QUI SUIT LE CURSEUR
   ------------------------------------------------------------------

   Reprise de la maquette : un halo doré qui suit la souris sur le hero,
   et une trame de points dorés qui se révèle au même endroit. Les deux
   sont posés sous le texte et ne reçoivent aucun clic.

   LA POSITION EST UNE VARIABLE, PAS UN STYLE EN LIGNE. Le script ne fait
   qu'écrire --mx et --my sur la section ; tout le dessin reste ici. Si
   le script ne charge pas, le halo reste au centre et invisible — rien
   ne casse, il ne se passe simplement rien.

   LE HALO NE S'ALLUME QU'AU SURVOL. Allumé en permanence, il
   deviendrait un décor fixe, et l'effet perdrait ce qui en fait
   l'intérêt : la réaction. */

#page-container .mc-sec-hero {
	--mx: 50%;
	--my: 50%;
	isolation: isolate;
}

.mc-hero-halo,
.mc-hero-trame {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.mc-hero-halo {
	background: radial-gradient(480px circle at var(--mx) var(--my),
		rgba(213, 174, 5, 0.30),
		rgba(213, 174, 5, 0.08) 40%,
		transparent 70%);
}

.mc-hero-trame {
	background-image: radial-gradient(rgba(213, 174, 5, 0.5) 1px, transparent 1px);
	background-size: 26px 26px;
	background-position: var(--mx) var(--my);
}

#page-container .mc-sec-hero:hover .mc-hero-halo {
	opacity: 1;
}

#page-container .mc-sec-hero:hover .mc-hero-trame {
	opacity: 0.12;
}

/* La vidéo est légèrement agrandie : un recadrage à 100 % laisse voir
   les bords quand la section est plus large que le format du film. */
.mc-hero-video {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.mc-hero-halo,
	.mc-hero-trame {
		display: none;
	}
}

/* ------------------------------------------------------------------
   14 ter. LES COUCHES DU HERO DOIVENT SE CALER SUR LA SECTION
   ------------------------------------------------------------------

   CE QUE J'AI VU, APRÈS AVOIR TROP LONGTEMPS MESURÉ SANS REGARDER :
   la vidéo, le voile et le halo se sont calés non pas sur la section
   mais sur la BOÎTE DE TEXTE, large de 660 px et centrée. Résultat à
   l'écran : un rectangle sombre au milieu du hero, avec le texte
   dedans, et la vidéo nulle part.

   La cause est banale. « position: absolute » se cale sur le plus
   proche ancêtre positionné ; Divi pose position:relative sur ses
   modules. L'ancêtre le plus proche n'était donc pas la section mais le
   module de texte. Il faut rendre la chaîne intermédiaire neutre pour
   que la section redevienne le repère.

   Et tant qu'on y est : c'est le MODULE qui porte la largeur de lecture
   et l'alignement, pas sa boîte intérieure. Posée à l'intérieur, la
   contrainte laissait le bloc entier centré par Divi. */

#page-container .mc-sec-hero .et_pb_module,
#page-container .mc-sec-hero .et_pb_text_inner {
	position: static;
}

#page-container .mc-sec-hero .et_pb_text {
	max-width: 660px;
	margin-left: 0;
	margin-right: auto;
}

#page-container .mc-sec-hero .et_pb_text_inner {
	max-width: none;
}

/* ------------------------------------------------------------------
   16. PAS DE HALO AUTOUR DES BOUTONS
   ------------------------------------------------------------------
   La maquette dessine une lueur dorée derrière le bouton principal.
   Elle ne passe pas sur l'orange : le halo bave et le bouton paraît
   flou. Décision du 01/10 — la forme en pilule et la couleur pleine
   suffisent à le faire ressortir. */

#page-container .gg-ref-cta,
#page-container .gg-qc-add,
#page-container .gg-qc-submit,
#page-container .mc-bouton,
#page-container .mc-doc-btn,
#page-container .mc-cta,
#page-container .wpcf7-submit {
	box-shadow: none;
}

#page-container .gg-ref-cta:hover,
#page-container .gg-qc-add:hover,
#page-container .mc-bouton:hover,
#page-container .mc-cta:hover,
#page-container .wpcf7-submit:hover {
	box-shadow: none;
}

/* ------------------------------------------------------------------
   17. LE HERO, TROISIÈME PASSE — ET CETTE FOIS AVEC !important
   ------------------------------------------------------------------

   CONSTAT, relevé en inspectant la page et non en la supposant :
   .et_pb_text_inner reste en position:relative malgré la règle écrite
   plus haut, et la rangée reste à 900 px malgré max-width:1440px. Les
   deux déclarations sont bien chargées — elles perdent.

   POURQUOI. Divi 5 génère une feuille PAR MODULE, avec des sélecteurs
   plus spécifiques que les nôtres et chargée après. On ne gagne pas
   cette course par la spécificité sans écrire des sélecteurs à rallonge
   qui casseront au prochain numéro de module (et_pb_text_15 aujourd'hui,
   et_pb_text_18 demain).

   !important est ici le choix le plus STABLE, pas le plus paresseux :
   quatre déclarations, portée au seul hero, et indépendantes de la
   numérotation des modules. C'est le genre d'endroit pour lequel le mot
   existe. */

/* TOUTE la chaîne, rangée comprise. Mesuré : une fois le module et la
   colonne neutralisés, c'est la RANGÉE qui devenait le repère — et elle
   fait 900 px. Le bloc de référence doit être la section, donc tout ce
   qui est entre les deux redevient neutre. */
#page-container .mc-sec-hero > .et_pb_row,
#page-container .mc-sec-hero .et_pb_column,
#page-container .mc-sec-hero .et_pb_text,
#page-container .mc-sec-hero .et_pb_text_inner {
	position: static !important;
}

#page-container .mc-sec-hero > .et_pb_row,
#page-container .mc-sec-clair > .et_pb_row,
#page-container .mc-sec-sombre > .et_pb_row,
#page-container .mc-sec-devis > .et_pb_row,
#page-container .et_pb_section:has(.mc-intro) > .et_pb_row {
	width: 92% !important;
	max-width: 1440px !important;
}

#page-container .mc-sec-hero .et_pb_text {
	max-width: 660px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------------
   18. LES ÉTAPES RÉAGISSENT AU SURVOL
   ------------------------------------------------------------------
   Une carte qui porte une flèche annonce qu'on peut aller plus loin :
   elle doit le confirmer sous le curseur. Même geste que les cartes
   horizontales — légère montée, bordure dorée, image qui respire. */

.mc-etape {
	transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.mc-etape:hover {
	transform: translateY(-4px);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.mc-etape__visuel img {
	transition: transform 0.5s ease;
}

.mc-etape:hover .mc-etape__visuel img {
	transform: scale(1.06);
}

/* ------------------------------------------------------------------
   19. LA BARRE DE RECHERCHE RESPIRE
   ------------------------------------------------------------------
   Collée aux trois cartes, elle paraissait leur appartenir. Elle est un
   point d'entrée distinct : l'écart le dit. */

#page-container .mc-product-search {
	margin-bottom: 34px;
}

/* ------------------------------------------------------------------
   20. LE TEXTE REPASSE DEVANT — PAR LE DESSOUS
   ------------------------------------------------------------------

   La vidéo remplit enfin la section, et le texte a disparu derrière.
   C'est la suite logique de la correction précédente : pour que la
   rangée se classe au-dessus, il lui fallait un z-index, donc une
   position — or c'est justement sa position qu'on vient d'ôter pour que
   la vidéo se cale sur la section. Les deux besoins se contredisent.

   LA SORTIE EST PAR LE BAS. Plutôt que de remonter le texte, on
   descend les couches décoratives SOUS le flux, en z-index négatif.
   Le texte n'a alors besoin d'aucune position ni d'aucun z-index : il
   est dans le flux, donc au-dessus. isolation:isolate sur la section
   empêche ces couches négatives de glisser derrière la section
   elle-même et d'en sortir. C'est la construction de la maquette, que
   j'aurais dû reprendre telle quelle dès le départ.

   LA HAUTEUR SE RESSERRE. 96 px de rembourrage donnaient un hero de
   700 px : la bande de chiffres passait sous la ligne de flottaison.
   72 px la ramènent dans le champ. */

.mc-hero-video {
	z-index: -3;
}

.mc-hero-voile {
	z-index: -2;
}

.mc-hero-halo,
.mc-hero-trame {
	z-index: -1;
}

#page-container .mc-sec-hero > .et_pb_row {
	z-index: auto;
}

#page-container .mc-sec-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

/* ==================================================================
   21. LA SOUS-NAVIGATION COLLANTE
   ==================================================================
   Les maquettes de gamme et de fiche épinglent la barre d'ancres sous
   l'en-tête pendant toute la descente. Deux obstacles, tous deux
   invisibles à la lecture du code.

   1. LE CONTENEUR. .mc-subnav était déjà en position:sticky, sans
      effet : son bloc conteneur est la SECTION Divi qui l'entoure, haute
      de 62 px. Un élément collant ne voyage que dans son conteneur — il
      n'avait nulle part où aller. C'est donc la section qui colle, dont
      le bloc conteneur est #main-content et couvre la page entière.

   2. L'OVERFLOW. Divi Pixel pose overflow-x:hidden sur le body, ce qui
      en fait un conteneur de défilement et ANNULE tout position:sticky
      à l'intérieur, sans message d'erreur. overflow-x:clip coupe ce qui
      dépasse exactement pareil, sans créer ce conteneur. C'est le même
      garde-fou contre le défilement horizontal, en laissant sticky
      fonctionner. */

/* DEUX SÉLECTEURS PLUS LOURDS QUE CELUI D'EN FACE.
   « html, body » pèse autant que le « body.dipi-mobile-menu-fullscreen »
   de Divi Pixel : à poids égal, c'est l'ordre d'impression des feuilles
   qui tranche, et la leur passe après la nôtre. Même piège que le ruban
   des équipes ce matin. On préfixe par html pour passer devant, sans
   !important. */
html,
body,
html body,
html body.dipi-mobile-menu-fullscreen {
	overflow-x: clip;
}

/* La hauteur de l'en-tête fixe, mesurée le 01/10 : 92 px, plus la barre
   d'administration quand elle est là. */
:root {
	--mc-entete: 92px;
}

body.admin-bar {
	--mc-entete: 124px;
}

#main-content .et_pb_section:has(.mc-subnav) {
	/* La section ne garde aucun rembourrage : c'est la barre qui porte le
	   sien. Sur la page Formations la section en avait 56 en haut et en
	   bas, et la bande montait à 202 px contre 62 ailleurs. */
	padding-top: 0;
	padding-bottom: 0;
}

#main-content .et_pb_section:has(.mc-subnav),
#main-content .mc-subnav-flottante {
	position: sticky;
	top: var(--mc-entete);
	z-index: 90;
	background: var(--mc-fond-doux, #FAFAFA);
	border-bottom: 1px solid var(--mc-bord, #ECECEC);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* La barre de secours n'est pas dans une section Divi : elle reprend
   ici la largeur de lecture que la rangée lui donnait.

   SANS REMBOURRAGE. .mc-subnav porte déjà le sien, 14 px en haut et en
   bas : en le remettant sur l'enveloppe, la bande montait à 90 px au
   lieu des 61 de la fiche, et la hauteur en trop se lisait comme une
   seconde barre vide sous les pastilles. Relevé le 01/10 sur la gamme. */
#main-content .mc-subnav-flottante {
	padding: 0;
}

#main-content .mc-subnav-flottante .mc-subnav__inner {
	/* 92% / 1440px : exactement la largeur de lecture des rangées Divi
	   du site, pour que les pastilles s'alignent sur le titre de la
	   section suivante comme sur la fiche référence. */
	width: 92%;
	max-width: 1440px;
	margin: 0 auto;
}

#main-content .mc-subnav-flottante[hidden] {
	display: none;
}

/* La barre elle-même ne porte plus de fond : il s'arrêtait à 1440 px et
   dessinait un rectangle gris au milieu d'une bande blanche. Le fond
   appartient à la section, qui va d'un bord à l'autre. */
#main-content .mc-subnav {
	background: transparent;
	border: 0;
}

/* ==================================================================
   22. LA RANGÉE DE BOUTONS HÉRITÉE DES GABARITS
   ==================================================================
   Les gabarits Gamme et Référence portaient une ligne « Hero —
   boutons » avec le HTML écrit en dur. Le hero rend désormais ces
   boutons lui-même, sous le chapô, là où la maquette les pose. Les
   gabarits de la bibliothèque sont corrigés, mais le Theme Builder
   travaille sur une COPIE : tant qu'elle n'est pas réimportée, la
   vieille rangée reste et les boutons apparaissent deux fois.

   Cette règle ne s'applique QUE si le hero en affiche déjà une : une
   page dont le hero ne rend aucun bouton garde la rangée de son
   gabarit. Et elle ne vise que la rangée posée directement dans un
   module texte — celle du hero est imbriquée dans .mc-hero__corps,
   elle n'est jamais touchée.

   À retirer le jour où tous les corps de page auront été réimportés.
   Vérifié le 01/10 sur la gamme : 4 boutons rendus, 2 visibles. */

#main-content:has(.mc-hero .gg-ref-cta-wrap) .et_pb_text_inner > .gg-ref-cta-wrap {
	display: none;
}

/* ==================================================================
   23. HARMONISATION DES PAGES ANCIENNES
   ==================================================================

   DEMANDE DU 05/10/2026, ET SA CONTRAINTE. Aligner l'apparence des pages
   qui n'ont pas été refaites sur celle des pages refaites — six points
   nommés par le client : hero, boutons, largeur de contenu, formulaire de
   contact, fond du contenu, encadrés. Avec une consigne nette : « on ne
   touche pas au contenu ». Tout ce qui suit est donc de la présentation,
   et rien d'autre : aucun texte déplacé, aucun module Divi réécrit, rien
   à faire revalider par le client.

   LA GARDE. Chaque bloc commence par body.mc-h-… : une classe posée par
   Metaconcept_Core_Harmonisation quand la case correspondante est cochée
   dans Réglages. Décochée, la classe est absente et pas une déclaration
   ci-dessous ne s'applique — installer la version ne change rien, et une
   harmonisation qui déplaît se retire seule, sans emporter les cinq
   autres.

   POURQUOI TOUT EST ICI ET PAS DANS UNE FEUILLE À PART. Le socle part
   déjà sur toutes les pages ; une feuille de plus serait un endroit de
   plus où chercher. La règle du projet est de ne pas multiplier les
   domiciles du CSS, et une centaine de déclarations ne justifie pas d'y
   déroger.

   LES MESURES CITÉES ont été relevées en ligne le 05/10 sur la préprod,
   page par page, en styles calculés. Elles sont écrites ici parce qu'une
   valeur sans son origine ne se vérifie pas.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   23.1 — La bande de titre
   ------------------------------------------------------------------

   RELEVÉ. /devis/ 206 px, /contact/ 206 px, /expertise/ 227 px,
   /actualites/ 438 px, /rse/environnement/ 400 px, /recyclage/ 404 px
   sans aucun fond. Les titres : 48 px graisse 700 en #F2F2F2, sauf
   /recyclage/ en 36 px graisse 700 gris. Les pages refaites, elles,
   posent une bande de 400 px, dégradé #1A1816 → #3A332A, titre 36 px
   graisse 800 blanc.

   TROIS GARDES, ET CHACUNE A SA RAISON.

   :not(:has(.mc-hero)) — une page déjà refaite porte son hero maison.
   Sans cette garde, sa première section Divi recevrait une seconde
   bande sombre par-dessus la première. Les 990 fiches et les archives
   sont exclues par le même sélecteur, puisqu'elles rendent .mc-hero.
   Vérifié le 05/10 en injectant ces règles sur /presentation/ : zéro
   écart mesuré, la page refaite ne bouge pas d'un pixel.

   .et_builder_inner_content > — ET NON « #main-content > ». Première
   écriture, essayée en ligne le 05/10 : aucune règle ne mordait. Les
   sections ne sont pas filles de #main-content, elles sont quatre crans
   plus bas — article > .entry-content > .et-l--post >
   .et_builder_inner_content. C'est ce dernier qui est le vrai parent,
   et c'est donc lui qui doit porter le signe de filiation, sans quoi
   :first-of-type ne désigne rien.

   :first-of-type — la bande de titre est la première section, toujours.

   :has(h1) — et elle contient le titre de la page. Une page qui
   commence directement par du contenu n'a pas de bande de titre à
   harmoniser ; elle n'est pas touchée.

   :has() est utilisé ailleurs dans cette feuille (section 22) et tenu
   pour acquis. Sur un navigateur qui l'ignorerait, le sélecteur entier
   est invalide et la règle tombe : l'échec est silencieux et sans
   dégât, la page garde son apparence actuelle.

   LA PHOTO DE FOND EST CONSERVÉE. /rse/environnement/ porte une
   photographie en fond de bande ; l'écraser par le dégradé serait une
   perte. Le dégradé est donc posé en calque semi-opaque sur un
   ::before, par-dessus ce qui existe. Sans photo, c'est la couleur de
   fond déclarée juste en dessous qui apparaît à travers — une seule
   règle couvre les deux cas. */

body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) {
	position: relative;
	box-sizing: border-box;
	/* Plancher, pas hauteur fixe : un titre long reste libre de pousser
	   la bande, comme sur les fiches (décision du 01/10). */
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--mc-noir, #1A1816);
}

body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1)::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Les mêmes arrêts que le hero maison (hero.css, variante sombre),
	   rendus translucides pour laisser passer une éventuelle photo. */
	background-image: linear-gradient(115deg, rgba(26, 24, 22, 0.94) 0%, rgba(42, 38, 32, 0.82) 55%, rgba(58, 51, 42, 0.68) 100%);
	pointer-events: none;
}

/* Le calque est en position absolue : sans ce cran, les rangées
   passeraient dessous et le texte disparaîtrait derrière le dégradé. */
body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) > * {
	position: relative;
	z-index: 1;
}

body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) h1 {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	/* !important SUR LA SEULE COULEUR. Divi écrit la couleur des titres
	   dans body #page-container .et_pb_section .et_pb_text_N h1, en
	   !important : à spécificité égale, c'est sa feuille en ligne qui
	   l'emporte parce qu'elle sort après. La taille et la graisse, elles,
	   passent sans forcer — Divi ne les déclare pas de la même façon.
	   Mesuré le 05/10 : sans ce mot, le titre de /recyclage/ restait gris
	   #4D4D4D sur la bande sombre, donc illisible. */
	color: #FFFFFF !important;
}

/* Le sur-titre et le chapô d'une bande ancienne sont des paragraphes
   ordinaires. Sur fond sombre ils doivent au moins rester lisibles.

   LE SUR-TITRE DORÉ EST EXCLU — 07/10. Un .mc-kicker est un
   paragraphe, lui aussi : cette règle le repeignait donc en blanc,
   !important à l'appui, et effaçait l'or que lui donnent la section 10
   et la 13.2. Signalé sur l'accueil : « Source d'alliages engagés »
   sortait blanc. La règle vise les paragraphes ORDINAIRES d'une bande
   ancienne — un élément qui a déjà sa couleur de marque n'en fait pas
   partie. */
body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) p:not(.mc-kicker),
body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) h2 {
	color: rgba(255, 255, 255, 0.86) !important;
}

/* LES DEUX BANDES PLUS SOMBRES EN HAUT ET EN BAS — corrigé le 08/10.
 *
 * Signalé sur /panier-devis/, capture à l'appui. Mesuré : la section
 * de titre va de 162 à 652 px et porte notre fond #1A1816. Elle
 * contient un module « En-tête pleine largeur » de Divi qui s'étend de
 * 218 à 596 — donc À L'INTÉRIEUR des 56 px de marge haute et basse de
 * la section — et qui porte son propre voile, rgba(51,51,51,0.6),
 * écrit par Divi dans une règle numérotée en ligne.
 *
 * Deux noirs se superposent donc sur la partie centrale et pas sur les
 * marges : d'où une bande plus sombre en haut, une en bas, et un
 * milieu plus clair. Ce n'est pas un dégradé raté, ce sont deux fonds
 * qui ne couvrent pas la même surface.
 *
 * CE VOILE N'A PLUS DE RAISON D'ÊTRE. Il servait à rendre un titre
 * lisible sur la photo de fond du module. La case 1 remplace cette
 * photo par un aplat déjà sombre : le voile n'éclaircit plus rien, il
 * ne fait que dessiner ses propres bords.
 *
 * On vise la classe NON numérotée : le numéro change d'une page à
 * l'autre, et la règle doit valoir pour les trois pages concernées —
 * /panier-devis/, /espace-recrutement/ et /cours-metaux/ — comme pour
 * celles qui s'y ajouteront. Pas de !important : notre sélecteur porte
 * un identifiant, celui de Divi une seule classe. */
body.mc-h-hero #main-content:not(:has(.mc-hero)) .et_builder_inner_content > .et_pb_section:first-of-type:has(h1) .et_pb_fullwidth_header {
	background-color: transparent;
}

/* LES PAGES SANS AUCUNE SECTION DIVI — les six pages « recyclage-… », servies
   par le gabarit par défaut du thème. Elles n'ont pas de bande, et on
   ne peut pas leur en fabriquer une ici : le titre vit dans une colonne
   de 1 112 px avec une colonne latérale garnie à sa droite (relevé le
   05/10 : #sidebar fait 328 px et contient les derniers articles). Une
   bande pleine largeur depuis cette colonne passerait par-dessus. La
   voie des marges négatives en vw a par ailleurs déjà été essayée et
   écartée le 02/10, barre de défilement comprise (hero.css, section 2
   bis).

   Ce qui est fait ici est donc modeste et assumé : le titre prend la
   voix du site — 36 px graisse 800 au lieu de 30 px graisse 500 — et
   rien de plus. Une vraie bande sur ces pages demande un gabarit dans
   le Theme Builder, qui est une manipulation manuelle. */
body.mc-h-hero #main-content:not(:has(.et_pb_section)) #left-area > article > h1.entry-title {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--mc-encre, #4D4D4D);
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   23.2 — Les boutons Divi ordinaires
   ------------------------------------------------------------------

   La section 2 de cette feuille habille les boutons maison et
   .et_pb_button.mc-action — c'est-à-dire ceux auxquels une classe a été
   ajoutée exprès. Les boutons des pages anciennes n'en portent aucune :
   relevé le 05/10, /recyclage/ en affiche 7 et /rse/ 3, en contour or
   2 px #D6AE01, angles droits, 18 px graisse 500, rembourrage 5/18. Cet
   or n'est même pas celui de la charte (#D5AE05).

   LE !important NE SUFFIT PAS, ET VOICI POURQUOI LA CLASSE EST DOUBLÉE.

   Première écriture : body.mc-h-boutons #page-container .et_pb_button,
   tout en !important. Essayée en ligne sur /recyclage/ le 05/10 :
   le rembourrage et le retrait de la flèche passaient, mais le fond, le
   filet, le rayon et la taille du texte restaient ceux d'avant. La règle
   adverse a été retrouvée dans la feuille en ligne de Divi :

       body #page-container .et_pb_section .et_pb_button_7

   soit un identifiant, deux classes, un élément — exactement la
   spécificité de la première écriture. À égalité, c'est la dernière
   servie qui gagne, et la feuille de Divi sort après le socle. D'où la
   classe répétée .et_pb_button.et_pb_button : une classe de plus, donc
   un cran de spécificité de plus, sans rien inventer dans le balisage.
   Relevé après correction : les 7 boutons de /recyclage/ passent en
   orange, pilule, 15 px graisse 600, rembourrage 14/28.

   LA PORTÉE EST #main-content, PAS #page-container. La consigne du
   projet est de ne plus toucher aux en-têtes et pieds de page globaux ;
   #main-content les laisse dehors par construction. (Relevé au passage :
   l'en-tête n'utilise aucun .et_pb_button — mais la portée ne doit pas
   dépendre de ce constat du jour.) */

body.mc-h-boutons #main-content .et_pb_button.et_pb_button {
	border-radius: var(--mc-rayon-bouton) !important;
	background-color: var(--mc-action) !important;
	border: 1px solid var(--mc-action) !important;
	color: var(--mc-action-texte) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	padding: 14px 28px !important;
	transition: background-color var(--mc-ease), border-color var(--mc-ease);
}

body.mc-h-boutons #main-content .et_pb_button.et_pb_button:hover,
body.mc-h-boutons #main-content .et_pb_button.et_pb_button:focus-visible {
	background-color: var(--mc-action-hover) !important;
	border-color: var(--mc-action-hover) !important;
	color: var(--mc-action-texte) !important;
}

/* Divi pose une flèche en ::after et la fait glisser au survol, ce qui
   décale le mot. La section 2 fait déjà ce retrait pour .mc-action ;
   ici il vaut pour tous les boutons de contenu. */
body.mc-h-boutons #main-content .et_pb_button.et_pb_button::after {
	display: none !important;
}

/* ------------------------------------------------------------------
   23.3 — La largeur de contenu
   ------------------------------------------------------------------

   La largeur de lecture du site est 1 440 px, et c'est ce que mesurent
   les rangées des pages refaites. Une seule page s'en écarte : relevé
   le 05/10, /recyclage/ porte 11 rangées à 1 000 px et une à 1 334 px.

   Seul le plafond est touché. La largeur fluide (Divi pose un
   pourcentage) reste la sienne : forcer width découplerait la page de
   la marge latérale que le thème applique aux petits écrans.

   Vérifié en ligne le 05/10 sur /recyclage/ : 11 rangées à 1 000 px
   passent à 1 440. Une douzième reste à 1 334 px — son plafond n'est pas
   ce qui la contraint, c'est son pourcentage de largeur, et 1 334 tombe
   dans la plage de lecture du site. Elle est laissée telle quelle plutôt
   que d'imposer une largeur fixe à toutes les rangées du site pour une
   seule. */

body.mc-h-largeur #main-content .et_pb_row {
	max-width: 1440px !important;
}

/* ------------------------------------------------------------------
   23.4 — Les champs du formulaire de contact
   ------------------------------------------------------------------

   RELEVÉ DU 05/10, côte à côte. Bloc devis des pages refaites : champ
   41 px, filet rgba(77,77,77,.16), rayon 10 px, texte 14 px,
   rembourrage 9/13, étiquette 12 px graisse 600. Formulaire de
   /contact/ : champ 42 px, filet #DDD, rayon 8 px, texte 13,3 px,
   rembourrage 10/12, étiquette 16 px graisse 400.

   Deux formulaires qui demandent la même chose et ne se ressemblent
   pas. Les valeurs retenues sont celles du bloc devis, puisque c'est
   lui qui figure sur les pages refaites.

   Le bouton d'envoi n'est pas dans ce bloc : .wpcf7-submit est déjà
   traité par la section 2, et les deux formulaires s'accordaient donc
   déjà sur ce point.

   CE QUE L'ESSAI A RÉVÉLÉ EN PLUS. Ces règles injectées sur
   /presentation/ le 05/10 pour vérifier qu'une page refaite ne bougeait
   pas : un seul écart, 2 px de hauteur de page. La cause est instructive
   — la zone de texte du bloc devis n'avait jamais été habillée par les
   feuilles maison. Elle était restée en rayon 8 px et filet #DDD, c'est
   à dire aux valeurs anciennes, pendant que les champs d'à côté, dans le
   même formulaire, étaient en 10 px et filet rgba(77,77,77,.16). Cocher
   cette case corrige donc aussi cette incohérence sur les pages déjà
   refaites. Les 2 px viennent de là, et ils sont un gain. */

body.mc-h-formulaire #page-container .wpcf7 input[type="text"],
body.mc-h-formulaire #page-container .wpcf7 input[type="email"],
body.mc-h-formulaire #page-container .wpcf7 input[type="tel"],
body.mc-h-formulaire #page-container .wpcf7 input[type="url"],
body.mc-h-formulaire #page-container .wpcf7 input[type="number"],
body.mc-h-formulaire #page-container .wpcf7 input[type="date"],
body.mc-h-formulaire #page-container .wpcf7 select,
body.mc-h-formulaire #page-container .wpcf7 textarea {
	background-color: #FFFFFF;
	border: 1px solid var(--mc-filet);
	border-radius: 10px;
	font-size: 14px;
	padding: 9px 13px;
	box-shadow: none;
}

body.mc-h-formulaire #page-container .wpcf7 input:focus,
body.mc-h-formulaire #page-container .wpcf7 select:focus,
body.mc-h-formulaire #page-container .wpcf7 textarea:focus {
	border-color: var(--mc-action);
	outline: none;
}

/* L'étiquette passe en petite capitale grasse, comme dans le bloc
   devis : c'est elle qui tient la colonne quand les champs se suivent.
   Le span que Contact Form 7 glisse autour du champ ne doit pas en
   hériter, sinon le texte saisi tombe en 12 px. */
body.mc-h-formulaire #page-container .wpcf7 label {
	font-size: 12px;
	font-weight: 600;
	color: #333333;
}

body.mc-h-formulaire #page-container .wpcf7 label .wpcf7-form-control-wrap {
	font-size: 14px;
	font-weight: 400;
}

/* LA CASE À COCHER FAISAIT 523 PX DE LARGE — RELEVÉ LE 06/10.
   Une règle du site met tous les champs à width:100%, les cases à cocher
   comprises. Résultat sur les deux consentements du formulaire de devis :
   la case s'étirait sur toute la ligne, donc son petit carré se retrouvait
   centré AU-DESSUS de son libellé, détaché de lui. On lisait deux lignes
   sans savoir laquelle on cochait.
   La case reprend sa taille propre, et le libellé se range à côté d'elle
   sur une seule ligne. Les cases de consentement sont justement celles
   qu'il ne faut pas laisser ambiguës. */
body.mc-h-formulaire #page-container .wpcf7 input[type="checkbox"],
body.mc-h-formulaire #page-container .wpcf7 input[type="radio"] {
	width: auto;
	min-width: 0;
	height: auto;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--mc-action);
}

body.mc-h-formulaire #page-container .wpcf7 .wpcf7-list-item {
	display: block;
	margin-left: 0;
}

body.mc-h-formulaire #page-container .wpcf7 .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

/* ------------------------------------------------------------------
   23.5 — Le fond du contenu
   ------------------------------------------------------------------

   RELEVÉ DU 05/10. Les sections de contenu de plusieurs pages anciennes
   portent en fond uploads/2022/09/pattern.jpg, un motif pointillé :
   /devis/ une section, /contact/ deux, /expertise/, /actualites/ et
   /mentions-legales/ une chacune. Les pages refaites sont sur blanc
   franc.

   POURQUOI LA CLASSE VIENT DU JAVASCRIPT. Divi écrit ce fond dans une
   règle .et_pb_section_3 — numérotée par position, donc le numéro
   change d'une page à l'autre — et aucun sélecteur CSS ne sait
   reconnaître une image de fond par son adresse. Le script global
   (sections-vides.js) repère les sections dont le fond CALCULÉ est ce
   motif et leur pose .mc-h-motif. La déclaration qui efface le fond
   reste ici : le script désigne, la feuille décide. Le CSS garde un
   seul domicile.

   La première section d'une page est épargnée par le script : c'est la
   bande de titre, dont le fond relève de la case 1. Sans cette
   exception, le titre clair de /actualites/ se retrouverait blanc sur
   blanc si la case 5 était cochée seule. */

body.mc-h-fond #main-content .et_pb_section.mc-h-motif {
	background-image: none !important;
}

/* ------------------------------------------------------------------
   23.6 — Les encadrés « blurb »
   ------------------------------------------------------------------

   RELEVÉ DU 05/10 — six apparences pour le même objet : /contact/ 13
   encadrés (fond transparent, centrés, titre 19 px/600, picto 40 px
   or), /recyclage/ 7 (transparent, alignés à gauche, titre 19 px/600),
   /salons/ 5, /actualites/ 4 (fond blanc, rembourrage 25/20, angles
   droits), /rse/ 3, et 2 sur chacune des trois pages RSE (titre
   18 px/500, picto 96 px gris).

   Le cadre retenu est celui des cartes du site (.mc-carte-v,
   .mc-carte-fixe) : fond blanc, filet, rayon 12 px, aucune ombre.

   CE QUI N'EST PAS TOUCHÉ : l'alignement du texte. Un encadré centré
   reste centré — les 13 de /contact/ sont des fiches de contact, elles
   sont centrées à dessein. Harmoniser le cadre ne veut pas dire
   uniformiser la composition. */

body.mc-h-blurb #page-container .et_pb_blurb {
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 1px solid var(--mc-filet);
	border-radius: var(--mc-rayon-carte);
	padding: 22px 24px;
	box-shadow: none;
}

body.mc-h-blurb #page-container .et_pb_blurb .et_pb_module_header,
body.mc-h-blurb #page-container .et_pb_blurb h4 {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mc-encre, #4D4D4D);
}

/* UN TITRE D'ENCADRÉ PEUT ÊTRE UN LIEN — corrigé le 08/10.
 *
 * Signalé sur /rse/ : les trois titres — « L'environnement »,
 * « L'Humain », « Être engagé » — sortaient en gris foncé sur la
 * section sombre, donc illisibles.
 *
 * La cause tient en une ligne de balisage :
 *     <h4 class="et_pb_module_header"><a href="…">L'environnement</a></h4>
 *
 * Sur une section sombre, Divi passe le h4 en blanc dans les réglages
 * du module. Mais son sélecteur ne vise que le h4 ; la règle ci-dessus
 * visait EN PLUS le lien, et lui imposait l'encre du site. Résultat :
 * un titre blanc dont le seul enfant — le texte entier — est gris.
 *
 * Le lien ne porte donc plus de couleur : il hérite de son titre. Sur
 * fond clair il reprend l'encre, sur fond sombre le blanc de Divi, et
 * demain la teinte que le module recevra. Une couleur de titre ne se
 * décide pas ici, elle se décide une fois, sur le titre. */
body.mc-h-blurb #page-container .et_pb_blurb .et_pb_module_header a {
	color: inherit;
}

/* Le picto. Il allait de 40 px (/contact/) à 96 px (/rse/) ; 40 px est
   la valeur des cartes du site. L'or redevient celui de la charte —
   #D6AE01 traînait sur les pages anciennes. */
body.mc-h-blurb #page-container .et_pb_blurb .et-pb-icon {
	font-size: 40px !important;
	color: var(--mc-or) !important;
}

/* L'IMAGE D'UN ENCADRÉ N'EST PAS TOUJOURS UN PICTO — CORRIGÉ LE 06/10.
   Première écriture : max-width 64px, pensée pour les encadrés qui
   emploient une petite image en guise de picto. Mesuré ensuite sur
   /contact/ refaite : les dix PHOTOS de l'équipe passaient de 199×300 à
   64×96, et la carte de 432 px à 260. Une règle de taille unique ne peut
   pas servir un picto de 40 px et un portrait de 300 px, et le CSS ne
   sait pas distinguer les deux.
   On ne contraint donc plus que ce qui doit l'être : ne pas déborder du
   cadre. La taille naturelle de l'image reste celle que Divi lui a
   donnée. */
body.mc-h-blurb #page-container .et_pb_blurb .et_pb_main_blurb_image img {
	max-width: 100%;
	height: auto;
}

/* Divi ajoute une marge sous le bloc d'image qui, dans un cadre,
   creuse un vide sous le picto. */
body.mc-h-blurb #page-container .et_pb_blurb .et_pb_main_blurb_image {
	margin-bottom: 14px;
}

/* ------------------------------------------------------------------
   23.7 — Les pages d'article
   ------------------------------------------------------------------

   RELEVÉ DU 06/10 sur /inauguration-nouveaux-locaux/. Les articles sont
   servis par le gabarit par défaut du thème : aucune section Divi,
   aucun gabarit Theme Builder. L'ossature est
   #main-content > .container > #content-area > #left-area > article,
   avec une colonne latérale de 328 px à droite.

   Trois écarts mesurés : le titre sort en 30 px graisse 500, là où le
   site écrit 36 px graisse 800 ; le texte est en 14 px sur une
   interligne de 20,8 px, soit 1,49 — trop serré pour un article ; et
   il court sur 1 069 px, environ 130 signes par ligne, quand on lit
   confortablement entre 60 et 80.

   POURQUOI LA COLONNE N'EST PAS SUPPRIMÉE. Elle n'est pas vide : elle
   porte les catégories et les archives par mois. On ne retire pas une
   navigation pour gagner de la largeur ; on resserre le texte à
   l'intérieur de sa colonne, ce qui suffit à le rendre lisible. */

body.mc-h-actus.single-post #main-content #left-area > article > .et_post_meta_wrapper > h1.entry-title,
body.mc-h-actus.single-post #main-content #left-area > article > h1.entry-title {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--mc-encre, #4D4D4D);
	margin-bottom: 16px;
}

/* LA LIGNE DE MÉTADONNÉES devient un sur-titre : « par ggmedia | 20
   Juil 2026 | Actualités » sortait dans la même voix que le texte, ce
   qui la faisait lire comme une première phrase. */
body.mc-h-actus.single-post #main-content .post-meta {
	margin-bottom: 24px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-actus.single-post #main-content .post-meta a {
	color: var(--mc-or, #D5AE05);
	text-decoration: none;
}

body.mc-h-actus.single-post #main-content .post-meta a:hover,
body.mc-h-actus.single-post #main-content .post-meta a:focus-visible {
	text-decoration: underline;
}

/* L'IMAGE À LA UNE prend le cadre des cartes du site : le même rayon,
   le même filet. Sans quoi elle flotte, à vif, au milieu d'une page qui
   encadre tout le reste. */
body.mc-h-actus.single-post #main-content #left-area > article > .et_post_meta_wrapper img,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > p:first-child > img {
	border-radius: var(--mc-rayon-carte);
	border: 1px solid var(--mc-filet);
}

/* LA LARGEUR DE LECTURE. Elle est posée sur les éléments de texte, pas
   sur leur conteneur : une image, une galerie ou un tableau gardent
   ainsi toute la colonne, pendant que les paragraphes se resserrent.
   720 px à 16 px donnent environ 75 signes par ligne. */
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > p,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > ul,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > ol,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > blockquote,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > h2,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > h3 {
	max-width: 720px;
}

body.mc-h-actus.single-post #main-content #left-area > article .entry-content > p,
body.mc-h-actus.single-post #main-content #left-area > article .entry-content > li {
	font-size: 16px;
	line-height: 1.7;
}

body.mc-h-actus.single-post #main-content #left-area > article .entry-content > h2 {
	margin-top: 40px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

body.mc-h-actus.single-post #main-content #left-area > article .entry-content > h3 {
	margin-top: 32px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

/* LA COLONNE LATÉRALE. Les deux listes qu'elle porte — catégories,
   archives par mois — sortaient en liens bruns soulignés les uns sous
   les autres. Elles prennent la voix des listes du site, et l'archive,
   qui compte des dizaines de mois, est bornée en hauteur plutôt que de
   faire défiler la page pour elle seule. */
body.mc-h-actus.single-post #main-content #sidebar .widget_categories ul,
body.mc-h-actus.single-post #main-content #sidebar .widget_archive ul,
body.mc-h-actus #main-content .et_pb_widget_area .widget_categories ul,
body.mc-h-actus #main-content .et_pb_widget_area .widget_archive ul {
	max-height: 320px;
	overflow-y: auto;
	padding-left: 0;
	list-style: none;
}

body.mc-h-actus #main-content .widget_categories li,
body.mc-h-actus #main-content .widget_archive li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(77, 77, 77, 0.1);
	font-size: 0.875rem;
}

body.mc-h-actus #main-content .widget_categories li a,
body.mc-h-actus #main-content .widget_archive li a {
	color: var(--mc-encre, #4D4D4D);
	text-decoration: none;
}

body.mc-h-actus #main-content .widget_categories li a:hover,
body.mc-h-actus #main-content .widget_archive li a:hover {
	color: var(--mc-action);
}

/* ==================================================================
   23.7 bis — LA COLONNE DES ACTUALITÉS QUITTE L'ANCIEN SITE — 08/10
   ==================================================================

   CE QUI RESTAIT DE L'ANCIEN SITE, relevé sur /actualites/ et sur
   /inauguration-nouveaux-locaux/ :

     — chaque intitulé de groupe (ARTICLES RÉCENTS, CATÉGORIES,
       ARCHIVES) est un encadré Divi : fond blanc, filet, 25/20 de
       rembourrage, un triangle ▽ doré et un texte en capitales 16 px
       de graisse normale ;
     — chaque liste est une « zone de widgets » soulignée d'un trait
       de 2 px en #D6AE01 — l'or de l'ancien site, pas le nôtre
       (#D5AE05) — et décalée de 40 px vers la droite ;
     — les puces sont une image, r-arrow.png, posée en fond de chaque
       <li> par le CSS personnalisé du thème.

   D'OÙ ÇA VIENT, ET POURQUOI C'EST EN CSS ICI. L'encadré, le trait et
   le retrait sont des RÉGLAGES DE MODULE, posés dans le Theme Builder
   et servis depuis le cache et-core-unified : il n'y a pas de feuille
   à mettre en commentaire. Les reprendre à la main demanderait
   d'ouvrir chaque gabarit. On les neutralise donc ici, et le jour où
   ces réglages seront vidés dans le constructeur, ce bloc tombera de
   lui-même sans rien casser.

   CE QU'ON MET À LA PLACE : le sur-titre du site, celui des pôles de
   l'équipe — petites capitales, graisse 600, filet doré de 28 px
   devant. Pas un encadré de plus : une colonne latérale annonce des
   groupes, elle ne les emboîte pas. C'est aussi la seule écriture qui
   existe déjà ailleurs sur le site ; en inventer une autre pour trois
   listes ferait une famille de plus à tenir.

   LA PORTÉE EST LE COUPLE « INTITULÉ + LISTE », jamais la classe
   numérotée d'un module : :has(+ .et_pb_widget_area) ne désigne qu'un
   encadré immédiatement suivi d'une zone de widgets, ce qui est
   exactement la structure de cette colonne, sur les deux gabarits, et
   ne peut pas atteindre les encadrés des autres pages.
   ================================================================== */

/* L'INTITULÉ. !important est ici la réponse à un !important : les
   réglages du module posent padding et margin avec, et une règle sans
   ne les atteindrait pas, quelle que soit sa spécificité. */
body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) {
	margin-bottom: 10px !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Le triangle ▽ disparaît au profit du filet doré. Il n'est pas
   seulement démodé : c'est un chevron de dépliage posé sur un titre
   qui ne déplie rien, donc une promesse de clic que personne n'honore. */
body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_main_blurb_image {
	display: none;
}

body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_blurb_content {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: none;
}

/* Le filet est décoratif : aucun texte, donc rien à entendre pour un
   lecteur d'écran, qui annonce l'intitulé seul. */
body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_blurb_content::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--mc-or, #D5AE05);
}

body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_blurb_description,
body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_blurb_description p,
body.mc-h-actus #page-container .et_pb_blurb:has(+ .et_pb_widget_area) .et_pb_module_header {
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

/* LA LISTE. Le trait doré de l'ancien site part, le fond blanc aussi —
   la colonne est déjà sur le fond de la page — et le retrait de 40 px
   avec eux : il désalignait la colonne de tout ce qui l'entoure. */
body.mc-h-actus #page-container .et_pb_widget_area {
	margin-bottom: 36px !important;
	padding-left: 0;
	padding-right: 0;
	border-bottom: 0;
	background: none;
}

body.mc-h-actus #page-container .et_pb_widget_area .et_pb_widget {
	margin: 0;
	float: none;
	width: 100%;
}

/* LA PUCE EN IMAGE. Posée en fond par le CSS personnalisé du thème,
   elle survivait à toute remise à zéro du rembourrage : une image de
   fond ne s'enlève pas en annulant un padding. */
body.mc-h-actus #page-container .widget_categories li,
body.mc-h-actus #page-container .widget_archive li,
body.mc-h-actus #page-container .wp-block-categories-list li,
body.mc-h-actus #page-container .wp-block-archives-list li {
	background-image: none;
	padding-left: 0;
}

/* LE DERNIER DE LA LISTE N'A RIEN À SÉPARER. */
body.mc-h-actus #main-content .widget_categories li:last-child,
body.mc-h-actus #main-content .widget_archive li:last-child {
	border-bottom: 0;
}

/* LA BARRE DE DÉFILEMENT DES ARCHIVES. La liste reste bornée — des
   dizaines de mois ne doivent pas allonger la page à elles seules —
   mais la barre se fait discrète plutôt que d'ajouter une pièce de
   mobilier de plus dans une colonne qu'on vient d'alléger. */
body.mc-h-actus #main-content .widget_archive ul {
	scrollbar-width: thin;
	scrollbar-color: rgba(77, 77, 77, 0.28) transparent;
}

/* LE TRAIT DORÉ SOUS L'ARTICLE. Même réglage de module, même origine,
   même sort : il fermait le contenu d'un filet qui n'existe nulle part
   ailleurs sur le site. */
body.mc-h-actus #page-container .et_pb_post_content {
	border-bottom: 0;
}

/* ------------------------------------------------------------------
   LA COLONNE VIDE DU GABARIT D'ARTICLE — 08/10
   ------------------------------------------------------------------

   Mesuré sur /inauguration-nouveaux-locaux/ : la rangée tient TROIS
   colonnes — 328 px de colonne latérale, 698 px de contenu, et 328 px
   d'une colonne qui ne contient rien (Divi lui pose lui-même la classe
   et_pb_column_empty). Un quart de la largeur de lecture est donc
   perdu, et le texte lit sur 698 px là où il disposait de 1 070.

   LE CONTENU PREND CE QUE LA COLONNE VIDE LAISSE. La rangée passe en
   flex le temps de cette disposition : la colonne latérale garde la
   largeur que le constructeur lui a donnée, et celle du contenu n'est
   plus écrite nulle part — elle occupe le reste. Aucun pourcentage à
   recopier, donc rien à corriger si les gouttières changent.

   SEULEMENT AU-DESSUS DE 980 PX. En dessous, Divi empile les colonnes
   en leur donnant toute la largeur ; passer la rangée en flex y
   défferait l'empilement.

   SI LA COLONNE VIDE EST UN JOUR SUPPRIMÉE DANS LE CONSTRUCTEUR —
   c'est la vraie correction — :has() ne trouvera plus rien et ce bloc
   s'éteindra tout seul. */

@media (min-width: 981px) {

	body.mc-h-actus #page-container .et_pb_row:has(> .et_pb_column_empty):has(.et_pb_post_content) {
		display: flex;
		align-items: flex-start;
	}

	body.mc-h-actus #page-container .et_pb_row:has(> .et_pb_column_empty):has(.et_pb_post_content) > .et_pb_column_empty {
		display: none;
	}

	body.mc-h-actus #page-container .et_pb_row:has(> .et_pb_column_empty):has(.et_pb_post_content) > .et_pb_column {
		float: none;
	}

	body.mc-h-actus #page-container .et_pb_row:has(> .et_pb_column_empty) > .et_pb_column:has(.et_pb_post_content) {
		flex: 1 1 auto;
		width: auto;
		margin-right: 0;
	}

	/* La colonne latérale, elle, garde la largeur que le constructeur
	   lui a donnée : sans ce flex:0, elle se laisserait comprimer par
	   le contenu — mesuré 230 px au lieu de 328 au premier essai. */
	body.mc-h-actus #page-container .et_pb_row:has(> .et_pb_column_empty):has(.et_pb_post_content) > .et_pb_column:not(:has(.et_pb_post_content)) {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------
   LA BANDE DE TITRE D'UN ARTICLE PARLE COMME LES AUTRES — 08/10
   ------------------------------------------------------------------

   Demandé le 08/10 : « les heros doivent ressembler aux autres
   pages ». Mesuré sur /inauguration-nouveaux-locaux/, la bande avait
   déjà la bonne hauteur (412 px) et le bon titre (36 px, graisse 800,
   blanc). Trois choses la trahissaient :

     1. TOUT ÉTAIT CENTRÉ, quand le site ouvre à gauche partout
        ailleurs. Le centrage ne venait pas d'un text-align mais de
        144 px de marge posés de chaque côté du module de titre dans
        le Theme Builder — d'où le !important, qui répond au sien.

     2. LA DATE ÉTAIT INVISIBLE : elle sortait en #333 sur la bande
        sombre, et la harmonisation de la bande (cas 1) la repassait
        en blanc à 86 %. Or, à cette place, une date n'est pas un
        paragraphe : c'est le SUR-TITRE de la bande, celui que les
        autres pages écrivent en or. Elle en prend donc la voix.

     3. ELLE ÉTAIT SOUS LE TITRE. Un sur-titre se lit avant. La
        colonne passe en flex le temps de la bande, et la date
        remonte — sans toucher au gabarit, qui garde son ordre.

   LE POIDS. Le cas 1 peint les paragraphes de la première section en
   blanc avec !important ; on ne l'affaiblit pas pour autant — il a
   raison partout ailleurs. La règle de la date lui passe devant par
   un identifiant de plus, comme .mc-kicker le fait sur les pages qui
   en portent un.

   LA PHOTO ET SON VOILE NE SONT PAS TOUCHÉS : le voile est un
   dégradé gris à 90 % posé dans les réglages du module. Pour lui
   donner exactement la chaleur de la bande maison, c'est là qu'il
   faut le reprendre — une valeur, pas une règle de plus ici.
   ------------------------------------------------------------------ */

/* LA PORTÉE EST « .single-post », ET C'EST UNE CORRECTION DU 08/10.
 *
 * Première écriture : body.mc-h-actus … .et_pb_section:first-child.
 * mc-h-actus est une classe de CORPS, posée sur toutes les pages du
 * site — elle dit qu'un réglage est coché, pas qu'on est sur un
 * article. « Première section » visait donc la première section de
 * N'IMPORTE QUELLE page.
 *
 * Signalé dans l'heure sur les pages d'atterrissage : leur bande
 * sombre s'arrêtait à 200 px du bord droit. La cause était le
 * align-items: flex-start posé ici — dans une colonne en flex, un
 * élément cesse de remplir sa colonne et se réduit à son contenu. Le
 * module qui porte la bande est ainsi passé de 1 440 à 1 041 px, et
 * surtout il a cessé d'être CENTRÉ. Or le débordement pleine largeur
 * de la bande (margin-inline: calc(50% - 50vw)) ne tombe juste que si
 * son conteneur est centré dans la fenêtre : décalé de 199 px à
 * gauche, la bande l'était aussi.
 *
 * Deux verrous plutôt qu'un : la règle ne vit plus que sur un article
 * (.single-post), et align-items disparaît — il n'avait aucune raison
 * d'être, les modules de texte reçoivent déjà width: 100%.
 */
body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_column {
	display: flex;
	flex-direction: column;
}

body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_text {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_text,
body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_text_inner,
body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child h1 {
	text-align: left !important;
}

body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_text:last-child {
	order: -1;
	margin-bottom: 10px;
}

body.mc-h-actus.single-post #page-container #main-content .et_pb_section:first-child .et_pb_text:last-child p {
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05) !important;
}

/* ------------------------------------------------------------------
   23.8 — LE CENTRAGE VERTICAL DE L'EN-TÊTE GLOBAL
   Garde : body.mc-h-entete — réglage « 8. Harmonisation — centrage
   vertical de l'en-tête global ».

   CE QUI A ÉTÉ MESURÉ, LE 06/10.
   La rangée de l'en-tête global tient trois colonnes — logo, menu,
   boutons — toutes trois hautes de 72 px, parce que c'est le module
   du méga-menu qui donne la hauteur. Mais une colonne Divi est un
   conteneur flex en colonne SANS justify-content : ses modules se
   posent donc au bord supérieur. Relevé : axe de la rangée à 116 px,
   axe du bloc des boutons à 103 px, axe du logo à 109 px. Les
   boutons, les plus courts des trois (46 px pour 72 de colonne),
   sont ceux qui se voient — 13 px trop haut.

   POURQUOI CETTE SEULE DÉCLARATION SUFFIT.
   Les colonnes sont déjà en flex-direction: column ; il ne manque que
   l'instruction de répartition sur l'axe principal, qui est ici le
   vertical. L'axe horizontal, lui, est tenu par les align-self que
   Divi écrit sur chaque module (flex-end pour les boutons) : on n'y
   touche pas, et rien ne se déplace latéralement.

   POURQUOI :has() PLUTÔT QU'UN NUMÉRO DE RANGÉE.
   Divi nomme cette rangée .et_pb_row_1_tb_header — un numéro qui
   change dès qu'une rangée est ajoutée au gabarit. On vise donc la
   rangée par ce qu'elle contient : le bloc des boutons, qui est à
   nous. Le jour où le gabarit est réordonné, la règle suit.

   CE QUE ÇA NE TOUCHE PAS. Le gabarit d'en-tête lui-même, qui reste
   intact ; le panneau du méga-menu, en position: fixed avec un top
   calculé sur le bas de l'en-tête et non sur le module ; et l'en-tête
   en pile sur mobile, où les colonnes épousent leur contenu et n'ont
   donc aucune place à répartir.
   ------------------------------------------------------------------ */

body.mc-h-entete .et-l--header .et_pb_row:has(.mc-actions) > .et_pb_column {
	justify-content: center;
}


/* ==================================================================
   24. LE REMBOURRAGE QUE DIVI POSE SUR TOUTES LES LISTES
   Relevé le 06/10/2026, après le centrage de l'en-tête.
   ==================================================================

   CE QUE DIVI ÉCRIT, POUR TOUTE PAGE :

       #left-area ul, .entry-content ul, .et-l--body ul,
       .et-l--footer ul, .et-l--header ul
           { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px; }

   C'est sa mise en forme des listes à puces d'un article. Elle attrape
   au passage TOUTES nos listes, qui sont des <ul> et n'ont jamais de
   puces : le menu, le fil d'Ariane, les portraits de l'équipe, les
   gages du bloc devis, les colonnes du méga-menu.

   POURQUOI NOS FEUILLES NE GAGNAIENT PAS. Elles écrivent pourtant
   padding: 0 — mega-menu.css sur .mc-nav__liste, equipe.css sur
   .mc-equipe, et ainsi de suite. Mais .et-l--body ul pèse une classe
   ET un type, soit (0,1,1), quand .mc-equipe ne pèse qu'une classe,
   (0,1,0). Divi l'emporte à chaque fois, sur chaque composant, sans
   que rien ne le signale.

   CE QUE ÇA DONNAIT À L'ÉCRAN, mesuré le 06/10 :
     — le menu : entrées 11 px trop haut, 16 px trop à droite ;
     — les portraits du bloc devis : grille décalée de 16 px, donc
       jamais centrée dans son encadré — c'est ce qui a mis la puce
       à l'oreille ;
     — les gages du bloc devis : 16 px de retrait sur le texte qu'ils
       suivent, et 23 px de blanc en trop sous le dernier ;
     — le fil d'Ariane : 49 px de haut au lieu de 26.

   POURQUOI UNE SEULE RÈGLE, ET PAS UN CORRECTIF PAR COMPOSANT.
   La cause est unique ; la traiter composant par composant voudrait
   dire la retrouver une fois par bloc, et l'oublier au prochain. On
   annule donc, une bonne fois, les deux seules valeurs que Divi pose
   — le retrait gauche et le blanc du bas — pour les listes qui nous
   appartiennent, c'est-à-dire celles dont la classe porte notre
   préfixe. Le haut et la droite ne sont pas touchés : certaines de
   nos listes s'en servent, comme la colonne ouverte du méga-menu et
   ses 12 px de haut, et elles gardent la main.
   ------------------------------------------------------------------ */

#page-container ul[class*="mc-"],
#page-container ol[class*="mc-"] {
	padding-left: 0;
	padding-bottom: 0;
}

/* LA PUCE AUSSI — complété le 08/10.
 *
 * La règle ci-dessus annulait le retrait et le blanc du bas, mais pas
 * list-style-type: disc, que Divi pose dans la même déclaration.
 * Relevé sur /alliages-lamines-aluminium-panneaux-solaires/ : la ligne
 * de gages de la bande LP sortait avec DEUX marqueurs — la puce ronde
 * du thème, puis la coche que le composant dessine lui-même. Mesuré :
 * list-style-type « disc » sur le ul comme sur le li, et 20 px de
 * retrait sur le li.
 *
 * Nos listes dessinent leur propre marqueur quand elles en veulent un
 * (la coche des gages, le rang des étapes) ou n'en veulent aucun (le
 * menu, le fil d'Ariane, les pastilles). Aucune n'attend la puce du
 * thème : on l'éteint pour toutes, et sur le li, puisque c'est lui qui
 * la porte.
 *
 * ::marker est éteint en plus de list-style : un navigateur qui a déjà
 * calculé le marqueur ne le retire pas toujours sur le seul
 * list-style, et le coût de la ceinture est nul. */
#page-container ul[class*="mc-"],
#page-container ol[class*="mc-"],
#page-container ul[class*="mc-"] > li,
#page-container ol[class*="mc-"] > li {
	list-style: none;
}

#page-container ul[class*="mc-"] > li::marker,
#page-container ol[class*="mc-"] > li::marker {
	content: none;
}

/* LE RETRAIT EST REMIS À ZÉRO, MAIS IL RESTE REPRENABLE — corrigé le 08/10.
 *
 * Écrite d'abord « padding-left: 0 », cette règle a cassé le jour même
 * la ligne de gages de la bande LP : .mc-lp-gages li demandait 20 px
 * pour loger la coche qu'il dessine en absolu, et le texte est repassé
 * PAR-DESSUS la coche (relevé sur une LP bijoux fantaisie).
 *
 * La cause est une affaire de poids, pas d'intention : #page-container
 * …li pèse (1,1,1) quand .mc-lp-gages li pèse (0,1,1). Un composant ne
 * peut donc pas reprendre la main sans écrire #page-container dans sa
 * propre feuille — c'est-à-dire sans connaître cette règle-ci. On aurait
 * alors la cause du bogue inscrite dans chaque composant qui en souffre,
 * et le prochain la découvrirait à l'écran comme celui-ci.
 *
 * LA VALEUR PASSE DONC PAR UNE VARIABLE. La règle n'impose plus zéro :
 * elle impose « ce que le composant a demandé, et zéro s'il n'a rien
 * demandé ». Un composant qui a besoin d'un retrait pose
 * --mc-liste-retrait sur sa liste, dans sa propre feuille, sans un mot
 * sur Divi ni sur la spécificité ; l'héritage fait le reste. Divi, lui,
 * reste écrasé dans tous les cas, puisque c'est cette règle qui gagne. */
#page-container ul[class*="mc-"] > li,
#page-container ol[class*="mc-"] > li {
	padding-left: var(--mc-liste-retrait, 0px);
}

/* ------------------------------------------------------------------
   23.9 — LA PAGE DE RÉSULTATS DE RECHERCHE
   Garde : body.mc-h-recherche — réglage « 11. Harmonisation — page de
   résultats de recherche ».
   ------------------------------------------------------------------

   Relevé le 07/10 sur /?s=etain. Le gabarit « Résultats de Recherche »
   a un corps personnalisé que Divi ferme à l'API : tout se règle donc
   ici, en présentation, sans toucher au gabarit.

   CE QUI ALLAIT DÉJÀ. La bande de titre fait ses 400 px et le H1 sort
   en 36 px graisse 800 blanc : c'est la case 1 qui l'a fait, et son
   voile translucide couvre la photo de fond à 94 % — la bande est donc
   dans le ton du site sans qu'on ait à retirer l'image.

   CE QUI N'ALLAIT PAS :
     — le titre en CAPITALES et centré, quand le site écrit ses titres
       en casse normale, alignés à gauche sur la largeur de lecture ;
     — les cartes de résultat : angles droits, ombre portée épaisse
       (0 12px 18px à 30 % d'opacité), titre en 28 px graisse 700,
       texte centré, et surtout une image en object-fit: fill, donc
       DÉFORMÉE — 458 × 286 étirés dans une vignette.

   LES CARTES PRENNENT LE CADRE DES CARTES DU SITE : rayon 12, filet
   #ECECEC, ombre discrète, soulèvement de 6 px au survol avec le filet
   qui passe à l'or. Le visuel est ramené à 190 px, la hauteur des
   cartes d'actualité, et recadré en cover au lieu d'être étiré.

   POURQUOI LA HAUTEUR SE POSE AUSSI SUR LE LIEN. L'image n'est pas
   fille directe du conteneur : Divi intercale un <a class="entry-
   featured-image-url">. Un height: 100% sur l'image seule se résolvait
   contre un parent de hauteur automatique et restait sans effet — 286
   px mesurés sous un conteneur de 190. Les deux reçoivent donc la
   hauteur.

   CE QU'ON NE TOUCHE PAS. Le lien « Voir le produit » reste dans son
   doré #D6AE01 : Divi l'écrit en !important, et cette teinte est à
   quatre unités de l'or de la charte — se battre pour ça alourdirait
   la feuille sans que personne voie la différence. Les titres en
   capitales des produits viennent du contenu, pas d'une règle de
   casse : ils ne bougent pas non plus.
   ------------------------------------------------------------------ */

body.mc-h-recherche.search #main-content h1 {
	text-transform: none;
	text-align: left;
}

body.mc-h-recherche.search #main-content .et_pb_post {
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

body.mc-h-recherche.search #main-content .et_pb_post:hover {
	transform: translateY(-6px);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

body.mc-h-recherche.search #main-content .et_pb_post .et_pb_image_container,
body.mc-h-recherche.search #main-content .et_pb_post .et_pb_image_container > a {
	display: block;
	height: 190px;
	margin: 0;
	overflow: hidden;
}

body.mc-h-recherche.search #main-content .et_pb_post .et_pb_image_container {
	margin-bottom: 14px;
}

body.mc-h-recherche.search #main-content .et_pb_post .et_pb_image_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

body.mc-h-recherche.search #main-content .et_pb_post .entry-title {
	margin: 0 18px 6px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--mc-encre, #4D4D4D);
}

body.mc-h-recherche.search #main-content .et_pb_post .post-meta {
	margin: 0 18px 8px;
	font-size: 12.5px;
	text-align: left;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-recherche.search #main-content .et_pb_post .post-content {
	margin: 0 18px 4px;
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-recherche.search #main-content .et_pb_post .more-link {
	display: inline-block;
	margin: 0 18px 18px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body.mc-h-recherche.search #main-content .et_pb_post .more-link:hover {
	text-decoration: underline;
}

/* L'ENCADRÉ POSÉ SUR UNE SECTION SOMBRE — correctif du 07/10.

   Signalé le matin même sur /rse/ : trois encadrés y sortaient en
   texte blanc sur fond blanc, donc invisibles. Les voici tels qu'ils
   étaient : la section porte un fond #333, Divi écrit sur ces trois
   modules color: #FFF !important pour le titre et #F2F2F2 pour le
   texte — des couleurs justes pour leur section — et la case 6 leur
   posait par-dessus le cadre blanc des cartes du site.

   ON NE FORCE PAS LE TEXTE EN SOMBRE. Ce serait imposer une carte
   claire là où le design d'origine, validé depuis des années, voulait
   du texte clair sur un aplat sombre. L'encadré est donc rendu à son
   apparence : pas de cadre, pas de fond, pas de rembourrage ajouté.

   La classe est posée par sections-vides.js, qui mesure la luminance
   du fond calculé — aucun sélecteur CSS ne sait le faire, et Divi ne
   donne ici aucun marqueur : les encadrés portent même
   et_pb_bg_layout_light, donc Divi croit le fond clair.
   ------------------------------------------------------------------ */

body.mc-h-blurb #page-container .et_pb_blurb.mc-h-sur-sombre {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* ==================================================================
   23.10 — LE PIED DE PAGE GLOBAL
   Garde : body.mc-h-pied — réglage « 16. Harmonisation — pied de
   page global ». Décoché par défaut.
   ==================================================================

   DEMANDÉ LE 08/10, maquette à l'appui : le pied passe sur le gris de
   la charte, les intitulés de colonne en blanc, les liens en blanc
   adouci, un filet avant la ligne légale.

   AUCUN CONTENU N'EST TOUCHÉ. Le pied est un gabarit Theme Builder
   qui aligne cinq modules de barre latérale — les zones de widgets
   « Footer Area » : identité, contact, alliages, formes, métaux.
   Les widgets, leurs liens et leur ordre restent exactement ce
   qu'ils sont ; seules les couleurs, les tailles et les espacements
   changent. C'est aussi pourquoi la portée est le gabarit de pied et
   lui seul : .et-l--footer, jamais un sélecteur qui pourrait
   déborder sur le corps des pages.

   LE DEUX LOGOS NE SONT PAS TRAITÉS PAREIL, ET C'EST VOULU.
     — Le nôtre est servi en SVG à texte sombre, prévu pour le fond
       blanc d'avant. Sur le gris, il disparaîtrait. Un filtre le
       passe en blanc plein. C'est un pis-aller assumé : il fait
       tomber l'or du monogramme. Dès qu'une version blanche du SVG
       sera déposée dans la médiathèque, cette règle s'enlève et le
       logo retrouve ses deux teintes.
     — Les logos PARTENAIRES (Metall, la Région) ne sont pas à nous.
       On ne reteint pas le logo d'un tiers : ils gardent leurs
       couleurs et reçoivent un fond blanc arrondi, qui est la
       manière habituelle de poser un logo institutionnel sur un fond
       sombre. Le tri se fait sur le nom du fichier, donc sans
       supposer d'ordre dans le widget.
   ================================================================== */

body.mc-h-pied .et-l--footer .et_pb_section {
	background-color: var(--mc-encre, #4D4D4D);
}

body.mc-h-pied .et-l--footer,
body.mc-h-pied .et-l--footer p,
body.mc-h-pied .et-l--footer li {
	color: rgba(255, 255, 255, 0.72);
}

body.mc-h-pied .et-l--footer p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.60);
}

/* L'INTITULÉ DE COLONNE. Le balisage est
   <div class="heading"><strong>Alliages</strong><a>Voir tout</a></div> :
   les deux se touchaient, et on lisait « AlliagesVoir tout ». */
body.mc-h-pied .et-l--footer .heading {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

body.mc-h-pied .et-l--footer .heading strong {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #FFFFFF;
}

/* « Voir tout » est un raccourci, pas un titre : il prend la voix des
   sur-titres du site plutôt que celle du lien qu'il surplombe. */
body.mc-h-pied #page-container .et-l--footer .heading a {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05) !important;
	text-decoration: none;
}

body.mc-h-pied #page-container .et-l--footer .heading a:hover,
body.mc-h-pied #page-container .et-l--footer .heading a:focus-visible {
	text-decoration: underline;
}

body.mc-h-pied .et-l--footer ul.menu,
body.mc-h-pied .et-l--footer .widget_nav_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.mc-h-pied .et-l--footer ul.menu li {
	margin: 0 0 9px;
	padding: 0;
	line-height: 1.45;
}

/* LES LIENS DES MENUS — CORRIGÉ LE 08/10, DANS L'HEURE.
 *
 * Signalé aussitôt la 16 cochée : les colonnes Alliages, Formes et
 * Métaux sortaient en gris sombre sur le gris sombre. Les lignes de
 * texte, elles, étaient bien en clair — ce qui désignait les MENUS, et
 * eux seuls.
 *
 * La cause est dans le CSS personnalisé du thème (Divi → Options du
 * thème), écrit du temps où le pied était blanc. Trois règles y
 * peignent les liens de menu en dur, toutes avec !important :
 *
 *     .widget_nav_menu ul.menu li a                      { color:#000 !important }
 *     .et_pb_widget_area .menu li > a                    { color:#666 !important }
 *     .et-l.et-l--footer .widget_nav_menu ul.menu li a   { color:#333 !important }
 *
 * C'est la deuxième qui l'emportait : #666 sur #4D4D4D.
 *
 * POURQUOI UN IDENTIFIANT PLUTÔT QU'UN !IMPORTANT DE PLUS. Entre deux
 * déclarations !important, c'est la spécificité qui tranche, et un
 * identifiant pèse plus que n'importe quel nombre de classes. On passe
 * donc par #page-container : la règle gagne par son poids, pas par une
 * surenchère, et elle restera juste si une quatrième ligne du même
 * genre apparaît un jour.
 *
 * CES TROIS RÈGLES PEUVENT ÊTRE MISES EN COMMENTAIRE dans le CSS
 * personnalisé du thème : elles ne servent plus rien depuis que le
 * pied a changé de fond. Celle-ci restera juste après, puisqu'elle dit
 * la couleur qu'on veut, et non celle qu'on refuse. */
body.mc-h-pied #page-container .et-l--footer a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none;
	transition: color 0.16s cubic-bezier(.22, 1, .36, 1);
}

body.mc-h-pied #page-container .et-l--footer a:hover,
body.mc-h-pied #page-container .et-l--footer a:focus-visible {
	color: var(--mc-or, #D5AE05) !important;
}

/* Un intitulé en gras est un intitulé, qu'il soit dans .heading
   (« Contact », « Alliages ») ou posé seul (« Partenaires et
   soutien ») : il se lit en blanc plein dans les deux cas. */
body.mc-h-pied #page-container .et-l--footer strong {
	color: #FFFFFF;
}

/* Notre logo : blanc plein, le temps qu'une version claire du SVG
   soit déposée (voir la note en tête de section). */
body.mc-h-pied .et-l--footer img[src*="metaconcept-logo"] {
	max-width: 180px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* Les logos qui ne sont pas les nôtres gardent leurs couleurs. */
body.mc-h-pied .et-l--footer .et_pb_widget img:not([src*="metaconcept-logo"]) {
	padding: 7px 9px;
	border-radius: 7px;
	background: #FFFFFF;
}

/* LA LIGNE LÉGALE. Le filet la sépare des colonnes ; sans lui elle
   flotte au bas d'un aplat uni. Elle s'efface d'un ton : c'est une
   mention obligatoire, pas une navigation. */
body.mc-h-pied .et-l--footer .legal_row {
	margin-top: 8px;
	padding-top: 24px;
	padding-bottom: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

body.mc-h-pied #page-container .et-l--footer .legal_row,
body.mc-h-pied #page-container .et-l--footer .legal_row p,
body.mc-h-pied #page-container .et-l--footer .legal_row a {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.52) !important;
}

body.mc-h-pied #page-container .et-l--footer .legal_row a:hover,
body.mc-h-pied #page-container .et-l--footer .legal_row a:focus-visible {
	color: #FFFFFF !important;
}

/* ==================================================================
   LE FILIGRANE DES SECTIONS CLAIRES — 14/10
   ==================================================================
   Demande de la cliente : « remettre en fond des sections blanches
   l'icône du logo, une seule fois par page au maximum ». Le modèle est
   l'accueil de metaconcept.fr, relevé à l'écran : monogramme à gauche,
   centré en hauteur, 860 px de large, très pâle.

   POURQUOI PAS LE MÉLANGE DE L'ANCIEN SITE. metaconcept.fr obtient sa
   pâleur avec background-blend-mode: soft-light sur un fond blanc à
   90 %. Essayé ici : INVISIBLE. C'est normal — soft-light d'un doré
   sur du blanc rend du blanc. Là-bas l'effet se voit parce que la
   section déborde sur un fond de page qui n'est pas blanc pur ; sur
   nos sections, qui le sont, il ne reste rien. La pâleur est donc
   obtenue par une opacité, qui ne dépend d'aucun arrière-plan et se
   règle avec un seul nombre.

   UN PSEUDO-ÉLÉMENT PLUTÔT QUE LE FOND DE LA SECTION : le fond de la
   section appartient à Divi, qui le réécrit à chaque enregistrement du
   constructeur. Le pseudo-élément, lui, n'est à personne.

   UNE SEULE FOIS PAR PAGE, ET C'EST LA RÈGLE QUI LE TIENT. La seconde
   section porteuse de la classe, et toutes les suivantes, perdent leur
   filigrane par le sélecteur de voisinage. Personne n'a à compter, et
   une classe collée deux fois par distraction ne se voit jamais. */

#main-content .et_pb_section.mc-sec-filigrane {
	position: relative;
}

#main-content .et_pb_section.mc-sec-filigrane::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--mc-filigrane, url("/wp-content/uploads/mc_vector.svg"));
	background-repeat: no-repeat;
	/* Deux propriétés distinctes plutôt que la raccourcie : seul l'axe
	   vertical est animé au défilement, l'horizontal ne bouge jamais. */
	background-position-x: -60px;
	background-position-y: 50%;
	background-size: 860px auto;
	opacity: 0.09;
}

/* LE FILIGRANE SUIT LE DÉFILEMENT — 14/10.
   ------------------------------------------------------------------
   Demandé : « une arrivée du bas et un départ vers le haut ». Le
   monogramme entre par le bas quand la section apparaît et sort par le
   haut quand elle s'en va — il se déplace donc moins vite que la page,
   ce qui donne la profondeur d'un décor derrière le contenu.

   C'EST LE NAVIGATEUR QUI ANIME, PAS UN SCRIPT. animation-timeline
   branche l'animation sur la position de la section dans la fenêtre :
   pas un écouteur de défilement, pas une image par image calculée en
   JavaScript, et rien à charger. Là où ce n'est pas encore pris en
   charge — Firefox à ce jour — le @supports ne s'applique pas et le
   filigrane reste immobile, exactement comme sans cette section. Il
   n'y a donc aucun repli à écrire.

   ON ANIME LA POSITION DU FOND, PAS UN DÉPLACEMENT. Un translate
   ferait sortir le calque de la section, qui n'a pas de masquage — le
   monogramme déborderait sur les sections voisines. La position du
   fond, elle, reste enfermée dans la boîte par construction.

   La plage va de l'entrée complète à la sortie complète : la course
   est longue, donc lente, et le filigrane n'attire jamais l'œil plus
   que le texte qu'il accompagne. */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		#main-content .et_pb_section.mc-sec-filigrane::before {
			animation: mc-filigrane-defile linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes mc-filigrane-defile {

	from {
		background-position-y: 150%;
	}

	to {
		background-position-y: -50%;
	}
}

/* Le contenu repasse devant. Sans cette ligne, une section dont les
   rangées n'ont pas de contexte d'empilement laisserait le filigrane
   par-dessus le texte. */
#main-content .et_pb_section.mc-sec-filigrane > * {
	position: relative;
	z-index: 1;
}

/* La deuxième section marquée de la page, et les suivantes, n'ont rien.
   « Une seule fois par page au maximum », tenu par le CSS seul. */
#main-content .et_pb_section.mc-sec-filigrane ~ .et_pb_section.mc-sec-filigrane::before {
	content: none;
}

/* Sous 900 px, 860 px de monogramme couvriraient l'écran entier et le
   texte se lirait sur un aplat doré. On le réduit et on le pousse hors
   de la colonne de lecture. */
@media (max-width: 900px) {

	#main-content .et_pb_section.mc-sec-filigrane::before {
		background-size: 480px auto;
		background-position-x: -140px;
		opacity: 0.07;
	}
}

@media (max-width: 600px) {

	#main-content .et_pb_section.mc-sec-filigrane::before {
		background-size: 320px auto;
		background-position-x: -90px;
	}
}

/* ==================================================================
   LES PREMIERS MOTS DU TITRE DE BANDE, EN LETTRES TRACÉES — 14/10
   ==================================================================
   Demande de la cliente, metallpartners.com à l'appui : dans la bande
   de titre des pages de structure, une partie du H1 en lettres
   creuses, le reste plein.

   LA TAILLE NE BOUGE PAS. Mesure faite sur /applications/ avant de
   trancher : à 44 px le titre monte à 59 px de haut, à 52 px à 68, et
   à 60 px il passe à deux lignes et occupe 144 px des 400 de la bande.
   Jugé « beaucoup trop gros ». Le H1 reste donc à sa taille de charte,
   36 px, graisse 800 — l'effet se lit très bien à cette taille, et la
   bande garde sa composition.

   LE TRACÉ N'EST PAS UNE BORDURE : -webkit-text-stroke suit le contour
   des lettres. Sa couleur ne peut pas être currentColor, qui vaudrait
   « transparent » au moment où on vide le remplissage ; elle est donc
   nommée, avec le blanc des bandes sombres par défaut, et se change par
   la variable --mc-trace-couleur si une bande claire en demande une
   autre.

   SOUS @supports, PARCE QU'UN NAVIGATEUR QUI NE SAIT PAS TRACER
   AFFICHERAIT UN TITRE INVISIBLE : color: transparent, lui, est compris
   partout. Les deux déclarations voyagent donc ensemble, et là où le
   tracé n'existe pas le titre reste simplement plein. */

@supports (-webkit-text-stroke: 1px #FFFFFF) {

	.mc-trace {
		color: transparent;
		-webkit-text-stroke: 1px var(--mc-trace-couleur, #FFFFFF);
		paint-order: stroke fill;
	}
}