/* Tableau des références d'une gamme.
 *
 * Réécrit le 30/09/2026 sur la maquette « gabarit 10 — gamme produit ».
 * L'ancienne version dessinait une grille de <div> : elle a été remplacée
 * par un vrai <table>, parce qu'un tableau de données doit s'annoncer
 * comme tel aux lecteurs d'écran et se laisser copier vers un tableur —
 * ce que les acheteurs font.
 *
 * Aucune couleur n'est écrite en dur ici : tout vient des jetons du
 * socle (assets/css/socle.css). Un bouton est ORANGE, jamais doré.
 */

.mc-reftable {
	--mc-reftable-filet: var(--mc-filet, rgba(77, 77, 77, 0.16));
	margin: 0 0 8px;
}

/* ------------------------------------------------------------------
   1. La barre de sélection
   ------------------------------------------------------------------ */

/* LA BARRE EST SOMBRE — c'est la maquette, et c'est justifié : elle
   annonce une action groupée, pas une information. Sur fond clair, elle
   se confondait avec l'en-tête du tableau juste en dessous. */
.mc-reftable__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	/* 2px et non 14 : la barre et le tableau forment un seul objet. */
	margin-bottom: 2px;
	padding: 14px 18px;
	border-radius: 8px 8px 0 0;
	background: var(--mc-sombre, #1C1B18);
}

/* LE BOUTON « VOIR PLUS », SOUS LE TABLEAU.
   Centré et en contour : il ouvre la suite d'une liste, il ne déclenche
   rien. L'orange reste réservé à ce qui engage — la mise au devis. */
.mc-reftable__plus {
	margin: 18px 0 0;
	text-align: center;
}

