/**
 * Modal « ajouté au panier ».
 *
 * La feuille porte aussi un correctif de mise en page du panier et de la
 * commande, chargé même quand le modal est désactivé.
 */

/* =========================================================================
   Modal « ajouté au panier »
   ====================================================================== */

.vw-atc {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999998;
	padding: 20px;
	background: rgba( 0, 0, 0, 0.6 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.vw-atc.is-active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vw-atc.is-visible {
	opacity: 1;
}

body.vw-atc-open {
	overflow: hidden;
}

.vw-atc__dialog {
	position: relative;
	width: 100%;
	max-width: 26rem;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	padding: 2rem 1.5rem 1.5rem;
	border-radius: 0.85rem;
	background: var( --global-palette9, #ffffff );
	color: var( --global-palette4, #1f2937 );
	box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.28 );
	transform: translateY( 12px );
	transition: transform 0.25s ease;
}

.vw-atc.is-visible .vw-atc__dialog {
	transform: none;
}

.vw-atc__close {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	padding: 0.25rem 0.55rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
}

.vw-atc__close:hover,
.vw-atc__close:focus {
	opacity: 1;
}

.vw-atc__body {
	text-align: center;
}

.vw-atc__title {
	margin: 0.75rem 0 1.1rem;
	font-size: 1.15rem;
	font-weight: 700;
}

/* --- Le check ---------------------------------------------------------- */

.vw-atc__check {
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	margin: 0 auto;
	color: var( --global-palette-btn-bg, #16a34a );
}

.vw-atc__check-circle,
.vw-atc__check-mark {
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vw-atc__check-circle {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
}

.vw-atc__check-mark {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

.vw-atc.is-visible .vw-atc__check-circle {
	animation: vw-atc-draw 0.45s ease forwards;
}

.vw-atc.is-visible .vw-atc__check-mark {
	animation: vw-atc-draw 0.3s 0.35s ease forwards;
}

@keyframes vw-atc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vw-atc,
	.vw-atc__dialog {
		transition: none;
	}

	.vw-atc.is-visible .vw-atc__check-circle,
	.vw-atc.is-visible .vw-atc__check-mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* --- Produit ajouté ---------------------------------------------------- */

.vw-atc__product {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.09 );
	border-radius: 0.6rem;
	text-align: left;
}

.vw-atc__thumb {
	flex: 0 0 3.5rem;
}

.vw-atc__thumb img {
	display: block;
	width: 3.5rem;
	height: auto;
	border-radius: 0.4rem;
}

.vw-atc__details {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.vw-atc__name {
	font-weight: 600;
}

.vw-atc__meta {
	font-size: 0.875em;
	opacity: 0.75;
}

.vw-atc__meta del {
	opacity: 0.6;
}

/* --- Récapitulatif ----------------------------------------------------- */

.vw-atc__summary {
	margin-top: 0.9rem;
	text-align: left;
}

.vw-atc__lines {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
}

.vw-atc__line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.2rem 0;
	border-bottom: 1px dashed rgba( 0, 0, 0, 0.08 );
}

.vw-atc__line--more {
	justify-content: flex-start;
	border-bottom: 0;
	opacity: 0.7;
}

.vw-atc__totals {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
	font-size: 0.9em;
}

.vw-atc__subtotal {
	font-weight: 700;
}

/* --- Boutons ----------------------------------------------------------- */

.vw-atc__actions {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.vw-atc__btn {
	display: block;
	padding: 0.7em 1.1em;
	border: 1px solid transparent;
	border-radius: 0.45rem;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.vw-atc__btn--main {
	background: var( --global-palette-btn-bg, #1f2937 );
	color: var( --global-palette-btn, #ffffff );
}

/*
 * Kadence colore tout lien survolé, ciblé ou actif — `a:hover, a:focus,
 * a:active` — avec `--global-palette-highlight-alt`, et ce sélecteur l'emporte
 * sur une classe seule. Sur un site où cette teinte est proche du fond du
 * bouton, le libellé disparaissait au survol. Les trois états sont donc posés
 * ici, avec les couleurs de survol des boutons du thème : même comportement
 * que les boutons Kadence, sans dépendre de leur classe `.button`.
 */
.vw-atc__btn--main:hover,
.vw-atc__btn--main:focus,
.vw-atc__btn--main:active {
	background: var( --global-palette-btn-bg-hover, var( --global-palette-btn-bg, #1f2937 ) );
	color: var( --global-palette-btn-hover, var( --global-palette-btn, #ffffff ) );
}

.vw-atc__btn--soft {
	border-color: currentColor;
	background: none;
	color: inherit;
}

.vw-atc__btn--ghost {
	order: 3;
	border-color: transparent;
	background: none;
	color: inherit;
	font-weight: 500;
	opacity: 0.75;
}

.vw-atc__btn--ghost:hover,
.vw-atc__btn--ghost:focus {
	opacity: 1;
}

@media ( min-width: 30rem ) {
	.vw-atc__actions {
		grid-template-columns: 1fr 1fr;
	}

	.vw-atc__btn--ghost {
		grid-column: 1 / -1;
	}
}


/* =========================================================================
 *  BOUTON « AJOUTER AU PANIER » APRÈS UN AJOUT, DANS LES GRILLES DE BLOCS
 * ====================================================================== */

/*
 * Kadence escamote le bouton après un ajout AJAX pour ne laisser que le lien
 * « Voir le panier ». Sa règle est complète pour la boucle produit classique :
 *
 *   .woocommerce ul.products.woo-archive-btn-button li.product .button.added
 *   { height: 0; padding: 0; overflow: hidden; border: 0 }
 *
 * mais la variante des grilles de blocs — celles qu'on trouve sur l'accueil —
 * ne pose que `height: 0; overflow: hidden`, sans annuler les paddings. Avec
 * `box-sizing: border-box`, une hauteur nulle ne descend pas sous les paddings :
 * il restait une barre pleine de la couleur du bouton, d'une dizaine de pixels.
 * On complète la règle. Le texte, lui, était déjà masqué par `font-size: 0`.
 */
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link.added:not( .loading ) {
	height: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
	overflow: hidden;
}


/* =========================================================================
   Panier — ligne d'actions : chevauchement du bouton « code promo »
   ====================================================================== */

/*
 * Kadence fixe `height: 38px` et `line-height: 38px` sur les boutons de la
 * ligne d'actions du panier. Dès que le libellé passe sur deux lignes — ce qui
 * arrive avec « Appliquer le code promo » sur un téléphone — la seconde ligne
 * sort de la boîte et vient recouvrir « Mettre à jour le panier ». Mesuré sur
 * un écran de 390 px : boîte de 38 px pour 76 px de contenu.
 *
 * Le thème prévoit pourtant d'empiler le champ et le bouton sous 540 px, mais
 * cette règle-là ne s'applique jamais : son sélecteur
 * `table.cart td.actions .coupon .button` est moins spécifique que celui de sa
 * propre règle à 719 px, `.woocommerce table.cart td.actions .coupon .button`,
 * qui impose 48 % de largeur et un flottant. La spécificité l'emporte sur
 * l'ordre des media queries, la seconde gagne à toutes les largeurs.
 *
 * Les deux défauts sont corrigés ici : le bouton grandit avec son contenu, et
 * l'empilement prévu sous 540 px est rétabli avec un sélecteur qui gagne.
 */
body.woocommerce-cart table.cart td.actions .button,
body.woocommerce-cart table.cart td.actions .coupon .button {
	height: auto;
	min-height: 38px;
	line-height: 1.3;
	padding-top: 8px;
	padding-bottom: 8px;
	white-space: normal;
}

@media screen and (max-width: 540px) {

	body.woocommerce-cart table.cart td.actions .coupon .input-text,
	body.woocommerce-cart table.cart td.actions .coupon .button {
		width: 100%;
		float: none;
		margin: 0;
	}

	body.woocommerce-cart table.cart td.actions .coupon .input-text {
		margin-bottom: 8px;
	}
}