/*
 * CSS projet ParisManhattan.
 * Chargé sur tout le site, après le thème parent — voir functions.php.
 */

:root {
	/* Hauteur du header, qui est en position fixe. Toute modification de sa
	   hauteur dans Elementor doit être reportée ici. */
	--pm-hauteur-header: 100px;

	/* Charte du site, reprise du kit Elementor : on ne réinvente rien.
	   Définie ici parce que cette feuille est chargée sur tout le site ;
	   woocommerce.css, qui en dépend, s'en sert aussi. */
	--pm-rose: #e42278;
	--pm-rose-fonce: #c31763;
	--pm-rose-clair: #fbecf0;
	--pm-noir: #1e1f1c;
	--pm-gris: #f9f9f9;
	--pm-fond: #fbf9f7;
	--pm-blanc: #fff;
	--pm-bordure: #e8e2dd;
	--pm-texte-doux: #6b6a67;

	/* Rose des éléments qui portent du texte blanc.
	   Le rose de marque #E42278 ne donne que 4,38:1 avec du blanc — sous le
	   seuil de 4,5 exigé pour du texte courant. Le rose foncé monte à 5,80:1
	   pour une teinte que l'œil lit comme la même. On garde donc #E42278 pour
	   les aplats, les filets et les accents, et celui-ci dès qu'un libellé
	   blanc doit se lire par-dessus. */
	--pm-rose-action: #c31763;
	--pm-rose-action-survol: #a01050;

	/* Erreur de saisie. Un rouge franc, distinct du rose de la marque : une
	   alerte ne doit pas se confondre avec un accent décoratif. Deux rouges
	   différents cohabitaient, un par feuille ; celui-ci les remplace.
	   6,68:1 sur blanc pour le filet, 10,84:1 pour le texte. */
	--pm-erreur: #b32020;
	--pm-erreur-texte: #7a1414;
	--pm-erreur-fond: #fdf2f2;

	/* Hauteur minimale d'une cible tactile. */
	--pm-cible: 2.75rem;

	--pm-titre: "Coco-Sharp", "Montserrat", system-ui, sans-serif;
	--pm-texte: "Montserrat", system-ui, sans-serif;

	--pm-espace: 1.5rem;
	--pm-rayon: 0; /* la charte utilise des angles droits */
	--pm-largeur: 1400px;
}

@media (max-width: 47.99rem) {
	:root {
		--pm-hauteur-header: 76px;
	}
}

/* ==================================================================
   COMPENSATION DU BANDEAU FIXE
   ==================================================================
   Le bandeau est en position fixe : il sort du flux et le contenu
   remonte dessous. Chaque page doit donc réserver sa hauteur en haut.

   Cette compensation était éclatée en plusieurs règles qui ne visaient
   pas le même niveau du document, avec deux effets opposés :

   — sur la boutique et les pages de catégorie, « #primary » est imbriqué
     dans « .site-main » ; les deux règles s'ajoutaient et laissaient un
     blanc de deux hauteurs de bandeau ;
   — sur Trouve ton style, le showroom, contact et les pages de rubrique,
     aucune des règles ne correspondait : le contenu passait sous le
     bandeau, et la barre de recherche s'y trouvait cachée.

   Une seule règle désormais, posée sur le conteneur le plus extérieur.
   Ces trois noms ne coexistent jamais sur une même page : selon le
   gabarit qui la rend, c'est l'un ou l'autre qui existe.

   L'accueil est écarté : son visuel passe volontairement sous le
   bandeau, c'est un parti pris de la maquette.
   ================================================================== */

body:not(.home) .site-main,
body:not(.home) .elementor-location-single,
body:not(.home) .elementor-location-archive {
	padding-block-start: var(--pm-hauteur-header);
}

/* Les Actualités et l'Édito composent déjà leur propre espacement haut :
   la compensation y créerait de nouveau un blanc double. On la retire
   pour ces archives et pour leurs articles.

   Ces règles doivent rester après celle du dessus : elles pèsent le même
   poids, c'est donc l'ordre qui tranche. */
body.post-type-archive-actualites .elementor-location-archive,
body.tax-pm_actu_categorie .elementor-location-archive,
body.single-actualites .elementor-location-single,
body.post-type-archive-pm_edito .elementor-location-archive,
body.single-pm_edito .elementor-location-single {
	padding-block-start: 0;
}

/* --- Les notifications de WooCommerce ------------------------------
   « Produit ajouté au panier », « Article retiré »… Sur la fiche
   produit, WooCommerce écrit ces messages juste après le bandeau, en
   dehors du conteneur qui réserve sa hauteur : ils passaient dessous et
   se retrouvaient coupés.

   C'est vrai avec ou sans message — le conteneur est toujours là, vide
   le reste du temps. On lui confie donc la réserve, et le contenu qui
   suit ne la reprend pas : sans quoi la fiche descendrait de deux
   hauteurs de bandeau.

   Sur la boutique et les pages de catégorie, ce même conteneur est
   imbriqué dans le contenu : la première règle ne l'atteint pas, et
   rien ne change. */
body > .woocommerce-notices-wrapper {
	padding-block-start: var(--pm-hauteur-header);
}

body > .woocommerce-notices-wrapper ~ .elementor-location-single,
body > .woocommerce-notices-wrapper ~ .elementor-location-archive,
body > .woocommerce-notices-wrapper ~ .site-main {
	padding-block-start: 0;
}

/* Ancres : sans cela, un lien interne place la cible sous le header. */
:target {
	scroll-margin-block-start: calc(var(--pm-hauteur-header) + 1rem);
}

html {
	scroll-padding-block-start: calc(var(--pm-hauteur-header) + 1rem);
}

/* ==================================================================
   TIROIR MINI-PANIER
   ==================================================================
   C'est ce qui s'ouvre au clic sur l'icone du header, sur toutes les
   pages — d'ou sa presence dans cette feuille chargee partout, et non
   dans celle du parcours d'achat.

   Premium Addons cible ses éléments avec des sélecteurs à une seule
   classe. Les nôtres passent par le conteneur du panneau, ce qui leur
   donne deux classes : elles gagnent quelle que soit la position de
   notre feuille dans la file, sans avoir à forcer.
   ================================================================== */

