/**
 * Melchior — charte de l'univers B2C
 *
 * Chargé uniquement sur l'univers Melchior (voir functions.php).
 *
 * Ni couleurs ni polices ne sont définies ici : elles vivent dans les
 * réglages globaux d'Elementor, et ce fichier ne fait que les rebaptiser.
 * La DA modifie une couleur dans Elementor, le site suit — aucune
 * intervention agence (CLAUDE.md §9). Ne jamais recopier un hexadécimal
 * ni un nom de police en dur dans ce fichier.
 *
 * @package Melchior
 * @since 1.0.0
 */

/* ------------------------------------------------------------------ */
/* 1. Variables de la charte                                            */
/* ------------------------------------------------------------------ */

/* Tout est porté par .univers-melchior : rien ne doit fuir sur Fou de Vin. */
.univers-melchior {

	/* --- Sources : Elementor → Réglages du site → Couleurs globales ---
	   Les valeurs de secours sont la seule exception au « aucun hexadécimal
	   dans ce fichier » du §5. Elles ne servent que si la variable Elementor
	   est absente : kit non chargé sur une page, ou globale supprimée puis
	   recréée. Sans elles, la charte tomberait entièrement, en silence.
	   À tenir à jour si la DA change durablement une couleur.

	   Charte « La Box de Balthazar » du 14 octobre 2026 : le Bordeaux et le
	   Champagne. Le Bordeaux est celui des fichiers des logos (#AC2B36, soit
	   le RVB 172 43 54 du guide) ; l'hexadécimal imprimé sur le guide,
	   #B33F43, ne correspond pas à son propre RVB. */
	--mel-rouge: var(--e-global-color-545bbf8, #ac2b36);
	--mel-blanc: var(--e-global-color-0026ac9, #fff5d6);

	/* --- Les deux autres couleurs de la charte : le Sapin et le Rosé ---
	   Mêmes sources, mêmes règles. Les e-mails lisent les quatre mêmes
	   couleurs globales, avec les mêmes secours (mel_email_couleurs(), dans
	   functions.php). */
	--mel-sapin: var(--e-global-color-4c99952, #00615f);
	--mel-rose-charte: var(--e-global-color-133ec4b, #faccc0);

	/* --- Sources : Elementor → Réglages du site → Polices globales ---
	   Le secours est passé en second argument de var(), pas en fin de liste :
	   une variable absente rendrait toute la déclaration invalide et la
	   liste de repli ne servirait à rien. */
	--mel-font-titre: var(--e-global-typography-c876834-font-family, Georgia), serif;
	--mel-font-texte: var(--e-global-typography-3f41795-font-family, system-ui), sans-serif;

	/* Les typographies globales de la boutique, une par rôle. Elementor les
	   redéfinit lui-même sur tablette et téléphone : aucune requête média
	   ici. Les secours ne servent que si une globale disparaît.
	   - H1, titre de page (c876834) ; H2, titre de section (09c5fd1) ;
	     H3, titre de bloc (5422aeb) ; H4, petit titre : étape de la
	     validation, adresse, rubrique du compte, nom d'une box (f9ad880) ;
	   - libellé au-dessus des titres (6c70bbc) ; menu (082304b) ;
	     boutons (015fa51) ; texte courant (3f41795).
	   --mel-font-titre (police du H1) sert aux chiffres et aux libellés en
	   police de titre qui ne sont pas des titres : prix, totaux, frise. */
	--mel-h1-police: var(--e-global-typography-c876834-font-family, Georgia), serif;
	/* Plafonné à 15 % de la largeur de l'écran : un nom de box d'un seul mot
	   long (« Millesimato ») ne se coupe plus en deux sur téléphone si la taille
	   d'Elementor pour cet appareil est trop grande. Sans effet au-delà. */
	--mel-h1-taille: min(var(--e-global-typography-c876834-font-size, 84px), 15vw);
	--mel-h1-graisse: var(--e-global-typography-c876834-font-weight, 800);
	--mel-h1-interligne: var(--e-global-typography-c876834-line-height, 1);
	--mel-h2-police: var(--e-global-typography-09c5fd1-font-family, Georgia), serif;
	--mel-h2-taille: var(--e-global-typography-09c5fd1-font-size, 66px);
	--mel-h2-graisse: var(--e-global-typography-09c5fd1-font-weight, 800);
	--mel-h2-interligne: var(--e-global-typography-09c5fd1-line-height, 1);
	--mel-h3-police: var(--e-global-typography-5422aeb-font-family, Georgia), serif;
	--mel-h3-taille: var(--e-global-typography-5422aeb-font-size, 32px);
	--mel-h3-graisse: var(--e-global-typography-5422aeb-font-weight, 800);
	--mel-h3-interligne: var(--e-global-typography-5422aeb-line-height, 1.1);
	--mel-h4-police: var(--e-global-typography-f9ad880-font-family, Georgia), serif;
	--mel-h4-taille: var(--e-global-typography-f9ad880-font-size, 24px);
	--mel-h4-interligne: var(--e-global-typography-f9ad880-line-height, 1.15);
	--mel-h4-espace: var(--e-global-typography-f9ad880-letter-spacing, 0);
	--mel-label-police: var(--e-global-typography-6c70bbc-font-family, Georgia), serif;
	--mel-label-taille: var(--e-global-typography-6c70bbc-font-size, 17px);
	--mel-label-graisse: var(--e-global-typography-6c70bbc-font-weight, 400);
	--mel-label-interligne: var(--e-global-typography-6c70bbc-line-height, 1.3);
	--mel-menu-police: var(--e-global-typography-082304b-font-family, Georgia), serif;
	--mel-menu-taille: var(--e-global-typography-082304b-font-size, 20px);
	--mel-menu-graisse: var(--e-global-typography-082304b-font-weight, 400);
	--mel-menu-style: var(--e-global-typography-082304b-font-style, normal);
	--mel-menu-decoration: var(--e-global-typography-082304b-text-decoration, none);
	--mel-menu-interligne: var(--e-global-typography-082304b-line-height, 1.2);
	--mel-t-texte: var(--e-global-typography-3f41795-font-size, 18px);
	--mel-texte-graisse: var(--e-global-typography-3f41795-font-weight, 400);
	/* L'interligne du texte : celui de la globale, jamais sous 1,45 fois la
	   taille. Saisi en pixels dans Elementor (16 px pour un texte de 18 px),
	   il serrait les lignes des paragraphes au point de les faire se
	   toucher ; max() garde la valeur d'Elementor dès qu'elle est assez
	   généreuse. */
	--mel-texte-interligne: max(var(--e-global-typography-3f41795-line-height, 1.55em), 1.45em);

	/* --- Rôles ---
	   Le reste du CSS n'utilise QUE ces variables-ci, jamais --mel-rouge ou
	   --mel-blanc : le jour où la charte change de couleur d'accent, il n'y a
	   qu'une ligne à toucher.

	   Les nuances intermédiaires sont CALCULÉES à partir des deux globales,
	   jamais saisies en dur. La DA change le rouge dans Elementor, et bordures,
	   teintes et textes secondaires se réaccordent seuls. C'est ce qui permet
	   de tenir le §5 — aucun hexadécimal ailleurs que dans Elementor. */
	--mel-accent: var(--mel-rouge);
	--mel-fond: var(--mel-blanc);
	--mel-texte: var(--mel-rouge);

	--mel-teinte: color-mix(in srgb, var(--mel-rouge) 5%, var(--mel-blanc));
	/* Le sable des zones média : plus chaud et plus dense que la teinte, pour
	   que les gravures se détachent au lieu de flotter. */
	--mel-sable: color-mix(in srgb, var(--mel-rouge) 12%, var(--mel-blanc));
	/* Les filets de la grille : nets, presque noirs — c'est eux qui donnent
	   l'allure de planche imprimée. */
	--mel-filet: color-mix(in srgb, var(--mel-rouge) 70%, var(--mel-blanc));
	--mel-bordure: color-mix(in srgb, var(--mel-rouge) 18%, var(--mel-blanc));
	/* Les textes secondaires partent du rouge assombri (--mel-profond), et non
	   du rouge : le Bordeaux de la charte est bien plus clair que l'ancien
	   rouge, et mêlé au fond dans les mêmes proportions, il donnait des textes
	   trop pâles pour être lus. Assombri, il retrouve le contraste d'avant. */
	--mel-doux: color-mix(in srgb, var(--mel-profond) 55%, var(--mel-blanc));
	--mel-sourd: color-mix(in srgb, var(--mel-profond) 32%, var(--mel-blanc));
	--mel-accent-fonce: color-mix(in srgb, var(--mel-rouge) 82%, #000);

	--mel-gap: clamp(1.25rem, 3vw, 2rem);
	--mel-radius: 16px;

	/* Rythme propre à la grille : à quatre colonnes, les cartes tombent autour
	   de 240 px. L'espacement général de la page y serait disproportionné. */
	--mel-carte-padding: clamp(1rem, 1.5vw, 1.4rem);

	/* Les cartes de la boutique : un fond à peine plus clair que la page, pour
	   qu'elles s'en détachent sans filet appuyé, et l'arrondi généreux des
	   pastilles de la charte. */
	--mel-carte-fond: color-mix(in srgb, var(--mel-fond) 50%, #fff);
	--mel-carte-rayon: 28px;

	/* Le fond du résumé de la fiche : plus profond que l'accent, pour que la
	   couverture se lise en deux plans — le visuel clair, le texte sombre. */
	--mel-profond: color-mix(in srgb, #000 22%, var(--mel-rouge));

	/* Le second accent : pastilles de statut, étape en cours de la frise,
	   filets de mise en avant, volet de la vérification d'e-mail. C'est le
	   Sapin de la charte. Il remplace le pourpre de l'ancien logo (#890038).
	   Les erreurs, elles, restent dans l'accent : un rouge se lit comme une
	   alerte, un vert non. */
	--mel-second: var(--mel-sapin);
	/* Le deuxième ton des grands titres sur fond sombre, et les statuts
	   « échouée » : le Rosé de la charte. À ne jamais poser en texte sur le
	   fond clair, où il ne se lit pas. */
	--mel-rose: var(--mel-rose-charte);

	/* --- Typographie des boutons ---
	   Source : Elementor → Réglages du site → Polices globales. Un seul point
	   d'entrée pour TOUS les boutons de la boutique — grille, fiche, panier,
	   commande. La DA règle la typographie dans Elementor, l'ensemble suit. */
	--mel-btn-police: var(--e-global-typography-015fa51-font-family, Georgia), serif;
	--mel-btn-taille: var(--e-global-typography-015fa51-font-size, 1.125rem);
	--mel-btn-graisse: var(--e-global-typography-015fa51-font-weight, 400);

	/* --- Les pages de la boutique (section 3 ter) ---
	   Tout le contenu est en pleine largeur, à 64 px des bords (32 px sur
	   tablette, 16 px sur téléphone, comme les sections de la page
	   d'accueil) ; les sections se recouvrent de 56 px. */
	--mel-bord: 64px;
	--mel-contenu: none;
	--mel-cote: var(--mel-bord);
	--mel-recouvre: clamp(28px, 3.9vw, 56px);
	--mel-sec-haut: clamp(3rem, 6.67vw, 96px);
	--mel-sec-bas: calc(var(--mel-recouvre) + clamp(3rem, 6.67vw, 96px));

	/* Les mentions et précisions, sous le texte courant. */
	--mel-t-petit: .9375rem;

	/* Le texte courant des maquettes : le Bordeaux assombri. Les titres
	   restent dans l'accent. */
	--mel-encre: var(--mel-profond);

}

@media (max-width: 1024px) {
	.univers-melchior { --mel-bord: 32px; }
}

@media (max-width: 767px) {
	.univers-melchior { --mel-bord: 16px; }
}

/* Hauteur de l'en-tête collant : c'est sous lui que viennent se caler les
   articles de « Payer la commande ». Valeur en dur,
   à ajuster à l'œil — la mesurer en JavaScript s'est révélée plus fragile
   que fiable. Une valeur trop faible fait passer le contenu sous l'en-tête,
   trop forte laisse un jour par lequel il défile.

   Déclarée sur <html> — et non sur le <body> comme le reste de la charte —
   parce que `scroll-padding-top` ne vaut que là : c'est lui qui retient le
   navigateur de glisser sous l'en-tête ce qu'il fait défiler de lui-même
   (champ qui reçoit le focus, ancre, erreur signalée). Le <body> en hérite.
   Le `:has()` limite la règle aux pages Melchior : rien ne fuit sur Fou de
   Vin. */
/* L'en-tête est fixe (section 10) : `--mel-entete-place` est sa hauteur au
   repos, la place que la page lui réserve en haut ; `--mel-entete-hauteur`
   sa hauteur du moment, resserrée dès qu'on défile. Les deux suivent les
   marges intérieures de Elementor/melchior-entete.json : 34 px, 24 px sur
   tablette, 10 px sur téléphone, autour de boutons de 46 à 48 px.
   `--mel-entete-bas` est le bas de l'en-tête à l'écran : sa hauteur, plus la
   barre d'administration de WordPress quand elle est là. C'est là que se
   collent les éléments qui défilent sous lui. */
html:has(> body.univers-melchior) {
	--mel-entete-place: 114px;
	--mel-entete-hauteur: 114px;
	--mel-entete-bas: calc(var(--wp-admin--admin-bar--height, 0px) + var(--mel-entete-hauteur));
	scroll-padding-top: calc(var(--mel-entete-bas) + 1.5rem);
}

html:has(> body.univers-melchior .mel-entete.is-defile) { --mel-entete-hauteur: 76px; }

@media (max-width: 1024px) {
	html:has(> body.univers-melchior) {
		--mel-entete-place: 94px;
		--mel-entete-hauteur: 94px;
	}

	html:has(> body.univers-melchior .mel-entete.is-defile) { --mel-entete-hauteur: 76px; }
}

/* Sur téléphone, l'en-tête garde la même hauteur : il ne se resserre pas. */
@media (max-width: 767px) {
	html:has(> body.univers-melchior),
	html:has(> body.univers-melchior .mel-entete.is-defile) {
		--mel-entete-place: 68px;
		--mel-entete-hauteur: 68px;
	}
}

/* ------------------------------------------------------------------ */
/* 2. La grille des box                                                 */
/* ------------------------------------------------------------------ */

/* La police du texte courant pour tout ce que la grille ne type pas
   elle-même (description des cartes, barre de tri) : posée par un widget
   Elementor, la grille hériterait sinon de la police système du thème. */
.univers-melchior .mel-boutique {
	container-type: inline-size;
	font-family: var(--mel-font-texte);
}

/* Le widget Elementor qui porte la grille prend toute la largeur de son
   conteneur. Sans largeur fixée, Chrome mesure sa hauteur d'après la largeur
   intrinsèque de la grille, nulle puisqu'elle est un conteneur de requête :
   sur téléphone, la section des box se calculait trop courte et la section
   suivante recouvrait la dernière carte (prix et bouton). */
.univers-melchior .elementor-widget:has(.mel-boutique) { width: 100%; }

/* Les filets entre cartes ne sont pas des bordures : c'est le fond de la
   grille qui affleure dans un écart d'un pixel. Un seul trait partout, y
   compris entre les rangées, sans avoir à deviner quelle carte ouvre une
   ligne — ce que `auto-fit` rend de toute façon impossible à savoir. */
.univers-melchior .mel-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 1px;
	background: var(--mel-filet);
	border: 1px solid var(--mel-filet);
	counter-reset: mel-box;
}

@container (min-width: 560px) {
	.univers-melchior .mel-grille { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 800px) {
	.univers-melchior .mel-grille { grid-template-columns: repeat(3, 1fr); }
}

@container (min-width: 1080px) {
	.univers-melchior .mel-grille { grid-template-columns: repeat(4, 1fr); }
}

.univers-melchior .mel-carte {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: var(--mel-carte-padding);
	background: var(--mel-fond);
	counter-increment: mel-box;
	transition: background-color .3s ease;
}

/* --- En-tête : index et état --- */

.univers-melchior .mel-carte__entete {
	display: flex;
	gap: .5rem;
	align-items: center;
	justify-content: space-between;
	min-height: 1.6rem;
}

/* L'index est un compteur CSS : la numérotation suit l'ordre d'affichage,
   quel que soit le tri choisi, et rien ne transite par le PHP. */
.univers-melchior .mel-carte__index::before {
	content: counter(mel-box, decimal-leading-zero);
	color: var(--mel-sourd);
	font-family: var(--mel-font-texte);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.univers-melchior .mel-carte__etat {
	font-family: var(--mel-font-texte);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* En stock ne mérite pas une pastille : c'est l'état normal, il s'énonce
   sans insister. Les deux autres appellent une action, ils s'affichent. */
.univers-melchior .mel-carte__etat--dispo { color: var(--mel-sourd); }

.univers-melchior .mel-carte__etat--rupture { color: var(--mel-doux); }

/* Stock faible : en couleur d'accent, sans pastille — une alerte, pas une
   mise en avant. */
.univers-melchior .mel-carte__etat--stock-bas { color: var(--mel-accent); }

.univers-melchior .mel-carte__etat--promo,
.univers-melchior .mel-carte__etat--chouchou {
	padding: .4em .8em;
	background: var(--mel-accent);
	border-radius: 100px;
	color: var(--mel-fond);
}

/* --- Zone média --- */

/* Angles vifs, pas de rayon : c'est ce qui donne à la grille son allure de
   planche imprimée plutôt que de catalogue. */
.univers-melchior .mel-carte__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: var(--mel-sable);
	overflow: hidden;
}

.univers-melchior .mel-carte__lien {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* L'image remplit le cadre. Aucun mode de fusion : le catalogue mêle gravures
   et photographies, et `multiply` — utile tant que le fond blanc des gravures
   devait se fondre dans le sable — écrase les photos sombres. L'image couvrant
   désormais tout le cadre, le fond ne transparaît plus : le mélange n'a plus
   d'objet. */
.univers-melchior .mel-carte__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.univers-melchior .mel-carte:hover .mel-carte__image { transform: scale(1.04); }

/* --- Corps --- */

/* Colonne extensible : c'est elle qui permet au pied de tomber en bas, quelle
   que soit la longueur du titre ou de la description. */
.univers-melchior .mel-carte__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5rem;
}

.univers-melchior .mel-carte__titre {
	margin: 0;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.1rem, 1.6cqi + .6rem, 1.5rem);
	line-height: 1.05;
	text-transform: none;
	overflow-wrap: anywhere;
}

.univers-melchior .mel-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.univers-melchior .mel-carte__titre a:hover { opacity: .7; }

/* La description courte tient sur deux lignes au plus : au-delà, les cartes
   d'une même rangée cessent de se répondre. */
.univers-melchior .mel-carte__texte {
	display: -webkit-box;
	margin: 0;
	color: var(--mel-doux);
	font-size: .8rem;
	line-height: 1.45;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* --- Pied : prix et achat sur une même ligne de base --- */

.univers-melchior .mel-carte__pied {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
	padding-top: .5rem;
}

.univers-melchior .mel-carte__prix {
	margin: 0;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.5rem, 1.8cqi + .9rem, 2.1rem);
	line-height: 1;
}

.univers-melchior .mel-carte__prix del {
	margin-right: .35em;
	color: var(--mel-sourd);
	font-size: .6em;
}

.univers-melchior .mel-carte__prix ins { text-decoration: none; }

/* « par mois, hors frais de livraison », sous le montant, partout où le prix
   d'une box s'affiche. En texte courant : elle hérite de sa couleur, mais pas
   de la police ni de la graisse des montants. */
.univers-melchior .mel-prix-mention {
	display: block;
	margin-top: 6px;
	font-family: var(--mel-font-texte);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	white-space: normal;
}

.univers-melchior .mel-carte__achat { flex: none; }

/* Bouton en pastille. Ni taille ni graisse ne sont redéfinies : elles
   viennent de la globale Elementor, comme sur tous les boutons de la
   boutique. Seule la forme change. */
.univers-melchior .mel-carte__achat .mel-btn {
	padding: .8em 1.5em;
	border-radius: 100px;
	letter-spacing: .08em;
}

.univers-melchior .mel-carte__achat .mel-btn::after {
	display: inline-block;
	width: .9em;
	height: .9em;
	margin-left: .5em;
	background: currentColor;
	vertical-align: -.1em;
	content: "";
	-webkit-mask: var(--mel-masque-fleche) center / contain no-repeat;
	mask: var(--mel-masque-fleche) center / contain no-repeat;
}

.univers-melchior .mel-carte__achat .mel-btn--sourd::after { content: none; }

/* --- La box mise en avant : traitement inversé --- */

.univers-melchior .mel-carte.is-chouchou {
	background: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-carte.is-chouchou .mel-carte__titre,
.univers-melchior .mel-carte.is-chouchou .mel-carte__prix { color: var(--mel-fond); }

.univers-melchior .mel-carte.is-chouchou .mel-carte__texte,
.univers-melchior .mel-carte.is-chouchou .mel-carte__index::before {
	color: color-mix(in srgb, var(--mel-fond) 65%, var(--mel-accent));
}

.univers-melchior .mel-carte.is-chouchou .mel-carte__etat--chouchou,
.univers-melchior .mel-carte.is-chouchou .mel-carte__etat--promo {
	background: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-carte.is-chouchou .mel-carte__media {
	background: color-mix(in srgb, #000 12%, var(--mel-accent));
}

.univers-melchior .mel-carte.is-chouchou .mel-btn {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-carte.is-chouchou .mel-btn:hover {
	background: transparent;
	color: var(--mel-fond);
}

/* --- Box épuisée --- */

.univers-melchior .mel-carte.is-epuisee .mel-carte__image { opacity: .35; }

.univers-melchior .mel-carte.is-epuisee .mel-carte__titre,
.univers-melchior .mel-carte.is-epuisee .mel-carte__prix { color: var(--mel-sourd); }

/* --- La boutique : les cartes de la charte « La Box de Balthazar » ---

   La grille de [mel_grille] et celle des suggestions de la fiche (toutes deux
   dans .mel-boutique) quittent la planche à filets pour des cartes
   arrondies, séparées par un écart. Le panier, qui reprend la même carte en
   ligne hors de .mel-boutique, garde sa présentation. */

.univers-melchior .mel-boutique .mel-grille {
	gap: clamp(1.25rem, 2.5cqi, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	background: none;
	border: 0;
}

/* Deux colonnes, puis trois : à quatre, la carte devient trop étroite pour
   son prix et son bouton sur une même ligne. */
@container (min-width: 620px) {
	.univers-melchior .mel-boutique .mel-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 940px) {
	.univers-melchior .mel-boutique .mel-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Chaque carte prend une couleur de la charte, dans l'ordre de la grille :
   Bordeaux, Sapin, Rosé, puis de nouveau. Les variables de la carte portent
   tout le reste (texte, pastilles, bouton, squelette) : une couleur de plus
   au cycle ne demande qu'une règle de plus. */
.univers-melchior .mel-boutique .mel-carte {
	--mel-carte-couleur: var(--mel-rouge);
	--mel-carte-encre: var(--mel-blanc);
	--mel-carte-texte: color-mix(in srgb, var(--mel-blanc) 82%, var(--mel-rouge));
	--mel-carte-dispo-fond: var(--mel-sapin);
	--mel-carte-dispo-encre: var(--mel-blanc);
	--mel-carte-alerte-fond: var(--mel-blanc);
	--mel-carte-alerte-encre: var(--mel-rouge);
	--mel-carte-btn-fond: var(--mel-blanc);
	--mel-carte-btn-encre: var(--mel-rouge);
	--mel-carte-btn-survol: var(--mel-rose-charte);
	--mel-os: color-mix(in srgb, var(--mel-blanc) 16%, transparent);
	--mel-os-clair: color-mix(in srgb, var(--mel-blanc) 6%, transparent);

	position: relative;
	gap: 0;
	padding: 18px;
	background: var(--mel-carte-couleur);
	border: 0;
	border-radius: 36px;
	color: var(--mel-carte-encre);
	transition: none;
}

.univers-melchior .mel-boutique .mel-carte:nth-child(3n+2) {
	--mel-carte-couleur: var(--mel-sapin);
	--mel-carte-texte: color-mix(in srgb, var(--mel-blanc) 82%, var(--mel-sapin));
	--mel-carte-dispo-fond: var(--mel-rose-charte);
	--mel-carte-dispo-encre: var(--mel-rouge);
	--mel-carte-btn-encre: var(--mel-sapin);
}

.univers-melchior .mel-boutique .mel-carte:nth-child(3n) {
	--mel-carte-couleur: var(--mel-rose-charte);
	--mel-carte-encre: var(--mel-rouge);
	--mel-carte-texte: var(--mel-profond);
	--mel-carte-alerte-fond: var(--mel-rouge);
	--mel-carte-alerte-encre: var(--mel-blanc);
	--mel-carte-btn-fond: var(--mel-rouge);
	--mel-carte-btn-encre: var(--mel-blanc);
	--mel-carte-btn-survol: var(--mel-profond);
	--mel-os: color-mix(in srgb, var(--mel-rouge) 14%, transparent);
	--mel-os-clair: color-mix(in srgb, var(--mel-rouge) 6%, transparent);
}

/* La photo, en retrait dans la carte et arrondie. */
.univers-melchior .mel-boutique .mel-carte__media {
	background: color-mix(in srgb, #000 14%, var(--mel-carte-couleur));
	border-radius: 24px;
}

/* Aucun effet au survol de la carte : ni zoom de la photo, ni ombre. Seuls
   le titre et le bouton réagissent, comme tout lien. */
.univers-melchior .mel-boutique .mel-carte__image { transition: none; }

.univers-melchior .mel-boutique .mel-carte:hover .mel-carte__image { transform: none; }

/* L'état en pastille, posé sur la photo. L'index n'a plus cours : sans
   filets, la numérotation ne rythme plus rien. */
.univers-melchior .mel-boutique .mel-carte__entete {
	position: absolute;
	top: calc(18px + 1rem);
	left: calc(18px + 1rem);
	z-index: 2;
	min-height: 0;
	pointer-events: none;
}

.univers-melchior .mel-boutique .mel-carte__index { display: none; }

.univers-melchior .mel-boutique .mel-carte__etat {
	padding: .45em 1em;
	border-radius: 100px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	text-transform: none;
}

/* Chaque état a son fond, choisi pour contraster avec la couleur de la carte
   et se lire sur n'importe quelle photo. */
.univers-melchior .mel-boutique .mel-carte__etat--dispo {
	background: var(--mel-carte-dispo-fond);
	color: var(--mel-carte-dispo-encre);
}

.univers-melchior .mel-boutique .mel-carte__etat--promo,
.univers-melchior .mel-boutique .mel-carte__etat--stock-bas,
.univers-melchior .mel-boutique .mel-carte__etat--chouchou,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-carte__etat--chouchou,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-carte__etat--promo {
	background: var(--mel-carte-alerte-fond);
	color: var(--mel-carte-alerte-encre);
}

.univers-melchior .mel-boutique .mel-carte__etat--rupture {
	background: var(--mel-blanc);
	color: var(--mel-profond);
}

.univers-melchior .mel-boutique .mel-carte__corps {
	gap: .7rem;
	padding: 1.6rem .75rem .6rem;
}

.univers-melchior .mel-boutique .mel-carte__titre,
.univers-melchior .mel-boutique .mel-carte__prix,
.univers-melchior .mel-boutique .mel-carte.is-epuisee .mel-carte__titre,
.univers-melchior .mel-boutique .mel-carte.is-epuisee .mel-carte__prix {
	color: var(--mel-carte-encre);
}

.univers-melchior .mel-boutique .mel-carte__titre {
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
	text-transform: none;
	overflow-wrap: break-word;
}

.univers-melchior .mel-boutique .mel-carte__titre a:hover,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-carte__titre a:hover {
	opacity: .8;
	color: inherit;
}

.univers-melchior .mel-boutique .mel-carte__texte,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-carte__texte {
	color: var(--mel-carte-texte);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.univers-melchior .mel-boutique .mel-carte__pied {
	gap: 1rem;
	align-items: center;
	padding-top: 1.1rem;
}

.univers-melchior .mel-boutique .mel-carte__prix {
	font-size: clamp(1.6rem, .8cqi + 1.3rem, 2rem);
	font-weight: 800;
}

.univers-melchior .mel-boutique .mel-carte__prix del {
	color: color-mix(in srgb, var(--mel-carte-encre) 60%, var(--mel-carte-couleur));
}

/* Le bouton en pastille, en minuscules comme le reste de la charte, sans
   chevron, dans les couleurs de la carte. */
.univers-melchior .mel-boutique .mel-carte__achat .mel-btn,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-btn {
	padding: .85em 1.45em;
	background: var(--mel-carte-btn-fond);
	border-color: var(--mel-carte-btn-fond);
	color: var(--mel-carte-btn-encre);
	letter-spacing: .01em;
	text-transform: none;
}

.univers-melchior .mel-boutique .mel-carte__achat a.mel-btn:hover,
.univers-melchior .mel-boutique .mel-carte__achat a.mel-btn:focus,
.univers-melchior .mel-boutique .mel-carte.is-chouchou .mel-btn:hover {
	background: var(--mel-carte-btn-survol);
	border-color: var(--mel-carte-btn-survol);
	color: var(--mel-carte-btn-encre);
}

.univers-melchior .mel-boutique .mel-carte:nth-child(3n) .mel-carte__achat a.mel-btn:hover,
.univers-melchior .mel-boutique .mel-carte:nth-child(3n) .mel-carte__achat a.mel-btn:focus {
	color: var(--mel-blanc);
}

.univers-melchior .mel-boutique .mel-carte__achat .mel-btn:focus-visible {
	outline-color: var(--mel-carte-encre);
}

.univers-melchior .mel-boutique .mel-carte__achat .mel-btn::after { content: none; }

/* Épuisée : bouton au trait dans l'encre de la carte, photo effacée. La
   carte garde sa couleur : la pastille « Rupture de stock » suffit à la
   signaler. */
.univers-melchior .mel-boutique .mel-carte__achat .mel-btn--sourd {
	background: transparent;
	border: 2px solid var(--mel-carte-encre);
	color: var(--mel-carte-encre);
}

.univers-melchior .mel-boutique .mel-carte.is-epuisee .mel-carte__image { opacity: .45; }

/* --- La grille en liste, la carte en ligne : le panier --- */

/* Une seule colonne, quelle que soit la largeur. Le sélecteur double la
   classe pour l'emporter sur les requêtes de conteneur de la grille. */
.univers-melchior .mel-grille.mel-grille--liste {
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	background: none;
	border: 0;
}

/* Maquette « Panier » : une carte Rosé arrondie par box, la photo à gauche
   (170 × 214 px), à droite l'état et le retrait, le nom, la référence, la
   description, puis la quantité et le montant. */
.univers-melchior .mel-grille--liste .mel-carte {
	padding: 18px;
	background: var(--mel-rose);
	border-radius: 32px;
	color: var(--mel-encre);
}

.univers-melchior .mel-carte__ligne {
	display: grid;
	flex: 1;
	grid-template-columns: clamp(6rem, 24cqi, 170px) minmax(0, 1fr);
	gap: clamp(1rem, 3.2cqi, 26px);
}

.univers-melchior .mel-grille--liste .mel-carte__media {
	align-self: start;
	aspect-ratio: 170 / 214;
	background: color-mix(in srgb, var(--mel-accent) 12%, var(--mel-rose));
	border-radius: 22px;
}

.univers-melchior .mel-grille--liste .mel-carte:hover .mel-carte__image { transform: none; }

.univers-melchior .mel-grille--liste .mel-carte__corps {
	gap: 8px;
	padding: 6px 6px 4px 0;
}

/* L'état à gauche, le retrait à droite. */
.univers-melchior .mel-carte__tete {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.univers-melchior .mel-carte__tete .product-remove { flex: none; }

.univers-melchior .mel-grille--liste .mel-carte__entete { min-height: 0; }

.univers-melchior .mel-grille--liste .mel-carte__index { display: none; }

.univers-melchior .mel-grille--liste .mel-carte__etat {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.univers-melchior .mel-grille--liste .mel-carte__etat--dispo {
	background: var(--mel-second);
	color: var(--mel-fond);
}

.univers-melchior .mel-grille--liste .mel-carte__etat--stock-bas,
.univers-melchior .mel-grille--liste .mel-carte__etat--promo,
.univers-melchior .mel-grille--liste .mel-carte__etat--chouchou {
	background: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-grille--liste .mel-carte__etat--rupture {
	background: var(--mel-fond);
	color: var(--mel-profond);
}

/* Le retrait : un rond Champagne, la croix en Bordeaux. */
.univers-melchior .woocommerce .mel-grille--liste a.remove {
	width: 40px;
	height: 40px;
	background: var(--mel-fond);
	border: 0;
	color: var(--mel-accent);
	font-size: 1.4rem;
}

.univers-melchior .woocommerce .mel-grille--liste a.remove:hover,
.univers-melchior .woocommerce .mel-grille--liste a.remove:focus {
	background: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-grille--liste .mel-carte__titre {
	color: var(--mel-accent);
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
}

.univers-melchior .mel-grille--liste .mel-ligne__ugs {
	margin: 0;
	color: var(--mel-second);
	font-size: var(--mel-t-petit);
}

/* La description en entier sur deux lignes et demie au plus. */
.univers-melchior .mel-grille--liste .mel-carte__texte {
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* La quantité à gauche, le montant à droite. */
.univers-melchior .mel-grille--liste .mel-carte__pied {
	flex-wrap: nowrap;
	align-items: center;
	padding-top: 4px;
}

.univers-melchior .mel-grille--liste .mel-carte__montant { text-align: right; }

.univers-melchior .mel-grille--liste .mel-carte__prix {
	color: var(--mel-accent);
	font-size: 1.875rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Prix unitaire au-dessus du total de la ligne : secondaire, mais lisible. */
.univers-melchior .mel-carte__detail {
	margin: 0;
	padding-bottom: 2px;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.3;
}

.univers-melchior .mel-carte__detail .woocommerce-Price-amount { font-weight: 400; }

/* L'incrémenteur au trait Bordeaux : deux ronds et le chiffre. */
.univers-melchior .mel-grille--liste .mel-quantite {
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: transparent;
	border: 1.5px solid var(--mel-accent);
	border-radius: 999px;
}

.univers-melchior .mel-grille--liste .mel-quantite__btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--mel-accent);
	font-weight: 600;
}

.univers-melchior .mel-grille--liste .mel-quantite .qty {
	width: 26px;
	padding: 0;
	color: var(--mel-accent);
	font-weight: 600;
}

.univers-melchior .mel-grille--liste .mel-quantite__btn:hover {
	background: color-mix(in srgb, var(--mel-accent) 10%, var(--mel-rose));
	color: var(--mel-accent);
}

/* Écran étroit : la photo rapetisse, le montant passe sous la quantité. */
@container (max-width: 420px) {
	.univers-melchior .mel-grille--liste .mel-carte__pied { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ */
/* 3. Boutons                                                           */
/* ------------------------------------------------------------------ */

.univers-melchior .mel-btn {
	display: block;
	padding: .9em 1.2em;
	background: var(--mel-accent);
	color: var(--mel-fond);
	border: 1px solid var(--mel-accent);
	border-radius: 100px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;

	/* Bernier : fonte display, une seule graisse. Pas de font-weight au-delà
	   de 400, le navigateur synthétiserait un faux gras qui déforme le dessin
	   des lettres. La lisibilité se gagne à l'interlettrage. */
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: .01em;
	text-transform: none;
}

.univers-melchior a.mel-btn:hover,
.univers-melchior a.mel-btn:focus {
	background: var(--mel-accent-fonce);
	border-color: var(--mel-accent-fonce);
	color: var(--mel-fond);
}

.univers-melchior .mel-btn:focus-visible {
	outline: 2px solid var(--mel-texte);
	outline-offset: 3px;
}

/* Rendus par [mel_prix] et [mel_achat], pour un placement hors grille. */
.univers-melchior .mel-prix {
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: 1.3rem;
}

.univers-melchior .mel-rupture {
	display: inline-block;
	color: var(--mel-sourd);
	font-family: var(--mel-font-texte);
	font-size: .9rem;
}

/* Indisponible : même gabarit, donc les cartes gardent la même hauteur. */
.univers-melchior .mel-btn--sourd {
	background: transparent;
	border-color: var(--mel-bordure);
	color: var(--mel-sourd);
	cursor: not-allowed;
}

/* Action secondaire : même gabarit, simple filet. Les sélecteurs de survol
   et de focus doublent la classe pour passer devant ceux de Hello Elementor
   sur les `button`. */
.univers-melchior .mel-btn--ligne {
	background: transparent;
	border-color: var(--mel-accent);
	color: var(--mel-texte);
}

.univers-melchior .mel-btn.mel-btn--ligne:hover,
.univers-melchior .mel-btn.mel-btn--ligne:focus {
	background: var(--mel-teinte);
	border-color: var(--mel-accent);
	color: var(--mel-texte);
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-carte,
	.univers-melchior .mel-carte__image,
	.univers-melchior .mel-btn { transition: none; }
	.univers-melchior .mel-carte:hover .mel-carte__image { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 3 bis. Illustrations                                                 */
/* ------------------------------------------------------------------ */

/* Les feuilles de vigne et les sigles de la charte « La Box de Balthazar »,
   livrés avec le thème (assets/img/), dans les couleurs fournies par la DA.
   Posés en fond d'un élément vide : décoratifs, sans texte alternatif ni
   clic. Le rapport largeur / hauteur de chaque dessin est repris : il suffit
   de fixer l'une des deux. Les gravures de l'ancienne charte (montagnes,
   grappes, vigne, vin et fromage) ne sont plus employées. */
.univers-melchior .mel-illu {
	display: block;
	background: center / contain no-repeat;
	pointer-events: none;
}

.univers-melchior .mel-illu--feuille-rose {
	aspect-ratio: 89.87 / 86.7;
	background-image: url("../img/feuille-rose.svg");
}

.univers-melchior .mel-illu--sigle-bordeaux,
.univers-melchior .mel-illu--sigle-champagne { aspect-ratio: 63.69 / 119.36; }

.univers-melchior .mel-illu--sigle-bordeaux { background-image: url("../img/sigle-bordeaux.svg"); }
.univers-melchior .mel-illu--sigle-champagne { background-image: url("../img/sigle-champagne.svg"); }

/* ------------------------------------------------------------------ */
/* 3 quater. Pictogrammes                                               */
/* ------------------------------------------------------------------ */

/* Les pictogrammes de mel_icone() (functions.php) : ceux de Phosphor Icons,
   en graisse « bold », dans la couleur du texte. Ils occupent un carré de
   1em : la taille suit celle du texte, ou se règle à la pièce. */
.univers-melchior .mel-icone {
	display: block;
	flex: none;
	width: 1em;
	height: 1em;
}

/* Les mêmes dessins en masques, pour les flèches, le chevron, la coche et
   les étoiles posés en pseudo-élément : le fond (`currentColor` ou une couleur de la charte)
   prend la forme du masque. Le noir des tracés ne sert qu'à dessiner le
   masque, il ne s'affiche jamais. */
.univers-melchior {
	--mel-masque-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
	--mel-masque-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
	--mel-masque-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
	--mel-masque-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'/%3E%3C/svg%3E");
	--mel-masque-etoile-pleine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E");
}

/* --- Où ils se posent --- */

/* Les flèches de la galerie, l'incrémenteur, le retrait du panier, la
   fermeture du panneau : centrées dans leur rond. */
.univers-melchior .mel-galerie__fleche .mel-icone { width: 24px; height: 24px; }

.univers-melchior .mel-quantite__btn {
	display: inline-grid;
	place-items: center;
}

.univers-melchior .mel-quantite__btn .mel-icone {
	width: 16px;
	height: 16px;
}

.univers-melchior .mel-tiroir .mel-quantite__btn .mel-icone {
	width: 14px;
	height: 14px;
}

.univers-melchior .woocommerce a.remove .mel-icone,
.univers-melchior .mel-tiroir__fermer .mel-icone {
	width: 18px;
	height: 18px;
}

/* Le crayon des lignes de la validation, le cadenas du volet de la
   vérification. */
.univers-melchior .mel-resume__modifier .mel-icone { width: 20px; height: 20px; }

.univers-melchior .mel-verification__cadenas .mel-icone { width: 26px; height: 26px; }

/* À côté d'un texte : « Paiement sécurisé », l'avertissement de « Payer la
   commande », le refus d'un code promo. */
.univers-melchior .mel-validation__securise .mel-icone,
.univers-melchior .mel-payer__avertissement .mel-icone {
	width: 1.1em;
	height: 1.1em;
}

/* Dans une ligne de texte : « Voir tous les produits → », la croix d'une
   facette active. */
.univers-melchior .mel-similaires__lien .mel-icone,
.univers-melchior .mel-facette__croix .mel-icone {
	display: inline-block;
	width: .95em;
	height: .95em;
	vertical-align: -.15em;
}

.univers-melchior .mel-facette__croix .mel-icone { width: .8em; height: .8em; }

/* Dans un bouton, après le libellé. */
.univers-melchior .mel-verification__fleche { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ */
/* 3 ter. Les pages de la boutique : bandeau et sections                */
/* ------------------------------------------------------------------ */

/* La construction commune des maquettes (artefact « La Box de Balthazar,
   pages de la boutique ») : un bandeau Rosé en tête, dans le prolongement de
   l'en-tête, puis des sections de couleur pleine largeur, arrondies en haut,
   dont chacune recouvre le bas de la précédente. Le pied de page vient
   recouvrir la dernière. Fiche produit, panier, compte et pages de la
   commande reprennent ces classes. */

/* Les feuilles qui débordent sont rognées au bord de l'écran. `clip` et
   non `hidden` : il ne crée pas de zone de défilement, et laisse fonctionner
   ce qui se colle à l'intérieur (bandeau, carton). */
.univers-melchior .mel-bandeau {
	position: relative;
	overflow-x: clip;
	padding: clamp(2rem, 3.9vw, 56px) var(--mel-bord) calc(var(--mel-recouvre) + clamp(2rem, 3.9vw, 56px));
	background: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-bandeau__in {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	max-width: var(--mel-contenu);
	margin-inline: auto;
}

.univers-melchior .mel-bandeau__titre {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* À droite du titre : le nombre d'articles, ou le prénom du client. */
.univers-melchior .mel-bandeau__nombre {
	margin: 0;
	color: var(--mel-second);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.2;
}

/* Le surtitre des maquettes : petites capitales espacées, au-dessus d'un
   titre ou d'un bloc. */
/* L'écart sous le surtitre est une marge intérieure : c'est un <p>, et
   les marges basses des paragraphes sont annulées sur tout le site
   (CLAUDE.md §8-11). */
.univers-melchior .mel-surtitre {
	margin: 0;
	padding-bottom: 12px;
	color: var(--mel-second);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

.univers-melchior .mel-sec {
	position: relative;
	overflow-x: clip;
	margin-top: calc(-1 * var(--mel-recouvre));
	padding: var(--mel-sec-haut) var(--mel-bord) var(--mel-sec-bas);
	background: var(--mel-fond);
	border-radius: var(--mel-recouvre) var(--mel-recouvre) 0 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: var(--mel-texte-graisse);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-sec--rose { background: var(--mel-rose); }

.univers-melchior .mel-sec--sapin {
	background: var(--mel-second);
	color: var(--mel-fond);
}

.univers-melchior .mel-sec--bordeaux {
	background: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-sec__in {
	position: relative;
	max-width: var(--mel-contenu);
	margin-inline: auto;
}

/* La feuille Sapin d'un titre de page ou de section : posée sur le coin
   haut droit du dernier mot, à l'échelle du titre. */
.univers-melchior :is(.mel-bandeau__titre, .mel-sec__titre) {
	position: relative;
	width: fit-content;
	max-width: 100%;
}

.univers-melchior :is(.mel-bandeau__titre, .mel-sec__titre) > .mel-feuille {
	top: -.4em;
	right: -.75em;
	--mel-feuille-l: .8em;
}

/* L'en-tête d'une section : le titre à gauche, un lien ou une note à droite. */
.univers-melchior .mel-sec__entete {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(1.75rem, 2.8vw, 40px);
}

.univers-melchior .mel-sec__titre {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h2-police);
	font-size: var(--mel-h2-taille);
	font-weight: var(--mel-h2-graisse);
	line-height: var(--mel-h2-interligne);
	letter-spacing: 0;
	text-transform: none;
}

/* Le pied de page de la boutique (conteneur `mel-pied`, UAE) recouvre la
   dernière section, comme sur l'accueil, où la règle vient du gabarit
   Elementor. Limité aux pages construites en sections : ailleurs, il
   mordrait sur le contenu. */
body.univers-melchior:has(.mel-sec, .mel-panier-vide, .mel-verification) .mel-pied {
	position: relative;
	margin-top: calc(-1 * var(--mel-recouvre));
}

/* Les boutons des maquettes : 58 px de haut, 46 px pour la petite taille.
   Limités aux pages construites en sections et aux écrans du panier vide,
   pour ne pas toucher aux cartes de l'accueil. */
.univers-melchior :is(.mel-sec, .mel-bandeau, .mel-panier-vide) .mel-btn {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 32px;
	border-width: 2px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	line-height: 1.1;
}

.univers-melchior :is(.mel-sec, .mel-bandeau, .mel-panier-vide) .mel-btn.mel-btn--s {
	min-height: 46px;
	padding: 0 22px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
}

/* Au trait, dans la couleur du texte qui l'entoure. */
.univers-melchior :is(.mel-sec, .mel-bandeau, .mel-panier-vide) .mel-btn.mel-btn--ligne {
	background: transparent;
	border-color: currentColor;
	color: var(--mel-accent);
}

.univers-melchior :is(.mel-sec, .mel-bandeau, .mel-panier-vide) .mel-btn.mel-btn--ligne:hover,
.univers-melchior :is(.mel-sec, .mel-bandeau, .mel-panier-vide) .mel-btn.mel-btn--ligne:focus {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

/* Les pastilles d'état des maquettes. */
.univers-melchior .mel-pastille {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--mel-second);
	border-radius: 999px;
	color: var(--mel-fond);
	font-family: var(--mel-font-texte);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
}

.univers-melchior .mel-pastille--rose {
	background: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-pastille--fond {
	background: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-pastille--trait {
	background: transparent;
	border: 1.5px solid currentColor;
	color: var(--mel-second);
}

/* Les feuilles de vigne posées en décor sur les sections : une pseudo-
   classe par emplacement, le dessin et l'angle en variables. */
.univers-melchior .mel-feuille {
	position: absolute;
	z-index: 1;
	width: var(--mel-feuille-l, 70px);
	aspect-ratio: 89.87 / 86.7;
	background: var(--mel-feuille, url("../img/feuille-sapin.svg")) center / contain no-repeat;
	transform: rotate(var(--mel-feuille-a, 24deg));
	pointer-events: none;
}

.univers-melchior .mel-feuille--rose { --mel-feuille: url("../img/feuille-rose.svg"); }
.univers-melchior .mel-feuille--bordeaux { --mel-feuille: url("../img/feuille-bordeaux.svg"); }
.univers-melchior .mel-feuille--champagne { --mel-feuille: url("../img/feuille-champagne.svg"); }

/* Écran étroit : les feuilles rapetissent, les plus petites disparaissent. */
@media (max-width: 767px) {
	.univers-melchior .mel-feuille { width: calc(var(--mel-feuille-l, 70px) * .6); }
}

/* ------------------------------------------------------------------ */
/* 4. La fiche d'une box                                                */
/* ------------------------------------------------------------------ */

/* Maquette « Fiche d'une box » : le nom en très grand sur le Rosé, la
   galerie en bande sur le Sapin, la description et le bloc d'achat
   Bordeaux, les avis sur le Rosé, puis les autres produits.

   Le balisage vient de single-product.php et ne porte aucune classe de
   WooCommerce hors composants : rien ici n'a de surcharge à négocier. */

.univers-melchior .mel-fiche {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
}

/* La notice se pose PAR-DESSUS le bandeau au lieu de le repousser : elle est
   éphémère, elle n'a pas à réserver de place. */
.univers-melchior .mel-fiche__notices {
	position: absolute;
	top: 1.5rem;
	right: var(--mel-bord);
	left: var(--mel-bord);
	z-index: 30;
}

.univers-melchior .mel-fiche__notices:not(:has(*)) { display: none; }

/* --- 4.1 Bandeau de titre --- */

/* Il défile avec la page : collé sous l'en-tête, le nom en très grand
   occupait le tiers de l'écran. */
/* La feuille Sapin, au-dessus du nom. */
/* Raccourci vers les avis. */
.univers-melchior .mel-bandeau__note {
	display: flex;
	flex: none;
	gap: 12px;
	align-items: center;
	padding-bottom: .4em;
	color: var(--mel-second);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 600;
	text-decoration: none;
}

.univers-melchior .mel-bandeau__note .mel-etoiles {
	color: var(--mel-second);
	font-size: 1.375rem;
}

.univers-melchior .mel-bandeau__note .mel-bandeau__nombre {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.univers-melchior .mel-bandeau__note:hover { color: var(--mel-accent); }

.univers-melchior .mel-bandeau__note:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 3px;
}

/* Sans quoi le lien amènerait les avis sous l'en-tête, qui les masquerait. */
.univers-melchior .mel-avis #reviews {
	scroll-margin-top: calc(var(--mel-entete-bas) + 2rem);
}

/* --- 4.2 Galerie en bande défilante --- */

/* La bande part de la marge gauche et file jusqu'au bord droit de l'écran.
   Les flèches viennent dessous, à droite, sans toucher aux photos. */
.univers-melchior .mel-galerie {
	padding: clamp(2.5rem, 5.56vw, 80px) 0 calc(var(--mel-recouvre) + clamp(2rem, 3.33vw, 48px));
}

/* scroll-snap porte tout le comportement : molette, doigt et clavier
   fonctionnent sans JavaScript. Le script ne pilote que les deux flèches. */
.univers-melchior .mel-galerie__bande {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0 var(--mel-bord);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mel-bord);
	scrollbar-width: none;
	counter-reset: mel-panneau;
}

.univers-melchior .mel-galerie__bande::-webkit-scrollbar { display: none; }

.univers-melchior .mel-galerie__bande:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 4px;
}

.univers-melchior .mel-galerie__panneau {
	position: relative;
	display: flex;
	flex: 0 0 clamp(240px, 26.4vw, 380px);
	flex-direction: column;
	gap: 14px;
	scroll-snap-align: start;
	counter-increment: mel-panneau;
}

/* Le numéro est un compteur : il suit l'ordre réel des visuels, sans donnée
   à transporter depuis le PHP. Le libellé est la légende de l'image dans la
   médiathèque. */
.univers-melchior .mel-galerie__legende {
	display: block;
	color: var(--mel-rose);
	font-family: var(--mel-font-titre);
	font-size: 1.125rem;
	letter-spacing: .08em;
	line-height: 1.3;
}

.univers-melchior .mel-galerie__legende::before { content: counter(mel-panneau, decimal-leading-zero) " — "; }

.univers-melchior .mel-galerie__legende:empty::before { content: counter(mel-panneau, decimal-leading-zero); }

.univers-melchior .mel-galerie__media {
	margin: 0;
	aspect-ratio: 380 / 506;
	background: var(--mel-accent);
	border-radius: 30px;
	overflow: hidden;
}

/* Les fonds alternent d'un panneau à l'autre. Ils ne se voient qu'avec des
   visuels détourés ; sur une photographie pleine, l'image les recouvre. */
.univers-melchior .mel-galerie__panneau:nth-child(3n) .mel-galerie__media { background: var(--mel-rose); }

.univers-melchior .mel-galerie__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

.univers-melchior .mel-galerie__nav {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding: clamp(1.25rem, 1.67vw, 24px) var(--mel-bord) 0;
}

.univers-melchior .mel-galerie__fleche {
	display: flex;
	width: clamp(48px, 4.17vw, 60px);
	height: clamp(48px, 4.17vw, 60px);
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--mel-second);
	border: 2px solid var(--mel-fond);
	border-radius: 50%;
	color: var(--mel-fond);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* La flèche précédente au trait, la suivante pleine : c'est le geste
   attendu. Le clic ne les fait pas changer d'aspect (`:focus` reste sans
   effet, seul le clavier montre un contour) : sans quoi la flèche cliquée
   restait pleine, et les deux se confondaient. Hello Elementor colore les
   boutons au survol et au focus : les états sont tous redéclarés. */
.univers-melchior .mel-galerie__fleche:focus {
	background: var(--mel-second);
	border-color: var(--mel-fond);
	color: var(--mel-fond);
	outline: none;
}

.univers-melchior .mel-galerie__fleche + .mel-galerie__fleche,
.univers-melchior .mel-galerie__fleche + .mel-galerie__fleche:focus {
	background: var(--mel-fond);
	color: var(--mel-second);
}

@media (hover: hover) {
	.univers-melchior .mel-galerie__fleche:hover {
		background: var(--mel-fond);
		color: var(--mel-second);
	}

	.univers-melchior .mel-galerie__fleche + .mel-galerie__fleche:hover {
		background: var(--mel-rose);
		border-color: var(--mel-rose);
	}
}

.univers-melchior .mel-galerie__fleche:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 3px;
}

/* --- 4.3 Description et bloc d'achat --- */

/* Deux colonnes : la description à gauche, l'achat à droite (460 px). Sur
   écran étroit, l'achat passe sous la description. */
.univers-melchior .mel-fiche__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5.56vw, 80px);
	align-items: start;
}

@media (min-width: 900px) {
	.univers-melchior .mel-fiche__grille { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); }

	/* Sans description, le bloc d'achat reste dans sa colonne. */
	.univers-melchior .mel-fiche__grille > .mel-achat:only-child { grid-column: 2; }
}

.univers-melchior .mel-desc__corps {
	display: flex;
	/* Pas plus de 70 signes par ligne : en pleine largeur, la description
	   filait sur plus de 150, illisible. */
	max-width: 70ch;
	flex-direction: column;
	gap: 22px;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

/* Les marges de WordPress et de Hello Elementor laissent la place à l'écart
   du conteneur. Les paragraphes n'ont de toute façon plus de marge basse
   (CLAUDE.md §8-11). */
.univers-melchior .mel-desc__corps > * { margin: 0; }

.univers-melchior .mel-desc__corps h2,
.univers-melchior .mel-desc__corps h3 {
	margin-top: 12px;
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-desc__corps a { color: var(--mel-accent); }

/* --- Le bloc d'achat : une carte Bordeaux --- */

.univers-melchior .mel-achat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: clamp(1.5rem, 2.5vw, 36px);
	background: var(--mel-accent);
	border-radius: clamp(28px, 2.8vw, 40px);
	color: var(--mel-fond);
}

/* La feuille Rosé, qui déborde du coin haut droit. */
.univers-melchior .mel-achat > .mel-feuille {
	top: -26px;
	right: -18px;
	--mel-feuille-l: 76px;
	--mel-feuille-a: 22deg;
}

.univers-melchior .mel-achat__prix {
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-font-titre);
	font-size: clamp(2.6rem, 4.44vw, 4rem);
	font-weight: 800;
	line-height: 1;
}

.univers-melchior .mel-achat__prix del {
	margin-right: .3em;
	font-size: .5em;
	opacity: .6;
}

.univers-melchior .mel-achat__prix ins { text-decoration: none; }

/* La disponibilité, au-dessus du prix. La pastille est décorative :
   l'information reste dans le texte, elle ne repose jamais sur la seule
   couleur. */
.univers-melchior .mel-achat .stock {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	color: var(--mel-fond);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 600;
	order: -1;
}

.univers-melchior .mel-achat .stock::before {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mel-rose);
	content: "";
}

.univers-melchior .mel-achat .stock.out-of-stock::before { background: transparent; box-shadow: inset 0 0 0 2px var(--mel-rose); }

.univers-melchior .mel-achat form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0;
}

/* L'incrémenteur au trait Champagne : deux ronds et le chiffre. */
.univers-melchior .mel-achat .mel-quantite {
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: transparent;
	border: 1.5px solid var(--mel-fond);
	border-radius: 999px;
	color: var(--mel-fond);
}

.univers-melchior .mel-achat .mel-quantite__btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--mel-fond);
	font-weight: 600;
}

.univers-melchior .mel-achat .mel-quantite__btn:hover {
	background: color-mix(in srgb, var(--mel-fond) 16%, var(--mel-accent));
	color: var(--mel-fond);
}

.univers-melchior .mel-achat .mel-quantite .qty {
	width: 26px;
	padding: 0;
	color: var(--mel-fond);
	font-weight: 600;
}

/* Les trois états sont déclarés : sans eux, la feuille de WooCommerce reprend
   la main au clic et le bouton repart sur son violet de marque. */
.univers-melchior .mel-achat button.single_add_to_cart_button.alt,
.univers-melchior .mel-achat .single_add_to_cart_button {
	display: inline-flex;
	flex: 1 1 12rem;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 28px;
	background: var(--mel-fond);
	border: 2px solid var(--mel-fond);
	border-radius: 999px;
	color: var(--mel-accent);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.univers-melchior .mel-achat button.single_add_to_cart_button.alt:hover,
.univers-melchior .mel-achat button.single_add_to_cart_button.alt:focus,
.univers-melchior .mel-achat button.single_add_to_cart_button.alt:active,
.univers-melchior .mel-achat .single_add_to_cart_button:hover,
.univers-melchior .mel-achat .single_add_to_cart_button:focus,
.univers-melchior .mel-achat .single_add_to_cart_button:active {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
	outline: none;
}

.univers-melchior .mel-achat button.single_add_to_cart_button.alt:focus-visible,
.univers-melchior .mel-achat .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 3px;
}

/* Les boutons de paiement express de la passerelle (Google Pay, Apple Pay,
   Amazon Pay, Link…), que WooPayments ou Stripe glissent dans le formulaire
   d'achat : sur leur propre ligne. Ils sont dessinés par Stripe dans des
   iframes : leur hauteur et leur arrondi passent par WooPayments
   (functions.php, section 10), pas par ce CSS. Un arrondi posé sur l'iframe
   rognerait les angles des boutons. Le séparateur « ou » de la passerelle
   n'a pas lieu d'être ici. */
.univers-melchior .mel-achat form.cart > [id*="express-checkout"],
.univers-melchior .mel-achat form.cart > [id*="payment-request"] {
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.univers-melchior .mel-achat [id*="express-checkout"] iframe,
.univers-melchior .mel-achat [id*="payment-request"] iframe {
	min-width: 0;
	max-width: 100%;
}

.univers-melchior .mel-achat [id*="express-checkout-button-separator"],
.univers-melchior .mel-achat [id*="payment-request-button-separator"] { display: none; }

.univers-melchior .mel-achat__mention {
	margin: 0;
	color: var(--mel-rose);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

/* --- 4.4 Avis --- */

/* WooCommerce stylise ce bloc avec des sélecteurs à identifiants, dont
   `#respond input#submit`. Aucune combinaison de classes ne passe devant :
   les règles concernées reprennent les mêmes identifiants. */

/* La feuille Bordeaux, sur le coin haut gauche du titre. */
.univers-melchior .mel-avis .mel-sec__in > .mel-feuille {
	top: -30px;
	left: -40px;
	--mel-feuille-l: 64px;
	--mel-feuille-a: -20deg;
}

.univers-melchior .mel-avis__note {
	display: flex;
	flex: none;
	gap: 18px;
	align-items: center;
	margin: 0;
	color: var(--mel-accent);
}

.univers-melchior .mel-avis__moyenne {
	font-family: var(--mel-font-titre);
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
}

.univers-melchior .mel-avis__detail {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.univers-melchior .mel-avis__detail .mel-etoiles { font-size: 1.375rem; }

.univers-melchior .mel-avis__nombre { font-size: var(--mel-t-petit); }

/* --- Étoiles --- */

/* Cinq pictogrammes en ligne (mel_etoiles_html()), pas la police d'icônes
   de WooCommerce : rien ne flotte, rien n'impose de largeur. La taille du
   texte règle celle des étoiles. */
.univers-melchior .mel-etoiles {
	display: inline-flex;
	gap: .15em;
	align-items: center;
	color: var(--mel-second);
	font-size: 1.25rem;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}

.univers-melchior .mel-etoiles .mel-icone {
	width: 1em;
	height: 1em;
}

/* La note à donner, dans le formulaire d'avis : les étoiles de WooCommerce
   (police d'icônes) cèdent la place aux mêmes dessins, au trait, pleines au
   survol et une fois la note choisie. */
.univers-melchior .mel-avis p.stars span {
	display: inline-flex;
	gap: 6px;
}

.univers-melchior .mel-avis p.stars a {
	width: 28px;
	height: 28px;
	color: var(--mel-second);
}

.univers-melchior .mel-avis p.stars a::before {
	inset: 0;
	width: 100%;
	height: 100%;
	background: currentColor;
	content: "";
	-webkit-mask: var(--mel-masque-etoile) center / contain no-repeat;
	mask: var(--mel-masque-etoile) center / contain no-repeat;
}

.univers-melchior .mel-avis p.stars:hover a::before,
.univers-melchior .mel-avis p.stars.selected a.active::before,
.univers-melchior .mel-avis p.stars.selected a:not(.active)::before {
	content: "";
	-webkit-mask-image: var(--mel-masque-etoile-pleine);
	mask-image: var(--mel-masque-etoile-pleine);
}

.univers-melchior .mel-avis p.stars a:hover ~ a::before,
.univers-melchior .mel-avis p.stars.selected a.active ~ a::before {
	content: "";
	-webkit-mask-image: var(--mel-masque-etoile);
	mask-image: var(--mel-masque-etoile);
}

/* --- Les avis en cartes --- */

/* Les conteneurs de WooCommerce sont repris par leurs identifiants : une liste
   ordonnée porte un retrait natif de 40 px que rien ne remet à zéro, et c'est
   lui qui décalait les cartes par rapport au titre. */
.univers-melchior .mel-avis #reviews,
.univers-melchior .mel-avis #reviews #comments,
.univers-melchior .mel-avis #reviews #review_form_wrapper {
	margin: 0;
	padding: 0;
	border: 0;
}

.univers-melchior .mel-avis #reviews {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Le décompte figure déjà dans l'en-tête. */
.univers-melchior .mel-avis .woocommerce-Reviews-title { display: none; }

.univers-melchior .mel-avis .woocommerce-noreviews { margin: 0; }

/* Trois colonnes, en grille : chaque avis occupe une piste, dans l'ordre. */
.univers-melchior .mel-avis #reviews #comments ol.commentlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.univers-melchior .mel-avis #reviews #comments ol.commentlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Le « clearfix » de WooCommerce deviendrait une piste de la grille : c'est
   lui qui repoussait le premier avis dans la deuxième colonne. */
.univers-melchior .mel-avis #reviews #comments ol.commentlist::before,
.univers-melchior .mel-avis #reviews #comments ol.commentlist::after { content: none; }

/* Le gabarit surchargé produit ce <li> : il ne porte plus aucune règle de
   WooCommerce, seulement la carte. */
.univers-melchior .mel-avis__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-avis__item::before,
.univers-melchior .mel-avis__item::after { content: none; }

.univers-melchior .mel-avis__carte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 28px;
	background: var(--mel-fond);
	border-radius: 28px;
}

.univers-melchior .mel-avis__texte {
	color: var(--mel-encre);
	font-size: clamp(1.05rem, 1.32vw, 1.1875rem);
	line-height: 1.55;
}

.univers-melchior .mel-avis__texte p { margin: 0 0 .6em; }

.univers-melchior .mel-avis__texte p:last-child { margin-bottom: 0; }

/* La signature tombe en pied de carte : les cartes d'une même rangée
   s'alignent, quelle que soit la longueur du propos. */
.univers-melchior .mel-avis__signature {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: auto 0 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
}

.univers-melchior .mel-avis__auteur { font-weight: 700; }

.univers-melchior .mel-avis__verifie {
	padding: 6px 14px;
	background: var(--mel-second);
	border-radius: 999px;
	color: var(--mel-fond);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
}

/* --- Formulaire, replié derrière « Donner votre avis » --- */

/* Le <details> est posé par functions.php (crochets comment_form_before et
   comment_form_after) : sans script, le bouton déplie le formulaire. */
.univers-melchior .mel-avis__ecrire > summary {
	list-style: none;
	cursor: pointer;
}

.univers-melchior .mel-avis__ecrire > summary::-webkit-details-marker { display: none; }

.univers-melchior .mel-avis__ecrire[open] > summary { margin-bottom: 1.5rem; }

.univers-melchior .mel-avis #review_form_wrapper #respond {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Le titre du formulaire répète le bouton : il reste pour les lecteurs
   d'écran. */
.univers-melchior .mel-avis__invite {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.univers-melchior .mel-avis .comment-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 42rem;
	margin: 0;
	padding: 28px;
	background: var(--mel-fond);
	border-radius: 28px;
}

.univers-melchior .mel-avis .comment-form > p,
.univers-melchior .mel-avis .comment-form-rating { margin: 0; }

.univers-melchior .mel-avis .comment-notes { font-size: var(--mel-t-petit); }

.univers-melchior .mel-avis .comment-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--mel-encre);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-avis .comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.univers-melchior .mel-avis .comment-form .required { color: var(--mel-accent); }

.univers-melchior .mel-avis .comment-form input[type="text"],
.univers-melchior .mel-avis .comment-form input[type="email"],
.univers-melchior .mel-avis .comment-form textarea {
	width: 100%;
	min-height: 54px;
	padding: 0 18px;
	background: var(--mel-fond);
	border: 1.5px solid var(--mel-bordure);
	border-radius: 16px;
	color: var(--mel-encre);
	font-family: inherit;
	font-size: 1rem;
}

.univers-melchior .mel-avis .comment-form textarea {
	min-height: 8rem;
	padding: 14px 18px;
	resize: vertical;
}

.univers-melchior .mel-avis .comment-form input:focus,
.univers-melchior .mel-avis .comment-form textarea:focus {
	border-color: var(--mel-accent);
	/* Le filet du champ s'épaissit, sans contour détaché autour. */
	outline: none;
	box-shadow: 0 0 0 1px var(--mel-accent);
}

.univers-melchior .mel-avis p.stars {
	margin: 0;
	line-height: 1;
}

.univers-melchior .mel-avis p.stars a {
	color: var(--mel-sourd);
	transition: color .15s ease;
}

.univers-melchior .mel-avis p.stars:hover a,
.univers-melchior .mel-avis p.stars.selected a { color: var(--mel-second); }

/* Deux identifiants, comme WooCommerce, plus une classe : le seul moyen de
   reprendre la main sans recourir à !important. */
.univers-melchior .mel-avis #respond input#submit,
.univers-melchior .mel-avis .comment-form input[type="submit"] {
	width: auto;
	min-height: 58px;
	align-self: flex-start;
	padding: 0 32px;
	background: var(--mel-accent);
	border: 2px solid var(--mel-accent);
	border-radius: 999px;
	color: var(--mel-fond);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.univers-melchior .mel-avis #respond input#submit:hover,
.univers-melchior .mel-avis #respond input#submit:focus,
.univers-melchior .mel-avis #respond input#submit:active {
	background: var(--mel-accent-fonce);
	border-color: var(--mel-accent-fonce);
	color: var(--mel-fond);
	outline: none;
}

.univers-melchior .mel-avis #respond input#submit:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 3px;
}

/* --- 4.5 Suggestions --- */

/* La feuille Sapin, à droite du titre. */
.univers-melchior .mel-similaires__lien {
	flex: none;
	color: var(--mel-second);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.univers-melchior .mel-similaires__lien:hover { color: var(--mel-accent); }

/* Les cartes de la boutique, au format de la maquette : trois par rangée,
   photo de 300 px, prix et bouton sur une même ligne. `auto-fit` replie les
   colonnes vides quand il y a moins de trois suggestions. */
.univers-melchior .mel-similaires .mel-boutique .mel-grille {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 26px;
	max-width: calc(var(--mel-nb, 3) * 460px);
}

@media (min-width: 1000px) {
	.univers-melchior .mel-similaires .mel-boutique .mel-grille { grid-template-columns: repeat(var(--mel-nb, 3), minmax(0, 1fr)); }
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte {
	gap: 10px;
	padding: 16px 16px 22px;
	border-radius: 34px;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__entete {
	top: 30px;
	left: 30px;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__etat {
	padding: 6px 14px;
	font-size: .875rem;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__media {
	height: 300px;
	aspect-ratio: auto;
	border-radius: 22px;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__corps {
	gap: 10px;
	padding: 12px 10px 0;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__titre {
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__texte { font-size: var(--mel-t-petit); }

.univers-melchior .mel-similaires .mel-boutique .mel-carte__pied {
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
}

.univers-melchior .mel-similaires .mel-boutique .mel-carte__prix { font-size: 1.75rem; }

.univers-melchior .mel-similaires .mel-boutique .mel-carte__achat .mel-btn {
	min-height: 46px;
	padding: 0 22px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 5. La barre de filtres et de tri                                     */
/* ------------------------------------------------------------------ */

/* Une seule barre au-dessus de la grille, sans fond ni cadre : facettes à
   gauche, décompte et tri à droite. Facettes et options de tri sont les mêmes
   pastilles, à la hauteur tactile de 44px. */
.univers-melchior .mel-barre {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(1.25rem, 2.5cqi, 2rem);
	font-family: var(--mel-font-texte);
}

.univers-melchior .mel-barre__filtres,
.univers-melchior .mel-barre__reglages {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.univers-melchior .mel-barre__reglages { gap: .75rem 1.25rem; }

.univers-melchior .mel-barre__label,
.univers-melchior .mel-tri__label {
	color: var(--mel-doux);
	font-size: .9rem;
	font-weight: 600;
}

/* Un peu d'air entre deux groupes de facettes. */
.univers-melchior .mel-barre__label + .mel-facette { margin-left: .15rem; }

.univers-melchior .mel-facette + .mel-barre__label { margin-left: .75rem; }

/* --- Facettes --- */

.univers-melchior .mel-facette {
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 1.1em;
	background: transparent;
	border: 1.5px solid var(--mel-bordure);
	border-radius: 100px;
	color: var(--mel-texte);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.univers-melchior .mel-facette:hover {
	border-color: var(--mel-accent);
	background: var(--mel-carte-fond);
}

/* Active : pleine, avec la croix qui annonce que le clic la retire. */
.univers-melchior .mel-facette.is-active {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-facette.is-active:hover { background: var(--mel-accent-fonce); }

.univers-melchior .mel-facette:focus-visible {
	outline: 2px solid var(--mel-texte);
	outline-offset: 2px;
}

.univers-melchior .mel-facette__compte {
	color: var(--mel-sourd);
	font-size: .92em;
}

.univers-melchior .mel-facette.is-active .mel-facette__compte {
	color: color-mix(in srgb, var(--mel-fond) 70%, var(--mel-accent));
}

.univers-melchior .mel-facette__croix {
	margin-left: .1em;
	line-height: 1;
}

.univers-melchior .mel-barre__raz {
	color: var(--mel-doux);
	font-size: .9rem;
	text-underline-offset: .25em;
}

.univers-melchior .mel-barre__raz:hover { color: var(--mel-accent); }

/* --- Décompte et tri --- */

.univers-melchior .mel-barre__compte {
	margin: 0;
	color: var(--mel-doux);
	font-size: .9rem;
}

/* Le tri : son libellé, puis les options en pastilles. L'option en cours est
   pleine, comme une facette active. */
.univers-melchior .mel-tri {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
}

.univers-melchior .mel-tri__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-tri__option {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 1.1em;
	border: 1.5px solid var(--mel-bordure);
	border-radius: 100px;
	color: var(--mel-texte);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.univers-melchior .mel-tri__option:hover {
	border-color: var(--mel-accent);
	background: var(--mel-carte-fond);
}

.univers-melchior .mel-tri__option.is-active {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-tri__option.is-active:hover { background: var(--mel-accent-fonce); }

.univers-melchior .mel-tri__option:focus-visible {
	outline: 2px solid var(--mel-texte);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-facette,
	.univers-melchior .mel-tri__option { transition: none; }
}

/* Sur téléphone, les pastilles de tri défilent sur une ligne plutôt que de
   s'empiler sur trois. */
@media (max-width: 700px) {

	.univers-melchior .mel-barre {
		align-items: stretch;
		flex-direction: column;
	}

	.univers-melchior .mel-barre__reglages {
		flex-direction: column;
		align-items: flex-start;
	}

	.univers-melchior .mel-tri { width: 100%; }

	.univers-melchior .mel-tri__liste {
		flex-wrap: nowrap;
		width: 100%;
		overflow-x: auto;
		padding-bottom: .25rem;
		scrollbar-width: none;
	}
}

/* ------------------------------------------------------------------ */
/* 6. Le tunnel : panier, commande, compte, confirmation                */
/* ------------------------------------------------------------------ */

/* Ces pages ne s'éditent jamais dans Elementor : tout se joue ici.
   Les sélecteurs sont volontairement spécifiques — Astra et WooCommerce
   posent leurs propres règles sur les mêmes éléments. */

/* --- 6.0 Les pages du tunnel en pleine largeur --- */

/* Le fond des maquettes : le Champagne, sous les sections. */
body.univers-melchior.mel-tunnel { background-color: var(--mel-fond); }

/* Hello Elementor enferme le contenu des pages non construites dans
   Elementor dans une colonne centrée (1140 px au plus, 10 px de marge). Les
   pages du tunnel construites d'après les maquettes la quittent : elles se
   posent en bandeau et en sections de couleur, de bord à bord (section
   3 ter), et chaque gabarit pose ses propres marges. Les autres — connexion,
   mot de passe perdu — gardent la colonne de Hello. */
body.univers-melchior.mel-tunnel .site-main:has(.mel-page-panier, .mel-panier-vide, .mel-validation, .mel-merci, .mel-verification, .mel-compte) {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Et tout ce qui se trouve entre la page et la mise en page : le contenu de
   Hello, le bloc de WooCommerce, et, quand la page est construite dans
   Elementor (gabarit « Elementor Pleine largeur », sans .site-main), son
   conteneur et le widget qui porte le code court. Le conteneur garde sinon
   ses marges intérieures, et la page de la boutique, qui pose déjà les
   siennes, se retrouvait en retrait du double. Les variables sont celles
   qu'Elementor génère pour chaque conteneur ; le sélecteur l'emporte sur
   les siens. L'en-tête et le pied de page, qui ne contiennent pas la page,
   ne sont pas touchés. */
body.univers-melchior.mel-tunnel :is(.site-main, .site-main *, .elementor, .elementor *):has(.mel-page-panier, .mel-panier-vide, .mel-validation, .mel-merci, .mel-verification, .mel-compte) {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--content-width: 100%;
	--container-max-width: 100%;
	--width: 100%;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.univers-melchior.mel-tunnel .woocommerce {
	margin: 0;
	color: var(--mel-encre);
}

/* --- 6.0 bis Le panier : disposition --- */

/* Maquette « Panier » : le bandeau Rosé, puis une section Champagne — les
   box en cartes à gauche, les totaux sur le Sapin, le code promo et les
   mentions à droite —, puis les autres produits sur le Rosé.

   Balisage de woocommerce/cart/cart.php. Le formulaire du panier s'efface de
   la mise en page (`display: contents`) : ses enfants — bandeau, articles,
   code promo — se placent dans la même grille que les totaux, qui vivent
   hors du formulaire parce qu'ils en contiennent un autre (le calculateur de
   livraison). Pour le navigateur et pour le script de WooCommerce, le
   formulaire reste entier.

   La section Champagne n'a pas d'élément à elle : c'est ::before, placé dans
   la grille sous les articles, les totaux et les suggestions, qui la
   dessine. Il remonte sur le bandeau de la hauteur du recouvrement, comme
   les sections de la fiche ; les suggestions, opaques, le recouvrent à leur
   tour. */
.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier) {
	display: grid;
	grid-template-columns: var(--mel-cote) minmax(0, 1fr) var(--mel-cote);
	grid-template-rows: auto calc(var(--mel-sec-haut) - var(--mel-recouvre));
	grid-template-areas:
		"entete entete entete"
		".      .       .     "
		".      notices .     "
		".      articles .    "
		".      recap   .     "
		".      promo   .     "
		".      mentions .    "
		"suggestions suggestions suggestions";
	align-items: start;
}

@media (min-width: 1000px) {

	/* La dernière rangée de la colonne de droite est extensible : c'est elle
	   qui absorbe la hauteur de la liste, pour que totaux, code promo et
	   mentions restent serrés en haut. */
	.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier) {
		grid-template-columns: var(--mel-cote) minmax(0, 1fr) 40px minmax(320px, 400px) var(--mel-cote);
		grid-template-rows: auto calc(var(--mel-sec-haut) - var(--mel-recouvre)) auto auto auto auto 1fr auto;
		grid-template-areas:
			"entete entete   entete entete   entete"
			".      .        .      .        .     "
			".      notices  notices notices  .     "
			".      articles .      recap    .     "
			".      articles .      promo    .     "
			".      articles .      mentions .     "
			".      articles .      .        .     "
			"suggestions suggestions suggestions suggestions suggestions";
	}
}

.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier)::before {
	content: "";
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	grid-row: 2 / -1;
	align-self: stretch;
	margin-top: calc(-1 * var(--mel-recouvre));
	background: var(--mel-fond);
	border-radius: var(--mel-recouvre) var(--mel-recouvre) 0 0;
}

/* Tout ce qui se pose sur la section passe devant elle. */
.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier) > :not(.mel-page-panier),
.univers-melchior .mel-page-panier > :not(.mel-page-panier__entete) {
	position: relative;
	z-index: 2;
}

.univers-melchior .mel-page-panier { display: contents; }

.univers-melchior .mel-page-panier__entete { grid-area: entete; }

/* L'espace haut de la section, sous la courbe, est la deuxième rangée de la
   grille : la zone des notices, vide, ne s'affiche pas. */
.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier) > .woocommerce-notices-wrapper { grid-area: notices; }

.univers-melchior.woocommerce-cart .woocommerce:has(> .mel-page-panier) > .woocommerce-notices-wrapper > :last-child { margin-bottom: var(--mel-gap); }

/* Conteneur de requête : la carte en ligne se dimensionne d'après la colonne,
   pas d'après l'écran. Sa marge basse et celle des mentions font le bas de
   la section ; sans suggestions dessous, le pied de page la recouvre. */
.univers-melchior .mel-page-panier__colonne {
	grid-area: articles;
	margin-bottom: clamp(3rem, 6.67vw, 96px);
	container-type: inline-size;
}

/* Pas de marge ici : la remise à zéro des flottements de WooCommerce, plus
   bas, l'annulerait. L'écart est porté par le code promo. */
.univers-melchior .mel-page-panier__recap { grid-area: recap; }

.univers-melchior .mel-page-panier__promo {
	grid-area: promo;
	margin: 18px 0;
}

.univers-melchior .mel-page-panier__mentions {
	grid-area: mentions;
	margin-bottom: clamp(3rem, 6.67vw, 96px);
}

@media (max-width: 999px) {
	.univers-melchior .mel-page-panier__colonne { margin-bottom: var(--mel-gap); }
}

.univers-melchior.woocommerce-cart .woocommerce:not(:has(> .mel-similaires)) .mel-page-panier__colonne,
.univers-melchior.woocommerce-cart .woocommerce:not(:has(> .mel-similaires)) .mel-page-panier__mentions { margin-bottom: var(--mel-sec-bas); }

@media (max-width: 999px) {
	.univers-melchior.woocommerce-cart .woocommerce:not(:has(> .mel-similaires)) .mel-page-panier__colonne { margin-bottom: var(--mel-gap); }
}

/* Les autres produits : une section Rosé, de bord à bord. */
.univers-melchior.woocommerce-cart .woocommerce > .mel-similaires {
	grid-area: suggestions;
	margin-top: 0;
	background: var(--mel-rose);
}

/* WooCommerce fait flotter les totaux sur 48 % de largeur. */
.univers-melchior.woocommerce-cart .cart-collaterals,
.univers-melchior.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	margin: 0;
}

/* Pendant une mise à jour, WooCommerce pose un voile sur le formulaire. Le
   formulaire n'ayant plus de boîte, le voile se calerait sur un ancêtre et
   couvrirait toute la page : il est remplacé par des squelettes sur les
   montants (section 9) et l'atténuation de l'en-tête.
   `!important` est nécessaire, le voile portant ses styles en ligne. */
.univers-melchior .mel-page-panier > .blockUI { display: none !important; }

.univers-melchior .mel-page-panier__entete { transition: opacity .2s ease; }

.univers-melchior .mel-page-panier.processing .mel-page-panier__entete { opacity: .5; }

.univers-melchior .mel-page-panier.processing .mel-page-panier__colonne,
.univers-melchior .mel-page-panier.processing .mel-page-panier__entete { pointer-events: none; }

/* Ancre de défilement : voir mel_ancre_notices_html(). Les 100 px sont ceux
   que le script de WooCommerce retranche — les changer rétablirait un saut. */
.univers-melchior .mel-ancre-notices {
	position: fixed;
	top: 100px;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

/* Le bouton de mise à jour et le jeton restent dans le formulaire, sans
   occuper de place. */
.univers-melchior .mel-page-panier__actions:not(:has(> :not([type="hidden"]):not([name="update_cart"]))) { display: none; }

/* La feuille Sapin du bandeau, au bout du titre. */
.univers-melchior .woocommerce {
	font-family: var(--mel-font-texte);
	color: var(--mel-texte);
}

.univers-melchior .woocommerce h2,
.univers-melchior .woocommerce h3,
.univers-melchior .woocommerce-billing-fields h3,
.univers-melchior #order_review_heading {
	font-family: var(--mel-font-titre);
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--mel-texte);
}

/* --- 6.1 Tous les boutons WooCommerce sur le gabarit Melchior --- */

.univers-melchior .woocommerce a.button,
.univers-melchior .woocommerce button.button,
.univers-melchior .woocommerce input.button,
.univers-melchior .woocommerce a.button.alt,
.univers-melchior .woocommerce button.button.alt,
.univers-melchior .woocommerce input.button.alt,
.univers-melchior .woocommerce #respond input#submit {
	padding: .9em 1.4em;
	background: var(--mel-accent);
	color: var(--mel-fond);
	border: 1px solid var(--mel-accent);
	border-radius: 100px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.2;
	transition: background-color .15s ease, border-color .15s ease;
}

.univers-melchior .woocommerce a.button:hover,
.univers-melchior .woocommerce button.button:hover,
.univers-melchior .woocommerce input.button:hover,
.univers-melchior .woocommerce a.button.alt:hover,
.univers-melchior .woocommerce button.button.alt:hover,
.univers-melchior .woocommerce input.button.alt:hover,
.univers-melchior .woocommerce #respond input#submit:hover {
	background: var(--mel-accent-fonce);
	border-color: var(--mel-accent-fonce);
	color: var(--mel-fond);
}

.univers-melchior .woocommerce .button:disabled,
.univers-melchior .woocommerce .button[disabled] {
	background: transparent;
	border-color: var(--mel-bordure);
	color: var(--mel-sourd);
	cursor: not-allowed;
}

/* --- 6.2 Notices --- */

/* Deux balisages coexistent selon les versions et les contextes : l'ancien
   `.woocommerce-message`, et celui des blocs. Les deux sont visés, sans quoi
   la notice retombe sur son cadre bleu par défaut. */
.univers-melchior .woocommerce-message,
.univers-melchior .woocommerce-info,
.univers-melchior .woocommerce-error,
.univers-melchior .wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin: 0 0 var(--mel-gap);
	padding: 1rem 1.25rem;
	border: 1px solid var(--mel-bordure);
	border-left: 4px solid var(--mel-accent);
	border-radius: 18px;
	background: var(--mel-teinte);
	color: var(--mel-texte);
	font-size: .95rem;
	list-style: none;
}

/* WooCommerce pose ses propres pictogrammes, en ::before pour l'ancien
   balisage et en SVG pour celui des blocs. La bordure d'accent porte déjà
   l'information : ils n'ont pas leur place ici. */
.univers-melchior .woocommerce-message::before,
.univers-melchior .woocommerce-info::before,
.univers-melchior .woocommerce-error::before { content: none; }

.univers-melchior .wc-block-components-notice-banner > svg { display: none; }

/* WooCommerce donne le focus à la notice dès son apparition, pour que les
   lecteurs d'écran l'annoncent. Le contour du navigateur n'a rien à faire là :
   personne n'a navigué au clavier jusqu'à elle. `:focus-visible` le rétablit
   pour qui le fait vraiment. */
.univers-melchior .woocommerce-message:focus,
.univers-melchior .woocommerce-info:focus,
.univers-melchior .woocommerce-error:focus,
.univers-melchior .wc-block-components-notice-banner:focus { outline: none; }

.univers-melchior .woocommerce-message:focus-visible,
.univers-melchior .woocommerce-info:focus-visible,
.univers-melchior .woocommerce-error:focus-visible,
.univers-melchior .wc-block-components-notice-banner:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 2px;
}

/* Le bloc de contenu du balisage récent est un flex qui ramène ses propres
   marges : il doit s'effacer devant celles de la notice. */
.univers-melchior .wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
}

.univers-melchior .woocommerce-message .button,
.univers-melchior .woocommerce-info .button { margin-left: auto; }

/* Le bouton de la notice reprend la pastille de la charte, en plus discret :
   il accompagne une confirmation, il ne relance pas l'achat. */
.univers-melchior .woocommerce-message .button,
.univers-melchior .woocommerce-info .button,
.univers-melchior .wc-block-components-notice-banner .button,
.univers-melchior .wc-block-components-notice-banner a.wc-forward {
	flex: none;
	padding: .7em 1.4em;
	background: var(--mel-accent);
	border: 1px solid var(--mel-accent);
	border-radius: 100px;
	color: var(--mel-fond);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: .01em;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

.univers-melchior .woocommerce-message .button:hover,
.univers-melchior .woocommerce-message .button:focus,
.univers-melchior .woocommerce-info .button:hover,
.univers-melchior .woocommerce-info .button:focus,
.univers-melchior .wc-block-components-notice-banner .button:hover,
.univers-melchior .wc-block-components-notice-banner .button:focus,
.univers-melchior .wc-block-components-notice-banner a.wc-forward:hover,
.univers-melchior .wc-block-components-notice-banner a.wc-forward:focus {
	background: var(--mel-accent-fonce);
	border-color: var(--mel-accent-fonce);
	color: var(--mel-fond);
	outline: none;
}

/* L'erreur est pleine, pas bordée : dans une palette à deux couleurs, c'est
   le remplissage qui la rend impossible à confondre avec une confirmation.
   Elle porte notamment le refus de la case de majorité. */
.univers-melchior .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .woocommerce-error a { color: var(--mel-fond); }

/* --- 6.3 Tableaux WooCommerce, et articles du panier --- */

/* Le panier n'est plus un tableau (voir cart.php), mais la commande, le
   récapitulatif et Mon compte en restent. Ils se lisent comme une liste : pas
   d'encadré, pas de fond, des filets entre les lignes. Aucune cellule ne
   change de mode d'affichage — un `td` passé en flex cesse d'être une
   cellule, et les filets de ligne se brisent. */
.univers-melchior .woocommerce table.shop_table {
	width: 100%;
	margin-bottom: var(--mel-gap);
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.univers-melchior .woocommerce table.shop_table th {
	padding: 0 1rem 1rem;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mel-bordure);
	color: var(--mel-doux);
	font-family: var(--mel-font-texte);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
}

.univers-melchior .woocommerce table.shop_table td {
	padding: 1.5rem 1rem;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mel-bordure);
	vertical-align: middle;
}

.univers-melchior .woocommerce table.shop_table th:first-child,
.univers-melchior .woocommerce table.shop_table td:first-child { padding-left: 0; }

.univers-melchior .woocommerce table.shop_table th:last-child,
.univers-melchior .woocommerce table.shop_table td:last-child {
	padding-right: 0;
	text-align: right;
}

/* --- Retrait, en haut à droite de la carte --- */

/* Le lien natif de WooCommerce porte déjà le jeton de suppression : on
   l'habille plutôt que d'en reconstruire un. */
.univers-melchior .woocommerce a.remove {
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--mel-bordure);
	border-radius: 50%;
	color: var(--mel-sourd);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.univers-melchior .woocommerce a.remove:hover,
.univers-melchior .woocommerce a.remove:focus {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
	outline: none;
}

.univers-melchior .woocommerce a.remove:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 2px;
}

/* --- Nom et référence --- */

/* Nom des produits dans les tableaux de commande. Sur le panier, c'est le
   titre de carte qui s'applique. */

.univers-melchior .woocommerce table.shop_table .product-name a {
	display: block;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.1;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: none;
}

.univers-melchior .woocommerce table.shop_table .product-name a:hover { color: var(--mel-accent); }

.univers-melchior .mel-ligne__ugs {
	display: block;
	margin-top: .25rem;
	color: var(--mel-sourd);
	font-size: .78rem;
}

/* Les titres de carte, rendus en h2 dans le panier, échappent à l'interlettrage
   des titres WooCommerce (6.0) : ils restent identiques à ceux de la grille. */
.univers-melchior .woocommerce .mel-carte__titre,
.univers-melchior .woocommerce .mel-similaires__titre { letter-spacing: normal; }

/* --- Incrémenteur de quantité --- */

.univers-melchior .mel-quantite {
	display: inline-flex;
	align-items: stretch;
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: 100px;
	overflow: hidden;
}

.univers-melchior .mel-quantite__btn {
	width: 2.4rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--mel-doux);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.univers-melchior .mel-quantite__btn:hover {
	background: var(--mel-teinte);
	color: var(--mel-texte);
}

.univers-melchior .mel-quantite__btn:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: -2px;
}

.univers-melchior .mel-quantite .quantity { margin: 0; }

.univers-melchior .mel-quantite .qty {
	width: 2.6rem;
	padding: .6em 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--mel-texte);
	font-family: inherit;
	font-size: .95rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.univers-melchior .mel-quantite .qty::-webkit-outer-spin-button,
.univers-melchior .mel-quantite .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Le bouton de mise à jour est masqué en toutes circonstances : l'incrémenteur
   le remplace. Il reste dans le document, et non retiré du gabarit, parce que
   c'est lui que le script actionne pour transmettre la nouvelle quantité —
   `display: none` n'empêche pas un clic programmé. */
.univers-melchior .woocommerce-cart-form button[name="update_cart"],
.univers-melchior .woocommerce-cart-form input[name="update_cart"] { display: none; }

/* --- Code promo, sous les totaux --- */

/* Champ et bouton sur une ligne, en pastilles comme les autres actions. Le
   texte d'invite suffit : l'étiquette de WooCommerce reste pour les lecteurs
   d'écran. */
.univers-melchior .mel-promo__ligne {
	display: flex;
	gap: .6rem;
	align-items: stretch;
}

.univers-melchior .mel-promo__champ {
	flex: 1;
	min-width: 0;
	padding: .8em 1.2em;
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: 100px;
	color: var(--mel-texte);
	font-family: var(--mel-font-texte);
	font-size: .9rem;
}

.univers-melchior .mel-promo__champ::placeholder { color: var(--mel-sourd); }

.univers-melchior .mel-promo__champ:focus {
	border-color: var(--mel-accent);
	/* Le filet du champ s'épaissit, sans contour détaché autour. */
	outline: none;
	box-shadow: 0 0 0 1px var(--mel-accent);
}

.univers-melchior .mel-promo__bouton {
	flex: none;
	padding: .8em 1.4em;
	border-radius: 100px;
}

/* Code refusé : le champ se cercle d'accent et le motif s'affiche dessous,
   à la place d'une bannière. L'état suit `aria-invalid`, que WooCommerce
   retire — avec le message — dès que le visiteur retape un code. */
.univers-melchior .mel-promo__champ[aria-invalid="true"] {
	border-color: var(--mel-accent);
	box-shadow: inset 0 0 0 1px var(--mel-accent);
}

.univers-melchior .mel-page-panier__promo .mel-promo__erreur {
	display: flex;
	gap: .45rem;
	align-items: flex-start;
	margin: .6rem 0 0;
	padding: 0 1.2em;
	color: var(--mel-accent);
	font-family: var(--mel-font-texte);
	font-size: .8rem;
	line-height: 1.4;
}

.univers-melchior .mel-promo__icone {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: .05rem;
}

/* Code appliqué : une carte à la place du champ — coche, code, ce qu'il
   fait, et de quoi le retirer. */
/* Maquette « Panier » : la coche dans un rond Sapin, le code et ce qu'il
   fait, puis « Retirer » dessous, dans un cadre au trait Sapin. */
.univers-melchior .mel-promo-applique {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 20px 22px;
	background: transparent;
	border: 2px solid var(--mel-second);
	border-radius: 26px;
	color: var(--mel-second);
}

.univers-melchior .mel-promo-applique + .mel-promo-applique { margin-top: .6rem; }

.univers-melchior .mel-promo-applique__icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--mel-second);
	border-radius: 50%;
	color: var(--mel-fond);
}

.univers-melchior .mel-promo-applique__icone .mel-icone {
	width: 20px;
	height: 20px;
}

.univers-melchior .mel-promo-applique__texte {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	margin: 0;
}

.univers-melchior .mel-promo-applique__code {
	color: var(--mel-second);
	font-family: var(--mel-font-titre);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.univers-melchior .mel-promo-applique__description {
	color: var(--mel-second);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
	line-height: 1.4;
}

.univers-melchior .mel-promo-applique__retrait {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
}

.univers-melchior .mel-btn.mel-btn--ligne.mel-promo-applique__retrait {
	background: transparent;
	border-color: var(--mel-second);
	color: var(--mel-second);
}

.univers-melchior .mel-btn.mel-btn--ligne.mel-promo-applique__retrait:hover,
.univers-melchior .mel-btn.mel-btn--ligne.mel-promo-applique__retrait:focus {
	background: var(--mel-second);
	border-color: var(--mel-second);
	color: var(--mel-fond);
}

/* La remise, dans l'encadré sombre : intitulé et montant éclaircis vers le
   rose, pour se distinguer des lignes de compte sans quitter la charte. */
.univers-melchior.woocommerce-cart .cart_totals .cart-discount th,
.univers-melchior.woocommerce-cart .cart_totals .cart-discount td,
.univers-melchior .mel-carton .cart-discount th,
.univers-melchior .mel-carton .cart-discount td {
	color: var(--mel-rose);
}

/* --- 6.4 Totaux --- */

/* L'encadré des totaux du panier et « votre carton », le récapitulatif de la
   validation, sont sombres : ce sont les blocs de décision de leur page, ils
   se distinguent de ce qui les entoure. Mêmes règles pour les deux, pour que
   le client retrouve d'une page à l'autre les mêmes chiffres au même
   endroit. */
.univers-melchior .woocommerce .cart_totals,
.univers-melchior .mel-carton {
	padding: clamp(1.5rem, 2.36vw, 34px);
	border: 1px solid var(--mel-bordure);
	border-radius: 36px;
}

/* Le sombre de ces deux blocs est le Sapin. Redéfini ici, il descend dans
   toutes les nuances que les règles suivantes calculent à partir de
   --mel-profond (intitulés, filets, mention de TVA). */
.univers-melchior.woocommerce-cart .cart_totals,
.univers-melchior .mel-carton {
	--mel-profond: var(--mel-second);
	background: var(--mel-profond);
	border-color: var(--mel-profond);
	color: var(--mel-fond);
}

.univers-melchior .woocommerce .cart_totals h2 {
	margin: 0 0 6px;
	padding: 0;
	background: transparent;
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior.woocommerce-cart .cart_totals h2 { color: var(--mel-fond); }

/* Une feuille Rosé de la charte, posée sur le coin haut du récapitulatif. */
.univers-melchior.woocommerce-cart .cart_totals {
	position: relative;
	overflow: hidden;
}

.univers-melchior.woocommerce-cart .cart_totals::after {
	position: absolute;
	top: -26px;
	right: -20px;
	width: 86px;
	aspect-ratio: 89.87 / 86.7;
	background: url("../img/feuille-rose.svg") center / contain no-repeat;
	transform: rotate(-24deg);
	content: "";
	pointer-events: none;
}

.univers-melchior .woocommerce .cart_totals table.shop_table,
.univers-melchior .mel-carton table.shop_table {
	margin: 0;
	border: 0;
	background: transparent;
}

.univers-melchior .woocommerce .cart_totals table.shop_table th,
.univers-melchior .mel-carton table.shop_table th {
	padding: 7px 0;
	border: 0;
	color: inherit;
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	white-space: nowrap;
}

/* Les montants en gras, dans la police du texte, comme sur la maquette ;
   seul le total passe dans celle des titres. */
.univers-melchior .woocommerce .cart_totals table.shop_table td,
.univers-melchior .mel-carton table.shop_table td {
	padding: 7px 0;
	border: 0;
	color: inherit;
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: 700;
	line-height: var(--mel-texte-interligne);
	text-align: right;
}

.univers-melchior.woocommerce-cart .cart_totals th,
.univers-melchior.woocommerce-cart .cart_totals td,
.univers-melchior .mel-carton th,
.univers-melchior .mel-carton td {
	color: var(--mel-fond);
}

/* Le total se détache : intitulé en petit, montant en grand. C'est le chiffre
   que le client retient avant de s'engager. */
.univers-melchior .woocommerce .cart_totals .order-total th,
.univers-melchior .woocommerce .cart_totals .order-total td,
.univers-melchior .mel-carton .order-total th,
.univers-melchior .mel-carton .order-total td {
	padding-top: 16px;
	border-top: 1px solid var(--mel-bordure);
	vertical-align: middle;
}

.univers-melchior.woocommerce-cart .cart_totals .order-total th,
.univers-melchior.woocommerce-cart .cart_totals .order-total td,
.univers-melchior .mel-carton .order-total th,
.univers-melchior .mel-carton .order-total td {
	border-top-color: var(--mel-rose);
}

.univers-melchior .woocommerce .cart_totals .order-total th,
.univers-melchior .mel-carton .order-total th {
	font-family: var(--mel-font-titre);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Le montant est dimensionné sur le `span` du prix, pas seulement sur la
   cellule : WooCommerce impose sa propre taille à cet élément, et une règle
   posée plus haut n'y descend pas. */
.univers-melchior .woocommerce .cart_totals .order-total td,
.univers-melchior .woocommerce .cart_totals .order-total td strong,
.univers-melchior .woocommerce .cart_totals .order-total td .woocommerce-Price-amount,
.univers-melchior .mel-carton .order-total td,
.univers-melchior .mel-carton .order-total td strong,
.univers-melchior .mel-carton .order-total td .woocommerce-Price-amount {
	font-family: var(--mel-font-titre);
	font-size: clamp(2.25rem, 3.06vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
}

.univers-melchior.woocommerce-cart .cart_totals .order-total th,
.univers-melchior.woocommerce-cart .cart_totals .order-total td,
.univers-melchior .mel-carton .order-total th,
.univers-melchior .mel-carton .order-total td { color: var(--mel-fond); }

/* La TVA se lit sous le montant, sur sa propre ligne. Le sélecteur reprend le
   `td` de la règle du total : sans lui, il lui cédait d'un élément et le
   montant de TVA héritait de la taille du total. */
.univers-melchior .woocommerce .cart_totals .order-total td .includes_tax,
.univers-melchior .mel-carton .order-total td .includes_tax {
	display: block;
	margin-top: 4px;
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	white-space: nowrap;
}

/* Le montant reste en ligne : passé en bloc, il coupait la mention en trois —
   « (dont », le prix, puis « TVA) ». */
.univers-melchior .woocommerce .cart_totals .order-total td .includes_tax .woocommerce-Price-amount,
.univers-melchior .mel-carton .order-total td .includes_tax .woocommerce-Price-amount {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* Sur l'encadré sombre, la mention est simplement plus claire que le reste
   du texte : c'est une précision, pas une ligne de compte. */
.univers-melchior.woocommerce-cart .cart_totals .order-total td .includes_tax,
.univers-melchior .mel-carton .order-total td .includes_tax {
	color: var(--mel-rose);
}

/* --- Bouton de commande --- */

.univers-melchior .woocommerce .wc-proceed-to-checkout {
	margin-top: 22px;
	padding: 0;
}

.univers-melchior .woocommerce .wc-proceed-to-checkout a.button.alt,
.univers-melchior .woocommerce .wc-proceed-to-checkout .button,
.univers-melchior .woocommerce #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 0 32px;
	border-width: 2px;
	border-radius: 999px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	text-align: center;
}

/* Sur fond sombre, le bouton s'inverse : crème sur bordeaux. */
.univers-melchior.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button:hover,
.univers-melchior.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button:focus {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .woocommerce .wc-proceed-to-checkout .button::after { content: none; }

/* Le message de paiement fractionné de WooPayments (« 3 versements sans
   intérêts… avec Klarna »), posé avant le bouton. Sa feuille le décale d'un
   em et fixe sa hauteur d'après une mesure faite deux secondes après le
   chargement : le message tombait hors de l'alignement du bloc, mordait sur
   le bouton. Il suit ici le flux, au ras du bloc, sur une pastille
   Champagne : Stripe donne au message et à sa fenêtre « Consulter les
   offres » le même fond et la même encre (assets/js/paiement.js), ceux de la
   boutique ; posé à nu sur le Sapin, le message serait illisible. */
.univers-melchior .cart_totals .wc-proceed-to-checkout #payment-method-message,
.univers-melchior .cart_totals .wc-proceed-to-checkout #payment-method-message.pmme-updated {
	height: auto;
	margin: 0 0 16px;
	padding: 12px 18px;
	background: var(--mel-fond);
	border-radius: var(--mel-radius);
}

.univers-melchior .cart_totals .wc-proceed-to-checkout #payment-method-message:empty { display: none; }

.univers-melchior .cart_totals .wc-proceed-to-checkout .pmme-loading {
	height: 40px;
	margin: 0 0 16px;
	border-radius: 8px;
}

/* --- Livraison, dans les totaux du panier --- */

/* Le gabarit de WooCommerce (cart/cart-shipping.php) : la liste des modes,
   la destination, le lien du calculateur. En texte courant, et non dans la
   police des montants : seul le prix de chaque mode la garde. */
.univers-melchior .woocommerce .cart_totals table.shop_table .woocommerce-shipping-totals td {
	color: var(--mel-rose);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
	font-weight: 400;
	line-height: 1.45;
}

/* Une ligne par mode : la case, le nom à gauche, le prix à droite. Nom et prix
   sont séparés par functions.php (crochet
   `woocommerce_cart_shipping_method_full_label`). */
.univers-melchior .woocommerce .cart_totals ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
	width: 100%;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 0;
	text-align: left;
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method li input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	background: transparent;
	border: 2px solid var(--mel-rose);
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method li input[type="radio"]:checked {
	background: radial-gradient(circle, var(--mel-fond) 0 5px, transparent 5.5px);
	border-color: var(--mel-fond);
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method li input[type="radio"]:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 2px;
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method li label {
	display: flex;
	flex: 1;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	min-width: 0;
	margin: 0;
	color: var(--mel-fond);
	cursor: pointer;
}

.univers-melchior .woocommerce .cart_totals ul#shipping_method .woocommerce-Price-amount {
	color: var(--mel-fond);
	font-weight: 700;
	white-space: nowrap;
}

.univers-melchior .woocommerce .cart_totals .woocommerce-shipping-destination {
	margin: 10px 0 0;
	font-size: .8125rem;
	opacity: .75;
	text-align: left;
}

.univers-melchior .woocommerce .cart_totals .woocommerce-shipping-calculator {
	margin: 10px 0 0;
	font-size: .8125rem;
	text-align: left;
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-button {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Le pictogramme de camion de WooCommerce, dans sa police d'icônes. */
.univers-melchior .woocommerce .cart_totals .shipping-calculator-button::after { content: none; }

/* Le calculateur : les règles des formulaires clairs (étiquettes Bordeaux en
   capitales) disparaissent sur le Sapin. Le conteneur porte l'écart : aucune
   marge basse ne survit sur un <p> (CLAUDE.md §8, piège 11). */
.univers-melchior .woocommerce .cart_totals .shipping-calculator-form {
	display: grid;
	gap: 12px;
	margin-top: 14px;
	padding: 0;
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form[style*="none"] { display: none; }

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form p { margin: 0; padding: 0; }

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--mel-rose);
	font-family: var(--mel-font-texte);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form .form-row label .required { color: inherit; }

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form .form-row input.input-text {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border-color: transparent;
	font-size: 1rem;
	text-align: left;
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form .select2-selection--single {
	display: flex;
	align-items: center;
	height: 48px;
	border-color: transparent;
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form .select2-selection__rendered {
	padding: 0 40px 0 16px;
	font-size: 1rem;
	line-height: 48px;
	text-align: left;
}

/* « Mettre à jour » : la même inversion que le bouton de commande, sur le
   Sapin. */
.univers-melchior .woocommerce .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 0 22px;
	background: var(--mel-rose);
	border: 0;
	border-radius: 999px;
	color: var(--mel-accent);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
}

.univers-melchior .woocommerce .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover,
.univers-melchior .woocommerce .cart_totals .shipping-calculator-form button[name="calc_shipping"]:focus {
	background: var(--mel-fond);
	color: var(--mel-accent);
}

/* WooCommerce grise les <small> de ce bloc, illisibles sur le Sapin. */
.univers-melchior .woocommerce .cart_totals td .mel-prix-mention { color: inherit; }

/* Les montants ne se coupent jamais, où qu'ils tombent. */
.univers-melchior .woocommerce .cart_totals td .woocommerce-Price-amount { white-space: nowrap; }

/* Le tableau devient une pile de lignes, à toutes les largeurs : le bloc reste
   étroit même sur grand écran. Intitulé et montant se partagent chaque ligne ;
   la livraison prend toute la largeur, sous son intitulé. Dans un tableau, ses
   options restaient enfermées dans la colonne des montants. Le filet du total
   passe des cellules à la ligne, pour rester continu. `tbody` dans les
   sélecteurs : ils passent devant ceux de 6.10, qui gardent le tableau. */
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table,
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody { display: block; }

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody tr {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody th,
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody td { display: block; }

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody .woocommerce-shipping-totals td {
	flex-basis: 100%;
	padding-top: 0;
	padding-bottom: 16px;
	text-align: left !important;
}

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody tr.order-total {
	align-items: center;
	border-top: 1px solid color-mix(in srgb, var(--mel-fond) 25%, var(--mel-profond));
}

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody tr.order-total th,
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tbody tr.order-total td { border-top: 0; }

/* --- Mentions sous les totaux --- */

/* Progression vers le port offert : une indication, pas une ligne de compte. */
.univers-melchior .mel-franco {
	margin: 14px 0 0;
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

.univers-melchior.woocommerce-cart .cart_totals .mel-franco { color: var(--mel-rose); }

.univers-melchior .mel-franco.is-acquis {
	font-weight: 700;
	opacity: 1;
}

/* Sous le code promo : engagements, puis mention sanitaire. Discrets, mais
   présents — la mention est obligatoire sur le tunnel (CLAUDE.md §7). */
.univers-melchior .mel-page-panier__mentions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.univers-melchior .mel-page-panier__engagements {
	margin: 0;
	color: var(--mel-doux);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.6;
	text-transform: uppercase;
}

.univers-melchior .mel-page-panier__mentions .mel-mention-sanitaire {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
	text-align: left;
}



/* --- 6.5 Formulaires --- */

.univers-melchior .woocommerce form .form-row { margin-bottom: 1.1rem; }

.univers-melchior .woocommerce form .form-row label {
	display: block;
	margin-bottom: .35rem;
	color: var(--mel-texte);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.univers-melchior .woocommerce form .form-row .required {
	color: var(--mel-accent);
	text-decoration: none;
}

.univers-melchior .woocommerce form .form-row input.input-text,
.univers-melchior .woocommerce form .form-row textarea,
.univers-melchior .woocommerce form .form-row select {
	width: 100%;
	padding: .75em .9em;
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
	color: var(--mel-texte);
	font-family: inherit;
	font-size: .95rem;
	height: auto;
}

.univers-melchior .woocommerce form .form-row input.input-text:focus,
.univers-melchior .woocommerce form .form-row textarea:focus,
.univers-melchior .woocommerce form .form-row select:focus {
	border-color: var(--mel-accent);
	/* Le filet du champ s'épaissit, sans contour détaché autour. */
	outline: none;
	box-shadow: 0 0 0 1px var(--mel-accent);
}

.univers-melchior .woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--mel-accent);
	border-width: 2px;
}

/* --- 6.6 Paiement --- */

/* Les règles du paiement visent `.woocommerce-checkout` sur le <body> même,
   et non sur un conteneur : WooCommerce pose cette classe sur la validation
   comme sur « Payer la commande », dont le bloc de paiement n'est pas dans
   le formulaire de la validation. Mêmes cartes sur les deux pages. */

.univers-melchior.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.univers-melchior.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--mel-bordure);
}

.univers-melchior.woocommerce-checkout #payment div.payment_box {
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
	color: var(--mel-doux);
	font-size: .9rem;
}

.univers-melchior.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* --- 6.7 Obligations légales : majorité et mention sanitaire --- */

/* La case de majorité est bloquante : elle doit se voir, pas se deviner. */
.univers-melchior .mel-majeur {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin: 1.25rem 0;
	padding: 1rem;
	background: var(--mel-teinte);
	border: 1px solid var(--mel-bordure);
	border-left: 4px solid var(--mel-accent);
	border-radius: var(--mel-radius);
}

.univers-melchior .mel-majeur input[type="checkbox"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: .1rem 0 0;
	accent-color: var(--mel-accent);
}

.univers-melchior .mel-majeur label {
	margin: 0;
	font-size: .92rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
}

.univers-melchior .mel-mention-sanitaire {
	margin: 0 0 var(--mel-gap);
	padding: .75rem 0;
	border-top: 1px solid var(--mel-bordure);
	border-bottom: 1px solid var(--mel-bordure);
	color: var(--mel-doux);
	font-size: .85rem;
	text-align: center;
}

/* Case d'acceptation des CGV, posée par WooCommerce */
.univers-melchior .woocommerce-terms-and-conditions-wrapper .form-row label,
.univers-melchior .woocommerce-privacy-policy-text {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .woocommerce-privacy-policy-text {
	color: var(--mel-doux);
	font-size: .85rem;
}

.univers-melchior .woocommerce-privacy-policy-text p { margin: 0; }

/* Au pied de la validation et de « Payer la commande » : le texte de
   confidentialité, la case des CGV et la case de majorité se suivent. Le
   bloc de WooCommerce les espace lui-même, et laisse le même écart sous
   lui — les marges basses des paragraphes sont annulées sur tout le site. */
.univers-melchior .woocommerce .mel-validation__commande .woocommerce-terms-and-conditions-wrapper,
.univers-melchior .woocommerce .mel-payer__commande .woocommerce-terms-and-conditions-wrapper {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding-bottom: .9rem;
}

.univers-melchior .woocommerce form .mel-validation__commande .woocommerce-terms-and-conditions-wrapper .form-row.form-row,
.univers-melchior .woocommerce form .mel-payer__commande .woocommerce-terms-and-conditions-wrapper .form-row.form-row { padding-bottom: 0; }

/* --- 6.8 Panier vide et commande déjà réglée --- */

.univers-melchior .mel-vide {
	color: var(--mel-doux);
	font-size: .95rem;
}

/* Maquettes « Panier vide » et « Commande déjà réglée » : tout l'écran sur
   le Rosé, dans le prolongement de l'en-tête. Le sigle de la charte dans un
   rond, un grand titre, une phrase, les boutons ; quatre feuilles autour.
   Le pied de page recouvre le bas de la section (3 ter).

   Balisage de woocommerce/cart/cart-empty.php et de
   woocommerce/checkout/mel-commande-reglee.php. Seul sur la page — sans
   bannière au-dessus —, il en porte le titre. */
.univers-melchior .mel-panier-vide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(4rem, 7.64vw, 110px) var(--mel-bord) calc(var(--mel-recouvre) + clamp(5rem, 10vw, 144px));
	overflow: hidden;
	background: var(--mel-rose);
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	text-align: center;
}

/* Le conteneur de notices vide occupe sinon une rangée de la grille du
   panier, plus l'écart qui suit : autant de vide sous la bannière. Il
   réapparaît dès qu'une notice y est insérée. */
.univers-melchior.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

/* Les quatre feuilles de la maquette : Sapin en haut à gauche, Bordeaux à
   droite, Champagne en bas à gauche, une petite Sapin en bas à droite. */
.univers-melchior .mel-panier-vide__feuille--a {
	top: 120px;
	left: 15.3%;
	--mel-feuille-l: 96px;
	--mel-feuille-a: -24deg;
}

.univers-melchior .mel-panier-vide__feuille--b {
	top: 200px;
	right: 18%;
	--mel-feuille-l: 64px;
	--mel-feuille-a: 22deg;
}

.univers-melchior .mel-panier-vide__feuille--c {
	bottom: 210px;
	left: 23%;
	--mel-feuille-l: 60px;
	--mel-feuille-a: 16deg;
}

.univers-melchior .mel-panier-vide__feuille--d {
	right: 13.9%;
	bottom: 260px;
	--mel-feuille-l: 50px;
	--mel-feuille-a: -14deg;
}

/* Écran étroit : seules les deux feuilles du haut restent, dans les coins. */
@media (max-width: 767px) {

	.univers-melchior .mel-panier-vide__feuille--a {
		top: 1.5rem;
		left: 1rem;
	}

	.univers-melchior .mel-panier-vide__feuille--b {
		top: 3rem;
		right: 1rem;
	}

	.univers-melchior .mel-panier-vide__feuille--c,
	.univers-melchior .mel-panier-vide__feuille--d { display: none; }
}

/* Le sigle, centré dans un rond Champagne de 240 px. */
.univers-melchior .mel-panier-vide__rond {
	position: relative;
	z-index: 2;
	--mel-rond: clamp(160px, 16.67vw, 240px);
	display: grid;
	place-items: center;
	width: var(--mel-rond);
	height: var(--mel-rond);
	margin-bottom: clamp(2rem, 3.06vw, 44px);
	background: var(--mel-fond);
	border-radius: 50%;
}

.univers-melchior .mel-panier-vide__verre,
.univers-melchior .mel-panier-vide__rond .mel-reglee__illu {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--mel-rond) * .625);
}

.univers-melchior .mel-panier-vide__rond .mel-reglee__illu { aspect-ratio: 63.69 / 119.36; }

.univers-melchior .woocommerce .mel-panier-vide__titre {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-panier-vide__texte {
	position: relative;
	z-index: 2;
	max-width: 560px;
	margin: 22px 0 0;
	color: var(--mel-encre);
	font-size: clamp(1.05rem, 1.46vw, 1.3125rem);
	line-height: 1.55;
}

.univers-melchior .mel-panier-vide__actions {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 34px;
}

/* Écran étroit : les boutons s'empilent, de même largeur. Côte à côte, le
   second passait à la ligne sur deux lignes, plus large que le premier. */
@media (max-width: 480px) {

	.univers-melchior .mel-panier-vide__actions {
		flex-direction: column;
		align-self: stretch;
	}
}

/* Commande qui ne peut plus être réglée : le rond passe au Sapin, sous le
   sigle Champagne ; une commande close garde le rond Champagne et le sigle
   Bordeaux. Au-dessus du titre, le numéro et l'état en pastilles. */
.univers-melchior .mel-reglee .mel-panier-vide__rond { background: var(--mel-second); }

.univers-melchior .mel-reglee.is-close .mel-panier-vide__rond { background: var(--mel-fond); }

.univers-melchior .mel-reglee__meta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	padding-bottom: 26px;
}

.univers-melchior .mel-reglee__numero,
.univers-melchior .mel-reglee__statut {
	padding: 6px 14px;
	border: 1.5px solid var(--mel-second);
	border-radius: 999px;
	background: var(--mel-second);
	color: var(--mel-fond);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.univers-melchior .mel-reglee__statut {
	background: transparent;
	color: var(--mel-second);
}

/* Commande close : l'étiquette s'éteint, ce n'est plus un état en cours. */
.univers-melchior .mel-reglee.is-close .mel-reglee__statut {
	border-color: var(--mel-doux);
	color: var(--mel-doux);
}

.univers-melchior .mel-reglee__mention {
	position: relative;
	z-index: 2;
	margin: 40px 0 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

.univers-melchior .woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--mel-font-titre);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	text-transform: none;
	color: var(--mel-texte);
}

.univers-melchior .woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mel-gap);
	margin: var(--mel-gap) 0;
	padding: var(--mel-gap);
	background: var(--mel-teinte);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
	list-style: none;
}

.univers-melchior .woocommerce ul.order_details li {
	border: 0;
	color: var(--mel-doux);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.univers-melchior .woocommerce ul.order_details li strong {
	display: block;
	margin-top: .3rem;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: 1.1rem;
	letter-spacing: 0;
}

/* --- 6.9 Mon compte --- */

/* Balisage : woocommerce/myaccount/ (my-account.php, dashboard.php,
   view-order.php) et functions.php, section 16. La page n'est exposée nulle
   part ; elle reprend les pièces des autres écrans du tunnel : le bandeau du
   panier, les cartes claires de la validation, les blocs sombres des
   totaux, la frise de la confirmation. */

/* Maquettes « Mon compte » : le bandeau Rosé, le titre à gauche et le
   prénom à droite ; dessous, une section Champagne, la navigation à gauche
   et la rubrique à droite. */
/* Navigation à gauche, rubrique à droite. WooCommerce les fait flotter sur
   30 % et 68 % : la grille les remplace. */
.univers-melchior .mel-compte__corps {
	display: grid;
	grid-template-columns: minmax(12rem, 260px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4.17vw, 60px);
	align-items: start;
}

.univers-melchior.woocommerce-account .woocommerce-MyAccount-navigation,
.univers-melchior.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

/* Petits titres de section : capitales espacées, comme les étiquettes de la
   confirmation. */
.univers-melchior .woocommerce .mel-compte__etiquette,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-column__title,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	margin: 0 0 .9rem;
	color: var(--mel-second);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

/* --- La navigation --- */

.univers-melchior .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .woocommerce-MyAccount-navigation li { margin: 0; }

/* La rubrique ouverte : un filet Bordeaux sur la gauche, sur le Rosé. Au
   survol, une flèche annonce le lien. */
.univers-melchior .woocommerce-MyAccount-navigation li a {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-left: 3px solid transparent;
	border-radius: 0 16px 16px 0;
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.1rem, 1.46vw, 1.3125rem);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.univers-melchior .woocommerce-MyAccount-navigation li a::after {
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	content: "";
	-webkit-mask: var(--mel-masque-fleche) center / contain no-repeat;
	mask: var(--mel-masque-fleche) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-.3rem);
	transition: opacity .15s ease, transform .15s ease;
}

.univers-melchior .woocommerce-MyAccount-navigation li a:hover,
.univers-melchior .woocommerce-MyAccount-navigation li a:focus-visible { color: var(--mel-accent-fonce); }

.univers-melchior .woocommerce-MyAccount-navigation li a:hover::after,
.univers-melchior .woocommerce-MyAccount-navigation li a:focus-visible::after {
	opacity: 1;
	transform: none;
}

.univers-melchior .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mel-rose);
	border-left-color: var(--mel-accent);
	color: var(--mel-accent);
}

.univers-melchior .woocommerce-MyAccount-navigation li.is-active a::after { content: none; }

/* --- Le tableau de bord --- */

.univers-melchior .mel-compte__intro {
	max-width: 48rem;
	margin: 0;
	color: var(--mel-encre);
	font-size: clamp(1.05rem, 1.46vw, 1.3125rem);
	line-height: 1.55;
}

/* La dernière commande : le surtitre, puis une carte Sapin. */
.univers-melchior .mel-compte__derniere { margin-top: 36px; }

.univers-melchior .woocommerce .mel-compte__derniere .mel-compte__etiquette { margin-bottom: 12px; }

.univers-melchior .mel-compte__commande {
	--mel-profond: var(--mel-second);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	padding: clamp(1.5rem, 2.36vw, 34px) clamp(1.5rem, 2.64vw, 38px);
	background: var(--mel-profond);
	border-radius: 34px;
	color: var(--mel-fond);
}

/* La feuille Rosé, qui mord sur le haut de la carte. */
.univers-melchior .mel-compte__feuille {
	top: -36px;
	left: 330px;
	--mel-feuille-l: 90px;
	--mel-feuille-a: -20deg;
}

.univers-melchior .mel-compte__resume,
.univers-melchior .mel-compte__suite {
	position: relative;
	z-index: 2;
}

.univers-melchior .mel-compte__numero {
	margin: 0;
	font-family: var(--mel-font-titre);
	font-size: clamp(1.6rem, 2.36vw, 2.125rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
}

.univers-melchior .mel-compte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 8px 0 0;
	font-size: var(--mel-t-petit);
}

.univers-melchior .mel-compte__suite {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

.univers-melchior .mel-compte__total {
	margin: 0;
	font-family: var(--mel-font-titre);
	font-weight: 700;
	font-size: clamp(2rem, 2.78vw, 2.5rem);
	line-height: 1;
	white-space: nowrap;
}

.univers-melchior .mel-compte__total .woocommerce-Price-amount { color: inherit; }

.univers-melchior .mel-compte__commande a.mel-btn.mel-compte__voir {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-compte__commande a.mel-btn.mel-compte__voir:hover,
.univers-melchior .mel-compte__commande a.mel-btn.mel-compte__voir:focus {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-compte__vide {
	margin: 0;
	color: var(--mel-encre);
}

/* L'état d'une commande, en étiquette : la même que sur la confirmation. Le
   vin pour ce qui suit son cours, le rose pour un paiement refusé, le trait
   pour une commande arrêtée ou close. */
.univers-melchior .mel-compte__statut {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--mel-second);
	border: 1.5px solid var(--mel-second);
	border-radius: 999px;
	color: var(--mel-fond);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
}

.univers-melchior .mel-compte__derniere .mel-compte__statut {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-compte__statut.is-failed {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-profond);
}

.univers-melchior .mel-compte__statut.is-cancelled,
.univers-melchior .mel-compte__statut.is-refunded,
.univers-melchior .mel-compte__statut.is-completed {
	background: transparent;
	border-color: var(--mel-sourd);
	color: var(--mel-doux);
}

.univers-melchior .mel-compte__derniere .mel-compte__statut.is-cancelled,
.univers-melchior .mel-compte__derniere .mel-compte__statut.is-refunded,
.univers-melchior .mel-compte__derniere .mel-compte__statut.is-completed {
	border-color: color-mix(in srgb, var(--mel-fond) 45%, transparent);
	color: var(--mel-fond);
}

/* Une carte par rubrique du compte : son nom, une ligne d'explication. */
/* Une tuile de couleur par rubrique : son nom, une ligne d'explication, la
   flèche au pied. */
.univers-melchior .mel-compte__rubriques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 18px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-compte__rubrique { margin: 0; }

.univers-melchior .mel-compte__rubrique a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 200px;
	padding: 28px;
	background: var(--mel-accent);
	border: 2px solid var(--mel-accent);
	border-radius: 30px;
	color: var(--mel-fond);
	text-decoration: none;
	transition: border-color .15s ease;
}

.univers-melchior .mel-compte__rubrique a::after {
	width: 28px;
	height: 28px;
	margin-top: auto;
	background: currentColor;
	content: "";
	-webkit-mask: var(--mel-masque-fleche) center / contain no-repeat;
	mask: var(--mel-masque-fleche) center / contain no-repeat;
	transition: transform .2s ease;
}

.univers-melchior .mel-compte__rubrique a:hover::after { transform: translateX(.2rem); }

.univers-melchior .mel-compte__rubrique:nth-child(4n+2) a {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-compte__rubrique:nth-child(4n+3) a {
	background: var(--mel-second);
	border-color: var(--mel-second);
}

.univers-melchior .mel-compte__rubrique:nth-child(4n) a {
	background: var(--mel-fond);
	border-color: var(--mel-accent);
	color: var(--mel-accent);
}

.univers-melchior .mel-compte__rubrique a:hover,
.univers-melchior .mel-compte__rubrique a:focus-visible { border-color: var(--mel-texte); }

.univers-melchior .mel-compte__rubrique-nom {
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
	text-transform: none;
}

.univers-melchior .mel-compte__rubrique-texte {
	color: inherit;
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

/* --- Les commandes --- */

.univers-melchior .woocommerce table.woocommerce-orders-table {
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.univers-melchior .woocommerce table.woocommerce-orders-table thead th {
	padding: 0 1rem .75rem 0;
	border: 0;
	border-bottom: 1px solid var(--mel-bordure);
	color: var(--mel-doux);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.univers-melchior .woocommerce table.woocommerce-orders-table tbody th,
.univers-melchior .woocommerce table.woocommerce-orders-table tbody td {
	padding: 1.1rem 1rem 1.1rem 0;
	border: 0;
	border-bottom: 1px solid var(--mel-bordure);
	color: var(--mel-texte);
	font-size: .9rem;
	vertical-align: middle;
}

.univers-melchior .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: 1.15rem;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}

.univers-melchior .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover { color: var(--mel-accent); }

.univers-melchior .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { color: var(--mel-doux); }

.univers-melchior .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: 1.05rem;
	white-space: nowrap;
}

/* Les actions : des pastilles. « Voir » au trait, « Payer » pleine,
   « Annuler » en simple lien. */
.univers-melchior .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	padding-right: 0;
	text-align: right;
}

.univers-melchior .woocommerce-orders-table__cell-order-actions .woocommerce-button {
	margin: .2rem 0 .2rem .4rem;
}

.univers-melchior .woocommerce table.woocommerce-orders-table a.woocommerce-button.button {
	padding: .6em 1.2em;
	border-radius: 100px;
	font-size: .8rem;
	white-space: nowrap;
}

.univers-melchior .woocommerce table.woocommerce-orders-table a.woocommerce-button.button.view {
	background: transparent;
	border-color: var(--mel-bordure);
	color: var(--mel-texte);
}

.univers-melchior .woocommerce table.woocommerce-orders-table a.woocommerce-button.button.view:hover {
	background: var(--mel-teinte);
	border-color: var(--mel-accent);
	color: var(--mel-texte);
}

.univers-melchior .woocommerce table.woocommerce-orders-table a.woocommerce-button.button.cancel {
	padding-inline: .4em;
	background: transparent;
	border-color: transparent;
	color: var(--mel-doux);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Écran étroit : une commande par carte. Le numéro en tête, puis date,
   état et total, chacun sous son intitulé, et les actions dessous. La règle
   générale des tableaux (6.10) les passe déjà en lignes ; celle-ci en fait
   des cartes, et reprend le numéro, qui est une cellule d'en-tête. */
@media (max-width: 600px) {

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table,
	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody { display: block; }

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody tr {
		display: flex;
		flex-direction: column;
		gap: .6rem;
		margin-bottom: .75rem;
		padding: 1.1rem 1.25rem;
		background: var(--mel-fond);
		border: 1px solid var(--mel-bordure);
		border-radius: var(--mel-radius);
	}

	/* Intitulé à gauche, valeur à droite. En bloc, et non en flex : le total
	   mêle un montant et du texte, que le flex séparait en deux colonnes. */
	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody th,
	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody td {
		display: flow-root;
		padding: 0;
		background: transparent;
		border: 0;
		text-align: right;
	}

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody td::before {
		float: left;
		margin-right: 1rem;
		line-height: 1.9;
	}

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody th { text-align: left; }

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table tbody th::before { content: none; }

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
		padding-bottom: .6rem;
		border-bottom: 1px solid var(--mel-bordure);
	}

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
		align-items: center;
		padding-top: .4rem;
	}

	.univers-melchior .woocommerce table.woocommerce-orders-table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { content: none; }

	.univers-melchior .woocommerce-orders-table__cell-order-actions .woocommerce-button { margin: 0; }
}

/* --- Le suivi d'une commande --- */

/* Le bloc sombre de la confirmation, en carte : date et état, titre en deux
   tons, texte, actions, puis la frise, d'un bord à l'autre de la carte. La
   marge de la frise suit celle de la carte : la variable de marge est
   redéfinie ici. */
/* Maquette « Mon compte : détail d'une commande » : une carte Bordeaux,
   la date et l'état, le titre en deux tons et le montant, le texte, la
   frise ; une grande feuille Rosé déborde du coin haut droit. */
.univers-melchior .mel-suivi {
	--mel-profond: var(--mel-accent);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
	padding: clamp(1.5rem, 2.78vw, 40px);
	background: var(--mel-profond);
	border-radius: 36px;
	color: var(--mel-fond);
	container: mel-suivi / inline-size;
}

.univers-melchior .mel-suivi > :not(.mel-feuille) {
	position: relative;
	z-index: 2;
}

.univers-melchior .mel-suivi__feuille {
	top: -20px;
	right: -40px;
	--mel-feuille-l: 180px;
	--mel-feuille-a: -20deg;
}

.univers-melchior .mel-suivi__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 0;
	color: var(--mel-fond);
	font-size: var(--mel-t-petit);
	letter-spacing: .12em;
}

.univers-melchior .mel-suivi .mel-merci__statut {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-suivi.is-failed .mel-merci__statut {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-profond);
}

.univers-melchior .mel-suivi.is-cancelled .mel-merci__statut,
.univers-melchior .mel-suivi.is-refunded .mel-merci__statut {
	background: transparent;
	border-color: color-mix(in srgb, var(--mel-fond) 45%, transparent);
}

.univers-melchior .mel-suivi__haut {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
}

.univers-melchior .woocommerce .mel-suivi__titre {
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-suivi__titre-accent {
	display: block;
	color: var(--mel-rose);
}

.univers-melchior .mel-suivi__montant {
	margin: 0;
	font-family: var(--mel-font-titre);
	font-weight: 700;
	font-size: clamp(2.4rem, 3.61vw, 3.25rem);
	line-height: 1;
	white-space: nowrap;
}

.univers-melchior .mel-suivi__texte {
	max-width: 560px;
	margin: 0;
	color: var(--mel-fond);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-suivi .mel-suivi__actions { margin: 0; }

.univers-melchior .mel-suivi .mel-frise {
	--mel-frise-filet: var(--mel-rose);

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Carte étroite : deux étapes par rangée, comme la confirmation sur mobile. */
@container mel-suivi (max-width: 40rem) {
	.univers-melchior .mel-suivi .mel-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.univers-melchior .mel-suivi .mel-frise__etape { padding: 14px 14px 16px; }

	.univers-melchior .mel-suivi .mel-frise__nom { font-size: 1rem; }
}

/* Les titres des blocs qui suivent la carte : suivi, détails. */
.univers-melchior .woocommerce .mel-compte__soustitre,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-order-details__title {
	margin: 0 0 16px;
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

/* Les mises à jour envoyées au client : une ligne de temps, sur un filet
   Sapin continu. */
.univers-melchior .mel-suivi__nouvelles { margin-top: 44px; }

.univers-melchior .mel-suivi__notes {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 3px solid var(--mel-second);
	list-style: none;
}

.univers-melchior .mel-suivi__note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 10px 0 16px;
	color: var(--mel-encre);
}

.univers-melchior .mel-suivi__note-date {
	color: var(--mel-second);
	font-size: var(--mel-t-petit);
	font-weight: 600;
}

.univers-melchior .mel-suivi__note-texte p { margin: 0; }

/* --- Le détail d'une commande (gabarits de WooCommerce) --- */

.univers-melchior .woocommerce-MyAccount-content .woocommerce-order-details { margin-top: 40px; }

.univers-melchior .woocommerce-MyAccount-content .woocommerce-customer-details { margin-top: 22px; }

/* Le tableau de la commande : un cadre arrondi au filet fin, l'en-tête sur
   le Rosé, une ligne par article et par montant, le total en gras. */
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 1.5px solid var(--mel-bordure);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 26px;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table th,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table td {
	padding: 14px 22px;
	border: 0;
	border-top: 1px solid var(--mel-bordure);
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--mel-texte-interligne);
	text-align: left;
	text-transform: none;
	vertical-align: middle;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table thead th {
	background: var(--mel-rose);
	border-top: 0;
	color: var(--mel-accent);
	font-weight: 700;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table tfoot tr:last-child th,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table tfoot tr:last-child td {
	color: var(--mel-accent);
	font-weight: 700;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table td:last-child,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table th:last-child { text-align: right; }

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table .product-name a {
	display: inline;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table .product-quantity {
	margin-left: .2em;
	color: inherit;
	font-weight: 400;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table .woocommerce-Price-amount + small,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.shop_table small { font-size: var(--mel-t-petit); }

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details .order-actions--heading,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details .order-actions-button { font-size: .8rem; }

/* Le détail reste un tableau à toutes les largeurs : produit et montant
   tiennent sur deux colonnes. Passé en liste (6.10), chaque cellule prenait
   sa ligne et le montant se retrouvait séparé de son produit. Les trois
   classes passent devant la règle générale, écrite plus bas. */
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table thead { display: table-header-group; }

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table tr {
	display: table-row;
	border-top: 0;
}

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table th,
.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table td { display: table-cell; }

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table td::before { content: none; }

.univers-melchior .woocommerce-MyAccount-content table.woocommerce-table--order-details.order_details.shop_table .product-name { text-align: left; }

/* Adresses de la commande, et page des adresses : deux cartes côte à côte.
   WooCommerce les fait flotter sur 48 % : la grille les remplace. */
.univers-melchior .woocommerce-MyAccount-content .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 18px;
	width: auto;
}

.univers-melchior .woocommerce-MyAccount-content .col2-set::before,
.univers-melchior .woocommerce-MyAccount-content .col2-set::after { content: none; }

.univers-melchior .woocommerce-MyAccount-content .col2-set > .col-1,
.univers-melchior .woocommerce-MyAccount-content .col2-set > .col-2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 26px;
	background: var(--mel-rose);
	border: 0;
	border-radius: 26px;
}

/* Le titre d'une adresse, dans sa carte. */
.univers-melchior .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 10px;
	color: var(--mel-accent);
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
	text-transform: none;
}

.univers-melchior .woocommerce-MyAccount-content address {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	font-style: normal;
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .woocommerce-MyAccount-content address p { margin: .3rem 0 0; }

/* L'en-tête d'une adresse : son nom, et « Modifier » en petite pastille. */
.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: .4rem;
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title::before,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title::after { content: none; }

.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; }

.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	float: none;
	flex: none;
	padding: .35em .9em;
	border: 1px solid var(--mel-accent);
	border-radius: 100px;
	color: var(--mel-texte);
	font-size: .78rem;
	text-decoration: none;
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { border-color: var(--mel-accent); }

.univers-melchior .woocommerce-MyAccount-content > p:first-child:not(.mel-compte__intro) {
	margin: 0;
	padding-bottom: 1.25rem;
	color: var(--mel-doux);
}

/* --- Les formulaires : adresse, informations du compte --- */

/* Une carte claire, comme les blocs de la validation ; les champs sur deux
   colonnes, prénom et nom côte à côte. */
.univers-melchior .woocommerce-MyAccount-content > form {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
}

.univers-melchior .woocommerce-MyAccount-content > form > h2,
.univers-melchior .woocommerce-MyAccount-content > form legend {
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > *,
.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last,
.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-first,
.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-last { grid-column: auto; }

.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .clear { display: none; }

.univers-melchior .woocommerce-MyAccount-content .woocommerce form .form-row,
.univers-melchior .woocommerce-MyAccount-content form .form-row { margin: 0; padding: 0; }

.univers-melchior .woocommerce-MyAccount-content form .form-row em {
	display: block;
	margin-top: .4rem;
	color: var(--mel-doux);
	font-size: .8rem;
}

/* Le changement de mot de passe : un encadré dans la carte. */
.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: .5rem 0 0;
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--mel-bordure);
}

.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset legend {
	float: left;
	width: 100%;
	margin: 0;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	letter-spacing: .01em;
	text-transform: none;
}

.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields > p:last-child { margin-top: 1.5rem; }

@media (max-width: 480px) {

	.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
	.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); }

	.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first,
	.univers-melchior .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last,
	.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-first,
	.univers-melchior .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .form-row-last { grid-column: 1 / -1; }
}

/* Les boutons du compte : des pastilles, comme ailleurs dans le tunnel. */
.univers-melchior .woocommerce-MyAccount-content button.button,
.univers-melchior .mel-connexion button.button {
	max-width: 100%;
	padding: 1em 2em;
	border-radius: 100px;
	white-space: normal;
}

/* Les boutons des notices (« Confirmer l'adresse e-mail »…) peuvent passer
   à la ligne sur un écran étroit, au lieu d'en sortir. */
.univers-melchior .woocommerce-MyAccount-content .woocommerce-info .button,
.univers-melchior .woocommerce-MyAccount-content .woocommerce-message .button {
	max-width: 100%;
	white-space: normal;
}

/* --- Connexion, mot de passe perdu --- */

/* Une carte centrée, son titre au-dessus. Conteneur posé par functions.php
   (section 16) autour des formulaires de WooCommerce. */
.univers-melchior .mel-connexion {
	max-width: 32rem;
	margin: clamp(2rem, 6vw, 4rem) auto;
}

.univers-melchior .woocommerce .mel-connexion > h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: .95;
}

.univers-melchior .woocommerce .mel-connexion form.login,
.univers-melchior .woocommerce .mel-connexion form.lost_reset_password {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
}

.univers-melchior .woocommerce .mel-connexion form .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.univers-melchior .woocommerce .mel-connexion form .form-row::before,
.univers-melchior .woocommerce .mel-connexion form .form-row::after,
.univers-melchior .woocommerce .mel-connexion form .clear { display: none; }

.univers-melchior .woocommerce .mel-connexion form.lost_reset_password > p:first-child {
	margin: 0;
	color: var(--mel-doux);
	font-size: .92rem;
	line-height: 1.55;
}

/* « Se souvenir de moi » et le bouton, sur une ligne. */
.univers-melchior .woocommerce .mel-connexion form.login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.univers-melchior .woocommerce .mel-connexion .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	margin: 0;
	color: var(--mel-texte);
	font-size: .88rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .woocommerce .mel-connexion .woocommerce-form-login__rememberme input { accent-color: var(--mel-accent); }

.univers-melchior .woocommerce .mel-connexion .woocommerce-form-login__submit { margin: 0; }

.univers-melchior .woocommerce .mel-connexion .lost_password {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--mel-bordure);
	font-size: .88rem;
}

.univers-melchior .woocommerce .mel-connexion .lost_password a {
	color: var(--mel-texte);
	text-underline-offset: .2em;
}

/* --- Écran étroit : la navigation passe au-dessus, en une rangée --- */

@media (max-width: 800px) {

	.univers-melchior .mel-compte__corps { grid-template-columns: minmax(0, 1fr); }

	.univers-melchior .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: .5rem;
		padding-bottom: .25rem;
		overflow-x: auto;
		border: 0;
		scrollbar-width: none;
	}

	.univers-melchior .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.univers-melchior .woocommerce-MyAccount-navigation li {
		flex: none;
		border: 0;
	}

	.univers-melchior .woocommerce-MyAccount-navigation li a {
		padding: .55em 1.1em;
		border: 1px solid var(--mel-bordure);
		border-radius: 100px;
		font-size: .85rem;
		white-space: nowrap;
	}

	.univers-melchior .woocommerce-MyAccount-navigation li a::after { content: none; }

	.univers-melchior .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--mel-accent);
		border-color: var(--mel-accent);
		color: var(--mel-fond);
	}
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .woocommerce-MyAccount-navigation li a,
	.univers-melchior .woocommerce-MyAccount-navigation li a::after,
	.univers-melchior .mel-compte__rubrique a,
	.univers-melchior .mel-compte__rubrique-nom::after { transition: none; }
}

/* --- 6.10 Mobile : les tableaux de commande deviennent des listes --- */

@media (max-width: 600px) {

	.univers-melchior .woocommerce table.shop_table:not(.mel-carton__table) thead { display: none; }

	.univers-melchior .woocommerce table.shop_table:not(.mel-carton__table) tr {
		display: block;
		border-top: 1px solid var(--mel-bordure);
	}

	.univers-melchior .woocommerce table.shop_table:not(.mel-carton__table) td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border-top: 0;
		text-align: right;
	}

	/* Le libellé de colonne réapparaît devant chaque valeur, sinon « 40,00 € »
	   seul ne dit pas s'il s'agit du prix ou du sous-total. */
	.univers-melchior .woocommerce table.shop_table:not(.mel-carton__table) td::before {
		content: attr(data-title);
		color: var(--mel-doux);
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
}

/* Sauf les totaux du panier : deux colonnes, intitulé et montant, lisibles à
   toutes les largeurs. Passés en liste — par la règle ci-dessus, ou par
   celle de WooCommerce sous 768 px (woocommerce-smallscreen.css) —, la
   ligne de livraison mettait ses options côte à côte et débordait de
   l'écran. La classe doublée passe devant les deux. */
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table tr {
	display: table-row;
	border-top: 0;
}

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table th,
.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table td { display: table-cell; }

.univers-melchior .woocommerce .cart_totals table.shop_table.shop_table td::before {
	display: none;
	content: none;
}

/* --- 6.11 La validation de commande --- */

/* Maquette « Validation de la commande » : à gauche, quatre lignes à
   modifier sur place, les deux cases obligatoires et le bouton au montant
   exact ; à droite, « votre commande » sur le Sapin, de l'en-tête au pied
   de page et jusqu'au bord de l'écran.

   Balisage de woocommerce/checkout/form-checkout.php, étapes menées par
   assets/js/validation.js. Sur mobile, le carton passe au-dessus du
   formulaire : on sait ce qu'on paie avant de remplir. */
.univers-melchior .mel-validation {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"carton"
		"principal";
	align-items: start;
	/* Un peu d'air sous l'en-tête : le carton ne s'y colle plus. */
	margin-top: clamp(1.5rem, 2.22vw, 32px);
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: var(--mel-texte-graisse);
	line-height: var(--mel-texte-interligne);
}

/* Les boutons de paiement express en tête de la validation (Google Pay,
   Amazon Pay…) : pastilles dessinées par Stripe, comme sur la fiche (4.3). */
.univers-melchior .mel-validation [id*="express-checkout"] iframe,
.univers-melchior .mel-validation [id*="payment-request"] iframe {
	min-width: 0;
	max-width: 100%;
}

.univers-melchior .mel-validation__principal {
	grid-area: principal;
	min-width: 0;
	padding: clamp(2rem, 4.44vw, 64px) var(--mel-bord) clamp(3rem, 6.25vw, 90px);
}

/* `clip` et non `hidden` pour rogner les feuilles : `hidden` ferait du
   carton une zone de défilement, et son contenu ne pourrait plus se coller
   sous l'en-tête. */
.univers-melchior .mel-carton {
	position: relative;
	grid-area: carton;
	overflow: clip;
	padding: clamp(2rem, 4.44vw, 64px) var(--mel-bord);
	border: 0;
	border-radius: 0;
}

@media (min-width: 1000px) {

	.univers-melchior .mel-validation {
		grid-template-columns: minmax(0, 1fr) clamp(380px, 38.9vw, 560px);
		grid-template-areas: "principal carton";
	}

	.univers-melchior .mel-validation__principal { padding-right: var(--mel-bord); }

	/* Le carton occupe toute la hauteur de la page, arrondi en haut à
	   gauche. */
	.univers-melchior .mel-carton {
		align-self: stretch;
		padding: clamp(2.5rem, 4.44vw, 64px) var(--mel-bord);
		border-radius: var(--mel-recouvre) 0 0 0;
	}
}

/* L'ordre de la maquette : les articles, le code promo, puis les totaux. Le
   code promo est un formulaire à part, hors du récapitulatif que WooCommerce
   rafraîchit : les deux conteneurs du récapitulatif s'effacent de la mise
   en page (`display: contents`) pour que ses tableaux et le code promo se
   rangent dans la même colonne. Pour WooCommerce, ils restent entiers. */
.univers-melchior .mel-carton__collant {
	display: flex;
	flex-direction: column;
}

/* Le contenu du carton reste en vue pendant toute la saisie, collé sous
   l'en-tête ; le fond Sapin, lui, occupe toute la hauteur de la page. Plus
   haut que l'écran (beaucoup d'articles, un code promo), c'est la liste des
   articles qui défile dans son cadre : le code et les totaux, total à payer
   compris, restent en vue. Le tableau des articles devient un bloc qui
   défile ; son corps garde la mise en page d'un tableau.
   Les barres de défilement se posent dans la marge du carton, à
   `--mel-defile-ecart` du contenu : superposées (Windows 11, macOS), elles
   barraient les montants. Le contenu, lui, ne bouge pas : la liste reste
   alignée sur les totaux. */
@media (min-width: 1000px) {
	.univers-melchior .mel-carton .mel-carton__collant {
		--mel-defile-ecart: 14px;
		position: sticky;
		top: calc(var(--mel-entete-bas) + clamp(1.5rem, 2.22vw, 32px));
		max-height: calc(100vh - var(--mel-entete-bas) - 2 * clamp(1.5rem, 2.22vw, 32px));
		margin-right: calc(-1 * var(--mel-defile-ecart));
		padding-right: var(--mel-defile-ecart);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--mel-rose) 60%, transparent) transparent;
	}

	.univers-melchior .mel-carton .mel-carton__collant > *,
	.univers-melchior .mel-carton .mel-carton__contenu > * { flex-shrink: 0; }

	.univers-melchior .mel-carton table.mel-carton__table--articles {
		display: block;
		flex-shrink: 1;
		width: auto;
		min-height: 120px;
		margin-right: calc(-1 * var(--mel-defile-ecart));
		padding-right: var(--mel-defile-ecart);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--mel-rose) 60%, transparent) transparent;
	}

	.univers-melchior .mel-carton table.mel-carton__table--articles > tbody {
		display: table;
		width: 100%;
		border-collapse: inherit;
		border-spacing: inherit;
	}
}

.univers-melchior .mel-carton #order_review,
.univers-melchior .mel-carton .mel-carton__contenu { display: contents; }

.univers-melchior .mel-carton .mel-carton__table--articles { order: 1; }

.univers-melchior .mel-carton .mel-carton__promo { order: 2; }

.univers-melchior .mel-carton .mel-carton__gravure { order: 3; }

.univers-melchior .mel-carton .mel-carton__table--totaux { order: 4; }

/* Les feuilles de la maquette : une grande Rosé, qui déborde en bas à
   droite, et une petite Champagne. Elles passent sous le contenu. */
.univers-melchior .mel-carton::before,
.univers-melchior .mel-carton::after {
	position: absolute;
	aspect-ratio: 89.87 / 86.7;
	background: url("../img/feuille-rose.svg") center / contain no-repeat;
	content: "";
	pointer-events: none;
}

.univers-melchior .mel-carton::before {
	right: -60px;
	bottom: 140px;
	width: clamp(140px, 18vw, 260px);
	transform: rotate(-24deg);
}

.univers-melchior .mel-carton::after {
	bottom: 420px;
	left: 60px;
	width: 60px;
	background-image: url("../img/feuille-champagne.svg");
	transform: rotate(18deg);
}

@media (max-width: 999px) {
	.univers-melchior .mel-carton::before,
	.univers-melchior .mel-carton::after { display: none; }
}

.univers-melchior .mel-carton > * {
	position: relative;
	z-index: 1;
}

/* Notices et connexion : elles portent leur propre marge, le conteneur n'en
   ajoute pas — il reste vide la plupart du temps. */
.univers-melchior .mel-validation__avant { margin: 0; }

/* --- Titre et encadré --- */

.univers-melchior .woocommerce .mel-validation__titre {
	margin: 0 0 30px;
	color: var(--mel-accent);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
}

/* Engagement logistique (MEL_TXT_VALIDATION_NOTE). L'écart dessous est porté
   par le formulaire : les marges basses des paragraphes sont annulées sur
   tout le site par une règle en ligne étrangère au thème. */
.univers-melchior .mel-validation__note {
	margin: 0;
	padding: 1.1rem 1.4rem;
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
	font-size: .92rem;
}

.univers-melchior .mel-validation__note + .mel-validation__formulaire { margin-top: 1.5rem; }

/* --- Les lignes --- */

/* Balisage de form-checkout.php, conduite par assets/js/validation.js. Une
   partie par section — livraison, adresse, paiement, mot —, séparées par des
   filets. Fermée, la partie montre sa ligne ; ouverte, son bloc de champs, à
   la place de la ligne. Sans JavaScript (pas de `is-lignes`), les lignes
   restent masquées et tous les blocs ouverts. */
.univers-melchior .mel-partie { border-bottom: 1.5px solid var(--mel-bordure); }

/* La partie ouverte, encadrée, n'a pas besoin de filet. */
.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte:not([data-mel-partie="paiement"]) { border-bottom-color: transparent; }

.univers-melchior .mel-resume__ligne { display: none; }

.univers-melchior .mel-validation.is-lignes .mel-resume__ligne {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	padding: 26px 0;
}

.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte .mel-resume__ligne,
.univers-melchior .mel-validation.is-lignes .mel-partie:not(.is-ouverte) .mel-bloc { display: none; }

.univers-melchior .mel-resume__corps {
	display: grid;
	gap: .35rem;
	min-width: 0;
}

.univers-melchior .mel-resume__titre {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
	text-transform: none;
	overflow-wrap: anywhere;
}

.univers-melchior .mel-resume__detail {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-resume__modifier {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--mel-rose);
	border: 1px solid var(--mel-rose);
	border-radius: 50%;
	color: var(--mel-accent);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Hello Elementor colore tous les boutons au survol et au focus. */
.univers-melchior .mel-resume__modifier:hover,
.univers-melchior .mel-resume__modifier:focus {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-resume__modifier:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 2px;
}

/* Le bloc ouvert : carte Rosé à bord d'accent, entre les filets. Le
   paiement, lui, s'ouvre dans sa ligne, sans carte : ses moyens sont déjà
   encadrés. */
.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte .mel-bloc {
	margin: 22px 0;
	padding: clamp(1.25rem, 2.08vw, 30px);
	background: var(--mel-rose);
	border: 2px solid var(--mel-accent);
	border-radius: 30px;
}

.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte[data-mel-partie="paiement"] .mel-bloc {
	margin: 0;
	padding: 26px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte[data-mel-partie="paiement"] .mel-bloc__titre {
	margin-bottom: 16px;
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
}

/* Annuler / Enregistrer : seulement sur un bloc ouvert au crayon. Ouvert
   d'office parce qu'incomplet, il n'a rien à annuler. */
.univers-melchior .mel-bloc__edition { display: none; }

.univers-melchior .mel-validation.is-lignes .mel-partie.is-ouverte .mel-bloc__edition {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.univers-melchior .mel-partie.is-requise [data-mel-annuler] { display: none; }

.univers-melchior .mel-bloc__edition .mel-btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	border-width: 2px;
	border-radius: 999px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
}

.univers-melchior .mel-bloc__edition .mel-btn.mel-btn--ligne {
	background: transparent;
	border-color: var(--mel-accent);
	color: var(--mel-accent);
}

/* --- Les blocs --- */

.univers-melchior .mel-bloc {
	margin: 1rem 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
}

.univers-melchior .woocommerce .mel-bloc__titre {
	margin: 0 0 20px;
	color: var(--mel-accent);
	font-family: var(--mel-h4-police);
	font-size: var(--mel-h4-taille);
	line-height: var(--mel-h4-interligne);
	letter-spacing: var(--mel-h4-espace);
	text-transform: none;
}

/* Le bloc porte le titre : celui de WooCommerce ferait doublon. */
.univers-melchior .mel-bloc .woocommerce-billing-fields > h3 { display: none; }

/* --- Champs, sur deux colonnes --- */

/* Prénom et nom, code postal et ville vont par deux ; le reste occupe la
   ligne. La grille ignore les flottements de WooCommerce.

   L'écart vertical est celui de la GRILLE (row-gap), pas la marge des
   champs : une règle en ligne du site, étrangère au thème, impose
   `p { margin-bottom: 0 !important }` à toute la page — et WooCommerce rend
   chaque champ dans un <p>. Aucune marge basse n'y survit ; l'écart de
   grille, lui, n'est pas une marge. `--mel-champs-ecart` le porte, pour que
   l'exception de l'adresse (plus bas) se calcule d'après lui. */
.univers-melchior .woocommerce-billing-fields__field-wrapper,
.univers-melchior .woocommerce-shipping-fields__field-wrapper,
.univers-melchior .woocommerce-additional-fields__field-wrapper {
	--mel-champs-ecart: 16px;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--mel-champs-ecart) 14px;
}

/* Les sélecteurs sont écrits en toutes lettres, sans `:is()` : le
   minificateur de LiteSpeed peut ôter l'espace qui le précède, ce qui change
   le sens du sélecteur sans la moindre erreur. */
.univers-melchior .mel-validation .woocommerce-billing-fields__field-wrapper .form-row.form-row,
.univers-melchior .mel-validation .woocommerce-shipping-fields__field-wrapper .form-row.form-row,
.univers-melchior .mel-validation .woocommerce-additional-fields__field-wrapper .form-row.form-row {
	margin: 0;
	padding: 0;
}

/* Les étiquettes des maquettes : petites, en gras, sans capitales. */
.univers-melchior .mel-validation .woocommerce-billing-fields__field-wrapper .form-row.form-row > label,
.univers-melchior .mel-validation .woocommerce-shipping-fields__field-wrapper .form-row.form-row > label,
.univers-melchior .mel-validation .woocommerce-additional-fields__field-wrapper .form-row.form-row > label {
	margin-bottom: 6px;
	color: var(--mel-encre);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Les champs : 54 px de haut, Champagne, filet fin, arrondi de 16 px. */
.univers-melchior .mel-validation .mel-bloc .form-row.form-row input.input-text,
.univers-melchior .mel-validation .mel-bloc .form-row.form-row textarea,
.univers-melchior .mel-validation .mel-bloc .form-row.form-row select {
	min-height: 54px;
	padding: 0 18px;
	background-color: var(--mel-fond);
	border: 1.5px solid var(--mel-bordure);
	border-radius: 16px;
	color: var(--mel-encre);
	font-size: 1rem;
}

.univers-melchior .mel-validation .mel-bloc .form-row.form-row textarea { padding: 14px 18px; }

/* Le champ actif : son filet passe au Bordeaux et s'épaissit, sans contour
   détaché autour (le contour du navigateur laissait un liseré clair entre
   les deux). */
.univers-melchior .mel-validation .mel-bloc .form-row.form-row input.input-text:focus,
.univers-melchior .mel-validation .mel-bloc .form-row.form-row textarea:focus,
.univers-melchior .mel-validation .mel-bloc .form-row.form-row select:focus {
	border-color: var(--mel-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--mel-accent);
}

.univers-melchior .mel-validation .mel-bloc .form-row.form-row input.input-text::placeholder,
.univers-melchior .mel-validation .mel-bloc .form-row.form-row textarea::placeholder { color: color-mix(in srgb, var(--mel-encre) 45%, var(--mel-fond)); }

/* --- Les menus déroulants (pays, région) ---

   Ceux de WooCommerce sont des « select2 » : un faux champ, et une liste
   ouverte en bas de page (hors du formulaire, sous le <body>). Ils reprennent
   le champ de la boutique — 54 px, Champagne, filet fin, arrondi de 16 px —,
   le chevron de la boutique au lieu du triangle, et la liste devient une
   carte arrondie, séparée du champ, aux options espacées : survolée en Rosé,
   choisie en gras. Valent partout dans la boutique : validation, adresses du
   compte. */
.univers-melchior .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0;
	background-color: var(--mel-fond);
	border: 1.5px solid var(--mel-bordure);
	border-radius: 16px;
	transition: border-color .15s ease;
}

.univers-melchior .select2-container--open .select2-selection--single,
.univers-melchior .select2-container--focus .select2-selection--single { border-color: var(--mel-accent); }

.univers-melchior .select2-container--focus .select2-selection--single {
	/* Le filet du champ s'épaissit, sans contour détaché autour. */
	outline: none;
	box-shadow: 0 0 0 1px var(--mel-accent);
}

/* La liste ouverte vers le haut ou le bas : le champ garde ses arrondis. */
.univers-melchior .select2-container--open.select2-container--below .select2-selection--single,
.univers-melchior .select2-container--open.select2-container--above .select2-selection--single { border-radius: 16px; }

.univers-melchior .select2-container .select2-selection--single .select2-selection__rendered {
	flex: 1;
	padding: 0 48px 0 18px;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: 1rem;
	line-height: 1.3;
}

.univers-melchior .select2-container .select2-selection--single .select2-selection__placeholder { color: color-mix(in srgb, var(--mel-encre) 45%, var(--mel-fond)); }

.univers-melchior .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 4px;
	width: 44px;
	height: 100%;
}

.univers-melchior .select2-container .select2-selection__arrow b { display: none; }

.univers-melchior .select2-container .select2-selection__arrow::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	background: var(--mel-accent);
	content: "";
	-webkit-mask: var(--mel-masque-chevron) center / contain no-repeat;
	mask: var(--mel-masque-chevron) center / contain no-repeat;
	transition: transform .2s ease;
}

.univers-melchior .select2-container--open .select2-selection__arrow::after { transform: rotate(180deg); }

/* La liste : une carte détachée du champ. */
.univers-melchior .select2-dropdown {
	overflow: hidden;
	background: var(--mel-fond);
	border: 1.5px solid var(--mel-bordure);
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--mel-profond) 45%, transparent);
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
}

.univers-melchior .select2-container--open .select2-dropdown--below { margin-top: 6px; }

.univers-melchior .select2-container--open .select2-dropdown--above { margin-top: -6px; }

/* La recherche, en pastille. */
.univers-melchior .select2-search--dropdown { padding: 10px; }

.univers-melchior .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 44px;
	padding: 0 16px;
	background: color-mix(in srgb, var(--mel-bordure) 35%, var(--mel-fond));
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--mel-encre);
	font-family: inherit;
	font-size: 1rem;
	outline: none;
}

.univers-melchior .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--mel-accent); }

.univers-melchior .select2-container--default .select2-results > .select2-results__options {
	max-height: 280px;
	padding: 0 6px 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--mel-bordure) transparent;
}

