/* ================= EN-TETE v2 — modele D ================= */

.mm-h2 #mm-header,
.mm-h2 .mm-header-inner { background: #fff; }

/* L'en-tete d'origine a une hauteur figee (79 px) et AUCUNE marge verticale
   (padding 0 14px) : tout etait colle en haut, et le filet du bas se
   confondait avec la barre beige. On libere la hauteur et on redonne de
   l'air, en haut comme en bas. */
.mm-h2 #mm-header,
.mm-h2 .mm-header-inner { height: auto; min-height: 0; }

/* EN-TETE COLLANT — #mm-header etait deja declare "sticky", mais sans effet :
   un element collant ne peut se deplacer qu'a l'interieur de son parent, et
   ici le parent ne fait que la hauteur de l'en-tete lui-meme. On rend donc
   collant le bloc de tete complet (#masthead), dont le parent fait toute la
   hauteur de la page. Le decalage negatif fait defiler le bandeau promo hors
   de l'ecran et epingle la partie blanche en haut ; il est calcule sur la
   hauteur reelle du bandeau par le script ci-dessous. */
.mm-h2 #masthead {
	position: sticky;
	z-index: 9000;
	transition: top .28s ease;
}

/* Sur les fiches produits, le corps de page porte "overflow-x: hidden".
   Le navigateur bascule alors automatiquement l'autre axe sur "auto" : la
   page devient sa propre zone de defilement, et un element collant cesse
   de fonctionner. "clip" bloque le debordement horizontal SANS creer de
   zone de defilement — c'est ce qui redonne le collage sur les fiches. */
/* Un correctif CSS du site pose "overflow-x: hidden !important" sur
   "html, body, body.single-product". Meme poids que le notre, mais declare
   plus loin : il l'emportait. On monte donc d'un cran en precision. */
html body.mm-h2,
html.mm-h2-hote body {
	overflow-x: clip !important;
	overflow-y: visible !important;
}
/* L'en-tete portait "top: 30px" pour son ancien collage : conserve, il le
   decale visuellement de 30 px vers le bas a l'interieur du bloc collant. */
.mm-h2 #mm-header {
	position: relative;
	top: 0 !important;
}

.mm-h2 .mm-header-inner {
	flex-wrap: wrap;
	row-gap: 0;
	align-items: center;
	padding-top: 14px;
	padding-bottom: 12px;
}

/* --- la rangee d'actions --- */
.mm-h2 .mm-actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
}

.mm-h2 .mm-actions > a,
.mm-h2 .mm-actions > button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	height: auto;
	padding: 11px 4px 12px;
	background: none;
	border: 0;
}

/* Les libelles : poses en CSS, donc aucun noeud ajoute au DOM et aucun lien
   supplementaire pour Google. ATTENTION : ne jamais ecrire ici le nom d'une
   classe qui sert de garde-fou "deja injecte" a un plugin a tampon de sortie
   (incident du 24/08 : citer la classe du coeur des favoris le faisait
   disparaitre de l'en-tete). On cible donc par aria-label, jamais par
   nom de classe. */
.mm-h2 .mm-actions > a::after,
.mm-h2 .mm-actions > button::after {
	font-family: 'Jost', Helvetica, Arial, sans-serif;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8b6b4a;
	line-height: 1;
	white-space: nowrap;
}

/* Ordre demande : Menu, Favoris, Panier, Compte, Tchat. On reordonne a
   l'affichage sans toucher au HTML. */
.mm-h2 .mm-actions > [aria-label="Menu"] { order: 1; }
.mm-h2 .mm-actions > [aria-label="Ma selection"] { order: 2; }
.mm-h2 .mm-actions > [aria-label="Panier"] { order: 3; }
.mm-h2 .mm-actions > [aria-label="Mon compte"] { order: 4; }
.mm-h2 .mm-actions > [aria-label="Discuter avec nous"] { order: 5; }