/* --- Le panneau ------------------------------------------------- */

/* Premium repousse le panneau hors de l'écran d'une distance égale à
   « --pa-slide-mc-width ». Si la largeur du panneau ne vaut pas exactement
   cette distance, une bande reste visible une fois le tiroir refermé.

   C'est ce qui arrivait : la variable valait 360 px, la largeur 26 rem,
   soit 416 px — il restait 56 px à l'écran. On fait donc découler la
   largeur de la variable, pour qu'elles ne puissent plus diverger. */
.pa-woo-mc__content-wrapper {
	inline-size: var(--pa-slide-mc-width);
	background: var(--pm-blanc);
	font-family: var(--pm-texte);
	color: var(--pm-noir);
	box-shadow: -8px 0 32px rgb(30 31 28 / 10%);
}

/* Au-delà de 1024 px, Premium s'en tient à 360 px : un peu étroit pour
   une ligne de panier avec sa vignette. On élargit la variable elle-même —
   la largeur suit, et la fermeture reste exacte.

   En dessous, on ne touche à rien : Premium passe à la moitié de l'écran
   sur tablette, et à la largeur entière sur téléphone. */
@media (min-width: 64.0625rem) {
	.pa-woo-mc__content-wrapper {
		--pa-slide-mc-width: min(26rem, 92vw);
	}
}

/* Le voile etait a 50 % de noir : trop lourd, on l'adoucit. */
.pa-woo-mc__overlay,
[class*="pa-woo-mc__overlay-"] {
	background-color: rgb(30 31 28 / 28%) !important;
	backdrop-filter: blur(2px);
}

/* --- En-tete ---------------------------------------------------- */

