/* ==========================================================================
   MR Horeca — compléments
   Uniquement ce que theme.json ne peut pas exprimer : grilles, en-tête,
   montages de bannières, densité commerciale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête
   -------------------------------------------------------------------------- */
.mrh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mrh-header-rangee {
	gap: clamp(0.75rem, 2vw, 2rem);
	align-items: center;
}

.mrh-logo {
	margin: 0;
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 900;
	letter-spacing: 0.045em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	flex: 0 0 auto;
}

.mrh-logo a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.mrh-logo a:hover { color: var(--wp--preset--color--accent); }

/* La recherche occupe tout l'espace disponible : c'est le point d'entrée
   principal d'un catalogue de plusieurs centaines de références. */
.mrh-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 680px;
}

.mrh-search .wc-block-product-search__fields,
.mrh-search .wp-block-search__inside-wrapper {
	display: flex;
	width: 100%;
}

/* Hauteur alignée sur celle du compte et du panier : 46 px partout. */
.mrh-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--line);
	border-right: 0;
	border-radius: 3px 0 0 3px;
	padding: 0 0.9rem;
	font-size: 0.95rem;
	height: 46px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.mrh-search input[type="search"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.mrh-search button[type="submit"],
.wc-block-product-search__button {
	min-width: 52px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0 3px 3px 0;
	background: var(--wp--preset--color--accent);
	color: #fff;
	cursor: pointer;
}

.wc-block-product-search__button:hover { background: var(--wp--preset--color--accent-dark); }
.wc-block-product-search__button svg { fill: currentColor; }

/* Le libellé « Recherche » est retiré visuellement mais reste annoncé aux
   lecteurs d'écran : le champ garde son étiquette accessible. */
.mrh-search label,
.mrh-search .wc-block-product-search__label,
.mrh-search .wp-block-search__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mrh-header-actions {
	gap: 0.5rem;
	flex: 0 0 auto;
	align-items: center;
	height: 46px;
}

/* Compte et panier partagent la hauteur du champ de recherche. */
.mrh-header-actions > * {
	display: flex;
	align-items: center;
	height: 46px;
	margin: 0;
}

.mrh-header-actions a,
.mrh-header-actions button {
	min-height: 46px;
	min-width: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 0 0.6rem;
	border-radius: 3px;
	background: none;
	border: 0;
}

.mrh-header-actions a:hover,
.mrh-header-actions button:hover {
	color: var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--surface);
}

/* Icônes de compte et de panier à taille lisible et alignées. */
.mrh-header-actions svg {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

.mrh-header-actions .wc-block-mini-cart__badge {
	font-size: 0.78rem;
	font-weight: 700;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

/* Bloc « Mon compte » : le lien porte l'icône et le libellé. */
.mrh-header-actions .wp-block-woocommerce-customer-account { display: flex; align-items: center; }

.mrh-header-actions .wc-block-customer-account__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 46px;
	padding: 0 0.6rem;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.mrh-header-actions .wc-block-customer-account__account-icon {
	width: 26px;
	height: 26px;
	color: currentColor;
}

/* Sur écran étroit, seules les icônes restent. */
@media (max-width: 900px) {
	.mrh-header-actions .wc-block-customer-account__link { font-size: 0; gap: 0; }
	.mrh-header-actions .wc-block-customer-account__account-icon { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   2. Barre de navigation anthracite
   -------------------------------------------------------------------------- */
.mrh-navbar { padding-top: 0; padding-bottom: 0; }

.mrh-navbar .wp-block-navigation {
	font-size: 0.92rem;
	font-weight: 600;
	gap: 0;
}

/* Le texte doit rester blanc sur l'aplat anthracite. Les règles de couleur des
   blocs WordPress arrivent après cette feuille dans la cascade : on remonte la
   spécificité plutôt que de recourir à !important. */
.mrh-navbar .wp-block-navigation .wp-block-navigation-item__content,
.mrh-navbar .wp-block-navigation .wp-block-navigation-item__content:visited,
.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: #fff;
	fill: #fff;
	text-decoration: none;
	padding: 0.8rem 0.85rem;
	display: flex;
	align-items: center;
	min-height: 46px;
	white-space: nowrap;
	letter-spacing: 0.005em;
}

.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-icon {
	padding: 0;
	min-height: 0;
	display: inline-flex;
}

/* Survol, focus et élément actif : turquoise. */
.mrh-navbar .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.mrh-navbar .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.mrh-navbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.mrh-navbar .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* WordPress recopie les classes de couleur du bloc Navigation sur le
   conteneur de sous-menu (has-anthracite-background-color, has-base-color) et
   génère ces classes de préréglage avec !important. Sans le même !important,
   le sous-menu restait anthracite alors que son texte passait en anthracite
   lui aussi : illisible. C'est le second et dernier !important de la feuille. */
/* Panneau blanc uniquement sur poste fixe : dans le tiroir mobile, les
   sous-menus s'affichent en ligne et doivent rester anthracite comme le reste
   du tiroir, sinon des blocs blancs viennent trouer le panneau. */
@media (min-width: 782px) {
	.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: #fff !important;
		color: var(--wp--preset--color--contrast) !important;
		border: 1px solid var(--wp--preset--color--line);
		border-top: 3px solid var(--wp--preset--color--accent);
		box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
		padding: 0.4rem 0;
		min-width: 320px;
		max-width: 420px;
		z-index: 120;
	}
}

/* Dans le sous-menu, le fond redevient blanc : le texte repasse en anthracite. */
@media (min-width: 782px) {
	.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
		color: var(--wp--preset--color--contrast) !important;
	}
}

.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
	min-height: 44px;
	font-weight: 500;
	white-space: normal;
	line-height: 1.3;
}

