/* Navigation et méga-menu — Metaconcept Core.

   Valeurs reprises des gabarits Figma 15 à 18, à deux écarts assumés :
   le doré du wireframe est #D6AE05, la charte dit #D5AE05 — on suit la
   charte, les cinq dorés ayant été unifiés le 20/09 ; et les libellés y
   sont en Inter, qui n'est que le défaut de Figma — on suit Poppins.

   AUCUN SÉLECTEUR DIVI N'EST CIBLÉ. Tout le balisage visé est produit par
   le shortcode [mc_menu] du plugin, donc stable quelle que soit la version
   de Divi. C'est la leçon du 23/09, où l'en-tête a cassé parce que le CSS
   maison s'appuyait sur des classes que Divi 5 avait changées. */

.mc-nav {
	/* LES HUIT VALEURS RÉGLABLES DEPUIS DIVI.
	   Un module Code est opaque aux onglets Design de Divi : la taille des
	   liens ne s'y règle par aucun curseur. Ces huit variables sont la
	   contrepartie — elles se posent sur la SECTION de l'en-tête, dans
	   Custom CSS > Élément principal, et se propagent par héritage :

	     --mc-menu-hauteur   hauteur de la barre, celle du bandeau blanc
	     --mc-menu-taille    taille des liens
	     --mc-menu-graisse   graisse des liens
	     --mc-menu-espace    espace entre deux liens
	     --mc-menu-or        doré de la marque
	     --mc-menu-encre     gris foncé des libellés
	     --mc-mega-largeur   largeur utile du panneau
	     --mc-mega-marge     marge intérieure du panneau
	     --mc-logo-mobile    largeur du logo sous 1100px (repli 160px)

	   Aucune ne doit être posée ici : ce fichier ne porte que les valeurs
	   de repli. Une valeur changée dans Divi n'attend aucune mise à jour
	   du plugin. */
	--mc-or: var(--mc-menu-or, var(--c-link, #D5AE05));
	--mc-dark: var(--mc-menu-encre, var(--c-base, #4D4D4D));
	--mc-gris: #6E767C;
	--mc-gris-clair: #B9C1C8;
	--mc-filet: #EDEDF0;
	--mc-ease: 0.18s ease;

	position: relative;

	/* LA HAUTEUR NE SE DEVINE PAS, ELLE SE DÉCLARE.
	   height: 100% ne se résout que si un ancêtre déclare une hauteur ;
	   dans la colonne Divi, aucun ne le fait, et la barre retombait sur la
	   hauteur de son texte — d'où des liens collés en haut du bandeau
	   blanc, et un panneau qui s'ouvrait 37 px trop haut. La hauteur du
	   bandeau est donc un nombre, réglé dans Divi. */
	min-height: var(--mc-menu-hauteur, 90px);
	display: flex;
	align-items: center;
}

/* Le menu secondaire et les boutons d'action ne rejoignent le dépliant
   que sur petit écran. Au-dessus, le bandeau gris porte l'un et
   l'en-tête porte l'autre : ils n'ont rien à faire dans la barre. */
.mc-nav__secondaire-zone,
.mc-nav .mc-actions {
	display: none;
}

/* ------------------------------------------------------------------
   Le bouton de repli — invisible tant que la barre tient sur une ligne
   ------------------------------------------------------------------ */

.mc-nav__bascule {
	display: none;
	align-items: center;
	justify-content: center;

	/* Carré de 44 px : la cible tactile recommandée, et la place qu'il
	   faut pour trois barres lisibles. Le libellé vit dans le balisage,
	   pas à l'écran. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mc-filet);
	border-radius: 8px;
	background: transparent;
	color: var(--mc-dark);
	cursor: pointer;
}

/* Le libellé reste lisible par les lecteurs d'écran. Le thème fournit
   normalement cette classe ; on la redéclare pour ne pas en dépendre. */
.mc-nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mc-nav__bascule-barres,
.mc-nav__bascule-barres::before,
.mc-nav__bascule-barres::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform var(--mc-ease), opacity var(--mc-ease);
}

.mc-nav__bascule-barres {
	position: relative;
}

.mc-nav__bascule-barres::before,
.mc-nav__bascule-barres::after {
	content: "";
	position: absolute;
	left: 0;
}

.mc-nav__bascule-barres::before { top: -6px; }
.mc-nav__bascule-barres::after  { top: 6px; }

/* Ouvert, les trois barres deviennent une croix : l'état se lit sans
   avoir à chercher ce qui a changé ailleurs sur la page. */
.mc-nav.est-ouvert .mc-nav__bascule-barres {
	background: transparent;
}

.mc-nav.est-ouvert .mc-nav__bascule-barres::before {
	transform: translateY(6px) rotate(45deg);
}

.mc-nav.est-ouvert .mc-nav__bascule-barres::after {
	transform: translateY(-6px) rotate(-45deg);
}

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

/* ------------------------------------------------------------------
   La barre de navigation
   ------------------------------------------------------------------ */

.mc-nav__liste,
.mc-nav__liste li,
.mc-mega__liste,
.mc-mega__liste li {
	list-style: none;
}

/* Divi ajoute des puces aux listes des modules Code, par une pseudo-classe
   que list-style ne désarme pas. */
.mc-nav__liste li::before,
.mc-nav__liste li::marker,
.mc-mega__liste li::before,
.mc-mega__liste li::marker {
	content: none;
}

.mc-nav__liste {
	display: flex;
	align-items: center;
	gap: var(--mc-menu-espace, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-nav__liste > li {
	position: relative;
}

.mc-nav__liste > li > a {
	display: block;
	padding: 4px 0;
	font-size: var(--mc-menu-taille, 14px);
	font-weight: var(--mc-menu-graisse, 500);
	line-height: 1.2;
	color: var(--mc-gris);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--mc-ease);
}

.mc-nav__liste > li > a:hover,
.mc-nav__liste > li:focus-within > a {
	color: var(--mc-dark);
}

/* LE TRAIT DORÉ — au survol, et en permanence sur la page courante.
   Le trait s'ajoute à la graisse et à la couleur : qui ne distingue pas
   l'or voit quand même quelle entrée répond au pointeur, et laquelle
   correspond à la page ouverte.

   Il se déploie de la gauche vers la droite plutôt que d'apparaître
   d'un coup — le mouvement dit d'où il vient, et se coupe de lui-même
   pour qui a demandé moins d'animations (voir la règle en fin de
   fichier). --mc-menu-trait règle son épaisseur depuis Divi. */
.mc-nav__liste > li > a {
	position: relative;
}

.mc-nav__liste > li:not(.cta) > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: var(--mc-menu-trait, 2px);
	background: var(--mc-or);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.mc-nav__liste > li:not(.cta) > a:hover::after,
.mc-nav__liste > li:not(.cta):focus-within > a::after,
.mc-nav__liste > li.current-menu-item:not(.cta) > a::after,
.mc-nav__liste > li.current-menu-ancestor:not(.cta) > a::after,
.mc-nav__liste > li.current-menu-parent:not(.cta) > a::after {
	transform: scaleX(1);
}

.mc-nav__liste > li.current-menu-item > a,
.mc-nav__liste > li.current-menu-ancestor > a,
.mc-nav__liste > li.current-menu-parent > a {
	font-weight: 600;
	color: var(--mc-dark);
}

/* Le chevron des entrées qui portent un panneau. */
.mc-nav__liste > li.mc-has-mega > a::before {
	content: "▾";
	float: right;
	margin-left: 5px;
	font-size: 10px;
	line-height: 1.4;
}

/* Une entrée marquée « cta » dans Apparence > Menus devient une pilule. */
.mc-nav__liste > li.cta > a {
	padding: 10px 18px;
	border-radius: var(--mc-rayon-bouton, 100px);
	background: var(--mc-action, #D87A00);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	transition: filter var(--mc-ease);
}

.mc-nav__liste > li.cta > a:hover {
	color: #fff;
	filter: brightness(0.92);
}

.mc-nav__liste > li > a:focus-visible {
	outline: 2px solid var(--mc-or);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Le panneau
   ------------------------------------------------------------------
   PLEINE LARGEUR, SANS DÉPENDRE DU DOM DE DIVI.

   Le panneau vit dans une colonne Divi : aucun ancêtre ne fait la largeur
   de l'écran, et s'accrocher à l'un d'eux nous exposerait au prochain
   changement de Divi — c'est exactement ce qui a cassé l'en-tête le 23/09.

   On le sort donc du flux avec position: fixed, qui se réfère à la fenêtre
   et non à un parent. left et right à zéro donnent la largeur exacte de
   l'écran, quoi que fasse Divi autour. Seule la hauteur demande une mesure,
   fournie par mega-menu.js dans --mc-mega-top ; la valeur de repli 100%
   garde un rendu correct si le script ne s'exécute pas. */

.mc-mega {
	position: fixed;
	top: var(--mc-mega-top, 100%);

	/* Largeur et décalage viennent du script, qui retranche l'origine du
	   bloc conteneur quand un ancêtre transformé en crée un — un en-tête
	   collant de Divi, par exemple. Sans script, left: 0 et width: 100%
	   donnent exactement la largeur de la fenêtre : le repli est correct. */
	left: var(--mc-mega-gauche, 0);
	width: var(--mc-mega-fond, 100%);
	right: auto;
	z-index: 999;

	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);

	/* Replié par opacity et visibility, jamais display : la transition
	   existe, et le contenu reste annoncé aux lecteurs d'écran. */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mc-ease), visibility var(--mc-ease);
}

li:hover > .mc-mega,
li:focus-within > .mc-mega,
li.mc-mega-open > .mc-mega {
	opacity: 1;
	visibility: visible;
}

.mc-mega__inner {
	max-width: var(--mc-mega-largeur, 1312px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: var(--mc-mega-marge, 36px 64px 32px);
}

/* ------------------------------------------------------------------
   Recherche
   ------------------------------------------------------------------ */

.mc-mega__recherche input[type="search"] {
	width: 420px;
	max-width: 100%;
	height: 36px;
	padding: 0 16px 0 38px;
	border: 1px solid var(--mc-gris-clair);
	border-radius: 100px;
	background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B9C1C8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
	font-family: inherit;
	font-size: 12px;
	color: var(--mc-dark);
}

.mc-mega__recherche input[type="search"]::placeholder {
	color: var(--mc-gris-clair);
}

.mc-mega__recherche input[type="search"]:focus-visible {
	outline: 2px solid var(--mc-or);
	outline-offset: 1px;
}

.mc-mega__filet {
	height: 1px;
	background: var(--mc-filet);
}

/* ------------------------------------------------------------------
   La ligne de recherche, et « Voir tout le catalogue » — 15/10
   ------------------------------------------------------------------
   Les deux gestes qui ne demandent aucun choix préalable : chercher,
   ou tout voir. Ils occupent toute la largeur, au-dessus du partage
   trois quarts / un quart, parce qu'ils s'adressent au panneau entier
   et non à sa moitié gauche. */
.mc-mega__chercher {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* LE COMPOSANT DE RECHERCHE PORTE UNE MARGE BASSE DE 34 px — posée dans
   le socle (« la barre de recherche respire »), quand il vivait seul
   au-dessus de trois cartes et qu'il fallait l'en écarter. Dans la ligne
   flex du panneau, cette marge fait une boîte de 70 px pour un champ de
   36 : le lien se centrait donc sur le vide sous le champ, 17 px trop
   bas, et la première ligne du panneau était deux fois trop haute.

   DEUX FOIS PLUTÔT QU'UNE, ET C'EST LE SUJET. La correction d'abord
   écrite ici ne portait qu'une classe — et la règle du socle est
   « #page-container .mc-product-search », donc un IDENTIFIANT. Elle
   gagnait quoi qu'il arrive : la marge est restée, le lien aussi, et
   rien ne le signalait. On reprend donc le même préfixe pour se battre
   à armes égales. La règle sans préfixe reste dessous, pour le cas où
   le panneau serait servi hors de #page-container.

   On ne touche pas au composant, qui sert ailleurs, ni à la règle du
   socle, qui est juste là où elle est : c'est le panneau qui annule la
   marge CHEZ LUI, puisque c'est lui qui donne l'écart — il vient du gap
   de .mc-mega__inner. */
.mc-mega__chercher .mc-product-search,
#page-container .mc-mega__chercher .mc-product-search {
	margin-bottom: 0;
}

/* En lien de texte, pas en bouton : un bouton ici entrerait en
   concurrence avec la recherche, qui est le geste que le panneau veut
   encourager en premier. */
.mc-mega__catalogue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mc-action, #D87A00);
	text-decoration: none;
}

.mc-mega__catalogue::after {
	content: "\2192";
	font-weight: 400;
}

.mc-mega__catalogue:hover,
.mc-mega__catalogue:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Trois quarts de catalogue, un quart de devis — 15/10
   ------------------------------------------------------------------
   Sous le filet de la recherche seulement. La carte descend alors du
   haut des familles au bas de la dernière colonne : c'est une colonne
   entière, pas un bloc posé à la suite des listes. */
.mc-mega__bas {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

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

.mc-mega__etage {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mc-gris-clair);
}

/* ------------------------------------------------------------------
   Le bandeau des familles
   ------------------------------------------------------------------
   Six cases de LARGEUR ÉGALE et non des pastilles : les noms vont de
   17 à 31 caractères, et en pastilles la plus longue renvoyait les
   suivantes à la ligne. En cases, le bandeau tient sur une rangée quel
   que soit le texte, et les six se remplissent sans jamais se décaler.
   Le nombre est calé en bas de case par margin-top:auto — c'est lui
   qui garde l'alignement quand un nom passe sur deux lignes. */
.mc-mega__familles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}

.mc-mega__famille {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 11px 13px 12px;
	border: 1px solid var(--mc-filet);
	border-radius: 10px;
	background: #FFFFFF;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

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

.mc-mega__famille-nom {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mc-dark);
}

.mc-mega__famille-n {
	margin-top: auto;
	padding-top: 4px;
	font-size: 11px;
	color: var(--mc-gris-clair);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {

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

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

/* ------------------------------------------------------------------
   Les colonnes
   ------------------------------------------------------------------ */

.mc-mega__grille {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.mc-mega__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mc-mega__kicker {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mc-or);
}

.mc-mega__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-mega__liste a {
	font-size: 13px;
	line-height: 1.3;
	color: var(--mc-gris);
	text-decoration: none;
	transition: color var(--mc-ease);
}

/* Le lien de tête — « Tous les métaux » — est le filet de sécurité de la
   colonne : il mène à l'archive complète. Il se distingue par la graisse,
   pas par la couleur seule. */
.mc-mega__liste .is-tete a {
	font-weight: 600;
	color: var(--mc-dark);
}

.mc-mega__liste a:hover,
.mc-mega__liste a:focus-visible {
	color: var(--mc-or);
}

.mc-mega__tout {
	margin-top: auto;
	padding-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--mc-or);
	text-decoration: none;
}

.mc-mega__tout::after {
	content: " →";
}

/* Listes longues : la colonne s'élargit et la liste passe sur deux
   sous-colonnes. Le panneau s'étale au lieu de s'allonger. */
.mc-mega__col.is-large {
	flex: 2 1 0;
}

.mc-mega__liste.is-long {
	display: block;
	column-count: 2;
	column-gap: 24px;
}

.mc-mega__liste.is-long li {
	break-inside: avoid;
	margin-bottom: 10px;
}

/* ------------------------------------------------------------------
   Carte de mise en avant — l'emplacement à lead
   ------------------------------------------------------------------ */

.mc-mega__carte {
	/* « Gros CTA », demande du 25/09 : la carte pèse davantage que les
	   colonnes de liens. --mc-mega-carte règle sa part depuis Divi :
	   340px pour la valeur d'origine, 33% pour un tiers du panneau.

	   DEPUIS LE 15/10 elle n'est plus un élément de la grille des
	   colonnes mais la colonne de droite du panneau — le flex ci-dessous
	   ne s'applique donc plus, il reste pour les panneaux qui la
	   placeraient encore dans une grille. En colonne, c'est le display
	   flex vertical qui compte : il permet à l'image de prendre la
	   hauteur en trop. */
	flex: 0 0 var(--mc-mega-carte, 340px);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mc-dark);
	color: #fff;
}

/* L'IMAGE ABSORBE LA HAUTEUR EN TROP — 15/10.
   La carte descend jusqu'au bas des colonnes, dont la hauteur varie
   avec le nombre de liens. Sans ce flex:1, la différence se serait vue
   en bande noire vide sous le bouton. C'est donc la photo qui s'étire,
   et le texte reste calé en bas. */
.mc-mega__carte-visuel {
	flex: 1 1 auto;
	min-height: var(--mc-mega-visuel, 96px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #292929 center / cover no-repeat;
}

/* Avec une image, le bandeau grandit et se voile pour que le corps de
   la carte reste lisible quelle que soit la couverture choisie. */
.mc-mega__carte.has-image .mc-mega__carte-visuel {
	min-height: var(--mc-mega-visuel-image, 190px);
	position: relative;
}

.mc-mega__carte.has-image .mc-mega__carte-visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45));
}

.mc-mega__carte-icone {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mc-or);
	font-size: 22px;
}

.mc-mega__carte-corps {
	flex: 0 0 auto;
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-mega__carte-kicker {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mc-or);
}

.mc-mega__carte-kicker::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 3px;
	background: var(--mc-or);
}