.pa-woo-mc__content-wrapper .pa-woo-mc__cart-header {
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-block-end: 1px solid var(--pm-bordure);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__cart-title {
	font-family: var(--pm-titre);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pm-noir);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__close-button {
	display: grid;
	place-items: center;
	inline-size: var(--pm-cible);
	block-size: var(--pm-cible);
	margin-inline-end: -0.75rem;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.pa-woo-mc__content-wrapper .pa-woo-mc__close-button:hover {
	background: var(--pm-rose-clair);
}

/* Elementor sert l'icone en SVG et lui impose 1em via .e-font-icon-svg :
   on passe devant en ajoutant le parent au sélecteur. */
.pa-woo-mc__close-button .pa-woo-mc__close-icon {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	fill: var(--pm-noir);
}

/* --- Liste des articles ----------------------------------------- */

/* Le panneau est déjà en flex-column (classe .pa-flex-col de Premium) :
   on laisse la liste absorber la hauteur restante et défiler seule, pour
   que l'en-tête et le pied restent visibles quel que soit le nombre
   d'articles. */
/* Premium déclare `overflow-y: auto` à deux niveaux imbriqués, sans rien
   dire de l'horizontale. Or la spécification interdit de combiner
   « visible » sur un axe et « auto » sur l'autre : le navigateur promeut
   alors silencieusement l'horizontale en « auto », et le moindre
   dépassement fait apparaître une barre de défilement.

   On garde un seul conteneur de défilement — celui-ci — avec ses deux
   axes déclarés, et on rend l'intérieur transparent au débordement. */
.pa-woo-mc__content-wrapper .pa-woo-mc__widget-shopping-outer-wrapper {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow: hidden auto;
	overscroll-behavior: contain;
	padding: 0 1.5rem;
}

/* Le conteneur intérieur : c'est lui qui portait la barre visible sous le
   produit, sa hauteur se limitant à celle de la liste. */
.pa-woo-mc__content-wrapper .widget_shopping_cart_content,
.pa-woo-mc__content-wrapper .pa-woo-mc__items-wrapper {
	overflow: visible;
}

.pa-woo-mc__content-wrapper ul.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-woo-mc__content-wrapper li.mini_cart_item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	padding: 1.25rem 0;
	border-block-end: 1px solid var(--pm-bordure);
}

.pa-woo-mc__content-wrapper li.mini_cart_item:last-child {
	border-block-end: 0;
}

/* Vignette : format carré, comme sur toute la boutique. */
.pa-woo-mc__content-wrapper .wpr-mini-cart-image {
	flex: none;
	inline-size: 4.5rem;
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-image a {
	display: block;
}

.pa-woo-mc__content-wrapper li.mini_cart_item img {
	display: block;
	inline-size: 4.5rem;
	max-inline-size: none;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--pm-gris);
}

/* Nom et quantité occupent la place restante entre vignette et croix.
   `min-inline-size: 0` est indispensable : sans lui, un élément flex refuse
   de se réduire sous la largeur de son contenu, et un nom de produit long
   pousserait la ligne au-delà du tiroir. */
.pa-woo-mc__content-wrapper .wpr-mini-cart-name-and-quantity {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-product-name a {
	text-decoration: none;
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-name {
	font-family: var(--pm-titre);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pm-noir);
	transition: color 0.18s ease;
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-product-name a:hover .wpr-mini-cart-name {
	color: var(--pm-rose);
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-quantity,
.pa-woo-mc__content-wrapper .quantity {
	margin-block-start: 0.4rem;
	font-family: var(--pm-texte);
	font-size: 0.88rem;
	color: var(--pm-texte-doux);
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-quantity .woocommerce-Price-amount {
	font-family: var(--pm-titre);
	font-weight: 700;
	color: var(--pm-noir);
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-remove {
	flex: none;
}

/* Doublon de sous-total et de boutons.
   Premium appelle woocommerce_mini_cart(), dont le gabarit est surchargé
   par Royal Addons : celui-ci réaffiche un séparateur, un sous-total et
   la paire de boutons, juste au-dessus du pied de Premium qui les
   propose déjà. On masque la version de Royal et on garde le pied, qui
   reste visible au défilement. */
.pa-woo-mc__widget-shopping-outer-wrapper .wpr-mini-cart-separator,
.pa-woo-mc__widget-shopping-outer-wrapper .woocommerce-mini-cart__total,
.pa-woo-mc__widget-shopping-outer-wrapper .woocommerce-mini-cart__buttons {
	display: none;
}

/* Retirer un article : cible confortable, sans agressivité.
   WooCommerce impose color:red !important sur a.remove — d'où le nôtre,
   qui est le seul moyen de repasser devant. */
.pa-woo-mc__content-wrapper .wpr-mini-cart-remove a.remove,
.pa-woo-mc__content-wrapper a.remove {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	margin-inline-end: -0.5rem;
	border-radius: 50%;
	color: var(--pm-texte-doux) !important;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.pa-woo-mc__content-wrapper .wpr-mini-cart-remove a.remove:hover,
.pa-woo-mc__content-wrapper a.remove:hover {
	background: var(--pm-rose-clair);
	color: var(--pm-rose-action) !important;
}

/* --- Pied : sous-total et boutons -------------------------------- */

.pa-woo-mc__content-wrapper .pa-woo-mc__cart-footer {
	padding: 1.25rem 1.5rem;
	border-block-start: 1px solid var(--pm-bordure);
	background: var(--pm-fond);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__cart-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

/* Premium met une capitale à chaque mot : « Sous-Total » au lieu de
   « Sous-total ». En français seule la première compte. */
.pa-woo-mc__content-wrapper .pa-woo-mc__subtotal-heading {
	font-family: var(--pm-texte);
	font-size: 0.9rem;
	text-transform: none;
	color: var(--pm-texte-doux);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__subtotal,
.pa-woo-mc__content-wrapper .pa-woo-mc__subtotal .woocommerce-Price-amount {
	font-family: var(--pm-titre);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pm-noir);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__cart-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pa-woo-mc__content-wrapper .pa-woo-mc__mc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3rem;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--pm-noir);
	border-radius: 0;
	font-family: var(--pm-titre);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Voir le panier : action secondaire, en retrait. */
.pa-woo-mc__content-wrapper .pa-woo-mc__view-cart {
	background: transparent;
	color: var(--pm-noir);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__view-cart:hover {
	background: var(--pm-noir);
	color: var(--pm-blanc);
}

/* Commander : l'action principale.
   Premium Addons la peint en #2d2d2d par défaut. On prend le rose d'action
   et non le rose de marque : avec un libellé blanc en petites capitales,
   #E42278 ne donne que 4,38:1 là où celui-ci monte à 5,80:1. */
.pa-woo-mc__content-wrapper .pa-woo-mc__checkout {
	border-color: var(--pm-rose-action);
	background: var(--pm-rose-action);
	color: var(--pm-blanc);
}

.pa-woo-mc__content-wrapper .pa-woo-mc__checkout:hover {
	border-color: var(--pm-rose-action-survol);
	background: var(--pm-rose-action-survol);
	color: var(--pm-blanc);
}

/* --- Panier vide ------------------------------------------------- */

.pa-woo-mc__content-wrapper .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 3.5rem 0;
	font-size: 0.95rem;
	text-align: center;
	color: var(--pm-texte-doux);
}

/* Panier vide : un sous-total à 0,00 € surmonté d'un bouton « Commander »
   qui ne mène nulle part n'apporte rien. Premium ne pose aucune classe
   d'état, on se raccroche donc au message de panier vide.
   Navigateur sans :has() → le pied reste affiché, sans dommage. */
.pa-woo-mc__content-wrapper:has(.woocommerce-mini-cart__empty-message) .pa-woo-mc__cart-footer {
	display: none;
}

/* --- Confort mobile ---------------------------------------------- */

@media (max-width: 47.99rem) {
	/* La largeur n'est plus déclarée ici : elle découle de la variable de
	   Premium, qui vaut déjà l'écran entier à cette taille. Deux
	   déclarations pour une même dimension, c'est la porte ouverte au
	   décalage qui laissait une bande visible. */

	.pa-woo-mc__content-wrapper .pa-woo-mc__cart-header,
	.pa-woo-mc__content-wrapper .pa-woo-mc__cart-footer,
	.pa-woo-mc__content-wrapper .pa-woo-mc__widget-shopping-outer-wrapper {
		padding-inline: 1.25rem;
	}

	/* Le pied reste visible quelle que soit la longueur de la liste. */
	.pa-woo-mc__content-wrapper .pa-woo-mc__cart-footer {
		position: sticky;
		inset-block-end: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-woo-mc__content-wrapper,
	.pa-woo-mc__overlay {
		transition-duration: 0.01ms !important;
	}
}

/* ==================================================================
   HEADER
   ==================================================================
   La structure vient d'Elementor (gabarit #1982) : logo, menu
   ElementsKit, bloc compte, panier, et l'entrée du menu mobile. On ne
   la touche pas — on reprend la finition.
   ================================================================== */

/* Pastille du compteur panier. Le rose de marque suffit ici : le chiffre
   est petit mais gras, et la pastille est un repère avant d'être un
   texte à lire. */
.pa-woo-mc__badge {
	display: grid;
	place-items: center;
	min-inline-size: 1.15rem;
	min-block-size: 1.15rem;
	padding-inline: 0.3rem;
	border-radius: 999px;
	background: var(--pm-rose-action);
	color: var(--pm-blanc);
	font-family: var(--pm-texte);
	font-size: 0.68rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Les entrées de droite — compte, favoris, panier, menu — sont des icônes
   posées côte à côte. Sans surface cliquable propre, la cible fait la
   taille du dessin : environ 16 px. On la porte à 44 px, ce qui est le
   minimum confortable au doigt, sans changer la taille apparente. */
.elementor-location-header .elementor-widget-icon .elementor-icon {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--pm-cible);
	min-block-size: var(--pm-cible);
}

.elementor-location-header .elementor-widget-theme-site-logo a {
	min-inline-size: 0;
}

/* La pastille du compteur de favoris, dans le coin haut-droit de l'icône. */
.pm-favoris-compteur {
	position: absolute;
	inset-block-start: 0.15rem;
	inset-inline-end: 0.15rem;
	display: grid;
	place-items: center;
	min-inline-size: 1.05rem;
	min-block-size: 1.05rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--pm-rose-action);
	color: var(--pm-blanc);
	font-family: var(--pm-texte);
	font-size: 0.62rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	pointer-events: none;
}

/* Une pastille à zéro n'a rien à dire. */
.pm-favoris-compteur:empty,
.pm-favoris-compteur[data-nombre="0"] {
	display: none;
}

/* ==================================================================
   EN-TÊTE SUR ÉCRAN INTERMÉDIAIRE — de 768 à 1300 px
   ==================================================================
   Le menu déroulant du bureau est masqué à partir de 1300 px : c'est le
   bouton du menu qui prend le relais. Il ne reste alors que trois blocs
   sur la ligne — logo, icônes, bouton — et aucune répartition n'était
   définie : ils se rangeaient tous à gauche, à la suite du logo.

   Les icônes et le bouton forment un même groupe d'accès : ils vont
   ensemble, à l'opposé du logo.
   ================================================================== */

@media (min-width: 48rem) and (max-width: 81.25rem) {

	.elementor-location-header > .e-con,
	.elementor-location-header > .elementor-element {
		align-items: center;
	}

	/* Cette marge automatique pousse le groupe vers la droite. Le bouton
	   du menu, qui suit dans le balisage, reste collé aux icônes. */
	.elementor-location-header .ligne-panier {
		margin-inline-start: auto;
		inline-size: auto;
		max-inline-size: none;
		flex: 0 0 auto;
		gap: clamp(0.75rem, 1.6vw, 1.5rem);
	}

	.elementor-location-header .elementor-element-b9f3ca3 {
		flex: 0 0 auto;
		inline-size: auto;
		min-inline-size: var(--pm-cible);
		min-block-size: var(--pm-cible);
		justify-content: center;
	}
}

/* ==================================================================
   EN-TÊTE SUR TÉLÉPHONE — jusqu'à 767 px
   ==================================================================
   Logo à gauche, menu à droite, et les trois accès — compte, favoris,
   panier — réunis dans une barre collée en bas de l'écran, là où le
   pouce les atteint sans changer de prise.

   Trois réglages ont été faits dans le gabarit et comptent ici : le
   conteneur des icônes porte la classe « ligne-panier » ; le bouton du
   menu a été sorti de ce conteneur pour rejoindre la ligne de l'en-tête,
   sans quoi il descendait avec les icônes ; et le menu déroulant du
   bureau reste masqué à cette largeur, comme il l'était.

   Le gabarit contient aussi une règle de barre du bas, écrite dans son
   CSS personnalisé. Elle visait cette même classe et devient redondante :
   tout est repris ici, où la charte est disponible.
   ================================================================== */

@media (max-width: 47.99rem) {

	/* Hauteur de la barre, reprise plus bas pour dégager le bas des pages.
	   Déclarée sur :root pour rester lisible d'une règle à l'autre. */
	:root {
		--pm-barre-mobile: 3.5rem;
	}

	/* Le conteneur des icônes quitte le flux : il ne reste donc que le
	   logo et le menu sur la ligne du haut, l'un à chaque extrémité. */
	.elementor-location-header > .e-con,
	.elementor-location-header > .elementor-element {
		justify-content: space-between;
		align-items: center;
	}

	/* Le logo était fixé à 10 % de la largeur : beaucoup trop étroit sur
	   un téléphone. Il reprend sa largeur naturelle. */
	.elementor-location-header .elementor-element-1a1b701 {
		flex: 0 0 auto;
		inline-size: auto;
		max-inline-size: 45vw;
	}

	/* Le bouton du menu se range à l'opposé du logo, quelle que soit la
	   largeur de celui-ci. C'est lui qui ouvre la fenêtre « Menu Mobile ». */
	.elementor-location-header .elementor-element-b9f3ca3 {
		flex: 0 0 auto;
		inline-size: auto;
		min-inline-size: var(--pm-cible);
		min-block-size: var(--pm-cible);
		margin-inline-start: auto;
		padding: 0;
		justify-content: center;
	}

	/* --- La barre du bas ------------------------------------------ */

	.elementor-location-header .ligne-panier {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 99;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		inline-size: 100%;
		max-inline-size: none;
		min-block-size: var(--pm-barre-mobile);
		margin: 0;
		/* Sur les téléphones à écran arrondi, le bas est occupé par la
		   barre de navigation du système : on la contourne. */
		padding-block: 0.25rem;
		padding-block-end: max(0.25rem, env(safe-area-inset-bottom));
		padding-inline: 0.5rem;
		background: var(--pm-rose-clair);
		border-block-start: 1px solid var(--pm-bordure);
		box-shadow: 0 -2px 12px rgb(30 31 28 / 10%);
	}

	/* Chaque accès occupe la même part, avec une cible confortable. */
	.elementor-location-header .ligne-panier > * {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-block-size: var(--pm-cible);
		margin: 0;
		padding: 0;
		inline-size: auto;
		max-inline-size: none;
	}

	/* Les enveloppes intermédiaires ne doivent pas réintroduire de marge
	   ni décaler le dessin dans sa case. */
	.elementor-location-header .ligne-panier .elementor-widget-container,
	.elementor-location-header .ligne-panier .elementor-icon-wrapper,
	.elementor-location-header .ligne-panier .pa-woo-mc__outer-container,
	.elementor-location-header .ligne-panier .pa-woo-mc__inner-container,
	.elementor-location-header .ligne-panier .pa-woo-mc__toggle-wrapper,
	.elementor-location-header .ligne-panier .pa-woo-mc__icon-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: auto;
		margin: 0;
		padding: 0;
	}

	/* --- Le contenu des pages ------------------------------------- */

	/* La barre recouvre le bas de l'écran : sans cette réserve, la fin
	   du pied de page reste inaccessible. */
	body {
		padding-block-end: calc(var(--pm-barre-mobile) + env(safe-area-inset-bottom));
	}

	/* Le tiroir du panier s'ouvre par-dessus : son propre pied doit
	   rester au-dessus de la barre, pas dessous. */
	.pa-woo-mc__content-wrapper {
		padding-block-end: var(--pm-barre-mobile);
	}
}

/* Soulignement au survol des entrées du menu principal : il se déploie
   depuis la gauche plutôt que d'apparaître d'un bloc. */
.elementor-location-header .ekit-menu-nav-link {
	position: relative;
}

.elementor-location-header .ekit-menu-nav-link::after {
	position: absolute;
	inset-block-end: 0.35em;
	inset-inline-start: 0;
	block-size: 1px;
	inline-size: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.24s ease;
	content: "";
}

.elementor-location-header .ekit-menu-nav-link:hover::after,
.elementor-location-header .ekit-menu-nav-link.active::after {
	transform: scaleX(1);
}

/* ==================================================================
   MENU MOBILE
   ==================================================================
   C'est le popup Elementor #173, ouvert par l'entrée « Menu ». Ses
   réglages ont été corrigés en base : bouton de fermeture rétabli — il
   était désactivé, on ne pouvait refermer qu'avec le bouton retour du
   navigateur — et couleur des sous-menus rendue lisible.
   ================================================================== */

.menu-mobile .elementor-nav-menu a {
	display: flex;
	align-items: center;
	min-block-size: var(--pm-cible);
	padding-block: 0.75rem;
	font-family: var(--pm-titre);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--pm-noir);
}

/* Un filet entre les entrées, plutôt qu'une liste flottante. */
.menu-mobile .elementor-nav-menu > li:not(:last-child) {
	border-block-end: 1px solid var(--pm-bordure);
}

.menu-mobile .elementor-nav-menu a:hover,
.menu-mobile .elementor-nav-menu a:focus-visible {
	color: var(--pm-rose-action);
}

/* Sous-menus : en retrait, plus discrets que leur parent. */
.menu-mobile .sub-menu a {
	min-block-size: 2.5rem;
	padding-inline-start: 1rem;
	font-family: var(--pm-texte);
	font-size: 1rem;
	font-weight: 400;
	text-transform: none;
}

/* Bouton de fermeture du popup : même cible que dans le tiroir panier. */
.menu-mobile .dialog-close-button,
.elementor-popup-modal .dialog-close-button {
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	display: grid;
	place-items: center;
	inline-size: var(--pm-cible);
	block-size: var(--pm-cible);
	border-radius: 50%;
	color: var(--pm-noir);
	transition: background-color 0.18s ease;
}

.menu-mobile .dialog-close-button:hover,
.elementor-popup-modal .dialog-close-button:hover {
	background: var(--pm-rose-clair);
}

/* La fenêtre « Menu Mobile » a sa propre croix, dessinée dans le gabarit.
   Celle d'Elementor faisait doublon.

   Le réglage « Bouton de fermeture » ne suffit pas à s'en débarrasser :
   ce n'est pas une condition d'affichage mais un contrôle par sélecteur,
   qui se contente d'émettre « display: flex » quand il est actif. Le
   script, lui, crée le bouton dans tous les cas — « closeButton: true »
   y est écrit en dur. Seul le CSS peut donc le retirer. */
#elementor-popup-modal-173 .dialog-close-button {
	display: none;
}

/* Le bouton de repli des sous-menus doit rester une cible atteignable. */
.menu-mobile .elementor-nav-menu .sub-arrow {
	display: grid;
	place-items: center;
	inline-size: var(--pm-cible);
	block-size: var(--pm-cible);
}

/* ==================================================================
   LE VESTIAIRE PARISMANHATTAN  (§3 du brief)
   ==================================================================
   Cinq grandes cartes photo sur la page d'accueil. Le CSS d'origine,
   posé dans le conteneur Elementor, cachait **tout** le bandeau jusqu'au
   survol : nom de catégorie compris. Sur mobile il basculait le bandeau
   dans le flux, ce qui allongeait chaque carte.

   Le brief demande (T-VEST-02) que le nom reste visible sans survol, sur
   desktop comme sur mobile. On sépare donc les deux : le titre devient un
   bandeau permanent, la description se déplie au survol (T-VEST-05 : repli
   visuel, jamais suppression — le texte reste dans le HTML, lisible par
   les moteurs et les lecteurs d'écran).

   Notre feuille étant imprimée après celle de la page, ces règles
   l'emportent sans avoir à forcer.
   ================================================================== */

.hover-container .hover-section {
	/* Toujours en place : c'est le nom de la catégorie. */
	position: absolute;
	transform: none;
	opacity: 1;
	padding: 1.5rem;
}

/* Un dégradé plutôt qu'un aplat noir à 55 % : la photo reste lisible en
   haut de carte, le texte reste lisible en bas. */
.hover-container .hover-section::before {
	background: linear-gradient(to top, rgb(30 31 28 / 88%) 0%, rgb(30 31 28 / 62%) 55%, rgb(30 31 28 / 0%) 100%);
	backdrop-filter: none;
}

.hover-container .hover-section .elementor-heading-title {
	font-family: var(--pm-titre);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.15;
	color: var(--pm-blanc);
}

/* La description se replie. `max-block-size` plutôt qu'un affichage
   supprimé : le texte reste dans la page, seulement masqué à l'œil. */
.hover-container .hover-section .elementor-widget-text-editor {
	max-block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-block-size 0.45s ease, opacity 0.3s ease, margin 0.45s ease;
}

/* `:focus-within` ouvre aussi la carte à la navigation au clavier, que le
   survol seul laisserait inaccessible. */
.hover-container:hover .hover-section .elementor-widget-text-editor,
.hover-container:focus-within .hover-section .elementor-widget-text-editor {
	max-block-size: 30rem;
	margin-block-start: 0.75rem;
	opacity: 1;
}

.hover-container .hover-section p {
	font-family: var(--pm-texte);
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgb(255 255 255 / 92%);
}

/* Le lien de fin de description est le vrai appel à l'action de la carte :
   on le détache du paragraphe, sans le souligner — la page ne souligne pas
   ses liens, il n'y a pas de raison que ceux-ci fassent exception. */
.hover-container .hover-section a {
	display: inline-block;
	margin-block-start: 0.5rem;
	font-family: var(--pm-titre);
	font-weight: 700;
	color: var(--pm-blanc);
	text-decoration: none;
}

.hover-container .hover-section a:hover {
	color: var(--pm-rose-clair);
	text-decoration: none;
}

/* Sur mobile il n'y a pas de survol : tout est déplié d'emblée, et le CTA
   est donc directement cliquable — sans le double tap que provoquerait un
   contenu révélé au premier appui (T-VEST-03). */
@media (max-width: 48rem) {
	.hover-container .hover-section .elementor-widget-text-editor {
		max-block-size: none;
		margin-block-start: 0.75rem;
		opacity: 1;
		transition: none;
	}

	.hover-container .hover-section {
		padding: 1.25rem;
	}
}

/* ==================================================================
   LES 4 UNIVERS  (§4 du brief)
   ==================================================================
   Quatre encadrés — basiques, léopard, fluo, tutu.

   Les textes étaient bornés à cinq lignes et se dépliaient au survol.
   Le rendu était instable : la hauteur des encadrés sautait au passage
   de la souris, et la transition sur le nombre de lignes n'est pas
   animable de façon fiable selon les navigateurs.

   Le repliement est retiré : les textes s'affichent en entier, dans leur
   hauteur naturelle. C'est aussi ce que demandait la règle de départ —
   ne rien retirer à la lecture.
   ================================================================== */

.elementor-element-980c97a .elementor-widget-text-editor p {
	font-family: var(--pm-texte);
	font-size: 0.95rem;
	line-height: 1.6;
}

.elementor-element-980c97a .elementor-heading-title {
	font-family: var(--pm-titre);
	line-height: 1.15;
}

/* ==================================================================
   ACTUALITÉS
   ==================================================================
   Les titres ressortaient trop peu du fond : ils sont passés au rose de
   la marque. Le rose de marque suffit ici — ce sont de grands titres, où
   le seuil de lisibilité est plus bas que pour du texte courant.
   ================================================================== */

body.post-type-archive-actualites .elementor-post__title,
body.post-type-archive-actualites .elementor-post__title a,
body.tax-pm_actu_categorie .elementor-post__title,
body.tax-pm_actu_categorie .elementor-post__title a,
body.single-actualites .elementor-heading-title,
body.single-actualites .entry-title {
	color: var(--pm-rose);
}

body.post-type-archive-actualites .elementor-post__title a:hover,
body.tax-pm_actu_categorie .elementor-post__title a:hover {
	color: var(--pm-rose-action);
}

/* ==================================================================
   BOUTIQUE — VIGNETTES PRODUIT
   ==================================================================
   Les visuels fournis vont du paysage au portrait. Le format est fixé à
   3:4 côté WooCommerce, et rappelé ici : ainsi la grille reste régulière
   même si une image au mauvais format est téléversée par la suite.
   ================================================================== */

/* Les catégories utilisent la grille de Royal Addons, la boutique celle de
   WooCommerce : les deux sont couvertes, sinon une seule serait régulière. */
.woocommerce ul.products li.product img,
.elementor-widget-woocommerce-products ul.products li.product img,
.wpr-grid-item .wpr-grid-image-wrap img,
.wpr-grid-item-image img,
.pm-edito-produit img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--pm-gris);
}

/* --- Galerie de la fiche produit ------------------------------------- */
/* Le visuel de remplacement est au format portrait 3:4 : affiché sur toute
   la largeur de la colonne, il pousse le prix et le choix de taille sous la
   ligne de flottaison. On borne sa hauteur à celle de l'écran, en gardant
   le cadrage. */

.woocommerce div.product .woocommerce-product-gallery__image img,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: min(34rem, 60vh);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	background: var(--pm-gris);
}

/* La colonne elle-même ne dépasse pas non plus. */
.woocommerce div.product .woocommerce-product-gallery,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
	max-inline-size: 100%;
}

@media (max-width: 48rem) {
	.woocommerce div.product .woocommerce-product-gallery__image img,
	.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
		max-block-size: 60vh;
	}
}

