/* Sections de l'accueil — Metaconcept Core.
   Tous les jetons viennent du socle : aucune couleur écrite en dur. */

/* ------------------------------------------------------------------
   1. La bande de chiffres clés
   ------------------------------------------------------------------

   Les chiffres sont séparés par un filet vertical, pas par des cadres :
   c'est une bande, pas quatre cartes. Le premier n'a pas de filet à sa
   gauche — sans quoi la bande commence par un trait dans le vide. */

.mc-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	text-align: center;
}

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

.mc-chiffre:first-child {
	border-left: 0;
}

.mc-chiffre__valeur {
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1;
	margin-bottom: 8px;
	color: var(--mc-or, #D5AE05);
}

.mc-chiffre__libelle {
	font-size: 0.78125rem;
	font-weight: 500;
	color: var(--mc-gris, #6E757C);
}

/* Sur fond sombre — la bande du recyclage. */
.mc-sec-sombre .mc-chiffre {
	border-left-color: rgba(255, 255, 255, 0.12);
}

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

/* ------------------------------------------------------------------
   2. Les cartes de secteur et de gamme
   ------------------------------------------------------------------

   Elles héritent de .mc-carte, posée dans le socle : ici, seulement ce
   qui leur est propre. Une carte est un lien entier — toute sa surface
   est cliquable, pas seulement le titre. */

.mc-carte--secteur,
.mc-carte--gamme {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* UNE PROPORTION, PAS UNE HAUTEUR — 08/10.
 *
 * Même correction que sur .mc-carte-v, et pour la même raison : les
 * 168 px fixes donnaient du 2,17:1 sur une carte de 365 px de large,
 * et le défaut empirait avec la largeur puisque la hauteur ne suivait
 * pas. La carte de gamme est un TROISIÈME composant — ni .mc-carte-v,
 * ni .mc-carte-h — c'est pourquoi elle n'avait pas été prise par la
 * correction précédente : elle est signalée le 08/10 sur /produits/,
 * ses 59 vignettes de catalogue.
 *
 * 16/9 comme les cartes de rubrique, pour que les deux familles se
 * recadrent pareil quand elles se croisent sur une même page.
 * Mesuré : 365 × 205 au lieu de 365 × 168, carte 406 au lieu de 369. */
.mc-carte--gamme img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mc-carte--secteur .mc-carte__corps,
.mc-carte--gamme .mc-carte__corps {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* La carte prend la hauteur de la plus haute de sa rangée : le lien
	   de bas de carte doit rester aligné d'une carte à l'autre. */
	flex: 1 1 auto;
	padding: 18px;
}

/* TROIS LIGNES AU PLUS POUR L'ACCROCHE — 15/10.

   Même bornage que sur .mc-carte-v__texte, et pour la même raison :
   relevé sur /produits/, les accroches tiennent en trois lignes pour
   dix-sept cartes et en quatre pour sept d'entre elles. Dans une
   grille, la plus longue d'une rangée impose sa hauteur à toutes les
   autres — ces quatre lignes-là coûtaient 20 px à leurs voisines.

   La phrase entière reste dans le document : c'est l'affichage qui
   s'arrête, pas le contenu. Un robot et un lecteur d'écran la lisent
   toujours en entier. Le titre, lui, n'est PAS borné — un nom de
   gamme coupé en plein mot serait un défaut plus grave que les 39 px
   d'écart qu'il peut provoquer d'une rangée à l'autre. */
.mc-carte--gamme .mc-carte__corps p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mc-carte__compte {
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mc-gris-clair, #9BA1A6);
}

.mc-carte__lien {
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.78125rem;
	font-weight: 700;
	color: var(--mc-action, #D87A00);
}

/* La flèche est décorative : elle est dessinée, pas écrite, pour ne pas
   être lue à voix haute par un lecteur d'écran. */
.mc-carte__lien::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 8px;
	margin-left: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.25s ease;
}

.mc-carte:hover .mc-carte__lien::after {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------
   3. L'avertissement d'administration
   ------------------------------------------------------------------
   Visible des seuls administrateurs : il signale un réglage manquant,
   il ne s'adresse pas au visiteur. */

.mc-avertissement {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--mc-action, #D87A00);
	border-radius: 10px;
	font-size: 0.875rem;
	color: var(--mc-encre, #4D4D4D);
	background: #FFF9F2;
}

/* ------------------------------------------------------------------
   4. Le parcours en étapes — section recyclage
   ------------------------------------------------------------------

   Quatre moments d'un même circuit : rachat, collecte, valorisation,
   revente. Ce n'est pas une grille de cartes mais une PROGRESSION, et la
   mise en page doit le dire — d'où le numéro d'étape en tête et la
   flèche qui relie une carte à la suivante.

   La flèche est dessinée en CSS, sur la carte, et disparaît sur la
   dernière : écrite dans le contenu, elle serait lue à voix haute par un
   lecteur d'écran et resterait à l'écran quand les cartes passent les
   unes sous les autres sur mobile. */

.mc-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	margin: 0 0 28px;
}

.mc-etape {
	position: relative;
	padding: 20px 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--mc-rayon-carte, 12px);
	background: rgba(255, 255, 255, 0.04);
}

.mc-sec-clair .mc-etape,
.mc-sec-blanc .mc-etape {
	border-color: var(--mc-bord, #ECECEC);
	background: #FFFFFF;
}

.mc-etape__rang {
	display: block;
	margin-bottom: 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mc-or, #D5AE05);
}

.mc-etape__titre {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mc-etape__texte {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* La flèche de liaison : seulement entre deux cartes de la même rangée,
   donc jamais après la dernière, et jamais quand la grille se replie. */
@media (min-width: 860px) {
	.mc-etape:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -14px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--mc-or, #D5AE05);
		border-right: 2px solid var(--mc-or, #D5AE05);
		transform: translateY(-50%) rotate(45deg);
	}
}

/* ------------------------------------------------------------------
   5. Le repère de lieu
   ------------------------------------------------------------------
   Une pastille discrète — « Brindas, 3 800 m² » — qui ancre l'équipe
   dans un endroit réel. Le point n'est pas un emoji : dessiné en CSS, il
   n'est pas lu à voix haute et ne dépend pas de la police système. */

.mc-reperelieu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--mc-fond-doux, #FAFAFA);
	font-size: 0.8125rem;
	font-weight: 600;
}

.mc-reperelieu::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mc-action, #D87A00);
	flex: 0 0 auto;
}

.mc-sec-sombre .mc-reperelieu {
	background: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------
   6. La carte d'axe du catalogue
   ------------------------------------------------------------------
   Métaux, Formes, Applications : trois entrées vers le même catalogue.
   Elles héritent de .mc-carte ; seul le corps leur est propre. */

.mc-axe {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	color: inherit;
	text-decoration: none;
}

.mc-axe__titre {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mc-axe__texte {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--mc-gris, #6E757C);
}

/* ==================================================================
   7. LA CARTE HORIZONTALE — secteurs et axes du catalogue
   ==================================================================

   C'est la carte de la maquette : 180 px de haut, le visuel à gauche, le
   titre et une phrase courte à droite, la flèche en bas à droite. Les
   secteurs et les trois axes du catalogue l'emploient tous les deux —
   une seule définition, donc aucune chance qu'ils divergent.

   POURQUOI UNE HAUTEUR FIXE. Quatre cartes côte à côte dont une plus
   haute que les autres cassent la ligne. La hauteur est donc posée, et
   c'est au texte de tenir dedans : d'où la phrase courte et non la
   description de référencement.

   QUAND IL N'Y A PAS D'IMAGE, le bloc de gauche garde sa place et reçoit
   un dégradé sourd. Une carte sans visuel ne doit pas changer de forme.
*/

/* ==================================================================
   8. CORRECTIONS RELEVÉES SUR LES CAPTURES DE LA MAQUETTE — 01/10
   ================================================================== */

/* ------------------------------------------------------------------
   8.1 Le bord arrondi du visuel
   ------------------------------------------------------------------
   Dans la maquette, le visuel d'une carte horizontale n'est pas un
   rectangle : son côté droit décrit une large courbe, qui donne à la
   carte sa signature. Le rayon est exprimé en pourcentage sur deux axes
   pour que la courbe suive la hauteur de la carte et reste la même
   quelle que soit sa largeur. */

/* ------------------------------------------------------------------
   8.2 Les chiffres sont tous de la même taille
   ------------------------------------------------------------------
   « Économie circulaire » s'écrivait plus petit que « +2 000 » : deux
   tailles dans une même bande, et la bande perd son unité. La taille est
   donc posée une fois pour toutes, et c'est au texte long de se mettre
   sur deux lignes. */

.mc-chiffre__valeur {
	font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* ------------------------------------------------------------------
   8.3 L'étape de recyclage porte son image
   ------------------------------------------------------------------ */

.mc-etape {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mc-etape__visuel {
	display: block;
	width: 100%;
	height: 118px;
	overflow: hidden;
	background: linear-gradient(140deg, #4D4238 0%, #6E6153 60%, #8A7B66 100%);
}

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

.mc-etape__corps {
	padding: 18px 18px 22px;
}

/* La flèche de liaison se cale sur le corps, pas sur l'image. */
@media (min-width: 860px) {
	.mc-etape:not(:last-child)::after {
		top: auto;
		bottom: 34px;
		transform: rotate(45deg);
	}
}

/* ------------------------------------------------------------------
   8.4 L'équipe défile
   ------------------------------------------------------------------

   AUCUN JAVASCRIPT. overflow-x et scroll-snap suffisent : le défilement
   marche au doigt, à la molette, au clavier, et survit à un script qui
   ne charge pas. Un carrousel maison coûterait trois cents lignes et
   casserait la navigation au clavier.

   LE DÉBORD EST VOULU : la dernière carte visible est coupée, ce qui
   signale qu'il y a une suite. Une rangée qui s'arrête pile au bord
   donne l'impression qu'on a tout vu. */

/* ------------------------------------------------------------------
   LE RUBAN D'ÉQUIPE DÉFILE SEUL, SANS FIN
   ------------------------------------------------------------------

   L'ENVELOPPE masque ce qui dépasse et estompe les deux bords : sans ce
   fondu, les visages apparaissent et disparaissent d'un coup contre une
   arête nette, et le mouvement paraît saccadé alors qu'il est régulier.

   LA PISTE avance de 0 à -50 % de sa largeur. La liste étant écrite deux
   fois (voir le PHP), -50 % tombe exactement sur l'image de départ : la
   boucle est invisible. 34 secondes pour un tour — assez lent pour qu'on
   puisse lire un nom au passage, assez vif pour qu'on voie que ça bouge.

   AU SURVOL, TOUT S'ARRÊTE. Un ruban qui continue de fuir pendant qu'on
   essaie de lire une fiche est une mauvaise manière.

   SANS ANIMATION, LE RUBAN RESTE UTILISABLE : il redevient une bande
   qu'on fait défiler au doigt ou à la molette. Rien n'est perdu, le
   mouvement seulement. */

.mc-equipe-ruban {
	width: 100%;
	overflow: hidden;
	/* DE L'AIR AU-DESSUS ET EN DESSOUS — 14/10.
	   Le ruban doit rogner sur les CÔTÉS : c'est ce qui fait entrer et
	   sortir les visages. Mais overflow rogne les quatre bords, et la
	   boîte faisait exactement la hauteur des portraits. Au survol, le
	   rond grandit de 8 % et prend une ombre dorée — soit une quinzaine
	   de pixels au-dessus de lui — et tout cela était coupé net par le
	   haut : le rond apparaissait tranché par une ligne.
	   On ne peut pas libérer un seul axe : en CSS, un overflow caché sur
	   un axe force l'autre à « auto », ce qui aurait ajouté une barre de
	   défilement verticale. On écarte donc les bords haut et bas de
	   20 px, et la marge négative les reprend pour que la section garde
	   sa hauteur au pixel près. Le masque de fondu, lui, est horizontal :
	   il n'est pas concerné. */
	padding-block: 20px;
	margin-block: -20px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* DEUX CLASSES, PAS UNE : .mc-equipe-ruban .mc-equipe--defile pèse (0,2,0)
   là où .mc-equipe d'equipe.css pèse (0,1,0). À spécificité égale, c'est
   l'ordre d'impression des feuilles qui tranchait — equipe.css passant
   après accueil.css, la grille à trois colonnes reprenait le dessus et le
   ruban retombait en grille : la liste écrite deux fois pour le défilement
   infini s'affichait alors deux fois à l'écran, relevé le 01/10 sur
   l'accueil. Une règle de mise en page ne doit pas dépendre d'un ordre de
   chargement. */
.mc-equipe-ruban .mc-equipe--defile {
	display: flex;
	grid-template-columns: none;
	width: max-content;
	gap: 34px;
	margin: 0;
	padding: 0;
	animation: mc-equipe-defile 34s linear infinite;
}

.mc-equipe-ruban:hover .mc-equipe--defile,
.mc-equipe-ruban:focus-within .mc-equipe--defile {
	animation-play-state: paused;
}

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

.mc-equipe-ruban .mc-equipe--defile .mc-equipe__personne {
	flex: 0 0 148px;
	width: 148px;
}

.mc-equipe-ruban .mc-equipe--defile .mc-equipe__photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mc-equipe-ruban .mc-equipe--defile .mc-equipe__personne:hover .mc-equipe__photo {
	transform: scale(1.08);
	border-color: var(--mc-or, #D5AE05);
	box-shadow: 0 10px 22px rgba(213, 174, 5, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.mc-equipe-ruban .mc-equipe--defile {
		animation: none;
		width: auto;
		overflow-x: auto;
	}
}

.mc-equipe__phrase {
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--mc-gris, #6E757C);
	text-align: center;
}

/* ------------------------------------------------------------------
   8.5 La bannière de lieu
   ------------------------------------------------------------------ */

.mc-banniere {
	display: block;
	width: 100%;
	height: 320px;
	margin: 0 0 14px;
	border-radius: var(--mc-rayon-carte, 12px);
	overflow: hidden;
	background: linear-gradient(140deg, #4D4238 0%, #6E6153 55%, #8A7B66 100%);
}

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

/* ------------------------------------------------------------------
   LA TUILE « VOIR TOUS LES SECTEURS » — 08/10
   ------------------------------------------------------------------

   Elle occupe une cellule de la grille des secteurs, mais elle n'est
   pas une carte : elle ne montre ni image ni description, elle ouvre
   une porte. D'où le filet POINTILLÉ — la convention qui dit « ici,
   il n'y a pas de contenu, il y a une action » — et le centrage, qui
   la distingue au premier coup d'œil des cartes alignées à gauche.

   Pas de fond : sur une grille de cartes blanches, un aplat de plus
   ferait une neuvième carte au lieu d'une sortie. ================= */

.mc-carte-h--tous {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	border: 1px dashed var(--mc-gris-clair, #9BA1A6);
	border-radius: var(--mc-rayon-carte, 12px);
	background: transparent;
	text-decoration: none;
	transition: border-color 0.24s ease, background-color 0.24s ease;
}

.mc-carte-h--tous:hover {
	border-color: var(--mc-action, #D87A00);
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-carte-h--tous .mc-carte-h__corps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
}

/* La flèche : un rond clair, et le chevron dessiné en bordures. */
.mc-carte-h--tous__fleche {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-carte-h--tous__fleche::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--mc-encre, #4D4D4D);
	border-right: 2px solid var(--mc-encre, #4D4D4D);
	transform: translateX(-2px) rotate(45deg);
}

.mc-carte-h--tous:hover .mc-carte-h--tous__fleche {
	background: #FFFFFF;
}

.mc-carte-h--tous:hover .mc-carte-h--tous__fleche::before {
	border-color: var(--mc-action, #D87A00);
}

.mc-carte-h--tous__libelle {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--mc-encre, #4D4D4D);
}

/* ------------------------------------------------------------------
   1 bis. LES CHIFFRES EN ENCADRÉ — piste 1 du 08/10
   ------------------------------------------------------------------

   La bande de chiffres telle qu'elle existe est faite pour traverser
   la page : une rangée, des filets verticaux, tout centré. Posée dans
   la colonne droite du bloc « Une expertise globale », elle doit
   changer de forme sans changer de contenu — deux colonnes, un cadre,
   et un alignement à gauche qui répond au texte d'en face.

   LE MODIFICATEUR S'ACCEPTE SUR LA LISTE OU SUR SON PARENT. Dans Divi,
   une classe s'ajoute au MODULE, pas à la balise que le module rend :
   la règle vise donc les deux cas, sans quoi il faudrait éditer le PHP
   pour poser une classe que le constructeur sait déjà poser.

   LE DERNIER CHIFFRE PREND TOUTE LA LARGEUR quand il est seul sur sa
   rangée : « Économie circulaire » est une mention, pas une mesure, et
   elle se lit mal serrée dans une demi-colonne. */

.mc-chiffres--encadre .mc-chiffres,
.mc-chiffres.mc-chiffres--encadre {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: var(--mc-bord, #ECECEC);
	overflow: hidden;
	text-align: left;
}

.mc-chiffres--encadre .mc-chiffre,
.mc-chiffres.mc-chiffres--encadre .mc-chiffre {
	padding: 20px 22px;
	border-left: 0;
	background: #FFFFFF;
}

.mc-chiffres--encadre .mc-chiffre:nth-child(odd):last-child,
.mc-chiffres.mc-chiffres--encadre .mc-chiffre:nth-child(odd):last-child {
	grid-column: 1 / -1;
}

.mc-chiffres--encadre .mc-chiffre__valeur,
.mc-chiffres.mc-chiffres--encadre .mc-chiffre__valeur {
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
	margin-bottom: 4px;
}

@media (max-width: 600px) {

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