.mc-mega__carte-titre {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.mc-mega__carte-texte {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--mc-gris-clair);
}

/* UN BOUTON EST ORANGE, PAS DORÉ — décision du 26/09.
   Le doré est la couleur de l'identité : logo, intitulés de colonnes,
   soulignement de la page courante. L'orange est celle de l'action, et
   ce bloc en est une. Le jeton --cta-action vient du système de boutons
   posé dans Divi ; la valeur de repli garde le bouton correct si ce
   bloc n'est pas encore en place. */
.mc-mega__carte-bouton {
	align-self: flex-start;
	margin-top: 4px;
	padding: 11px 18px;
	border: 1px solid var(--cta-action, #D87A00);
	border-radius: 100px;
	background: var(--cta-action, #D87A00);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Même inversion que les boutons de l'en-tête : le fond se vide, le
   contour prend le relais. Sur le fond sombre de la carte, c'est le
   blanc qui remplit — l'orange foncé y serait illisible. */
.mc-mega__carte-bouton:hover,
.mc-mega__carte-bouton:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cta-action, #D87A00) !important;
}

/* ------------------------------------------------------------------
   Pied de panneau
   ------------------------------------------------------------------ */

.mc-mega__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 4px;
	border-top: 1px solid var(--mc-filet);
	font-size: 11px;
	color: var(--mc-gris-clair);
}

.mc-mega__pied a {
	font-size: 12px;
	font-weight: 600;
	color: var(--mc-dark);
	text-decoration: none;
}

.mc-mega__pied a:hover {
	color: var(--mc-or);
}

/* ------------------------------------------------------------------
   Petit écran — la navigation se replie, le panneau rentre dans le flux
   ------------------------------------------------------------------
   LE POINT DE RUPTURE EST À 1100 px, PAS 980.

   Mesuré le 27/09 : entre 981 et 1100 px, l'en-tête déborde jusqu'à
   114 px — logo, menu et boutons ne tiennent plus sur une ligne, mais
   Divi ne bascule en menu burger qu'à 980. Resserrer les écarts et les
   tailles ne récupère que la moitié du déficit ; il n'y a pas de
   réglage qui fasse tenir cinq entrées, un logo et deux boutons dans
   cette bande.

   Divi doit donc basculer à la même valeur. La règle est dans le bloc
   CSS de Divi, et les deux nombres doivent rester égaux — c'est la
   seule dépendance entre les deux endroits, elle est écrite ici et là.
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {

	/* LA NAVIGATION PRINCIPALE SE REPLIE — RÉTABLI LE 27/09.
	   Ces règles existaient, je les ai retirées en 0.46.0 en croyant le
	   menu rendu par Divi. Il ne l'est pas : c'est le shortcode, et sans
	   elles la barre restait horizontale et débordait par-dessus la page.
	   Le burger visible à l'écran est celui du module Menu de Divi, qui
	   porte le menu SECONDAIRE et ne replie pas celle-ci. */
	.mc-nav {
		min-height: 0;
		height: auto;
		display: block;
		position: relative;
	}

	.mc-nav__bascule {
		display: inline-flex;
		margin-left: auto;
	}

	.mc-nav {
		display: flex;
		justify-content: flex-end;
	}

	/* ------------------------------------------------------------------
	   LA LIGNE D'EN-TÊTE : LOGO À GAUCHE, BURGER À L'EXTRÊME DROITE
	   ------------------------------------------------------------------

	   Demandé le 27/09. Le burger était déjà collé à droite de sa colonne,
	   mais cette colonne fait 12/24 entre le logo et les boutons d'action :
	   il tombait donc au milieu de l'écran.

	   Ces quatre règles remplacent le bloc `!important` qui était à coller
	   dans le CSS personnalisé de Divi. Elles s'appuient sur des attributs
	   posés par le script d'après la STRUCTURE de l'en-tête, jamais d'après
	   les classes de Divi — voir colonnesEntete() dans mega-menu.js. Le CSS
	   de l'en-tête revient ainsi dans un seul fichier.

	   Pourquoi !important : Divi écrit ses règles responsive APRÈS le CSS
	   du plugin dans et-core-unified-*.css. À spécificité égale, la dernière
	   gagne — c'est le défaut constaté le 26/09, où la ligne restait
	   empilée malgré un CSS correct. */
	[data-mc-entete='ligne'] {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	/* Le logo garde sa largeur propre, la navigation prend tout le reste :
	   le burger, collé à droite d'une colonne devenue élastique, se retrouve
	   au bord de l'écran. */
	[data-mc-entete='logo'] {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 60% !important;
		margin: 0 !important;
	}

	[data-mc-entete='nav'] {
		flex: 1 1 auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Le module posé dans cette colonne doit s'y étendre, sinon le burger se
	   recale sur la largeur de son propre contenu et retombe au milieu.
	   Divi 5 donne déjà 100 % à ses modules ; cette règle ne fait que ne pas
	   en dépendre — mesuré le 27/09, où un module resté à la taille de son
	   contenu laissait le burger à 180 px du bord gauche. */
	[data-mc-entete='nav'] > * {
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	/* La colonne des actions est VIDE sous ce point de rupture — son contenu
	   est parti dans le dépliant. La laisser affichée ajoutait une rangée
	   creuse sous le logo. */
	[data-mc-entete='actions'] {
		display: none !important;
	}

	/* LE LOGO, AGRANDI ET RÉGLABLE DEPUIS DIVI.
	   Neuvième variable de la liste documentée en tête de fichier :
	   --mc-logo-mobile, à poser sur la SECTION de l'en-tête. 160px est un
	   repli, pas une décision : le logo mesurait 125px de large sur un écran
	   où il restait de la place à revendre. */
	[data-mc-entete='logo'] img {
		width: var(--mc-logo-mobile, 160px) !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* LE DÉPLIANT EST UN PANNEAU POSÉ PAR-DESSUS, PAS UN BLOC QUI POUSSE.
	   Signalé le 27/09 : le menu s'ouvrait dans le flux — donc sous le
	   contenu de la page — et sur un fond transparent, illisible. Il se
	   superpose maintenant, sur un fond opaque, avec une ombre qui le
	   détache de ce qu'il recouvre.

	   C'est le CONTENEUR qui est positionné, pas chacun de ses blocs :
	   trois éléments en absolu se poseraient les uns sur les autres. */
	.mc-nav__panneau {
		display: none;
	}

	/* PLEINE LARGEUR D'ÉCRAN, PAS DE COLONNE.
	   « left: 0 ; right: 0 » se rapportait à .mc-nav, c'est-à-dire à la
	   colonne Divi qui l'accueille — étroite. Le panneau sortait donc en
	   bande de cent trente pixels au milieu de la page.

	   On reprend le mécanisme déjà en place pour le panneau du méga-menu :
	   position fixed, et les deux variables que le script mesure à chaque
	   ouverture — l'origine du bloc conteneur et la largeur de la fenêtre.
	   Le résultat ne dépend plus d'aucun réglage de Divi. */
	/* Le panneau est déplacé à la racine du document pendant qu'il est
	   ouvert : le sélecteur ne peut donc plus passer par .mc-nav. */
	.mc-nav__panneau.est-ouvert {
		display: block;
		position: fixed;
		top: var(--mc-mega-top, 100%);
		left: var(--mc-mega-gauche, 0);
		width: var(--mc-mega-fond, 100vw);
		z-index: 100000;

		max-height: calc(100vh - var(--mc-mega-top, 6rem));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		padding: 12px 20px 20px;
		background: var(--mc-mobile-fond, #FFFFFF);
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
	}

	.mc-nav__liste {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mc-nav__liste > li > a {
		padding: 14px 0;
		border-bottom: 1px solid var(--mc-filet);
		font-size: 15px;
	}

	/* Le trait doré souligne une entrée dans une rangée ; empilées, il
	   ferait doublon avec le filet de séparation. */
	.mc-nav__liste > li > a::after {
		display: none;
	}

	.mc-nav__liste > li.cta > a {
		margin-top: 12px;
		border-bottom: none;
		text-align: center;
	}

	/* Les boutons d'action, déplacés ici par le script, et le menu
	   secondaire : ils vivent dans le panneau, à la suite de la liste. */
	.mc-nav__panneau > .mc-actions,
	.mc-nav__panneau > .mc-nav__secondaire-zone {
		display: flex;
	}

	.mc-nav__panneau > .mc-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 16px 0;
		border-bottom: 1px solid var(--mc-filet);
	}

	.mc-nav__panneau > .mc-actions > * {
		width: 100%;
		justify-content: center;
	}

	/* Le secondaire se distingue du principal : plus petit, plus discret,
	   sur deux colonnes pour ne pas allonger la liste inutilement. */
	.mc-nav__panneau > .mc-nav__secondaire-zone {
		padding-top: 14px;
	}

	.mc-nav__secondaire {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mc-nav__secondaire li::before,
	.mc-nav__secondaire li::marker {
		content: none;
	}

	.mc-nav__secondaire li {
		list-style: none;
		flex: 0 0 calc(50% - 10px);
	}

	.mc-nav__secondaire a {
		display: block;
		padding: 8px 0;
		font-size: 13px;
		color: var(--mc-gris);
		text-decoration: none;
	}

	/* LE PANNEAU RENTRE DANS LE FLUX, MAIS RESTE FERMÉ.
	   La version précédente posait ici opacity: 1 et visibility: visible
	   sans condition : le panneau s'affichait donc en permanence sous le
	   menu, déplié, 1 297 px de haut. Il s'ouvre maintenant sur appui,
	   comme sur grand écran — la classe est posée par le script. */
	.mc-mega {
		position: static;
		width: auto;
		opacity: 0;
		visibility: hidden;
		box-shadow: none;
		transition: none;

		/* Replié : aucune hauteur, aucun espace réservé. */
		max-height: 0;
		overflow: hidden;
	}

	li.mc-mega-open > .mc-mega {
		opacity: 1;
		visibility: visible;

		/* Le panneau ne dépasse jamais l'écran : au-delà, il défile.
		   4rem couvrent la barre d'adresse du navigateur mobile. */
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Le survol n'existe pas au doigt : sans cette neutralisation, un
	   appui laisse l'état :hover collé et le panneau reste ouvert. */
	li:hover > .mc-mega,
	li:focus-within > .mc-mega {
		opacity: 0;
		visibility: hidden;
		max-height: 0;
	}

	li.mc-mega-open > .mc-mega {
		opacity: 1;
		visibility: visible;
		max-height: calc(100vh - 4rem);
	}

	/* Le pont ne sert qu'à la souris, et il déborde de 32 px de chaque
	   côté : laissé en place sur petit écran, il ajoutait 12 px de
	   défilement horizontal une fois le menu ouvert.

	   Le sélecteur porte l'élément parent parce que la règle de base se
	   trouve PLUS BAS dans ce fichier : à spécificité égale, c'est elle
	   qui l'emporterait, media query ou pas. */
	li.mc-has-mega > .mc-mega-pont {
		display: none;
	}

	.mc-mega__inner {
		max-width: none;
		padding: 16px 0 20px;
		gap: 18px;
	}

	.mc-mega__grille {
		flex-direction: column;
		gap: 24px;
	}

	.mc-mega__col,
	.mc-mega__carte {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}

	.mc-mega__liste.is-long {
		column-count: 1;
	}

	.mc-mega__recherche .mc-product-search,
	.mc-mega__recherche input[type="search"] {
		max-width: none;
		width: 100%;
	}

	/* L'ACCORDÉON — une colonne s'ouvre, les autres restent repliées.
	   Sans lui, le panneau mobile déroule quatre listes à la suite et
	   trouver « Applications » demande de dépasser trente entrées.
	   Le chevron dit l'état : la position seule ne se remarque pas. */
	/* PRÉFIXÉES PAR .mc-mega, ET CE N'EST PAS DÉCORATIF.
	   Le panneau est rattaché DANS l'élément de menu : ses listes sont
	   donc descendantes du <ul> de la navigation, et toute règle du
	   thème visant « .menu ul » les atteint. C'est ce qui a fait échouer
	   le premier essai — le repli était écrasé par la règle qui masque
	   le menu en mobile. Un cran de spécificité de plus met l'accordéon
	   hors de portée de ces sélecteurs génériques. */
	.mc-mega .mc-mega__kicker[role="button"] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--mc-filet);
		cursor: pointer;

		/* Cible tactile d'au moins 44 px, bord à bord. */
		min-height: 44px;
	}

	.mc-mega .mc-mega__kicker[role="button"]::after {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.18s ease;
	}

	.mc-mega .mc-mega__col.is-ouvert > .mc-mega__kicker::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.mc-mega .mc-mega__kicker[role="button"]:focus-visible {
		outline: 2px solid var(--mc-or);
		outline-offset: 2px;
	}

	/* Replié par défaut : on choisit ce qu'on ouvre. */
	.mc-mega .mc-mega__col > .mc-mega__liste,
	.mc-mega .mc-mega__col > .mc-mega__tout {
		display: none;
	}

	.mc-mega .mc-mega__col.is-ouvert > .mc-mega__liste {
		display: flex;
		padding-top: 12px;
	}

	.mc-mega .mc-mega__col.is-ouvert > .mc-mega__liste.is-long {
		display: block;
	}

	.mc-mega .mc-mega__col.is-ouvert > .mc-mega__tout {
		display: inline-block;
		padding-top: 10px;
	}

	/* Les colonnes se touchent : l'accordéon fait la séparation. */
	.mc-mega__grille {
		gap: 0;
	}

	/* LA CARTE PERD SON IMAGE, PAS SON BOUTON.
	   Sur un écran étroit, le visuel pousse le texte et le bouton hors
	   du champ — c'est l'appel à l'action qui disparaît en premier. On
	   garde le bloc, on retire ce qui ne porte pas d'information. */
	.mc-mega__carte-visuel {
		display: none;
	}
}

/* Très petit écran : les colonnes se resserrent encore. */
@media (max-width: 480px) {
	.mc-mega__inner {
		gap: 14px;
	}

	.mc-mega__grille {
		gap: 18px;
	}

	.mc-mega__liste {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-mega,
	.mc-nav__liste > li > a,
	.mc-nav__liste > li > a::after,
	.mc-mega__liste a,
	.mc-mega__carte-bouton,
	.mc-mega__kicker::after {
		transition: none;
	}
}

/* ==================================================================
   LA BARRE UTILITAIRE — le bandeau gris au-dessus de l'en-tête
   ==================================================================
   Numéros à gauche, liens à droite. La barre rend son propre fond
   pleine largeur et centre son contenu sur la même largeur utile que
   le panneau : les deux s'alignent sans réglage.

   Quatre variables réglables depuis Divi, sur la section du bandeau :
     --mc-barre-fond      couleur de fond
     --mc-barre-encre     couleur du texte
     --mc-barre-hauteur   hauteur du bandeau
     --mc-barre-taille    taille du texte
   ================================================================== */

.mc-barre {
	background: var(--mc-barre-fond, #4D4D4D);
	color: var(--mc-barre-encre, #FFFFFF);
	font-size: var(--mc-barre-taille, 12px);
	line-height: 1.2;
}

.mc-barre__inner {
	/* Par défaut la barre s'aligne sur le panneau — les deux se posent sur
	   la même largeur utile sans réglage. --mc-barre-largeur les découple
	   quand le bandeau doit suivre un conteneur plus large que le panneau. */
	max-width: var(--mc-barre-largeur, var(--mc-mega-largeur, 1312px));
	min-height: var(--mc-barre-hauteur, 36px);
	margin: 0 auto;
	padding: 0 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mc-barre__gauche {
	display: flex;
	align-items: center;
	gap: 24px;
}

.mc-barre__tel {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

/* « France », « Export » : une étiquette, pas une information. Elle
   s'efface pour laisser le numéro au premier plan.

   ELLE DOIT DIRE SA COULEUR, ET NE PAS L'HÉRITER — relevé le 02/10.
   Écrite sans couleur propre, elle prenait le #333 du corps du site : du
   gris foncé à 60 % sur la barre #4D4D4D, donc illisible. Le numéro, lui,
   est un lien et recevait sa couleur d'ailleurs — d'où une barre où l'on
   voyait les numéros mais pas ce qu'ils désignent.

   Le blanc à 78 % tient le contraste sur ce gris tout en restant en
   retrait du numéro, ce qui était l'intention de départ. */
.mc-barre__zone {
	color: #FFFFFF;
	opacity: 0.78;
}

.mc-barre a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.mc-barre a:hover,
.mc-barre a:focus-visible {
	opacity: 0.7;
}

.mc-barre a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mc-barre__liste {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Divi ajoute des puces aux listes des modules Code. */
.mc-barre__liste li::before,
.mc-barre__liste li::marker {
	content: none;
}

.mc-barre__liste li {
	list-style: none;
	white-space: nowrap;
}

/* Petit écran : les numéros restent, les liens passent dessous plutôt
   que de compresser la ligne jusqu'à l'illisible. */
@media (max-width: 1100px) {
	.mc-barre__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 8px 20px;
	}

	.mc-barre__gauche,
	.mc-barre__liste {
		flex-wrap: wrap;
		gap: 6px 16px;
	}
}

/* Les panneaux attendent en pied de page que le script les déplace dans
   leur élément de menu. Invisibles et sans encombrement d'ici là. */
.mc-mega-source {
	display: none;
}

/* Le panneau doit pouvoir sortir de son élément de menu, quel que soit le
   module qui rend ce menu. */
li.mc-has-mega {
	position: relative;
}

/* ==================================================================
   ALIGNEMENT DES COLONNES — titres et liens sur la même verticale
   ==================================================================
   CONSTAT DU 26/09 : les liens partaient 12 à 18 px à droite de leur
   titre, et un filet rouge courait à gauche des deux premières
   colonnes.

   POURQUOI. Le panneau est imprimé en pied de page, hors des modules
   Divi, donc hors du périmètre où le plugin avait été testé. Il y
   reçoit les styles de liste du thème et des extensions — retrait de
   liste, puce, bordure — que des sélecteurs à une seule classe ne
   suffisent pas toujours à écarter.

   On remonte donc la spécificité d'un cran en préfixant par .mc-mega,
   et on remet à zéro TOUT ce qui peut décaler une liste, plutôt que
   les seules propriétés observées : la prochaine extension qui ajoute
   un retrait ne remettra pas le sujet sur la table.

   Aucun !important : la spécificité suffit, et elle laisse la main à
   qui voudra surcharger depuis Divi.
   ================================================================== */

.mc-mega .mc-mega__liste,
.mc-mega .mc-mega__liste li,
.mc-mega .mc-mega__kicker {
	margin: 0;
	padding: 0;
	border: 0;
	text-indent: 0;
	list-style: none;
	background: none;
}

.mc-mega .mc-mega__liste li::before,
.mc-mega .mc-mega__liste li::after,
.mc-mega .mc-mega__liste li::marker {
	content: none;
	display: none;
}

/* Le titre de colonne garde son espace sous lui, repris ici puisque la
   remise à zéro ci-dessus a effacé sa marge. L'espacement vertical de
   la colonne vient du gap de .mc-mega__col, pas des marges. */
.mc-mega .mc-mega__kicker {
	line-height: 1.2;
}

/* La liste en deux sous-colonnes ne doit pas non plus décaler. */
.mc-mega .mc-mega__liste.is-long li {
	margin: 0 0 10px;
	padding: 0;
}

/* ==================================================================
   LE PONT — combler l'intervalle entre l'entrée de menu et le panneau
   ==================================================================
   Sans lui, descendre la souris du lien vers le panneau traverse une
   bande où rien n'est survolé, et le panneau se referme. Signalé le
   27/09.

   Il déborde latéralement : on descend rarement tout droit, et un pont
   large comme le seul libellé se rate d'un rien.
   ================================================================== */

.mc-mega-pont {
	position: absolute;
	top: 100%;
	left: -32px;
	right: -32px;
	height: var(--mc-mega-pont, 0);
	display: block;
	pointer-events: auto;
	background: transparent;
}

/* Le pont ne vit que pendant le survol : le reste du temps il ne doit
   pas intercepter les clics de ce qui se trouve dessous. */
li.mc-has-mega:not(:hover):not(:focus-within) > .mc-mega-pont {
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Un délai de grâce à la fermeture
   ------------------------------------------------------------------
   Sortir du panneau d'un pixel — en visant un lien de la colonne
   voisine, par exemple — ne doit pas tout refermer instantanément.
   Le délai ne s'applique QU'À la fermeture : l'ouverture reste
   immédiate. */

.mc-mega {
	transition-delay: 0.15s;
}

li:hover > .mc-mega,
li:focus-within > .mc-mega,
li.mc-mega-open > .mc-mega {
	transition-delay: 0s;
}

/* ------------------------------------------------------------------
   La recherche du panneau, c'est le composant [mc_product_search]
   ------------------------------------------------------------------
   Il apporte son champ, ses suggestions et sa page de résultats. Le
   panneau ne fait que le cadrer : largeur, et bouton d'envoi masqué —
   on valide à la touche Entrée, les suggestions faisant le reste. */

.mc-mega__recherche .mc-product-search {
	max-width: var(--mc-mega-recherche, 420px);
}

.mc-mega__recherche .mc-product-search__submit {
	display: none;
}

/* Le panneau est en position: fixed : la liste de suggestions doit
   passer au-dessus de tout ce qu'il contient. */
.mc-mega__recherche .mc-product-search__dropdown {
	z-index: 100000;
}

/* ------------------------------------------------------------------
   L'ESPACE DE 10 px SOUS L'EN-TÊTE
   ------------------------------------------------------------------

   Relevé le 02/10 sur /formes/anode/ : une bande claire d'une dizaine de
   pixels sépare le bas du menu du haut de la bande sombre du hero. Ce
   n'est pas une marge du corps de page — c'est la section blanche de
   l'en-tête qui porte `margin-bottom: 10px`, réglée dans le Theme
   Builder. Elle y avait sa raison : la section projette une ombre
   (0 12px 18px -6px), et les 10 px lui laissaient de la place.

   Une ombre n'a pas besoin de place : elle se peint EN DEHORS de la
   boîte, par-dessus ce qui suit. Les 10 px ne faisaient donc que montrer
   le fond de page entre deux bandes qui doivent se toucher.

   LA MARGE EST NEUTRALISÉE ICI, PAS DANS LE GABARIT. Le réglage reste
   visible dans le Theme Builder, l'en-tête n'est pas rouvert, et cette
   ligne annule le seul effet qu'on ne voulait pas. Si l'espace devait
   revenir un jour, c'est cette règle qu'il faut retirer — pas un réglage
   Divi à retrouver.

   Le !important et le préfixe body #page-container ne sont pas de la
   superstition : Divi 5 écrit ses réglages de section dans une couche
   (@layer) et en important. Une règle simple, même plus spécifique, est
   perdante — mesuré : la marge restait à 10 px. Celle-ci passe. */

body #page-container .et-l--header .et_pb_section {
	margin-bottom: 0 !important;
}