.univers-melchior .select2-container--default .select2-results__option {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--mel-encre);
	font-size: 1rem;
	line-height: 1.3;
}

.univers-melchior .select2-container--default .select2-results__option[aria-selected="true"],
.univers-melchior .select2-container--default .select2-results__option--selected {
	background: transparent;
	color: var(--mel-accent);
	font-weight: 700;
}

.univers-melchior .select2-container--default .select2-results__option--highlighted[aria-selected],
.univers-melchior .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .select2-container--default .select2-results__message { color: var(--mel-doux); }

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .select2-container .select2-selection__arrow::after { transition: none; }
}

/* Rue et complément se lisent comme une seule adresse sur deux lignes : le
   complément remonte pour ne laisser que 0,75 rem sous la rue. Une marge
   HAUTE — la règle en ligne ne touche que les marges basses —, calculée
   d'après l'écart de la grille : les deux restent liés. */
.univers-melchior .mel-validation #billing_address_2_field.form-row,
.univers-melchior .mel-validation #shipping_address_2_field.form-row { margin-top: calc(.75rem - var(--mel-champs-ecart)); }

.univers-melchior .woocommerce-billing-fields__field-wrapper > .form-row,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > .form-row,
.univers-melchior .woocommerce-additional-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	width: auto;
	float: none;
}

