/**
 * Villa Victoria — Panier « application » (mobile)
 *
 * Écran servi sur /cart/?vue=app, sans en-tête ni pied de page du site. Seuls
 * le CSS additionnel du Customizer (barre de navigation mobile, couleurs de
 * base) et le badge du compteur sont chargés à côté de cette feuille : tout
 * ce qui est dessiné ici l'est donc explicitement.
 *
 * Charte : navy #0F1F34, texte #5A6676, doré #C39A6B (survol / accent),
 * ivoire #F7F4EE, filet sable #E6DFD4 ; titres Melodrama, courant Jost.
 *
 * Deux variables sont posées par le script : --vv-pa-tabbar (hauteur mesurée
 * de la barre d'onglets) et --vv-pa-cta (hauteur de la barre « Commander »).
 */

@font-face {
	font-family: "Melodrama";
	src: url("../../../themes/serava/assets/fonts/melodrama/Melodrama-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--vv-pa-navy: #0F1F34;
	--vv-pa-navy-2: #162C4A;
	--vv-pa-texte: #5A6676;
	--vv-pa-dore: #C39A6B;
	--vv-pa-dore-clair: #E8C89F;
	--vv-pa-ivoire: #F7F4EE;
	--vv-pa-filet: #E6DFD4;
	--vv-pa-blanc: #FFFFFF;
	--vv-pa-rayon: 18px;
	--vv-pa-tabbar: 74px;
	--vv-pa-cta: 0px;
	--vv-pa-ombre: 0 8px 24px rgba(15, 31, 52, 0.05);
	--vv-pa-sortie: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =====================================================================
   1. Page
   ===================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	background-color: var(--vv-pa-ivoire);
}

body.vv-pa-body {
	margin: 0;
	background-color: var(--vv-pa-ivoire);
	color: var(--vv-pa-navy);
	font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overscroll-behavior-y: none;
}

/* la colonne de contenu ne dépasse pas 600 px (tablettes) ; les barres du
   haut et du bas, elles, courent sur toute la largeur et ne resserrent que
   leur contenu (padding calculé) */
.vv-pa {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
}

.vv-pa *,
.vv-pa *::before,
.vv-pa *::after {
	box-sizing: border-box;
}

/* remises à zéro en :where() : spécificité nulle, n'importe quelle classe
   du composant passe devant (sinon « .vv-pa a » battait « .vv-pa-btn ») */
.vv-pa :where(h1, h2, h3, p, ul, dl, dd, dt) {
	margin: 0;
}

.vv-pa :where(ul) {
	padding: 0;
	list-style: none;
}

.vv-pa :where(a) {
	color: inherit;
	text-decoration: none;
}

.vv-pa :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.vv-pa :where(button) {
	font: inherit;
	color: inherit;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.vv-pa :focus-visible {
	outline: 2px solid var(--vv-pa-dore);
	outline-offset: 2px;
}

/* le thème n'est pas chargé : la classe de WordPress pour les lecteurs
   d'écran est redéfinie pour toute la page (le badge de la barre d'onglets
   en porte une, elle s'affichait en clair et gonflait la barre) */
.vv-pa-body .screen-reader-text,
.vv-pa .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* montants WooCommerce : héritent, sans style de boutique */
.vv-pa .amount,
.vv-pa .amount bdi,
.vv-pa .woocommerce-Price-currencySymbol {
	font: inherit;
	color: inherit;
}

.vv-pa .vv-pa-svg {
	display: block;
	flex: 0 0 auto;
}

/* =====================================================================
   2. Barre de titre
   ===================================================================== */

.vv-pa-barre {
	position: sticky;
	top: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 8px;
	padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, calc((100% - 600px) / 2 + 12px)) 8px;
	background-color: rgba(247, 244, 238, 0.86);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid rgba(230, 223, 212, 0.9);
}

.vv-pa-barre__retour {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vv-pa-filet);
	border-radius: 50%;
	background-color: var(--vv-pa-blanc);
	color: var(--vv-pa-navy);
	transition: transform 0.15s ease, background-color 0.2s ease;
}

.vv-pa-barre__retour:active {
	transform: scale(0.92);
	background-color: var(--vv-pa-ivoire);
}

.vv-pa-barre__titres {
	text-align: center;
	min-width: 0;
}

.vv-pa-barre__titre {
	font-family: "Melodrama", "Jost", serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--vv-pa-navy);
}

.vv-pa-barre__nombre {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--vv-pa-texte);
}

.vv-pa-barre__nombre[hidden] {
	display: none;
}

/* =====================================================================
   3. Corps
   ===================================================================== */

.vv-pa-main {
	max-width: 600px;
	margin: 0 auto;
	padding: 14px 16px calc(var(--vv-pa-cta) + 24px);
}

