/**
 * « Mes Étincelles » — l'onglet de la cliente, à la charte de la maison.
 *
 * ══════════════════════════════════════════════════════════════════════════
 * CE QUI EST NON NÉGOCIABLE ICI, ET POURQUOI
 *
 * Ces règles ne sont pas des préférences : elles ont chacune été payées par
 * une panne visible sur le site, et elles sont consignées dans les conventions
 * CSS de Merydar.
 *
 *   · TROIS POLICES, AUCUNE AUTRE. Jellyka Delicious Cake pour les titres,
 *     Cormorant Garamond pour le corps, Cinzel Decorative pour les petites
 *     capitales et les boutons.
 *
 *   · TOUJOURS « !important ». Sans cela le thème repeint par-dessus. C'est
 *     ce qui a fait virer au rose un lien « Revenir aux créations », puis une
 *     croix de fermeture le même soir.
 *
 *   · AUCUN LIEN ROSE NULLE PART. Toute couleur de lien couvre les cinq
 *     états — :link :visited :hover :focus :active — et cela vaut aussi pour
 *     les boutons. Un état non déclaré est un état laissé au thème.
 *
 *   · CLAMP() SUR TOUTES LES TAILLES ET TOUS LES INTERLIGNES, dès la première
 *     version. Jamais un px fixe pour du texte.
 *
 *   · TOUT ENFERMÉ DANS « .mrd-fest-espace ». Rien ne doit pouvoir déborder
 *     sur le reste du site.
 *
 * La palette, elle non plus, ne s'invente pas :
 *   crème #FBF7EC · carte #FFFDF7 · vert #2A4A3D · doré #C9AB6F
 *   doré foncé #8C6F3A · pêche #FBD6BA · beige d'encart #ECE0D1
 * ══════════════════════════════════════════════════════════════════════════
 */

.mrd-fest-espace {
	--mrd-creme: #FBF7EC;
	--mrd-carte: #FFFDF7;
	--mrd-vert: #2A4A3D;
	--mrd-dore: #C9AB6F;
	--mrd-dore-fonce: #8C6F3A;
	--mrd-peche: #FBD6BA;
	--mrd-beige: #ECE0D1;
	--mrd-filet: #E4DED2;

	font-family: 'Cormorant Garamond', Garamond, Georgia, serif !important;
	font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem) !important;
	line-height: clamp(1.5, 1.45 + 0.2vw, 1.75) !important;
	color: var(--mrd-vert) !important;
	box-sizing: border-box !important;
}

.mrd-fest-espace * {
	box-sizing: border-box !important;
}

/* ── Le mot d'accueil ───────────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-chapo {
	font-style: italic !important;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem) !important;
	line-height: clamp(1.45, 1.4 + 0.2vw, 1.65) !important;
	color: var(--mrd-dore-fonce) !important;
	text-align: center !important;
	max-width: 34em !important;
	margin: 0 auto clamp(1.4rem, 4vw, 2.4rem) !important;
}

/* ── La carte du compteur ───────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-carte {
	background: var(--mrd-carte) !important;
	border: 1px solid var(--mrd-filet) !important;
	border-radius: clamp(10px, 2vw, 18px) !important;
	box-shadow: none !important;
	padding: clamp(1.2rem, 4vw, 2.2rem) !important;
	margin: 0 0 clamp(1.4rem, 4vw, 2.4rem) !important;
}

.mrd-fest-espace .mrd-fest-solde {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem) !important;
	line-height: clamp(1.4, 1.35 + 0.2vw, 1.6) !important;
	color: var(--mrd-vert) !important;
	margin: 0 0 clamp(0.9rem, 3vw, 1.4rem) !important;
}

/*
 * LE NOMBRE EST LA SEULE CHOSE QU'ELLE VIENT LIRE.
 *
 * Il est donc en doré et en Cinzel — comme les chiffres du reste du site —
 * pour qu'il se détache d'un coup d'œil sans qu'on ait à grossir la phrase
 * entière.
 */
.mrd-fest-espace .mrd-fest-nombre {
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-weight: 700 !important;
	color: var(--mrd-dore-fonce) !important;
}