/* Six colonnes : prénom et nom par moitiés ; code postal, ville et
   téléphone par tiers, sur une ligne, comme sur la maquette. Le reste occupe
   la ligne entière. */
.univers-melchior .woocommerce-billing-fields__field-wrapper > .form-row-first,
.univers-melchior .woocommerce-billing-fields__field-wrapper > .form-row-last,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > .form-row-first,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: span 3; }

.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_postcode_field,
.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_city_field,
.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_phone_field,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_postcode_field,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_city_field,
.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_phone_field { grid-column: span 2; }

/* Colonne étroite (validation sur tablette, où le carton prend la droite) :
   les tiers deviennent trop serrés pour leurs intitulés. Code postal et
   ville se partagent la ligne, le téléphone prend la suivante. La requête
   porte sur la largeur du formulaire, pas sur celle de l'écran. */
.univers-melchior .woocommerce-billing-fields__field-wrapper,
.univers-melchior .woocommerce-shipping-fields__field-wrapper { container: mel-champs / inline-size; }

@container mel-champs (max-width: 34rem) {

	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_postcode_field,
	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_city_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_postcode_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_city_field { grid-column: span 3; }

	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_phone_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_phone_field { grid-column: 1 / -1; }
}

/* Sur mobile, une colonne : chaque champ reprend toute la ligne — un
   `span` resté à 2 ou 3 créerait une colonne implicite, et l'écart de la
   grille en plus : les champs concernés débordaient les autres de 24 px.
   Les champs placés par leur identifiant, plus haut, sont repris par leur
   identifiant : une classe ne l'emporterait pas. */
