/* Composants partagés par les pages intérieures — Metaconcept Core.
 *
 * POURQUOI UN FICHIER DE PLUS, ALORS QU'ON ÉVITE DE LES MULTIPLIER.
 * socle.css porte le vocabulaire de TOUT le site : couleurs, boutons,
 * titres, rythme. accueil.css porte ce qui n'existe qu'en page d'accueil.
 * Entre les deux manquait un étage : les composants que les maquettes
 * Référence, Recyclage et Formations emploient toutes les trois — cartes
 * verticales, sous-navigation d'ancres, badges, tableaux de
 * caractéristiques, avis. Les écrire dans socle.css les imposerait aux
 * 990 pages ; les écrire trois fois serait pire. Ils vivent donc ici, et
 * ce fichier ne se charge que là où l'un d'eux est rendu.
 *
 * Tous les jetons viennent du socle. Aucune couleur écrite en dur.
 */

/* ==================================================================
   1. LA CARTE VERTICALE — image en tête, flèche en pied
   ==================================================================
   Familles de métaux, DEEE, formats de formation, produits similaires.
   Pendant vertical de .mc-carte-h : même bordure, même ombre, même
   geste au survol, pour qu'une page qui mélange les deux reste d'une
   seule main. */

.mc-carte-v {
	position: relative;
	display: flex;
	flex-direction: column;
	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);
	color: inherit;
	text-decoration: none;
	transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.mc-carte-v:hover {
	transform: translateY(-6px);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------------
   UNE PROPORTION, PAS UNE HAUTEUR — retour client du 08/10
   ------------------------------------------------------------------

   « On ne voit pas bien les images. » Le coupable est la hauteur fixe
   de 130 px qui était écrite ici. Une carte de 465 px de large lui
   donnait une bande de 3,56:1 — un format panoramique dans lequel une
   photo en 1,5:1 perdait 58 % de sa hauteur. Et le défaut EMPIRAIT
   avec la largeur : la hauteur ne suivait pas, donc plus l'écran était
   grand, plus la photo était tranchée.

   Une proportion règle les deux d'un coup. En 16/9, le recadrage est
   le même à toutes les largeurs — tablette comprise — et il ne retire
   plus que 16 % de la hauteur d'une photo en 1,5:1 au lieu de 58 %.
   Mesuré sur /applications/ : visuel 463 × 261 au lieu de 463 × 130,
   carte 371 px au lieu de 252.
   ------------------------------------------------------------------ */
.mc-carte-v__visuel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(140deg, #3A332A 0%, #6E6A5F 60%, #9A9183 100%);
}

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

.mc-carte-v:hover .mc-carte-v__visuel img {
	transform: scale(1.05);
}

/* Le rembourrage bas laisse la place à la flèche, qui est posée en
   absolu : sans lui, elle chevaucherait la dernière ligne de texte. */
/* Le rembourrage se resserre de 16 px au total — demandé le 08/10 en
   même temps que l'agrandissement du visuel : « agrandir l'image tout
   en réduisant un peu la zone écrite ». Les 32 px du bas restent ce
   qu'il faut à la flèche, qui est posée en absolu. */
.mc-carte-v__corps {
	position: relative;
	flex: 1 1 auto;
	padding: 14px 18px 32px;
}

.mc-carte-v__titre {
	display: block;
	margin: 0 0 6px;
	font-size: 0.90625rem;
	font-weight: 600;
	line-height: 1.3;
}

/* EN <span>, PAS EN <p>, ET LA CSS LE REND BLOC.
   Un <p> est du contenu de flux : placé dans un <a>, qui n'accepte que
   du contenu de phrasé, l'analyseur HTML du navigateur FERME le lien et
   sort le paragraphe de la carte. Sur la page Formations du 01/10, les
   descriptions se retrouvaient ainsi posées dans les cases voisines,
   hors de toute carte. Le balisage reste donc en <span>, et c'est cette
   déclaration qui lui donne son comportement de bloc. */
/* DEUX LIGNES AU PLUS. Les descriptions vont de une à trois lignes
   selon les fiches ; la plus longue d'une rangée imposait sa hauteur à
   toutes les autres, qui se retrouvaient avec un blanc sous leur
   texte. Le bornage les remet d'aplomb sans rien retirer du balisage :
   la phrase entière reste dans le document, donc lisible par un robot
   et par un lecteur d'écran — c'est l'affichage qui s'arrête, pas le
   contenu.
   -webkit-box reste un bloc : le comportement expliqué ci-dessus est
   conservé. */
.mc-carte-v__texte {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 0.78125rem;
	line-height: 1.5;
	color: var(--mc-gris, #6E757C);
}

/* La flèche commune aux deux cartes — dessinée, jamais écrite. */
.mc-fleche {
	position: absolute;
	right: 16px;
	bottom: 14px;
	width: 18px;
	height: 10px;
	background: var(--mc-gris-clair, #9BA1A6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 5h15M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 5h15M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.mc-carte-v:hover .mc-fleche,
.mc-carte-h:hover .mc-fleche {
	transform: translateX(5px);
	background: var(--mc-action, #D87A00);
}

/* Sur fond sombre — process du recyclage. */
.mc-sec-sombre .mc-carte-v {
	border-color: rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.045);
}

.mc-sec-sombre .mc-carte-v:hover {
	background: rgba(255, 255, 255, 0.075);
	border-color: rgba(213, 174, 5, 0.55);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.mc-sec-sombre .mc-carte-v__titre {
	color: #FFFFFF;
}

.mc-sec-sombre .mc-carte-v__texte {
	color: #B9B4A6;
}

/* ------------------------------------------------------------------
   LA CARTE FIXE — le cadre de la carte, sans le geste du lien
   ------------------------------------------------------------------
   Les trois branches du groupe, le showroom, la R&D : la maquette les
   dessine en cartes, et elles ne mènent nulle part. On ne pouvait pas
   réemployer .mc-carte-v, qui est un <a> : posée sur un <div>, elle
   garderait son soulèvement au survol et sa flèche, et promettrait un
   clic que personne n'honore — la faute relevée le 05/10 sur Formations.

   Elle garde donc le cadre, l'ombre et le rythme intérieur de la carte,
   et perd tout ce qui annonce un départ. Un lecteur voit un bloc, pas un
   chemin. Les repères, eux, restent la bonne réponse quand il s'agit de
   quatre faits courts alignés ; une carte fixe sert un paragraphe.

   LA CARTE ET LE LIEN PEUVENT COHABITER : sur les filiales, c'est bien
   .mc-carte-v qui sert, parce que chacune mène au site de la société. */

.mc-carte-fixe {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 22px 24px;
	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);
}

/* ==================================================================
   LE DUO TEXTE + VISUEL — 09/10
   ==================================================================

   Demandé pour la section Innovation d'À propos : « ajouter une photo
   dans la zone showroom, peut-être changer le style de la section ».

   LA PREMIÈRE IDÉE NE TENAIT PAS, ET L'ÉCRAN L'A DIT. Poser la photo
   en tête de la seule carte Showroom donnait une carte de 500 px face
   à une carte de 290 : 210 px de blanc au bas de « Recherche &
   développement », pour rien. Deux cartes côte à côte se répondent ;
   une seule illustrée, elles ne se répondent plus.

   LA PHOTO N'EST PAS DANS UNE CARTE, ELLE EST EN FACE. Les deux cartes
   s'empilent à gauche, la photo occupe la colonne de droite sur toute
   leur hauteur. Le bloc redevient d'aplomb — et la section passe de
   769 à 564 px au passage.

   LA PHOTO NE DICTE PAS LA HAUTEUR, ELLE LA SUBIT. C'est tout le point
   de l'image en position absolue : sans elle, la figure prendrait la
   hauteur naturelle de la photo — 375 px pour une colonne de 500 —
   et c'est la colonne de texte qui se retrouverait courte. Ici, la
   hauteur vient des cartes, et le cadrage s'ajuste.

   LA GRILLE INTÉRIEURE N'EST PAS À REPRENDRE. Le bloc existant est une
   mc-grille--2 ; plutôt que de faire réécrire sa classe, le duo la
   remet sur une colonne depuis le parent. Coller la section dans le
   duo suffit, on ne touche pas à son contenu.
   ================================================================== */

.mc-duo-visuel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: 22px;
	align-items: stretch;
}

.mc-duo-visuel > .mc-grille {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}

.mc-duo-visuel__photo {
	position: relative;
	margin: 0;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	border-radius: var(--mc-rayon-carte, 12px);
}

.mc-duo-visuel__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empilé, le rapport s'inverse : la photo n'a plus de hauteur à
   suivre, elle reprend donc une proportion à elle. */
@media (max-width: 900px) {

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

	.mc-duo-visuel__photo {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.mc-carte-fixe__logo {
	display: block;
	width: auto;
	height: 34px;
	align-self: flex-start;
}

.mc-carte-fixe__titre {
	display: block;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mc-gris-fonce, #4D4D4D);
}

.mc-carte-fixe__texte {
	display: block;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--mc-gris, #6E757C);
}

.mc-sec-sombre .mc-carte-fixe {
	border-color: rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.045);
}

.mc-sec-sombre .mc-carte-fixe__titre {
	color: #FFFFFF;
}

.mc-sec-sombre .mc-carte-fixe__texte {
	color: #B9B4A6;
}

/* ------------------------------------------------------------------
   LES REPÈRES — le pendant NON CLIQUABLE de la carte
   ------------------------------------------------------------------
   POURQUOI CE BLOC EXISTE. Sur la page Formations, quatre informations
   — le format, la durée, le public, le tarif — portaient le costume de
   .mc-carte-v : bordure, ombre, bandeau d'image, flèche au coin. Or
   elles ne mènent nulle part ; leurs liens étaient des href="#". Un
   visiteur qui clique sur « 1 950 € HT / jour » et qu'il ne se passe
   rien apprend que les cartes du site ne répondent pas, et cesse de
   cliquer sur les vraies.

   Le remède n'est pas de retirer la flèche d'une carte : c'est de ne
   pas habiller un fait en carte. Un repère est donc dessiné par
   SOUSTRACTION — pas d'ombre, pas de cadre, pas de bandeau, pas de
   flèche, aucun geste au survol. Reste un filet d'or au-dessus de la
   rangée, une valeur en gras, sa phrase en gris. Rien n'y invite au
   clic, parce que rien n'y répondrait.

   Ces règles vivent ici, collées à .mc-carte-v, et non dans une
   feuille de page : c'est en les lisant l'une sous l'autre qu'on voit
   ce qui sépare les deux. */

/* LA MÊME BANDE QUE LES CHIFFRES CLÉS, ET POUR LA MÊME RAISON.
   Premier essai : filet d'or au-dessus, valeurs à gauche, colonnes
   séparées à droite — un dessin de plus, qui n'existait nulle part
   ailleurs sur le site. Or le site a DÉJÀ une façon de poser quatre
   faits côte à côte, c'est la bande de chiffres clés de l'accueil :
   centrée, séparée par des filets verticaux, valeur en or, libellé en
   gris. Un repère est un chiffre clé dont la valeur se dit en mots ;
   il prend donc la même bande, aux tailles près.

   Deux feuilles, une seule bande : les règles sont écrites ici parce
   que les repères servent sur toutes les pages, mais leurs valeurs
   reprennent celles de .mc-chiffre dans accueil.css. Si la bande
   change un jour, c'est aux deux endroits — le prix à payer pour ne
   pas charger la feuille de l'accueil sur tout le site. */

/* LA BANDE PORTE SON PROPRE ESPACE, AU-DESSUS ET AU-DESSOUS.
   Elle n'avait de marge qu'en haut, parce qu'elle venait en dernier
   dans sa section. Remontée au-dessus du titre le 05/10, elle s'est
   retrouvée collée à lui : 4 px d'écart sur mon écran, et un
   chevauchement franc sur le sien, là où le CSS statique de Divi —
   indexé par numéro de module, et donc décalé d'un cran par l'échange
   des deux lignes — appliquait encore l'espacement de l'une à l'autre.

   Une bande qui ne sait pas où elle sera posée doit porter son espace
   avec elle, plutôt que de l'emprunter à la ligne qui l'héberge. */
.mc-reperes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 32px 0;
	text-align: center;
}

.mc-repere {
	padding: 4px 20px;
	border-left: 1px solid var(--mc-bord, #ECECEC);
}

/* Le premier n'a pas de filet à sa gauche, sans quoi la bande commence
   par un trait dans le vide. */
.mc-repere:first-child {
	border-left: 0;
}

/* En <span> rendus blocs, pour la même raison que .mc-carte-v__texte :
   le balisage reste valide si un jour un repère se retrouve dans un
   contexte qui n'accepte que du contenu de phrasé. */
.mc-repere__valeur {
	display: block;
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mc-or, #D5AE05);
	text-wrap: balance;
}

.mc-repere__texte {
	display: block;
	margin: 0;
	font-size: 0.78125rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--mc-gris, #6E757C);
}

.mc-sec-sombre .mc-repere {
	border-left-color: rgba(255, 255, 255, 0.12);
}

.mc-sec-sombre .mc-repere__valeur {
	color: #FFFFFF;
}

.mc-sec-sombre .mc-repere__texte {
	color: #B9B4A6;
}

/* ==================================================================
   2. LA SOUS-NAVIGATION D'ANCRES
   ==================================================================
   Une rangée de pastilles collante sous l'en-tête. Elle ne remplace pas
   le menu : elle dit ce que CETTE page contient, et où l'on en est.

   top:0 et non une valeur en dur : l'en-tête du site est en position
   statique (vérifié le 01/10), la barre n'a donc rien à compenser. */

.mc-subnav {
	position: sticky;
	/* SOUS L'EN-TÊTE, PAS SOUS LE BORD DE L'ÉCRAN.
	   top:0 avait été écrit en supposant un en-tête statique. Il est
	   fixe : la barre passait DERRIÈRE lui, et sur la page Formations
	   elle recouvrait la section suivante. --mc-entete porte la hauteur
	   réelle, barre d'administration comprise. */
	top: var(--mc-entete, 92px);
	z-index: 90;
	padding: 14px 0;
	border-bottom: 1px solid var(--mc-bord, #ECECEC);
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-subnav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* LES PUCES REVENAIENT QUAND MÊME. list-style:none sur la liste ne
   suffit pas ici : le thème dessine ses propres puces en ::before sur
   les <li>, et elles s'affichaient entre les pastilles de la page
   Formations (relevé le 01/10). On éteint les deux. */
.mc-subnav__liste > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-subnav__liste > li::before,
.mc-subnav__liste > li::marker {
	content: none;
	display: none;
}

.mc-subnav a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--mc-gris-clair, #9BA1A6);
	border-radius: 100px;
	background: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-gris, #6E757C);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mc-subnav a:hover,
.mc-subnav a[aria-current="true"] {
	background: var(--mc-action, #D87A00);
	border-color: var(--mc-action, #D87A00);
	color: #FFFFFF;
}

/* ------------------------------------------------------------------
   SUR PETIT ÉCRAN, ELLE NE S'AFFICHE PAS — 07/10
   ------------------------------------------------------------------

   Demandé le 07/10, capture à l'appui. La rangée se replie : mesuré
   sur /metaconcept-group-recyclage/, huit pastilles pour 886 px de
   large cumulés, qui tiennent sur une ligne au-dessus de ~950 px et
   deviennent QUATRE lignes de 179 px en dessous. Et la barre est
   collante : ces 179 px suivent le doigt et mangent un quart de
   l'écran d'un téléphone pendant toute la lecture.

   Le seuil est 980 px — la frontière tablette de Divi, déjà
   signifiante dans ce projet. Au-dessus, la barre tient sur une ligne
   sur toutes les pages ; en dessous, aucune.

   LA SECTION DISPARAÎT AUSSI, PAS SEULEMENT LA BARRE. Cacher la seule
   barre laisserait la bande de la section, soit 60 px de vide mesurés
   sur la page Formations. On ne l'escamote toutefois que lorsque la
   sous-navigation est SEULE dans sa section : ailleurs, la section
   porte autre chose, et la faire disparaître emporterait du contenu.

   CE QUI EST PERDU, ET ASSUMÉ. Les ancres existent toujours — les
   liens qui pointent dessus depuis une autre page fonctionnent — mais
   le visiteur sur téléphone n'a plus le raccourci entre sections. Sur
   un écran où l'on défile de toute façon, c'est le meilleur échange.
   ------------------------------------------------------------------ */

@media (max-width: 980px) {
	.mc-subnav {
		display: none;
	}

	#page-container .et_pb_section:has(> .et_pb_row:only-child .mc-subnav) {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ==================================================================
   3. LES BADGES
   ==================================================================
   Qualiopi, « Eutectique », « Éligible OPCO » : des faits, pas des
   boutons. Ils ne sont donc ni cliquables ni orange — l'orange est
   réservé à ce sur quoi on peut agir. */

.mc-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 0.71875rem;
	font-weight: 700;
	background: #F6ECCC;
	color: var(--mc-encre, #4D4D4D);
}

.mc-badge--vert {
	background: #E5F5E8;
	color: #2F7D45;
}

.mc-badge--clair {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
}

.mc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

/* ==================================================================
   4. LE TABLEAU DE CARACTÉRISTIQUES
   ==================================================================
   Clé à gauche, valeur à droite, une ligne sur deux teintée. Ce sont des
   lignes de définition, pas un tableau de données : d'où le balisage en
   paires et non en <table>. */

.mc-fiche-specs {
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

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

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

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

.mc-fiche-specs__cle {
	color: var(--mc-gris, #6E757C);
	font-weight: 500;
}

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

/* ==================================================================
   5. L'AVIS CLIENT
   ================================================================== */

.mc-avis {
	padding: 24px;
	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.3s ease, box-shadow 0.3s ease;
}

.mc-avis:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

.mc-avis__tete {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.mc-avis__etoiles {
	color: var(--mc-or, #D5AE05);
	font-size: 0.8125rem;
	letter-spacing: 1px;
}

.mc-avis__texte {
	margin: 0 0 14px;
	font-size: 0.84375rem;
	line-height: 1.6;
	color: var(--mc-encre, #4D4D4D);
}

.mc-avis__auteur {
	font-size: 0.71875rem;
	font-weight: 600;
	color: var(--mc-gris-clair, #9BA1A6);
}

/* ==================================================================
   6. LE PILIER — RSE, engagements
   ================================================================== */

.mc-pilier {
	padding: 26px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: var(--mc-fond-doux, #FAFAFA);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mc-pilier:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

.mc-pilier__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: var(--mc-or, #D5AE05);
	color: #FFFFFF;
	font-size: 1.1875rem;
	font-weight: 700;
}

.mc-pilier__titre {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 700;
}

.mc-pilier__texte {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: var(--mc-gris, #6E757C);
}

/* ==================================================================
   7. LE BANDEAU D'ATTESTATION
   ==================================================================
   ICPE, Qualiopi : une ligne qui engage l'entreprise. Elle se distingue
   d'une carte par sa pastille ronde et son fond uni. */

.mc-attestation {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
	padding: 22px 26px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: var(--mc-fond-doux, #FAFAFA);
}

/* LE LOGO DE CERTIFICATION, ENCADRÉ COMME UNE IMAGE À LA UNE.
   Même cadre que .mc-hero__media sur les gammes et les fiches : fond
   blanc, filet discret, coins arrondis. Une seule différence, et elle
   compte : object-fit est en « contain », pas en « cover ». Le logo
   Qualiopi est en format paysage (300 × 161) ; recadré en carré, il
   perdrait la mention de certification sur les côtés — et un logo de
   certification rogné ne vaut plus rien. Le rembourrage lui laisse
   l'air que le cadre lui prend. */

.mc-attestation__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 96px;
	aspect-ratio: 1 / 1;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid rgba(77, 77, 77, 0.12);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
	overflow: hidden;
}

.mc-attestation__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 640px) {

	.mc-attestation__media {
		width: 76px;
	}
}

/* UN LOGO D'ADHÉSION, SANS CADRE — 09/10, 16 h.
 *
 * Le cadre blanc de __media est fait pour un logo de CERTIFICATION :
 * Qualiopi, ISO. Il le pose comme une image à la une, et c'est juste —
 * ces logos-là sont des pièces officielles, souvent sur fond blanc,
 * qu'un fond doux salirait.
 *
 * Une ADHÉSION n'a pas ce besoin. Le Coq Vert posé dans le même cadre
 * faisait une boîte dans une boîte — « très claude », et le mot est
 * mérité : 96 px de carré blanc en face d'une pastille de 38, les deux
 * bandes ne se répondaient plus. Le logo se pose donc nu, à 52 px,
 * c'est-à-dire au poids de la pastille d'en face.
 *
 * mix-blend-mode multiply, comme les logos de .mc-certifs : si le
 * fichier arrive un jour avec un fond blanc au lieu d'une
 * transparence, il se fondra dans le gris doux au lieu d'y découper un
 * rectangle. Le composant n'a pas à savoir ce qu'on lui donnera.
 *
 * L'attribut height du HTML ne suffisait pas : le thème impose
 * img { height: auto }, qui bat toujours un attribut de présentation. */
.mc-attestation__embleme {
	flex: 0 0 auto;
	width: auto;
	height: 52px;
	mix-blend-mode: multiply;
}

.mc-attestation__pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mc-or, #D5AE05);
	color: #FFFFFF;
	font-size: 1.0625rem;
	font-weight: 800;
}

.mc-attestation strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875rem;
	color: var(--mc-encre, #4D4D4D);
}

.mc-attestation span {
	font-size: 0.8125rem;
	color: var(--mc-gris, #6E757C);
}

.mc-sec-sombre .mc-attestation {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
}

.mc-sec-sombre .mc-attestation strong {
	color: #FFFFFF;
}

.mc-sec-sombre .mc-attestation span {
	color: #B9B4A6;
}

/* ------------------------------------------------------------------
   LE DUO — un titre à gauche, un encart à sa droite
   ------------------------------------------------------------------
   POURQUOI. L'attestation Qualiopi occupait une section entière, fond
   sombre, pour une seule ligne de texte : la page s'allongeait d'une
   bande pleine hauteur sans rien dire de plus. Posée à droite du titre,
   elle dit la même chose au même endroit que l'argument qu'elle appuie.

   DEUX TIERS, UN TIERS. Le découpage suit celui des sections du site,
   pas une largeur en pixels choisie pour l'occasion.

   Sous 1024 px l'encart passe sous le titre : à cette largeur, le logo
   et sa phrase ne tiennent plus côte à côte du chapô sans se couper. */

.mc-duo {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* LE PARAGRAPHE VIDE DE wpautop.
   Entre un shortcode et le bloc HTML qui le suit dans un même module,
   l'éditeur intercale un <p></p> vide. Invisible dans un flux normal,
   il devient une CASE dans une grille : l'encart était renvoyé à la
   ligne suivante, et le duo n'en était plus un. Relevé le 05/10 sur la
   page Formations, et appelé à se reproduire partout où un shortcode
   voisine du HTML. */
.mc-duo > p:empty {
	display: none;
}

/* DANS LE DUO, L'ATTESTATION PERD SON CADRE.
   Seule dans sa section, elle avait besoin d'un fond et d'un filet pour
   exister. À droite d'un titre, ces deux-là font une boîte dans une
   boîte : la section a déjà son fond, et un encadré posé dessus ajoute
   une frontière que rien ne justifie. Elle se pose donc à même le fond
   de la section, et c'est la colonne qui la tient.

   La marge haute saute pour la même raison : elle doit s'aligner sur le
   haut du titre, pas s'en décoller. */
.mc-duo .mc-attestation {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* LE LOGO PASSE AU-DESSUS, ET IL GRANDIT.
   À côté du texte, dans un tiers de section, il lui restait 96 px :
   une vignette où la mention « processus certifié » n'était plus
   lisible, donc un logo de certification qui ne certifie plus rien.
   Posé au-dessus, il dispose de toute la colonne.

   Le carré et le cadre blanc sautent avec lui : ils venaient de l'état
   encadré, où il fallait border le logo. Le rapport 300 × 161 reprend
   la main, et la hauteur suit la largeur. */
.mc-duo .mc-attestation__media {
	width: 190px;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.mc-duo .mc-attestation__logo {
	height: auto;
}

@media (max-width: 1023px) {

	.mc-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* ==================================================================
   8. LA FICHE PRODUIT — photo à gauche, identité à droite
   ================================================================== */

.mc-fiche {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.mc-fiche__photo {
	width: 340px;
	height: 340px;
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
	background: linear-gradient(140deg, #3A332A 0%, #6E6A5F 60%, #9A9183 100%);
}

.mc-fiche__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-fiche__code {
	margin: 0 0 18px;
	font-size: 0.78125rem;
	font-weight: 600;
	color: var(--mc-gris-clair, #9BA1A6);
}

.mc-fiche__accroche {
	max-width: 60ch;
	margin: 0 0 22px;
	font-size: 0.90625rem;
	color: var(--mc-gris, #6E757C);
}

@media (max-width: 1100px) {
	.mc-fiche {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.mc-fiche__photo {
		width: 100%;
		height: 260px;
	}
}

/* ==================================================================
   9. LE CHIFFRE SECONDAIRE — séries courtes en ligne
   ================================================================== */

.mc-minichiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	margin: 8px 0 40px;
}

.mc-minichiffre__valeur {
	margin-bottom: 6px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--mc-or, #D5AE05);
}

.mc-minichiffre__libelle {
	max-width: 230px;
	font-size: 0.75rem;
	color: var(--mc-gris, #6E757C);
}

/* ==================================================================
   10. RACCORD — les composants existants prennent l'allure des maquettes
   ==================================================================

   POURQUOI UN RACCORD PLUTÔT QU'UNE RÉÉCRITURE.
   La fiche référence, le tableau de caractéristiques, les cartes
   d'application et la sous-navigation existent depuis des semaines, avec
   leurs propres noms de classes. Les maquettes ne demandent pas d'autres
   composants : elles demandent une autre APPARENCE pour les mêmes. Les
   réécrire en .mc-fiche / .mc-carte-h reviendrait à toucher au PHP de
   quatre modules et à casser les pages qui s'en servent déjà.

   Ce bloc habille donc l'existant. Le jour où ces modules seront
   réécrits, il s'enlèvera d'un coup.

   Relevé le 01/10 sur /produits/targettes-barres/fe028929-… : la
   structure était déjà juste — grille 340 px + reste, tableau en lignes,
   trois colonnes d'applications. C'est l'habillage qui manquait. */

/* LA RESPIRATION DU HERO APPARTIENT AU HERO, PAS À SA COULEUR.
   Elle était posée sur --clair : la fiche produit passée en sombre s'est
   retrouvée sans aucun rembourrage, le titre collé au fil d'Ariane
   (relevé le 01/10). Elle vaut pour les deux variantes. */
#page-container .mc-hero {
	/* 20 px : le hero d'une fiche ou d'une gamme est une BANDE, pas une
	   page de garde. Avec la hauteur plancher de 400 px posée dans
	   hero.css, c'est ce rembourrage qui permet au contenu de la fiche la
	   plus chargée d'y tenir — mesuré sur RR100005, 357 px de contenu
	   pour 400 de bande. */
	padding: 20px 0;
}

#page-container .mc-hero--clair {
	gap: 56px;
	border-bottom: 1px solid var(--mc-bord, #ECECEC);
	background: var(--mc-fond-doux, #FAFAFA);
}

#page-container .mc-hero__media {
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

#page-container .mc-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#page-container .mc-hero__titre {
	margin: 0 0 6px;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.015em;
}

#page-container .mc-hero__intro {
	max-width: 60ch;
	font-size: 0.90625rem;
	color: var(--mc-gris, #6E757C);
}

/* ------------------------------------------------------------------
   Le hero illustré : large, et court
   ------------------------------------------------------------------
   Deux demandes, dans cet ordre, le 01/10 — et la seconde corrige un
   excès de la première.

   1. EMPLOYER LA LARGEUR. La ligne fait 1440 px et le hero n'en
      employait qu'une partie : titre plafonné à 631 px, chapô à 546,
      dans une colonne de 1044. 400 px de vide à droite.

   2. NE PAS GRANDIR POUR AUTANT. La première passe avait agrandi le
      titre à 44 px et le chapô à 16/1,7 : le hero est passé de 486 à
      725 px de haut. Or un hero de fiche doit laisser voir le contenu,
      pas remplir l'écran.

   La réponse tient dans le fait qu'ÉLARGIR RACCOURCIT : un chapô de 88
   caractères par ligne tient en quatre lignes là où 68 en demandaient
   six. On garde donc toute la largeur, et on redescend les tailles —
   titre jusqu'à 36 px au lieu de 44, chapô à 15 px. Résultat mesuré sur
   RR100005 : 521 px au lieu de 725, et le hero entier tient au-dessus
   de la ligne de flottaison avec la barre d'ancres.

   Ces règles ne touchent que le hero ILLUSTRÉ : un hero de page
   d'accueil, sans média, garde ses proportions. */

#page-container .mc-hero--avec-media .mc-hero__titre {
	max-width: none;
	margin-bottom: 0;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

#page-container .mc-hero--avec-media .mc-hero__intro {
	/* 96 caractères par ligne : au-delà du confort de lecture habituel,
	   mais c'est un chapô de quelques lignes, pas un article — et chaque
	   ligne gagnée est de la hauteur en moins. */
	max-width: 96ch;
	font-size: 0.9375rem;
	line-height: 1.5;
}

#page-container .mc-hero--avec-media .mc-hero__kicker {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
}

/* Le tableau de caractéristiques — même dessin que .mc-fiche-specs, sur
   le balisage que le module produit déjà. */
#page-container .mc-caracs {
	max-width: 520px;
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

#page-container .mc-caracs__ligne {
	padding: 13px 18px;
	border-bottom: 1px solid var(--mc-bord, #ECECEC);
	font-size: 0.8125rem;
}

#page-container .mc-caracs__ligne:last-child {
	border-bottom: 0;
}

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

#page-container .mc-caracs__cle {
	font-weight: 500;
	color: var(--mc-gris, #6E757C);
}

#page-container .mc-caracs__valeur {
	font-weight: 700;
	text-align: right;
	color: var(--mc-encre, #4D4D4D);
}

/* Les cartes d'application — le geste des cartes de la maquette. */
#page-container .mc-app-grid {
	gap: 22px;
}

#page-container .mc-app-card {
	padding: 20px;
	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;
}

#page-container .mc-app-card:hover {
	transform: translateY(-6px);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

#page-container .mc-app-card__title {
	margin: 0 0 6px;
	font-size: 0.90625rem;
	font-weight: 700;
}

#page-container .mc-app-card__desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--mc-gris, #6E757C);
}

/* La sous-navigation existante prend la pastille de la maquette. */
#page-container .mc-subnav {
	position: sticky;
	/* Même correction qu'au-dessus : l'en-tête est fixe, la barre doit se
	   poser dessous. Cette seconde écriture, plus lourde, l'emportait sur
	   la première — d'où une barre encore collée au bord de l'écran après
	   correction. Les deux disent maintenant la même chose. */
	top: var(--mc-entete, 92px);
	z-index: 90;
	padding: 14px 0;
	border-bottom: 1px solid var(--mc-bord, #ECECEC);
	background: var(--mc-fond-doux, #FAFAFA);
}

/* La liste tient sur la hauteur de ses pastilles : sans cela, les <li>
   ajoutaient leur interligne et la bande montait à 89 px contre 61
   ailleurs. */
#page-container .mc-subnav__liste {
	align-items: center;
	line-height: 1;
}

#page-container .mc-subnav__liste > li {
	display: flex;
	margin: 0;
	padding: 0;
	line-height: 1;
}

#page-container .mc-subnav__liste > li::before,
#page-container .mc-subnav__liste > li::marker {
	content: none;
	display: none;
}

#page-container .mc-subnav a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

#page-container .mc-subnav__link {
	padding: 8px 16px;
	border: 1px solid var(--mc-gris-clair, #9BA1A6);
	border-radius: 100px;
	background: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-gris, #6E757C);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#page-container .mc-subnav__link:hover,
#page-container .mc-subnav__link[aria-current] {
	background: var(--mc-action, #D87A00);
	border-color: var(--mc-action, #D87A00);
	color: #FFFFFF;
}

/* La ligne de commande du hero : quantité, ajout au devis, fiche
   technique. Encadrée comme dans la maquette, pour qu'elle se lise comme
   un bloc d'action et non comme deux boutons posés là. */
.mc-fiche__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

/* ------------------------------------------------------------------
   11. RÉSERVER UNE SESSION — calendrier et formulaire côte à côte
   ------------------------------------------------------------------
   La maquette les met sur deux colonnes égales : le calendrier choisit la
   date, le formulaire la transmet. Séparés, on ne comprend plus que l'un
   alimente l'autre. Sous 980 px ils s'empilent, calendrier d'abord. */

.mc-reserver {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 980px) {
	.mc-reserver {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}


/* ==================================================================
   12. LA CARTE HORIZONTALE — visuel à gauche, arrondi sur sa droite
   ==================================================================
   Venue de accueil.css, où les secteurs l'ont inaugurée. Les
   applications de la fiche référence emploient exactement la même :
   la laisser dans la feuille de l'accueil obligeait la fiche à charger
   accueil.css pour trois cartes. Elle est partagée, elle vit donc avec
   les composants partagés. */

/* UNE HAUTEUR PLANCHER, PAS UNE HAUTEUR FIXE — corrigé le 08/10, 17 h 34.
 *
 * Signalé sur les cartes de secteurs de l'accueil : le texte sortait de
 * la carte et passait sous la flèche. Reproduit en réduisant la grille à
 * des cartes de 234 px — les SEPT cartes débordaient alors, « Electronique »
 * de 69 px.
 *
 * La hauteur était écrite en dur à 180 px. Tant que la colonne de texte
 * est large, la description tient en trois lignes et personne ne voit
 * rien ; dès qu'elle se resserre — quatre colonnes sur un écran de
 * 1 200 px — la même description passe à six lignes et sort du cadre.
 * Mon passage de l'emplacement de 40 % à 46 %, ce matin, a resserré la
 * colonne de texte et rendu le défaut visible plus tôt : il était déjà
 * là, il attendait son écran.
 *
 * min-height garde le dessin voulu — toutes les cartes font 180 px tant
 * que le contenu tient — et laisse la carte grandir quand il ne tient
 * plus. Les rangées restent d'aplomb : la grille étire déjà ses éléments
 * à la hauteur de la plus haute. */
.mc-carte-h {
	display: flex;
	height: auto;
	min-height: 180px;
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	color: inherit;
	text-decoration: none;
	transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.mc-carte-h:hover {
	transform: translateY(-3px);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.mc-carte-h__visuel {
	display: block;
	flex: 0 0 40%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(140deg, #3A332A 0%, #6E6A5F 60%, #9A9183 100%);
}

/* LE CADRAGE SE DÉCALE VERS LA DROITE — 08/10, 16 h 51.
 *
 * Je m'étais opposé à ce décalage le matin même, au motif qu'il
 * reviendrait à « compenser un défaut de forme par un mensonge sur le
 * centre ». J'avais tort, et voici pourquoi.
 *
 * L'emplacement est un RECTANGLE, mais ce qu'on en voit est un D : le
 * bord droit est arrondi, le gauche est droit. La zone réellement
 * visible n'est donc PAS centrée sur le rectangle — elle penche à
 * gauche, puisque les coins haut-droit et bas-droit sont rognés. Un
 * recadrage centré sur le rectangle est, pour l'œil, un recadrage
 * décentré. Décaler l'image n'est pas mentir sur le centre : c'est
 * aligner le centre de l'IMAGE sur le centre de ce qu'on VOIT.
 *
 * 30 % plutôt que 50 % : l'image glisse vers la droite d'un cinquième
 * de sa largeur débordante, ce qui amène son sujet dans la partie
 * ronde. Comparé à l'écran sur les trois cartes RSE à 50, 35, 25 et
 * 15 % ; entre 25 et 35 la différence est ténue, 30 est le milieu.
 *
 * LA VALEUR EST DANS UNE VARIABLE, sur le composant : si le client
 * veut plus ou moins, c'est un seul nombre à changer, au même endroit
 * que l'arrondi qu'il compense. Les deux vont ensemble — toucher à
 * l'un sans l'autre déséquilibrerait le cadrage. */
.mc-carte-h__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mc-carte-h-cadrage, 30%) 50%;
	transition: transform 0.45s ease;
}

.mc-carte-h:hover .mc-carte-h__visuel img {
	transform: scale(1.05);
}

.mc-carte-h__corps {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 20px 20px 42px;
	min-width: 0;
}

.mc-carte-h__titre {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.mc-carte-h__texte {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--mc-gris, #6E757C);
}

/* La flèche est dessinée : écrite, un lecteur d'écran la lirait. */
.mc-carte-h__fleche {
	position: absolute;
	left: 20px;
	bottom: 18px;
	width: 18px;
	height: 10px;
	background: var(--mc-action, #D87A00);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 5h15M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M0 5h15M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.3s ease;
}

.mc-carte-h:hover .mc-carte-h__fleche {
	transform: translateX(5px);
}


/* ------------------------------------------------------------------
   L'ARC MANGEAIT LE SUJET — retour client du 08/10
   ------------------------------------------------------------------

   « Les images ne sont pas centrées, on voit plutôt le côté droit. »
   Le constat est juste, la cause n'est pas celle qu'on croit : le
   recadrage EST centré — object-fit: cover, object-position 50 % 50 %.
   Ce qui n'était pas centré, c'est ce qu'on VOIT.

   DEUX RÉTRÉCISSEMENTS QUI S'ADDITIONNENT. L'emplacement faisait 40 %
   de la carte, soit 185 × 178 px sur les cartes de 465 — un format
   presque carré (1,04) pour des photos en paysage (1,5 à 1,8). La
   moitié de la largeur de la photo partait déjà là. Puis l'arrondi
   retirait une ellipse dont le demi-axe valait 56 % de la largeur
   restante : au-dessus et au-dessous du milieu, la moitié droite de ce
   qui restait disparaissait à son tour. Mesuré sur la carte Formes :
   le lingot du bas était tranché par l'arc ; sur Applications, la
   turbine l'était aussi.

   ON NE DÉPLACE PAS LE RECADRAGE, ON LUI REND DE LA PLACE. Corriger
   par un object-position décalé reviendrait à compenser un défaut de
   forme par un mensonge sur le centre, et à le refaire à l'envers le
   jour où une photo aurait son sujet ailleurs. L'emplacement passe
   donc à 46 % (213 px, ratio 1,20) et l'arc à 34 % : la découpe en D
   reste — c'est la signature du composant — mais elle mord sur un
   tiers de la largeur au lieu de plus de la moitié.

   Vérifié à l'écran sur les trois cartes du catalogue et les sept
   cartes de secteurs de l'accueil : les sujets tiennent entiers.
   ------------------------------------------------------------------ */
.mc-carte-h__visuel {
	flex: 0 0 46%;
	border-radius: 0 34% 34% 0 / 0 50% 50% 0;
}

/* TROIS COLONNES AVANT DEUX — 08/10.
 *
 * Le socle fait passer les grilles de 4 à 2 colonnes à 1 100 px. Entre
 * 1 100 et 1 400 px, une grille de quatre donne donc des cartes de 250
 * à 290 px, dont 54 % pour le texte : une colonne de 140 px, où
 * « Electronique » se coupe en deux. Un palier à trois colonnes rend à
 * la carte la largeur que sa composition horizontale suppose.
 *
 * :has() limite le palier aux grilles qui portent VRAIMENT une carte
 * horizontale : les grilles de cartes verticales, qui n'ont pas ce
 * problème de largeur, gardent leurs quatre colonnes.
 *
 * LA BORNE BASSE EST OBLIGATOIRE — corrigée le 14/10.
 * Cette règle n'avait qu'un plafond. « max-width: 1400px » est vrai à
 * 412 px aussi : à la largeur d'un téléphone, elle s'appliquait donc
 * encore, et comme .mc-grille--4:has(.mc-carte-h) pèse (0,2,0) contre
 * (0,1,0) pour le .mc-grille--4 du socle, elle BATTAIT les paliers à
 * deux puis une colonne. Relevé sur l'accueil à 412 px : la section
 * « Plusieurs pôles d'expertise industrielle » gardait trois colonnes
 * de 107 px, et « Industries » se lisait « Ind ust ries », un
 * caractère sur trois par ligne.
 *
 * Un palier intermédiaire doit être enfermé des DEUX côtés, sans quoi
 * il déborde sur tous les paliers plus étroits que lui. L'ordre est
 * maintenant : au-delà de 1 400 px quatre colonnes, de 1 101 à 1 400
 * trois, de 901 à 1 100 deux, en dessous une seule. */
@media (min-width: 1101px) and (max-width: 1400px) {

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

@media (max-width: 720px) {
	.mc-carte-h__visuel {
		flex-basis: 34%;
		min-height: 148px;
	}
}

/* ==================================================================
   13. L'ACCORDÉON FAQ
   ==================================================================
   Venu de reference-sections.css. L'accueil rend le même accordéon,
   avec le même balisage : la mise en forme ne peut pas vivre dans la
   feuille d'une seule des deux pages — la FAQ de l'accueil s'affichait
   en <details> nus, relevé le 01/10. */

.mc-faq {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-border: rgba(77, 77, 77, 0.16);
	--mc-ease: 0.18s ease;
}

/* ------------------------------------------------------------------
   3. FAQ
   ------------------------------------------------------------------ */

.mc-faq {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--mc-border);
}

.mc-faq__item {
	border-bottom: 1px solid var(--mc-border);
}

.mc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mc-dark);
	cursor: pointer;
	list-style: none;
	transition: color var(--mc-ease);
}

.mc-faq__q::-webkit-details-marker {
	display: none;
}

.mc-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mc-gold);
	border-bottom: 2px solid var(--mc-gold);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--mc-ease);
}

.mc-faq__item[open] > .mc-faq__q {
	color: var(--mc-gold);
}

.mc-faq__item[open] > .mc-faq__q::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.mc-faq__q:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

.mc-faq__a {
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mc-dark);
}

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


@media (max-width: 767px) {
	.mc-faq__q {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-faq__q::after {
		transition: none;
	}
}

.mc-faq__titre {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 700;
	color: var(--c-base, #4D4D4D);
	letter-spacing: -0.01em;
}

/* ==================================================================
   14. LES RÉFÉRENCES SIMILAIRES
   ==================================================================
   Quatre cartes verticales : trois sœurs de la gamme, puis la gamme
   entière. Elles réemploient .mc-carte-v sans la redessiner ; il ne
   manquait que le code de référence en tête et la carte de fin, qui
   n'a pas d'image et doit garder la même hauteur que les autres. */

.mc-carte-v__code {
	display: block;
	margin: 0 0 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--mc-or, #D5AE05);
}

/* La carte de gamme n'a pas de visuel : sans cela elle serait plus
   courte que ses voisines, et la ligne perdrait son assise. */
.mc-carte-v--gamme {
	justify-content: center;
	background: var(--mc-fond-doux, #FAFAFA);
	border-style: dashed;
}

.mc-carte-v--gamme .mc-carte-v__corps {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
}

.mc-carte-v--gamme .mc-carte-v__titre {
	color: var(--mc-or, #D5AE05);
}

/* ==================================================================
   15. LA CARTE D'APPLICATION
   ==================================================================
   Même carte horizontale que les secteurs de l'accueil. La fiche
   référence n'en affiche souvent que deux : la grille s'adapte (voir
   mc-grille--1/2/3 dans le socle), la carte ne change pas. */

.mc-carte-h--application .mc-carte-h__texte {
	-webkit-line-clamp: 3;
}

/* ==================================================================
   16. LES PICTOGRAMMES DE LA FICHE
   ==================================================================
   Sans plomb, sans cadmium, RoHS, produits recyclés : quatre logos
   saisis dans le champ ACF « pictos » de chaque référence. Ils se
   posent sous le chapô du hero, à la place des pastilles de la
   maquette — ils disent la même chose, en mieux, et ils existent déjà.

   En <span> : le hero les place dans une colonne de texte, et le
   gabarit les enveloppe parfois d'un paragraphe. */

.mc-pictos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
}

.mc-picto {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.mc-picto__image {
	display: block;
	width: auto;
	/* 30 px : un pictogramme accompagne le titre, il ne le concurrence
	   pas. L'ancien balisage les sortait à 142 px de haut — plus gros que
	   le logo du site. */
	height: 30px;
	flex: 0 0 auto;
}

.mc-picto__nom {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--mc-gris, #6E757C);
}

.mc-hero--sombre .mc-picto__nom {
	color: rgba(255, 255, 255, 0.82);
}

/* ==================================================================
   L'ARRIVÉE SUR UNE ANCRE
   ==================================================================
   DEUX DÉFAUTS, UN SEUL SUJET.

   1. OÙ L'ON ATTERRIT. Le site empile jusqu'à trois bandeaux fixes :
      la barre d'administration, l'en-tête collant, la sous-navigation.
      Le navigateur, lui, cale la cible sur le haut de la FENÊTRE,
      c'est-à-dire sous cet empilement. Mesuré le 05/10 sur la page
      Formations : en cliquant « Nos modules », le titre visé finissait
      105 px au-dessus du bas de la barre collante — on arrivait au bon
      endroit en voyant le mauvais écran.

      La hauteur à dégager n'est pas écrivable en dur : elle dépend de
      la barre d'administration, de la présence d'une sous-navigation et
      de la largeur de l'écran. sections-vides.js la mesure et la publie
      dans --mc-ancre-haut ; cette règle la consomme. Le repli à 150 px
      sert le temps que le script s'exécute.

   2. COMMENT ON Y VA. Le saut était instantané : la page se retrouvait
      ailleurs sans que rien n'indique de combien on avait bougé, ni dans
      quel sens. Sur une page à huit sections qui se ressemblent, c'est
      le genre de détail qui fait perdre le fil. Le défilement animé rend
      ce déplacement lisible.

      Il ne concerne QUE les clics internes à la page : une adresse
      ouverte directement sur /page/#documents arrive déjà en bas, il n'y
      a rien à animer.

      Et il s'efface pour qui a demandé moins d'animation dans son
      système — pour une partie des gens, un défilement animé donne la
      nausée. C'est la raison de l'enveloppe no-preference plutôt que
      d'une annulation après coup : par défaut, on ne bouge pas l'écran
      de quelqu'un sans savoir. */

/* LE SÉLECTEUR VISE TOUT CE QUI PORTE UN IDENTIFIANT, PAS UNE CLASSE.
   Premier essai : « .mc-ancre[id] », la classe maison des ancres. Elle
   couvrait quatre des cinq ancres de la page Formations et laissait
   #qualiopi sous l'en-tête — l'encart avait perdu cette classe en
   changeant de place une heure plus tôt. Un dégagement d'ancre qui
   dépend d'une classe se perd au premier déménagement.
   scroll-margin-top ne se voit que lorsqu'on défile VERS l'élément :
   l'appliquer largement ne coûte rien, et l'oublier coûte un écran. */
#main-content [id],
.mc-ancre[id],
[data-mc-nav] {
	scroll-margin-top: var(--mc-ancre-haut, 150px);
}

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

	html {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------
   LA CARTE D'ARTICLE
   ------------------------------------------------------------------

   Demandé le 06/10 : refaire le design de /actualites/ et des pages
   d'article. La carte réemploie .mc-carte-v sans la redessiner — même
   cadre, même flèche, même survol — et n'ajoute que ce qu'un article a
   de plus : une date.

   RELEVÉ DU 06/10 SUR L'ANCIEN MODULE BLOG : image en object-fit:fill,
   donc déformée ; titre en 28 px, plus gros que les titres de section
   qui l'entourent ; lien « Lire l'article » en #D6AE01, un or qui n'est
   pas celui de la charte. Les trois disparaissent ici : l'image est
   recadrée, le titre prend la taille des autres cartes, et la flèche
   remplace le lien écrit — c'est la carte entière qui est cliquable. */

.mc-carte-v--actu .mc-carte-v__visuel {
	/* Plus haut que sur une carte de rubrique : la photo d'un article
	   est le sujet, pas une vignette d'illustration.
	   Écrit en PROPORTION depuis le 08/10, pour la même raison que la
	   carte de base : les 190 px fixes d'avant donnaient du 2,45:1 sur
	   une carte de 465, et se dégradaient à mesure que l'écran
	   grandissait. Le 3/2 garde l'intention — plus haut qu'une carte de
	   rubrique — en la rendant indépendante de la largeur. */
	height: auto;
	aspect-ratio: 3 / 2;
}

/* La date, au-dessus du titre, dans la voix des sur-titres du site. Un
   article non daté n'existe pas : c'est le premier repère que cherche
   le lecteur devant une liste. */
.mc-carte-v__date {
	display: block;
	margin-bottom: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
}

/* Sur fond sombre, la date garde l'or : c'est déjà un accent, il reste
   lisible. Seul le reste de la carte s'inverse (règles plus haut). */

/* La grille d'actualités ne demande rien de particulier — elle réemploie
   .mc-grille. La classe est posée pour pouvoir viser ces cartes-là sans
   toucher aux autres, et pour que le jour où une actualité épinglée
   devra s'afficher en pleine largeur, la règle ait où se poser. */
.mc-actus {
	margin: 0;
}

.mc-actus__vide {
	margin: 0;
	color: var(--mc-gris, #6E757C);
}

/* ==================================================================
   LES REPÈRES, RESSERRÉS
   Garde : body.mc-h-reperes — réglage « 10. Harmonisation — bande de
   repères resserrée ».
   ==================================================================

   Mesuré le 06/10 sur la page Formations : la bande occupe
   1 440 × 74 px, soit quatre colonnes de 360 px pour quatre phrases
   de huit mots. La valeur est en 17 px graisse 700, le libellé en
   12,5 px — pris isolément c'est petit, mais étalé sur toute la
   largeur de lecture, l'ensemble pèse autant qu'un titre de section
   et détourne l'œil du H2 qui le suit.

   Coché : la bande se centre sur 1 100 px au lieu de prendre les
   1 440, la valeur passe à 15 px, le libellé à 11,5, et l'espace
   entre les deux tombe de 8 à 4 px. Hauteur de bande : 74 → 54 px.
   Rien n'est retiré, rien n'est réécrit — seule l'échelle change.
   ------------------------------------------------------------------ */

body.mc-h-reperes .mc-reperes {
	max-width: 1100px;
	margin-inline: auto;
}

body.mc-h-reperes .mc-repere {
	padding-block: 2px;
}

body.mc-h-reperes .mc-repere__valeur {
	font-size: 15px;
	margin-bottom: 4px;
}

body.mc-h-reperes .mc-repere__texte {
	font-size: 11.5px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   LA BANDE SE DÉTACHE, ET NE LAISSE PLUS DE VIDE AU-DESSUS — 07/10
   ------------------------------------------------------------------

   Deux défauts signalés sur la page Formations, et une seule cause :
   la bande de repères et le bloc « Format & organisation » vivent dans
   LA MÊME section Divi.

   1. AUCUNE DIFFÉRENCE DE FOND. La section est en #FAFAFA, la
      sous-navigation juste au-dessus aussi, et le bloc qui suit la
      bande partage la même section — donc le même fond. Trois bandeaux
      successifs de la même couleur : rien ne dit où l'un s'arrête.
      Mesuré le 07/10 : sous-navigation #FAFAFA, section #FAFAFA, et la
      section suivante en #FFFFFF, soit 2 % d'écart — invisible.

   2. 120 PX DE VIDE AU-DESSUS. La section porte 88 px de marge
      intérieure haute, et la bande y ajoute ses 32 px de marge. La
      bande flotte donc à 120 px sous la sous-navigation, sur un fond
      identique : le regard n'a rien à quoi se raccrocher.

   LE CORRECTIF NE DÉCOUPE PAS LA SECTION. Changer la structure
   demanderait le constructeur, et toucher au gabarit. On donne son
   propre fond à la BANDE — une carte blanche sur le gris de la
   section, dans le langage des cartes du site — et on retire le vide
   en tête. Le bloc « Format & organisation » garde son fond gris :
   c'est le contraste entre les deux qui crée la séparation demandée.

   LA MARGE HAUTE N'EST RETIRÉE QUE SI LA BANDE OUVRE LA SECTION.
   Ailleurs, elle sépare la bande de ce qui la précède et doit rester.
   D'où le :has() sur la PREMIÈRE ligne — un seul niveau, jamais
   imbriqué, sans quoi le sélecteur serait invalide et ignoré en
   silence. */

body.mc-h-reperes .mc-reperes {
	padding: 18px 10px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

/* Sur une section sombre, une carte blanche serait un trou de lumière :
   on reprend le voile clair des autres encadrés de ces bandes. */
body.mc-h-reperes .mc-sec-sombre .mc-reperes {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

body.mc-h-reperes #main-content .et_pb_section:has(> .et_pb_row:first-child .mc-reperes) {
	padding-top: 28px;
}

body.mc-h-reperes #main-content .et_pb_row:first-child .mc-reperes {
	margin-top: 0;
	margin-bottom: 40px;
}

/* ==================================================================
   LES GAGES DE CONFIANCE — [mc_gages], 07/10
   ==================================================================

   Une rangée de mentions cochées : délai de réponse, gratuité,
   confidentialité. Le texte vient des réglages, jamais du code — ce
   sont des engagements de l'entreprise (voir sc_gages).

   La coche est DESSINÉE, pas écrite : un caractère « ✓ » dans le
   contenu serait lu à voix haute à chaque ligne et se retrouverait
   dans les résultats de recherche. Même raison que le tiret du
   sur-titre.

   Les gages des landing pages gardent leur propre habillage
   (.mc-lp-gages, lp.css) : ils vivent sur fond sombre, dans une bande,
   et partagent le texte mais pas la mise en page. ================== */

.mc-gages {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.mc-gages__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mc-encre, #4D4D4D);
	list-style: none;
}

.mc-gages__item::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 9px;
	border-left: 2px solid #2E7D32;
	border-bottom: 2px solid #2E7D32;
	transform: rotate(-45deg) translateY(-2px);
}

/* ==================================================================
   LE BLOC « UNE EXPERTISE GLOBALE » ET SON BANDEAU DE CERTIFICATIONS
   ==================================================================
   Validé le 08/10. Le contenu vient de l'accueil de l'ancien site ; il
   est reposé sur l'accueil de la refonte, au-dessus des secteurs —
   l'accueil enchaînait chiffres, secteurs, catalogue sans jamais dire
   ce que fait l'entreprise de bout en bout.

   DEUX RÈGLES, PAS UNE FEUILLE. Tout le reste du bloc est écrit avec
   des classes qui existent déjà — mc-kicker, mc-titre, gg-ref-cta,
   mc-grille, mc-carte-v. Il ne manquait que la mesure du paragraphe et
   le bandeau du bas.

   POURQUOI UN BANDEAU ET PAS DEUX CARTES. Première version essayée :
   les deux certifications dans des encadrés à droite du texte.
   Refusée, et à juste titre — un encadré autour d'un logo, c'est de
   l'emballage sans contenu, et ça prenait un quart de la largeur pour
   deux images. Le bandeau ferme le bloc comme une signature, ne vole
   rien au texte, et accepte un troisième logo sans rien recasser.

   mix-blend-mode: multiply parce que les deux logos sont des JPEG à
   fond blanc : sans lui, on voit deux rectangles blancs sur le gris
   clair de la section. ================================================ */

.mc-expertise p {
	max-width: 72ch;
}

.mc-certifs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 38px;
	margin-top: 38px;
	padding-top: 26px;
	border-top: 1px solid var(--mc-bord, #ECECEC);
}

.mc-certifs__titre {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

.mc-certifs img {
	height: 54px;
	width: auto;
	mix-blend-mode: multiply;
}

/* Les logos filent à droite : le bandeau tient alors toute la largeur de
   lecture au lieu de s'entasser à gauche d'un vide. */
.mc-certifs--droite .mc-certifs__titre {
	margin-right: auto;
}

/* ------------------------------------------------------------------
   LE BLOC TIENT TOUTE LA LARGEUR — 08/10, 17 h 43
   ------------------------------------------------------------------
   Première version : titre, texte et bouton empilés à gauche, mesure de
   lecture à 72ch. Relevé à l'écran — « c'est encore trop vide sur la
   droite » : 700 px de blanc à droite d'un bloc qui n'a rien à y mettre.

   Le texte ne doit pas s'élargir pour autant : au-delà d'environ 75
   signes par ligne, l'œil perd le début de la ligne suivante. On écarte
   donc les DEUX colonnes au lieu d'étirer l'une d'elles — sur-titre et
   titre à gauche, paragraphe et bouton à droite. La largeur de lecture
   est respectée, et le bloc occupe la page.

   Le bandeau de certifications traverse les deux colonnes : c'est la
   signature du bloc, pas le contenu d'une colonne. */
/* ------------------------------------------------------------------
   PISTE 1 — LE BLOC D'IDENTITÉ : LES CHIFFRES ENTRENT DANS LE BLOC
   ------------------------------------------------------------------
   Retenu le 08/10 au soir. Le bloc « Une expertise globale » n'a pas
   assez de contenu pour une largeur de 1 440 px : quelle que soit la
   mise en page, il reste du vide. Plutôt que de le répartir, on donne
   au bloc de quoi le remplir — la bande de chiffres, qui flottait
   seule en section au-dessus, devient sa colonne droite.

   L'accueil perd une section et gagne un bloc complet : on dit qui on
   est à gauche, la preuve est à droite, les certifications signent en
   bas. ------------------------------------------------------------ */

.mc-identite {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 30px 64px;
	align-items: start;
}

/* La mesure de lecture tient à la colonne, pas au paragraphe : le
   titre doit se replier au même endroit que le texte. */
.mc-identite__dire {
	max-width: 46ch;
}

.mc-identite__dire p {
	max-width: none;
}

.mc-identite .mc-certifs {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {

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

.mc-expertise--duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 20px 56px;
	align-items: start;
}

.mc-expertise--duo .mc-kicker,
.mc-expertise--duo .mc-titre {
	grid-column: 1;
}

.mc-expertise--duo .mc-expertise__texte {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.mc-expertise--duo .mc-expertise__texte p {
	max-width: none;
}

.mc-expertise--duo .mc-certifs {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {

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

	.mc-expertise--duo .mc-kicker,
	.mc-expertise--duo .mc-titre,
	.mc-expertise--duo .mc-expertise__texte {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 600px) {

	.mc-certifs img {
		height: 42px;
	}
}

/* ------------------------------------------------------------------
   LE BLOC REPREND LES TROIS FAMILLES — 08/10, 22 h
   ------------------------------------------------------------------
   « Les 3 familles comme sur la page d'accueil de metaconcept.fr, mais
   dans le style de la preprod », puis « peux-tu le faire verticalement
   + mettre les certifs en plus gros et à droite du texte ».

   Deux rangées, pas deux colonnes. En haut, le discours à gauche et
   les certifications à droite ; en dessous, les trois familles en
   cartes verticales sur toute la largeur. Les cartes retrouvent leur
   sens de lecture habituel — image, titre, texte, flèche, de haut en
   bas — et les certifications arrêtent de flotter en bas d'une colonne
   trop courte : elles ont enfin leur place, à hauteur du titre.

   POURQUOI UNE COLONNE « auto » À DROITE. Le bloc de certifications
   n'a pas de largeur à défendre : il fait celle de ses deux logos. Le
   texte prend tout le reste, et sa mesure de lecture reste tenue par
   mc-expertise p — 72 signes, écrits une seule fois, pour tous les
   habillages du bloc.

   LA RANGÉE DE FAMILLES NE REFAIT PAS SA GRILLE. Elle emprunte
   mc-grille--3 du socle : trois colonnes, deux sous 1 100 px, une
   sous 900. Le jour où ces paliers bougent, ils bougent au même
   endroit pour tout le site.
   ------------------------------------------------------------------ */

.mc-expertise--familles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 46px 56px;
	align-items: start;
}

.mc-expertise__dire {
	grid-column: 1;
}

.mc-expertise--familles .mc-certifs {
	grid-column: 2;
	align-self: center;
}

.mc-expertise__familles {
	grid-column: 1 / -1;
}

/* TROIS LIGNES AU LIEU DE DEUX, ICI SEULEMENT. Le bornage du composant
 * est à deux lignes : il remet d'aplomb des rangées de quatre à six
 * cartes dont les descriptions vont de une à trois lignes. Ces trois
 * familles-ci portent les phrases les plus longues du site, et la
 * carte est deux fois plus large qu'en catalogue — à deux lignes, deux
 * descriptions sur trois étaient coupées en plein milieu. La règle ne
 * sort pas de ce bloc : les autres grilles gardent leurs deux lignes. */
.mc-expertise__familles .mc-carte-v__texte {
	-webkit-line-clamp: 3;
}

/* LE BANDEAU DEVIENT UN BLOC — 08/10, 22 h 10.
 *
 * « Améliore la visibilité des certifications. Pas besoin de mettre
 * "Nos certifications" je suppose. Il faut qu'elles aient la taille du
 * titre + paragraphe. »
 *
 * Les mêmes logos, posés debout à droite du texte au lieu d'être
 * couchés sous lui, et à 150 px : un logo de certification se lit tout
 * seul, le sur-titre ne lui apprenait rien. Ils ne sont plus une
 * signature de bas de bloc mais la preuve, montrée en même temps
 * qu'elle est annoncée.
 *
 * 150 PX, PARCE QUE C'EST LA MESURE DU TEXTE. Le titre et son
 * paragraphe font 158 px de haut ; les deux logos font donc la même
 * chose, et les deux moitiés du bloc se répondent. Ils sont centrés
 * sur la colonne de gauche entière (align-self: center) : leur milieu
 * tombe sur le milieu du texte, pas sur celui du titre.
 *
 * LE TEXTE ALTERNATIF RESTE. « Certificat ISO 9001 », « Certificat
 * Qualiopi » : c'est maintenant le seul endroit où un lecteur d'écran
 * apprend ce que sont ces deux images. */
.mc-certifs--bloc {
	align-items: center;
	gap: 34px;
	margin-top: 0;
	padding: 0 0 0 44px;
	border-top: 0;
	border-left: 1px solid var(--mc-bord, #ECECEC);
}

.mc-certifs--bloc img {
	height: 150px;
}

/* Sous 1 000 px, les deux colonnes du haut se mettent l'une sous
   l'autre et le bloc de certifications redevient un bandeau : le filet
   repasse au-dessus, puisqu'il n'y a plus rien à sa gauche. Les logos
   redescendent à une taille d'écran étroit — leur hauteur est écrite
   ici et au palier suivant, faute de quoi le 42 px du composant, moins
   spécifique, ne les atteindrait jamais. */
@media (max-width: 1000px) {

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

	.mc-expertise--familles .mc-certifs {
		grid-column: 1;
	}

	.mc-certifs--bloc {
		padding: 26px 0 0;
		border-top: 1px solid var(--mc-bord, #ECECEC);
		border-left: 0;
	}

	.mc-certifs--bloc img {
		height: 104px;
	}
}

@media (max-width: 600px) {

	.mc-certifs--bloc img {
		height: 68px;
	}
}

/* ==================================================================
   L'ENCART — un avis court, posé au-dessus d'une liste
   ==================================================================

   DEMANDE DU 08/10 : les archives de famille passent au catalogue.
   Leur gabarit portait deux textes qu'on ne pouvait pas perdre au
   passage — l'avis réglementaire sur le plomb, et le renvoi au service
   technique. Il leur fallait une forme à eux dans le site.

   PREMIÈRE VERSION REFUSÉE, ET À RAISON : un filet de couleur sur le
   bord gauche, un coin carré à gauche et arrondi à droite, pas d'ombre.
   Trois partis pris qu'on ne retrouve nulle part ailleurs sur le site.
   Un composant « harmonieux avec l'existant » ne s'invente pas une
   signature : il reprend celle qui existe.

   L'ENCART EST DONC UNE CARTE, avec le cadre, l'arrondi et l'ombre de
   mc-carte-v, et son sur-titre est mc-kicker — le même filet de 26 px,
   les mêmes petites capitales, la même couleur or que tous les
   sur-titres du site. Aucune déclaration de titre n'est réécrite ici :
   seule la couleur change pour l'avis, et seulement elle.
   ================================================================== */

.mc-encart {
	padding: 22px 26px;
	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);
}

/* Le sur-titre d'un encart est collé à son texte : il n'ouvre pas une
   section, il étiquette un paragraphe. */
.mc-encart .mc-kicker {
	margin-bottom: 10px;
}

.mc-encart p {
	margin: 0;
	line-height: 1.6;
	color: var(--mc-gris, #6E757C);
}

/* Ce qui avertit prend la couleur d'action — la seule du site qui
   appelle l'œil sans crier. Pas de rouge : l'avis est une condition de
   vente, pas une erreur. */
.mc-encart--alerte .mc-kicker {
	color: var(--mc-action, #D87A00);
}

.mc-encart--alerte .mc-kicker::before {
	background: var(--mc-action, #D87A00);
}

/* ==================================================================
   LA VITRINE DES EXPERTISES — 14/10
   ==================================================================
   Cinq familles, cinq photos, le nom dans l'image. Validée sur
   maquette après quatre autres pistes ; ce qui suit est le rendu
   retenu, à la virgule près.

   LE NOIR ET BLANC N'EST PAS UN GOÛT. Trois des cinq images de famille
   sont des packshots sur fond noir, deux des photos claires. En
   couleur, la rangée se lit comme deux tuiles noires à côté d'une
   tuile blanche. Le filtre les met au même niveau sans qu'un seul
   fichier soit retouché, et la couleur revient au survol : on ne perd
   rien, on range.

   LE DÉGRADÉ EST FONCTIONNEL. Sans lui, le nom blanc disparaît sur la
   photo claire des alliages — c'est ce qui avait fait sortir le titre
   de l'image dans une version précédente. Six paliers plutôt que deux :
   un voile court se voit comme une bande posée, un dégradé long se lit
   comme de l'ombre. IDENTIQUE sur les cinq cartes, y compris la claire :
   une exception sur une seule se remarquait davantage que le défaut
   qu'elle corrigeait.

   Le 3/4 vient du calcul, pas du goût : cinq cartes dans 1 440 px de
   largeur de lecture font 273 px chacune, et c'est la proportion qui
   laisse au nom deux lignes sans écraser la photo. */

.mc-vitrine {
	display: grid;
	gap: 18px;
}

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

/* La vitrine posée dans le bloc « Une expertise globale » prend la
   largeur des deux colonnes, sous le discours et les certifications.
   C'est le PARENT qui le dit : le shortcode n'a pas à savoir où il est
   posé, et la même vitrine sert ailleurs sans traîner cette règle. */
.mc-expertise--familles > .mc-vitrine {
	grid-column: 1 / -1;
}

.mc-vitrine__carte {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	/* LE MÊME RAYON QUE LES AUTRES CARTES DU SITE — 14/10.
	   J'avais posé 4 px, repris de la maquette. C'est une valeur en
	   l'air : toutes les cartes du site tiennent leur rayon du jeton
	   --mc-rayon-carte, et une carte qui s'en écarte se voit dès qu'on
	   la met à côté d'une autre. */
	border-radius: var(--mc-rayon-carte, 12px);
	background: #16150F;
	text-decoration: none;
}

.mc-vitrine__carte img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06);
	transition: filter 0.35s ease, transform 0.5s ease;
}

.mc-vitrine__carte:hover img,
.mc-vitrine__carte:focus-visible img {
	filter: none;
	transform: scale(1.04);
}

.mc-vitrine__carte::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(12, 11, 9, 0.94) 0%,
		rgba(12, 11, 9, 0.74) 16%,
		rgba(12, 11, 9, 0.46) 34%,
		rgba(12, 11, 9, 0.2) 54%,
		rgba(12, 11, 9, 0.06) 72%,
		rgba(12, 11, 9, 0) 88%);
}

.mc-vitrine__nom {
	position: absolute;
	z-index: 1;
	left: 20px;
	/* La place de la flèche, à droite, est réservée : sans ça un nom de
	   deux lignes passerait dessous. */
	right: 54px;
	bottom: 20px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: #FFFFFF;
}

/* LA FLÈCHE, EN BLANC SUR LA PHOTO — 14/10.
   Le composant la peint en gris clair, ce qui convient sur une carte
   blanche et disparaît sur une photo sombre. Ici elle est blanche au
   repos et dorée au survol, où elle avance comme sur les autres cartes
   du site. La règle de survol est écrite pour la vitrine : celle du
   composant ne vise que .mc-carte-v et .mc-carte-h. */
.mc-vitrine__carte .mc-fleche {
	right: 20px;
	bottom: 22px;
	z-index: 1;
	background: #FFFFFF;
}

.mc-vitrine__carte:hover .mc-fleche,
.mc-vitrine__carte:focus-visible .mc-fleche {
	transform: translateX(5px);
	background: var(--mc-or, #D5AE05);
}

/* Cinq cartes de 273 px tiennent à 1 440. Sous 1 100, elles passeraient
   sous 200 px et le nom tomberait à quatre lignes : on repasse à trois
   colonnes, puis deux, puis une. La carte garde sa proportion à chaque
   palier — c'est la largeur qui change, jamais la forme. */
@media (max-width: 1100px) {

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

@media (max-width: 780px) {

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

	.mc-vitrine__nom {
		font-size: 0.9375rem;
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
}

@media (max-width: 480px) {

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

	/* Une seule colonne : la carte ferait 390 × 520 px en 3/4, soit
	   presque un écran pour une famille. On l'aplatit. */
	.mc-vitrine__carte {
		aspect-ratio: 16 / 9;
	}
}

/* Le mouvement au survol est un confort, pas une information : qui
   demande moins d'animation le reçoit sans rien perdre du contenu. */
@media (prefers-reduced-motion: reduce) {

	.mc-vitrine__carte img {
		transition: none;
	}

	.mc-vitrine__carte:hover img,
	.mc-vitrine__carte:focus-visible img {
		transform: none;
	}
}

/* L'AVERTISSEMENT NE DOIT JAMAIS DÉFORMER CE QU'IL COMMENTE — 14/10.
   ------------------------------------------------------------------
   Relevé en ligne, et c'est un défaut de ma part : le message
   « ces familles n'ont pas d'image », rendu pour les seuls rédacteurs,
   était auto-placé dans la grille du bloc « Une expertise globale ».
   Sa phrase longue donne une largeur maximale de contenu énorme ; la
   colonne « auto » des certifications s'est dimensionnée dessus et a
   pris 1 384 px sur 1 440. La colonne de texte est tombée à ZÉRO, et
   le discours est sorti à un mot par ligne.

   Un élément réservé à l'administration qui change la mise en page est
   toujours une faute : le rédacteur voit une page cassée que le
   visiteur, lui, voyait intacte. Le message prend donc toute la
   largeur partout où il paraît.

   La règle est ici et non dans accueil.css, où vit l'habillage du
   message : accueil.css n'est chargée que par les sections d'accueil,
   et [mc_vitrine] se pose où l'on veut. La propriété est sans effet
   hors d'une grille — elle ne coûte rien là où elle ne sert pas. */
.mc-avertissement {
	grid-column: 1 / -1;
}

/* ==================================================================
   LE COURS DES MÉTAUX, EN DIRECT — 14/10
   ==================================================================
   Le graphique vit dans un cadre servi par /coursmetauxfr/index-dmw.php,
   hérité de l'ancien site. Il n'est pas à refaire : il est à remettre,
   et à habiller.

   LA HAUTEUR EST MESURÉE, PAS RECOPIÉE. L'ancien site écrivait
   height="260". Mesuré sur la preprod, le document rendu par le script
   fait 311 px de haut, à 1 200 comme à 412 px de large : les 260 px
   d'origine en coupaient une cinquantaine, soit la ligne de dates sous
   la courbe. On prend 320 px, et le graphique tient entier à toutes
   les largeurs.

   LE CADRE EST FLUIDE. Le script dessine en SVG et suit la largeur
   qu'on lui donne — vérifié à 412 px, où rien ne déborde. Il n'y a donc
   ni largeur fixe à poser, ni défilement horizontal à prévoir.

   LE FOND SOMBRE VIENT DU SCRIPT, pas de nous : la courbe est tracée en
   doré sur gris foncé. Le panneau reprend ce gris pour que le cadre ne
   se détache pas en rectangle au milieu d'une section claire. */

.mc-cours {
	padding: 26px;
	border-radius: var(--mc-rayon-carte, 12px);
	background: #2B2924;
	color: #FFFFFF;
}

.mc-cours__intro {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #FFFFFF;
}

/* LE CADRE EST TRANSPARENT — 15/10.
   Il portait un gris #333333, posé comme fond d'attente pendant le
   chargement du document distant. Vérifié en direct : ce document est
   lui-même TRANSPARENT — ni son body ni son html ne peignent quoi que
   ce soit. Le gris n'était donc pas un fond d'attente mais le fond
   visible en permanence, et il dessinait un rectangle plus clair au
   milieu du panneau, qui se voyait d'autant plus depuis que le hero est
   passé sur bande sombre. Le cadre laisse maintenant voir le panneau. */
.mc-cours__cadre {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	background: transparent;
}

.mc-cours__note {
	margin: 14px 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #B9B4A6;
}

.mc-cours__note a {
	color: var(--mc-or, #D5AE05);
}

@media (max-width: 600px) {

	.mc-cours {
		padding: 18px;
	}
}

/* ==================================================================
   LES FAMILLES ET LA MOSAÏQUE DES ARCHIVES DE TERMES — 14/10
   ==================================================================
   Relevé sur /alliages/ : 77 cartes verticales pour 9 photos
   distinctes, soit une colonne de vignettes qui se répètent sur des
   milliers de pixels. Les familles rendent la photo une fois, en tête
   de ses compositions, qui tiennent en puces.

   LA PUCE PLUTÔT QUE LA CARTE : le nom d'une composition — Sn63Pb37 —
   est une suite de symboles et de nombres. Il se lit d'un coup d'œil,
   il n'a besoin ni d'image ni de phrase, et trente et un tiennent dans
   la hauteur de deux cartes. */

.mc-familles {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mc-famille {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	align-items: start;
	padding: 14px;
	border: 1px solid var(--mc-filet, #E8E8E8);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

.mc-famille__media { display: block; }

.mc-famille__visuel {
	display: block;
	aspect-ratio: 3 / 2;
	max-width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background: #F2F1ED;
}

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

.mc-famille__media:hover .mc-famille__visuel img { transform: scale(1.04); }

.mc-famille__corps {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-famille__titre {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--mc-filet, #E8E8E8);
}

/* Le compte se lit comme une indication, pas comme une partie du
   titre : même ligne, poids et taille en retrait. */
.mc-famille__nb {
	font-weight: 500;
	font-size: 13px;
	color: #6E6E6E;
	white-space: nowrap;
}

.mc-famille__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mc-puce-terme {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 7px;
	border: 1px solid transparent;
	background: #F4F3EF;
	color: #2B2B2B;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease;
}

.mc-puce-terme:hover,
.mc-puce-terme:focus-visible {
	background: #FFFFFF;
	border-color: var(--mc-or, #D5AE05);
	color: #2B2B2B;
}

@media (max-width: 760px) {

	.mc-famille {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.mc-famille__visuel { aspect-ratio: 16 / 7; }
}

/* ---- la mosaïque ---- */

.mc-mosaique {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.mc-tuile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mc-filet, #E8E8E8);
	border-radius: var(--mc-rayon-carte, 12px);
	overflow: hidden;
	background: #FFFFFF;
	text-decoration: none;
	color: #2B2B2B;
	transition: border-color .15s ease, transform .2s ease;
}

.mc-tuile:hover,
.mc-tuile:focus-visible {
	border-color: var(--mc-or, #D5AE05);
	transform: translateY(-2px);
}

.mc-tuile__visuel {
	display: block;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	overflow: hidden;
	background: #F2F1ED;
}

.mc-tuile__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-tuile__nom {
	padding: 10px 12px 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* ==================================================================
   LA PAGE DES ENGAGEMENTS RSE — 14/10
   ==================================================================
   Les quatre pages RSE n'en font plus qu'une. Relevé avant la refonte :
   4 753 caractères répartis sur quatre pages, dont une qui ne faisait
   qu'annoncer les trois autres. Ce n'était pas de la matière pour
   quatre pages, et découper davantage n'y aurait rien changé.

   LE PARTI PRIS EST TYPOGRAPHIQUE, PAS COMPOSANT. Ce qui structure la
   page, ce sont des filets, des blancs et des niveaux de titre — pas
   des cartes. Les encadrés arrondis à pastille de la première maquette
   ont été écartés le jour même : « ça fait trop app ». Un fait notable
   se pose donc sur un filet, avec sa mention en capitales, et ferme sa
   section au lieu de l'interrompre. */

.mc-rse-ancres {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0;
}

.mc-rse-ancres a {
	font-size: 13.5px;
	font-weight: 500;
	color: #6E6E68;
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
}

.mc-rse-ancres a:hover,
.mc-rse-ancres a:focus-visible {
	color: var(--mc-gris, #4D4D4D);
	border-bottom-color: var(--mc-or, #D5AE05);
}

.mc-rse-sur {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
	margin: 0 0 6px;
}

/* Les repères : cinq colonnes, un seul filet, des chiffres en graisse
   fine. Une grille bordée aurait fait tableau de bord. */
.mc-rse-reperes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	gap: 26px 30px;
	border-top: 1px solid var(--mc-filet, #E8E5DE);
	padding-top: 26px;
}

.mc-rse-repere {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mc-rse-repere b {
	font-size: 26px;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.mc-rse-repere span {
	font-size: 12.5px;
	line-height: 1.4;
	color: #6E6E68;
}

.mc-rse-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mc-rse-liste li {
	position: relative;
	padding-left: 20px;
	line-height: 1.5;
}

.mc-rse-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mc-or, #D5AE05);
}

.mc-rse-fait {
	border-top: 1px solid var(--mc-filet, #E8E5DE);
	padding-top: 14px;
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mc-rse-fait__mention {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
}

.mc-rse-fait b {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
}

/* Sur une bande sombre, le filet et le texte secondaire se relisent
   sur le blanc du voile, pas sur le gris du corps de page. */
.mc-sec-sombre .mc-rse-fait,
[class*="mc-sec-photo--"] .mc-rse-fait {
	border-top-color: rgba(255, 255, 255, 0.28);
}

.mc-rse-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

/* LES TROIS CORRECTIONS DU PREMIER RENDU — 14/10, dans la foulée.

   LA PUCE SUR LA PREMIÈRE LETTRE. Divi pose son propre rembourrage sur
   toutes les listes du site, avec une spécificité que « .mc-rse-liste li »
   ne bat pas : le retrait n'était pas appliqué, et la pastille dorée se
   posait sur la première lettre. On passe donc par #main-content, comme
   la section 24 de socle.css le fait déjà pour la même raison.

   L'IMAGE NE REMPLISSAIT PAS SA COLONNE. Le module image de Divi sert
   le fichier à sa taille naturelle ; sur une demi-colonne de 500 px, une
   photo de 400 laissait un vide à droite. */

#main-content ul.mc-rse-liste {
	margin: 4px 0 0;
	padding-left: 0;
	list-style: none;
}

#main-content ul.mc-rse-liste li {
	padding-left: 20px;
	margin: 0;
	line-height: 1.5;
}

#main-content .mc-rse-pilier img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--mc-rayon-carte, 12px);
}

/* ==================================================================
   LA BULLE D'AIDE — 15/10
   ==================================================================
   Un « ! » discret, et une phrase qui ne paraît qu'au survol, au clic
   ou au doigt. Posée ici plutôt que dans la feuille du panier : ce
   n'est pas un objet du panier, c'est un objet du site, et le premier
   formulaire venu en aura besoin.

   PAS DE JAVASCRIPT. Le bouton prend le focus au clic comme au
   toucher : :hover et :focus-within couvrent les trois gestes. */

.mc-aide {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.mc-aide__bouton {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: #8A8A8A;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}

.mc-aide__bouton:hover,
.mc-aide__bouton:focus-visible {
	color: var(--mc-or, #D5AE05);
}

.mc-aide__bulle {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: max-content;
	max-width: 230px;
	padding: 9px 12px;
	border-radius: 8px;
	background: #2B2B2B;
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	/* CE QUE LA BULLE DOIT NEUTRALISER DE SON HÔTE.
	   Elle vit dans un en-tête de tableau, qui impose ses majuscules, son
	   interlettrage — et son white-space:nowrap. Les deux premiers étaient
	   déjà annulés ici ; le troisième manquait, et il ne se voyait pas tant
	   que le texte tenait sur une ligne. Dès qu'il s'allonge (texte modifié
	   le 16/10), nowrap interdit le retour à la ligne : la boîte reste
	   plafonnée à max-width et la phrase déborde du fond sombre. */
	white-space: normal;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}

/* La pointe. Un carré tourné : un triangle en bordures ne suit pas le
   rayon du cadre quand la bulle change de taille. */
.mc-aide__bulle::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -4.5px;
	background: #2B2B2B;
	transform: rotate(45deg);
}

.mc-aide:hover .mc-aide__bulle,
.mc-aide:focus-within .mc-aide__bulle {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {

	.mc-aide__bulle {
		transition: none;
	}
}

/* Près du bord gauche de l'écran, une bulle centrée déborderait. */
@media (max-width: 600px) {

	.mc-aide__bulle {
		max-width: 190px;
	}
}

/* ==================================================================
   LA RECHERCHE INSTANTANÉE DES LISTINGS — 15/10
   ==================================================================
   Un champ, posé au-dessus de la grille. Pas de bouton : il n'y a rien
   à envoyer, le filtrage se fait à la frappe. Pas de bouton veut dire
   aussi pas de promesse non tenue — un bouton « Rechercher » laisse
   croire qu'il reste un geste à faire alors que c'est déjà filtré. */

.mc-recherche-termes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 22px;
}

.mc-recherche-termes__label {
	display: block;
	max-width: 420px;
}

.mc-recherche-termes__champ {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--mc-filet, #E8E5DE);
	border-radius: 100px;
	background: #FFFFFF;
	font-size: 14.5px;
	font-family: inherit;
	color: inherit;
}

.mc-recherche-termes__champ:focus {
	outline: none;
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 0 0 3px rgba(213, 174, 5, 0.16);
}

.mc-recherche-termes__champ::placeholder {
	color: #9A9A95;
}

/* Vide, la ligne d'état ne réserve aucune hauteur : la grille ne
   sauterait pas d'un cran à la première frappe. */
.mc-recherche-termes__etat {
	margin: 0;
	font-size: 13px;
	color: #6E6E68;
	min-height: 0;
}

.mc-recherche-termes__etat:empty {
	display: none;
}

/* Dans un en-tête de tableau, le « ! » se pose à côté du mot et la
   bulle descend : un en-tête collant est en haut de l'écran, une bulle
   au-dessus de lui sortirait du cadre. */
.mc-reftable__qte .mc-aide {
	margin-left: 6px;
	vertical-align: middle;
}

.mc-reftable__qte .mc-aide__bulle {
	bottom: auto;
	top: calc(100% + 9px);
}

.mc-reftable__qte .mc-aide__bulle::after {
	top: auto;
	bottom: 100%;
	margin: 0 0 -5px -4.5px;
}

/* L'EMPILEMENT DE CETTE BULLE SE RÈGLE DANS references-table.css — 16/10.
   Il y avait ici « .mc-reftable__qte { position: relative; z-index: 12 } ».
   Cette classe est portée par la cellule d'EN-TÊTE *et* par les cellules
   du CORPS : la règle élevait donc les lignes à 12, pendant que l'en-tête
   restait plaqué à 3 par « .mc-reftable__table thead th », plus
   spécifique. La bulle, enfermée dans le contexte d'empilement de
   l'en-tête, ne pouvait pas dépasser 3 — elle passait sous le champ
   quantité de la première ligne. Exactement le défaut qu'elle prétendait
   corriger, déplacé d'un cran.
   La règle juste vit désormais à côté de l'en-tête collant qu'elle doit
   battre, dans references-table.css : un seul endroit décide de qui
   passe devant qui dans ce tableau. */
.mc-reftable__qte .mc-aide__bulle {
	z-index: 30;
}