.mc-reftable__voir-plus {
	padding: 11px 26px;
	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-reftable__voir-plus:hover {
	border-color: var(--mc-action, #D87A00);
	color: var(--mc-action, #D87A00);
}

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

/* LES DEUX BOUTONS D'UNE LIGNE D'ARCHIVE.
   « Voir la fiche » est secondaire — contour, pas de fond : deux boutons
   pleins côte à côte se disputent le clic, et c'est l'ajout au devis qui
   doit rester le geste appuyé. La cellule les range en ligne et les
   empile sur petit écran plutôt que de les rétrécir. */
.mc-reftable__action {
	white-space: nowrap;
}

.mc-reftable__action .mc-reftable__fiche {
	display: inline-flex;
	align-items: center;
	margin-right: 8px;
	padding: 8px 14px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mc-encre, #4D4D4D);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

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

@media (max-width: 860px) {

	.mc-reftable__action {
		white-space: normal;
	}

	.mc-reftable__action .mc-reftable__fiche {
		margin: 0 0 8px;
	}
}

/* Le filtre de texte, dans la barre sombre. Il pousse le bouton d'ajout
   groupé à droite — margin-left:auto sur le champ et non sur le bouton,
   pour que la barre tienne encore si le panier devis est désactivé. */
.mc-reftable__chercher {
	margin-left: auto;
	flex: 0 1 280px;
}

.mc-reftable__chercher input {
	width: 100%;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.08);
	font-family: inherit;
	font-size: 0.8125rem;
	color: #FFFFFF;
}

.mc-reftable__chercher input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.mc-reftable__chercher input:focus {
	outline: 2px solid var(--mc-or, #D5AE05);
	outline-offset: 1px;
}

/* Une ligne masquée par le filtre doit disparaître vraiment : Divi pose
   display:table-row un peu partout, et l'attribut hidden seul ne suffit
   pas toujours dans un tableau. */
.mc-reftable__table tr[hidden] {
	display: none !important;
}

.mc-reftable__total {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #FFFFFF;
}

.mc-reftable__compte {
	margin: 0;
	/* margin-left:auto pousse le compteur et le bouton à droite : la
	   barre reste lisible même quand le compteur est vide. */
	margin-left: auto;
	font-size: 0.75rem;
	font-weight: 500;
	color: #B9C1C8;
}

.mc-reftable__compte:empty {
	display: none;
}

.mc-reftable__compte:empty + .mc-reftable__groupe {
	margin-left: auto;
}

.mc-reftable__groupe {
	padding: 11px 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

/* Désactivé sur fond sombre, l'opacité ne suffit pas : le bouton
   devient un rectangle illisible. On change la couleur, pas la
   transparence. */
.mc-reftable__groupe[disabled] {
	background-color: #5A5A5A;
	border-color: #5A5A5A;
	color: #928F8F;
	cursor: default;
}

/* ------------------------------------------------------------------
   2. Le tableau
   ------------------------------------------------------------------

   Le cadre porte le défilement horizontal : sur un écran étroit, six
   colonnes ne tiennent pas, et réduire la police jusqu'à ce qu'elles
   tiennent rend le tableau illisible. On le fait défiler. */

.mc-reftable__cadre {
	overflow-x: auto;
	border: 1px solid var(--mc-reftable-filet);
	border-radius: 0 0 8px 8px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.mc-reftable__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.mc-reftable__table th,
.mc-reftable__table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
	border: 0;
}

.mc-reftable__table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--mc-encre, #4D4D4D);
	border-bottom: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   2 bis. LA LIGNE D'EN-TÊTE SUIT LE DÉFILEMENT
   ------------------------------------------------------------------

   Demandé le 02/10 : sur /formes/anode/ (24 lignes) comme sur
   /elements/pb/ (plus de 200), les intitulés — RÉFÉRENCE, COMPOSITION,
   SOLIDUS – LIQUIDUS, QUANTITÉ — sortent de l'écran dès la dixième ligne,
   et le visiteur lit des colonnes qu'il ne sait plus nommer.

   POURQUOI IL FAUT RENDRE LE CADRE TRANSPARENT AU DÉFILEMENT.
   position:sticky se cale sur le premier ancêtre qui défile. Ici c'est
   .mc-reftable__cadre, qui porte overflow-x:auto pour les écrans étroits :
   l'en-tête s'y collerait au haut du CADRE, c'est-à-dire nulle part, et
   la règle n'aurait aucun effet visible. On rend donc le cadre
   transparent au défilement là où il n'en a pas besoin — au-dessus de
   1024 px, cinq colonnes tiennent sans déborder — et l'en-tête se cale
   alors sur la fenêtre.

   SOUS L'EN-TÊTE DU SITE, PAS DERRIÈRE. Divi fige une copie de la barre
   blanche en position:fixed au défilement (92 px ici). Collée à top:0,
   la ligne d'en-tête du tableau passait dessous et restait invisible —
   premier essai du 02/10. La hauteur n'est pas écrite ici : elle est
   mesurée par references-table.js, qui pose --mc-entete-haut sur :root,
   barre d'administration comprise. Le repli de 92 px couvre le cas où
   le script n'a pas encore mesuré.

   Les cellules d'en-tête ont déjà un fond plein (--mc-encre) : les lignes
   passent dessous sans transparence, rien à ajouter. */

@media (min-width: 1024px) {

	.mc-reftable__cadre {
		overflow-x: visible;
	}

	.mc-reftable__table thead th {
		position: sticky;
		top: var(--mc-entete-haut, 92px);
		z-index: 3;
	}
}

/* LA CELLULE QUI PORTE LA BULLE D'AIDE PASSE DEVANT LES LIGNES — 16/10.

   La colonne Quantité est la seule dont l'en-tête porte une infobulle, et
   cette bulle descend sous la ligne d'en-tête : elle recouvre donc la
   première ligne du tableau. Il faut que la cellule d'en-tête soit
   positionnée ET au-dessus des lignes, sans quoi la bulle — qui vit dans
   SON contexte d'empilement — passe dessous quel que soit son propre
   z-index.

   LE POIDS COMPTE AUTANT QUE LA VALEUR. « .mc-reftable__qte » seul ne
   suffit pas : « .mc-reftable__table thead th » ci-dessus est plus
   spécifique et replaquerait la cellule à 3. On reprend donc la même
   armature de sélecteur, plus la classe.

   ET ON NE VISE QUE L'EN-TÊTE. La classe est aussi portée par les
   cellules du corps ; les élever reviendrait à faire passer les lignes
   devant la bulle — le défaut relevé le 16/10. */
.mc-reftable__table thead th.mc-reftable__qte {
	position: relative;
	z-index: 20;
}

/* Au-dessus de 1024 px l'en-tête se colle : on lui rend sa position
   collante, que la règle ci-dessus vient d'écraser par spécificité. */
@media (min-width: 1024px) {

	.mc-reftable__table thead th.mc-reftable__qte {
		position: sticky;
		top: var(--mc-entete-haut, 92px);
	}
}

.mc-reftable__ligne + .mc-reftable__ligne th,
.mc-reftable__ligne + .mc-reftable__ligne td {
	border-top: 1px solid var(--mc-reftable-filet);
}

.mc-reftable__ligne:hover th,
.mc-reftable__ligne:hover td {
	background: var(--mc-fond-doux, #FAFAFA);
}

/* ------------------------------------------------------------------
   3. La colonne référence
   ------------------------------------------------------------------ */

/* La CELLULE reste une cellule : display:flex sur un <th> le sort du
   modèle de tableau et disloque la ligne entière. C'est l'enveloppe
   interne qui met en page. */
.mc-reftable__ref {
	font-weight: 400;
	min-width: 260px;
}

.mc-reftable__ref-corps {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mc-reftable__vignette img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--mc-reftable-filet);
}

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

.mc-reftable__code {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mc-or, #D5AE05);
}

.mc-reftable__nom a {
	color: var(--mc-encre, #4D4D4D);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.35;
}

.mc-reftable__nom a:hover {
	color: var(--mc-action, #D87A00);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   4. Sélection, quantité, action
   ------------------------------------------------------------------ */

.mc-reftable__case {
	width: 44px;
	padding-right: 0;
}

.mc-reftable__case input {
	width: 17px;
	height: 17px;
	accent-color: var(--mc-action, #D87A00);
	cursor: pointer;
}

.mc-reftable__qte {
	width: 96px;
}

.mc-reftable__qte input {
	width: 68px;
	padding: 7px 8px;
	border: 1px solid var(--mc-reftable-filet);
	border-radius: 8px;
	font-size: 0.875rem;
	text-align: center;
}

.mc-reftable__action {
	width: 1%;
	white-space: nowrap;
}

.mc-reftable__ajout {
	padding: 9px 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   5. Mobile — le tableau devient une pile de fiches
   ------------------------------------------------------------------

   Sous 700 px, le défilement horizontal ne suffit plus : on retourne
   chaque ligne à la verticale et chaque cellule porte son libellé, pris
   dans data-libelle. C'est pour cela que le rendu PHP écrit cet
   attribut — il ne sert qu'ici. */

@media (max-width: 700px) {

	.mc-reftable__cadre {
		overflow-x: visible;
		border: 0;
		background: transparent;
	}

	.mc-reftable__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.mc-reftable__ligne {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--mc-reftable-filet);
		border-radius: var(--mc-rayon-carte, 12px);
		background: #fff;
	}

	.mc-reftable__ligne + .mc-reftable__ligne th,
	.mc-reftable__ligne + .mc-reftable__ligne td {
		border-top: 0;
	}

	.mc-reftable__table th {
		display: block;
	}

	.mc-reftable__table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 8px 16px;
	}

	.mc-reftable__table td[data-libelle]::before {
		content: attr(data-libelle);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #767676;
	}

	.mc-reftable__case {
		width: auto;
	}

	.mc-reftable__action,
	.mc-reftable__qte {
		width: auto;
	}

	.mc-reftable__ajout {
		width: 100%;
	}
}

/* ==================================================================
   LE FILTRE PAR AXE COMPLÉMENTAIRE
   Demande du 06/10 : « un filtre des formes pour les pages industrie ».
   ==================================================================

   LES MÊMES PUCES QUE L'ARCHIVE DES ALLIAGES ET QUE LA PAGE
   TÉLÉCHARGEMENTS, et c'est voulu : un visiteur qui a filtré des
   alliages par métal reconnaît le geste. Elles ne sont pas factorisées
   dans une feuille commune pour autant — les trois barres n'ont ni le
   même balisage ni le même voisinage, et une classe partagée les
   figerait ensemble pour une ressemblance qui tient à trois
   déclarations.

   ELLE SE POSE SOUS LA BARRE DE RECHERCHE, pas à côté : les deux
   filtres se cumulent, et les lire l'un sous l'autre dit mieux qu'ils
   s'ajoutent que les mettre sur la même ligne.
   ------------------------------------------------------------------ */

.mc-reffiltre {
	margin: 0 0 18px;
}

.mc-reffiltre__intitule {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

.mc-reffiltre__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mc-reffiltre__puce {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* 44 px : la cible tactile minimale. Ces puces seront surtout
	   touchées au doigt sur un catalogue. */
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--mc-filet, rgba(77, 77, 77, 0.16));
	border-radius: 100px;
	background: #FFFFFF;
	color: var(--mc-encre, #4D4D4D);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--mc-ease, 0.18s ease),
		border-color var(--mc-ease, 0.18s ease),
		color var(--mc-ease, 0.18s ease);
}

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

.mc-reffiltre__puce:focus-visible {
	outline: 2px solid var(--mc-action, #D87A00);
	outline-offset: 2px;
}

/* LA PUCE ACTIVE NE SE DISTINGUE PAS QUE PAR LA COULEUR : elle est
   pleine, donc son contraste change du tout au tout. Règle suivie
   partout sur ce site — le sens ne doit jamais tenir à la seule
   teinte. aria-pressed le dit par ailleurs aux lecteurs d'écran. */
.mc-reffiltre__puce.is-active {
	background: var(--mc-action, #D87A00);
	border-color: var(--mc-action, #D87A00);
	color: #FFFFFF;
}

/* Le compteur répond avant le clic — combien de références portent
   cette forme — ce qui évite les culs-de-sac. */
.mc-reffiltre__compte {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.6;
}

.mc-reffiltre__puce.is-active .mc-reffiltre__compte {
	opacity: 0.8;
}

@media (max-width: 600px) {

	.mc-reffiltre__puce {
		padding: 8px 13px;
		font-size: 0.8125rem;
	}
}