/* Un seul et même bouton sous chaque produit, quel que soit son type. */
.woocommerce ul.products li.product .pm-voir-produit,
.elementor-widget-woocommerce-products ul.products li.product .pm-voir-produit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	inline-size: 100%;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--pm-noir);
	border-radius: 0;
	background: transparent;
	color: var(--pm-noir);
	font-family: var(--pm-titre);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce ul.products li.product .pm-voir-produit:hover,
.elementor-widget-woocommerce-products ul.products li.product .pm-voir-produit:hover {
	background: var(--pm-noir);
	color: var(--pm-blanc);
}

/* ==================================================================
   ÉDITO PM  (§5 du brief)
   ==================================================================
   Le magazine mode du site. Direction artistique volontairement sobre —
   noir et blanc, colonne de lecture étroite, respiration — pour que la
   photo et le texte portent seuls, comme dans un magazine.
   ================================================================== */

.single-pm_edito .elementor-location-single,
.post-type-archive-pm_edito .elementor-location-archive {
	background: var(--pm-blanc);
}

/* Colonne de lecture : au-delà de ~70 caractères par ligne, l'œil perd
   la ligne suivante. */
.single-pm_edito .entry-content > *,
.single-pm_edito .pm-edito-entete {
	max-inline-size: 42rem;
	margin-inline: auto;
}