/* Dans le tiroir mobile : sous-menus légèrement en retrait, texte blanc. */
@media (max-width: 781px) {
	.mrh-navbar .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		padding-left: 0.9rem;
		border-left: 2px solid rgb(255 255 255 / 22%);
	}
}

.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.mrh-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-dark);
}

.mrh-navbar .wp-block-navigation__responsive-container-open,
.mrh-navbar .wp-block-navigation__responsive-container-close {
	color: #fff;
	min-width: 44px;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   3. Bandeau de réassurance
   -------------------------------------------------------------------------- */
.mrh-reassurance p { margin: 0; }
.mrh-reassurance-points { gap: 1.5rem; }
.mrh-reassurance-liens { gap: 1.1rem; }

.mrh-reassurance-points p::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	vertical-align: middle;
}

.mrh-reassurance-liens a {
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (max-width: 781px) {
	/* Sélecteur renforcé : la classe de mise en page des blocs WordPress
	   (.is-layout-flex) impose display:flex avec la même spécificité et
	   arrive après cette feuille dans la cascade. */
	.mrh-reassurance .mrh-reassurance-liens.wp-block-group { display: none; }
	.mrh-reassurance-points { gap: 0.9rem; font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   4. Bannières — montages de produits sur aplats
   -------------------------------------------------------------------------- */
.mrh-bannieres-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.95rem;
}

/* Grille interne : le texte et les images occupent deux colonnes distinctes.
   Aucun positionnement absolu — c'est lui qui faisait passer les visuels
   par-dessus les titres. */
.mrh-banniere {
	display: grid;
	grid-template-columns: 42% 58%;
	align-items: center;
	gap: 1rem;
	border-radius: 4px;
	padding: 1.5rem;
	min-height: 250px;
	overflow: hidden;
}

.mrh-banniere-visuels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

/* Vignette blanche pleine, sans fusion de calques : le mix-blend-mode
   assombrissait les produits jusqu'à les confondre avec l'aplat turquoise. */
.mrh-banniere-visuels .mrh-visuel {
	width: 100%;
	height: auto;
	max-height: 168px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
	padding: 7px;
	box-shadow: 0 3px 12px rgb(0 0 0 / 18%);
}

.mrh-banniere-texte { min-width: 0; }

.mrh-banniere-texte h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.2rem, 1.5vw, 1.6rem);
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.mrh-banniere-texte p {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.42;
	color: #fff;
	opacity: 0.96;
}

.mrh-banniere-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 3px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--wp--preset--color--accent);
	color: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}

.mrh-banniere-btn:hover { background: var(--wp--preset--color--accent-dark); color: #fff; text-decoration: none; }

.mrh-banniere-btn--inverse { background: #fff; color: var(--wp--preset--color--contrast); }
.mrh-banniere-btn--inverse:hover { background: var(--wp--preset--color--contrast); color: #fff; }

/* Réduction progressive du nombre de visuels quand la largeur manque. */
@media (max-width: 1279px) {
	.mrh-banniere-visuels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mrh-banniere-visuels .mrh-visuel--3 { display: none; }
}

@media (max-width: 1023px) {
	.mrh-bannieres-grille { grid-template-columns: 1fr; }
	.mrh-banniere-visuels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mrh-banniere-visuels .mrh-visuel--3 { display: block; }
}

@media (max-width: 600px) {
	.mrh-banniere { grid-template-columns: 1fr; min-height: 0; padding: 1.15rem; }
	.mrh-banniere-visuels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mrh-banniere-visuels .mrh-visuel--3 { display: none; }
	.mrh-banniere-visuels .mrh-visuel { max-height: 120px; }
}

.mrh-banniere--anthracite { background: var(--wp--preset--color--anthracite); }
.mrh-banniere--turquoise { background: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   5. Cartes de catégories
   -------------------------------------------------------------------------- */
.mrh-cat-rangee {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.6rem;
}

.mrh-cat-carte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	min-height: 44px;
}

.mrh-cat-carte:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 3px 12px rgb(0 0 0 / 8%);
	text-decoration: none;
}

.mrh-cat-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--surface);
	border-radius: 3px;
	overflow: hidden;
}

.mrh-cat-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.mrh-cat-nom {
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.25;
}

@media (max-width: 1099px) {
	.mrh-cat-rangee { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	/* Défilement horizontal propre plutôt qu'une grille écrasée. */
	.mrh-cat-rangee {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
	}
	.mrh-cat-carte { flex: 0 0 40vw; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   6. Cartes produit
   -------------------------------------------------------------------------- */
/* Cinq colonnes : chaque rangée contient exactement cinq produits, et une
   carte de ~260 px laisse la place à un texte réellement lisible. */
.mrh-produits .wc-block-product-template,
.mrh-produits .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.85rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch;
}

.mrh-produits .wc-block-product,
.mrh-produits .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 0.85rem;
	background: var(--wp--preset--color--base);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin: 0;
	height: 100%;
}

.mrh-produits .wc-block-product:hover,
.mrh-produits .wp-block-post:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 3px 12px rgb(0 0 0 / 8%);
}

/* Cadre d'image de hauteur fixe, fond très clair, produit centré et entier.
   L'image n'est jamais agrandie au-delà de sa taille naturelle : max-width et
   max-height plafonnent, width/height auto préservent le ratio. */
.mrh-produits .mrh-carte-img,
.mrh-produits .wc-block-components-product-image {
	background: #FAFBFC;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	margin-bottom: 0.5rem;
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}

/* WooCommerce écrit style="object-fit:cover" DIRECTEMENT sur la balise img.
   Un style en ligne l'emporte sur n'importe quel sélecteur : !important est
   ici le seul moyen de rendre le produit entier plutôt que rogné.
   C'est l'unique !important de cette feuille, et il est justifié. */
.mrh-produits .wc-block-components-product-image img,
.mrh-produits .wc-block-components-product-image a img,
.mrh-produits .mrh-carte-img img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block;
	margin: 0 auto;
	padding: 0;
}