.mrd-fest-espace .mrd-fest-jauge {
	height: clamp(10px, 2.2vw, 14px) !important;
	background: var(--mrd-beige) !important;
	border: 0 !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	margin: 0 0 clamp(0.5rem, 1.6vw, 0.8rem) !important;
}

.mrd-fest-espace .mrd-fest-jauge-part {
	display: block !important;
	height: 100% !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, var(--mrd-vert) 0%, var(--mrd-dore) 100%) !important;
	transition: none !important;
}

.mrd-fest-espace .mrd-fest-compte {
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem) !important;
	letter-spacing: 0.06em !important;
	color: var(--mrd-vert) !important;
	margin: 0 !important;
}

/* ── Le corps du texte ──────────────────────────────────────────────────── */

.mrd-fest-espace p {
	margin: 0 0 clamp(1rem, 3vw, 1.6rem) !important;
}

.mrd-fest-espace .mrd-fest-explication {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem) !important;
	max-width: 40em !important;
}

.mrd-fest-espace .mrd-fest-petit {
	font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.05rem) !important;
	line-height: clamp(1.45, 1.4 + 0.2vw, 1.6) !important;
	color: var(--mrd-dore-fonce) !important;
}

/* ── Les titres ─────────────────────────────────────────────────────────── */

/*
 * Jellyka Delicious Cake est une anglaise : elle a besoin d'air au-dessus et
 * au-dessous, et elle se lit mal en dessous de sa taille de croisière. D'où
 * une borne basse de clamp() plus haute que pour un titre ordinaire.
 */
.mrd-fest-espace .mrd-fest-titre {
	font-family: 'Jellyka Delicious Cake', 'Monotype Corsiva', cursive !important;
	font-weight: 400 !important;
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem) !important;
	line-height: 1.2 !important;
	color: var(--mrd-vert) !important;
	text-align: center !important;
	margin: clamp(2rem, 6vw, 3.2rem) 0 clamp(1rem, 3vw, 1.6rem) !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ── Le séparateur doré de la maison ────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-sep {
	display: block !important;
	width: min(280px, 60%) !important;
	height: clamp(24px, 6vw, 40px) !important;
	margin: clamp(1.8rem, 5vw, 3rem) auto !important;
	border: 0 !important;
	background-image: url('https://merydar.com/wp-content/uploads/2026/08/Separateur-dore-sans-fond-vert.png') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
}

/* ── Le tableau ─────────────────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-tableau {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--mrd-carte) !important;
	border: 1px solid var(--mrd-filet) !important;
	border-radius: clamp(10px, 2vw, 18px) !important;
	overflow: hidden !important;
	margin: 0 0 clamp(1.4rem, 4vw, 2.4rem) !important;
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem) !important;
}

.mrd-fest-espace .mrd-fest-tableau thead th {
	background: var(--mrd-vert) !important;
	color: var(--mrd-peche) !important;
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem) !important;
	letter-spacing: 0.08em !important;
	text-align: left !important;
	padding: clamp(0.7rem, 2.2vw, 1rem) clamp(0.6rem, 2vw, 1rem) !important;
	border: 0 !important;
}

.mrd-fest-espace .mrd-fest-tableau tbody td {
	background: transparent !important;
	color: var(--mrd-vert) !important;
	padding: clamp(0.7rem, 2.2vw, 1rem) clamp(0.6rem, 2vw, 1rem) !important;
	border: 0 !important;
	border-top: 1px solid var(--mrd-filet) !important;
	vertical-align: top !important;
}

.mrd-fest-espace .mrd-fest-tableau tbody tr:first-child td {
	border-top: 0 !important;
}

.mrd-fest-espace .mrd-fest-tableau .mrd-fest-chiffre {
	text-align: right !important;
	white-space: nowrap !important;
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem) !important;
}

.mrd-fest-espace .mrd-fest-tableau .mrd-fest-plus {
	color: var(--mrd-vert) !important;
}

.mrd-fest-espace .mrd-fest-tableau .mrd-fest-moins {
	color: var(--mrd-dore-fonce) !important;
}

/* ── Les récompenses ────────────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-bons {
	list-style: none !important;
	margin: 0 0 clamp(1.2rem, 3vw, 1.8rem) !important;
	padding: 0 !important;
}

.mrd-fest-espace .mrd-fest-bons li {
	background: var(--mrd-carte) !important;
	border: 1px solid var(--mrd-dore) !important;
	border-radius: clamp(8px, 1.6vw, 14px) !important;
	padding: clamp(0.8rem, 2.6vw, 1.2rem) !important;
	margin: 0 0 clamp(0.6rem, 2vw, 0.9rem) !important;
	list-style: none !important;
}

.mrd-fest-espace .mrd-fest-code {
	display: inline-block !important;
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem) !important;
	letter-spacing: 0.1em !important;
	color: var(--mrd-vert) !important;
	background: var(--mrd-beige) !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 0.2em 0.6em !important;
}

/* ── Les listes ─────────────────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-ventes {
	list-style: none !important;
	margin: 0 0 clamp(1.2rem, 3vw, 1.8rem) !important;
	padding: 0 !important;
}

.mrd-fest-espace .mrd-fest-ventes li {
	padding: clamp(0.5rem, 1.8vw, 0.8rem) 0 !important;
	border-bottom: 1px solid var(--mrd-filet) !important;
	list-style: none !important;
}

/* ── Le formulaire ──────────────────────────────────────────────────────── */