.pm-edito-entete {
	margin-block-end: 2.5rem;
}

.pm-edito-lecture {
	margin: 0 0 1rem;
	font-family: var(--pm-texte);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pm-texte-doux);
}

.pm-edito-chapo {
	margin: 0;
	font-family: var(--pm-titre);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--pm-noir);
}

.single-pm_edito .entry-content h2 {
	margin-block: 2.75rem 1rem;
	font-family: var(--pm-titre);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.2;
}

.single-pm_edito .entry-content h3 {
	margin-block: 2rem 0.75rem;
	font-family: var(--pm-titre);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.single-pm_edito .entry-content p {
	font-family: var(--pm-texte);
	font-size: 1.05rem;
	line-height: 1.75;
}

/* Les grandes images débordent de la colonne de lecture : c'est ce qui
   donne le rythme d'un magazine. */
.single-pm_edito .entry-content figure,
.single-pm_edito .entry-content .wp-block-image {
	max-inline-size: min(64rem, 100%);
}

.single-pm_edito .entry-content img {
	inline-size: 100%;
	block-size: auto;
}

.single-pm_edito .entry-content blockquote {
	margin-block: 2.5rem;
	padding-inline-start: 1.5rem;
	border-inline-start: 2px solid var(--pm-rose-action);
	font-family: var(--pm-titre);
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	font-style: normal;
	line-height: 1.4;
	color: var(--pm-noir);
}

/* --- Produits liés en fin d'article ------------------------------ */

.pm-edito-produits {
	max-inline-size: min(64rem, 100%);
	margin: 4rem auto 0;
	padding-block-start: 2.5rem;
	border-block-start: 1px solid var(--pm-bordure);
}

.pm-edito-produits h2 {
	margin: 0 0 1.75rem;
	font-family: var(--pm-titre);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

.pm-edito-produits-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-edito-produit a {
	display: grid;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.pm-edito-produit img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--pm-gris);
}

.pm-edito-produit-nom {
	font-family: var(--pm-titre);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
}

.pm-edito-produit a:hover .pm-edito-produit-nom {
	color: var(--pm-rose-action);
}

.pm-edito-produit-prix {
	font-family: var(--pm-texte);
	font-size: 0.9rem;
	color: var(--pm-texte-doux);
}

/* ==================================================================
   DEMANDE D'EXPÉRIENCE AU SHOWROOM  (§14 du brief)
   ================================================================== */

.pm-experience {
	max-inline-size: 44rem;
	margin-inline: auto;
	font-family: var(--pm-texte);
}

.pm-experience-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem 1.25rem;
}

