/* Le catalogue des gammes — colonne de filtres et grille.
   Metaconcept Core. Charte : OR #D5AE05, ORANGE d'action #D87A00,
   GRIS #4D4D4D. Aucun sélecteur Divi n'est ciblé. */

.mc-catalogue {
	--mc-or: var(--c-link, #D5AE05);
	--mc-encre: var(--c-base, #4D4D4D);
	--mc-gris: #6E757C;
	--mc-bord: #ECECEC;
	display: grid;
	/* La colonne de filtres ne grandit pas avec l'écran : au-delà de
	   280 px, les libellés tiennent déjà sur une ligne et la place
	   supplémentaire ne sert qu'à éloigner les cases des cartes. */
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

/* PAS DE COLONNE, PAS DE PLACE RÉSERVÉE — relevé le 08/10 au soir.
 *
 * Sur l'archive « Métaux d'apport », le catalogue ne rendait AUCUNE
 * colonne de filtres : les treize gammes de cette famille ne portent
 * aucune application, et un groupe sans option ne s'affiche pas. La
 * grille, elle, réservait toujours ses 260 px : la grille de cartes est
 * donc tombée dans la PREMIÈRE colonne, celle des filtres, et les
 * treize cartes se sont rangées sur trois colonnes de 72 px.
 *
 * Deux leçons. La première : une grille écrite en dur suppose que ses
 * deux cases sont toujours remplies — elle doit dire ce qu'elle fait
 * quand l'une manque. La seconde : la place se demande au contenu, pas
 * au compte. :has() interroge ce qui est RÉELLEMENT là, et la règle
 * n'a aucun nombre à tenir à jour. */
.mc-catalogue:not(:has(> .mc-filtres)) {
	grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------
   LA COLONNE HÉRITÉE, À CÔTÉ DU CATALOGUE
   ------------------------------------------------------------------

   Le gabarit de l'archive Produits garde à sa gauche l'ancien bloc de
   liens de familles, dans une colonne de 328 px. Depuis que le catalogue
   a sa propre colonne de filtres avec le groupe « Famille », la page
   affiche DEUX colonnes de navigation côte à côte, qui disent la même
   chose (relevé le 02/10).

   Le vrai geste est de supprimer cette colonne dans le corps du gabarit
   — Divi ne me laisse pas y toucher. En attendant, on la masque, et le
   catalogue reprend la largeur. Deux conséquences assumées : c'est
   réversible en décochant le socle, et toute colonne posée DÉLIBÉRÉMENT
   à côté du catalogue disparaîtrait aussi. Le jour où la colonne est
   retirée du gabarit, ces deux règles ne s'appliquent plus à rien et
   peuvent partir. */

#main-content .et_pb_row:has(.mc-catalogue) > .et_pb_column:not(:has(.mc-catalogue)) {
	display: none;
}

#main-content .et_pb_row:has(.mc-catalogue) > .et_pb_column:has(.mc-catalogue) {
	width: 100% !important;
	margin-right: 0 !important;
}

/* ------------------------------------------------------------------
   La colonne de filtres
   ------------------------------------------------------------------ */

.mc-filtres {
	position: sticky;
	/* Sous l'en-tête fixe, comme la barre d'ancres. */
	top: var(--mc-entete, 92px);
	max-height: calc(100vh - var(--mc-entete, 92px) - 24px);
	overflow-y: auto;
	padding: 20px;
	border: 1px solid var(--mc-bord);
	border-radius: 12px;
	background: #FFFFFF;
}

/* La tête de la colonne : « Filtres » et le bouton qui remet à zéro.
   Le bouton n'apparaît que s'il y a quelque chose à effacer — proposé
   en permanence, il laisse croire qu'un filtre est actif. */
.mc-filtres__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.mc-filtres__entete {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--mc-encre);
}

.mc-filtres__raz {
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-action, #D87A00);
	text-decoration: underline;
	cursor: pointer;
}

/* Les critères actifs, rappelés en haut de la colonne. */
.mc-filtres__actifs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mc-bord);
}

.mc-filtres__puce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--mc-action, #D87A00);
	border-radius: 100px;
	background: #FFF6EC;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mc-encre);
	cursor: pointer;
}

/* La croix est dessinée, pas écrite : écrite, elle serait lue à voix
   haute comme un caractère au milieu du libellé. */
.mc-filtres__puce::after {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l6 6M7 1l-6 6' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l6 6M7 1l-6 6' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center;
}