.mrd-fest-espace .mrd-fest-formulaire {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: clamp(0.5rem, 2vw, 0.8rem) !important;
	align-items: center !important;
	margin: 0 0 clamp(1rem, 3vw, 1.6rem) !important;
}

.mrd-fest-espace input[type="tel"] {
	flex: 1 1 200px !important;
	min-height: 48px !important;
	padding: 0 clamp(0.6rem, 2vw, 1rem) !important;
	font-family: 'Cormorant Garamond', Garamond, Georgia, serif !important;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem) !important;
	color: var(--mrd-vert) !important;
	background: var(--mrd-carte) !important;
	border: 1px solid var(--mrd-dore) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.mrd-fest-espace input[type="tel"]:focus {
	border-color: var(--mrd-vert) !important;
	outline: 2px solid var(--mrd-dore) !important;
	outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * LES BOUTONS — LES CINQ ÉTATS, SANS EXCEPTION
 *
 * C'est la règle qui a fait échouer une première correction sur ce site :
 * propre au repos, rose dès qu'on approchait la souris. Un état non déclaré
 * est un état laissé au thème.
 * ══════════════════════════════════════════════════════════════════════════ */

.mrd-fest-espace .mrd-fest-bouton,
.mrd-fest-espace .mrd-fest-bouton:link,
.mrd-fest-espace .mrd-fest-bouton:visited,
.mrd-fest-espace .mrd-fest-bouton:hover,
.mrd-fest-espace .mrd-fest-bouton:focus,
.mrd-fest-espace .mrd-fest-bouton:active,
.mrd-fest-espace button.mrd-fest-bouton {
	display: inline-block !important;
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem) !important;
	line-height: 1.3 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center !important;
	color: var(--mrd-creme) !important;
	background: var(--mrd-vert) !important;
	border: 1px solid var(--mrd-vert) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	padding: clamp(0.8rem, 2.4vw, 1.1rem) clamp(1.6rem, 5vw, 2.6rem) !important;
	min-height: 48px !important;
	cursor: pointer !important;
	transition: none !important;
}

.mrd-fest-espace .mrd-fest-bouton:hover,
.mrd-fest-espace .mrd-fest-bouton:focus,
.mrd-fest-espace .mrd-fest-bouton:active,
.mrd-fest-espace button.mrd-fest-bouton:hover,
.mrd-fest-espace button.mrd-fest-bouton:focus,
.mrd-fest-espace button.mrd-fest-bouton:active {
	color: var(--mrd-peche) !important;
	background: var(--mrd-dore-fonce) !important;
	border-color: var(--mrd-dore-fonce) !important;
}

.mrd-fest-espace .mrd-fest-bouton:focus-visible,
.mrd-fest-espace button.mrd-fest-bouton:focus-visible {
	outline: 2px solid var(--mrd-dore) !important;
	outline-offset: 3px !important;
}

.mrd-fest-espace .mrd-fest-au-centre {
	text-align: center !important;
	margin: clamp(1.4rem, 4vw, 2.4rem) 0 !important;
}