.pm-champ {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.pm-champ-large {
	margin-block-start: 1rem;
}

.pm-champ label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pm-noir);
}

.pm-champ input,
.pm-champ select,
.pm-champ textarea {
	inline-size: 100%;
	min-block-size: var(--pm-cible);
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--pm-bordure);
	border-radius: 0;
	background: var(--pm-blanc);
	font-family: inherit;
	font-size: 1rem;
	color: var(--pm-noir);
}

.pm-champ input:focus-visible,
.pm-champ select:focus-visible,
.pm-champ textarea:focus-visible {
	border-color: var(--pm-rose-action);
	outline: 2px solid var(--pm-rose-action);
	outline-offset: 1px;
}

/* Les cases à cocher gardent leur libellé sur la même ligne. */
.pm-champ-case {
	display: block;
	margin-block-start: 1rem;
}

.pm-champ-case label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.pm-champ-case input {
	flex: none;
	inline-size: 1.1rem;
	min-block-size: 1.1rem;
	block-size: 1.1rem;
	margin-block-start: 0.2rem;
	accent-color: var(--pm-rose-action);
}

/* Le piège à robots doit être invisible à l'œil sans être retiré du DOM :
   `display: none` serait détecté par les automates. */
.pm-champ-piege {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pm-experience-envoi {
	margin-block-start: 1.75rem;
}

.pm-experience-envoi .button {
	min-block-size: 3rem;
	padding-inline: 2.5rem;
	border: 0;
	border-radius: 0;
	background: var(--pm-rose-action);
	color: var(--pm-blanc);
	font-family: var(--pm-titre);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.pm-experience-envoi .button:hover {
	background: var(--pm-rose-action-survol);
}

.pm-experience-confirmation,
.pm-experience-erreur {
	max-inline-size: 44rem;
	margin-inline: auto;
	margin-block-end: 1.5rem;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
}

.pm-experience-confirmation {
	border-inline-start: 3px solid var(--pm-rose-action);
	background: var(--pm-rose-clair);
	color: var(--pm-noir);
}

.pm-experience-erreur {
	border-inline-start: 3px solid var(--pm-erreur);
	background: var(--pm-erreur-fond);
	color: var(--pm-erreur-texte);
}

/* ==================================================================
   TRI DU CATALOGUE
   ==================================================================
   Posé au-dessus de la grille de produits. Il se suffit à lui-même :
   le bouton valide le formulaire. Le script, quand il se charge, masque
   ce bouton et valide au changement de choix — d'où sa présence dans le
   balisage, et non un affichage conditionnel côté serveur.
   ================================================================== */

.pm-tri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-block-end: 1.25rem;
}

.pm-tri__intitule {
	font-family: var(--pm-titre);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pm-noir);
}