.mm-h2 .mm-actions > [aria-label="Ma selection"]::after { content: "Favoris"; }
.mm-h2 .mm-actions > [aria-label="Discuter avec nous"]::after { content: "Tchat"; }
.mm-h2 .mm-actions > [aria-label="Mon compte"]::after { content: "Compte"; }
.mm-h2 .mm-actions > [aria-label="Panier"]::after { content: "Panier"; }
.mm-h2 .mm-actions > [aria-label="Menu"]::after { content: "Menu"; }

/* Icones en bronze : contraste mesure a 4,9 sur blanc, la ou les dores
   clairs tombent a 2,2 — sous le seuil de lisibilite de 3. */
.mm-h2 .mm-actions svg {
	width: 20px;
	height: 20px;
	stroke: #8b6b4a;
	stroke-width: 1.5;
	fill: none;
}
.mm-h2 .mm-burger span { background: #8b6b4a; }

.mm-h2 .mm-actions [data-mm-wl-count],
.mm-h2 .mm-actions .mm-cart-badge {
	top: 4px;
	right: 50%;
	transform: translateX(20px);
}

/* --- champ de recherche : arrondi, filet dore, loupe posee sans pave --- */
.mm-h2 .mm-search-inline .dgwt-wcas-search-input {
	border-radius: 19px !important;
	border: 1px solid #c8a882 !important;
	background: #fff !important;
	height: 38px;
	padding-left: 16px !important;
	padding-right: 42px !important;
	font-size: 12px;
	letter-spacing: .03em;
	box-shadow: none !important;
}
.mm-h2 .mm-search-inline .dgwt-wcas-search-input:focus {
	border-color: #8b6b4a !important;
	outline: none;
}
/* Le bouton d'origine est un pave dore carre : on le rend transparent et on
   ne garde que la loupe, posee dans l'arrondi. */
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 40px;
	height: 38px;
	border-radius: 0 19px 19px 0 !important;
}
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit svg,
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit path {
	fill: #8b6b4a !important;
	stroke: none;
	opacity: 1;
}
/* Le pave dore n'etait pas sur le bouton mais sur le SVG lui-meme. */
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit svg {
	background: transparent !important;
	width: 16px;
	height: 16px;
}
.mm-h2 .mm-search-inline .dgwt-wcas-sf-wrapp { border-radius: 19px; }

/* La recherche est desormais visible en permanence dans l'en-tete : celle
   du tiroir du menu fait double emploi. Masquee et non supprimee du code,
   pour rester reversible d'une seule ligne. */
.mm-h2 #mm-drawer .mm-drawer-search { display: none !important; }
/* La "fleche noire" est l'indicateur de chargement du moteur de recherche,
   pose en dur a droite du champ. Il n'a aucune utilite visible ici. */
.mm-h2 .mm-search-inline .dgwt-wcas-preloader { display: none !important; }
/* Le petit trait sombre juste avant la loupe est un separateur decoratif
   que le moteur de recherche pose en ::before sur son bouton. */
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit::before,
.mm-h2 .mm-search-inline .dgwt-wcas-search-submit::after {
	content: none !important;
	display: none !important;
}
/* Le petit triangle noir dans le champ est une decoration native que les
   navigateurs ajoutent aux champs de type "search" (Chrome comme Safari).
   On la neutralise. */