@media (max-width: 480px) {

	.univers-melchior .woocommerce-billing-fields__field-wrapper,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

	.univers-melchior .woocommerce-billing-fields__field-wrapper > .form-row.form-row,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > .form-row.form-row,
	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_postcode_field,
	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_city_field,
	.univers-melchior .woocommerce-billing-fields__field-wrapper > #billing_phone_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_postcode_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_city_field,
	.univers-melchior .woocommerce-shipping-fields__field-wrapper > #shipping_phone_field { grid-column: 1 / -1; }
}

.univers-melchior .woocommerce-additional-fields textarea { min-height: 6.5rem; }

/* --- Livraison : les options en cartes --- */

.univers-melchior .mel-livraison__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: .75rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

/* La case reste le vrai contrôle — clavier, lecteurs d'écran, script de
   WooCommerce —, posée dans la carte ; la carte entière est son étiquette. */
.univers-melchior .mel-livraison__option { position: relative; }

.univers-melchior .mel-livraison__radio {
	position: absolute;
	top: 1.05rem;
	left: 1rem;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--mel-accent);
}

.univers-melchior .mel-livraison__carte {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	height: 100%;
	margin: 0;
	padding: .95rem 1rem .95rem 2.75rem;
	background: var(--mel-fond);
	border: 1px solid var(--mel-bordure);
	border-radius: var(--mel-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.univers-melchior .mel-livraison__carte:hover { border-color: var(--mel-sourd); }

.univers-melchior .mel-livraison__radio:checked + .mel-livraison__carte {
	background: var(--mel-teinte);
	border-color: var(--mel-accent);
	box-shadow: inset 0 0 0 1px var(--mel-accent);
}

/* WooCommerce style la liste des livraisons par son identifiant
   (`ul#shipping_method li label { display: inline }`…) : un identifiant
   l'emporte sur toutes nos classes, et la carte se défaisait — étiquette en
   ligne, bordure brisée. Ces règles reprennent l'identifiant pour passer
   devant. Seule la première liste le porte ; les suivantes, s'il y en a,
   n'ont pas de règle WooCommerce à contrer. */
.univers-melchior #shipping_method .mel-livraison__option {
	margin: 0;
	line-height: inherit;
}

.univers-melchior #shipping_method .mel-livraison__radio {
	margin: 0;
	vertical-align: baseline;
}