/* Le lien qui enveloppe l'image ne doit pas casser le centrage. */
.mrh-produits .wc-block-components-product-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

@media (max-width: 640px) {
	.mrh-produits .mrh-carte-img,
	.mrh-produits .wc-block-components-product-image { height: 150px; }
}

.mrh-carte-marque {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
}

/* Hauteur fixe : sans elle, prix, disponibilité et lien se décalent d'une
   carte à l'autre selon la longueur du titre. */
.mrh-produits .mrh-carte-titre,
.mrh-produits .wp-block-post-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.32;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: calc(3 * 1.32em);
}

.mrh-produits .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mrh-produits .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-dark); }

/* La carte entière devient cliquable ; « Voir le produit » reste un lien
   distinct, au-dessus de cette surface. */
.mrh-produits .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
}

.mrh-produits .wc-block-components-product-sku,
.mrh-produits .wp-block-woocommerce-product-sku {
	margin: 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--contrast-soft);
}

.mrh-carte-prix,
.mrh-produits .wc-block-components-product-price {
	margin: 0.25rem 0 0;
	font-size: 1.22rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

/* Affichage fiscal — voir mr_horeca_suffixe_prix() dans functions.php.
   Le prix principal est HTVA ; le rappel TVAC passe à la ligne, plus petit et
   moins appuyé, pour rester lisible sans concurrencer le montant de référence.
   Ces règles valent partout où WooCommerce rend get_price_html() : cartes,
   boutique, catégories, recherche et fiche produit. */
/* Le plancher en pixels est indispensable : le prix descend à 1,05 rem sur les
   cartes en deux colonnes, où un simple rapport em ramènerait le rappel TVAC
   à 10 px — sous le seuil de lisibilité. */
.mrh-htva {
	margin-left: 0.3rem;
	font-size: max(11px, 0.62em);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast-soft);
	white-space: nowrap;
}

.mrh-tvac {
	display: block;
	margin-top: 0.1rem;
	font-size: max(11px, 0.6em);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-soft);
	white-space: nowrap;
}

/* ── Page Livraison ───────────────────────────────────────────────────────
   Le tableau tarifaire doit rester lisible d'un coup d'œil sur ordinateur et
   se replier proprement sur mobile : chaque cellule y reprend son intitulé
   via data-libelle, plutôt qu'un défilement horizontal qui masquerait la
   colonne des prix. */
/* La mise en page contrainte de WordPress centre tout enfant plus étroit que
   la largeur de contenu, et le fait avec « margin-left: auto !important ».
   Sans !important de notre côté, l'introduction, la note et le tableau se
   décaleraient au milieu, désalignés du titre et des autres sections.
   Troisième et dernier emploi justifié de !important dans cette feuille. */
.mrh-liv-intro,
.mrh-liv-note,
.mrh-liv-zone,
.mrh-liv-tableau {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Périmètre géographique : une information de cadrage, pas un avertissement.
   Discrète mais nette, au-dessus du tableau. */
.mrh-liv-zone {
	max-width: 62ch;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 0 4px 4px 0;
	font-size: 0.94rem;
}

.mrh-liv-intro {
	font-size: 1.08rem;
	color: var(--wp--preset--color--contrast-soft);
	max-width: 60ch;
}

/* Trois colonnes de chiffres étalées sur 1 400 px seraient illisibles :
   l'œil perdrait la ligne entre le poids et son tarif. */
.mrh-liv-tableau {
	max-width: 46rem;
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 5px;
	overflow: hidden;
}

/* Six colonnes au lieu de trois : la grille par pays a besoin de place.
   Déclarée après la règle générale, dont elle partage la spécificité. */
.mrh-liv-tableau.mrh-liv-tableau--large { max-width: 62rem; }

.mrh-liv-tableau table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.mrh-liv-tableau thead th {
	background: var(--wp--preset--color--anthracite);
	color: var(--wp--preset--color--base);
	text-align: left;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.7rem 0.9rem;
	white-space: nowrap;
}

.mrh-liv-tableau thead th:not(:first-child),
.mrh-liv-tableau td { text-align: right; }

.mrh-liv-tableau th[scope="row"] {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
}

.mrh-liv-tableau tbody th,
.mrh-liv-tableau tbody td {
	padding: 0.62rem 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
	/* Les colonnes de montants s'alignent au chiffre près. */
	font-variant-numeric: tabular-nums;
}

.mrh-liv-tableau tbody tr:nth-child(even) { background: var(--wp--preset--color--surface); }
.mrh-liv-tableau tbody tr:hover { background: var(--wp--preset--color--surface); }

.mrh-liv-tableau .mrh-liv-devis td,
.mrh-liv-tableau .mrh-liv-devis th {
	background: var(--wp--preset--color--accent-wash, #E4F2F2);
	color: var(--wp--preset--color--accent-dark);
	font-weight: 700;
}

.mrh-liv-note {
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast-soft);
	max-width: 62ch;
}

/* Étapes : la numérotation porte une information — c'est une séquence. */
.mrh-liv-etapes {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.9rem;
}

.mrh-liv-etapes li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}

.mrh-liv-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mrh-liv-corps { display: flex; flex-direction: column; gap: 0.18rem; }
.mrh-liv-corps strong { font-size: 0.96rem; }
.mrh-liv-corps span { font-size: 0.88rem; color: var(--wp--preset--color--contrast-soft); }

.mrh-liv-encadre {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 5px 5px 0;
}

.mrh-liv-encadre h2 { margin-top: 0; }