/* La flèche est dessinée ici : celle du système change d'un navigateur à
   l'autre et jure avec le reste. */
.pm-tri__choix {
	min-block-size: var(--pm-cible);
	padding: 0.5rem 2.5rem 0.5rem 0.9rem;
	border: 1px solid var(--pm-bordure);
	border-radius: var(--pm-rayon);
	background-color: var(--pm-blanc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e1f1c' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.7rem;
	font-family: var(--pm-texte);
	font-size: 0.95rem;
	color: var(--pm-noir);
	cursor: pointer;
	appearance: none;
}

.pm-tri__choix:hover {
	border-color: var(--pm-noir);
}

.pm-tri__choix:focus-visible {
	outline: 2px solid var(--pm-rose-action);
	outline-offset: 2px;
}

/* Comme les autres boutons du site : le kit Elementor impose sa couleur
   de texte et son padding avec un poids supérieur, d'où le « button » en
   tête de sélecteur. */
button.pm-tri__valider {
	min-block-size: var(--pm-cible);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--pm-noir);
	border-radius: var(--pm-rayon);
	background: var(--pm-noir);
	color: var(--pm-blanc);
	font-family: var(--pm-titre);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

button.pm-tri__valider:hover {
	background: var(--pm-rose-action);
	border-color: var(--pm-rose-action);
	color: var(--pm-blanc);
}

/* ==================================================================
   RETOUR EN HAUT DE PAGE
   ==================================================================
   Le gabarit de pied de page portait ce bouton, mais sa mise en forme y
   avait été collée sans balise « style » : elle s'affichait en clair au
   bas de chaque page, et le bouton n'avait ni flèche ni cadre. Tout est
   repris ici, avec les couleurs de la charte.
   ================================================================== */

/* La flèche est dessinée ici, en fond, plutôt que posée dans le widget :
   Elementor retire les balises de dessin vectoriel du contenu HTML quand
   l'enregistrement ne vient pas d'un compte autorisé à en écrire. Un fond
   passe sans encombre et se comporte pareil. */
/* Le bouton de consentement aux cookies est posé en bas à droite, à 15 px
   du bord, sur 45 px de côté. Le nôtre s'y superposait presque
   entièrement. On l'empile au-dessus, aligné sur le même axe vertical. */
button.pm-haut-de-page {
	position: fixed;
	inset-inline-end: 15px;
	inset-block-end: calc(15px + 45px + 0.75rem);
	z-index: 90;
	display: block;
	inline-size: var(--pm-cible);
	block-size: var(--pm-cible);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--pm-rose-action);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.2rem;
	color: var(--pm-blanc);
	cursor: pointer;
	box-shadow: 0 4px 16px rgb(30 31 28 / 25%);
	transition: background-color 0.18s ease, transform 0.12s ease;
}