.univers-melchior #shipping_method .mel-livraison__carte { display: flex; }

.univers-melchior #shipping_method .amount { font-weight: 400; }

.univers-melchior .mel-livraison__radio:focus-visible + .mel-livraison__carte {
	outline: 2px solid var(--mel-accent);
	outline-offset: 2px;
}

.univers-melchior .mel-livraison__nom,
.univers-melchior .mel-livraison__prix {
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: 1.05rem;
	line-height: 1.1;
	text-transform: none;
}

.univers-melchior .mel-livraison__prix { white-space: nowrap; }

/* Écart en marge intérieure : une marge basse sur un paragraphe serait
   annulée (voir .mel-validation__avant). */
.univers-melchior .mel-livraison__message {
	margin: 0;
	padding-bottom: 1.25rem;
	color: var(--mel-doux);
	font-size: .9rem;
}

/* Livrer ailleurs : une simple case, pas un titre. */
.univers-melchior .woocommerce .mel-livrer-ailleurs {
	margin: 18px 0 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-livrer-ailleurs label {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	cursor: pointer;
}

.univers-melchior .mel-livrer-ailleurs input { accent-color: var(--mel-accent); }

/* Les cases à cocher des maquettes : 24 px, filet Bordeaux, coin arrondi,
   pleines une fois cochées. La case reste native : clavier, lecteurs
   d'écran et scripts de WooCommerce n'y voient aucune différence. */
.univers-melchior .mel-validation input[type="checkbox"],
.univers-melchior .mel-payer input[type="checkbox"] {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	background: transparent;
	border: 2px solid var(--mel-accent);
	border-radius: 7px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.univers-melchior .mel-validation input[type="checkbox"]:checked,
.univers-melchior .mel-payer input[type="checkbox"]:checked {
	background: var(--mel-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.univers-melchior .mel-validation input[type="checkbox"]:focus-visible,
.univers-melchior .mel-payer input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 2px;
}

.univers-melchior .woocommerce-shipping-fields .shipping_address { margin-top: 1.25rem; }

/* --- Paiement : les moyens en cartes --- */

.univers-melchior.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Case, puis nom et logos des cartes sur une ligne ; les champs de la
   passerelle occupent la largeur dessous. La liste est celle des moyens
   actifs dans WooCommerce : elle suit les réglages. Quand il n'y en a qu'un,
   WooCommerce masque sa case, et la première colonne se replie. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	margin: 0;
	padding: 22px 24px;
	background: transparent;
	border: 2px solid var(--mel-bordure);
	border-radius: 24px;
	line-height: 1.4;
}

/* WooCommerce pose sur chaque moyen un « clearfix » (::before et ::after).
   Dans la grille, ces pseudo-éléments prenaient chacun une case et
   rejetaient la case à cocher sur sa propre ligne. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after { content: none; }

.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) { border-color: var(--mel-second); }

/* Le bouton radio de la maquette : un rond Sapin, plein au centre. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li > input.input-radio {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0 12px 0 0;
	background: transparent;
	border: 2px solid var(--mel-second);
	border-radius: 50%;
	cursor: pointer;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
}

.univers-melchior.woocommerce-checkout #payment ul.payment_methods li > input.input-radio:checked { background: radial-gradient(circle, var(--mel-second) 0 5px, transparent 5.5px); }

.univers-melchior.woocommerce-checkout #payment ul.payment_methods li > input.input-radio:focus-visible {
	outline: 2px solid var(--mel-second);
	outline-offset: 2px;
}

.univers-melchior.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	grid-column: 2;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* Aucun moyen de paiement : « Le tiroir-caisse est fermé »
   (mel_caisse_fermee_html()). Il porte son propre titre et n'a rien à
   enregistrer : le titre du bloc et ses boutons s'effacent. Écarts en `gap`
   — les marges basses des paragraphes sont annulées sur tout le site. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.mel-caisse {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

/* Le « clearfix » de WooCommerce deviendrait un élément de la colonne. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.mel-caisse::before,
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li.mel-caisse::after { content: none; }

.univers-melchior .woocommerce .mel-caisse__titre {
	margin: 0;
	color: var(--mel-texte);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: .95;
	text-transform: none;
}

.univers-melchior .mel-caisse__texte {
	max-width: 32rem;
	margin: 0;
	color: var(--mel-doux);
	font-size: .98rem;
}

.univers-melchior .mel-caisse__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .4rem;
}

.univers-melchior .mel-caisse__actions .mel-btn {
	padding: .95em 1.9em;
	border-radius: 100px;
}

/* Le sélecteur des boutons reprend celui qui les affiche sur un bloc ouvert,
   pour passer devant. */
.univers-melchior .mel-bloc:has(.mel-caisse) > .mel-bloc__titre,
.univers-melchior .mel-validation.is-lignes .mel-partie .mel-bloc:has(.mel-caisse) .mel-bloc__edition { display: none; }

/* Autre notice dans la liste (celle d'une passerelle) : sans la marge basse
   des notices (6.2), qui doublait l'écart avant les boutons du bloc, ni
   l'interligne de 2 que WooCommerce donne aux moyens de paiement. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods .woocommerce-info,
.univers-melchior.woocommerce-checkout #payment ul.payment_methods .woocommerce-error {
	margin: 0;
	line-height: 1.5;
}

/* Les logos des moyens de paiement, à la hauteur du libellé. */
.univers-melchior.woocommerce-checkout #payment ul.payment_methods li > label img {
	max-height: 1.5rem;
	margin: 0;
}

/* Le champ de carte de WooPayments se monte dans cette boîte : pas de second
   cadre dans la carte. */
.univers-melchior.woocommerce-checkout #payment div.payment_box {
	grid-column: 1 / -1;
	margin: 18px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
}