.vv-pa-h2 {
	font-family: "Melodrama", "Jost", serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--vv-pa-navy);
}

/* ---------- liste des articles ---------- */

.vv-pa-liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vv-pa-card {
	position: relative;
	border-radius: var(--vv-pa-rayon);
	box-shadow: var(--vv-pa-ombre);
	overflow: hidden;
	animation: vv-pa-in 0.45s var(--vv-pa-sortie) both;
	animation-delay: calc(var(--i, 0) * 55ms);
	transition: opacity 0.22s ease, transform 0.22s ease, height 0.26s var(--vv-pa-sortie), margin 0.26s var(--vv-pa-sortie);
}

/* fond navy révélé par un glissement vers la gauche ; l'icône et son
   libellé occupent les 96 px de droite, ceux que le contenu découvre */
.vv-pa-card__fond {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-left: calc(100% - 96px);
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.vv-pa-card__fond .vv-pa-svg {
	transition: transform 0.18s var(--vv-pa-sortie);
}

.vv-pa-card.is-swiping .vv-pa-card__fond {
	opacity: 1;
}

.vv-pa-card.is-armed .vv-pa-card__fond .vv-pa-svg {
	transform: scale(1.25);
}

/* le contenu blanc, celui qui glisse */
.vv-pa-card__contenu {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	padding: 12px;
	background-color: var(--vv-pa-blanc);
	border: 1px solid rgba(230, 223, 212, 0.9);
	border-radius: var(--vv-pa-rayon);
	touch-action: pan-y;
	will-change: transform;
	transition: transform 0.3s var(--vv-pa-sortie);
}

.vv-pa-card.is-swiping .vv-pa-card__contenu {
	transition: none;
}

/* après la première mise en page, plus d'entrée en scène à chaque mise à jour */
.vv-pa-articles.is-static .vv-pa-card {
	animation: none;
}

.vv-pa-card.is-new {
	animation: vv-pa-in 0.45s var(--vv-pa-sortie) both;
}

.vv-pa-card.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.vv-pa-card.is-leaving {
	opacity: 0;
	transform: translateX(-28px);
	pointer-events: none;
}

.vv-pa-card__media {
	display: block;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--vv-pa-ivoire);
}

.vv-pa-card__img,
.vv-pa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vv-pa-card__corps {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vv-pa-card__titre {
	padding-right: 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vv-pa-navy);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.vv-pa-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-top: 6px;
}

.vv-pa-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background-color: var(--vv-pa-ivoire);
	color: var(--vv-pa-texte);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

/* données d'article de WooCommerce (bon cadeau, options) */
.vv-pa-card__donnees {
	flex: 1 1 100%;
	font-size: 12.5px;
	color: var(--vv-pa-texte);
	line-height: 1.4;
}

.vv-pa-card__donnees dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
}

.vv-pa-card__donnees dl.variation dt,
.vv-pa-card__donnees dl.variation dd,
.vv-pa-card__donnees dl.variation p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.vv-pa-card__donnees dl.variation dt {
	font-weight: 500;
	color: var(--vv-pa-navy);
}

.vv-pa-card__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

/* sélecteur de quantité */
.vv-pa-stepper {
	display: inline-flex;
	align-items: center;
	height: 36px;
	border: 1px solid var(--vv-pa-filet);
	border-radius: 999px;
	background-color: var(--vv-pa-blanc);
	overflow: hidden;
}

.vv-pa-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--vv-pa-navy);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.vv-pa-stepper__btn:active {
	background-color: var(--vv-pa-ivoire);
}

.vv-pa-stepper__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.vv-pa-stepper__valeur {
	min-width: 26px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vv-pa-navy);
}

.vv-pa-stepper.is-solo .vv-pa-stepper__btn[data-delta="1"] {
	display: none;
}

.vv-pa-card__total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
	text-align: right;
}

.vv-pa-card__unite {
	font-size: 12px;
	color: var(--vv-pa-texte);
	white-space: nowrap;
}

.vv-pa-card__montant {
	font-size: 16px;
	font-weight: 600;
	color: var(--vv-pa-navy);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vv-pa-continuer {
	margin: 16px 0 4px;
	text-align: center;
}

.vv-pa-continuer a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vv-pa-navy);
}

.vv-pa-continuer a .vv-pa-svg {
	width: 22px;
	height: 22px;
	padding: 3px;
	border: 1px solid var(--vv-pa-filet);
	border-radius: 50%;
	background-color: var(--vv-pa-blanc);
}

.vv-pa-continuer a:active {
	background-color: rgba(255, 255, 255, 0.6);
}

/* ---------- panier vide ---------- */

.vv-pa-vide {
	padding: 44px 12px 20px;
	text-align: center;
	animation: vv-pa-in 0.45s var(--vv-pa-sortie) both;
}

