/* MELIMEL HOME — En-tete des pages marques.
   Geometrie reprise a l'identique du gabarit des pages categories (mm-cat-modele.css),
   avec le fond sombre des pages marques, en pleine largeur.
   Portee : body.mm-marque-v1. */

body.mm-marque-v1{
	--mmm-char:#2c2925; --mmm-clay:#c8a882; --mmm-warm:#fdfaf6;
	--mmm-accent:#8b6b4a; --mmm-mid:#6b5f52;
	--mmm-clair:rgba(253,250,246,.78); --mmm-imgbg:#231f1c;
	--mmm-max:1560px;
}

/* ---- Bandeau sombre, pleine largeur ---- */
body.mm-marque-v1 .mmm-bande{background:var(--mmm-char);width:100%;box-sizing:border-box}

/* ---- Grille de l'en-tete : identique aux pages categories ---- */
body.mm-marque-v1 .mmm-hero{
	display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
	background:transparent;box-sizing:border-box;
	max-width:var(--mmm-max);margin:0 auto;padding:0 40px;
}
body.mm-marque-v1 .mmm-hero-txt{
	padding:30px 44px 30px 0;display:flex;flex-direction:column;justify-content:center;
}
body.mm-marque-v1 .mmm-img{
	position:relative;background:var(--mmm-imgbg);overflow:hidden;
	margin:30px 0;height:430px;border-radius:18px;
	box-shadow:0 14px 34px rgba(0,0,0,.28);
}
body.mm-marque-v1 .mmm-img .mmm-photo{
	position:absolute;top:0;left:0;width:100%;height:100%;
	object-fit:cover;object-position:50% 50%;display:block;margin:0;border-radius:17px;
}

/* ---- Variante : bordure doree delicate autour de l'image ---- */
body.mm-marque-v1.mmm-bordure-or .mmm-img{
	border:1px solid rgba(200,168,130,.55);
	box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(200,168,130,.12);
}