.univers-melchior.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* Le formulaire de WooPayments dans la carte du moyen de paiement : son
   cadre (un <fieldset>, avec le filet gris du navigateur et une marge
   intérieure en ligne de 7 px) disparaît, la carte suffit. Les champs
   eux-mêmes sont dans une iframe de Stripe, que ce CSS n'atteint pas :
   assets/js/paiement.js les dessine. */
.univers-melchior.woocommerce-checkout #payment div.payment_box .wcpay-upe-form fieldset.wc-payment-form {
	min-width: 0;
	margin: 0;
	padding: 0 !important;
	border: 0;
}

/* La copie cachée du champ « Prénom », que WooPayments glisse dans la page
   pour relever le dessin de ses champs. Stripe ignore `min-height` : la
   hauteur de 54 px passe par la marge intérieure (15 + 21 + 15, et deux
   filets de 1,5 px). Sans effet visible, la copie est hors de l'écran. */
.univers-melchior #wcpay-hidden-div input {
	padding: 15px 18px;
	line-height: 21px;
}

/* Une erreur de la carte (numéro invalide) s'écrit sous les champs. */
.univers-melchior.woocommerce-checkout #payment div.payment_box #wcpay-errors:not(:empty) { margin-top: 14px; }

.univers-melchior.woocommerce-checkout #payment div.payment_box .wcpay-upe-form > p,
.univers-melchior.woocommerce-checkout #payment div.payment_box .wcpay-upe-form .testmode-info { margin: 0 0 14px; }

/* « Enregistrer les informations de paiement » : une case de la boutique et
   un libellé en texte courant. WooCommerce pose sur la case une largeur en
   ligne (`width: auto`), qui la réduisait à un trait : `!important` est le
   seul moyen de la reprendre. Le clearfix de WooCommerce sur `.form-row`
   deviendrait un élément de la ligne et décalerait la case. */
.univers-melchior.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 18px 0 0;
	padding: 0;
}

.univers-melchior.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew::before,
.univers-melchior.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew::after { content: none; }

.univers-melchior.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	width: 24px !important;
	height: 24px;
	margin: 0;
}

.univers-melchior.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew label {
	display: inline !important;
	margin: 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: var(--mel-texte-graisse);
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	cursor: pointer;
}

/* Les cartes enregistrées : la même liste de cases que les moyens. */
.univers-melchior.woocommerce-checkout #payment div.payment_box ul.woocommerce-SavedPaymentMethods {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.univers-melchior.woocommerce-checkout #payment div.payment_box ul.woocommerce-SavedPaymentMethods li {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

/* --- Passer commande --- */

/* Une colonne : la case de majorité passe avant les CGV, comme sur la
   maquette — WooCommerce l'imprime après, au crochet qui précède le bouton. */
.univers-melchior .woocommerce .mel-validation__commande {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	margin: 32px 0 0;
	padding: 0;
}

.univers-melchior .mel-validation__commande .woocommerce-privacy-policy-text,
.univers-melchior .mel-validation__commande .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

/* L'ordre de la maquette : la mention de confidentialité, la case de
   majorité, celle des CGV, puis le bouton. WooCommerce imprime la majorité
   après les CGV (crochet qui précède le bouton), et range la mention et les
   CGV dans un même conteneur : celui-ci s'efface de la mise en page. */
.univers-melchior .mel-validation .mel-validation__commande > * { order: 5; }

.univers-melchior .mel-validation .mel-validation__commande .woocommerce-terms-and-conditions-wrapper { display: contents; }

.univers-melchior .mel-validation .mel-validation__commande .woocommerce-privacy-policy-text { order: 1; }

.univers-melchior .mel-validation .mel-validation__commande .form-row.mel-majeur { order: 2; }

.univers-melchior .mel-validation .mel-validation__commande .woocommerce-terms-and-conditions-wrapper > .form-row { order: 3; }

.univers-melchior .mel-validation .mel-validation__commande .woocommerce-terms-and-conditions-wrapper > :not(.form-row):not(.woocommerce-privacy-policy-text) { order: 4; }

/* Paiement indisponible : rien à valider. Les cases, le bouton et son aide
   disparaissent ; seule reste la mention sanitaire. Le bloc de paiement
   l'annonce, et le serveur refuse la commande (functions.php). Suit l'état
   du bloc, que WooCommerce rafraîchit quand l'adresse change. */
.univers-melchior .mel-validation:has([data-mel-caisse-fermee]) .mel-validation__commande > :not(.mel-mention-sanitaire) { display: none !important; }

.univers-melchior .mel-validation__commande > * { max-width: 100%; }

/* La mention sanitaire, au pied, centrée : obligatoire, pas décorative. */
.univers-melchior .mel-validation__commande .mel-mention-sanitaire {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	text-align: center;
}

/* Les cases : sans encadré, l'une sous l'autre, comme sur la maquette. Écarts
   en marge intérieure — les marges basses des paragraphes sont annulées sur
   tout le site. */
/* Le cadre de la case de majorité (6.7) était un conteneur flex : le
   « clearfix » que WooCommerce pose sur chaque ligne y devenait un élément,
   et décalait la case. Ici, un simple bloc. Les sélecteurs passent devant
   les étiquettes des formulaires (6.5), en capitales grasses. */
.univers-melchior .mel-validation .mel-validation__commande .woocommerce-terms-and-conditions-wrapper .form-row,
.univers-melchior .mel-validation .mel-validation__commande .form-row.mel-majeur {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.univers-melchior .mel-validation .mel-validation__commande .form-row label {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--mel-texte-interligne);
	text-transform: none;
	cursor: pointer;
}

/* L'attestation de majorité se lit comme une déclaration : capitales
   espacées, en gras, dans l'accent. */
.univers-melchior .mel-validation .mel-validation__commande .form-row.mel-majeur label {
	color: var(--mel-accent);
	font-size: var(--mel-t-petit);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Liens vers les CGV et la politique de confidentialité : soulignés, dans la
   couleur du texte, comme sur la maquette. */
.univers-melchior .mel-validation__commande .woocommerce-terms-and-conditions-wrapper a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Le bouton s'écarte lui-même des cases : leurs marges basses sont annulées. */
.univers-melchior .mel-commander { margin-top: 8px; }

/* Désactivé tant qu'un champ obligatoire est vide ou une case non cochée
   (assets/js/validation.js). Il garde sa couleur, estompée : on voit ce
   qu'il fera, et qu'il n'est pas encore temps. */
.univers-melchior .mel-validation__commande #place_order:disabled {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
	opacity: .4;
	cursor: not-allowed;
}

.univers-melchior .mel-commander__aide {
	display: none;
	margin: .75rem 0 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	text-align: center;
}

.univers-melchior .mel-validation.is-incomplet .mel-commander__aide { display: block; }

/* Le bouton de la maquette : toute la largeur, 66 px de haut. */
.univers-melchior .mel-validation__commande #place_order {
	min-height: 66px;
	font-size: clamp(1.15rem, 1.6vw, 1.4375rem);
}

.univers-melchior .mel-validation__securise {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--mel-second);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Votre carton --- */

/* Fond, couleurs et totaux sont partagés avec les totaux du panier (6.4). Ici,
   ce qui lui est propre : l'en-tête, les articles, le code promo. */
/* La marge sépare le titre de la liste des articles, qui défile sous lui :
   l'interligne d'Elementor (40 px pour un corps de 46 px) laisse les lettres
   d'un titre sur deux lignes déborder de sa boîte, et sans marge elles
   chevauchaient l'article du haut. La première ligne rend l'espace qu'elle
   avait au-dessus d'elle. */
.univers-melchior .mel-carton__entete {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.univers-melchior .woocommerce .mel-carton__titre {
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-carton__modifier,
.univers-melchior .mel-carton__table a.woocommerce-remove-coupon,
.univers-melchior .mel-carton__promo .showcoupon {
	color: var(--mel-rose);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.univers-melchior .mel-carton__modifier:hover,
.univers-melchior .mel-carton__table a.woocommerce-remove-coupon:hover,
.univers-melchior .mel-carton__promo .showcoupon:hover { color: color-mix(in srgb, var(--mel-fond) 72%, var(--mel-profond)); }

/* Les articles : vignette à gauche ; à droite, le nom en grand, et dessous
   la quantité face au montant — la lecture d'une ligne de facture. Le nom
   garde toute la largeur : le panneau est étroit. La vignette est en
   portrait, ce sont des bouteilles. Le sélecteur l'emporte sur les cellules
   des totaux, alignées à droite. */
.univers-melchior .mel-carton table.shop_table .mel-carton__articles td {
	padding: 22px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--mel-rose) 40%, transparent);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
}

.univers-melchior .mel-carton table.shop_table .mel-carton__articles tr:first-child td { padding-top: 0; }

.univers-melchior .mel-carton table.shop_table .mel-carton__articles td.mel-carton__vignette {
	width: 88px;
	padding-right: 18px;
}

.univers-melchior .mel-carton__image {
	display: block;
	width: 88px;
	max-width: none;
	height: 112px;
	background: color-mix(in srgb, #000 15%, var(--mel-second));
	border-radius: 16px;
	object-fit: cover;
}

.univers-melchior .mel-carton__nom {
	display: block;
	color: var(--mel-fond);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.35rem, 1.81vw, 1.625rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	overflow-wrap: break-word;
}

.univers-melchior .mel-carton__pied {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: .8rem;
}

.univers-melchior .mel-carton__detail {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	color: var(--mel-rose);
}

.univers-melchior .mel-carton__quantite { font-size: var(--mel-t-petit); }

.univers-melchior .mel-carton__unitaire { font-size: var(--mel-t-petit); }

/* Le montant de la ligne. */
.univers-melchior .mel-carton__prix {
	color: var(--mel-fond);
	font-family: var(--mel-font-titre);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}

/* Les totaux, sous les articles et le code promo. */
.univers-melchior .mel-carton table.mel-carton__table--totaux { margin-top: 48px; }

.univers-melchior .mel-carton table.shop_table .mel-carton__totaux th,
.univers-melchior .mel-carton table.shop_table .mel-carton__totaux td {
	padding: 5px 0;
	font-weight: 400;
}

.univers-melchior .mel-carton table.shop_table .mel-carton__totaux th {
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
}

.univers-melchior .mel-carton table.shop_table .mel-carton__totaux .order-total th,
.univers-melchior .mel-carton table.shop_table .mel-carton__totaux .order-total td { padding-top: 18px; }

.univers-melchior .mel-carton table.shop_table .mel-carton__totaux .order-total th {
	font-family: var(--mel-font-titre);
	font-size: 1.625rem;
}

.univers-melchior .mel-carton .order-total td,
.univers-melchior .mel-carton .order-total td strong,
.univers-melchior .mel-carton .order-total td .woocommerce-Price-amount { font-size: clamp(2.5rem, 3.61vw, 3.25rem); }

/* Le décor : par défaut, les feuilles de la maquette, posées sur le carton
   lui-même (::before et ::after, plus haut) ; une image choisie dans la
   médiathèque (MEL_CARTON_GRAVURE) prend leur place. */
.univers-melchior .mel-carton__gravure {
	padding: 1.5rem 0 0;
	pointer-events: none;
}

.univers-melchior .mel-carton__gravure:has(.mel-illu) { display: none; }

.univers-melchior .mel-carton:has(.mel-carton__gravure-image)::before,
.univers-melchior .mel-carton:has(.mel-carton__gravure-image)::after { display: none; }

/* Le code appliqué, sur le Sapin : la carte du panier, en Champagne. */
.univers-melchior .mel-carton .mel-promo-applique { border-color: color-mix(in srgb, var(--mel-rose) 60%, transparent); }

.univers-melchior .mel-carton .mel-promo-applique,
.univers-melchior .mel-carton .mel-promo-applique__code,
.univers-melchior .mel-carton .mel-promo-applique__description { color: var(--mel-fond); }

.univers-melchior .mel-carton .mel-promo-applique__icone {
	background: var(--mel-rose);
	color: var(--mel-second);
}

.univers-melchior .mel-carton .mel-btn.mel-btn--ligne.mel-promo-applique__retrait {
	border-color: var(--mel-rose);
	color: var(--mel-rose);
}

.univers-melchior .mel-carton .mel-btn.mel-btn--ligne.mel-promo-applique__retrait:hover,
.univers-melchior .mel-carton .mel-btn.mel-btn--ligne.mel-promo-applique__retrait:focus {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-second);
}

.univers-melchior .mel-carton__gravure .mel-illu {
	width: clamp(7rem, 12vw, 10rem);
	margin-left: auto;
	transform: rotate(-24deg);
}

.univers-melchior .mel-carton__gravure-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 14rem;
	object-fit: contain;
	object-position: right bottom;
}

/* Carton en tête de page (sous 1000 px) : il n'est plus une colonne à
   remplir, la gravure reste un filigrane, calée à droite, sans repousser
   le formulaire d'un demi-écran. */
@media (max-width: 999px) {

	.univers-melchior .mel-carton__gravure .mel-illu { width: 5.5rem; }

	.univers-melchior .mel-carton__gravure-image { max-height: 6rem; }
}

/* --- Code promo, au pied du carton --- */

.univers-melchior .mel-carton__promo { margin-top: 22px; }

/* « Vous avez un code promo ? Saisir le code » : une ligne, pas une notice. */
.univers-melchior .mel-carton__promo .woocommerce-form-coupon-toggle .woocommerce-info {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--mel-fond);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-carton__promo .showcoupon {
	font-weight: 600;
	text-decoration: none;
}

.univers-melchior .woocommerce .mel-carton__promo form.checkout_coupon {
	margin: .9rem 0 0;
	padding: 0;
	border: 0;
}

/* Le champ et le bouton du panier (6.3, « Code promo »), sur fond sombre :
   même ligne, étirés à la même hauteur. Le script de WooCommerce ajoute le
   message d'erreur dans cette ligne ; elle passe à la ligne pour lui, et il
   en prend toute la largeur, sous le champ et le bouton. */
.univers-melchior .mel-carton__promo .mel-promo__ligne { flex-wrap: wrap; }

.univers-melchior .mel-carton__promo .mel-promo__champ { border-color: var(--mel-fond); }

/* Sur fond sombre, le filet du bouton s'éclaircit. */
.univers-melchior .mel-carton__promo .mel-promo__bouton {
	background: transparent;
	border-color: color-mix(in srgb, var(--mel-fond) 55%, transparent);
	color: var(--mel-fond);
}

.univers-melchior .mel-carton__promo .mel-btn.mel-promo__bouton:hover,
.univers-melchior .mel-carton__promo .mel-btn.mel-promo__bouton:focus {
	background: color-mix(in srgb, var(--mel-fond) 10%, transparent);
	border-color: var(--mel-fond);
	color: var(--mel-fond);
}

/* Refus du code, sous le champ, comme au panier : icône et message, éclaircis
   vers le rose pour rester lisibles sur le fond sombre. Le sélecteur passe
   devant celui de WooCommerce (`.woocommerce form.checkout_coupon …`), qui
   l'écrit en rouge vif. */
.univers-melchior .mel-carton__promo form.checkout_coupon .coupon-error-notice {
	display: block;
	flex-basis: 100%;
	margin: .1rem 0 0 1.2em;
	padding: 0;
	color: var(--mel-rose);
	font-size: .8rem;
	line-height: 1.4;
}

/* Le champ refusé se cercle, comme au panier : ici d'un rose lisible. */
.univers-melchior .mel-carton__promo .mel-promo__champ[aria-invalid="true"] {
	border-color: var(--mel-rose);
	box-shadow: inset 0 0 0 1px var(--mel-rose);
}

/* Codes appliqués : les cartes du panier (mel_promo_appliques_html()).
   Tant qu'il y en a une, « Un code promo ? » et son champ s'effacent — pour
   en changer, on retire d'abord le code, comme au panier. Le champ porte un
   style en ligne posé par WooCommerce (il le déplie et le replie) : seul
   `!important` le masque sûrement. */
.univers-melchior .mel-carton__promo .mel-promo-applique + .mel-promo-applique { margin-top: .6rem; }

.univers-melchior .mel-carton__promo:has(.mel-promo-applique) .woocommerce-form-coupon-toggle,
.univers-melchior .mel-carton__promo:has(.mel-promo-applique) form.checkout_coupon { display: none !important; }

/* Les confirmations (« Code promo appliqué », « supprimé ») se taisent :
   la carte qui apparaît ou disparaît le dit déjà, comme au panier. WooCommerce
   les insère au-dessus du champ de code, ou juste avant le formulaire de
   commande. Les erreurs, elles, restent. */
.univers-melchior .mel-carton__promo .woocommerce-message,
.univers-melchior .mel-validation__principal > .woocommerce-message { display: none; }

/* --- 6.12 La confirmation de commande --- */

/* Maquette « Confirmation de commande » : un bandeau Sapin avec le titre en
   deux couleurs, le montant dans un cachet Champagne et la frise des quatre
   étapes ; le récapitulatif en trois colonnes en dessous, sur une section
   Champagne qui recouvre le bas du bandeau.

   Balisage de woocommerce/checkout/thankyou.php. La page est pleine largeur
   (6.0) : le bandeau et le récapitulatif vont d'un bord à l'autre, leur
   contenu suit la colonne de 1240 px (`--mel-cote`). */
.univers-melchior .mel-merci {
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: var(--mel-texte-graisse);
	line-height: var(--mel-texte-interligne);
}

/* --- Le bandeau --- */

/* Le sombre du bandeau est le Sapin, le Bordeaux sur « Payer la commande » :
   redéfini ici, il descend dans les nuances calculées à partir de
   --mel-profond (méta, texte, frise). */
.univers-melchior .mel-merci__bandeau {
	--mel-profond: var(--mel-second);
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 2.78vw, 40px) var(--mel-cote) calc(var(--mel-recouvre) + clamp(3rem, 5.83vw, 84px));
	background: var(--mel-profond);
	color: var(--mel-fond);
}

.univers-melchior .mel-payer .mel-merci__bandeau { --mel-profond: var(--mel-accent); }

/* La petite feuille Champagne, au-dessus du cachet. */
.univers-melchior .mel-merci__bandeau::after {
	position: absolute;
	top: 170px;
	right: calc(var(--mel-cote) + 320px);
	width: 56px;
	aspect-ratio: 89.87 / 86.7;
	background: url("../img/feuille-champagne.svg") center / contain no-repeat;
	transform: rotate(24deg);
	content: "";
	pointer-events: none;
}

@media (max-width: 899px) {
	.univers-melchior .mel-merci__bandeau::after { display: none; }
}

/* Page sans commande (lien incomplet) : une feuille Rosé, dans un coin. */
.univers-melchior .mel-merci__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* La grande feuille Rosé, qui déborde du coin haut droit. */
.univers-melchior .mel-merci__bandeau .mel-merci__feuille {
	position: absolute;
	top: -50px;
	right: -80px;
	z-index: 0;
	width: clamp(110px, 11.8vw, 170px);
	transform: rotate(-22deg);
}

.univers-melchior .mel-merci__meta,
.univers-melchior .mel-merci__haut,
.univers-melchior .mel-merci__titre,
.univers-melchior .mel-merci__tampon,
.univers-melchior .mel-merci__suite,
.univers-melchior .mel-merci .mel-frise {
	position: relative;
	z-index: 1;
}

/* Le merci et le numéro, la date, l'état : une ligne de bordereau, un filet
   Rosé dessous. */
.univers-melchior .mel-merci__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 18px;
	align-items: center;
	margin: 0;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--mel-rose);
	color: var(--mel-fond);
	font-size: var(--mel-t-petit);
	letter-spacing: .12em;
}

.univers-melchior .mel-merci__meta > :first-child {
	flex: 1 1 auto;
	font-family: var(--mel-font-titre);
	font-size: clamp(1.15rem, 1.53vw, 1.375rem);
	letter-spacing: 0;
}

/* L'état, en pastille Rosé. Champagne pour un paiement refusé ou une
   commande à régler, au trait pour une commande annulée ou remboursée. */
.univers-melchior .mel-merci__statut {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--mel-rose);
	border: 1.5px solid var(--mel-rose);
	border-radius: 999px;
	color: var(--mel-accent);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
}