@media (max-width: 640px) {
	/* En dessous de 640 px, trois colonnes de chiffres deviennent illisibles :
	   chaque ligne devient un bloc et reprend ses intitulés. */
	.mrh-liv-tableau { border: none; border-radius: 0; }
	.mrh-liv-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mrh-liv-tableau tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.15rem 0.8rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 4px;
		padding: 0.6rem 0.8rem;
		margin-bottom: 0.5rem;
		background: var(--wp--preset--color--base);
	}
	.mrh-liv-tableau tbody tr:nth-child(even) { background: var(--wp--preset--color--base); }
	.mrh-liv-tableau tbody th,
	.mrh-liv-tableau tbody td { border: none; padding: 0; }
	.mrh-liv-tableau tbody th[scope="row"] {
		grid-column: 1 / -1;
		font-size: 1rem;
		padding-bottom: 0.3rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
		margin-bottom: 0.3rem;
	}
	.mrh-liv-tableau tbody td::before {
		content: attr(data-libelle);
		float: left;
		font-size: 0.8rem;
		color: var(--wp--preset--color--contrast-soft);
		font-weight: 600;
	}
	.mrh-liv-tableau tbody td { grid-column: 1 / -1; text-align: right; }
	.mrh-liv-etapes { grid-template-columns: 1fr; }
}

/* ── Documentation technique ──────────────────────────────────────────────
   Section rendue par inc/documentation.php. Elle n'existe dans le DOM que
   si le produit possède au moins un document : aucune règle ici n'a besoin
   de gérer un cas vide. */
.mrh-doc {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}

.mrh-doc-titre {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mrh-doc-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 0.6rem;
}

.mrh-doc-item { margin: 0; }

.mrh-doc-lien {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mrh-doc-lien:hover,
.mrh-doc-lien:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}

/* Flèche de téléchargement dessinée en CSS : pas de fichier à charger,
   pas d'émoji dont le rendu varie d'un système à l'autre. */
.mrh-doc-icone {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	position: relative;
	border-bottom: 2px solid var(--wp--preset--color--accent-dark);
}

.mrh-doc-icone::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 1px;
	width: 2px;
	height: 10px;
	background: var(--wp--preset--color--accent-dark);
}

.mrh-doc-icone::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wp--preset--color--accent-dark);
	border-bottom: 2px solid var(--wp--preset--color--accent-dark);
	transform: rotate(45deg);
}

.mrh-doc-texte { display: flex; flex-direction: column; min-width: 0; }

.mrh-doc-nom {
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.3;
}

.mrh-doc-meta {
	font-size: 0.78rem;
	color: var(--wp--preset--color--contrast-soft);
	margin-top: 0.1rem;
}

/* Mention légale sous les documents en langue étrangère. Discrète, mais
   jamais masquée : elle dit ce que le document est réellement. */
.mrh-doc-mention {
	margin: 0.25rem 0 0 2.35rem;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-soft);
}

.mrh-doc-energie {
	margin-top: var(--wp--preset--spacing--50);
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
}

.mrh-doc-etiquette {
	max-width: 150px;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
}

.mrh-doc-energie-legende {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-soft);
	max-width: 34ch;
}

@media (max-width: 640px) {
	.mrh-doc-liste { grid-template-columns: 1fr; }
	.mrh-doc-nom { font-size: 0.9rem; }
}

/* Panier — la ligne « Sous-total » ajoutée par panier-sous-total.js est
   annexée après les lignes du contenu enregistré. On rétablit l'ordre de
   lecture attendu : sous-total, puis TVA, puis total. */
.wp-block-woocommerce-cart-order-summary-totals-block {
	display: flex;
	flex-direction: column;
}

.mrh-panier-sous-total {
	order: -1;
}

.mrh-carte-dispo {
	margin: 0;
	font-size: 0.83rem;
	color: var(--wp--preset--color--contrast-soft);
}

.mrh-carte-dispo::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	vertical-align: middle;
}

.mrh-produits .mrh-carte-lien,
.mrh-produits .wp-block-read-more {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: 0.6rem;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-dark);
	text-decoration: none;
}

.mrh-produits .wp-block-read-more::after { content: " →"; margin-left: 0.25rem; }
.mrh-produits .wp-block-read-more:hover { text-decoration: underline; }