.mc-filtres__puce:hover {
	background: var(--mc-action, #D87A00);
	color: #FFFFFF;
}

.mc-filtres__aide {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--mc-bord);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--mc-gris);
}

.mc-filtres__aide a {
	font-weight: 600;
	color: var(--mc-action, #D87A00);
}

.mc-filtres__groupe + .mc-filtres__groupe {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--mc-bord);
}

.mc-filtres__titre {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-encre);
}

.mc-filtres__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le thème redessine ses puces en ::before sur les <li> : elles
   réapparaissaient entre les cases à cocher. On éteint les deux. */
.mc-filtres__liste > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.mc-filtres__option label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--mc-encre);
	cursor: pointer;
}

.mc-filtres__option input {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--mc-action, #D87A00);
}

.mc-filtres__nom {
	flex: 1 1 auto;
	min-width: 0;
}

/* Le compte est un fait, pas une étiquette cliquable : gris, discret,
   aligné à droite. Un chiffre qui saute aux yeux ferait croire à un
   bouton. */
.mc-filtres__compte {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--mc-gris);
}

/* « voir les 23 autres » — le repli des longs groupes, 15/10.

   DISCRET PAR DESTINATION. Ce bouton est une commande de confort au
   milieu d'une liste de critères : en orange plein, il pèserait plus
   lourd que les filtres eux-mêmes. Souligné et gris, il se lit comme
   un lien de liste, et prend la couleur d'action au survol — le même
   geste que « Réinitialiser » en tête de colonne. */
.mc-filtres__plus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-gris);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.mc-filtres__plus:hover {
	color: var(--mc-action, #D87A00);
}

/* Le chevron dit le sens du geste : vers le bas on déplie, vers le
   haut on referme. Dessiné en masque pour suivre la couleur du texte
   au survol, comme la croix des étiquettes. */
.mc-filtres__plus::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1 3l3.5 3.5L8 3' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1 3l3.5 3.5L8 3' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.2s ease;
}

.mc-filtres__plus[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

/* LA BARRE DE DÉFILEMENT DE LA COLONNE, QUAND ELLE SERT ENCORE.
   Le repli la rend rare, il ne la supprime pas : sur un écran bas,
   quatre groupes dépliés dépassent toujours. Affinée et sans flèches,
   elle cesse de ressembler à la barre d'une fenêtre dans la page —
   c'est ce qui faisait « pas très pro ». Firefox lit les deux
   propriétés standard, les navigateurs WebKit le sélecteur. */
.mc-filtres {
	scrollbar-width: thin;
	scrollbar-color: var(--mc-bord) transparent;
}

.mc-filtres::-webkit-scrollbar {
	width: 6px;
}

.mc-filtres::-webkit-scrollbar-track {
	background: transparent;
}

.mc-filtres::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: var(--mc-bord);
}

.mc-filtres:hover::-webkit-scrollbar-thumb {
	background: #C9C9C9;
}