.univers-melchior .mel-merci__bandeau.is-failed .mel-merci__statut,
.univers-melchior .mel-payer .mel-merci__statut {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-merci__bandeau.is-cancelled .mel-merci__statut,
.univers-melchior .mel-merci__bandeau.is-refunded .mel-merci__statut {
	background: transparent;
	border-color: color-mix(in srgb, var(--mel-fond) 45%, transparent);
	color: var(--mel-fond);
}

/* La scène : le titre et le texte à gauche, le cachet à droite. Le
   conteneur du titre et du cachet s'efface de la mise en page. */
.univers-melchior .mel-merci__scene {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(2rem, 4.17vw, 60px);
	align-items: center;
	padding: clamp(2.5rem, 4.17vw, 60px) 0 clamp(2.5rem, 3.89vw, 56px);
}

.univers-melchior .mel-merci__haut { display: contents; }

.univers-melchior .mel-merci .mel-merci__titre {
	grid-column: 1;
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
}

/* Très petit écran : le titre suit la largeur. À sa taille minimale, un mot
   long (« remboursée ») débordait de l'écran à 320 px. */
@media (max-width: 420px) {
	.univers-melchior .mel-merci .mel-merci__titre { font-size: 10.5vw; }
}

/* Le titre en deux tons : le Champagne, puis le Rosé, à la ligne. */
.univers-melchior .mel-merci__titre-accent {
	display: block;
	color: var(--mel-rose);
}

/* Le cachet : le montant, dans un rond Champagne penché, cerclé d'un filet
   de la couleur du bandeau, comme un tampon de caisse. */
.univers-melchior .mel-merci__tampon {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	justify-content: center;
	width: clamp(170px, 16vw, 230px);
	aspect-ratio: 1;
	margin: 0;
	padding: 1rem;
	background: var(--mel-fond);
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 10px var(--mel-fond),
		inset 0 0 0 12px var(--mel-profond);
	color: var(--mel-profond);
	text-align: center;
	transform: rotate(-8deg);
}

.univers-melchior .mel-merci__tampon-nom {
	font-size: clamp(.7rem, .97vw, .875rem);
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.univers-melchior .mel-merci__tampon-tva {
	font-size: clamp(.75rem, 1.04vw, var(--mel-t-petit));
	line-height: 1.3;
}

.univers-melchior .mel-merci__tampon-montant {
	font-family: var(--mel-font-titre);
	font-weight: 800;
	/* Au plus petit, « 114,90 € » tient dans le rond de 170 px. */
	font-size: clamp(1.7rem, 3.2vw, 2.875rem);
	line-height: 1.05;
	white-space: nowrap;
}

/* Le texte sous le titre, puis les boutons de l'état (régler, écrire). */
.univers-melchior .mel-merci__suite {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: flex-start;
	padding-top: 26px;
}

.univers-melchior .mel-merci__texte {
	max-width: 560px;
	margin: 0;
	color: var(--mel-fond);
	font-size: clamp(1.05rem, 1.46vw, 1.3125rem);
	line-height: 1.55;
}

.univers-melchior .mel-merci__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 0;
}

/* Le bouton : une pastille Champagne, sa flèche dans un rond de la couleur
   du bandeau. */
.univers-melchior .mel-merci .mel-merci__cta,
.univers-melchior .mel-suivi .mel-merci__cta {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	min-height: 58px;
	padding: 0 12px 0 32px;
	background: var(--mel-fond);
	border: 2px solid var(--mel-fond);
	border-radius: 999px;
	color: var(--mel-accent);
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Le rond, percé de la flèche : par le trou, on voit le fond du bouton.
   Le dessin suit ainsi le bouton au survol, sans couleur à redéclarer. */
.univers-melchior .mel-merci__cta::after {
	flex: none;
	width: 34px;
	height: 34px;
	background: var(--mel-profond);
	border-radius: 50%;
	content: "";
	-webkit-mask: var(--mel-masque-fleche) center / 18px no-repeat, linear-gradient(black, black);
	-webkit-mask-composite: xor;
	mask: var(--mel-masque-fleche) center / 18px no-repeat exclude, linear-gradient(black, black);
	transition: transform .2s ease;
}

.univers-melchior .mel-merci a.mel-merci__cta:hover,
.univers-melchior .mel-merci a.mel-merci__cta:focus,
.univers-melchior .mel-suivi a.mel-merci__cta:hover,
.univers-melchior .mel-suivi a.mel-merci__cta:focus {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-merci a.mel-merci__cta:hover::after,
.univers-melchior .mel-suivi a.mel-merci__cta:hover::after { transform: translateX(.2rem); }

/* Secondaire (écrire au comptoir) : au trait. */
.univers-melchior .mel-merci .mel-merci__cta--ligne,
.univers-melchior .mel-suivi .mel-merci__cta--ligne {
	background: transparent;
	border-color: var(--mel-fond);
	color: var(--mel-fond);
}

.univers-melchior .mel-merci .mel-merci__cta--ligne::after,
.univers-melchior .mel-suivi .mel-merci__cta--ligne::after { background: var(--mel-fond); }

.univers-melchior .mel-merci a.mel-merci__cta--ligne:hover,
.univers-melchior .mel-merci a.mel-merci__cta--ligne:focus,
.univers-melchior .mel-suivi a.mel-merci__cta--ligne:hover,
.univers-melchior .mel-suivi a.mel-merci__cta--ligne:focus {
	background: color-mix(in srgb, var(--mel-fond) 10%, transparent);
	border-color: var(--mel-fond);
	color: var(--mel-fond);
}

.univers-melchior .mel-merci .mel-merci__cta:focus-visible,
.univers-melchior .mel-suivi .mel-merci__cta:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 3px;
}

/* Annuler : un simple lien, à l'écart — on ne l'atteint pas par mégarde. */
.univers-melchior .mel-merci__lien {
	order: -1;
	color: color-mix(in srgb, var(--mel-fond) 72%, var(--mel-profond));
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.univers-melchior .mel-merci a.mel-merci__lien:hover,
.univers-melchior .mel-merci a.mel-merci__lien:focus,
.univers-melchior .mel-suivi a.mel-merci__lien:hover,
.univers-melchior .mel-suivi a.mel-merci__lien:focus { color: var(--mel-fond); }

@media (prefers-reduced-motion: reduce) {

	.univers-melchior .mel-merci__cta,
	.univers-melchior .mel-merci__cta::after { transition: none; }
}

/* Écran étroit : le cachet passe sous le titre, à droite. */
@media (max-width: 699px) {

	.univers-melchior .mel-merci__scene { grid-template-columns: minmax(0, 1fr); }

	.univers-melchior .mel-merci__tampon {
		grid-column: 1;
		grid-row: auto;
		justify-self: end;
		margin-top: 1rem;
	}
}

/* --- La frise --- */

/* Quatre cases arrondies. Le grand numéro dit où en est chaque étape : au
   trait, à venir ; pleine, faite. L'étape du moment prend le Champagne. */
.univers-melchior .mel-merci .mel-frise {
	--mel-frise-filet: var(--mel-rose);

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* À venir : une case au trait Rosé ; faite : pleine, Rosé ; en cours :
   pleine, Champagne. */
.univers-melchior .mel-frise__etape {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 20px 22px 22px;
	border: 1.5px solid var(--mel-frise-filet);
	border-radius: 24px;
	color: var(--mel-fond);
}

.univers-melchior .mel-frise__numero {
	color: inherit;
	font-family: var(--mel-font-titre);
	font-size: clamp(2.2rem, 3.06vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
}

.univers-melchior .mel-frise__nom {
	font-family: var(--mel-font-titre);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.53vw, 1.375rem);
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
	overflow-wrap: break-word;
}

@media (max-width: 380px) {
	.univers-melchior .mel-frise__nom { font-size: .95rem; }
}

.univers-melchior .mel-frise__detail {
	font-size: .875rem;
	line-height: 1.4;
	opacity: .85;
}

/* Faite : pleine, Rosé, le texte en Bordeaux. */
.univers-melchior .mel-frise__etape.is-faite {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-accent);
}

/* L'étape du moment — en cours ou en alerte : pleine, Champagne, le texte
   dans la couleur du bandeau. */
.univers-melchior .mel-frise__etape.is-en-cours,
.univers-melchior .mel-frise__etape.is-alerte {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-profond);
}

/* Arrêtée : la case s'assombrit ; la suite s'estompe. */
.univers-melchior .mel-frise__etape.is-arretee {
	background: color-mix(in srgb, #000 18%, var(--mel-profond));
	border-color: var(--mel-frise-filet);
	color: var(--mel-fond);
}

.univers-melchior .mel-frise.is-arretee .mel-frise__etape:not(.is-arretee) { opacity: .45; }

/* Sur un écran étroit : deux cases par ligne, plus serrées. */
@media (max-width: 699px) {
	.univers-melchior .mel-merci .mel-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.univers-melchior .mel-frise__etape { padding: 14px 14px 16px; }

	.univers-melchior .mel-frise__nom { font-size: 1rem; }
}

/* --- Le récapitulatif --- */

/* Trois colonnes, séparées par des filets : les articles, l'adresse et le
   message, le courriel et le retour à la boutique. */
.univers-melchior .mel-merci__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.univers-melchior .mel-merci__colonne {
	min-width: 0;
	padding: 0 clamp(1.5rem, 3.06vw, 44px);
	border-left: 1.5px solid var(--mel-bordure);
}

.univers-melchior .mel-merci__colonne:first-child {
	padding-left: 0;
	border-left: 0;
}

.univers-melchior .mel-merci__colonne.mel-merci__sortie { padding-right: 0; }

/* L'étiquette de chaque colonne : le surtitre des maquettes. */
.univers-melchior .mel-merci .mel-merci__etiquette {
	margin: 0 0 12px;
	color: var(--mel-second);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

.univers-melchior .mel-merci .mel-merci__etiquette:not(:first-child) { margin-top: 26px; }

.univers-melchior .mel-merci__articles {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vignette, nom et quantité, montant. */
.univers-melchior .mel-merci__article {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
}

.univers-melchior .mel-merci__image {
	display: block;
	width: 64px;
	max-width: none;
	height: 80px;
	background: var(--mel-rose);
	border-radius: 12px;
	object-fit: cover;
}

.univers-melchior .mel-merci__nom {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.15rem, 1.46vw, 1.3125rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
	overflow-wrap: break-word;
}

.univers-melchior .mel-merci__quantite {
	margin-left: .2em;
	font-weight: 400;
	white-space: nowrap;
}

.univers-melchior .mel-merci__article .wc-item-meta {
	margin: .35rem 0 0;
	padding: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	list-style: none;
}

.univers-melchior .mel-merci__article .wc-item-meta p { display: inline; }

.univers-melchior .mel-merci__prix {
	color: var(--mel-encre);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

/* Moyen de paiement, remise, livraison : une ligne chacun, sous un filet. */
.univers-melchior .mel-merci__infos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--mel-bordure);
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

/* Le logo de carte que WooPayments glisse dans le nom du moyen de paiement. */
.univers-melchior .mel-merci__infos img {
	display: inline-block;
	width: auto;
	height: 1.2em;
	vertical-align: middle;
}

.univers-melchior .mel-merci__adresse,
.univers-melchior .mel-merci .mel-merci__mot {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: clamp(1.05rem, 1.32vw, 1.1875rem);
	line-height: 1.55;
	quotes: none;
}

.univers-melchior .mel-merci__adresse { font-style: normal; }

.univers-melchior .mel-merci .mel-merci__mot {
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-style: italic;
}

.univers-melchior .mel-merci .mel-merci__mot::before,
.univers-melchior .mel-merci .mel-merci__mot::after { content: none; }

/* La dernière colonne : le courriel, le retour, et la mention au pied. */
.univers-melchior .mel-merci__sortie {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.univers-melchior .mel-merci__email {
	margin: 0;
	color: var(--mel-encre);
	font-size: clamp(1.05rem, 1.32vw, 1.1875rem);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.univers-melchior .mel-merci .mel-merci__retour {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.2rem, 1.53vw, 1.375rem);
	letter-spacing: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-transform: none;
	text-underline-offset: .25em;
}

.univers-melchior .mel-merci a.mel-merci__retour:hover,
.univers-melchior .mel-merci a.mel-merci__retour:focus { color: var(--mel-accent-fonce); }

.univers-melchior .mel-merci__sortie .mel-mention-sanitaire {
	margin: auto 0 0;
	padding: 0;
	border: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	text-align: left;
}

/* Sur tablette, la dernière colonne passe sous les deux autres ; sur
   mobile, tout s'empile. */
@media (max-width: 999px) {

	.univers-melchior .mel-merci__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

	.univers-melchior .mel-merci__colonne:nth-child(2) { padding-right: 0; }

	.univers-melchior .mel-merci__sortie {
		grid-column: 1 / -1;
		margin-top: 2rem;
		padding: 2rem 0 0;
		border-top: 1.5px solid var(--mel-bordure);
		border-left: 0;
	}
}

@media (max-width: 699px) {

	.univers-melchior .mel-merci__grille { grid-template-columns: minmax(0, 1fr); }

	.univers-melchior .mel-merci__colonne,
	.univers-melchior .mel-merci__colonne:nth-child(2) {
		padding: 0;
		border-left: 0;
	}

	.univers-melchior .mel-merci__colonne + .mel-merci__colonne {
		margin-top: 2rem;
		padding-top: 2rem;
		border-top: 1.5px solid var(--mel-bordure);
	}
}

/* --- Instructions du moyen de paiement (virement, chèque…) --- */

.univers-melchior .mel-merci__instructions {
	grid-column: 1 / -1;
	margin-top: clamp(2rem, 3.47vw, 50px);
	padding: 28px;
	background: var(--mel-rose);
	border-radius: 28px;
	line-height: 1.6;
}

.univers-melchior .mel-merci__instructions > :first-child { margin-top: 0; }

.univers-melchior .mel-merci__instructions h2 {
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
}

/* Commande introuvable : la raison, pour les gestionnaires seulement. */
.univers-melchior .mel-merci__diagnostic {
	margin: clamp(1.5rem, 3vw, 2.25rem) var(--mel-cote) 0;
	padding: 1rem 1.4rem;
	border: 1px dashed var(--mel-doux);
	border-radius: var(--mel-radius);
	color: var(--mel-texte);
	font-size: .9rem;
	line-height: 1.5;
}

/* Commande introuvable : la mention, sous le bandeau. */
.univers-melchior .mel-merci > .mel-mention-sanitaire {
	margin: 0;
	padding: 1.5rem var(--mel-cote) 3rem;
	border: 0;
	font-size: var(--mel-t-petit);
	text-align: left;
}

/* --- 6.13 Payer la commande --- */

/* Maquette « Payer la commande » : le bandeau Bordeaux reprend celui de la
   confirmation, sans frise ; le paiement à gauche, les articles sur le Rosé
   à droite. Balisage de woocommerce/checkout/form-pay.php. Les cartes des
   moyens de paiement et les cases sont celles de la validation (6.11). */

/* Le texte, et sous lui l'avertissement « commande d'un invité » : petit,
   estompé, précédé d'un « i » — une précaution, pas une alerte. */
.univers-melchior .mel-payer__mots {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.univers-melchior .mel-payer__avertissement {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	max-width: 34rem;
	margin: 0;
	color: color-mix(in srgb, var(--mel-fond) 80%, var(--mel-profond));
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

.univers-melchior .mel-payer__avertissement svg {
	flex: none;
	margin-top: .2rem;
}

.univers-melchior .mel-payer__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4.17vw, 60px);
	align-items: start;
}

@media (min-width: 900px) {

	.univers-melchior .mel-payer__grille { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); }

	.univers-melchior .mel-payer__carton {
		position: sticky;
		top: calc(var(--mel-entete-bas) + 1.5rem);
	}
}

.univers-melchior .mel-payer__paiement {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.univers-melchior .woocommerce .mel-payer__titre {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

/* Sous les moyens de paiement : les cases, puis le bouton, l'un sous
   l'autre. Écarts en `gap` — les marges basses des paragraphes sont
   annulées sur tout le site. WooCommerce entoure ce pied d'une marge
   intérieure : elle est retirée. */
.univers-melchior.woocommerce-checkout .mel-payer #payment div.form-row.mel-payer__commande {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: stretch;
	margin: 18px 0 0;
	padding: 0;
}

/* Les sélecteurs passent devant les étiquettes des formulaires (6.5), en
   capitales grasses. */
.univers-melchior .woocommerce form .mel-payer__commande .woocommerce-terms-and-conditions-wrapper .form-row,
.univers-melchior .woocommerce form .mel-payer__commande .form-row.mel-majeur {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.univers-melchior .woocommerce form .mel-payer__commande .woocommerce-terms-and-conditions-wrapper {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.univers-melchior .woocommerce form .mel-payer__commande .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--mel-t-petit);
}

.univers-melchior .woocommerce form .mel-payer__commande .form-row label {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--mel-texte-interligne);
	text-transform: none;
	cursor: pointer;
}

/* L'attestation de majorité : capitales espacées, en gras, dans l'accent. */
.univers-melchior .woocommerce form .mel-payer__commande .form-row.mel-majeur label {
	color: var(--mel-accent);
	font-size: var(--mel-t-petit);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Cases de la validation et de « Payer la commande » : la case sort du flux,
   le texte coule en bloc à sa droite. En flex, l'astérisque obligatoire
   était un élément à part : quand le texte passait à la ligne, il partait
   au bout de la ligne, loin du dernier mot. */
.univers-melchior .mel-validation .mel-validation__commande .form-row label,
.univers-melchior .woocommerce form .mel-payer__commande .form-row label {
	position: relative;
	display: block;
	min-height: 24px;
	padding: .1rem 0 0 36px;
}

.univers-melchior .mel-validation .mel-validation__commande .form-row input[type="checkbox"],
.univers-melchior .woocommerce form .mel-payer__commande .form-row input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
}

.univers-melchior .mel-payer__commande .woocommerce-terms-and-conditions-wrapper a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Le bouton : toute la largeur, 66 px, sa flèche dans un rond Champagne. */
.univers-melchior .woocommerce .mel-payer__commande #place_order {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	min-height: 66px;
	padding: 0 32px;
	border-width: 2px;
	border-radius: 999px;
	font-size: clamp(1.15rem, 1.6vw, 1.4375rem);
}

/* Le rond Champagne, percé de la flèche : par le trou, on voit le Bordeaux
   du bouton. */
.univers-melchior .mel-payer__commande #place_order::after {
	flex: none;
	width: 34px;
	height: 34px;
	background: var(--mel-fond);
	border-radius: 50%;
	content: "";
	-webkit-mask: var(--mel-masque-fleche) center / 18px no-repeat, linear-gradient(black, black);
	-webkit-mask-composite: xor;
	mask: var(--mel-masque-fleche) center / 18px no-repeat exclude, linear-gradient(black, black);
}

/* Désactivé tant qu'une case obligatoire n'est pas cochée : il garde sa
   couleur, estompée, comme à la validation. */
.univers-melchior .woocommerce .mel-payer__commande #place_order:disabled {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
	opacity: .4;
	cursor: not-allowed;
}

.univers-melchior .mel-payer__aide {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	text-align: center;
}

.univers-melchior .mel-payer__aide[hidden] { display: none; }

/* « Articles » : une carte Rosé, les articles de la confirmation, puis les
   totaux. */
.univers-melchior .mel-payer__carton {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(1.5rem, 2.22vw, 32px);
	background: var(--mel-rose);
	border-radius: 34px;
}

.univers-melchior .mel-merci .mel-payer__carton .mel-merci__etiquette {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-payer__carton .mel-merci__articles { gap: 12px; }

.univers-melchior .mel-payer__carton .mel-merci__article {
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 14px;
	padding: 0;
}

.univers-melchior .mel-payer__carton .mel-merci__image {
	width: 56px;
	height: 70px;
	background: color-mix(in srgb, var(--mel-accent) 12%, var(--mel-rose));
}

.univers-melchior .mel-payer__carton .mel-merci__nom {
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 700;
}

.univers-melchior .mel-payer__carton .mel-merci__quantite { font-weight: 700; }

/* Dans une colonne étroite, le montant passe sous le nom : le nom garde la
   largeur, sans couper ses mots. La requête porte sur la largeur de la
   liste, pas sur celle de l'écran. Vaut aussi pour la confirmation. */
.univers-melchior .mel-merci__articles { container: mel-articles / inline-size; }

@container mel-articles (max-width: 22rem) {

	.univers-melchior .mel-merci__article {
		grid-template-columns: 56px minmax(0, 1fr);
		row-gap: .4rem;
	}

	.univers-melchior .mel-merci__image { grid-row: span 2; }

	.univers-melchior .mel-merci__prix {
		grid-column: 2;
		text-align: left;
	}
}

.univers-melchior .mel-payer__totaux {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--mel-accent);
}

.univers-melchior .mel-payer__ligne {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.univers-melchior .mel-payer__ligne dt,
.univers-melchior .mel-payer__ligne dd {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	font-weight: 400;
}

.univers-melchior .mel-payer__ligne dd { text-align: right; }

/* Le total se détache, la TVA dessous en petit. */
.univers-melchior .mel-payer__ligne.is-order_total { align-items: center; }

.univers-melchior .mel-payer__ligne.is-order_total dt {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: 1.375rem;
}

.univers-melchior .mel-payer__ligne.is-order_total dd > .woocommerce-Price-amount,
.univers-melchior .mel-payer__ligne.is-order_total dd > strong {
	display: block;
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: clamp(2rem, 2.78vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
}

.univers-melchior .mel-payer__ligne .includes_tax {
	display: block;
	margin-top: 4px;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
}

.univers-melchior .mel-payer__ligne .includes_tax .woocommerce-Price-amount { font-size: inherit; }

.univers-melchior .mel-payer__formulaire > .mel-mention-sanitaire {
	margin-top: clamp(2rem, 3.47vw, 50px);
	padding: 0;
	border: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	text-align: left;
}

/* --- 6.14 Vérification de l'adresse e-mail --- */

/* Maquette « Vérification de l'adresse e-mail » : sur le Rosé, dans le
   prolongement de l'en-tête, un guichet en deux volets dans un cadre
   Champagne : à gauche, sur le Bordeaux, la raison de la demande ; à droite,
   le titre et le champ. Le champ et son bouton forment une seule pastille.
   Le pied de page recouvre le bas du Rosé (3 ter).

   Balisage de woocommerce/checkout/form-verify-email.php. */
.univers-melchior .mel-verification {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6.25vw, 90px) var(--mel-bord) calc(var(--mel-recouvre) + clamp(4rem, 9.3vw, 134px));
	background: var(--mel-rose);
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	font-weight: var(--mel-texte-graisse);
	line-height: var(--mel-texte-interligne);
}

/* Les feuilles : Sapin en haut à gauche, Champagne en bas à droite. */
.univers-melchior .mel-verification__deco--a {
	top: 50px;
	left: 40px;
	--mel-feuille-l: 90px;
	--mel-feuille-a: -24deg;
}

.univers-melchior .mel-verification__deco--b {
	right: 60px;
	bottom: calc(var(--mel-recouvre) + 64px);
	--mel-feuille-l: 70px;
	--mel-feuille-a: 20deg;
}

.univers-melchior .mel-verification__cadre {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-areas: "volet guichet";
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	max-width: var(--mel-contenu);
	margin-inline: auto;
	padding: 18px;
	background: var(--mel-fond);
	border-radius: 48px;
}

/* --- Le volet : pourquoi cette étape --- */

.univers-melchior .mel-verification__volet {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-area: volet;
	padding: clamp(1.75rem, 3.19vw, 46px) clamp(1.5rem, 2.92vw, 42px);
	overflow: hidden;
	background: var(--mel-accent);
	border-radius: 34px;
	color: var(--mel-fond);
}

/* Une feuille Rosé de la charte déborde du volet par le coin haut droit. */
.univers-melchior .mel-verification__feuille {
	position: absolute;
	top: -30px;
	right: -40px;
	z-index: -1;
	width: clamp(8rem, 11.8vw, 170px);
	transform: rotate(-20deg);
}

/* Le cadenas, dans un rond Rosé. */
.univers-melchior .mel-verification__cadenas {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	background: var(--mel-rose);
	border-radius: 50%;
	color: var(--mel-accent);
}

.univers-melchior .mel-verification__cadenas svg { display: block; }

.univers-melchior .woocommerce .mel-verification__pourquoi {
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-verification__raison {
	max-width: 30rem;
	text-wrap: pretty;
	margin: 0;
	color: var(--mel-fond);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

/* Les points, numérotés et séparés de filets Rosé, comme les lignes d'un
   bordereau. */
.univers-melchior .mel-verification__points {
	margin: 0;
	padding: 0;
	counter-reset: mel-point;
	list-style: none;
}

.univers-melchior .mel-verification__points li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--mel-rose);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
	counter-increment: mel-point;
}

.univers-melchior .mel-verification__points li::before {
	color: var(--mel-rose);
	content: counter(mel-point, decimal-leading-zero);
	font-family: var(--mel-font-titre);
	font-size: 1.25rem;
	line-height: 1.3;
}

/* --- Le guichet : titre et champ --- */

.univers-melchior .mel-verification__guichet {
	display: flex;
	flex-direction: column;
	gap: 22px;
	justify-content: center;
	grid-area: guichet;
	padding: clamp(2rem, 3.47vw, 50px) clamp(1.5rem, 4.44vw, 64px);
}

/* Le surtitre, précédé d'un filet. */
.univers-melchior .mel-verification__surtitre {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	color: var(--mel-second);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

.univers-melchior .mel-verification__surtitre::before {
	width: 40px;
	height: 2px;
	background: currentColor;
	content: "";
}

.univers-melchior .woocommerce .mel-verification__titre {
	margin: 0;
	color: var(--mel-accent);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	overflow-wrap: anywhere;
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-verification__titre-accent {
	display: block;
	color: var(--mel-second);
}

.univers-melchior .mel-verification__texte {
	max-width: 520px;
	text-wrap: pretty;
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-verification__formulaire {
	display: flex;
	flex-direction: column;
	gap: 6px;
	container: mel-verification / inline-size;
}

.univers-melchior .mel-verification__label {
	color: var(--mel-encre);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* La pastille : le champ à gauche, le bouton à droite. Le focus se lit sur
   la pastille entière, pas sur le champ seul. */
.univers-melchior .mel-verification__pastille {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
	padding: 8px 8px 8px 26px;
	background: var(--mel-fond);
	border: 2px solid var(--mel-accent);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.univers-melchior .mel-verification__pastille:focus-within {
	border-color: var(--mel-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mel-accent) 18%, transparent);
}

.univers-melchior .mel-verification__pastille.is-erreur {
	background: color-mix(in srgb, var(--mel-accent) 5%, var(--mel-fond));
	border-color: var(--mel-accent);
}

/* Le sélecteur répète l'élément et le type : Hello Elementor stylise les
   champs e-mail avec la même force. */
.univers-melchior .mel-verification input[type="email"].mel-verification__champ,
.univers-melchior .mel-verification input[type="email"].mel-verification__champ:focus {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: .8rem 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-verification__champ::placeholder {
	color: color-mix(in srgb, var(--mel-encre) 45%, var(--mel-fond));
	opacity: 1;
}

/* En pastille dans la pastille. Les états doublent la classe pour passer
   devant ceux de Hello Elementor sur les `button`. */
.univers-melchior .mel-verification .mel-btn.mel-verification__bouton {
	display: inline-flex;
	flex: none;
	gap: 12px;
	align-items: center;
	min-height: 58px;
	padding: 0 32px;
	border-width: 2px;
	border-radius: 999px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	line-height: 1.1;
	white-space: nowrap;
}

.univers-melchior .mel-verification .mel-btn.mel-verification__bouton:hover,
.univers-melchior .mel-verification .mel-btn.mel-verification__bouton:focus-visible {
	background: var(--mel-accent-fonce);
	border-color: var(--mel-accent-fonce);
	color: var(--mel-fond);
}

.univers-melchior .mel-verification__fleche {
	transition: transform .2s ease;
}

.univers-melchior .mel-verification__bouton:hover .mel-verification__fleche { transform: translateX(.2em); }

.univers-melchior .mel-verification__erreur {
	margin: 0;
	padding-left: 1.4rem;
	color: var(--mel-accent);
	font-size: .85rem;
	line-height: 1.5;
}

.univers-melchior .mel-verification__aide {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-texte);
	line-height: var(--mel-texte-interligne);
}

.univers-melchior .mel-verification__aide a {
	color: var(--mel-accent);
	font-weight: 600;
	text-underline-offset: .2em;
}

.univers-melchior .mel-verification__mention {
	margin: 0;
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-verification__pastille,
	.univers-melchior .mel-verification__fleche { transition: none; }
}

/* Mobile : le champ d'abord, l'explication dessous. */
@media (max-width: 860px) {

	.univers-melchior .mel-verification__cadre {
		grid-template-areas: "guichet" "volet";
		grid-template-columns: minmax(0, 1fr);
		padding: 10px;
		border-radius: 32px;
	}

	.univers-melchior .mel-verification__feuille { width: 7rem; }
}

/* Formulaire étroit (téléphone, mais aussi tablette, où le guichet n'a que
   la moitié de l'écran) : la pastille se sépare, le champ sur sa ligne, le
   bouton en pleine largeur. Côte à côte, le bouton ne laissait au champ
   que quelques caractères. La requête porte sur la largeur du formulaire. */
@container mel-verification (max-width: 30rem) {

	.univers-melchior .mel-verification__pastille {
		flex-direction: column;
		align-items: stretch;
		padding: .35rem;
		border-radius: calc(var(--mel-radius) * 3);
	}

	.univers-melchior .mel-verification input[type="email"].mel-verification__champ,
	.univers-melchior .mel-verification input[type="email"].mel-verification__champ:focus { padding: .8rem 1rem; }

	.univers-melchior .mel-verification .mel-btn.mel-verification__bouton {
		justify-content: center;
		white-space: normal;
	}

	.univers-melchior .mel-verification__erreur { padding-left: 0; }
}

/* ------------------------------------------------------------------ */
/* 7. Panier du header                                                  */
/* ------------------------------------------------------------------ */

/* Une pastille ronde pleine, à côté du bouton « Contactez-nous » au trait
   (modèle Elementor/melchior-entete.json). 48px : au-dessus du minimum
   tactile de 44px. */
.univers-melchior .mel-panier {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 1.5px solid var(--mel-accent);
	border-radius: 50%;
	background: var(--mel-accent);
	color: var(--mel-fond);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.univers-melchior .mel-panier:hover,
.univers-melchior .mel-panier:focus-visible {
	border-color: var(--mel-profond);
	background: var(--mel-profond);
	color: var(--mel-fond);
}

/* L'icône hérite de la couleur du lien (fill="currentColor"). */
.univers-melchior .mel-panier__icone {
	display: block;
	width: 22px;
	height: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-panier { transition: none; }
}

/* Le compteur, dans le second accent : il se détache du bordeaux de la
   pastille. Il déborde du coin de quelques pixels seulement : l'en-tête a
   assez de marge intérieure pour qu'il n'en sorte pas. */
.univers-melchior .mel-panier__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--mel-second);
	color: var(--mel-fond);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	font-family: var(--mel-font-texte);
}

.univers-melchior .mel-panier.is-vide .mel-panier__badge { display: none; }

/* ------------------------------------------------------------------ */
/* 7 bis. Panneau d'ajout au panier                                     */
/* ------------------------------------------------------------------ */

/* Balisage : functions.php, section 14 ; script : assets/js/tiroir.js.
   Le <dialog> couvre l'écran, transparent : le voile et le panneau sont à
   l'intérieur. Le fond de ::backdrop ne lit pas les variables de la charte
   dans tous les navigateurs ; le voile, lui, les lit. Les réglages du
   navigateur pour un dialogue modal (marges, largeur, cadre) sont annulés. */
.univers-melchior .mel-tiroir {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	/* `clip`, pas `hidden` : un bloc en `hidden` reste défilable par le
	   navigateur. À l'ouverture, il faisait défiler le dialogue jusqu'au
	   bouton de fermeture, encore hors de l'écran dans le panneau qui
	   glisse : le panneau apparaissait d'un coup, décalé, le voile laissait
	   le bord droit à nu, puis tout revenait en place, la saccade de
	   l'ouverture (constaté le 27/10/2026). `clip` ne défile jamais. */
	overflow: clip;
	background: transparent;
	border: 0;
	color: var(--mel-texte);
	font-family: var(--mel-font-texte);
}

.univers-melchior .mel-tiroir::backdrop { background: transparent; }

html.mel-tiroir-ouvert { overflow: hidden; }

/* Le voile de la maquette : le Bordeaux assombri, à moitié transparent, sans
   flou. */
.univers-melchior .mel-tiroir__voile {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, color-mix(in srgb, var(--mel-profond) 45%, #000) 50%, transparent);
	cursor: pointer;
	animation: mel-tiroir-voile .35s ease-out;
}

.univers-melchior .mel-tiroir__panneau {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(460px, 100%);
	padding: clamp(1.25rem, 3vw, 30px) clamp(1.25rem, 3vw, 34px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--mel-fond);
	box-shadow: -30px 0 60px color-mix(in srgb, color-mix(in srgb, var(--mel-profond) 45%, #000) 30%, transparent);
	animation: mel-tiroir-panneau .5s cubic-bezier(.22, 1, .36, 1);
}

/* L'entrée : le voile s'installe, le panneau glisse depuis la droite et
   ralentit en arrivant ; son contenu suit, un temps après, ligne à ligne.
   La sortie (classe `is-fermeture`, posée par tiroir.js) est plus brève : le panneau
   repart vers la droite en accélérant, le voile s'efface. */
/* La mention sanitaire tombe en pied de panneau. */
.univers-melchior .mel-tiroir__contenu {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	color: var(--mel-encre);
}

@keyframes mel-tiroir-voile {
	from { opacity: 0; }
}

@keyframes mel-tiroir-panneau {
	from { transform: translateX(100%); }
}

@keyframes mel-tiroir-contenu {
	from {
		opacity: 0;
		transform: translateX(1.5rem);
	}
}

@keyframes mel-tiroir-voile-sortie {
	to { opacity: 0; }
}

@keyframes mel-tiroir-panneau-sortie {
	to { transform: translateX(100%); }
}

.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > * {
	animation: mel-tiroir-contenu .5s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: .22s;
}

.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > :nth-child(2) { animation-delay: .27s; }

.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > :nth-child(3) { animation-delay: .32s; }

.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > :nth-child(4) { animation-delay: .37s; }

.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > :nth-child(n + 5) { animation-delay: .42s; }

.univers-melchior .mel-tiroir.is-fermeture .mel-tiroir__voile { animation: mel-tiroir-voile-sortie .28s ease-in forwards; }

.univers-melchior .mel-tiroir.is-fermeture .mel-tiroir__panneau { animation: mel-tiroir-panneau-sortie .28s cubic-bezier(.64, 0, .78, 0) forwards; }

@media (prefers-reduced-motion: reduce) {

	.univers-melchior .mel-tiroir__voile,
	.univers-melchior .mel-tiroir__panneau,
	.univers-melchior .mel-tiroir.is-ouverture .mel-tiroir__contenu > *,
	.univers-melchior .mel-tiroir.is-fermeture .mel-tiroir__voile,
	.univers-melchior .mel-tiroir.is-fermeture .mel-tiroir__panneau { animation: none; }
}

.univers-melchior .mel-tiroir__fermer {
	position: absolute;
	top: clamp(1.25rem, 3vw, 30px);
	right: clamp(1.25rem, 3vw, 34px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--mel-rose);
	border: 1px solid var(--mel-rose);
	border-radius: 50%;
	color: var(--mel-accent);
	cursor: pointer;
}

.univers-melchior .mel-tiroir__fermer:hover,
.univers-melchior .mel-tiroir__fermer:focus-visible {
	background: var(--mel-accent);
	border-color: var(--mel-accent);
	color: var(--mel-fond);
}

.univers-melchior .mel-tiroir .mel-tiroir__titre {
	margin: 0 60px 10px 0;
	color: var(--mel-accent);
	font-family: var(--mel-h3-police);
	font-size: var(--mel-h3-taille);
	font-weight: var(--mel-h3-graisse);
	line-height: var(--mel-h3-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-tiroir__titre:focus { outline: none; }

/* Tout le panier, une ligne par box : vignette, nom et quantité, montant.
   La box qui vient d'être ajoutée porte un repère. */
.univers-melchior .mel-tiroir__articles {
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-tiroir__produit {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--mel-bordure);
}

.univers-melchior .mel-tiroir__vignette { display: block; }

.univers-melchior .mel-tiroir__image {
	display: block;
	width: 76px;
	max-width: none;
	height: 96px;
	background: var(--mel-rose);
	border-radius: 14px;
	object-fit: cover;
}

.univers-melchior .mel-tiroir__infos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.univers-melchior .mel-tiroir__infos p,
.univers-melchior .mel-tiroir__produit > p { margin: 0; }

.univers-melchior .mel-tiroir__ajoute {
	padding: 6px 14px;
	background: var(--mel-second);
	border-radius: 999px;
	color: var(--mel-fond);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
}

.univers-melchior .mel-tiroir__nom,
.univers-melchior .mel-tiroir__nom a {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	text-decoration: none;
	text-transform: none;
}

.univers-melchior .mel-tiroir__nom a:hover { text-decoration: underline; }

.univers-melchior .mel-tiroir__produit .variation {
	margin: 0;
	color: var(--mel-doux);
	font-size: .8rem;
}

.univers-melchior .mel-tiroir__quantite {
	color: var(--mel-doux);
	font-size: .8rem;
	line-height: 1.45;
}

/* L'incrémenteur au trait Bordeaux, plus compact qu'au panier, et
   « Retirer » à côté. */
.univers-melchior .mel-tiroir__reglage {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 14px;
	align-items: center;
}

.univers-melchior .mel-tiroir .mel-quantite {
	align-items: center;
	gap: 3px;
	padding: 3px;
	background: transparent;
	border: 1.5px solid var(--mel-accent);
	border-radius: 999px;
}

.univers-melchior .mel-tiroir .mel-quantite__btn {
	width: 29px;
	height: 29px;
	border-radius: 50%;
	color: var(--mel-accent);
	font-weight: 600;
}

.univers-melchior .mel-tiroir .mel-quantite__btn:disabled {
	opacity: .35;
	cursor: default;
}

.univers-melchior .mel-tiroir .mel-quantite__btn:disabled:hover { background: transparent; }

.univers-melchior .mel-tiroir .mel-quantite__valeur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	padding: 0;
	color: var(--mel-accent);
	font-size: .9rem;
	font-weight: 600;
}

.univers-melchior .mel-tiroir__retirer {
	padding: 0;
	background: none;
	border: 0;
	color: var(--mel-encre);
	font-family: var(--mel-font-texte);
	font-size: var(--mel-t-petit);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.univers-melchior .mel-tiroir__retirer:hover,
.univers-melchior .mel-tiroir__retirer:focus-visible {
	background: none;
	color: var(--mel-texte);
}

.univers-melchior .mel-tiroir__unitaire {
	color: var(--mel-encre);
	font-size: var(--mel-t-petit);
}

.univers-melchior .mel-tiroir__alerte {
	margin: 0;
	padding-bottom: 1rem;
	padding: .75rem 1rem;
	background: var(--mel-teinte);
	border-left: 3px solid var(--mel-accent);
	border-radius: var(--mel-radius);
	color: var(--mel-texte);
	font-size: .85rem;
}

.univers-melchior .mel-tiroir__vide {
	margin: 0;
	color: var(--mel-doux);
	font-size: .95rem;
	line-height: 1.6;
}

.univers-melchior .mel-tiroir__prix {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-weight: 700;
	font-size: 1.25rem;
	text-align: right;
	white-space: nowrap;
}

/* La colonne du montant reste étroite : la précision s'y replie. */
.univers-melchior .mel-tiroir__prix .mel-prix-mention {
	max-width: 8rem;
	margin-left: auto;
}

.univers-melchior .mel-tiroir__sous-total {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding: 18px 0 10px;
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: 1.375rem;
}

.univers-melchior .mel-tiroir__montant {
	color: var(--mel-accent);
	font-family: var(--mel-font-titre);
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-align: right;
	text-transform: none;
}

.univers-melchior .mel-tiroir__franco {
	margin: 0;
	color: var(--mel-second);
	font-size: var(--mel-t-petit);
}

/* La part du seuil de livraison offerte déjà atteinte (--mel-jauge, posée
   par functions.php). */
.univers-melchior .mel-tiroir__jauge {
	display: block;
	height: 6px;
	margin: 10px 0 0;
	background: var(--mel-rose);
	border-radius: 3px;
}

.univers-melchior .mel-tiroir__jauge > span {
	display: block;
	width: var(--mel-jauge, 0%);
	height: 100%;
	background: var(--mel-second);
	border-radius: 3px;
}

/* Les deux boutons, l'un sous l'autre, sur toute la largeur. */
.univers-melchior .mel-tiroir__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.univers-melchior .mel-tiroir__actions .mel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 32px;
	border-width: 2px;
	border-radius: 999px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	line-height: 1.1;
}

/* D'autres box, en trois vignettes. */
.univers-melchior .mel-tiroir__suggestions { margin-top: 28px; }

.univers-melchior .mel-tiroir .mel-tiroir__sous-titre {
	margin: 0 0 12px;
	color: var(--mel-second);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

.univers-melchior .mel-tiroir__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Très petit écran : deux vignettes par rangée. À trois, les noms en
   capitales débordaient les uns sur les autres. */
@media (max-width: 400px) {
	.univers-melchior .mel-tiroir__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.univers-melchior .mel-tiroir__suggestion { margin: 0; }

.univers-melchior .mel-tiroir__suggestion a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--mel-encre);
	font-size: .875rem;
	text-decoration: none;
}

.univers-melchior .mel-tiroir__suggestion-media { display: block; }

.univers-melchior .mel-tiroir__suggestion-image {
	display: block;
	width: 100%;
	max-width: none;
	height: 110px;
	background: var(--mel-rose);
	border-radius: 14px;
	object-fit: cover;
	transition: opacity .15s ease;
}

.univers-melchior .mel-tiroir__suggestion a:hover .mel-tiroir__suggestion-image { opacity: .85; }

.univers-melchior .mel-tiroir__suggestion-nom {
	color: var(--mel-accent);
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	overflow-wrap: break-word;
}

.univers-melchior .mel-tiroir__suggestion-prix { color: var(--mel-encre); }

.univers-melchior .mel-tiroir__suggestion-prix ins { text-decoration: none; }

.univers-melchior .mel-tiroir__mention {
	margin: auto 0 0;
	padding-top: 2rem;
	color: var(--mel-encre);
	font-size: .8125rem;
}

/* Le bouton d'achat, le temps de la requête. */
.univers-melchior .mel-btn.is-chargement,
.univers-melchior .single_add_to_cart_button.is-chargement {
	opacity: .6;
	cursor: progress;
}

/* ------------------------------------------------------------------ */
/* 8. Écran de majorité                                                 */
/* ------------------------------------------------------------------ */

/* L'écran ne s'affiche que sous `html.mel-age-requis`, posé par le script
   d'en-tête tant que la majorité n'a pas été confirmée. Sans JavaScript, il
   reste masqué : il ne pourrait pas se refermer. */
.univers-melchior .mel-age { display: none; }

html.mel-age-requis { overflow: hidden; }

/* Le <dialog> couvre tout l'écran, avant comme après showModal() : aucun
   saut au moment où le script prend la main. Les réglages du navigateur
   pour un dialogue modal — marges, largeur maximale, cadre — sont annulés. */
.mel-age-requis .univers-melchior .mel-age {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(3rem, 6.39vw, 92px) var(--mel-gap) clamp(2.5rem, 4.03vw, 58px);
	overflow-y: auto;
	background: var(--mel-second);
	border: 0;
	color: var(--mel-fond);
	font-family: var(--mel-font-texte);
}

.univers-melchior .mel-age::backdrop { background: transparent; }

/* Filet intérieur : l'écran se lit comme une étiquette, pas comme une
   alerte. Quatre feuilles de la charte autour du texte. */
.univers-melchior .mel-age::before {
	content: "";
	position: fixed;
	inset: clamp(.6rem, 1.67vw, 24px);
	border: 1.5px solid var(--mel-rose);
	border-radius: clamp(24px, 2.78vw, 40px);
	pointer-events: none;
}

.univers-melchior .mel-age__feuille--a {
	top: 120px;
	left: 8.3%;
	--mel-feuille-l: 130px;
	--mel-feuille-a: -24deg;
}

.univers-melchior .mel-age__feuille--b {
	top: 170px;
	right: 12.5%;
	--mel-feuille-l: 80px;
	--mel-feuille-a: 22deg;
}

.univers-melchior .mel-age__feuille--c {
	bottom: 150px;
	left: 18%;
	--mel-feuille-l: 66px;
	--mel-feuille-a: 16deg;
}

.univers-melchior .mel-age__feuille--d {
	right: 9.7%;
	bottom: 120px;
	--mel-feuille-l: 96px;
	--mel-feuille-a: 30deg;
}

@media (max-width: 767px) {
	.univers-melchior .mel-age__feuille--b,
	.univers-melchior .mel-age__feuille--c { display: none; }

	.univers-melchior .mel-age__feuille--a { top: 2.5rem; left: 1.5rem; }

	.univers-melchior .mel-age__feuille--d { right: 1.5rem; bottom: 5rem; }
}

.univers-melchior .mel-age__logo {
	display: block;
	width: clamp(8rem, 13.2vw, 190px);
	height: auto;
}

/* Marges automatiques : le panneau se centre, la mention descend en pied. */
.univers-melchior .mel-age__panneau {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	width: min(100%, 900px);
	margin: 0 0 auto;
	text-align: center;
	animation: mel-age-entree .6s ease both;
}

@keyframes mel-age-entree {
	from { opacity: 0; transform: translateY(12px); }
}

.univers-melchior .mel-age__surtitre {
	margin: 14px 0 0;
	color: var(--mel-rose);
	font-family: var(--mel-label-police);
	font-size: var(--mel-label-taille);
	font-weight: var(--mel-label-graisse);
	line-height: var(--mel-label-interligne);
}

.univers-melchior .mel-age__titre {
	margin: 0;
	color: var(--mel-fond);
	font-family: var(--mel-h1-police);
	font-size: var(--mel-h1-taille);
	font-weight: var(--mel-h1-graisse);
	line-height: var(--mel-h1-interligne);
	letter-spacing: 0;
	text-transform: none;
}

.univers-melchior .mel-age__texte {
	max-width: 560px;
	margin: 0;
	color: var(--mel-fond);
	font-size: clamp(1.05rem, 1.46vw, 1.3125rem);
	line-height: 1.55;
}

.univers-melchior .mel-age__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	width: 100%;
	margin-top: 8px;
}

.univers-melchior .mel-age__choix .mel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 32px;
	border-width: 2px;
	font-family: var(--mel-btn-police);
	font-size: var(--mel-btn-taille);
	font-weight: var(--mel-btn-graisse);
	line-height: 1.1;
}

/* Sur fond d'accent, les deux boutons s'inversent : plein clair pour
   confirmer, simple filet pour refuser. */
.univers-melchior .mel-age .mel-btn--clair {
	background: var(--mel-fond);
	border-color: var(--mel-fond);
	color: var(--mel-second);
}

.univers-melchior .mel-age .mel-btn--clair:hover {
	background: var(--mel-rose);
	border-color: var(--mel-rose);
	color: var(--mel-second);
}

.univers-melchior .mel-age .mel-btn--ligne {
	background: transparent;
	border-color: var(--mel-fond);
	color: var(--mel-fond);
}

/* Survol et focus sont tous deux redéfinis : sans quoi le filet générique de
   la section 3 reprendrait la main, en rouge sur rouge. */
.univers-melchior .mel-age .mel-btn--ligne:hover,
.univers-melchior .mel-age .mel-btn--ligne:focus {
	background: color-mix(in srgb, var(--mel-fond) 10%, transparent);
	border-color: var(--mel-fond);
	color: var(--mel-fond);
}

.univers-melchior .mel-age .mel-btn:focus-visible {
	outline: 2px solid var(--mel-fond);
	outline-offset: 3px;
}

/* Refus : le message prend la place des boutons. */
.univers-melchior .mel-age__refus {
	display: none;
	margin: .4rem 0 0;
	color: var(--mel-fond);
	font-family: var(--mel-font-titre);
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
}

/* Titre et refus reçoivent le focus par script, jamais par Tab : aucun
   contour à montrer. */
.univers-melchior .mel-age__titre:focus,
.univers-melchior .mel-age__refus:focus { outline: none; }

.univers-melchior .mel-age.is-refus .mel-age__choix { display: none; }

.univers-melchior .mel-age.is-refus .mel-age__refus { display: block; }

.univers-melchior .mel-age__mention {
	position: relative;
	z-index: 2;
	width: min(100%, 900px);
	margin: var(--mel-gap) 0 0;
	color: var(--mel-rose);
	font-size: var(--mel-t-petit);
	line-height: 1.5;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-age__panneau { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 9. Chargements                                                       */
/* ------------------------------------------------------------------ */

/* Des squelettes à la place de ce qui arrive : images des produits, grille
   pendant un filtre ou un tri, panneau latéral pendant un ajout, montants
   pendant une mise à jour du panier ou de la validation. Scripts :
   functions.php, section 15 (images, grille) ; assets/js/tiroir.js
   (panneau).

   Un squelette est une surface qui respire entre deux teintes, `--mel-os` et
   `--mel-os-clair`. Sur les surfaces sombres (carte mise en avant, panneaux
   foncés de la galerie, totaux du panier, récapitulatif de la validation),
   les deux teintes deviennent des voiles clairs. */
.univers-melchior {
	--mel-os: var(--mel-sable);
	--mel-os-clair: var(--mel-teinte);
	--mel-os-duree: 1.6s;
}

.univers-melchior .mel-carte.is-chouchou,
.univers-melchior .mel-galerie__panneau:nth-child(3n+1) .mel-galerie__media,
.univers-melchior .mel-galerie__panneau:nth-child(3n) .mel-galerie__media,
.univers-melchior.woocommerce-cart .cart_totals,
.univers-melchior .mel-carton {
	--mel-os: color-mix(in srgb, var(--mel-fond) 16%, transparent);
	--mel-os-clair: color-mix(in srgb, var(--mel-fond) 6%, transparent);
}

@keyframes mel-squelette {
	0%,
	100% { background-color: var(--mel-os); }
	50% { background-color: var(--mel-os-clair); }
}

/* --- Les images --- */

/* Tant qu'une image n'est pas arrivée, son cadre respire. `is-chargee` est
   posé au chargement (ou à l'erreur) par le script de tête ; sans
   JavaScript, `mel-js` manque et rien ne reste en attente. */
html.mel-js .univers-melchior .mel-carte__image:not(.is-chargee),
html.mel-js .univers-melchior .mel-galerie__image:not(.is-chargee),
html.mel-js .univers-melchior .mel-tiroir__image:not(.is-chargee),
html.mel-js .univers-melchior .mel-tiroir__suggestion-image:not(.is-chargee),
html.mel-js .univers-melchior .mel-carton__image:not(.is-chargee),
html.mel-js .univers-melchior .mel-merci__image:not(.is-chargee) {
	background-color: var(--mel-os);
	animation: mel-squelette var(--mel-os-duree) ease-in-out infinite;
}

/* --- Les pièces du squelette --- */

/* Posées par tiroir.js dans le panneau, le temps de l'ajout. */
.univers-melchior .mel-squelette {
	display: block;
	width: 100%;
	height: .9rem;
	background-color: var(--mel-os);
	border-radius: 4px;
	animation: mel-squelette var(--mel-os-duree) ease-in-out infinite;
}

.univers-melchior .mel-squelette--vignette {
	width: 4.5rem;
	height: 5.5rem;
	border-radius: var(--mel-radius);
}

.univers-melchior .mel-squelette--court { width: 45%; }

.univers-melchior .mel-squelette--moyen { width: 6rem; }

.univers-melchior .mel-squelette--prix {
	width: 4.5rem;
	height: 1.25rem;
}

.univers-melchior .mel-squelette--quantite {
	width: 6.5rem;
	height: 2rem;
	border-radius: 100px;
}

.univers-melchior .mel-squelette--bouton {
	height: 3.1rem;
	border-radius: 100px;
}

/* Une surface de texte qui devient squelette : le texte s'efface, la boîte
   reste, à sa taille exacte. `!important` : certains montants (la TVA du
   total, notamment) ont leur couleur sous un sélecteur plus précis. */
.univers-melchior .mel-boutique.is-chargement .mel-carte__etat,
.univers-melchior .mel-boutique.is-chargement .mel-carte__index::before,
.univers-melchior .mel-boutique.is-chargement .mel-carte__titre a,
.univers-melchior .mel-boutique.is-chargement .mel-carte__prix,
.univers-melchior .mel-boutique.is-chargement .mel-carte__achat .mel-btn,
.univers-melchior .mel-page-panier.processing .mel-carte__prix,
.univers-melchior .mel-page-panier.processing .mel-carte__detail,
.univers-melchior .woocommerce .cart_totals.processing td .woocommerce-Price-amount,
.univers-melchior .woocommerce-checkout-review-order-table:has(> .blockUI) .woocommerce-Price-amount,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__prix,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__montant,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__unitaire {
	background-color: var(--mel-os);
	border-color: transparent;
	border-radius: 4px;
	color: transparent !important;
	animation: mel-squelette var(--mel-os-duree) ease-in-out infinite;
}

.univers-melchior .mel-boutique.is-chargement .mel-carte__prix *,
.univers-melchior .mel-boutique.is-chargement .mel-carte__achat .mel-btn::after,
.univers-melchior .mel-page-panier.processing .mel-carte__prix *,
.univers-melchior .mel-page-panier.processing .mel-carte__detail *,
.univers-melchior .woocommerce .cart_totals.processing td .woocommerce-Price-amount *,
.univers-melchior .woocommerce-checkout-review-order-table:has(> .blockUI) .woocommerce-Price-amount *,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__prix *,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__montant *,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__unitaire * {
	color: transparent;
	visibility: hidden;
}

/* Les montants ne couvrent que leur texte, pas toute la ligne. */
.univers-melchior .mel-boutique.is-chargement .mel-carte__prix,
.univers-melchior .mel-page-panier.processing .mel-carte__prix,
.univers-melchior .mel-page-panier.processing .mel-carte__detail,
.univers-melchior .mel-tiroir__panneau.is-chargement .mel-tiroir__unitaire { width: fit-content; }

/* Le titre, ligne par ligne : chaque morceau du lien garde son propre fond. */
.univers-melchior .mel-boutique.is-chargement .mel-carte__titre a {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* --- La grille, pendant un filtre ou un tri --- */

/* Le clic charge la page suivante : les cartes affichées deviennent le
   squelette de celles qui arrivent. L'image s'efface devant son cadre, la
   description devient deux lignes (un masque les découpe dans le fond). */
.univers-melchior .mel-boutique.is-chargement { cursor: progress; }

.univers-melchior .mel-boutique.is-chargement .mel-grille { pointer-events: none; }

.univers-melchior .mel-boutique.is-chargement .mel-carte__etat--dispo,
.univers-melchior .mel-boutique.is-chargement .mel-carte__etat--rupture,
.univers-melchior .mel-boutique.is-chargement .mel-carte__etat--stock-bas { padding: .4em .8em; }

.univers-melchior .mel-boutique.is-chargement .mel-carte__etat { border-radius: 100px; }

.univers-melchior .mel-boutique.is-chargement .mel-carte__media {
	background-color: var(--mel-os);
	animation: mel-squelette var(--mel-os-duree) ease-in-out infinite;
}

.univers-melchior .mel-boutique.is-chargement .mel-carte__image { visibility: hidden; }

.univers-melchior .mel-boutique.is-chargement .mel-carte__texte {
	background-color: var(--mel-os);
	color: transparent;
	animation: mel-squelette var(--mel-os-duree) ease-in-out infinite;
	-webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black);
	mask-image: linear-gradient(black, black), linear-gradient(black, black);
	-webkit-mask-position: 0 .2em, 0 1.65em;
	mask-position: 0 .2em, 0 1.65em;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 1.05em, 65% 1.05em;
	mask-size: 100% 1.05em, 65% 1.05em;
}

/* --- Le panneau latéral --- */

/* Pendant l'ajout : le panneau s'ouvre tout de suite sur un squelette, que
   remplace le contenu à la réponse (tiroir.js). La vignette et les lignes
   reprennent la grille d'un article. */
.univers-melchior .mel-tiroir__contenu.is-squelette .mel-tiroir__infos { gap: .6rem; }

.univers-melchior .mel-tiroir__contenu.is-squelette .mel-tiroir__sous-total { align-items: center; }

/* Le contenu arrivé remplace le squelette, une fois son entrée finie
   (tiroir.js), en un fondu bref qui part d'un contenu déjà à demi visible :
   parti de zéro, le panneau se vidait un instant entre le squelette et le
   contenu. Le titre, identique des deux côtés, ne bouge pas. */
@keyframes mel-tiroir-revele {
	from { opacity: .4; }
}

.univers-melchior .mel-tiroir.is-revele .mel-tiroir__contenu > :not(.mel-tiroir__titre) {
	animation: mel-tiroir-revele .25s ease-out both;
}

/* --- Panier et validation, pendant une mise à jour --- */

/* WooCommerce pose un voile blanc et une roue sur les totaux du panier, le
   récapitulatif et le paiement de la validation. Le voile reste (il bloque
   les clics) mais devient transparent : ce sont les montants qui montrent
   l'attente. `!important` : le voile porte ses styles en ligne. */
.univers-melchior .woocommerce .cart_totals > .blockUI.blockOverlay,
.univers-melchior .woocommerce-checkout-review-order-table > .blockUI.blockOverlay,
.univers-melchior .woocommerce-checkout-payment > .blockUI.blockOverlay {
	background: transparent !important;
	cursor: progress !important;
}

.univers-melchior .woocommerce .cart_totals > .blockUI.blockOverlay::before,
.univers-melchior .woocommerce-checkout-review-order-table > .blockUI.blockOverlay::before,
.univers-melchior .woocommerce-checkout-payment > .blockUI.blockOverlay::before { content: none; }

/* Le paiement n'a pas de montant : il s'estompe, le temps de la mise à jour. */
.univers-melchior .woocommerce-checkout-payment:has(> .blockUI) > :not(.blockUI) {
	opacity: .5;
	transition: opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {

	.univers-melchior .mel-squelette,
	html.mel-js .univers-melchior img:not(.is-chargee),
	.univers-melchior .mel-boutique.is-chargement *,
	.univers-melchior .mel-boutique.is-chargement *::before,
	.univers-melchior .mel-page-panier.processing *,
	.univers-melchior .woocommerce .cart_totals.processing *,
	.univers-melchior .woocommerce-checkout-review-order-table:has(> .blockUI) *,
	.univers-melchior .mel-tiroir__panneau.is-chargement *,
	.univers-melchior .mel-tiroir.is-revele .mel-tiroir__contenu > * { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 10. En-tête fixe et menu du téléphone                                */
/* ------------------------------------------------------------------ */

/* L'en-tête de la boutique (classe `mel-entete`, posée dans
   Elementor/melchior-entete.json) reste en haut de l'écran. Fixe plutôt
   que collant : en se resserrant, un en-tête resté dans le flux ferait
   sauter la page de 38 px, et pourrait clignoter autour du seuil. La barre
   d'administration de WordPress, quand elle est là, passe au-dessus. */
.univers-melchior .mel-entete {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 90;
	transition: padding-top .25s ease, padding-bottom .25s ease, box-shadow .25s ease;
}

/* La page lui réserve sa place. Sur l'accueil, le hero Rosé passe dessous :
   sa marge haute la comprend déjà (Elementor/melchior-accueil.json). */
body.univers-melchior:not(:has(.mel-hero-logo)) { padding-top: var(--mel-entete-place); }

/* Au défilement (classe posée par assets/js/menu.js) : resserré à 76 px et
   détaché des sections de couleur par une ombre. `!important` : les marges
   intérieures viennent de la feuille générée par Elementor pour ce
   conteneur, plus précise que ce sélecteur. */
.univers-melchior .mel-entete.is-defile {
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--mel-profond) 12%, transparent),
		0 14px 30px -20px color-mix(in srgb, var(--mel-profond) 55%, transparent);
}

@media (min-width: 768px) {
	.univers-melchior .mel-entete.is-defile {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}
}

/* Le logo de l'en-tête : un widget Image d'Elementor (classe `mel-hf-logo`,
   Elementor/melchior-entete.json), dont l'image se choisit dans Elementor. Sa
   hauteur est fixée ici, pas dans le widget : elle compte dans celle de
   l'en-tête, que `--mel-entete-place` doit suivre. La largeur suit les
   proportions de l'image. Sans `max-width` en pourcentage : il permettrait au
   navigateur d'écraser le logo à zéro quand l'en-tête manque de place.
   `.elementor-widget-image` passe devant les réglages Largeur et Hauteur de
   l'onglet Style du widget (`.elementor-N .elementor-element.elementor-element-ID
   img`, même spécificité sans elle) : la feuille d'Elementor se charge après
   celle-ci, et une largeur en % y écrasait le logo sur sa hauteur fixe. */
.univers-melchior .mel-entete .mel-hf-logo a {
	display: block;
	line-height: 0;
}

.univers-melchior .mel-entete .mel-hf-logo.elementor-widget-image img {
	display: block;
	width: auto;
	max-width: none;
	height: 52px;
}

@media (max-width: 767px) {
	.univers-melchior .mel-entete .mel-hf-logo.elementor-widget-image img { height: 38px; }
}

/* Le petit logo n'apparaît qu'une fois le grand logo du hero sorti de
   l'écran. Sans script, il reste caché sur l'accueil : le grand logo est là. */
.univers-melchior .mel-entete .mel-hf-logo { transition: opacity .2s ease, visibility .2s; }

body.univers-melchior:has(.mel-hero-logo) .mel-entete:not(.is-logo) .mel-hf-logo {
	opacity: 0;
	visibility: hidden;
}

/* --- Les liens de l'en-tête, rendus par [mel_menu] --- */

.univers-melchior .mel-entete-menu {
	display: flex;
	align-items: center;
}

.univers-melchior .mel-nav__liste {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-nav__lien {
	position: relative;
	color: var(--mel-accent);
	font-family: var(--mel-menu-police);
	font-size: var(--mel-menu-taille);
	font-weight: var(--mel-menu-graisse);
	font-style: var(--mel-menu-style);
	text-decoration: var(--mel-menu-decoration);
	line-height: var(--mel-menu-interligne);
}

/* La section en cours, soulignée. */
.univers-melchior .mel-nav__lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.univers-melchior .mel-nav__lien:hover::after,
.univers-melchior .mel-nav__lien[aria-current="true"]::after { transform: scaleX(1); }

.univers-melchior .mel-nav__lien:focus-visible {
	outline: 2px solid var(--mel-accent);
	outline-offset: 6px;
	border-radius: 4px;
}

/* Les deux traits du burger, et la croix de « Fermer ». */
.univers-melchior .mel-traits {
	position: relative;
	display: block;
	flex: none;
	width: 18px;
	height: 12px;
}

.univers-melchior .mel-traits span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.univers-melchior .mel-traits span:first-child { top: 2px; }
.univers-melchior .mel-traits span:last-child { bottom: 2px; }

/* La pastille « Menu », sur téléphone seulement. Le mot accompagne les
   traits : seuls, ils ne sont pas compris de tous. */
.univers-melchior .mel-burger { display: none; }

@media (max-width: 767px) {
	.univers-melchior .mel-nav { display: none; }

	.univers-melchior .mel-burger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 0 18px 0 16px;
		border-radius: 100px;
		background: var(--mel-second);
		color: var(--mel-fond);
		font-family: var(--mel-font-titre);
		font-size: 1.05rem;
		line-height: 1;
		text-decoration: none;
	}

	.univers-melchior .mel-burger:focus-visible {
		outline: 2px solid var(--mel-second);
		outline-offset: 3px;
	}
}

/* --- Le menu plein écran --- */

/* Un rideau Sapin descend du haut de l'écran : 380 ms, départ rapide et
   arrivée douce. Il dépasse de 64 px sous l'écran, pour que son bord bas
   arrondi reste visible pendant la descente puis sorte de l'écran à
   l'arrivée. Les liens montent ensuite l'un après l'autre, à 45 ms d'écart,
   puis les boutons. La fermeture prend 220 ms, tout part ensemble : cette
   durée est reprise par assets/js/menu.js. */
.univers-melchior .mel-menu {
	--mel-menu-courbe-entree: cubic-bezier(.05, .7, .1, 1);
	--mel-menu-courbe-sortie: cubic-bezier(.3, 0, .8, .15);

	position: fixed;
	inset: 0 0 auto 0;
	width: 100%;
	max-width: none;
	height: calc(100vh + 64px);
	height: calc(100dvh + 64px);
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--mel-second);
	color: var(--mel-fond);
	overflow: hidden;
}

.univers-melchior .mel-menu::backdrop { background: transparent; }

.univers-melchior .mel-menu[open] { animation: mel-rideau 380ms var(--mel-menu-courbe-entree) both; }

.univers-melchior .mel-menu.is-fermeture { animation: mel-rideau-retour 220ms var(--mel-menu-courbe-sortie) both; }

@keyframes mel-rideau {
	from { clip-path: inset(0 0 100% 0 round 0 0 48px 48px); }
	to { clip-path: inset(0 0 0 0 round 0 0 48px 48px); }
}

@keyframes mel-rideau-retour {
	from { clip-path: inset(0 0 0 0 round 0 0 48px 48px); }
	to { clip-path: inset(0 0 100% 0 round 0 0 48px 48px); }
}

@keyframes mel-monte {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes mel-efface {
	to { opacity: 0; }
}

/* Les traits partent à plat et se croisent. */
@keyframes mel-croix {
	from { transform: none; }
}

@keyframes mel-fondu {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Défilement de la page bloqué tant que le menu est ouvert. La gouttière
   de la barre de défilement reste réservée : la page ne bouge pas. */
html:has(> body.univers-melchior) { scrollbar-gutter: stable; }

html.mel-menu-ouvert { overflow: hidden; }

.univers-melchior .mel-menu__corps {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	padding: var(--wp-admin--admin-bar--height, 0px) 16px calc(26px + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* La barre du haut reprend la géométrie de l'en-tête : « Fermer » arrive à
   la place exacte de « Menu », le panier à la sienne. */
.univers-melchior .mel-menu__barre {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	justify-content: space-between;
	align-items: center;
	min-height: var(--mel-entete-place);
}

.univers-melchior .mel-menu__fermer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px 0 16px;
	border: 0;
	border-radius: 100px;
	background: var(--mel-fond);
	color: var(--mel-second);
	font-family: var(--mel-font-titre);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.univers-melchior .mel-menu__fermer .mel-traits span:first-child { transform: translateY(3px) rotate(45deg); }
.univers-melchior .mel-menu__fermer .mel-traits span:last-child { transform: translateY(-3px) rotate(-45deg); }

.univers-melchior .mel-menu[open] .mel-menu__fermer .mel-traits span { animation: mel-croix 240ms var(--mel-menu-courbe-entree) both; }

.univers-melchior .mel-menu .mel-panier {
	border-color: var(--mel-rose);
	background: var(--mel-rose);
	color: var(--mel-accent);
}

.univers-melchior .mel-menu .mel-panier__badge { background: var(--mel-accent); }

.univers-melchior .mel-menu__nav {
	position: relative;
	z-index: 1;
	margin-top: 56px;
	padding: 0 10px;
}

.univers-melchior .mel-menu__nav ol {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.univers-melchior .mel-menu[open] .mel-menu__nav li {
	animation: mel-monte 280ms var(--mel-menu-courbe-entree) both;
	animation-delay: calc(110ms + var(--i, 0) * 45ms);
}

.univers-melchior .mel-menu__nav a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	color: var(--mel-fond);
	font-family: var(--mel-font-titre);
	font-size: clamp(2rem, 9vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	text-decoration: none;
}

/* La section en cours, et le survol, en Rosé. */
.univers-melchior .mel-menu__nav a:hover,
.univers-melchior .mel-menu__nav a[aria-current="true"] { color: var(--mel-rose); }

.univers-melchior .mel-menu__n {
	flex: none;
	width: 28px;
	color: var(--mel-rose);
	font-size: 1rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.univers-melchior .mel-menu__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding: 32px 8px 0;
}

.univers-melchior .mel-menu[open] .mel-menu__actions { animation: mel-monte 280ms var(--mel-menu-courbe-entree) 300ms both; }

.univers-melchior .mel-menu__bouton {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 56px;
	border-radius: 100px;
	font-family: var(--mel-font-titre);
	font-size: 1.2rem;
	text-decoration: none;
}

.univers-melchior .mel-menu__panier {
	background: var(--mel-fond);
	color: var(--mel-accent);
}

.univers-melchior .mel-menu__contact {
	border: 2px solid var(--mel-rose);
	color: var(--mel-fond);
}

.univers-melchior .mel-menu__mention {
	margin: 4px 0 0;
	color: var(--mel-rose);
	font-size: .82rem;
	line-height: 1.45;
}

.univers-melchior .mel-menu a:focus-visible,
.univers-melchior .mel-menu__fermer:focus-visible {
	outline: 2px solid var(--mel-rose);
	outline-offset: 4px;
}

/* Les feuilles de la charte, en décor derrière les liens. */
.univers-melchior .mel-menu__feuille {
	position: absolute;
	z-index: 0;
	line-height: 0;
	pointer-events: none;
}

.univers-melchior .mel-menu__feuille svg {
	display: block;
	width: 100%;
	height: auto;
}

.univers-melchior .mel-menu__feuille.is-blanc {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px);
	right: 34px;
	width: 54px;
	color: var(--mel-fond);
	transform: rotate(30deg);
}

.univers-melchior .mel-menu__feuille.is-rose {
	top: 54%;
	right: -24px;
	width: 100px;
	color: var(--mel-rose);
	transform: rotate(-24deg);
}

.univers-melchior .mel-menu__feuille.is-rouge {
	top: 66%;
	left: 38%;
	width: 40px;
	color: var(--mel-accent);
	transform: rotate(18deg);
}

/* La fermeture : liens et boutons s'effacent ensemble, pendant que le
   rideau remonte. */
.univers-melchior .mel-menu.is-fermeture .mel-menu__nav li,
.univers-melchior .mel-menu.is-fermeture .mel-menu__actions { animation: mel-efface 120ms ease both; }

/* Le menu du téléphone n'existe pas sur tablette ni sur ordinateur. */
@media (min-width: 768px) {
	.univers-melchior .mel-menu { display: none; }
}

/* Mouvement réduit : un fondu de 150 ms, sans rideau ni déplacement. */
@media (prefers-reduced-motion: reduce) {
	.univers-melchior .mel-entete,
	.univers-melchior .mel-entete .mel-hf-logo,
	.univers-melchior .mel-nav__lien::after { transition: none; }

	.univers-melchior .mel-menu[open] { animation: mel-fondu 150ms ease both; }

	.univers-melchior .mel-menu.is-fermeture { animation: mel-efface 150ms ease both; }

	.univers-melchior .mel-menu[open] .mel-menu__nav li,
	.univers-melchior .mel-menu[open] .mel-menu__actions,
	.univers-melchior .mel-menu[open] .mel-menu__fermer .mel-traits span,
	.univers-melchior .mel-menu.is-fermeture .mel-menu__nav li,
	.univers-melchior .mel-menu.is-fermeture .mel-menu__actions { animation: none; }
}