/* Les liens ordinaires du bloc — cinq états, comme le reste. */

.mrd-fest-espace a:not(.mrd-fest-bouton),
.mrd-fest-espace a:not(.mrd-fest-bouton):link,
.mrd-fest-espace a:not(.mrd-fest-bouton):visited {
	color: var(--mrd-dore-fonce) !important;
	text-decoration: underline !important;
	text-underline-offset: 0.2em !important;
}

.mrd-fest-espace a:not(.mrd-fest-bouton):hover,
.mrd-fest-espace a:not(.mrd-fest-bouton):focus,
.mrd-fest-espace a:not(.mrd-fest-bouton):active {
	color: var(--mrd-vert) !important;
	text-decoration: underline !important;
}

/* ── Le bandeau du guet ─────────────────────────────────────────────────── */

.mrd-fest-bandeau {
	font-family: 'Cormorant Garamond', Garamond, Georgia, serif !important;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem) !important;
	line-height: clamp(1.45, 1.4 + 0.2vw, 1.65) !important;
	color: #2A4A3D !important;
	background: #FFFDF7 !important;
	border: 1px solid #C9AB6F !important;
	border-radius: clamp(10px, 2vw, 18px) !important;
	padding: clamp(1rem, 3.4vw, 1.6rem) !important;
	margin: 0 0 clamp(1.4rem, 4vw, 2.4rem) !important;
}

/* ── Sur téléphone, le tableau ne déborde pas ───────────────────────────── */

/*
 * QUATRE COLONNES NE TIENNENT PAS DANS 360 PIXELS.
 *
 * On ne réduit pas la police jusqu'à l'illisible et on n'impose pas de
 * défilement horizontal — la leçon de la page panier. Sous 640 px, le motif
 * passe sur sa propre ligne et les deux chiffres se rangent en dessous, à
 * droite.
 */
@media (max-width: 640px) {

	.mrd-fest-espace .mrd-fest-tableau,
	.mrd-fest-espace .mrd-fest-tableau tbody,
	.mrd-fest-espace .mrd-fest-tableau tbody tr,
	.mrd-fest-espace .mrd-fest-tableau tbody td {
		display: block !important;
		width: 100% !important;
	}

	.mrd-fest-espace .mrd-fest-tableau thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
	}

	.mrd-fest-espace .mrd-fest-tableau tbody tr {
		border-top: 1px solid var(--mrd-filet) !important;
		padding: clamp(0.6rem, 2.4vw, 0.9rem) clamp(0.7rem, 3vw, 1rem) !important;
	}

	.mrd-fest-espace .mrd-fest-tableau tbody tr:first-child {
		border-top: 0 !important;
	}

	.mrd-fest-espace .mrd-fest-tableau tbody td {
		border-top: 0 !important;
		padding: 0.1rem 0 !important;
	}

	.mrd-fest-espace .mrd-fest-tableau .mrd-fest-quand {
		font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
		font-size: clamp(0.78rem, 0.75rem + 0.2vw, 0.9rem) !important;
		letter-spacing: 0.06em !important;
		color: var(--mrd-dore-fonce) !important;
	}

	.mrd-fest-espace .mrd-fest-tableau .mrd-fest-chiffre {
		display: inline-block !important;
		width: auto !important;
		text-align: left !important;
		margin-right: 1.2em !important;
	}

	.mrd-fest-espace .mrd-fest-tableau .mrd-fest-chiffre::before {
		content: attr(data-mot) ' ' !important;
		color: var(--mrd-dore-fonce) !important;
		letter-spacing: 0.06em !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
 * LE COMPTEUR DU PANIER ET DE LA COMMANDE
 *
 * Il emprunte tout au bloc « Mes Étincelles » — mêmes polices, mêmes couleurs,
 * mêmes cinq états sur les boutons — et n'ajoute que ce qui lui est propre :
 * une carte plus compacte, parce qu'elle s'insère au milieu d'un écran déjà
 * chargé, et qui ne doit pousser ni le total ni le bouton de paiement hors de
 * l'écran.
 * ══════════════════════════════════════════════════════════════════════════ */

.mrd-fest-espace.mrd-fest-panier {
	background: #FFFDF7 !important;
	border: 1px solid #C9AB6F !important;
	border-radius: clamp(10px, 2vw, 18px) !important;
	padding: clamp(0.9rem, 3.2vw, 1.5rem) clamp(1rem, 3.6vw, 1.6rem) !important;
	margin: 0 0 clamp(1.2rem, 4vw, 2rem) !important;
}

.mrd-fest-panier .mrd-fest-panier-titre {
	font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
	font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem) !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--mrd-dore-fonce) !important;
	margin: 0 0 clamp(0.5rem, 1.8vw, 0.8rem) !important;
}