.mc-filtres__raz {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 9px 12px;
	border: 1px solid var(--mc-bord);
	border-radius: 100px;
	background: none;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-gris);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mc-filtres__raz:hover {
	border-color: var(--mc-action, #D87A00);
	color: var(--mc-action, #D87A00);
}

/* ------------------------------------------------------------------
   Les résultats
   ------------------------------------------------------------------ */

/* Le champ de recherche, au-dessus des résultats. La loupe est dessinée
   en fond : une icône en <span> à côté du champ se décale dès que la
   police change. */
.mc-catalogue__recherche {
	margin-bottom: 16px;
}

.mc-catalogue__champ {
	width: 100%;
	padding: 12px 16px 12px 42px;
	border: 1px solid var(--mc-bord);
	border-radius: 100px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E757C' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 16px center;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--mc-encre);
}

.mc-catalogue__champ:focus {
	outline: 2px solid var(--mc-action, #D87A00);
	outline-offset: 1px;
	border-color: transparent;
}

.mc-catalogue__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.mc-catalogue__compte {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mc-gris);
}

.mc-catalogue__tri {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--mc-gris);
}

.mc-catalogue__tri select {
	padding: 7px 10px;
	border: 1px solid var(--mc-bord);
	border-radius: 8px;
	background: #FFFFFF;
	font-family: inherit;
	font-size: 0.75rem;
	color: var(--mc-encre);
}

/* Rien ne passe les filtres : on le dit, et on met le seul geste utile
   juste à côté. Une grille qui se vide sans un mot passe pour une page
   cassée. */
.mc-catalogue__vide {
	margin: 28px 0 0;
	padding: 18px 20px;
	border: 1px dashed var(--mc-bord);
	border-radius: 12px;
	font-size: 0.875rem;
	color: var(--mc-gris);
}

.mc-catalogue__lien-raz {
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--mc-action, #D87A00);
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   LA CARTE REMPLIT SON ENVELOPPE — 15/10
   ------------------------------------------------------------------

   LE SYMPTÔME, signalé capture à l'appui : dans une même rangée, les
   cartes s'arrêtaient à des hauteurs différentes et le « Voir la
   gamme » flottait à trois niveaux. Mesuré sur /produits/ : 407, 386
   et 405 px pour les trois cartes d'une rangée.

   LA CAUSE. Les critères de filtrage sont posés sur une ENVELOPPE,
   .mc-catalogue__item, et non sur la carte — la carte est la même que
   sur l'accueil et les archives, elle n'a pas à connaître le
   catalogue. Mais c'est alors l'enveloppe qui est la case de la
   grille : elle, elle s'étire bien à la hauteur de la rangée (mesuré :
   407 pour les trois), et la carte qu'elle contient restait à sa
   propre hauteur. Le vide se voyait sous la carte, pas dans la carte.

   LA CORRECTION tient en deux lignes et ne touche pas à la carte : on
   rend l'enveloppe transparente à l'étirement. La mécanique
   d'alignement, elle, existait déjà et n'attendait que ça —
   .mc-carte__corps est en flex:1 1 auto et .mc-carte__lien en
   margin-top:auto. Vérifié après coup sur les huit rangées : écart nul
   à l'intérieur de chacune, et les « Voir la gamme » à la même ligne.
   ------------------------------------------------------------------ */
.mc-catalogue__item {
	display: flex;
}

.mc-catalogue__item > .mc-carte {
	width: 100%;
}

/* hidden suffit en théorie ; Divi pose display:block sur à peu près
   tout, et un élément masqué réapparaissait. Le !important garde aussi
   la main sur le display:flex ci-dessus : une carte filtrée doit
   disparaître, pas s'aplatir. */
.mc-catalogue__item[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------
   Petit écran — la colonne passe au-dessus, repliée
   ------------------------------------------------------------------ */

@media (max-width: 980px) {

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

	.mc-filtres {
		position: static;
		max-height: none;
	}

	.mc-filtres__liste {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 18px;
	}
}

/* ------------------------------------------------------------------
   Le repli du catalogue
   ------------------------------------------------------------------
   Même traitement que sous le tableau des références : centré, en
   contour. Il ouvre la suite d'une liste, il ne déclenche rien —
   l'orange reste à ce qui engage. */

.mc-catalogue__plus {
	margin: 26px 0 0;
	text-align: center;
}

.mc-catalogue__voir-plus {
	padding: 12px 28px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 100px;
	background: #FFFFFF;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mc-encre, #4D4D4D);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mc-catalogue__voir-plus:hover {
	border-color: var(--mc-action, #D87A00);
	color: var(--mc-action, #D87A00);
}

.mc-catalogue__voir-plus[hidden] {
	display: none !important;
}

/* ==================================================================
   LE CONTENU SEO, APRÈS LE FORMULAIRE
   ==================================================================

   Relevé dans la maquette du listing (fichier du 02/10) : un titre, un
   chapô, puis deux colonnes de texte rédigé. Il vient APRÈS le bloc
   conseil et AVANT la FAQ — c'est de la lecture de fin de page, pas une
   étape du parcours d'achat.

   Pourquoi du CSS et pas un shortcode : ce sont des phrases écrites par
   l'agence, pas des données du site. Un shortcode n'aurait fait que les
   déplacer du gabarit vers un réglage, sans rien automatiser — et aurait
   ajouté un endroit de plus où le texte peut vivre. */

.mc-seo {
	max-width: 1200px;
}

.mc-seo__titre {
	max-width: 800px;
	margin: 0 0 18px;
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--mc-encre, #4D4D4D);
}

.mc-seo__intro {
	max-width: 800px;
	margin: 0 0 34px;
	font-size: 0.90625rem;
	line-height: 1.6;
	color: var(--mc-gris, #6E757C);
}

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

.mc-seo__cols h3 {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mc-encre, #4D4D4D);
}

.mc-seo__cols p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--mc-gris, #6E757C);
}

@media (max-width: 1100px) {

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