.mm-h2 .mm-search-inline input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}
.mm-h2 .mm-search-inline input[type="search"]::-webkit-search-decoration,
.mm-h2 .mm-search-inline input[type="search"]::-webkit-search-cancel-button,
.mm-h2 .mm-search-inline input[type="search"]::-webkit-search-results-button,
.mm-h2 .mm-search-inline input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* ================= ORDINATEUR (option B) ================= */
@media (min-width: 1025px) {
	/* Le menu descend sur sa propre ligne : c'est ce qui libere la place
	   pour les libelles et pour une recherche de largeur normale. Il est
	   borde en haut ET en bas, sinon le filet du bas se perd contre la
	   barre beige (remarque d'Emilie, 24/08). */
	/* Le logo et les icones vont chercher les bords de l'ecran : sans cela
	   ils restent groupes au milieu sur un grand ecran, et l'en-tete a
	   l'air d'une bande etroite posee au centre. La marge laterale reprend
	   celle du bandeau promo (48 px), pour un alignement franc. */
	.mm-h2 .mm-header-inner {
		max-width: none;
		padding-left: 48px;
		padding-right: 48px;
	}

	/* Le menu, lui, reste centre a la largeur du site, avec ses filets qui
	   ne vont pas jusqu'aux bords (choix d'Emilie, 24/08). La rangee occupe
	   toute la ligne, mais les traits sont portes par la liste centree. */
	.mm-h2 .mm-header-inner > nav {
		order: 4;
		flex: 0 0 100%;
		width: 100%;
		margin: 13px 0 0;
		padding: 0;
		border: 0;
	}
	/* La liste du menu gardait la hauteur de 78 px prevue pour l'ancien
	   en-tete sur une seule ligne, plus 24 px de marge basse : la bande
	   faisait 122 px pour une seule ligne de texte. On la libere. */
	.mm-h2 .mm-header-inner > nav > ul {
		justify-content: center;
		width: 100%;
		max-width: 1432px;
		margin: 0 auto !important;
		padding: 9px 0;
		height: auto !important;
		align-items: center;
		border-top: 1px solid rgba(200, 168, 130, .55);
		border-bottom: 1px solid rgba(200, 168, 130, .55);
	}
	.mm-h2 .mm-header-inner > nav > ul > li { height: auto !important; }
	.mm-h2 .mm-header-inner > nav > ul > li > a {
		height: auto !important;
		line-height: 1.2;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.mm-h2 .mm-search-inline { flex: 0 1 300px; }

	.mm-h2 .mm-actions {
		margin-left: auto;
		grid-auto-columns: auto;
	}
	.mm-h2 .mm-actions > a,
	.mm-h2 .mm-actions > button { padding: 6px 15px; }

	.mm-h2 .mm-search-tablet-btn { display: none !important; }
}

/* ================= TABLETTE ET TELEPHONE ================= */
@media (max-width: 1024px) {
	/* La recherche existait deja dans le HTML, elle etait seulement masquee. */
	.mm-h2 .mm-search-inline {
		display: flex !important;
		flex: 1 1 auto;
		min-width: 0;
		order: 2;
	}
	.mm-h2 .mm-search-tablet-btn { display: none !important; }

	.mm-h2 .mm-logo { order: 1; flex: 0 0 auto; }

	/* Sur telephone le champ ne fait que 203 px : a 12 px le texte
	   "Rechercher des produits..." se coupait contre la loupe. */
	.mm-h2 .mm-search-inline .dgwt-wcas-search-input {
		font-size: 11px;
		letter-spacing: 0;
		padding-left: 14px !important;
	}

	/* La rangee prend toute la largeur, sur sa propre ligne, avec de l'air
	   au-dessus et en dessous pour que ses deux filets se voient. */
	.mm-h2 .mm-actions {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		margin: 13px 0 0;
		border-top: 1px solid rgba(200, 168, 130, .6);
		border-bottom: 1px solid rgba(200, 168, 130, .6);
	}

	/* Les filets verticaux entre chaque action : de courtes separations
	   centrees, qui ne touchent NI le trait du haut NI celui du bas. On
	   les pose sur chaque tuile puis on les retire sur celle placee en
	   premier — plutot que d'utiliser le selecteur "+", qui comptait le
	   bouton de recherche masque et dessinait un trait avant la premiere
	   tuile visible. */
	.mm-h2 .mm-actions > a::before,
	.mm-h2 .mm-actions > button::before {
		content: "";
		position: absolute;
		left: 0;
		top: 27%;
		height: 46%;
		width: 1px;
		background: rgba(200, 168, 130, .55);
	}
	.mm-h2 .mm-actions > [aria-label="Menu"]::before { display: none; }
}