.vv-pa-vide__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 20px;
	border: 1px solid var(--vv-pa-filet);
	border-radius: 50%;
	background-color: var(--vv-pa-blanc);
	color: var(--vv-pa-navy);
	box-shadow: var(--vv-pa-ombre);
}

.vv-pa-vide__titre {
	font-family: "Melodrama", "Jost", serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--vv-pa-navy);
}

.vv-pa-vide__texte {
	max-width: 300px;
	margin: 10px auto 24px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--vv-pa-texte);
}

/* ---------- boutons ---------- */

.vv-pa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.15s ease;
}

.vv-pa-btn:hover {
	color: var(--vv-pa-blanc);
	background-color: var(--vv-pa-navy-2);
}

.vv-pa-btn:active {
	transform: scale(0.97);
	background-color: var(--vv-pa-navy-2);
}

/* ---------- blocs promo et totaux ---------- */

.vv-pa-resume {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}

.vv-pa-resume:empty {
	display: none;
}

.vv-pa-bloc {
	background-color: var(--vv-pa-blanc);
	border: 1px solid rgba(230, 223, 212, 0.9);
	border-radius: var(--vv-pa-rayon);
	box-shadow: var(--vv-pa-ombre);
}

.vv-pa-promo {
	padding: 0 16px;
}

.vv-pa-promo__details {
	display: block;
}

.vv-pa-promo__resume {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 4px 0;
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--vv-pa-navy);
	-webkit-tap-highlight-color: transparent;
}

.vv-pa-promo__resume::-webkit-details-marker {
	display: none;
}

.vv-pa-promo__resume::marker {
	content: "";
}

.vv-pa-promo__resume > span {
	flex: 1 1 auto;
}

.vv-pa-promo__resume .vv-pa-svg:first-child {
	color: var(--vv-pa-dore);
}

.vv-pa-promo__resume .vv-pa-svg:last-child {
	color: var(--vv-pa-texte);
	transition: transform 0.25s var(--vv-pa-sortie);
}

.vv-pa-promo__details[open] .vv-pa-promo__resume .vv-pa-svg:last-child {
	transform: rotate(180deg);
}

.vv-pa-promo__form {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 0 14px;
}

.vv-pa-promo__form.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.vv-pa-promo__champ {
	flex: 1 1 0;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--vv-pa-filet);
	border-radius: 12px;
	background-color: var(--vv-pa-ivoire);
	color: var(--vv-pa-navy);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vv-pa-promo__champ::placeholder {
	color: rgba(90, 102, 118, 0.6);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.vv-pa-promo__champ:focus {
	outline: none;
	border-color: var(--vv-pa-navy);
	background-color: var(--vv-pa-blanc);
}

.vv-pa-promo__champ.is-shake {
	animation: vv-pa-shake 0.4s ease;
}

.vv-pa .vv-pa-promo__btn {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.vv-pa .vv-pa-promo__btn:active {
	transform: scale(0.97);
	background-color: var(--vv-pa-navy-2);
}

.vv-pa-promo__erreur {
	margin: -6px 0 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #A2452C;
}

.vv-pa-promo__erreur[hidden] {
	display: none;
}

.vv-pa-coupons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 14px;
}

.vv-pa-coupon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 12px;
	border-radius: 12px;
	background-color: var(--vv-pa-ivoire);
}

.vv-pa-coupon__code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vv-pa-navy);
}

.vv-pa-coupon__code .vv-pa-svg {
	color: var(--vv-pa-dore);
}

.vv-pa-coupon__montant {
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--vv-pa-navy);
	font-variant-numeric: tabular-nums;
}

.vv-pa-coupon__retirer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--vv-pa-blanc);
	color: var(--vv-pa-texte);
}

.vv-pa-coupon__retirer:active {
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
}

.vv-pa-totaux {
	padding: 14px 16px 16px;
}

.vv-pa-totaux__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 15px;
	color: var(--vv-pa-texte);
}

.vv-pa-totaux__ligne dd {
	font-weight: 500;
	color: var(--vv-pa-navy);
	font-variant-numeric: tabular-nums;
}

.vv-pa-totaux__ligne--remise dd {
	color: var(--vv-pa-dore);
}

.vv-pa-totaux__ligne--total {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--vv-pa-filet);
	color: var(--vv-pa-navy);
	font-weight: 600;
}

.vv-pa-totaux__ligne--total dd {
	font-size: 22px;
	font-weight: 600;
}

.vv-pa-totaux__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--vv-pa-filet);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--vv-pa-texte);
}

.vv-pa-totaux__note .vv-pa-svg {
	margin-top: 2px;
	color: var(--vv-pa-dore);
}

/* ---------- suggestions ---------- */

.vv-pa-suggestions {
	margin-top: 28px;
}

