/* =========================================================================
   Moulin de Pouyhéré – Liste de services
   Utilise les variables CSS globales d'Elementor.
   ========================================================================= */

.mpouy-wrap {
	--mpouy-bg:      var(--e-global-color-primary,   #9B3B21);
	--mpouy-fg:      var(--e-global-color-secondary, #FD9DB4);
	--mpouy-num:     var(--e-global-color-text,      #FFFFFF);
	--mpouy-line:    color-mix(in srgb, var(--e-global-color-secondary, #FD9DB4) 45%, transparent);
	--mpouy-dim:     color-mix(in srgb, var(--e-global-color-secondary, #FD9DB4) 75%, transparent);
	--mpouy-font-body:   var(--e-global-typography-text-font-family,   "Baskervville"), serif;
	--mpouy-font-accent: var(--e-global-typography-accent-font-family, "Termina"), sans-serif;

	/* Tailles de référence — modifiables par variable */
	--mpouy-fs-base:   clamp(17px, 1.35vw, 22px);
	--mpouy-fs-small:  clamp(13px, 0.95vw, 16px);
	--mpouy-fs-title:  clamp(14px, 1.1vw, 17px);
	--mpouy-row-gap:   22px;

	background: var(--mpouy-bg);
	color:      var(--mpouy-fg);
	font-family: var(--mpouy-font-body);
	padding: clamp(24px, 4vw, 56px);
	border-radius: 24px;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: var(--mpouy-fs-base);
	line-height: 1.35;
}

.mpouy-wrap *,
.mpouy-wrap *::before,
.mpouy-wrap *::after {
	box-sizing: border-box;
}

/* ---- Header ------------------------------------------------------------ */

.mpouy-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mpouy-line);
	margin-bottom: 6px;
}

.mpouy-title,
.mpouy-total-label {
	font-family: var(--mpouy-font-accent);
	font-weight: 500;
	letter-spacing: 0.1em;
	font-size: var(--mpouy-fs-title);
	margin: 0;
	color: var(--mpouy-fg);
	text-transform: uppercase;
}

/* ---- Liste ------------------------------------------------------------- */

.mpouy-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mpouy-row {
	display: grid;
	grid-template-columns:
		minmax(0, 1.5fr)   /* nom         */
		minmax(0, 1.1fr)   /* unité       */
		minmax(64px, auto) /* prix        */
		132px              /* qty/switch  */
		minmax(72px, auto);/* sous-total  */
	align-items: center;
	column-gap: var(--mpouy-row-gap);
	padding: 18px 0;
}

.mpouy-name {
	font-family: var(--mpouy-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--mpouy-fs-base);
	color: var(--mpouy-fg);
}

.mpouy-unit {
	font-size: var(--mpouy-fs-small);
	color: var(--mpouy-dim);
	font-style: normal;
}

.mpouy-price,
.mpouy-subtotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-size: var(--mpouy-fs-base);
	color: var(--mpouy-num);
}

.mpouy-qty {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---- Séparateur HR ----------------------------------------------------- */

.mpouy-sep {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mpouy-sep hr {
	border: 0;
	border-top: 1px solid var(--mpouy-line);
	margin: 0;
}

/* ---- Stepper quantité (−  N  +) ---------------------------------------
   Grille interne fixe → robuste face aux resets type "input { width:100% }"
   ----------------------------------------------------------------------- */

.mpouy-stepper {
	display: inline-grid;
	grid-template-columns: 36px 48px 36px;
	align-items: stretch;
	height: 38px;
	border: 1px solid var(--mpouy-line);
	border-radius: 999px;
	overflow: hidden;
	background: transparent;
	transition: border-color 0.18s ease;
}

.mpouy-stepper:focus-within {
	border-color: var(--mpouy-fg);
}

.mpouy-step {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: var(--mpouy-fg);
	font-family: var(--mpouy-font-accent);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.mpouy-step:hover {
	background: color-mix(in srgb, var(--mpouy-fg) 18%, transparent);
}

.mpouy-step:active {
	background: var(--mpouy-fg);
	color: var(--mpouy-bg);
}

.mpouy-step:focus-visible {
	outline: 2px solid var(--mpouy-fg);
	outline-offset: -2px;
}

/* Champ central — width:auto + grille parent = aucune dérive. */
.mpouy-wrap .mpouy-input--qty {
	width: 100%;
	min-width: 0;
	height: 100%;
	background: transparent;
	color: var(--mpouy-num);
	border: 0;
	border-left:  1px solid var(--mpouy-line);
	border-right: 1px solid var(--mpouy-line);
	padding: 0;
	margin: 0;
	font-family: var(--mpouy-font-body);
	font-size: var(--mpouy-fs-base);
	line-height: 1;
	text-align: center;
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none;
}

.mpouy-input--qty:focus {
	outline: none;
}

/* Masque les flèches natives (illisibles sur fond rouille) */
.mpouy-input--qty::-webkit-outer-spin-button,
.mpouy-input--qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Switch (produits "à l'unité") ------------------------------------ */

.mpouy-switch {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.mpouy-input--switch {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.mpouy-switch-track {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--mpouy-line);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.mpouy-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mpouy-fg);
	transition: transform 0.2s ease;
}

.mpouy-input--switch:checked + .mpouy-switch-track {
	background: color-mix(in srgb, var(--mpouy-fg) 28%, transparent);
	border-color: var(--mpouy-fg);
}

.mpouy-input--switch:checked + .mpouy-switch-track .mpouy-switch-thumb {
	transform: translateX(24px);
}

.mpouy-input--switch:focus-visible + .mpouy-switch-track {
	outline: 2px solid var(--mpouy-fg);
	outline-offset: 2px;
}

/* ---- Bouton check-out -------------------------------------------------- */

.mpouy-actions {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mpouy-checkout {
	font-family: var(--mpouy-font-accent);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--mpouy-fs-title);
	color: var(--mpouy-fg);
	background: transparent;
	border: 1px solid var(--mpouy-fg);
	border-radius: 999px;
	padding: 16px 46px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mpouy-checkout-amount {
	color: var(--mpouy-num);
	margin-left: 0.4em;
	font-variant-numeric: tabular-nums;
}

.mpouy-checkout:hover:not(:disabled) {
	background: var(--mpouy-fg);
	color: var(--mpouy-bg);
}

.mpouy-checkout:hover:not(:disabled) .mpouy-checkout-amount {
	color: var(--mpouy-bg);
}

.mpouy-checkout:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.mpouy-feedback {
	margin: 0;
	min-height: 1em;
	font-size: var(--mpouy-fs-small);
	opacity: 0.85;
}

/* ---- Lien retour sur le checkout WooCommerce -------------------------- */

.mpouy-back-wrap {
	margin: 0 0 24px;
}

/* Spécificité doublée + !important sur la couleur pour neutraliser les
   styles de liens du thème actif sur la page checkout (qui imposent un
   bleu illisible au hover). */
a.mpouy-back-link,
a.mpouy-back-link:link,
a.mpouy-back-link:visited {
	display: inline-block;
	font-family: var(--e-global-typography-accent-font-family, "Termina"), sans-serif;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: clamp(12px, 0.85vw, 14px);
	color: var(--e-global-color-secondary, #FD9DB4) !important;
	background: transparent;
	text-decoration: none !important;
	padding: 10px 20px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #FD9DB4) 45%, transparent);
	border-radius: 999px;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

a.mpouy-back-link:hover,
a.mpouy-back-link:focus,
a.mpouy-back-link:active {
	background: var(--e-global-color-secondary, #FD9DB4) !important;
	color: var(--e-global-color-primary, #9B3B21) !important;
	border-color: var(--e-global-color-secondary, #FD9DB4) !important;
	text-decoration: none !important;
}

/* =========================================================================
   Page WooCommerce "Commande reçue" (order-received) — Maison Clam
   Surcharge des couleurs/typographies par défaut du thème.
   Règle d'or : labels & titres = rose, valeurs & chiffres = blanc.
   ========================================================================= */

.woocommerce-order,
form.woocommerce-checkout {
	--mc-fg:   var(--e-global-color-secondary, #FD9DB4);
	--mc-num:  var(--e-global-color-text,      #FFFFFF);
	--mc-line: color-mix(in srgb, var(--e-global-color-secondary, #FD9DB4) 35%, transparent);
	color: var(--mc-fg);
	font-family: var(--e-global-typography-text-font-family, "Baskervville"), serif;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 32px);
}

/* Titres : Termina rose */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order .woocommerce-customer-details h2,
form.woocommerce-checkout h2,
form.woocommerce-checkout h3 {
	color: var(--mc-fg) !important;
	font-family: var(--e-global-typography-accent-font-family, "Termina"), sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
}

/* "Merci. Votre commande a été reçue." */
.woocommerce-notice,
.woocommerce-notice--success,
.woocommerce-thankyou-order-received {
	color: var(--mc-fg) !important;
	font-size: clamp(16px, 1.1vw, 19px);
	margin-bottom: 24px;
}

/* Bandeau d'aperçu (numéro, date, e-mail, total, moyen de paiement) */
.woocommerce-order-overview,
ul.woocommerce-order-overview,
.woocommerce-order ul.order_details {
	color: var(--mc-fg) !important;
	margin: 0 0 40px !important;
	padding: 0 !important;
	list-style: none !important;
}

.woocommerce-order-overview li,
ul.woocommerce-order-overview li,
.woocommerce-order ul.order_details li {
	color: var(--mc-fg) !important;
	border-right-color: var(--mc-line) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: var(--e-global-typography-accent-font-family, "Termina"), sans-serif;
	font-size: clamp(10px, 0.75vw, 12px);
}

.woocommerce-order-overview li strong,
ul.woocommerce-order-overview li strong,
.woocommerce-order ul.order_details li strong {
	color: var(--mc-num) !important;
	display: block;
	font-family: var(--e-global-typography-text-font-family, "Baskervville"), serif;
	font-size: clamp(15px, 1.1vw, 18px);
	letter-spacing: 0;
	text-transform: none;
	margin-top: 4px;
}

/* Tableau de commande */
.woocommerce-order .woocommerce-table,
.woocommerce-order table.shop_table {
	color: var(--mc-fg) !important;
	border: 0 !important;
	border-collapse: collapse !important;
	background: transparent !important;
	width: 100%;
}

.woocommerce-order .woocommerce-table th,
.woocommerce-order .woocommerce-table td,
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mc-line) !important;
	padding: 14px 12px !important;
	font-family: var(--e-global-typography-text-font-family, "Baskervville"), serif;
	font-size: clamp(15px, 1.1vw, 18px);
}

/* En-têtes "Produit / Total" */
.woocommerce-order .woocommerce-table thead th,
.woocommerce-order table.shop_table thead th {
	color: var(--mc-fg) !important;
	font-family: var(--e-global-typography-accent-font-family, "Termina"), sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	font-size: clamp(11px, 0.85vw, 13px);
}

/* Nom du produit dans le tableau → blanc */
.woocommerce-order .woocommerce-table__product-name,
.woocommerce-order .woocommerce-table tbody td,
.woocommerce-order table.shop_table tbody td {
	color: var(--mc-num) !important;
}

.woocommerce-order .woocommerce-table__product-name a,
.woocommerce-order table.shop_table tbody td a {
	color: var(--mc-num) !important;
	text-decoration: none !important;
}

.woocommerce-order .woocommerce-table__product-name a:hover {
	color: var(--mc-fg) !important;
}

/* Pied de tableau : "Sous-total : / Total : / Moyen de paiement :" */
.woocommerce-order .woocommerce-table tfoot th,
.woocommerce-order table.shop_table tfoot th {
	color: var(--mc-fg) !important;
	font-weight: 500;
	font-family: var(--e-global-typography-accent-font-family, "Termina"), sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp(12px, 0.9vw, 14px);
	text-align: left !important;
}

.woocommerce-order .woocommerce-table tfoot td,
.woocommerce-order table.shop_table tfoot td {
	color: var(--mc-num) !important;
	font-variant-numeric: tabular-nums;
}

/* Le span .amount (montants formatés par WC) */
.woocommerce-order .woocommerce-Price-amount,
.woocommerce-order .amount {
	color: inherit !important;
	font-variant-numeric: tabular-nums;
}

/* Adresse client */
.woocommerce-customer-details {
	margin-top: 40px;
}

.woocommerce-customer-details address {
	color: var(--mc-num) !important;
	background: transparent !important;
	border: 1px solid var(--mc-line) !important;
	border-radius: 10px;
	padding: 20px 22px !important;
	font-family: var(--e-global-typography-text-font-family, "Baskervville"), serif;
	font-size: clamp(15px, 1vw, 17px);
	line-height: 1.6;
	font-style: normal;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	color: var(--mc-num) !important;
}

.woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-customer-details .woocommerce-customer-details--email::before {
	color: var(--mc-fg) !important;
	opacity: 1 !important;
}

/* Liens génériques dans la zone WC (sauf back-link, qui a son propre style) */
.woocommerce-order a:not(.mpouy-back-link),
form.woocommerce-checkout a:not(.mpouy-back-link) {
	color: var(--mc-fg);
	text-decoration: none;
	transition: color 0.18s ease;
}

.woocommerce-order a:not(.mpouy-back-link):hover,
form.woocommerce-checkout a:not(.mpouy-back-link):hover {
	color: var(--mc-num);
}

/* Mobile : on retire les séparateurs verticaux de l'overview */
@media (max-width: 640px) {
	.woocommerce-order-overview li,
	ul.woocommerce-order-overview li,
	.woocommerce-order ul.order_details li {
		border-right: 0 !important;
		border-bottom: 1px solid var(--mc-line) !important;
		padding: 12px 0 !important;
		width: 100% !important;
		float: none !important;
	}
}

/* ---- Tablette ---------------------------------------------------------- */

@media (max-width: 960px) {
	.mpouy-row {
		grid-template-columns:
			minmax(0, 1.3fr)
			minmax(0, 1fr)
			auto
			120px
			auto;
		column-gap: 14px;
	}
}

/* ---- Mobile ------------------------------------------------------------
   2 colonnes : infos produit à gauche, contrôle à droite.
   Sous-total sous la quantité, unité sous le nom.
   ----------------------------------------------------------------------- */

@media (max-width: 640px) {
	.mpouy-wrap {
		padding: 22px 18px;
		border-radius: 18px;
	}

	.mpouy-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name  qty"
			"unit  sub"
			"price sub";
		column-gap: 14px;
		row-gap: 2px;
		padding: 14px 0;
		align-items: start;
	}

	.mpouy-name     { grid-area: name; align-self: center; }
	.mpouy-unit     { grid-area: unit; }
	.mpouy-price    { grid-area: price; text-align: left; opacity: 0.95; }
	.mpouy-qty      { grid-area: qty;  align-self: center; justify-content: flex-end; }
	.mpouy-subtotal { grid-area: sub;  align-self: end; }

	.mpouy-stepper {
		height: 34px;
		grid-template-columns: 34px 42px 34px;
	}

	.mpouy-checkout {
		padding: 12px 30px;
	}
}