/* Une hauteur déclarée l'emporte sur l'attribut « hidden » : sans cette
   ligne, le bouton resterait visible en haut de page. */
button.pm-haut-de-page[hidden] {
	display: none;
}

button.pm-haut-de-page:hover {
	background-color: var(--pm-rose-action-survol);
}

button.pm-haut-de-page:active {
	transform: scale(0.94);
}

button.pm-haut-de-page:focus-visible {
	outline: 2px solid var(--pm-noir);
	outline-offset: 3px;
}

/* Sur téléphone, la barre des trois accès occupe le bas de l'écran. Les
   deux boutons flottants montent donc au-dessus d'elle, l'un sur l'autre :
   le consentement d'abord, le retour en haut ensuite.

   Le sélecteur du bouton cookie est volontairement plus lourd que le sien,
   qui fixe 15 px depuis une feuille écrite dans la page même. */
@media (max-width: 47.99rem) {
	body .cky-btn-revisit-wrapper {
		inset-block-end: calc(var(--pm-barre-mobile) + 0.75rem + env(safe-area-inset-bottom));
	}

	button.pm-haut-de-page {
		inset-block-end: calc(var(--pm-barre-mobile) + 45px + 1.5rem + env(safe-area-inset-bottom));
	}
}

/* ------------------------------------------------------------------
   Contenu des fenêtres surgissantes
   ------------------------------------------------------------------
   Ce contenu est imprimé dans la page, à la suite du pied ; c'est le
   script qui le déplace dans sa boîte au moment de l'ouverture.

   La fenêtre « Menu Mobile » n'est activée que sur téléphone et tablette.
   Au-delà, le script ne la prend pas en charge : son contenu — logo, menu,
   coordonnées — restait donc affiché en bas de chaque page, ce qui se
   voyait surtout sur les pages courtes comme le panier.

   On le masque tant qu'il n'a pas rejoint sa boîte. Dès qu'il y entre, la
   seconde règle le rend de nouveau visible.
   ------------------------------------------------------------------ */

.elementor-location-popup {
	display: none;
}

.elementor-popup-modal .elementor-location-popup,
.dialog-message .elementor-location-popup {
	display: block;
}

/* ------------------------------------------------------------------
   Lisibilité des liens au survol
   ------------------------------------------------------------------
   Le kit fixe la couleur de survol des liens à #BF898CB3 — une teinte
   translucide qui, composée sur blanc, donne 2,05:1. Un lien devenait
   donc moins lisible au moment précis où on le pointe, alors qu'il est
   à 4,38:1 au repos.

   On reprend cette seule déclaration, au même poids que le kit : notre
   feuille étant chargée après la sienne, c'est elle qui tranche. La
   couleur au repos, elle, n'est pas touchée — c'est le rose de la
   marque. */
.elementor-kit-8 a:hover {
	color: var(--pm-rose-action-survol);
}

/* Sur petit écran, le tri prend toute la largeur plutôt que de se serrer
   dans un coin. */
@media (max-width: 34rem) {
	.pm-tri {
		justify-content: flex-start;
	}

	.pm-tri__choix {
		flex: 1 1 auto;
	}
}

/* ==================================================================
   HAUTEUR D'ÉCRAN SUR MOBILE  (T-MOB-03)
   ==================================================================
   Une section réglée sur 100vh est trop haute sur mobile : la barre
   d'adresse du navigateur est comptée dans le calcul, puis elle se
   rétracte au défilement. Le bas du visuel passe donc sous l'écran à
   l'arrivée, et le contenu sursaute au premier geste.

   `dvh` suit la hauteur réellement visible. La règle `vh` reste écrite
   juste avant, comme repli pour les navigateurs qui ignorent `dvh`.
   ================================================================== */

@media (max-width: 48rem) {
	.elementor-section-height-full,
	.elementor-element.e-con[data-settings*="100vh"],
	.pm-plein-ecran {
		min-block-size: 100vh;
		min-block-size: 100dvh;
	}

	/* Une section qui suit le header fixe ne doit pas dépasser l'écran. */
	.pm-plein-ecran-sous-header {
		min-block-size: calc(100vh - var(--pm-hauteur-header));
		min-block-size: calc(100dvh - var(--pm-hauteur-header));
	}
}

/* Le sac offert, signalé dans le panier. */
.pm-etiquette-offert {
	display: inline-block;
	margin-inline-start: 0.5rem;
	padding: 0.15rem 0.5rem;
	background: var(--pm-rose-clair);
	color: var(--pm-rose-action);
	font-family: var(--pm-texte);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ==================================================================
   ACCESSIBILITÉ AU CLAVIER
   ==================================================================
   Elementor et les extensions retirent souvent le contour natif du
   focus sans le remplacer : la navigation au clavier devient invisible.
   On le rétablit là où on intervient.
   ================================================================== */

.pa-woo-mc__content-wrapper a:focus-visible,
.pa-woo-mc__content-wrapper button:focus-visible,
.menu-mobile a:focus-visible,
.elementor-location-header a:focus-visible {
	outline: 2px solid var(--pm-rose-action);
	outline-offset: 2px;
}