.vv-pa-scroller {
	display: flex;
	gap: 12px;
	margin: 12px -16px 0;
	padding: 4px 16px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.vv-pa-scroller::-webkit-scrollbar {
	display: none;
}

/* le bord droit s'estompe tant qu'il reste des fiches à découvrir */
.vv-pa-suggestions {
	position: relative;
}

.vv-pa-suggestions::after {
	content: "";
	position: absolute;
	top: 44px;
	right: -16px;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(247, 244, 238, 0), var(--vv-pa-ivoire));
	opacity: 1;
	transition: opacity 0.25s ease;
}

.vv-pa-suggestions.is-fin::after {
	opacity: 0;
}

.vv-pa-sugg {
	display: flex;
	flex-direction: column;
	flex: 0 0 150px;
	scroll-snap-align: start;
	padding: 8px 8px 10px;
	background-color: var(--vv-pa-blanc);
	border: 1px solid rgba(230, 223, 212, 0.9);
	border-radius: 16px;
	box-shadow: var(--vv-pa-ombre);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.vv-pa-sugg.is-gone {
	opacity: 0;
	transform: scale(0.94);
}

.vv-pa-sugg__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 11px;
	background-color: var(--vv-pa-ivoire);
}

.vv-pa-sugg__img,
.vv-pa-sugg__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vv-pa-sugg__titre {
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--vv-pa-navy);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(13.5px * 1.3 * 2);
}

.vv-pa-sugg__infos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--vv-pa-texte);
}

.vv-pa-sugg__prix {
	font-weight: 600;
	color: var(--vv-pa-navy);
}

.vv-pa-sugg__ajouter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 36px;
	margin-top: 10px;
	padding: 0 10px;
	border: 1px solid var(--vv-pa-navy);
	border-radius: 999px;
	background-color: transparent;
	color: var(--vv-pa-navy);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.vv-pa-sugg__ajouter:active {
	transform: scale(0.97);
}

.vv-pa-sugg__ajouter:disabled {
	opacity: 0.6;
	cursor: default;
}

.vv-pa-sugg__ajouter.is-added {
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
	opacity: 1;
}

/* =====================================================================
   4. Barre « Commander », fixée au-dessus de la barre d'onglets
   ===================================================================== */

.vv-pa-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--vv-pa-tabbar);
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px max(16px, calc((100% - 600px) / 2 + 16px));
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-top: 1px solid var(--vv-pa-filet);
	box-shadow: 0 -8px 24px rgba(15, 31, 52, 0.06);
}

.vv-pa-cta[hidden] {
	display: none;
}

.vv-pa-cta__total {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vv-pa-cta__libelle {
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--vv-pa-texte);
	white-space: nowrap;
}

.vv-pa-cta__montant {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--vv-pa-navy);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vv-pa-btn--cta {
	flex: 0 1 auto;
	min-width: 160px;
}

/* =====================================================================
   5. Toast
   ===================================================================== */

.vv-pa-toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(var(--vv-pa-tabbar) + var(--vv-pa-cta) + 12px);
	z-index: 9995;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 568px;
	margin: 0 auto;
	padding: 12px 10px 12px 16px;
	border-radius: 14px;
	background-color: var(--vv-pa-navy);
	color: var(--vv-pa-blanc);
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 14px 40px rgba(15, 31, 52, 0.28);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s var(--vv-pa-sortie);
	pointer-events: none;
}

.vv-pa-toast[hidden] {
	display: none;
}

.vv-pa-toast.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.vv-pa-toast__texte {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.vv-pa .vv-pa-toast__action {
	flex: 0 0 auto;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--vv-pa-dore-clair);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.vv-pa .vv-pa-toast__action:active {
	background-color: rgba(255, 255, 255, 0.1);
}

/* =====================================================================
   6. Animations
   ===================================================================== */

@keyframes vv-pa-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes vv-pa-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.vv-pa *,
	.vv-pa *::before,
	.vv-pa *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   7. Petits écrans et tablettes
   ===================================================================== */

@media (max-width: 359px) {
	.vv-pa-card__contenu {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px;
	}
	.vv-pa-card__media {
		width: 72px;
		height: 72px;
	}
	.vv-pa-btn--cta {
		min-width: 0;
		padding: 0 18px;
	}
	.vv-pa-cta__montant {
		font-size: 19px;
	}
}

@media (min-width: 600px) {
	.vv-pa-main {
		padding-left: 20px;
		padding-right: 20px;
	}
	.vv-pa-scroller {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
		scroll-padding-left: 20px;
	}
	.vv-pa-barre {
		padding-left: max(16px, calc((100% - 600px) / 2 + 16px));
		padding-right: max(16px, calc((100% - 600px) / 2 + 16px));
	}
	.vv-pa-cta {
		padding-left: max(20px, calc((100% - 600px) / 2 + 20px));
		padding-right: max(20px, calc((100% - 600px) / 2 + 20px));
	}
}