.mrd-fest-panier .mrd-fest-panier-solde {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem) !important;
	line-height: clamp(1.4, 1.35 + 0.2vw, 1.6) !important;
	margin: 0 0 clamp(0.5rem, 1.8vw, 0.8rem) !important;
}

.mrd-fest-panier .mrd-fest-panier-gain {
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem) !important;
	margin: 0 0 clamp(0.4rem, 1.5vw, 0.7rem) !important;
}

/*
 * LA SEULE PHRASE QUI DOIT SE VOIR DE LOIN.
 *
 * « Ce panier vous fait franchir le palier » est la seule ligne de tout ce
 * bloc qui peut changer ce qu'elle met dans son panier. Elle est donc sur fond
 * vert, en pêche — la grammaire du site pour ce qui compte.
 */
.mrd-fest-panier .mrd-fest-panier-bonne {
	background: var(--mrd-vert) !important;
	color: var(--mrd-peche) !important;
	border-radius: clamp(8px, 1.6vw, 12px) !important;
	padding: clamp(0.7rem, 2.4vw, 1rem) clamp(0.8rem, 2.8vw, 1.2rem) !important;
	margin: clamp(0.6rem, 2vw, 0.9rem) 0 !important;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem) !important;
}

.mrd-fest-panier .mrd-fest-panier-bonne strong {
	color: var(--mrd-peche) !important;
	font-weight: 600 !important;
}

.mrd-fest-panier .mrd-fest-panier-bons {
	list-style: none !important;
	margin: 0 0 clamp(0.4rem, 1.5vw, 0.7rem) !important;
	padding: 0 !important;
}

.mrd-fest-panier .mrd-fest-panier-bons li {
	list-style: none !important;
	padding: clamp(0.3rem, 1.2vw, 0.5rem) 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.mrd-fest-panier .mrd-fest-jauge {
	margin-bottom: clamp(0.35rem, 1.2vw, 0.5rem) !important;
}

.mrd-fest-panier .mrd-fest-compte {
	margin: 0 0 clamp(0.5rem, 1.8vw, 0.8rem) !important;
}

.mrd-fest-panier p:last-child {
	margin-bottom: 0 !important;
}

.mrd-fest-panier .mrd-fest-bouton {
	padding: clamp(0.6rem, 2vw, 0.85rem) clamp(1.2rem, 4vw, 1.9rem) !important;
	min-height: 44px !important;
}

/*
 * ══════════════════════════════════════════════════════════════════════════
 * SA PLACE DANS LE PANIER, QUAND LE FORMULAIRE EST EMPILÉ
 *
 * Le formulaire du panier de ce site est mis en colonne, et chacun de ses
 * morceaux porte un numéro d'ordre : le tableau 1, le bloc de fidélité 2, le
 * bouton « Continuer ma cueillette » 3, le code promo 4, le sous-total 5.
 *
 * Un enfant sans numéro vaut zéro — c'est-à-dire AVANT le tableau des
 * produits. Notre compteur remonterait donc tout en haut de la page, au-dessus
 * de ce qu'elle est en train d'acheter. On lui donne son rang, juste sous les
 * produits, là où il a été demandé.
 *
 * Si ce formulaire cesse un jour d'être empilé, cette règle ne fait plus rien :
 * « order » n'a d'effet que sur un enfant de conteneur flexible.
 * ══════════════════════════════════════════════════════════════════════════
 */
.woocommerce form.woocommerce-cart-form > .mrd-fest-panier {
	order: 2 !important;
	width: 100% !important;
	clear: both !important;
}