/* ---- Contenu ---- */
body.mm-marque-v1 .mmm-sur{
	font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.09em;
	text-transform:uppercase;color:var(--mmm-clay);font-weight:300;
}
body.mm-marque-v1 .mmm-h1{
	font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
	font-size:clamp(33px,3.5vw,46px);line-height:1.1;margin:14px 0 0;color:#fff;
}
body.mm-marque-v1 .mmm-h1 em{font-style:italic;color:var(--mmm-clay)}
body.mm-marque-v1 .mmm-filet{width:54px;height:1px;background:var(--mmm-clay);margin:18px 0}
body.mm-marque-v1 .mmm-chapo{
	font-family:'Jost',sans-serif;font-weight:300;line-height:1.8;
	color:var(--mmm-clair);font-size:15px;max-width:60ch;margin:0;
}
body.mm-marque-v1 .mmm-chapo strong{font-weight:400;color:#fff}

/* ---- Reperes de confiance ---- */
body.mm-marque-v1 .mmm-reperes{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
body.mm-marque-v1 .mmm-repere{
	display:inline-flex;align-items:center;gap:7px;
	font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.06em;
	color:var(--mmm-clair);border:1px solid rgba(200,168,130,.32);
	border-radius:999px;padding:7px 14px;white-space:nowrap;
}
body.mm-marque-v1 .mmm-repere svg{flex:0 0 auto;color:var(--mmm-clay)}
body.mm-marque-v1 .mmm-repere--neuf{border-color:var(--mmm-clay);color:#fff}

/* ---- Points de rupture : memes valeurs que les pages categories ---- */
@media(max-width:1440px){
	body.mm-marque-v1 .mmm-img{height:400px;margin:26px 0}
	body.mm-marque-v1 .mmm-hero-txt{padding:26px 36px 26px 0}
	body.mm-marque-v1 .mmm-hero{padding:0 32px}
}
@media(max-width:1280px){
	body.mm-marque-v1 .mmm-hero{grid-template-columns:1.1fr .9fr}
	body.mm-marque-v1 .mmm-img{height:370px}
}
@media(max-width:1024px){
	body.mm-marque-v1 .mmm-hero{grid-template-columns:1fr;padding:0 28px}
	body.mm-marque-v1 .mmm-img{order:-1;height:340px;margin:22px 0 4px}
	body.mm-marque-v1 .mmm-hero-txt{padding:18px 0 26px}
}
@media(max-width:768px){
	body.mm-marque-v1 .mmm-hero{padding:0 24px}
	body.mm-marque-v1 .mmm-img{height:330px;max-height:44vh;border-radius:16px;margin:18px 0 4px}
	body.mm-marque-v1 .mmm-img .mmm-photo{border-radius:15px}
	body.mm-marque-v1 .mmm-chapo{font-size:14px}
}
@media(max-width:600px){
	body.mm-marque-v1 .mmm-hero{padding:0 16px}
	body.mm-marque-v1 .mmm-img{height:320px;max-height:42vh;margin:16px 0 4px}
	body.mm-marque-v1 .mmm-hero-txt{padding:16px 0 24px}
	body.mm-marque-v1 .mmm-repere{font-size:10.5px;padding:6px 12px}
}
@media(max-width:380px){
	body.mm-marque-v1 .mmm-img{height:280px}
	body.mm-marque-v1 .mmm-reperes{gap:6px}
}

/* ---- Emporte sur le CSS de la page, qui cible les liens par identifiant ---- */
#mm-entete-marque .mmm-chapo a{color:var(--mmm-clay);text-decoration:none;border-bottom:1px solid rgba(200,168,130,.45)}
#mm-entete-marque .mmm-chapo a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- Fil d'Ariane remonte en haut, sur le fond de l'en-tete ----------
 * Typographie reprise des pages categories : 11 px, majuscules, interlettrage
 * large, separateurs dores. Le fond suit celui de l'en-tete : creme ou noir. */
.mmm-filbar{width:100%;box-sizing:border-box}
.mmm-filbar--clair{background:#fdfaf6}
.mmm-filbar--sombre{background:#2c2925}
.mmm-filbar .mmm-filbar-in{
	max-width:1560px;margin:0 auto;padding:16px 40px 2px;box-sizing:border-box;
	font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.09em;
	text-transform:uppercase;font-weight:300;line-height:1.5;
}
.mmm-filbar .mmm-filbar-in a{text-decoration:none;color:inherit}
.mmm-filbar .mmm-filbar-in span{margin:0 7px;color:#c8a882}
.mmm-filbar--clair .mmm-filbar-in{color:#6b5f52}
.mmm-filbar--clair .mmm-filbar-in a:hover{color:#8b6b4a}
.mmm-filbar--sombre .mmm-filbar-in{color:rgba(253,250,246,.72)}
.mmm-filbar--sombre .mmm-filbar-in a:hover{color:#c8a882}
#mm-entete-marque + *{margin-top:0}

/* la barre sombre se colle a l'en-tete sombre : pas de couture */
.mmm-filbar--sombre + #mm-entete-marque .mmm-hero{padding-top:0}

@media(max-width:1440px){ .mmm-filbar .mmm-filbar-in{padding:14px 32px 2px} }
@media(max-width:1024px){ .mmm-filbar .mmm-filbar-in{padding:12px 28px 2px} }
@media(max-width:768px){  .mmm-filbar .mmm-filbar-in{padding:12px 24px 2px;font-size:10.5px} }
@media(max-width:600px){  .mmm-filbar .mmm-filbar-in{padding:10px 16px 2px} }

/* ---------- Air sous la photo, et hauteur alignee sur les pages categories ----------
 * Sur ordinateur, les cartes photo restent la reference sous l'en-tete ; le
 * bandeau sombre garde malgre tout la respiration qu'occupent les pastilles
 * sur une page categorie, pour que les deux familles aient la meme hauteur. */
/* Le noir doit respirer autant au-dessus qu'au-dessous de la photo.
   Au-dessus : barre du fil d'Ariane (35 px) + marge haute de l'image (30 px) = 65 px.
   Au-dessous : marge basse de l'image (30 px) + ce calage (35 px) = 65 px. */
body.mm-marque-v1 .mmm-bande{padding-bottom:35px}
@media(max-width:1440px){ body.mm-marque-v1 .mmm-bande{padding-bottom:33px} }
@media(max-width:1280px){ body.mm-marque-v1 .mmm-bande{padding-bottom:33px} }

/* ---------- Pastilles : mobile et tablette seulement ---------- */
body.mm-marque-v1 .mmm-past{display:none}
body.mm-marque-v1 .mmm-past a{
	background:#fff;border:1px solid var(--mmm-clay);border-radius:999px;
	padding:9px 18px;font-family:'Jost',sans-serif;font-size:13px;font-weight:300;
	color:var(--mmm-char);text-decoration:none;white-space:nowrap;
	transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
body.mm-marque-v1 .mmm-past a:hover{
	border-color:var(--mmm-accent);
	box-shadow:0 0 0 1px rgba(139,107,74,.45),0 6px 16px rgba(0,0,0,.25);
	transform:translateY(-2px);
}
#mm-entete-marque .mmm-past a{color:var(--mmm-char);text-decoration:none}

@media(max-width:1024px){
	/* Les boutons vivent dans le bandeau sombre, en version sombre bordee d'or. */
	body.mm-marque-v1 .mmm-bande{padding-bottom:4px}
	body.mm-marque-v1 .mmm-past{
		display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
		background:transparent;width:100%;
		max-width:1560px;margin:0 auto;padding:4px 28px 28px;box-sizing:border-box;
	}
	body.mm-marque-v1 .mmm-past a,
	#mm-entete-marque .mmm-past a{
		background:transparent;border:1px solid rgba(200,168,130,.55);
		color:var(--mmm-clair);
	}
	body.mm-marque-v1 .mmm-past a:hover,
	#mm-entete-marque .mmm-past a:hover{
		background:transparent;border-color:var(--mmm-clay);color:#fff;
		box-shadow:none;transform:translateY(-1px);
	}
	/* Les cinq reperes cedent la place a la ligne unique. */
	body.mm-marque-v1 .mmm-reperes{display:none}
	body.mm-marque-v1 .mmm-ligne{
		display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
		margin:22px 0 2px;padding:11px 0;
		border-top:1px solid rgba(200,168,130,.45);
		border-bottom:1px solid rgba(200,168,130,.45);
		font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.08em;
		text-transform:uppercase;font-weight:300;color:var(--mmm-clair);
		text-align:center;line-height:1.5;
	}
	body.mm-marque-v1 .mmm-tiret{
		display:inline-block;width:16px;height:1px;background:var(--mmm-clay);flex:0 0 auto;
	}
	/* les cartes photo cedent la place aux pastilles */
	body.mm-marque-v1 .mmm-cartes{display:none !important}
}
@media(max-width:768px){
	body.mm-marque-v1 .mmm-past{padding:4px 24px 26px;gap:8px}
}
@media(max-width:600px){
	body.mm-marque-v1 .mmm-past{padding:4px 16px 26px}
	body.mm-marque-v1 .mmm-past a{font-size:12.5px;padding:8px 14px}
}

/* ---------- Le petit encart sous l'en-tete : texte centre en hauteur ----------
 * La marge basse du paragraphe, heritee du theme, decalait le bloc vers le
 * haut malgre un centrage declare. */
body.mm-marque-v1 .catalog-notice p{margin-bottom:0}
body.mm-marque-v1 .catalog-notice p:last-child{margin-bottom:0}

/* ---------- Texte d'en-tete replie sur mobile ----------
 * Trois lignes visibles, le reste se deplie sur place. Sur ordinateur le
 * texte reste entier et le bouton n'existe pas. */
@media(min-width:1025px){
	body.mm-marque-v1 .mmm-plus{display:none}
	body.mm-marque-v1 .mmm-ligne{display:none}
}
@media(max-width:1024px){
	body.mm-marque-v1 .mmm-chapo{
		display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
		overflow:hidden;
	}
	body.mm-marque-v1 .mmm-chapo.mmm-ouvert{display:block;-webkit-line-clamp:unset;overflow:visible}
	body.mm-marque-v1 .mmm-plus{
		display:inline-block;margin-top:12px;align-self:flex-start;
		background:transparent;border:0;border-bottom:1px solid rgba(200,168,130,.55);
		color:var(--mmm-clay);font-family:'Jost',sans-serif;font-size:12px;
		letter-spacing:.1em;text-transform:uppercase;padding:0 0 3px;cursor:pointer;
	}
	body.mm-marque-v1 .mmm-plus:hover{color:#fff;border-bottom-color:#fff}
}

/* ---------- Pages sans cartes photo : les pastilles servent sur tous les ecrans ---------- */
body.mm-marque-v1 .mmm-past--toujours{
	display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
	background:transparent;max-width:1560px;margin:0 auto;
	padding:4px 40px 30px;box-sizing:border-box;
}
body.mm-marque-v1 .mmm-past--toujours a{
	background:transparent;border:1px solid rgba(200,168,130,.55);
	border-radius:999px;padding:9px 18px;
	font-family:'Jost',sans-serif;font-size:13px;font-weight:300;
	color:var(--mmm-clair);text-decoration:none;white-space:nowrap;
	transition:border-color .25s ease,color .25s ease,transform .25s ease;
}
body.mm-marque-v1 .mmm-past--toujours a:hover{
	border-color:var(--mmm-clay);color:#fff;transform:translateY(-1px);
}
body.mm-marque-v1 .mmm-past--toujours a.mmm-actif{
	border-color:var(--mmm-clay);color:#fff;background:rgba(200,168,130,.12);
}
#mm-entete-marque .mmm-past--toujours a{color:var(--mmm-clair);text-decoration:none}
#mm-entete-marque .mmm-past--toujours a.mmm-actif{color:#fff}

/* Quand les pastilles occupent deja le bas du bandeau, le calage disparait. */
body.mm-marque-v1 .mmm-bande:has(.mmm-past--toujours){padding-bottom:0}

@media(max-width:1024px){
	body.mm-marque-v1 .mmm-past--toujours{padding:4px 28px 28px}
}
@media(max-width:768px){
	body.mm-marque-v1 .mmm-past--toujours{padding:4px 24px 26px;gap:8px}
}
@media(max-width:600px){
	body.mm-marque-v1 .mmm-past--toujours{padding:4px 16px 26px}
	body.mm-marque-v1 .mmm-past--toujours a{font-size:12.5px;padding:8px 14px}
}

/* ---------- Le meme lisere dore autour de la photo des pages categories ----------
 * Pose depuis cette feuille plutot que dans mm-cat-modele.css, pour garder
 * le reglage de la bordure sur un seul interrupteur (option mm_marque_bordure).
 * Deux classes sur le body : passe devant la regle du gabarit categorie. */
body.mm-cat-v1.mmm-bordure-or .mmc-img{
	border:1px solid rgba(200,168,130,.55);
	box-shadow:0 14px 34px rgba(44,41,37,.10),0 0 0 1px rgba(200,168,130,.10);
}

/* ---------- Grille produits des pages marques : meme cadrage que les categories ----------
 * Mesure du 21/09 a 1700 px : pages categories 95 px des bords, pages marques
 * 40 px (Richmond) ou 150 px (conteneur boxe). On aligne tout sur 95 px. */
body.mm-marque-gabarit .elementor-widget-woocommerce-products{width:100%;max-width:none}
body.mm-marque-gabarit .elementor-widget-woocommerce-products > .elementor-widget-container{width:100%;max-width:none}
body.mm-marque-gabarit .elementor-widget-woocommerce-products .woocommerce{
	max-width:1560px;margin-left:auto;margin-right:auto;
}
@media(min-width:1281px){
	body.mm-marque-gabarit .elementor-widget-woocommerce-products .woocommerce{
		max-width:none !important;padding-left:95px !important;padding-right:95px !important;margin-left:0 !important;margin-right:0 !important;
	}
}

/* Paliers intermediaires : memes colonnes et memes marges que les pages
   categories (mesure du 21/09 sur /canape/ : 3 colonnes et 40 px a 1100). */
/* Quatre colonnes partout au-dessus de 1280 px, comme sur les pages
   categories — certaines pages etaient reglees sur 5. */
body.mm-marque-gabarit ul.products.elementor-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media(max-width:1280px){
	body.mm-marque-gabarit .elementor-widget-woocommerce-products .woocommerce{
		padding-left:40px !important;padding-right:40px !important;
	}
	body.mm-marque-gabarit ul.products.elementor-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:900px){
	body.mm-marque-gabarit ul.products.elementor-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
	body.mm-marque-gabarit .elementor-widget-woocommerce-products .woocommerce{
		padding-left:16px !important;padding-right:16px !important;
	}
}