@media (max-width: 1279px) {
	.mrh-produits .wc-block-product-template,
	.mrh-produits .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.mrh-produits .wc-block-product-template,
	.mrh-produits .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.mrh-produits .wc-block-product-template,
	.mrh-produits .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* En deux colonnes la carte ne fait plus que ~166 px : le prix doit
	   pouvoir revenir à la ligne, sans quoi un montant à quatre chiffres
	   déborderait après l'import complet. */
	.mrh-carte-prix,
	.mrh-produits .wc-block-components-product-price {
		font-size: 1.05rem;
		white-space: normal;
	}

	.mrh-produits .mrh-carte-titre,
	.mrh-produits .wp-block-post-title { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mrh-cat-carte,
	.mrh-produits .wc-block-product,
	.mrh-produits .wp-block-post { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Trois blocs commerciaux
   -------------------------------------------------------------------------- */
.mrh-blocs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
}

.mrh-bloc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.1rem 1.2rem;
	border-radius: 4px;
	overflow: hidden;
	min-height: 128px;
}

.mrh-bloc--anthracite { background: var(--wp--preset--color--anthracite); color: #fff; }
.mrh-bloc--turquoise { background: var(--wp--preset--color--accent); color: #fff; }
.mrh-bloc--clair { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); }

.mrh-bloc h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: inherit; }
.mrh-bloc p { margin: 0 0 0.7rem; font-size: 0.85rem; opacity: 0.92; }
.mrh-bloc-texte { position: relative; z-index: 1; }

.mrh-bloc-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: 3px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

.mrh-bloc--clair .mrh-bloc-btn { background: var(--wp--preset--color--accent); color: #fff; }
.mrh-bloc-btn:hover { background: var(--wp--preset--color--contrast); color: #fff; text-decoration: none; }
.mrh-bloc--clair .mrh-bloc-btn:hover { background: var(--wp--preset--color--accent-dark); }

.mrh-bloc-visuel { flex: 0 0 auto; }
.mrh-bloc-visuel .mrh-visuel {
	width: clamp(64px, 8vw, 96px);
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: 3px;
	padding: 4px;
}

@media (max-width: 899px) {
	.mrh-blocs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Colonnes de gammes
   -------------------------------------------------------------------------- */
.mrh-gammes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.4rem 1.1rem;
}

.mrh-gamme h3 { margin: 0 0 0.55rem; font-size: 1.05rem; }
.mrh-gamme h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mrh-gamme h3 a:hover { color: var(--wp--preset--color--accent-dark); }
.mrh-gamme ul { list-style: none; margin: 0; padding: 0; }
.mrh-gamme li { margin: 0; }

/* Contraste relevé : ces liens étaient trop pâles pour être lus confortablement. */
.mrh-gamme a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: 0.93rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mrh-gamme a:hover { color: var(--wp--preset--color--accent-dark); text-decoration: underline; }
.mrh-gamme-n3 a { padding-left: 0.8rem; font-size: 0.88rem; }

@media (max-width: 1099px) { .mrh-gammes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mrh-gammes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Présentation éditoriale
   -------------------------------------------------------------------------- */
/* La présentation occupe toute la largeur utile, en deux colonnes :
   le texte à gauche, un visuel réel du catalogue à droite. */
/* Pas de max-width ici : la mise en page contrainte du groupe parent aligne
   déjà la section sur les 1400 px du reste du contenu. La forcer romprait
   l'alignement horizontal. */
.mrh-presentation {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}

.mrh-presentation-texte { max-width: 62ch; }
.mrh-presentation-texte h2 { margin-top: 0; }
.mrh-presentation p { font-size: 1rem; }
.mrh-presentation p:last-child { margin-bottom: 0; }

.mrh-presentation-visuel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.mrh-presentation-visuel .mrh-visuel {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 10px;
}

@media (max-width: 899px) {
	.mrh-presentation { grid-template-columns: 1fr; gap: 1.2rem; }
	.mrh-presentation-visuel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */
.mrh-pied { color: #fff; margin-top: var(--wp--preset--spacing--70); }
.mrh-pied h3 {
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin: 0 0 0.7rem;
}

.mrh-pied-colonnes {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.6rem 1.2rem;
}

.mrh-pied-col ul { list-style: none; margin: 0; padding: 0; }
.mrh-pied-col li { margin: 0; }

.mrh-pied-col a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	font-size: 0.85rem;
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
}

.mrh-pied-col a:hover { color: #fff; text-decoration: underline; }
.mrh-pied-col p { font-size: 0.85rem; color: rgb(255 255 255 / 78%); margin: 0 0 0.8rem; line-height: 1.55; }

.mrh-pied-btn {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.mrh-pied-btn:hover { background: var(--wp--preset--color--accent-dark); text-decoration: none !important; }

.mrh-paiements {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 0;
	border-top: 1px solid rgb(255 255 255 / 12%);
	font-size: 0.82rem;
	color: rgb(255 255 255 / 78%);
}

.mrh-paiements ul { display: flex; gap: 0.6rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.mrh-paiements li { background: rgb(255 255 255 / 10%); border-radius: 3px; padding: 0.25rem 0.6rem; }

.mrh-pied-mentions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	padding: 1rem 0 1.4rem;
	border-top: 1px solid rgb(255 255 255 / 12%);
	font-size: 0.8rem;
	color: rgb(255 255 255 / 66%);
}

@media (max-width: 1099px) { .mrh-pied-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mrh-pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   11. Boutique — filtres et tableau technique
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	/* overflow-y seul : un overflow:auto sur les deux axes ferait apparaître
	   une barre horizontale dès qu'un libellé dépasse d'un pixel. */
	.mrh-filtres {
		position: sticky;
		top: 150px;
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		overflow-x: hidden;
	}
}

/* Aucun défilement horizontal dans la colonne : tout doit tenir en largeur.
   Les libellés d'options reviennent à la ligne au lieu de pousser la boîte. */
.mrh-filtres,
.mrh-filtres * {
	min-width: 0;
	max-width: 100%;
}

.mrh-filtres label,
.mrh-filtres .wc-block-product-filter-checkbox-list__label,
.mrh-filtres .wc-block-product-filter-checkbox-list__text,
.mrh-filtres h6 {
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.mrh-filtres ul,
.mrh-filtres ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrh-filtres .wc-block-product-filter-checkbox-list__item {
	display: flex;
	align-items: stretch;
	min-height: 44px;
	padding: 0;
}

/* Le label enveloppe la case : en lui donnant toute la ligne, la zone
   cliquable passe de 81 x 20 px à la largeur complète sur 44 px de haut. */
.mrh-filtres .wc-block-product-filter-checkbox-list__item label,
.mrh-filtres .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	min-height: 44px;
	padding: 0.2rem 0;
	cursor: pointer;
}

.mrh-filtres input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
}

.mrh-filtres h6 {
	margin: 1.1rem 0 0.4rem;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast);
}

.mrh-filtres h6:first-child { margin-top: 0; }

/* Filtre de prix : les deux champs min/max dépassaient la colonne de 8 px.
   On les rend souples et on borne leur largeur. */
.mrh-filtres .wc-block-product-filter-price-slider__range-text,
.mrh-filtres .wc-block-product-filter-price__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	box-sizing: border-box;
}

.mrh-filtres input.min,
.mrh-filtres input.max,
.mrh-filtres .wc-block-product-filter-price input[type="text"],
.mrh-filtres .wc-block-product-filter-price input[type="number"] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	max-width: calc(50% - 0.25rem);
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	font-size: 0.88rem;
}

/* Le rail du curseur ne doit pas déborder non plus. */
.mrh-filtres .wc-block-product-filter-price-slider,
.mrh-filtres .wc-block-product-filter-price-slider__range {
	width: 100%;
	box-sizing: border-box;
}

/* Boutons d'ouverture et de fermeture du panneau de filtres sur mobile. */
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__close-overlay {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.wc-block-product-filters__open-overlay { width: 100%; }

/* Contrôles du mini-panier : quantité et suppression. */
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input,
.wc-block-cart-item__remove-link {
	min-height: 44px;
	min-width: 44px;
}

.wc-block-components-quantity-selector__input { text-align: center; }

/* --------------------------------------------------------------------------
   11 bis. Sélecteur de tri de la boutique
   -------------------------------------------------------------------------- */
.woocommerce-ordering select,
select.orderby,
.wc-block-catalog-sorting select {
	min-height: 44px;
	min-width: 240px;
	max-width: 100%;
	padding: 0 2.4rem 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	/* Chevron dessiné en SVG inline : aucune requête réseau. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6771' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 14px 14px;
}

.woocommerce-ordering select:hover,
select.orderby:hover { border-color: var(--wp--preset--color--accent); }

.woocommerce-ordering select:focus-visible,
select.orderby:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.wc-block-product-results-count,
.woocommerce-result-count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast-soft);
}

.mrh-caracteristiques { overflow-x: auto; border: 1px solid var(--wp--preset--color--line); border-radius: 3px; }
.mrh-caracteristiques table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 0.85rem; }
.mrh-caracteristiques th,
.mrh-caracteristiques td { text-align: left; padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.mrh-caracteristiques th { width: 38%; font-weight: 600; background: var(--wp--preset--color--surface); white-space: nowrap; }
.mrh-caracteristiques td { font-variant-numeric: tabular-nums; }
.mrh-caracteristiques tr:last-child th,
.mrh-caracteristiques tr:last-child td { border-bottom: 0; }

.mrh-reference { font-family: var(--wp--preset--font-family--donnees); font-size: 0.78rem; color: var(--wp--preset--color--contrast-soft); }

.mrh-dispo {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 2px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-soft);
	border: 1px solid var(--wp--preset--color--line);
}

/* --------------------------------------------------------------------------
   12. Accessibilité et garde-fous
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Aucun débordement horizontal, quelle que soit la largeur. */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Tous les boutons atteignent 44 px de haut, y compris ceux des blocs. */
.wp-block-button__link,
.wp-element-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 781px) {
	.mrh-header-rangee { flex-wrap: wrap; row-gap: 0.6rem; }
	.mrh-search { order: 3; flex-basis: 100%; max-width: none; }

	/* Au doigt, toutes les cibles montent à 44 px. Les listes s'allongent,
	   c'est le prix d'un pointage fiable. */
	.mrh-gamme a,
	.mrh-pied-col a,
	.mrh-produits .wp-block-post-title a,
	main a:not(.mrh-cat-carte):not(.mrh-bloc-btn):not(.wp-block-button__link) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Les liens à l'intérieur d'un paragraphe restent en ligne : les passer
	   en inline-flex casserait le rendu du texte courant. */
	.mrh-presentation a,
	.mrh-carte-dispo a {
		display: inline;
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   13. Impression
   -------------------------------------------------------------------------- */
@media print {
	.mrh-header, .mrh-navbar, .mrh-reassurance, .mrh-filtres, .mrh-pied { display: none !important; }
	.mrh-caracteristiques { overflow: visible; }
}

/* --------------------------------------------------------------------------
   14. Page d'accueil — refonte
   --------------------------------------------------------------------------
   Une seule section pour toute la page d'accueil, dans l'ordre où le visiteur
   la parcourt. Les couleurs viennent des jetons de theme.json ; aucune valeur
   de marque n'est écrite en dur ici, à deux exceptions près, commentées.
   -------------------------------------------------------------------------- */

/* --- 14.1 Boutons, communs à toute la page --- */

/* Les composants de cette section calculent tous leurs largeurs en border-box :
   les grilles, les cartes et les boutons portent du rembourrage, et le modele
   de boite par defaut le ferait deborder de la colonne. */
.mrh-confiance-carte,
.mrh-univers-carte,
.mrh-univers-image,
.mrh-univers-texte,
.mrh-produit,
.mrh-produit-image,
.mrh-produit-corps,
.mrh-affaires,
.mrh-hero-contenu { box-sizing: border-box; }

.mrh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Le theme ne pose pas de border-box global. Sans cette ligne, un bouton en
	   largeur 100 % deborde de sa carte de la valeur de son rembourrage, et sa
	   hauteur minimale s'y ajoute au lieu de la contenir. */
	box-sizing: border-box;
	/* 44 px : la cible tactile minimale recommandée. En dessous, le bouton
	   devient difficile à viser au pouce sur un téléphone. */
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mrh-btn--principal {
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
}
.mrh-btn--principal:hover,
.mrh-btn--principal:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: #fff;
}

.mrh-btn--secondaire {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.mrh-btn--secondaire:hover,
.mrh-btn--secondaire:focus-visible {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: #fff;
}

/* Sur l'aplat anthracite du hero et du bloc final, un contour hérité serait
   trop discret : on force le blanc. */
.mrh-hero .mrh-btn--secondaire,
.mrh-cta .mrh-btn--clair {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.mrh-hero .mrh-btn--secondaire:hover,
.mrh-hero .mrh-btn--secondaire:focus-visible,
.mrh-cta .mrh-btn--clair:hover,
.mrh-cta .mrh-btn--clair:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

.mrh-btn--panier {
	background: var(--wp--preset--color--accent-dark);
	color: #fff;
	width: 100%;
}
.mrh-btn--panier:hover,
.mrh-btn--panier:focus-visible { background: var(--wp--preset--color--contrast); color: #fff; }

.mrh-btn--devis {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	width: 100%;
}
.mrh-btn--devis:hover,
.mrh-btn--devis:focus-visible {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: #fff;
}

/* --- 14.2 Hero --- */

.mrh-hero-zone { margin-top: 0; }

.mrh-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 480px;
	padding: var(--wp--preset--spacing--70) 0;
	background: var(--wp--preset--color--anthracite);
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

/* La photo n'est posée que si la composition a pu la résoudre en médiathèque.
   Sans elle, l'aplat anthracite ci-dessus tient lieu de fond — c'est délibéré,
   et cela vaut mieux qu'une image de substitution qui ne serait pas le dépôt. */
.mrh-hero--photo { background-image: var(--mrh-hero-image); }

/* Le voile : dense à gauche où vit le texte, transparent à droite où l'on veut
   voir le bâtiment et le camion. Sans lui, le titre blanc passerait sur le
   ciel clair de la photo. */
.mrh-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(22, 28, 33, 0.88) 0%,
		rgba(22, 28, 33, 0.74) 38%,
		rgba(22, 28, 33, 0.30) 68%,
		rgba(22, 28, 33, 0.12) 100%
	);
}

.mrh-hero-contenu {
	position: relative;
	z-index: 1;
	width: min(100% - 2.4rem, 1400px);
	margin-inline: auto;
}

.mrh-hero-surtitre {
	margin: 0 0 0.7rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	/* Accent éclairci : le turquoise du thème manque de contraste sur
	   l'anthracite, celui-ci passe le seuil AA sur ce fond. */
	color: #7FD8D8;
}

.mrh-hero-titre {
	margin: 0 0 1rem;
	max-width: 20ch;
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
	line-height: 1.08;
	color: #fff;
}

.mrh-hero-texte {
	margin: 0 0 1.9rem;
	max-width: 46ch;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.19rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.mrh-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 0;
}

/* --- 14.3 Blocs de confiance --- */

.mrh-confiance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.mrh-confiance-carte {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.4rem 1.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
}

.mrh-confiance-icone {
	width: 30px;
	height: 30px;
	color: var(--wp--preset--color--accent-dark);
	flex: 0 0 auto;
}

.mrh-confiance-titre {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
}

.mrh-confiance-texte {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-soft);
}

/* --- 14.4 En-tête de section, partagé --- */

.mrh-section-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.mrh-section-entete h2 { margin: 0; }
.mrh-section-lien { margin: 0; font-size: 0.9rem; }

/* --- 14.5 Univers horeca --- */

.mrh-univers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.mrh-univers-carte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.mrh-univers-carte:hover,
.mrh-univers-carte:focus-visible {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.mrh-univers-image {
	display: flex;
	align-items: center;
	justify-content: center;
	/* border-box : sans lui, aspect-ratio se calcule sur la boite de contenu et
	   le rembourrage s'ajoute par-dessus. La zone cesse alors d'etre un 4/3, et
	   une photo au format portrait etire toute la rangee. */
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	padding: 0.9rem;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

/* object-fit: contain — un appareil photographié sur fond blanc ne doit pas
   être recadré par la carte : on le montre entier, quitte à laisser du vide. */
.mrh-univers-visuel {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mrh-univers-texte {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem 1rem;
}
.mrh-univers-nom { font-weight: 600; line-height: 1.3; }
.mrh-univers-compte {
	font-family: var(--wp--preset--font-family--donnees);
	font-size: 0.78rem;
	color: var(--wp--preset--color--contrast-soft);
}

/* --- 14.6 Bannière des bonnes affaires --- */

.mrh-affaires {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 2rem 2.2rem;
	border-radius: 8px;
	background: var(--wp--preset--color--anthracite);
	color: #fff;
}

.mrh-affaires-surtitre {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #7FD8D8;
}
.mrh-affaires-titre {
	margin: 0 0 0.4rem;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
	line-height: 1.15;
	color: #fff;
}
.mrh-affaires-soustitre {
	margin: 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.98rem;
}
.mrh-affaires-action { margin: 0; }

/* --- 14.7 Cartes produits --- */

.mrh-produits-section + .mrh-produits-section { margin-top: var(--wp--preset--spacing--70); }

.mrh-produits-grille {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
}

.mrh-produit {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.mrh-produit-lien { display: block; }

.mrh-produit-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	padding: 0.9rem;
	background: #fff;
	overflow: hidden;
}
.mrh-produit-visuel {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.mrh-produit-sansimage {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--surface);
}

.mrh-produit-corps {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem 1rem 1rem;
	flex: 1 1 auto;
}

.mrh-produit-marque {
	font-family: var(--wp--preset--font-family--donnees);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

.mrh-produit-nom {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.35;
	font-weight: 600;
}
.mrh-produit-nom a { color: inherit; text-decoration: none; }
.mrh-produit-nom a:hover,
.mrh-produit-nom a:focus-visible { text-decoration: underline; }

/* margin-top auto : les prix et les boutons s'alignent d'une carte à l'autre
   même quand les titres n'ont pas le même nombre de lignes. */
.mrh-produit-prix { margin-top: auto; padding-top: 0.35rem; }
.mrh-produit-prix .price { font-size: 1.05rem; font-weight: 700; }

.mrh-produit-action { margin: 0.55rem 0 0; }

/* --- 14.8 Bloc MR Horeca --- */

.mrh-apropos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	align-items: center;
}
.mrh-apropos--sansvisuel { grid-template-columns: 1fr; }

.mrh-apropos-texte h2 { margin-top: 0; }
.mrh-apropos-texte p { max-width: 60ch; }
.mrh-apropos-action { margin-top: 1.4rem; }

.mrh-apropos-photo {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* --- 14.9 Appel à l'action final --- */

.mrh-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}
.mrh-cta h2 { margin: 0 0 0.5rem; color: #fff; }
.mrh-cta p { margin: 0; max-width: 58ch; color: rgba(255, 255, 255, 0.88); }
.mrh-cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- 14.10 Accès directs de la barre de navigation --- */

.mrh-navbar-rangee { width: 100%; gap: 0.6rem 1.2rem; }
.mrh-navbar-acces { gap: 0.2rem 1.1rem; }
.mrh-navbar-acces p { margin: 0; }
.mrh-navbar-acces a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.mrh-navbar-acces a:hover,
.mrh-navbar-acces a:focus-visible { color: #fff; text-decoration: underline; }

/* La demande de devis est le second geste attendu après l'ajout au panier :
   elle porte un contour pour se distinguer d'un lien de navigation ordinaire. */
.mrh-navbar-devis a {
	padding: 0.1rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 3px;
	color: #fff;
}
.mrh-navbar-devis a:hover,
.mrh-navbar-devis a:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--anthracite);
	text-decoration: none;
}

/* --- 14.11 Adaptations aux petites largeurs --- */

@media (max-width: 1280px) {
	.mrh-produits-grille { grid-template-columns: repeat(4, 1fr); }
	.mrh-produits-grille .mrh-produit:nth-child(5) { display: none; }
}

@media (max-width: 1024px) {
	.mrh-confiance { grid-template-columns: repeat(2, 1fr); }
	.mrh-univers   { grid-template-columns: repeat(3, 1fr); }
	.mrh-apropos   { grid-template-columns: 1fr; gap: 1.8rem; }
	.mrh-hero      { min-height: 420px; }
}

@media (max-width: 782px) {
	.mrh-univers { grid-template-columns: repeat(2, 1fr); }
	.mrh-produits-grille { grid-template-columns: repeat(3, 1fr); }
	/* Trois colonnes, trois cartes : une quatrieme laisserait une rangee
	   incomplete sous la premiere. */
	.mrh-produits-grille .mrh-produit:nth-child(4),
	.mrh-produits-grille .mrh-produit:nth-child(5) { display: none; }
	.mrh-affaires { padding: 1.6rem 1.5rem; }
	.mrh-affaires-action, .mrh-cta-actions { width: 100%; }
	.mrh-affaires-action .mrh-btn, .mrh-cta-actions .mrh-btn { flex: 1 1 auto; }
}

@media (max-width: 600px) {
	/* Menu replie : le bouton et les deux acces directs partagent une seule
	   rangee. Sans cela, la navigation occupe toute la largeur et laisse un
	   vide a droite du bouton. */
	.mrh-navbar-rangee { flex-wrap: nowrap; align-items: center; }
	.mrh-navbar-rangee > .wp-block-navigation { flex: 0 0 auto; }
	.mrh-navbar-acces { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
	/* Le catalogue est deja atteignable par le menu replie et par le bouton du
	   bandeau : sur une seule rangee de 375 px, on garde le seul acces que rien
	   d'autre ne propose. */
	.mrh-navbar-acces p:not(.mrh-navbar-devis) { display: none; }

	.mrh-hero {
		min-height: 0;
		padding: var(--wp--preset--spacing--60) 0;
		background-position: center 70%;
	}
	/* Sur telephone, la version 1024 px suffit largement et pese 92 Ko au lieu
	   de 168 : c'est la premiere image de la page, elle conditionne le temps
	   d'affichage percu. Le repli garde la grande version si la mediatheque
	   n'a pas produit la taille intermediaire. */
	.mrh-hero--photo {
		background-image: var(--mrh-hero-image-mobile, var(--mrh-hero-image));
	}
	/* Le voile devient vertical : sur une colonne étroite, un dégradé latéral
	   laisserait le bas du texte sur la partie claire de la photo. */
	.mrh-hero--photo::before {
		background: linear-gradient(
			180deg,
			rgba(22, 28, 33, 0.80) 0%,
			rgba(22, 28, 33, 0.86) 55%,
			rgba(22, 28, 33, 0.92) 100%
		);
	}
	.mrh-hero-titre { max-width: none; }
	.mrh-hero-actions .mrh-btn { flex: 1 1 100%; }

	.mrh-confiance { grid-template-columns: 1fr; gap: 0.9rem; }
	.mrh-confiance-carte { flex-direction: row; align-items: flex-start; gap: 0.9rem; }
	.mrh-confiance-carte .mrh-confiance-icone { margin-top: 0.15rem; }

	.mrh-produits-grille { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
	/* Deux colonnes : on garde quatre cartes, soit deux rangees pleines. */
	.mrh-produits-grille .mrh-produit:nth-child(3),
	.mrh-produits-grille .mrh-produit:nth-child(4) { display: grid; }
	.mrh-produits-grille .mrh-produit:nth-child(5) { display: none; }

	.mrh-produit-corps { padding: 0.7rem 0.75rem 0.85rem; }
	.mrh-produit-nom { font-size: 0.88rem; }

	.mrh-apropos-photo { border-radius: 6px; }
}

/* En dessous de 340 px, deux colonnes d'univers laisseraient des vignettes de
   150 px : on repasse a une colonne, avec une image moins haute pour ne pas
   allonger la page inutilement. */
@media (max-width: 340px) {
	.mrh-univers { grid-template-columns: 1fr; }
	.mrh-univers-image { aspect-ratio: 16 / 9; }
}

/* =======================================================================
   15. PRODUITS ASSOCIES — fiche produit
   Les cartes et la grille sont celles de la page d'accueil (section 14) :
   on ne redefinit ici que la place de la section dans la fiche, calquee
   sur la section « Documentation technique » qui la precede.
   ======================================================================= */

.mrh-associes {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}

.mrh-associes .mrh-section-entete { margin-bottom: var(--wp--preset--spacing--40); }

.mrh-associes h2 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}