/*
 * Vape Wôlinak — effets visuels qu'Elementor ne gère pas nativement.
 * Les couleurs viennent des styles globaux d'Elementor (--e-global-color-*).
 */

/* ---------- Fumée de fond en mouvement (tout le site) ----------
 * Le calque couvre toute la hauteur de la page (il défile avec le contenu) ;
 * les nappes sont placées tous les 10 % via --top (voir functions.php). */
body { position: relative; }
.vpw-smoke {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.vpw-smoke__layer {
	position: absolute;
	top: var(--top, 0);
	left: -20vw;
	width: 140vw;
	height: 700px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: .35;
	mix-blend-mode: screen;
}
.vpw-smoke__layer--1 { background-image: url(img/fumee-1.webp?v=2); animation: vpw-drift-a 54s ease-in-out infinite alternate; }
.vpw-smoke__layer--2 { background-image: url(img/fumee-2.webp?v=2); animation: vpw-drift-b 68s ease-in-out infinite alternate; opacity: .3; }
.vpw-smoke__layer--3 { background-image: url(img/fumee-3.webp?v=2); animation: vpw-drift-c 81s ease-in-out infinite alternate; opacity: .4; }
/* Décalage des départs pour que les nappes ne bougent pas en même temps */
.vpw-smoke__layer:nth-child(4n+2) { animation-delay: -18s; }
.vpw-smoke__layer:nth-child(4n+3) { animation-delay: -36s; animation-direction: alternate-reverse; }
.vpw-smoke__layer:nth-child(4n)   { animation-delay: -50s; }

@keyframes vpw-drift-a { from { transform: translate3d(-12vw, 0, 0) scale(1); }     to { transform: translate3d(14vw, -40px, 0) scale(1.15); } }
@keyframes vpw-drift-b { from { transform: translate3d(15vw, 0, 0) scale(1.1); }    to { transform: translate3d(-12vw, 50px, 0) scale(.95); } }
@keyframes vpw-drift-c { from { transform: translate3d(0, 60px, 0) scale(.9); }     to { transform: translate3d(-18vw, -60px, 0) scale(1.2); } }

body > .elementor,
body > [data-elementor-type] {
	position: relative;
	z-index: 1;
}
body > [data-elementor-type="header"] { z-index: 10; }

/* ---------- Filet lumineux animé ----------
 * --vpw-page-accent : réglage de page Elementor (Style > Couleur d'accent VPW). */
.vpw-light-bar {
	--vpw-a: var(--vpw-page-accent, var(--e-global-color-accent));
	--vpw-d: color-mix(in srgb, var(--vpw-a) 55%, #000);
	height: 8px;
	width: 100%;
	background: linear-gradient(90deg,
		var(--vpw-d) 0%, var(--vpw-a) 20%, var(--e-global-color-vpwhalo) 32%,
		var(--vpw-a) 45%, var(--vpw-d) 60%, var(--vpw-a) 80%, var(--vpw-d) 100%);
	background-size: 250% 100%;
	box-shadow: 0 0 14px color-mix(in srgb, var(--vpw-a) 80%, transparent), 0 0 4px rgba(215, 238, 254, .9);
	animation: vpw-light 6s linear infinite;
}
@keyframes vpw-light { from { background-position: 0 0; } to { background-position: -250% 0; } }

/* ---------- En-tête : loupe dans le champ de recherche ---------- */
.vpw-search .e-search-form { position: relative; }
.vpw-search .e-search-submit {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.vpw-search .e-search-input-wrapper { width: 100%; }
.vpw-search .e-search-input { border-color: var(--vpw-page-accent, var(--e-global-color-accent)) !important; }
.vpw-search .e-search-input { transition: border-color .25s ease, box-shadow .25s ease; }
.vpw-search .e-search-input:focus {
	border-color: var(--e-global-color-primary) !important;
	box-shadow: 0 0 22px var(--e-global-color-vpwglow), inset 0 0 16px var(--e-global-color-vpwglow) !important;
}

/* ---------- Menus : menu déroulant mobile du menu principal ---------- */
.vpw-nav .elementor-nav-menu--dropdown { box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.vpw-nav--util .elementor-nav-menu { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1024px) {
	.vpw-nav--util .elementor-nav-menu { justify-content: center; margin-inline: auto; }
}

/* ---------- En-tête : survols néon (logo, icônes, menus) ----------
 * Logo (widget Image, classe vpw-logo) : halo + reflet qui traverse les lettres.
 * --vpw-logo-src vient de l'image du widget (functions.php), pour masquer le reflet à la forme du logo. */
.vpw-logo a {
	position: relative;
	display: inline-block;
	vertical-align: top;
	transition: filter .35s ease, transform .35s ease;
}
.vpw-logo img { display: block; }
.vpw-logo a::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 40%, var(--e-global-color-primary) 46%, var(--e-global-color-vpwturq) 50%, var(--e-global-color-primary) 54%, transparent 60%) 100% 0 / 300% 100% no-repeat;
	-webkit-mask: var(--vpw-logo-src, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
	mask: var(--vpw-logo-src, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
}
/* À l'arrivée sur la page : halo + reflet une seule fois, sans grossissement (le survol garde le sien). */
.vpw-logo a { animation: vpw-logo-halo 1.4s ease .3s; }
.vpw-logo a::after { animation: vpw-logo-reflet .9s ease .3s; }
@keyframes vpw-logo-halo {
	from, to { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
	40% { filter: drop-shadow(0 0 10px var(--e-global-color-vpwglow)) drop-shadow(0 0 25px var(--e-global-color-secondary)); }
}
@keyframes vpw-logo-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vpw-entete-icone .elementor-icon { transition: color .3s, filter .35s ease, transform .35s ease; }

/* Menus (classe vpw-nav) : le soulignement est le pointeur natif du widget (Souligné, animation Grossir). */
.vpw-nav .e--pointer-underline .elementor-item::after {
	background-image: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-vpwturq), var(--e-global-color-primary));
	background-size: 200% 100%;
	box-shadow: 0 0 8px var(--e-global-color-vpwglow);
	animation: vpw-soulignement 2.5s linear infinite;
}
@keyframes vpw-soulignement { to { background-position: 200% 0; } }
.vpw-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .highlighted, .elementor-item-active) {
	text-shadow: 0 0 12px var(--e-global-color-vpwglow);
}
.vpw-nav .elementor-nav-menu--main .elementor-item .sub-arrow svg { transition: transform .3s; }
.vpw-nav .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow svg { transform: rotate(180deg); }
.vpw-nav .elementor-nav-menu--main .sub-menu { animation: vpw-sous-menu .25s ease both; }
@keyframes vpw-sous-menu { from { opacity: 0; translate: 0 -8px; } }

@media (hover: hover) {
	.vpw-logo a:is(:hover, :focus-visible) {
		filter: drop-shadow(0 0 10px var(--e-global-color-vpwglow)) drop-shadow(0 0 25px var(--e-global-color-secondary));
		transform: scale(1.03);
	}
	.vpw-logo a:is(:hover, :focus-visible)::after { background-position: 0 0; transition: background-position .9s ease; }
	.vpw-entete-icone .elementor-icon:is(:hover, :focus-visible) {
		filter: drop-shadow(0 0 8px var(--e-global-color-vpwglow));
		transform: scale(1.1);
	}
}

/* Popup « Menu mobile » (879), ouvert par l'icône de l'en-tête en tablette et mobile.
 * Menus en mise en page « Déroulant » sans bouton bascule : toujours ouverts, sous-menus en accordéon.
 * Les sous-éléments prennent la typo « Menu » (le widget n'a qu'une typo pour tous les niveaux). */
.vpw-nav--modale .elementor-nav-menu--dropdown { box-shadow: none; }
.vpw-nav--modale .elementor-nav-menu--dropdown a.has-submenu { justify-content: space-between; }
.vpw-nav--modale .elementor-nav-menu--dropdown .sub-arrow svg { transition: transform .3s; }
.vpw-nav--modale .elementor-nav-menu--dropdown a.highlighted .sub-arrow svg { transform: rotate(180deg); }
.elementor-location-popup .vpw-nav--modale.elementor-widget-nav-menu .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
	border-inline-start-width: 20px;
	font-size: var(--e-global-typography-vpwmenu-font-size);
	line-height: var(--e-global-typography-vpwmenu-line-height);
}
.vpw-menu-boutons > .elementor-widget-button { flex-basis: 0; min-width: 0; }

/* ---------- Pied de page : logo dans sa fumée ----------
 * Le montage (1367×1210) déborde largement du logo : la fumée passe sur le formulaire
 * et sort de l'écran. Seule la zone du chef et de « VPW » reste cliquable (lien Accueil),
 * et le débordement horizontal est coupé sans couper la fumée en hauteur.
 * Elementor limite les widgets à la largeur du container (.elementor.elementor .e-con>.elementor-widget,
 * 0,4,0) : on remet la largeur réglée dans le widget. Le lien est en bloc, sinon (inline-block)
 * il prend la largeur intrinsèque de l'image, calculée d'après sizes="100vw" (= largeur de l'écran). */
.elementor-location-footer { overflow-x: clip; }
.elementor.elementor .e-con > .elementor-widget.vpw-pied-logo,
.e-con.e-con > .e-con-inner > .elementor-widget.vpw-accueil-chef { max-width: var(--container-widget-width); }
/* Elementor met les widgets absolus à z-index:1 (et n'écrit pas 0) : à 0, les colonnes
 * des coordonnées et de la carte, plus loin dans la page, repassent devant la fumée. */
.elementor-element.elementor-absolute.vpw-pied-logo,
.elementor-element.elementor-absolute.vpw-accueil-chef { z-index: 0; pointer-events: none; }
.elementor-widget-image.vpw-pied-logo a { display: block; outline: none; }
.vpw-pied-logo a::after {
	content: "";
	position: absolute;
	left: 40%;
	top: 63%;
	width: 28%;
	height: 32%;
	pointer-events: auto;
}
.vpw-pied-logo a:focus-visible::after { outline: 2px solid var(--e-global-color-text); outline-offset: 4px; }

/* ---------- Accueil : chef dans sa fumée (héros) ----------
 * Le montage (1958×1440) est un widget Image absolu (classe vpw-accueil-chef, réglages
 * communs avec le logo du pied de page ci-dessus ; le héros est « boxed », d'où le sélecteur
 * .e-con-inner pour la largeur) et non un fond : un fond serait coupé
 * en haut du héros, sous l'en-tête transparent. La fumée monte derrière l'en-tête
 * (z-index 10), sort par la gauche et par la droite sans défilement horizontal,
 * et s'arrête au bas du héros, sous le filet de la bande des statistiques. */
/* .e-con.vpw-heros : frontend.min.css d'Elementor (.e-con { overflow: var(--overflow) }) est chargé après ce fichier */
.e-con.vpw-heros { overflow-x: clip; clip-path: inset(-400px 0 0 0); }
/* Fondu du bord haut du montage (fumée opaque jusqu'au bord) : entre 1025 et 1300 px, l'en-tête
 * passe sur plusieurs lignes et ce bord sort de sous la barre du haut. À 1920, le fondu y reste caché. */
.vpw-accueil-chef img { -webkit-mask-image: linear-gradient(transparent, #000 8%); mask-image: linear-gradient(transparent, #000 8%); }
/* Nappes de fumée qui dérivent dans le héros, par-dessus le chef mais sous le texte et le bouton :
 * pseudo-éléments de .e-con-inner (non positionné), placés par rapport au héros. */
.e-con.vpw-heros > .e-con-inner > .e-con { z-index: 2; }
.e-con.vpw-heros > .e-con-inner::before,
.e-con.vpw-heros > .e-con-inner::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background: no-repeat center / contain;
	mix-blend-mode: screen;
}
.e-con.vpw-heros > .e-con-inner::before {
	left: -20%;
	bottom: -5%;
	width: 75%;
	aspect-ratio: 1600 / 860;
	background-image: url(img/fumee-1.webp?v=2);
	opacity: .55;
	animation: vpw-heros-fumee-a 32s ease-in-out infinite alternate;
}
.e-con.vpw-heros > .e-con-inner::after {
	left: -10%;
	top: 25%;
	width: 75%;
	aspect-ratio: 1800 / 968;
	background-image: url(img/fumee-3.webp?v=2);
	opacity: .45;
	animation: vpw-heros-fumee-b 28s ease-in-out -9s infinite alternate;
}
@keyframes vpw-heros-fumee-a {
	from { transform: translate3d(-8%, 0, 0) scale(1); }
	to   { transform: translate3d(18%, -12%, 0) scale(1.2); }
}
@keyframes vpw-heros-fumee-b {
	from { transform: translate3d(15%, 6%, 0) scale(1.1) scaleX(-1); }
	to   { transform: translate3d(-12%, -10%, 0) scale(.95) scaleX(-1); }
}
/* Mobile : le voile #00000073 du container reste sous le widget et n'assombrit que le dégradé ;
 * le chef garde sa luminosité (demande du client : il paraissait trop sombre avec brightness(.7)). */

/* ---------- Accueil : nappes de fumée (sections du W, du Blogue et de Vape Wôlinak) ----------
 * Widgets Image absolus (classe vpw-fumee, médias 899 et 900) placés en premier enfant de la
 * section (classe vpw-fumee-zone) : à z-index 0, ils passent sous le contenu qui suit (positionné)
 * mais au-dessus du fond et du voile de la section. Position, largeur, opacité, rotation et miroir
 * se règlent dans Elementor. Le débordement horizontal est coupé, pas le vertical. */
.e-con.vpw-fumee-zone { overflow-x: clip; }
.elementor.elementor .e-con > .elementor-widget.vpw-fumee,
.e-con.e-con > .e-con-inner > .elementor-widget.vpw-fumee { max-width: var(--container-widget-width); }
.elementor-element.elementor-absolute.vpw-fumee { z-index: 0; pointer-events: none; }
/* Lent va-et-vient, comme la fumée de fond, mais de faible amplitude pour que chaque nappe reste
 * à sa place. Animé sur l'image avec translate/scale (pas transform) : la rotation et le miroir
 * réglés dans Elementor (transform du widget) restent appliqués. Départs décalés. */
.vpw-fumee img { animation: vpw-fumee-a 26s ease-in-out infinite alternate; }
.vpw-fumee:nth-child(2) img { animation-name: vpw-fumee-b; animation-duration: 32s; animation-delay: -12s; }
.vpw-fumee:nth-child(3) img { animation-duration: 38s; animation-delay: -25s; animation-direction: alternate-reverse; }
@keyframes vpw-fumee-a { from { translate: -4% 0; scale: 1; }      to { translate: 4% -15px; scale: 1.08; } }
@keyframes vpw-fumee-b { from { translate: 3% 10px; scale: 1.06; } to { translate: -4% -10px; scale: .97; } }

/* ---------- W 3D qui pivote ---------- */
.vpw-wflip {
	position: relative;
	width: 100%;
	perspective: 1800px;
}
.vpw-wflip__inner {
	position: relative;
	display: grid;
	transform-style: preserve-3d;
	animation: vpw-wflip 14s cubic-bezier(.65, 0, .35, 1) infinite;
}
.vpw-wflip:hover .vpw-wflip__inner { animation-play-state: paused; }
.vpw-wflip__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.vpw-wflip__face--front { transform: rotateY(0deg); animation: vpw-wflip-front 14s linear infinite; }
.vpw-wflip__face--back { transform: rotateY(180deg); animation: vpw-wflip-back 14s linear infinite; }
.vpw-wflip:hover .vpw-wflip__face { animation-play-state: paused; }
/* Séries de produits en plus : jamais affichées en CSS, le W en 3D les lit pour les faire défiler */
.vpw-wflip__face--extra { visibility: hidden; }
.vpw-wflip__w {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 18px rgba(242, 12, 236, .75));
}
.vpw-wflip__products {
	position: relative;
	height: 0;
	padding-bottom: 42%; /* hauteur des produits proportionnelle au W */
	margin-bottom: -1px;
}
.vpw-wflip__slot {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2%;
	height: 100%;
	transform: translateX(-50%);
}
.vpw-wflip__slot img { display: block; min-width: 0; flex: 0 1 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; }
/* Produit lié à sa fiche : le lien ne doit pas changer la mise en page, l'image reste l'élément flex. */
.vpw-wflip__slot a { display: contents; }
.vpw-wflip__slot--1 { left: 11%; width: 16%; }
.vpw-wflip__slot--1 img { max-height: 78%; }
.vpw-wflip__slot--2 { left: 50%; width: 20%; }
.vpw-wflip__slot--3 { left: 88%; width: 24%; }
.vpw-wflip__slot--3 img { max-height: 90%; max-width: 48%; }
/* Produits choisis automatiquement (produits="auto") : un produit par branche, centré sur son dessus.
 * Chaque produit tient dans un cadre presque carré (17 % × 19 % de la largeur du W) : un produit haut et
 * mince (Geek Bar, Uwell) est limité par la hauteur, une boîte avec l'appareil par la largeur. */
.vpw-wflip--auto .vpw-wflip__products { padding-bottom: 19%; }
.vpw-wflip--auto .vpw-wflip__slot { width: 17%; }
.vpw-wflip--auto .vpw-wflip__slot img { max-width: 100%; max-height: 100%; }
.vpw-wflip--auto .vpw-wflip__slot--1 { left: 11.5%; }
.vpw-wflip--auto .vpw-wflip__slot--3 { left: 88.5%; }
.vpw-wflip__glow {
	height: 60px;
	margin: 10px 8% 0;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(242, 12, 236, .55) 0%, rgba(242, 12, 236, 0) 70%);
	filter: blur(8px);
}
/* Version WebGL (assets/vpw-w3d.js) : le canevas remplace la version CSS, qui reste en place, figée et
 * invisible, pour garder la mise en page et servir de repère (place du W, place des produits). */
.vpw-wflip--3d .vpw-wflip__inner,
.vpw-wflip--3d .vpw-wflip__face { animation: none; transform: none; opacity: 1; visibility: hidden; }
.vpw-wflip__scene {
	position: absolute;
	z-index: 1;
	max-width: none;
	pointer-events: none;
	filter: drop-shadow(0 0 18px rgba(242, 12, 236, .75));
}
/* Masque la face cachée quand le W est de profil (90° à 44 %, 270° à 94 %).
 * Filet de sécurité : Chrome ignore parfois backface-visibility (filtres, GPU). */
@keyframes vpw-wflip-front {
	0%, 43.9%   { opacity: 1; }
	44%, 93.9%  { opacity: 0; }
	94%, 100%   { opacity: 1; }
}
@keyframes vpw-wflip-back {
	0%, 43.9%   { opacity: 0; }
	44%, 93.9%  { opacity: 1; }
	94%, 100%   { opacity: 0; }
}
@keyframes vpw-wflip {
	0%, 38%   { transform: rotateY(0deg); }
	50%, 88%  { transform: rotateY(180deg); }
	100%      { transform: rotateY(360deg); }
}

/* ---------- Cartes produits vedettes (verre + survol) ----------
 * Aussi sur la carte produit de la boutique (Loop Item « Produit », classes vpw-pcard vpw-produit). */
.vpw-pcard {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
/* Survol (souris seulement) : bordure magenta et fond lumineux, comme les cartes de la liste des marques.
 * .vpw-pcard en double : passe devant la bordure et le dégradé posés par Elementor (0,4,0). */
@media (hover: hover) {
	.elementor .elementor-element.vpw-pcard.vpw-pcard:hover {
		border-color: var(--e-global-color-primary);
		background: radial-gradient(circle at 50% 30%, var(--e-global-color-vpwglow), #3A0A4ACC 70%);
		box-shadow: 0 0 22px var(--e-global-color-vpwglow), inset 0 0 16px var(--e-global-color-vpwglow);
	}
}
/* Fruits : cachés derrière le produit (--dx/--dy = départ vers son centre, attribut style
 * posé par Elementor), ils en sortent vers leur position au survol de la carte. */
.vpw-pcard .vpw-fx {
	opacity: 0;
	transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3);
	transition: opacity .3s ease, transform .7s cubic-bezier(.2, .9, .3, 1.15);
	pointer-events: none;
}
.vpw-pcard:hover .vpw-fx { opacity: 1; transform: none; }
.vpw-pcard .vpw-fx--late { transition-delay: .08s; }
.vpw-pcard .vpw-pcard__product { transition: transform .5s ease; }
.vpw-pcard:hover .vpw-pcard__product { transform: translateY(-8px); }
/* Sur écran tactile (pas de survol), les fruits sortent quand la carte arrive à l'écran
 * (classe is-vu posée par assets/vpw-deco.js) et restent affichés. */
@media (hover: none) {
	.vpw-pcard.is-vu .vpw-fx { opacity: 1; transform: none; }
	.vpw-pcard.is-vu .vpw-pcard__product { transform: translateY(-8px); }
}

/* ---------- Décorations saveur (inc/deco-saveurs.php, assets/vpw-deco.js) ----------
 * Mêmes fruits et même fumée que les cartes de l'Accueil, posés automatiquement dans l'image
 * du produit (carte de la boutique, fiche de produit). Position (--x/--y), taille (--w) et rotation (--r) :
 * en ligne, tirées au hasard par le PHP. Les images partent toutes du centre (left/top 50 %) vers --x/--y.
 * Fumée : img/fumee-saveur.webp (fumée de l'Accueil en blanc), teinte --vpw-deco-couleur.
 * Aussi la fumée derrière les cartes de marques. */
.vpw-produit__image,
.vpw-fiche__image { position: relative; }
.vpw-produit__image > a,
.vpw-fiche__image > a,
.vpw-fiche__image > img { position: relative; z-index: 1; display: block; transition: transform .7s cubic-bezier(.2, .8, .3, 1); }
.vpw-deco {
	--vpw-deco-taille: 1;
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.vpw-deco .vpw-fx {
	position: absolute;
	z-index: 0;
	display: block;
	width: calc(var(--w) * var(--vpw-deco-taille));
	left: 50%;
	top: 50%;
	margin: calc(var(--w) * var(--vpw-deco-taille) * -.5) 0 0 calc(var(--w) * var(--vpw-deco-taille) * -.5);
	opacity: 0;
	transform: scale(.3);
	transition: opacity .3s ease, transform .7s cubic-bezier(.2, .9, .3, 1.15), left .7s cubic-bezier(.2, .9, .3, 1.15), top .7s cubic-bezier(.2, .9, .3, 1.15);
}
.vpw-deco .vpw-fx--devant { z-index: 2; }
.vpw-deco .vpw-fx img { display: block; width: 100%; height: auto; transform: rotate(var(--r, 0deg)); }
/* La hauteur fixe de l'image réglée dans le widget Image (fiche : 480 px) s'applique à toutes ses
 * images, fruits compris : ils devenaient très hauts, dessinés au milieu, donc plus bas, sur le produit. */
.elementor-element.elementor-widget-image .vpw-deco .vpw-fx img { width: 100%; height: auto; max-height: none; object-fit: fill; }

/* Fumée : texture blanche + couleur de la saveur (multiply, dans son propre calque).
 * Elle ne se déplace pas : elle grossit en apparaissant, depuis son centre, posé sur le centre de
 * l'image du produit (un peu plus haut : la fumée monte). Centrage dans « translate » et non dans
 * « transform » : transform s'applique avant scale et décalerait le point de départ. */
.vpw-deco__fumee {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: min(100%, 380px);
	translate: -50% -58%;
	aspect-ratio: 420 / 425;
	isolation: isolate;
	background: url("img/fumee-saveur.webp") center / contain no-repeat;
	opacity: 0;
	transform: rotate(var(--fr, 0deg)) scale(var(--fs, 1), 1);
	scale: .6;
	transition: opacity .5s ease, scale .9s cubic-bezier(.2, .8, .3, 1);
}
.vpw-deco__fumee::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vpw-deco-couleur, var(--e-global-color-primary));
	-webkit-mask: url("img/fumee-saveur.webp") center / contain no-repeat;
	mask: url("img/fumee-saveur.webp") center / contain no-repeat;
	mix-blend-mode: multiply;
}

/* Activation : survol (souris), arrivée à l'écran (tactile), affichage (fiche de produit) */
@media (hover: hover) {
	.vpw-pcard:hover .vpw-deco .vpw-fx { left: var(--x); top: var(--y); opacity: 1; transform: none; }
	/* Montée et agrandissement repris par assets/vpw-deco.js (fruits écartés du produit) : changer les deux. */
	.vpw-pcard:hover .vpw-produit__image > a { transform: translateY(-10px) scale(1.06); }
	.vpw-pcard:hover .vpw-deco__fumee,
	.vape-wolinak-brand-list-link:hover .vpw-deco__fumee { opacity: .7; scale: 1; }
}
@media (hover: none) {
	.vpw-pcard.is-vu .vpw-deco .vpw-fx { left: var(--x); top: var(--y); opacity: 1; transform: none; }
	.vpw-pcard.is-vu .vpw-produit__image > a { transform: translateY(-10px) scale(1.06); }
	.vpw-pcard.is-vu .vpw-deco__fumee,
	.vape-wolinak-brand-list-link.is-vu .vpw-deco__fumee { opacity: .7; scale: 1; }
}
.vpw-deco--auto.is-vu .vpw-fx { left: var(--x); top: var(--y); opacity: 1; transform: none; }
.vpw-deco--auto.is-vu .vpw-fx img { animation: vpw-flotte 5s ease-in-out 1s infinite alternate; }
.vpw-deco--auto.is-vu .vpw-fx:nth-child(odd) img { animation-delay: 2.2s; }
.vpw-deco--auto.is-vu .vpw-deco__fumee { opacity: .85; scale: 1; }
@keyframes vpw-flotte {
	to { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 5deg)); }
}
/* Fiche de produit : image plus grande, fruits et fumée plus grands. Les fruits sont autour du
 * produit (rayon plus grand dans le PHP) ; derrière, sauf ceux du bas, comme sur les cartes. */
.vpw-fiche__image .vpw-deco { --vpw-deco-taille: 1.6; }
.vpw-fiche__image .vpw-deco__fumee { width: min(110%, 620px); }
/* Survol de l'image (souris) : le produit monte et grossit, les fruits s'écartent (--hx/--hy)
 * et grossissent, la fumée s'intensifie. */
@media (hover: hover) {
	.vpw-fiche__image:hover > a,
	.vpw-fiche__image:hover > img { transform: translateY(-12px) scale(1.05); }
	.vpw-fiche__image:hover .vpw-deco--auto.is-vu .vpw-fx { left: var(--hx, var(--x)); top: var(--hy, var(--y)); transform: scale(1.15); }
	.vpw-fiche__image:hover .vpw-deco--auto.is-vu .vpw-deco__fumee { opacity: 1; scale: 1.1; }
}

/* Effets saveur : images qui ne sont pas des fruits (inc/deco-saveurs.php, vpw_deco_effets).
 * Bonbons : un seul groupe, plus grand, au-dessus du produit, sans rotation (span.vpw-fx--groupe : sort
 * comme les fruits, mais assets/vpw-deco.js ne le déplace pas).
 * Soda : éclaboussure derrière le produit, plus large que lui pour en dépasser (les photos non détourées
 * la cacheraient), et bulles devant (transparentes), qui apparaissent avec la fumée.
 * Les bulles sont en deux couches décalées qui montent et s'effacent à tour de rôle. */
.vpw-deco__effet {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	translate: -50% -55%;
	opacity: 0;
	scale: .5;
	transition: opacity .5s ease, scale .8s cubic-bezier(.2, .9, .3, 1.15);
}
.vpw-deco .vpw-deco__effet img,
.elementor-element.elementor-widget-image .vpw-deco .vpw-deco__effet img { display: block; width: 100%; height: auto; max-height: none; object-fit: fill; }
.vpw-deco__effet--eclabousse { width: min(125%, calc(340px * var(--vpw-deco-taille))); }
.vpw-deco__effet--bulles { z-index: 2; width: min(75%, calc(230px * var(--vpw-deco-taille))); translate: -50% -62%; }
.vpw-deco .vpw-deco__effet--bulles img + img { position: absolute; inset: 0; }
@keyframes vpw-bulles {
	0%   { transform: translateY(12%); opacity: 0; }
	30%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { transform: translateY(-12%); opacity: 0; }
}
@media (hover: hover) {
	.vpw-pcard:hover .vpw-deco__effet { opacity: .9; scale: 1; }
	.vpw-pcard:hover .vpw-deco__effet--bulles img { animation: vpw-bulles 4s linear infinite; }
	.vpw-pcard:hover .vpw-deco__effet--bulles img + img { animation-delay: -2s; }
}
@media (hover: none) {
	.vpw-pcard.is-vu .vpw-deco__effet { opacity: .9; scale: 1; }
	.vpw-pcard.is-vu .vpw-deco__effet--bulles img { animation: vpw-bulles 4s linear infinite; }
	.vpw-pcard.is-vu .vpw-deco__effet--bulles img + img { animation-delay: -2s; }
}
.vpw-deco--auto.is-vu .vpw-deco__effet { opacity: .9; scale: 1; }
.vpw-deco--auto.is-vu .vpw-deco__effet--bulles img { animation: vpw-bulles 4s linear infinite; }
.vpw-deco--auto.is-vu .vpw-deco__effet--bulles img + img { animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) {
	.vpw-deco__effet { scale: 1; transition: opacity .3s ease; }
	.vpw-deco .vpw-deco__effet--bulles img { animation: none !important; }
	.vpw-deco .vpw-deco__effet--bulles img + img { display: none; }
}

/* Cartes de marques : voir la section « Liste des marques » */

@media (max-width: 767px) {
	.vpw-deco { --vpw-deco-taille: .75; }
	.vpw-fiche__image .vpw-deco { --vpw-deco-taille: 1.1; }
}
@media (prefers-reduced-motion: reduce) {
	.vpw-deco .vpw-fx { left: var(--x); top: var(--y); transform: none; transition: opacity .3s ease; }
	.vpw-deco--auto.is-vu .vpw-fx img { animation: none; }
	.vpw-deco__fumee { scale: 1; }
	.vpw-fiche__image:hover > a,
	.vpw-fiche__image:hover > img { transform: none; }
	.vpw-fiche__image:hover .vpw-deco--auto.is-vu .vpw-fx { left: var(--x); top: var(--y); transform: none; }
	.vpw-fiche__image:hover .vpw-deco--auto.is-vu .vpw-deco__fumee { scale: 1; }
}

/* Faux sélecteurs (seront remplacés par WooCommerce) */
.vpw-qty .elementor-heading-title { letter-spacing: .6em; }

/* Carrousel : garder visibles les produits, la fumée et les fruits qui dépassent en haut de la carte
 * (le carrousel coupe ce qui sort de sa boîte). Marge négative : la section garde son espacement. */
.vpw-carousel .swiper { padding-top: 60px; margin-top: -50px; }
/* Flèches « Extérieur » : Elementor ne réserve que 30 px par côté (100% - 60px), quelle que soit
 * la taille des flèches (46 px ici) ; on réserve taille de la flèche + écart. */
.vpw-carousel { --vpw-fleche-ecart: 20px; }
.elementor-element.vpw-carousel.elementor-arrows-position-outside .swiper {
	/* --e-n-carousel-arrow-size : Carrousel imbriqué ; --arrow-size : Carrousel de boucle (produits vedettes de l'Accueil) */
	width: calc(100% - 2 * (var(--e-n-carousel-arrow-size, var(--arrow-size, 25px)) + var(--vpw-fleche-ecart)));
}
@media (max-width: 1024px) { .vpw-carousel { --vpw-fleche-ecart: 15px; } }
@media (max-width: 767px)  { .vpw-carousel { --vpw-fleche-ecart: 10px; } }

/* ---------- Accessibilité : réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
	.vpw-smoke__layer,
	.vpw-fumee img,
	.e-con.vpw-heros > .e-con-inner::before,
	.e-con.vpw-heros > .e-con-inner::after,
	.vpw-light-bar,
	.vpw-wflip__inner,
	.vpw-wflip__face--front,
	.vpw-nav .elementor-nav-menu--main .sub-menu,
	.vpw-nav .e--pointer-underline .elementor-item::after,
	.vpw-logo a { animation: none !important; }
	.vpw-wflip__face--back { display: none; }
	.vpw-logo a,
	.vpw-logo a::after,
	.vpw-entete-icone .elementor-icon { transition: none !important; transform: none !important; }
	.vpw-logo a::after { display: none; }
}
@media (max-width: 767px) {
	.vpw-smoke__layer { width: 260vw; left: -80vw; }
}

/* ---------- Bouton « Clients VIP » : mention sous le texte ----------
 * <span class="vpw-vip-mention"> dans le texte du widget Bouton. Hors flux, juste sous le texte : elle loge
 * dans le padding du bas du bouton (25 / 19 / 15 px) et n'en change pas la hauteur. */
/* Le texte et sa mention remontent un peu (6 / 5 / 4 px) pour dégager le bas ; l'icône reste centrée. */
.elementor-button-text:has(> .vpw-vip-mention) { position: relative; translate: 0 -.16em; }
.vpw-vip-mention {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 5px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: max(.36em, 10px);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-shadow: none;
	white-space: nowrap;
}

/* ---------- Mots en couleur d'accent dans les éditeurs de texte ---------- */
.vpw-accent { color: var(--e-global-color-primary); }

/* ---------- Carrousel : point actif en magenta ---------- */
.vpw-carousel .swiper-pagination-bullet { opacity: 1; }
.vpw-carousel .swiper-pagination-bullet-active { background: var(--e-global-color-primary); box-shadow: 0 0 8px var(--e-global-color-primary); }
.vpw-nowrap .elementor-heading-title { white-space: nowrap; }

/* ---------- Boutons : texte centré verticalement avec la flèche ----------
 * Elementor étire le texte à la hauteur de l'icône ; on centre les deux. */
.elementor-button .elementor-button-content-wrapper { align-items: center; }

/* ---------- Boucles d'articles (Loop Grid) ----------
 * Les colonnes de la grille ne rétrécissent pas sous la largeur minimale du contenu
 * (débordement en tablette) : on autorise les cartes à rétrécir. */
.elementor-widget-loop-grid .e-loop-item { min-width: 0; }
/* Pagination : page active avec halo, Précédent/Suivant désactivés atténués */
.elementor-pagination .page-numbers.current { text-shadow: 0 0 10px var(--e-global-color-primary); }
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next { opacity: .35; }

/* ---------- Bouton « Retour au blogue » : flèche vers la gauche ---------- */
.vpw-btn-retour .elementor-button-icon svg { transform: scaleX(-1); }

/* ---------- Accordéon FAQ : bulle néon avec pointe à droite ----------
 * Widget Accordéon imbriqué avec la classe vpw-faq. La bulle entière (question + réponse)
 * est le <details> ; la pointe est faite de deux trapèzes (bordure magenta, puis fond noir
 * qui ouvre la bordure à la jonction). Le halo vient d'un drop-shadow sur la bulle,
 * qui suit aussi la forme de la pointe. Taille fixe : pas de déformation à l'ouverture. */
.elementor-widget-n-accordion.vpw-faq {
	--vpw-faq-border: 4px;
	--vpw-faq-tab-w: 54px;   /* saillie de la pointe */
	--vpw-faq-tab-h: 66px;
	--vpw-faq-tab-top: 21px; /* sous la bordure du haut */
	--vpw-faq-pill-w: 84px;
	--vpw-faq-pill-h: 63px;
	--n-accordion-border-width: 0px;
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item {
	margin-inline-end: var(--vpw-faq-tab-w);
	border: var(--vpw-faq-border) solid var(--e-global-color-primary);
	border-radius: 30px 20px 30px 30px;
	background: linear-gradient(90deg, var(--e-global-color-vpwnuit) 0%, var(--e-global-color-vpwnoir) 70%);
	box-shadow: inset 0 0 12px var(--e-global-color-vpwglow);
	filter: drop-shadow(0 0 6px var(--e-global-color-vpwglow));
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item::before,
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item::after {
	content: "";
	position: absolute;
	top: var(--vpw-faq-tab-top);
	left: 100%;
	width: calc(var(--vpw-faq-tab-w) + var(--vpw-faq-border));
	height: var(--vpw-faq-tab-h);
	pointer-events: none;
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item::before {
	background: var(--e-global-color-primary);
	clip-path: polygon(0 0, 100% 17%, 100% 83%, 0 100%);
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item::after {
	width: var(--vpw-faq-tab-w);
	background: var(--e-global-color-vpwnoir);
	clip-path: polygon(0 var(--vpw-faq-border), 100% calc(17% + var(--vpw-faq-border)), 100% calc(83% - var(--vpw-faq-border)), 0 calc(100% - var(--vpw-faq-border)));
}
/* Pendant l'animation d'ouverture/fermeture, le script d'Elementor met overflow:hidden en ligne,
 * ce qui coupait la pointe. On ne coupe que le bas (pour cacher la réponse qui dépasse) :
 * la pointe et le halo restent visibles sur les autres côtés. */
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item[style*="overflow"] {
	overflow: visible !important;
	clip-path: inset(-30px calc(-1 * var(--vpw-faq-tab-w) - 30px) 0 -30px);
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item > .e-con { border: 0; }
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item-title { border: 0; }
/* Pastille autour du + / − */
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item-title-icon {
	flex: none;
	justify-content: center;
	width: var(--vpw-faq-pill-w);
	height: var(--vpw-faq-pill-h);
	border: var(--vpw-faq-border) solid var(--e-global-color-primary);
	border-radius: 999px;
	box-shadow: 0 0 8px var(--e-global-color-vpwglow), inset 0 0 8px var(--e-global-color-vpwglow);
}
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item-title-icon span { align-items: center; }
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item-title-icon svg { filter: drop-shadow(0 0 4px var(--e-global-color-primary)); }
.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item-title:focus-visible { outline: 2px solid var(--e-global-color-text); outline-offset: 4px; border-radius: 20px; }
@media (max-width: 1024px) {
	.elementor-widget-n-accordion.vpw-faq { --vpw-faq-tab-w: 42px; --vpw-faq-tab-h: 54px; --vpw-faq-tab-top: 16px; --vpw-faq-pill-w: 70px; --vpw-faq-pill-h: 52px; }
}
@media (max-width: 767px) {
	.elementor-widget-n-accordion.vpw-faq { --vpw-faq-border: 3px; --vpw-faq-tab-w: 24px; --vpw-faq-tab-h: 40px; --vpw-faq-tab-top: 12px; --vpw-faq-pill-w: 48px; --vpw-faq-pill-h: 36px; }
	.elementor-widget-n-accordion.vpw-faq .e-n-accordion-item { border-radius: 22px 16px 22px 22px; }
}

/* ---------- Liste des marques (widget « Vape Wolinak - Liste de marques ») ----------
 * Le plugin est le même qu'en prod : on garde ses contrôles (colonnes, écart, typo du nom)
 * et on dessine ici la carte de verre néon de la maquette, autour de l'image seulement.
 * Même verre et même halo que les cartes produits vedettes (.vpw-pcard).
 * Les sélecteurs passent par -item pour l'emporter sur la hauteur fixe du contrôle « Image > Hauteur ». */
.elementor-widget-vape-wolinak-brand-list {
	--vpw-brand-gap-name: 25px;
	--vpw-brand-row-gap: 45px;
	--vpw-brand-radius: 45px 45px 8px 8px;
}
.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list { row-gap: var(--vpw-brand-row-gap); }
.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item { overflow: visible; }
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link {
	display: flex;
	flex-direction: column;
	gap: var(--vpw-brand-gap-name);
}
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link .vape-wolinak-brand-list-image {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 19 / 20;
	padding: var(--vpw-brand-pad, 12px);
	object-fit: contain;
	object-position: center bottom;
	background: linear-gradient(180deg, #262A4ECC, #1A1D3899);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 4px solid var(--e-global-color-vpwturq);
	border-radius: var(--vpw-brand-radius);
	box-shadow: 0 0 12px rgba(111, 195, 214, .55);
	transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
/* Survol (souris seulement) : la carte passe au magenta, comme Elfbar Moonnight dans la maquette */
@media (hover: hover) {
	.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:hover .vape-wolinak-brand-list-image {
		border-color: var(--e-global-color-primary);
		background: radial-gradient(circle at 50% 45%, var(--e-global-color-vpwglow), #3A0A4ACC 70%);
		box-shadow: 0 0 22px var(--e-global-color-vpwglow), inset 0 0 16px var(--e-global-color-vpwglow);
	}
}
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:focus-visible { outline: none; }
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:focus-visible .vape-wolinak-brand-list-image {
	outline: 2px solid var(--e-global-color-text);
	outline-offset: 4px;
}

/* Fumée de la saveur et produit qui grossit (assets/vpw-deco.js ajoute .vpw-deco--marque dans le lien).
 * La carte est refaite en calques, l'image ne garde que le produit (elle peut grossir, scale) :
 *   fumée (déborde, derrière la carte) < .vpw-deco__boite (fond, magenta au survol, même fumée
 *   coupée à la carte, bordure en ::after) < image.
 * Les deux fumées sont identiques et superposées : elle paraît sortir de la carte, sous la bordure.
 * Fruits et glaçons (span.vpw-fx) : sur le bord de la carte, comme sur les cartes produits.
 * Calque posé par inc/deco-saveurs.php (sinon par le JS, sans fruits) ; sans calque, l'image garde son fond et sa bordure. */
.vape-wolinak-brand-list-link { position: relative; }
.vape-wolinak-brand-list-link > picture,
.vape-wolinak-brand-list-link > img { position: relative; z-index: 1; }
.vpw-deco--marque { bottom: auto; aspect-ratio: 19 / 20; }
.vpw-deco__boite {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--vpw-brand-radius);
	background: linear-gradient(180deg, #262A4ECC, #1A1D3899);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 12px rgba(111, 195, 214, .55);
	transition: box-shadow .35s ease;
}
.vpw-deco__boite::before,
.vpw-deco__boite::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.vpw-deco__boite::before {
	background: radial-gradient(circle at 50% 45%, var(--e-global-color-vpwglow), #3A0A4ACC 70%);
	opacity: 0;
	transition: opacity .35s ease;
}
.vpw-deco__boite::after {
	z-index: 1;
	border: 4px solid var(--e-global-color-vpwturq);
	transition: border-color .35s ease, box-shadow .35s ease;
}
.vpw-deco--marque .vpw-deco__fumee { width: 120%; translate: -50% -62%; }
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:has(> .vpw-deco--marque) .vape-wolinak-brand-list-image,
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:has(> .vpw-deco--marque):hover .vape-wolinak-brand-list-image {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: transparent;
	box-shadow: none;
}
.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link .vape-wolinak-brand-list-image { transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease, transform .7s cubic-bezier(.2, .8, .3, 1); }
/* Survol : carte magenta, produit plus gros (sans monter) */
@media (hover: hover) {
	.vape-wolinak-brand-list-link:hover .vpw-deco__boite { box-shadow: 0 0 22px var(--e-global-color-vpwglow); }
	.vape-wolinak-brand-list-link:hover .vpw-deco__boite::before { opacity: 1; }
	.vape-wolinak-brand-list-link:hover .vpw-deco .vpw-fx { left: var(--x); top: var(--y); opacity: 1; transform: none; }
	.vape-wolinak-brand-list-link:hover .vpw-deco__boite::after { border-color: var(--e-global-color-primary); box-shadow: inset 0 0 16px var(--e-global-color-vpwglow); }
	.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link:hover .vape-wolinak-brand-list-image { transform: scale(1.15); }
}
@media (hover: none) {
	.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link.is-vu .vape-wolinak-brand-list-image { transform: scale(1.15); }
	.vape-wolinak-brand-list-link.is-vu .vpw-deco .vpw-fx { left: var(--x); top: var(--y); opacity: 1; transform: none; }
}
@media (max-width: 767px) {
	.vpw-deco__boite::after { border-width: 3px; }
}
@media (max-width: 1024px) {
	.elementor-widget-vape-wolinak-brand-list { --vpw-brand-gap-name: 20px; --vpw-brand-row-gap: 35px; --vpw-brand-radius: 40px 40px 8px 8px; }
}
@media (max-width: 767px) {
	.elementor-widget-vape-wolinak-brand-list { --vpw-brand-gap-name: 12px; --vpw-brand-row-gap: 25px; --vpw-brand-radius: 30px 30px 6px 6px; }
	.elementor-widget-vape-wolinak-brand-list { --vpw-brand-pad: 8px; }
	.elementor-element.elementor-widget-vape-wolinak-brand-list .vape-wolinak-brand-list-item .vape-wolinak-brand-list-link .vape-wolinak-brand-list-image { border-width: 3px; }
}

/* ---------- Boutique (modèle d'archive « Boutique », Loop Item « Produit ») ----------
 * Le Loop Grid est dans une colonne flex : sans min-width:0, la grille déborde à droite. */
.vpw-boutique > .e-con-inner > .e-con:last-child,
.vpw-boutique .elementor-widget-loop-grid { min-width: 0; }

/* Couleurs des filtres YITH : globaux du Kit (YITH les définit sur :root, body l'emporte) */
body.yith-wcan-pro {
	--yith-wcan-filters_colors_background: transparent;
	--yith-wcan-filters_colors_titles: var(--e-global-color-vpwhalo);
	--yith-wcan-filters_colors_accent: var(--e-global-color-primary);
	--yith-wcan-anchors_style_text: var(--e-global-color-text);
	--yith-wcan-anchors_style_text_hover: var(--e-global-color-vpwturq);
	--yith-wcan-anchors_style_text_active: var(--e-global-color-text);
	--vpw-filtre-case: 38px;
	--vpw-filtre-titre-w: 290px;
}
.vpw-filtres .yith-wcan-filters { margin: 0; padding: 0; background: transparent; }
.vpw-filtres .yith-wcan-filters .yith-wcan-filter { margin: 0 0 80px; }
.vpw-filtres .yith-wcan-filters .yith-wcan-filter:last-child { margin-bottom: 0; }
/* Titre d'un filtre : pastille néon */
.yith-wcan-filters .yith-wcan-filter .filter-title {
	box-sizing: border-box;
	width: var(--vpw-filtre-titre-w);
	max-width: 100%;
	margin: 0 0 40px;
	padding: 14px 20px;
	border: 4px solid var(--e-global-color-text);
	border-radius: 999px;
	box-shadow: 0 0 12px rgba(111, 195, 214, .8), inset 0 0 10px rgba(111, 195, 214, .5);
	color: var(--e-global-color-vpwhalo);
	font-family: var(--e-global-typography-vpwsous-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwsous-font-size);
	font-weight: var(--e-global-typography-vpwsous-font-weight);
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}
.yith-wcan-filters .yith-wcan-filter .filter-content fieldset { margin: 0; padding: 0; border: 0; }
.yith-wcan-filters .yith-wcan-filter .filter-content legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.yith-wcan-filters .yith-wcan-filter .filter-items { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item { margin: 0; padding: 0; }
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item label {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	cursor: pointer;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item label a,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > label > a {
	color: var(--yith-wcan-anchors_style_text);
	font-family: var(--e-global-typography-vpwfaqr-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwfaqr-font-size);
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	text-decoration: none;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item label a:hover { color: var(--yith-wcan-anchors_style_text_hover); }
/* Case à cocher : cercle néon, magenta quand elle est cochée */
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: none;
	width: var(--vpw-filtre-case);
	min-width: 0;
	padding: 0;
	height: var(--vpw-filtre-case);
	margin: 0;
	border: 4px solid var(--e-global-color-text);
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 8px rgba(111, 195, 214, .8);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item input[type="checkbox"]:checked {
	border-color: var(--e-global-color-primary);
	background: var(--e-global-color-primary);
	box-shadow: 0 0 14px var(--e-global-color-vpwglow);
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--e-global-color-text); outline-offset: 3px; }
.yith-wcan-filters .yith-wcan-filter .filter-content .show-more {
	display: inline-block;
	margin: 25px 0 0 calc(var(--vpw-filtre-case) + 22px);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.yith-wcan-filters .yith-wcan-filter .filter-content .show-more:hover { color: var(--e-global-color-text); }
/* Curseur de prix (ion.rangeSlider) : piste blanche, barre et poignées magenta, valeurs sous la piste */
.yith-wcan-filters .filter-price-slider .irs { font-family: var(--e-global-typography-text-font-family), sans-serif; }
.yith-wcan-filters .filter-price-slider .irs--round .irs-line { height: 4px; background: var(--e-global-color-text); }
.yith-wcan-filters .filter-price-slider .irs--round .irs-bar { height: 4px; background: var(--e-global-color-primary); }
.yith-wcan-filters .filter-price-slider .irs--round .irs-handle {
	width: 26px; height: 26px; border: 0;
	background: var(--e-global-color-primary);
	box-shadow: 0 0 12px var(--e-global-color-vpwglow);
}
.yith-wcan-filters .filter-price-slider .irs--round .irs-from,
.yith-wcan-filters .filter-price-slider .irs--round .irs-to,
.yith-wcan-filters .filter-price-slider .irs--round .irs-single,
.yith-wcan-filters .filter-price-slider .irs--round .irs-min,
.yith-wcan-filters .filter-price-slider .irs--round .irs-max { background: transparent; color: var(--e-global-color-text); font-size: 15px; }
.yith-wcan-filters .filter-price-slider .irs--round .irs-from:before,
.yith-wcan-filters .filter-price-slider .irs--round .irs-to:before,
.yith-wcan-filters .filter-price-slider .irs--round .irs-single:before { display: none; }
.yith-wcan-filters .yith-wcan-reset-filters { display: none; }

/* Bouton « Filtres » (tablette et mobile) : même pastille que les titres de filtres */
.vpw-filtres-bouton .yith-wcan-filters-opener {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 25px;
	border: 3px solid var(--e-global-color-text);
	border-radius: 999px;
	background: transparent;
	box-shadow: 0 0 10px rgba(111, 195, 214, .8);
	color: var(--e-global-color-vpwhalo);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	text-transform: uppercase;
}
/* Icône de YITH (SVG sombre en image de fond) passée en blanc */
.vpw-filtres-bouton .yith-wcan-filters-opener i.filter-icon { filter: brightness(0) invert(1); }
/* Tablette et mobile : la colonne des filtres sort du flux sans être masquée.
 * La fenêtre de YITH est le même élément que les filtres du bureau (position: fixed) :
 * si la colonne était en display:none (masquage Elementor), la fenêtre resterait invisible
 * et seul le voile sombre apparaîtrait. */
@media (max-width: 1024px) {
	.vpw-boutique .vpw-filtres { position: absolute; width: 0; height: 0; min-height: 0; padding: 0; overflow: visible; }
}
/* Chaque document Elementor est à z-index 1 (au-dessus de la fumée) : la fenêtre, dans le modèle
 * « Boutique », passerait sous l'en-tête (10) et sous le voile de YITH (body:after, 1001).
 * Pendant que la fenêtre est ouverte, le modèle passe au-dessus. */
body.yith-wcan-preset-modal-open > [data-elementor-type="product-archive"] { z-index: 1002; }
/* Fenêtre des filtres (tablette et mobile) : fond de nuit, en-tête et bouton aux couleurs du site */
.vpw-filtres .yith-wcan-filters.filters-modal { padding: 0; background: var(--e-global-color-vpwnuit); }
.yith-wcan-filters.filters-modal h3 {
	background: var(--e-global-color-vpwviol);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	text-transform: uppercase;
}
/* Croix de fermeture (« × » en texte) : plus grande, zone tactile de 48 px centrée dans l'en-tête de 60 px */
.yith-wcan-filters.filters-modal .close-button {
	display: flex; align-items: center; justify-content: center;
	top: 6px; right: 10px; width: 48px; height: 48px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 44px; line-height: 1;
}
.yith-wcan-filters.filters-modal .close-button:hover,
.yith-wcan-filters.filters-modal .close-button:focus-visible { color: var(--e-global-color-primary); }
.yith-wcan-filters.filters-modal .filters-container { box-sizing: border-box; padding: 30px 20px; }
.vpw-filtres .yith-wcan-filters.filters-modal .yith-wcan-filter { margin: 0 0 45px; padding: 0; border: 0; }
.yith-wcan-filters.filters-modal .yith-wcan-filter .filter-title { width: 100%; margin: 0; }
/* Flèche d'accordéon de YITH (SVG sombre) : blanche, un peu plus grande, à l'intérieur de la pastille */
.yith-wcan-filters.filters-modal .yith-wcan-filter .filter-title.collapsable:after {
	right: 25px; width: 14px; height: 14px; top: calc(50% - 7px);
	filter: brightness(0) invert(1);
}
.yith-wcan-filters.filters-modal .yith-wcan-filter .filter-content { margin-top: 25px; }
.yith-wcan-filters.filters-modal .main-modal-button,
.yith-wcan-filters.filters-modal .main-modal-button:hover {
	border: 0; border-radius: 0; box-shadow: none;
	background: var(--e-global-color-primary); color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
}

/* Carte produit */
.vpw-produit .vpw-produit__image img { width: 100%; }
.vpw-produit .elementor-heading-title a { color: inherit; }
.vpw-extrait {
	margin: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: 1.5;
}

/* Bloc d'achat [vpw_ajout_panier] : prix | option / quantité | bouton */
.vpw-achat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 20px 25px;
	margin: 0;
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
}
.vpw-achat__prix {
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	white-space: nowrap;
}
.vpw-achat__prix del { margin-right: 6px; color: var(--e-global-color-text); opacity: .6; font-size: .8em; }
.vpw-achat__prix ins { text-decoration: none; }
.vpw-achat__options { display: flex; flex-direction: column; gap: 8px; justify-self: end; width: 100%; max-width: 215px; }
.vpw-achat__option {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	padding: 0 34px 0 18px;
	border: 3px solid var(--e-global-color-primary);
	border-radius: 0;
	background: var(--e-global-color-vpwnoir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 9px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwpeti-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
	cursor: pointer;
}
.vpw-achat__option:focus-visible { outline: 2px solid var(--e-global-color-text); outline-offset: 2px; }
.vpw-achat__option option { background: var(--e-global-color-vpwnoir); color: var(--e-global-color-text); }
/* Préfixe .vpw-achat : les styles de bouton et de champ du Kit (.elementor-kit-6 button / input) sont plus spécifiques */
.vpw-achat .vpw-achat__qte,
.vpw-achat .vpw-achat__bouton {
	box-sizing: border-box;
	height: 48px;
	border: 3px solid var(--e-global-color-text);
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(111, 195, 214, .7);
	color: var(--e-global-color-text);
}
.vpw-achat .vpw-achat__qte { display: inline-flex; align-items: center; justify-content: space-between; width: 125px; padding: 0 10px; }
.vpw-achat .vpw-achat__qte button,
.vpw-achat .vpw-achat__qte button:hover,
.vpw-achat .vpw-achat__qte button:focus {
	width: 28px; height: 100%; padding: 0; border: 0; border-radius: 0;
	background: transparent; color: inherit; box-shadow: none;
	font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 20px; line-height: 1; cursor: pointer;
}
.vpw-achat .vpw-achat__qte input[type="number"][name="quantity"] {
	-moz-appearance: textfield;
	width: 36px; height: 100%; padding: 0; border: 0; border-radius: 0;
	background: transparent; color: inherit; box-shadow: none; text-align: center;
	font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 20px;
}
.vpw-achat__qte input::-webkit-outer-spin-button,
.vpw-achat__qte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vpw-achat .vpw-achat__bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	justify-self: end; width: 100%; max-width: 215px; padding: 0 20px;
	background: transparent;
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwbtnp-font-size);
	font-weight: var(--e-global-typography-vpwbtnp-font-weight);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.vpw-achat .vpw-achat__bouton:hover:not(:disabled), .vpw-achat .vpw-achat__bouton:focus-visible { border-color: var(--e-global-color-primary); box-shadow: 0 0 14px var(--e-global-color-vpwglow); background: transparent; color: var(--e-global-color-text); }
.vpw-achat .vpw-achat__bouton:disabled { opacity: .55; cursor: not-allowed; }
.vpw-achat__fleche { flex: none; width: 10px; height: 16px; }
.vpw-achat__indispo { grid-column: 2; justify-self: end; margin: 0; color: var(--e-global-color-vpwrose); font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif; text-transform: uppercase; }

/* Pagination de la boutique [vpw_pagination] : pastilles magenta, page active et flèches pleines */
.vpw-pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
.vpw-pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 78px; height: 60px; padding: 0 15px;
	border: 3px solid var(--e-global-color-primary);
	border-radius: 999px;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.vpw-pagination .page-numbers.current,
.vpw-pagination .page-numbers.next,
.vpw-pagination .page-numbers.prev,
.vpw-pagination a.page-numbers:hover {
	background: var(--e-global-color-primary);
	color: var(--e-global-color-text);
	box-shadow: 0 0 16px var(--e-global-color-vpwglow);
}
.vpw-pagination .page-numbers svg { width: 12px; height: 20px; }
.vpw-pagination .vpw-pagination__prec svg { transform: scaleX(-1); }
.vpw-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1024px) {
	body.yith-wcan-pro { --vpw-filtre-case: 32px; --vpw-filtre-titre-w: 240px; }
	.vpw-pagination { gap: 12px; }
	.vpw-pagination .page-numbers { min-width: 58px; height: 46px; }
	.vpw-achat .vpw-achat__qte, .vpw-achat .vpw-achat__bouton { height: 44px; }
}
@media (max-width: 767px) {
	/* 9 pastilles sur une ligne à 350 px */
	.vpw-pagination { justify-content: center; gap: 5px; }
	.vpw-pagination .page-numbers { min-width: 32px; height: 32px; padding: 0 6px; border-width: 2px; font-size: 15px; }
	.vpw-achat .vpw-achat__qte { width: 110px; }
	.vpw-achat .vpw-achat__bouton { gap: 8px; padding: 0 12px; }
	.vpw-pagination .page-numbers svg { width: 9px; height: 14px; }
}

/* ---------- Boutique entre la tablette et le grand écran (1025 à 1599 px) ----------
 * Seuls les points d'arrêt tablette et mobile sont actifs dans Elementor : sans ceci, les portables
 * et les tablettes à l'horizontale gardent 3 colonnes à côté de 430 px de filtres, et les cartes
 * deviennent trop étroites. Sélecteurs longs pour l'emporter sur le CSS du modèle (.elementor-840 …). */
@media (min-width: 1025px) {
	.vpw-boutique > .e-con-inner > .elementor-element.e-con.vpw-filtres { --width: clamp(280px, 22vw, 430px); }
}
@media (min-width: 1025px) and (max-width: 1599px) {
	/* Colonnes du Loop Grid : données par la classe .elementor-grid-3 (pas par une variable) */
	.vpw-boutique .elementor-widget-loop-grid.elementor-grid-3 .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vpw-boutique .e-con .elementor-element.elementor-widget-loop-grid.elementor-widget { --grid-row-gap: 60px; }
	body.yith-wcan-pro { --vpw-filtre-case: 32px; }
	.vpw-pagination { gap: 12px; }
	.vpw-pagination .page-numbers { min-width: 58px; height: 46px; }
}

/* ---------- Résultats de recherche (modèle « Recherche de produits », Loop Item « Produit ») ----------
 * Grille pleine largeur 4 / 2 / 1 ; 3 colonnes entre 1025 et 1599 px (même raison que la Boutique). */
.vpw-recherche .elementor-widget-loop-grid { min-width: 0; }
.vpw-recherche__resume { margin: 0; }
.vpw-recherche__terme { color: var(--e-global-color-primary); }
@media (min-width: 1025px) and (max-width: 1599px) {
	.vpw-recherche .elementor-widget-loop-grid.elementor-grid-4 .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vpw-recherche .e-con .elementor-element.elementor-widget-loop-grid.elementor-widget,
	.vpw-recherche .elementor-element.elementor-widget-loop-grid.elementor-widget { --grid-row-gap: 60px; }
}

/* Bloc d'achat dans une carte étroite : le bouton passe sous la quantité, sur toute la largeur.
 * Requête de conteneur sur la carte : marche quel que soit le nombre de colonnes. */
.vpw-produit { container-type: inline-size; container-name: vpw-carte; }
/* Bloc d'achat dans une carte étroite (2 ou 3 colonnes entre 1025 et 1919 px) : en grille, la quantité
 * fixe la largeur de la 1re colonne et écrase la liste d'options. En flex avec retour à la ligne :
 * prix + options sur la 1re ligne, quantité + bouton sur la 2e (les bases de 55 % forcent la coupure).
 * Requête de conteneur sur la carte : marche quel que soit le nombre de colonnes. */
.vpw-produit { container-type: inline-size; container-name: vpw-carte; }
@container vpw-carte (max-width: 340px) {
	.vpw-achat { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 12px; }
	.vpw-achat .vpw-achat__prix { flex: none; }
	.vpw-achat .vpw-achat__options { flex: 1 1 55%; max-width: none; min-width: 0; }
	.vpw-achat .vpw-achat__option { padding-left: 12px; }
	.vpw-achat .vpw-achat__qte { flex: none; width: 96px; padding: 0 6px; }
	.vpw-achat .vpw-achat__bouton { flex: 1 1 55%; max-width: none; gap: 6px; padding: 0 10px; }
	.vpw-achat .vpw-achat__indispo { margin-left: auto; }
}

/* ---------- Fiche de produit (modèle « Fiche de produit ») ---------- */
/* Ligne de la bannière (en-tête) : catégories et marque */
.vpw-produit-termes {
	margin: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	text-transform: uppercase;
}
.elementor .vpw-produit-termes a { color: inherit; text-decoration: none; } /* .elementor : passe devant la couleur des liens du Kit */
.elementor .vpw-produit-termes a:hover { color: var(--e-global-color-primary); }

.vpw-fiche .vpw-fiche__avis { order: -1; }
.vpw-fiche .vpw-fiche__avis .woocommerce-message,
.vpw-fiche .vpw-fiche__avis .woocommerce-info,
.vpw-fiche .vpw-fiche__avis .woocommerce-error {
	margin: 0;
	border: 3px solid var(--e-global-color-primary);
	border-radius: 30px;
	background: var(--e-global-color-vpwverr);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}
/* Avis : pas d'icône (police d'icônes de WooCommerce non chargée), lien « Voir le panier » en pastille */
.vpw-fiche .vpw-fiche__avis .woocommerce-message,
.vpw-fiche .vpw-fiche__avis .woocommerce-info,
.vpw-fiche .vpw-fiche__avis .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 30px; padding: 15px 30px; }
.vpw-fiche .vpw-fiche__avis .woocommerce-message::before,
.vpw-fiche .vpw-fiche__avis .woocommerce-info::before,
.vpw-fiche .vpw-fiche__avis .woocommerce-error::before,
.vpw-fiche .vpw-fiche__avis .woocommerce-message::after { display: none; }
.vpw-fiche .vpw-fiche__avis .woocommerce-message a.button {
	order: 2; float: none; margin: 0; padding: 10px 25px;
	border: 3px solid var(--e-global-color-text); border-radius: 999px;
	background: transparent; box-shadow: 0 0 10px rgba(111, 195, 214, .7);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwbtnp-font-size);
	font-weight: var(--e-global-typography-vpwbtnp-font-weight);
	text-transform: uppercase;
}
.vpw-fiche .vpw-fiche__avis .woocommerce-message a.button:hover { border-color: var(--e-global-color-primary); box-shadow: 0 0 16px var(--e-global-color-vpwglow); }
.vpw-fiche .vpw-fiche__description p:last-child,
.vpw-marque-texte p:last-child { margin-bottom: 0; }
.vpw-marque-texte {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
}

/* Formulaire d'ajout au panier (WooCommerce natif) : libellé au-dessus, puis
 * options | quantité | bouton sur une rangée. Les enveloppes (tableau, single_variation_wrap)
 * sont « aplaties » (display: contents) pour placer leurs éléments dans une seule grille. */
.vpw-fiche__panier form.cart {
	display: grid;
	grid-template-columns: minmax(0, 275px) auto auto;
	justify-content: space-between;
	align-items: center;
	gap: 15px 25px;
	margin: 0;
}
/* Produit simple : quantité et bouton côte à côte, à gauche (le widget Elementor les met en flex centré) */
.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form):not(.grouped_form) {
	display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px 25px;
}
.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form) .quantity,
.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form) button.single_add_to_cart_button { margin: 0; }
.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form) .quantity { order: -2; }
.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form) button.single_add_to_cart_button { order: -1; }
.vpw-fiche__panier form.cart:not(.variations_form) > input[type="text"] { position: absolute; } /* champ piège Honeypot */
.vpw-fiche__panier form.variations_form table.variations,
.vpw-fiche__panier form.variations_form table.variations tbody,
.vpw-fiche__panier form.variations_form table.variations tr,
.vpw-fiche__panier form.variations_form table.variations td,
.vpw-fiche__panier form.variations_form .single_variation_wrap,
/* Le widget Elementor la met en flex avec :is(… .woocommerce div.product …), spécificité (0,6,2) */
.vpw-fiche__panier.elementor-widget form.cart.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart.variations_button { display: contents; }
.vpw-fiche__panier table.variations th.label { grid-column: 1 / -1; grid-row: 1; padding: 0; text-align: left; }
.vpw-fiche__panier table.variations th.label label {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vpwfaqr-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwfaqr-font-size);
	font-weight: 500;
	text-transform: none;
}
.vpw-fiche__panier form.variations_form select { grid-column: 1; grid-row: 2; }
.vpw-fiche__panier form.variations_form .quantity { grid-column: 2; grid-row: 2; }
.vpw-fiche__panier form.variations_form .single_add_to_cart_button { grid-column: 3; grid-row: 2; }
.vpw-fiche__panier form.variations_form .reset_variations { grid-column: 1; grid-row: 3; justify-self: start; }
.vpw-fiche__panier form.variations_form .single_variation { grid-column: 1 / -1; grid-row: 4; }
.vpw-fiche__panier form.variations_form .single_variation:empty { display: none; }
/* Plus d'un attribut (rare) : on revient à la mise en page de WooCommerce */
.vpw-fiche__panier form.variations_form:has(table.variations tr + tr) { display: block; }

/* td.value : passe devant le style de liste du widget « Ajouter au panier » */
.vpw-fiche__panier form.variations_form table.variations td.value select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0 55px 0 22px;
	border: 3px solid var(--e-global-color-primary);
	border-radius: 0;
	background: var(--e-global-color-vpwnoir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center / 18px 11px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwfaqr-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwfaqr-font-size);
	cursor: pointer;
}
.vpw-fiche__panier table.variations select:focus-visible { outline: 2px solid var(--e-global-color-text); outline-offset: 2px; }
.vpw-fiche__panier table.variations select option { background: var(--e-global-color-vpwnoir); color: var(--e-global-color-text); }
.vpw-fiche__panier .reset_variations {
	color: var(--e-global-color-vpwrose);
	font-family: var(--e-global-typography-vpwpeti-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
}
.vpw-fiche__panier .single_variation,
.vpw-fiche__panier .stock {
	color: var(--e-global-color-vpwhalo);
	font-family: var(--e-global-typography-vpwpeti-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
}
.vpw-fiche__panier .single_variation .price { display: none; } /* le prix de la variation est déjà sous le titre */
.vpw-fiche__panier .stock.out-of-stock { color: var(--e-global-color-vpwrose); }

/* Quantité WooCommerce (fiche, panier) : pastille − 1 + ; préfixe body pour passer devant le Kit */
body div.quantity {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 135px;
	height: 52px;
	padding: 0 12px;
	border: 3px solid var(--e-global-color-text);
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(111, 195, 214, .7);
	color: var(--e-global-color-text);
}
body div.quantity button.vpw-achat__moins,
body div.quantity button.vpw-achat__plus,
body div.quantity button.vpw-achat__moins:hover,
body div.quantity button.vpw-achat__plus:hover {
	width: 30px; height: 100%; padding: 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; color: inherit;
	font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 22px; line-height: 1; cursor: pointer;
}
body div.quantity input.qty[type="number"][name] {
	-moz-appearance: textfield;
	width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; color: inherit; text-align: center;
	font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 22px;
}
body div.quantity input.qty::-webkit-outer-spin-button,
body div.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bouton « Ajouter au panier » : pastille blanche, flèche à droite */
.vpw-fiche__panier form.cart button.single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 25px;
	box-sizing: border-box;
	min-width: 270px; height: 52px; margin: 0; padding: 0 22px 0 28px;
	border: 3px solid var(--e-global-color-text);
	border-radius: 999px;
	background: transparent;
	box-shadow: 0 0 10px rgba(111, 195, 214, .7);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.vpw-fiche__panier form.cart button.single_add_to_cart_button::after {
	content: "";
	flex: none;
	width: 12px; height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.vpw-fiche__panier form.cart button.single_add_to_cart_button:hover:not(.disabled),
.vpw-fiche__panier form.cart button.single_add_to_cart_button:focus-visible {
	border-color: var(--e-global-color-primary);
	background: transparent;
	box-shadow: 0 0 16px var(--e-global-color-vpwglow);
	color: var(--e-global-color-text);
}
.vpw-fiche__panier form.cart button.single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1024px) {
	.vpw-fiche__panier form.cart button.single_add_to_cart_button { min-width: 0; }
}
/* Mobile : options sur toute la largeur, puis quantité et bouton */
@media (max-width: 767px) {
	/* En flex avec retour à la ligne (les enveloppes aplaties restent transparentes) */
	.vpw-fiche__panier form.variations_form { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
	.vpw-fiche__panier form.variations_form table.variations th.label,
	.vpw-fiche__panier form.variations_form table.variations td.value select,
	.vpw-fiche__panier form.variations_form .single_variation { flex: 0 0 100%; }
	/* Ordres négatifs : les éléments invisibles de la ligne (alerte pour lecteurs d'écran, champ piège
	 * anti-pourriel) passent après, sinon ils décalent la quantité */
	.vpw-fiche__panier form.variations_form table.variations th.label { order: -4; }
	.vpw-fiche__panier form.variations_form table.variations td.value select { order: -3; }
	.vpw-fiche__panier.elementor-widget form.cart.variations_form .quantity { flex: none; order: -2; margin: 0; }
	/* Champ piège du plugin Honeypot (texte de largeur 0, enfant direct du formulaire) : sorti du flux,
	 * sinon il compte comme un élément flex et ajoute un écart. Pas masqué, pour que le piège marche. */
	.vpw-fiche__panier form.variations_form > input[type="text"] { position: absolute; }
	.vpw-fiche__panier.elementor-widget.elementor-widget-woocommerce-product-add-to-cart form.cart.variations_form .single_variation_wrap button.single_add_to_cart_button.button { flex: none; width: calc(100% - 130px); min-width: 0; order: -1; margin: 0; } /* 130 = quantité 115 + écart 15 */
	.vpw-fiche__panier form.variations_form .reset_variations { flex: 0 0 100%; order: 4; }
	.vpw-fiche__panier form.variations_form .single_variation { order: 5; }
	.vpw-fiche__panier form.cart button.single_add_to_cart_button { gap: 10px; padding: 0 15px 0 18px; font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif; font-size: var(--e-global-typography-vpwbtnp-font-size); }
	body div.quantity { width: 115px; height: 48px; }
	.vpw-fiche__panier form.cart button.single_add_to_cart_button,
	.vpw-fiche__panier table.variations select { height: 48px; }
}

/* ---------- Pages WooCommerce (Panier, Commande, Mon compte) ----------
 * Pas de maquette : design simple repris du site. Les widgets Elementor Pro (Panier, Commande,
 * Mon compte) lisent des variables CSS que leurs contrôles écrivent sur le widget : on les définit
 * ici sur le container parent (.vpw-wc), avec les globaux du Kit. Un réglage fait dans Elementor
 * reste prioritaire. */
.vpw-wc {
	--sections-background-color: var(--e-global-color-vpwverr);
	--sections-border-color: var(--e-global-color-vpwturq);
	--sections-border-type: solid;
	--sections-border-radius: 30px;
	--sections-padding: 30px 35px;
	--sections-margin: 0 0 30px 0;
	--sections-border-top-width: 4px;
	--sections-border-right-width: 4px;
	--sections-border-bottom-width: 4px;
	--sections-border-left-width: 4px;
	--sections-title-color: var(--e-global-color-text);
	--sections-secondary-title-color: var(--e-global-color-text);
	--sections-descriptions-color: var(--e-global-color-vpwhalo);
	--sections-messages-color: var(--e-global-color-vpwhalo);
	--sections-radio-buttons-color: var(--e-global-color-primary);
	--sections-checkboxes-color: var(--e-global-color-primary);
	--checkboxes-color: var(--e-global-color-primary);
	--payment-methods-radio-buttons-color: var(--e-global-color-primary);
	--general-text-color: var(--e-global-color-text);
	--typography-section-titles-color: var(--e-global-color-text);
	--totals-color: var(--e-global-color-text);
	--totals-divider-color: rgba(215, 238, 254, .25);
	--order-summary-color: var(--e-global-color-text);
	--order-summary-items-color: var(--e-global-color-text);
	--order-summary-totals-color: var(--e-global-color-text);
	--order-summary-title-color: var(--e-global-color-text);
	--order-summary-variations-color: var(--e-global-color-vpwhalo);
	--order-summary-items-divider-color: rgba(215, 238, 254, .25);
	--order-summary-totals-divider-color: rgba(215, 238, 254, .25);
	--order-summary-quantity-border-color: var(--e-global-color-text);
	--order-summary-remove-icon-normal-color: var(--e-global-color-vpwrose);
	--order-summary-remove-icon-hover-color: var(--e-global-color-primary);
	--variations-color: var(--e-global-color-vpwhalo);
	--links-normal-color: var(--e-global-color-primary);
	--links-hover-color: var(--e-global-color-text);
	--product-link-normal-color: var(--e-global-color-text);
	--product-link-hover-color: var(--e-global-color-primary);
	--forms-labels-color: var(--e-global-color-text);
	--forms-fields-normal-color: var(--e-global-color-text);
	--forms-fields-focus-color: var(--e-global-color-text);
	--forms-fields-normal-background-color: var(--e-global-color-vpwchmp);
	--forms-fields-focus-background-color: var(--e-global-color-vpwchmp);
	--forms-fields-border-radius: 30px;
	--forms-fields-padding: 13px 23px;
	--forms-rows-gap: 20px;
	--forms-buttons-normal-text-color: var(--e-global-color-text);
	--forms-buttons-hover-text-color: var(--e-global-color-text);
	--forms-buttons-border-color: var(--e-global-color-text);
	--forms-buttons-hover-border-color: var(--e-global-color-primary);
	--forms-buttons-border-radius: 999px;
	--forms-buttons-padding: 13px 30px;
	--checkout-button-normal-text-color: var(--e-global-color-text);
	--checkout-button-hover-text-color: var(--e-global-color-text);
	--checkout-button-hover-border-color: var(--e-global-color-primary);
	--checkout-button-border-radius: 999px;
	--checkout-button-padding: 16px 30px;
	--purchase-button-normal-text-color: var(--e-global-color-text);
	--purchase-button-hover-text-color: var(--e-global-color-text);
	--purchase-button-hover-border-color: var(--e-global-color-primary);
	--purchase-button-border-radius: 999px;
	--purchase-button-padding: 16px 30px;
	--tables-items-color: var(--e-global-color-text);
	--tables-title-color: var(--e-global-color-text);
	--tables-divider-border-color: rgba(215, 238, 254, .25);
	--tables-links-normal-color: var(--e-global-color-primary);
	--tables-links-hover-color: var(--e-global-color-text);
	--tables-button-normal-text-color: var(--e-global-color-text);
	--tables-button-hover-text-color: var(--e-global-color-text);
	--tables-buttons-border-color: var(--e-global-color-text);
	--tables-button-border-radius: 999px;
	--tabs-normal-color: var(--e-global-color-text);
	--tabs-hover-color: var(--e-global-color-primary);
	--tabs-active-color: var(--e-global-color-primary);
	--tabs-border-color: var(--e-global-color-vpwturq);
	--tabs-hover-border-color: var(--e-global-color-primary);
	--tabs-active-border-color: var(--e-global-color-primary);
	--tabs-border-radius: 999px;
	--tabs-padding: 13px 25px;
	--tabs-spacing: 12px;
	--tabs-divider-color: transparent;
	--login-messages-color: var(--e-global-color-vpwhalo);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}
/* Titres de section : typo « Sous-titre » (les widgets prennent sinon le H2/H3 du Kit, en Gear Wide) */
.vpw-wc .elementor-widget .woocommerce :is(h2, h3) {
	margin-top: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwsous-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwsous-font-size);
	font-weight: var(--e-global-typography-vpwsous-font-weight);
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: none;
}
/* Champs : même dessin que les champs du Kit (formulaire « Demande d'information ») ; les widgets les mettent en blanc */
.vpw-wc .elementor-widget .woocommerce :is(input.input-text, select, textarea),
.vpw-wc .elementor-widget .woocommerce #customer_details .form-row :is(.input-text, select, textarea),
.vpw-wc .elementor-widget .woocommerce .select2-container .select2-selection {
	box-sizing: border-box;
	min-height: 50px;
	border: 3px solid var(--e-global-color-vpwhalo);
	border-radius: 30px;
	background-color: var(--e-global-color-vpwchmp);
	box-shadow: 0 0 12px rgba(170, 215, 255, .6);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
}
.vpw-wc .elementor-widget .woocommerce :is(input.input-text, select, textarea):focus,
.vpw-wc .elementor-widget .woocommerce #customer_details .form-row :is(.input-text, select, textarea):focus { border-color: var(--e-global-color-primary); outline: none; }
.vpw-wc .elementor-widget .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 45px 0 20px; line-height: 44px; color: var(--e-global-color-text); }
.vpw-wc .elementor-widget .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; right: 15px; height: 20px; transform: translateY(-50%); }
.vpw-wc .elementor-widget .woocommerce .select2-container .select2-selection--single .select2-selection__arrow b { border-top-color: var(--e-global-color-text); }
.select2-container .select2-dropdown { border-color: var(--e-global-color-vpwhalo); background: var(--e-global-color-vpwnuit); color: var(--e-global-color-text); }
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted[data-selected] { background: var(--e-global-color-primary); }
.select2-container .select2-search__field { background: var(--e-global-color-vpwchmp); color: var(--e-global-color-text); }
/* Champ « Pays » quand un seul pays est permis : texte simple */
.vpw-wc .woocommerce #billing_country_field strong,
.vpw-wc .woocommerce #shipping_country_field strong { color: var(--e-global-color-text); font-weight: 400; }
/* Libellés de case à cocher et méthode de livraison : texte courant, pas le style de libellé du Kit */
.vpw-wc .woocommerce :is(.woocommerce-form__label-for-checkbox, .woocommerce-form-login__rememberme, #shipping_method label, .wc_payment_method > label) {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: 400;
	text-transform: none;
}
.vpw-wc .woocommerce input[type="checkbox"],
.vpw-wc .woocommerce input[type="radio"] { accent-color: var(--e-global-color-primary); }
/* Boîte de description du paiement : verre, pas blanc */
.vpw-wc .elementor-widget .woocommerce #payment { background: transparent; }
.vpw-wc .elementor-widget .woocommerce #payment .payment_box {
	border-radius: 20px;
	background: rgba(215, 238, 254, .08);
	color: var(--e-global-color-vpwhalo);
}
.vpw-wc .elementor-widget .woocommerce #payment .payment_box::before { display: none; }
/* Boutons : pastille blanche transparente avec halo (comme « Soumettre » et « Ajouter au panier ») */
.vpw-wc .elementor-widget .woocommerce :is(.button, a.button, button.button, .checkout-button, #place_order),
.vpw-wc .elementor-widget .woocommerce #payment #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 3px solid var(--e-global-color-text);
	border-radius: 999px;
	background: transparent;
	box-shadow: 0 0 10px rgba(111, 195, 214, .7);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.vpw-wc .elementor-widget .woocommerce :is(.button, a.button, button.button, .checkout-button, #place_order):is(:hover, :focus-visible),
.vpw-wc .elementor-widget .woocommerce #payment #place_order:is(:hover, :focus-visible) {
	border-color: var(--e-global-color-primary);
	background: transparent;
	box-shadow: 0 0 16px var(--e-global-color-vpwglow);
	color: var(--e-global-color-text);
}
.vpw-wc .elementor-widget .woocommerce :is(.button, button.button):disabled { opacity: .5; cursor: not-allowed; }
/* Bouton principal (Passer à la commande, Commander) : pleine largeur, bordure magenta */
.vpw-wc .elementor-widget .woocommerce .wc-proceed-to-checkout .checkout-button,
.vpw-wc .elementor-widget .woocommerce #payment #place_order { width: 100%; border-color: var(--e-global-color-primary); box-shadow: 0 0 14px var(--e-global-color-vpwglow); }
/* Prix et totaux */
.vpw-wc .woocommerce :is(.order-total, .cart-subtotal) .amount { color: var(--e-global-color-primary); }
.vpw-wc .woocommerce .order-total .amount { font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif; font-size: var(--e-global-typography-vpwlabl-font-size); }
.vpw-wc .woocommerce #shipping_method .amount { color: var(--e-global-color-text); }

/* Avis WooCommerce sur ces pages (même dessin que sur la fiche) */
.vpw-wc .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 30px;
	margin: 0 0 30px; padding: 15px 30px; list-style: none;
	border: 3px solid var(--e-global-color-primary); border-radius: 30px;
	background: var(--e-global-color-vpwverr);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}
.vpw-wc .woocommerce .woocommerce-error { border-color: var(--e-global-color-vpwrose); }
.vpw-wc .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none; }
.vpw-wc .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li { margin: 0; }
.vpw-wc .woocommerce :is(.woocommerce-message, .woocommerce-info) .button { order: 2; float: none; margin: 0; }
/* Égalités de spécificité avec le CSS des widgets (chargé après vpw.css) : sélecteurs renforcés */
.vpw-wc .elementor-widget .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row :is(.input-text, select) {
	border: 3px solid var(--e-global-color-vpwhalo);
	border-radius: 30px;
	background: var(--e-global-color-vpwchmp);
	box-shadow: 0 0 12px rgba(170, 215, 255, .6);
	color: var(--e-global-color-text);
	font-size: var(--e-global-typography-text-font-size);
}
.vpw-wc .elementor-widget .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row :is(.input-text, select):focus { border-color: var(--e-global-color-primary); }
.vpw-wc .elementor-widget .woocommerce #payment .payment_methods .payment_box { background-color: rgba(215, 238, 254, .08); }
.vpw-wc .elementor-widget .woocommerce .cart_totals h2 {
	font-size: var(--e-global-typography-vpwsous-font-size);
	font-weight: var(--e-global-typography-vpwsous-font-weight);
}
.vpw-wc .elementor-widget .woocommerce .cart :is(th, td),
.vpw-wc .elementor-widget .woocommerce .cart_totals :is(th, td) { font-size: var(--e-global-typography-text-font-size); }
/* Bouton « afficher le mot de passe » : icône seule (le style de bouton du Kit s'y appliquait) */
.vpw-wc .woocommerce .password-input .show-password-input,
.vpw-wc .woocommerce .password-input .show-password-input:hover {
	padding: 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
	filter: brightness(0) invert(1);
}

/* Total du panier dans l'en-tête ([vpw_panier_total]) */
.vpw-panier-total, .vpw-panier-total a { color: inherit; text-decoration: none; }
.vpw-entete-total .vpw-panier-total {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwmenu-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwmenu-font-size);
	font-weight: var(--e-global-typography-vpwmenu-font-weight);
	text-transform: uppercase;
	white-space: nowrap;
}
.vpw-entete-total .vpw-panier-total:hover { color: var(--e-global-color-primary); }

/* Confirmation de commande (/commander/order-received/…) et commande vue dans Mon compte :
 * gabarits standard de WooCommerce (gris par défaut), habillés comme les autres blocs. */
.vpw-wc .woocommerce-order { display: flex; flex-direction: column; gap: 30px; color: var(--e-global-color-text); }
.vpw-wc .woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vpwh4-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwh4-font-size);
	font-weight: var(--e-global-typography-vpwh4-font-weight);
	line-height: 1.15;
	text-transform: uppercase;
}
.vpw-wc .woocommerce-order ul.woocommerce-order-overview {
	display: flex; flex-wrap: wrap; gap: 20px 0;
	margin: 0; padding: 25px 0; list-style: none;
	border: 1px solid var(--e-global-color-vpwturq); border-radius: 30px;
	background: var(--e-global-color-vpwverr);
}
.vpw-wc .woocommerce-order ul.woocommerce-order-overview li {
	flex: 1 1 200px; margin: 0; padding: 0 35px;
	border: 0; border-right: 1px solid rgba(215, 238, 254, .25);
	color: var(--e-global-color-vpwhalo);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
	text-transform: uppercase;
}
.vpw-wc .woocommerce-order ul.woocommerce-order-overview li:last-child { border-right: 0; }
.vpw-wc .woocommerce-order ul.woocommerce-order-overview li strong {
	display: block; margin-top: 6px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
	text-transform: none;
}
.vpw-wc .woocommerce-order :is(.woocommerce-order-details, .woocommerce-customer-details .woocommerce-column, .woocommerce-customer-details > address),
.vpw-wc .woocommerce .woocommerce-bacs-bank-details {
	margin: 0; padding: 30px 35px;
	border: 1px solid var(--e-global-color-vpwturq); border-radius: 30px;
	background: var(--e-global-color-vpwverr);
}
.vpw-wc .woocommerce-order .woocommerce-customer-details .woocommerce-columns { display: flex; flex-wrap: wrap; gap: 30px; margin: 0; }
.vpw-wc .woocommerce-order .woocommerce-customer-details .woocommerce-column { flex: 1 1 320px; width: auto; float: none; }
.vpw-wc .woocommerce-order .woocommerce-customer-details .woocommerce-columns::before,
.vpw-wc .woocommerce-order .woocommerce-customer-details .woocommerce-columns::after { display: none; }
.vpw-wc .woocommerce-order :is(table.shop_table, table.shop_table th, table.shop_table td) {
	border: 0; border-color: rgba(215, 238, 254, .25); background: transparent;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
}
.vpw-wc .woocommerce-order table.shop_table { margin: 0; border-collapse: collapse; }
.vpw-wc .woocommerce-order table.shop_table :is(th, td) { padding: 12px 0; border-top: 1px solid rgba(215, 238, 254, .25); }
.vpw-wc .woocommerce-order table.shop_table thead :is(th, td) { border-top: 0; }
.vpw-wc .woocommerce-order table.shop_table :is(th, td):first-child { padding-right: 15px; } /* le nom touchait le prix en mobile */
/* Couleurs du tableau : sélecteur renforcé (le widget Commande et woocommerce.css colorent les cellules et les montants) */
.vpw-wc .elementor-widget .woocommerce .woocommerce-order table.shop_table :is(th, td, td .amount, th .amount, td small) { color: var(--e-global-color-text); }
.vpw-wc .elementor-widget .woocommerce .woocommerce-order table.shop_table td small { color: var(--e-global-color-vpwhalo); }
.vpw-wc .elementor-widget .woocommerce .woocommerce-order table.shop_table tfoot tr:nth-last-child(2) :is(th, td, .amount) { color: var(--e-global-color-primary); } /* Total (avant « Moyen de paiement ») */
.vpw-wc .elementor-widget .woocommerce :is(.woocommerce-order-details__title, .woocommerce-column__title) { margin-bottom: 20px; }
.vpw-wc .woocommerce-order table.shop_table a { color: var(--e-global-color-primary); }
.vpw-wc .woocommerce-order address {
	padding: 0; border: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-style: normal;
	line-height: 1.6;
}
/* Icônes de téléphone et de courriel : police d'icônes de WooCommerce non chargée */
.vpw-wc .woocommerce-order address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { padding-left: 0; }
.vpw-wc .woocommerce-order address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before { display: none; }
@media (max-width: 767px) {
	.vpw-wc .woocommerce-order ul.woocommerce-order-overview li { flex-basis: 100%; padding: 0 25px; border-right: 0; }
	.vpw-wc .woocommerce-order :is(.woocommerce-order-details, .woocommerce-customer-details .woocommerce-column) { padding: 25px 20px; }
}
/* Onglets de Mon compte : pastilles transparentes (le widget les met sur fond clair) ; active en magenta */
.vpw-wc .elementor-widget .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a {
	border-width: 2px;
	background: transparent;
	font-family: var(--e-global-typography-vpwmenu-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwmenu-font-size);
	font-weight: var(--e-global-typography-vpwmenu-font-weight);
	text-transform: uppercase;
	transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.vpw-wc .elementor-widget .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
	background: transparent;
	box-shadow: 0 0 12px var(--e-global-color-vpwglow);
}
/* Adresses (compte, confirmation) : pas d'italique, pas d'icônes (police de WooCommerce non chargée) */
.vpw-wc .woocommerce address { font-style: normal; color: var(--e-global-color-text); }
.vpw-wc .woocommerce address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { padding-left: 0; }
.vpw-wc .woocommerce address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before { display: none; }

/* Blocs des pages WooCommerce : bordure de 4 px et halo, comme les cartes produits (.vpw-pcard).
 * Le panier et la commande codent la largeur de bordure en dur (1px). */
.vpw-wc .elementor-widget-woocommerce-cart .e-cart-section,
.vpw-wc .elementor-widget-woocommerce-checkout-page .woocommerce :is(#customer_details .col-1, #customer_details .col-2 .shipping_address, .e-checkout__order_review, .e-coupon-box, .e-woocommerce-login-section, .woocommerce-additional-fields),
.vpw-wc .elementor-widget.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment,
.vpw-wc .woocommerce-order :is(ul.woocommerce-order-overview, .woocommerce-order-details, .woocommerce-customer-details .woocommerce-column) {
	border-width: 4px;
	box-shadow: 0 0 12px rgba(111, 195, 214, .55);
}
.vpw-wc .elementor-widget-woocommerce-my-account { --sections-border-color: var(--e-global-color-vpwturq); }
/* Halo sur les blocs du compte ; sauf l'enveloppe des onglets Adresses et Commande, qui n'est pas un bloc */
.vpw-wc .elementor-widget .e-my-account-tab :is(.woocommerce-address-fields, address, .order_details),
.vpw-wc .elementor-widget .e-my-account-tab:not(.e-my-account-tab__edit-address, .e-my-account-tab__view-order) .woocommerce-MyAccount-content-wrapper { box-shadow: 0 0 12px rgba(111, 195, 214, .55); }
/* Écart entre les colonnes : les widgets le prennent dans --sections-margin (ici une marge, donc invalide) */
.vpw-wc .elementor-widget-woocommerce-cart .e-cart__container,
.vpw-wc .elementor-widget-woocommerce-checkout-page .e-checkout__container { grid-column-gap: 45px; grid-row-gap: 30px; }
@media (max-width: 1024px) {
	.vpw-wc .elementor-widget-woocommerce-cart .e-cart__container,
	.vpw-wc .elementor-widget-woocommerce-checkout-page .e-checkout__container { grid-column-gap: 30px; }
}

/* Mobile : blocs plus serrés (Panier, Commande, Mon compte, confirmation). Les widgets lisent
 * --sections-padding ; les blocs de la confirmation et les avis ont leur propre padding. */
@media (max-width: 767px) {
	.vpw-wc { --sections-padding: 20px; }
	.vpw-wc .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { padding: 15px 20px; }
	.vpw-wc .woocommerce-order :is(.woocommerce-order-details, .woocommerce-customer-details .woocommerce-column),
	.vpw-wc .woocommerce .woocommerce-bacs-bank-details { padding: 20px; }
	.vpw-wc .woocommerce-order ul.woocommerce-order-overview { padding: 20px 0; }
	.vpw-wc .woocommerce-order ul.woocommerce-order-overview li { padding: 0 20px; }
	/* Mon compte : le JS d'Elementor Pro donne aux formulaires Connexion et Inscription la même hauteur
	 * (style en ligne) ; une fois empilés, l'Inscription gardait un grand vide sous son bouton. */
	.vpw-wc .elementor-widget-woocommerce-my-account .woocommerce :is(form.login, form.register) { height: auto !important; }
}
/* Panier en mobile (point d'arrêt de woocommerce-smallscreen.css, 768 px) : chaque produit en carte,
 * miniature + nom + × sur la première ligne, puis prix, quantité et sous-total en libellé / valeur.
 * WooCommerce cache la miniature et Elementor Pro ajoute 16px 28px à chaque ligne : on les reprend. */
@media (max-width: 768px) {
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 70px 1fr auto;
		align-items: center;
		gap: 10px 15px;
		padding: 20px 0;
	}
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item:first-child { padding-top: 0; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td { padding: 0; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail { display: block; grid-area: 1 / 1; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td.product-thumbnail img { width: 70px; border-radius: 12px; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td.product-name { grid-area: 1 / 2; text-align: left !important; } /* woocommerce-smallscreen.css : right !important */
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td.product-remove { grid-area: 1 / 3; align-self: start; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item :is(td.product-thumbnail, td.product-name)::before { display: none; }
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item :is(td.product-price, td.product-quantity, td.product-subtotal) {
		display: flex;
		grid-column: 1 / -1;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
	}
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item :is(td.product-price, td.product-quantity, td.product-subtotal)::before { float: none; }
	/* Totaux : montants alignés sur le bord du bloc, comme les lignes du panier */
	.vpw-wc .elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table td { padding-inline-end: 0; }
}
/* Colonnes empilées : la marge du dernier bloc s'ajoutait à l'écart de la grille (60 px au lieu de 30) */
@media (max-width: 1024px) {
	.vpw-wc .elementor-widget-woocommerce-cart :is(.woocommerce-cart-form > .e-cart-section:last-child, .e-cart-totals) { margin-bottom: 0; }
	.vpw-wc .elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-additional-fields { margin-bottom: 0; }
}
/* Commande : titre vide en tête du bloc « Notes de commande » (il ajoutait 30 px de vide) */
.vpw-wc .elementor-widget-woocommerce-checkout-page .woocommerce-additional-fields > h3:empty { display: none; }

/* ==========================================================================
 * Barrière d'âge (inc/barriere-age.php, assets/vpw-age.js)
 * Visible seulement quand <html> a la classe vpw-age-requis (posée dans le <head> sans le cookie).
 * Le bouton et le champ prennent les styles du Kit (button, input).
 * ========================================================================== */
.vpw-age { display: none; }
html.vpw-age-requis { overflow: hidden; }
html.vpw-age-requis .vpw-age {
	position: fixed; inset: 0; z-index: 200000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px; box-sizing: border-box; overflow-y: auto;
	background: color-mix(in srgb, var(--e-global-color-vpwnuit) 92%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Même boîte que les tuiles de marques et les cartes produits : fond dégradé, bordure et halo turquoise */
.vpw-age__boite {
	display: flex; flex-direction: column; align-items: center; gap: 15px;
	width: 100%; max-width: 440px; margin: auto; padding: 35px 30px; box-sizing: border-box;
	background: linear-gradient(180deg, #262A4ECC, #1A1D3899);
	border: 4px solid var(--e-global-color-vpwturq); border-radius: 30px;
	box-shadow: 0 0 12px rgba(111, 195, 214, .55);
	color: var(--e-global-color-text); text-align: center;
}
.vpw-age__logo { width: 120px; height: auto; }
/* Titre, libellé, champ et bouton : #vpw-age, sinon les règles du Kit (.elementor-kit-6 h2, input…) l'emportent */
#vpw-age .vpw-age__titre {
	margin: 0; color: var(--e-global-color-text);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	text-transform: uppercase; line-height: var(--e-global-typography-secondary-line-height);
}
.vpw-age__texte, .vpw-age__note { margin: 0; color: var(--e-global-color-vpwhalo); font-size: var(--e-global-typography-vpwpeti-font-size); line-height: 1.5; }
.vpw-age__note { opacity: .85; }
#vpw-age .vpw-age__note a { color: var(--e-global-color-vpwhalo); text-decoration: underline; }
#vpw-age .vpw-age__note a:is(:hover, :focus-visible) { color: var(--e-global-color-primary); }
.vpw-age__form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin-top: 5px; }
#vpw-age .vpw-age__label {
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwbtnp-font-size); font-weight: var(--e-global-typography-vpwbtnp-font-weight);
	text-transform: uppercase; letter-spacing: .05em; color: var(--e-global-color-vpwhalo);
}
/* Champ et bouton : styles du Kit, plus compacts et sans halo au repos */
#vpw-age .vpw-age__date {
	width: 100%; color-scheme: dark; text-align: center;
	padding: 10px 20px; border-width: 2px; box-shadow: none;
}
#vpw-age .vpw-age__date:focus { border-color: var(--e-global-color-vpwturq); outline: none; }
#vpw-age .vpw-age__date[aria-invalid="true"] { border-color: var(--e-global-color-vpwrose); }
#vpw-age .vpw-age__bouton {
	width: 100%; padding: 13px 25px; border-width: 2px; box-shadow: none;
	font-size: var(--e-global-typography-vpwmenu-font-size);
}
#vpw-age .vpw-age__bouton:is(:hover, :focus-visible) { box-shadow: 0 0 14px var(--e-global-color-vpwglow); }
.vpw-age__erreur { margin: 0; min-height: 1.4em; color: var(--e-global-color-vpwrose); font-size: var(--e-global-typography-vpwpeti-font-size); font-weight: 600; }
.vpw-age__erreur:empty { min-height: 0; }
@media (max-width: 767px) {
	.vpw-age__boite { padding: 30px 20px; border-radius: 20px; }
}

/* ==========================================================================
 * Panier, commande et Mon compte en shortcodes WooCommerce classiques (prod) :
 * mêmes boîtes que les widgets Elementor de la v2 (.vpw-wc : --sections-*), et mêmes colonnes.
 * ========================================================================== */
.vpw-wc .elementor-widget-shortcode .woocommerce :is(
	.woocommerce-cart-form, .cart_totals, .cross-sells,
	.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, #order_review,
	form.checkout_coupon, form.woocommerce-form-login, form.woocommerce-form-register, form.lost_reset_password,
	.woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info,
	.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content
) {
	box-sizing: border-box;
	margin: 0 0 30px;
	padding: 30px 35px;
	background: var(--e-global-color-vpwverr);
	border: 4px solid var(--e-global-color-vpwturq);
	border-radius: 30px;
	box-shadow: 0 0 14px color-mix(in srgb, var(--e-global-color-vpwturq) 45%, transparent);
	color: var(--e-global-color-text);
}
.vpw-wc .elementor-widget-shortcode .woocommerce :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info { padding: 20px 35px; }
.vpw-wc .elementor-widget-shortcode .woocommerce :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3 { margin-top: 0; }
.vpw-wc .elementor-widget-shortcode .woocommerce .woocommerce-additional-fields:not(:has(textarea, input)) { display: none; }

/* Tableaux : sans grille, filets clairs */
.vpw-wc .elementor-widget-shortcode .woocommerce table.shop_table { margin: 0; border: 0; border-radius: 0; background: transparent; border-collapse: collapse; }
.vpw-wc .elementor-widget-shortcode .woocommerce table.shop_table :is(th, td) { border: 0; border-top: 1px solid rgba(215, 238, 254, .25); background: transparent; color: var(--e-global-color-text); }
.vpw-wc .elementor-widget-shortcode .woocommerce table.shop_table thead :is(th, td),
.vpw-wc .elementor-widget-shortcode .woocommerce table.shop_table tr:first-child :is(th, td) { border-top: 0; }
.vpw-wc .elementor-widget-shortcode .woocommerce .cart_totals h2,
.vpw-wc .elementor-widget-shortcode .woocommerce #order_review_heading { margin-top: 0; text-transform: uppercase; }

/* Panier : produits à gauche, totaux à droite */
.vpw-wc--cart .elementor-widget-shortcode .woocommerce { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce > * { grid-column: 1 / -1; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce > .woocommerce-cart-form { grid-column: 1; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce > .cart-collaterals { grid-column: 2; width: 100%; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce .cart-collaterals :is(.cart_totals, .cross-sells) { float: none; width: 100%; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce .cart-collaterals::before,
.vpw-wc--cart .elementor-widget-shortcode .woocommerce .cart-collaterals::after { display: none; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions { padding-top: 20px; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 10px; }
.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions .coupon #coupon_code { width: 200px; min-width: 0; }

/* Commande : coordonnées à gauche, récapitulatif à droite */
.vpw-wc--checkout .elementor-widget-shortcode form.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.vpw-wc--checkout .elementor-widget-shortcode form.checkout > * { grid-column: 1 / -1; }
.vpw-wc--checkout .elementor-widget-shortcode form.checkout > #customer_details { grid-column: 1; grid-row: span 2; }
.vpw-wc--checkout .elementor-widget-shortcode form.checkout > :is(#order_review_heading, #order_review) { grid-column: 2; float: none; width: 100%; }
.vpw-wc--checkout .elementor-widget-shortcode form.checkout > #order_review_heading { margin: 0 0 15px; }
.vpw-wc--checkout .elementor-widget-shortcode #customer_details :is(.col-1, .col-2) { float: none; width: 100%; }
.vpw-wc--checkout .elementor-widget-shortcode #customer_details::before,
.vpw-wc--checkout .elementor-widget-shortcode #customer_details::after { display: none; }

/* Mon compte : connexion et inscription côte à côte, comme sur la v2 */
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .u-columns { display: flex; gap: 40px; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .u-columns > * { float: none; width: auto; flex: 1 1 0; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .u-columns::before,
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .u-columns::after { display: none; }

@media (max-width: 1024px) {
	.vpw-wc--cart .elementor-widget-shortcode .woocommerce,
	.vpw-wc--checkout .elementor-widget-shortcode form.checkout { grid-template-columns: minmax(0, 1fr); }
	.vpw-wc--cart .elementor-widget-shortcode .woocommerce > :is(.woocommerce-cart-form, .cart-collaterals),
	.vpw-wc--checkout .elementor-widget-shortcode form.checkout > :is(#customer_details, #order_review_heading, #order_review) { grid-column: 1; grid-row: auto; }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .u-columns { flex-direction: column; gap: 0; }
}
@media (max-width: 767px) {
	.vpw-wc .elementor-widget-shortcode .woocommerce :is(
		.woocommerce-cart-form, .cart_totals, .cross-sells, .woocommerce-billing-fields, .woocommerce-shipping-fields,
		.woocommerce-additional-fields, #order_review, form.checkout_coupon, form.woocommerce-form-login,
		form.woocommerce-form-register, form.lost_reset_password, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content
	) { padding: 25px 20px; border-radius: 20px; }
}
/* Adresse de livraison : la boîte n'apparaît que si la case « Expédier à une autre adresse » est cochée */
.vpw-wc .elementor-widget-shortcode .woocommerce .woocommerce-shipping-fields:not(:has(#ship-to-different-address input:checked)) { padding: 0 35px; background: transparent; border-color: transparent; box-shadow: none; }

/* Bandeau de cookies du plugin ADN (fond blanc) : sans les couleurs et les halos du Kit (texte blanc, boutons lumineux) */
#adncomm-core-cookies-box-contain { color: #1a1a1a; }
#adncomm-core-cookies-box-contain .adncomm-core-cookies-title { color: #000; }
#adncomm-core-cookies-box-contain :is(button, .adncomm-core-cookies-box-list-item-toggle) { box-shadow: none; text-shadow: none; }
#adncomm-core-cookies-box-contain .adncomm-core-cookies-box-list-item-toggle { color: #000; background: transparent; border: 0; }
#adncomm-core-cookies-box-contain :is(td, th, p, li) { color: #1a1a1a; }

/* Décorations qui dépassent l'écran (image du bandeau de titre, fumée et fruits des marques et de la fiche) :
 * coupées au bord, sans défilement horizontal. « clip » plutôt que « hidden » : garde l'en-tête collant. */
html, body { overflow-x: clip; }

/* Pays quand un seul est permis : WooCommerce sort une liste à une option (pas un texte) → affichée en texte simple */
.vpw-wc .woocommerce select.country_to_state--single {
	appearance: none; -webkit-appearance: none; pointer-events: none;
	width: auto; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none;
	color: var(--e-global-color-text); font-weight: 400;
}

@media (max-width: 767px) {
	/* Panier : code promo et boutons empilés, pleine largeur */
	.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions .coupon { flex-direction: column; float: none; width: 100%; }
	.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions .coupon #coupon_code,
	.vpw-wc--cart .elementor-widget-shortcode .woocommerce table.cart td.actions .button { width: 100%; margin: 0 0 10px; }
	/* Carte de crédit : expiration et code de sécurité l'un sous l'autre */
	.vpw-wc .woocommerce .payment_box :is(.form-row-first, .form-row-last) { float: none; width: 100%; }
}

/* Pages de texte reprises de l'ancien site (Politique commerciale, Conditions d'utilisation) :
 * intertitres au style « Sous-titre » (le H2/H3 du Kit, en Gear Wide, est trop gros pour ces textes) et aérés. */
:is(.page-id-15872, .page-id-15860) .elementor-widget-text-editor :is(h2, h3, h4) {
	margin: 1.6em 0 .5em;
	font-family: var(--e-global-typography-vpwsous-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwsous-font-size);
	font-weight: var(--e-global-typography-vpwsous-font-weight);
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
}
:is(.page-id-15872, .page-id-15860) .elementor-widget-text-editor h3 { font-size: calc(var(--e-global-typography-vpwsous-font-size) * .85); color: var(--e-global-color-text); }
:is(.page-id-15872, .page-id-15860) .elementor-widget-text-editor > :first-child :is(h2, h3):first-child,
:is(.page-id-15872, .page-id-15860) .elementor-widget-text-editor :is(h2, h3):first-child { margin-top: 0; }
.vpw-wc .elementor-widget .woocommerce #customer_details .form-row :is(#billing_country, #shipping_country).country_to_state--single {
	appearance: none; -webkit-appearance: none; pointer-events: none;
	width: auto; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; color: var(--e-global-color-text); font-weight: 400;
}
.vpw-wc .elementor-widget .woocommerce #customer_details .form-row :is(#billing_country, #shipping_country).country_to_state--single { width: 100%; }

/* ==========================================================================
 * Mon compte, connecté (shortcode WooCommerce, prod) : menu en pastilles, tableau des commandes
 * aéré, boutons compacts, titres et adresses habillés. Les boîtes viennent du bloc « shortcodes » plus haut.
 * ========================================================================== */
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 0 40px; align-items: start;
}
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce:has(> .woocommerce-MyAccount-navigation) > * { grid-column: 1 / -1; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { display: none; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { float: none; width: auto; min-width: 0; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce > nav.woocommerce-MyAccount-navigation { grid-column: 1; padding: 25px 15px; } /* « nav » : passe devant le padding des boîtes (form.lost_reset_password pèse un élément de plus) */
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }

/* Menu : pastilles ; page en cours en magenta avec halo ; déconnexion à part */
.vpw-wc--myaccount .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vpw-wc--myaccount .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.vpw-wc--myaccount .woocommerce-MyAccount-navigation a {
	display: block; padding: 11px 18px;
	border: 2px solid transparent; border-radius: 999px;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-vpwmenu-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwmenu-font-size);
	font-weight: var(--e-global-typography-vpwmenu-font-weight);
	line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.vpw-wc--myaccount .woocommerce-MyAccount-navigation a:is(:hover, :focus-visible) { border-color: var(--e-global-color-vpwturq); color: var(--e-global-color-text); }
.vpw-wc--myaccount .woocommerce-MyAccount-navigation a:focus-visible { outline: 2px solid var(--e-global-color-text); outline-offset: 2px; }
.vpw-wc--myaccount .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--e-global-color-primary);
	background: color-mix(in srgb, var(--e-global-color-primary) 12%, transparent);
	box-shadow: 0 0 12px var(--e-global-color-vpwglow);
}
.vpw-wc--myaccount .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(215, 238, 254, .25);
}
.vpw-wc--myaccount .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--e-global-color-vpwrose); }

/* Contenu : textes, titres, liens */
.vpw-wc--myaccount .woocommerce-MyAccount-content { line-height: 1.6; }
.vpw-wc--myaccount .woocommerce-MyAccount-content > p { margin: 0 0 15px; }
.vpw-wc--myaccount .woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }
.vpw-wc--myaccount .woocommerce-MyAccount-content > p:not(:has(button, .button)) { color: var(--e-global-color-vpwhalo); }
.vpw-wc--myaccount .woocommerce-MyAccount-content > p strong { color: var(--e-global-color-text); }
.vpw-wc--myaccount .woocommerce-MyAccount-content :is(h2, h3, legend) {
	margin: 0 0 20px; padding: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: 1.15; text-transform: uppercase;
}

/* Avis (ex. confirmer le courriel) : texte et bouton sur une ligne, plus discret */
.vpw-wc--myaccount .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) { flex-wrap: nowrap; padding: 15px 15px 15px 25px; border-width: 2px; line-height: 1.4; }
.vpw-wc--myaccount .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button { flex: none; }

/* Boutons du contenu : taille « bouton petit » ; le bouton d'un formulaire garde la taille normale.
 * :not(#place_order) : la règle générale des boutons pèse un ID (#place_order dans son :is). */
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-orders-table, .woocommerce-table--order-downloads) .button:not(#place_order) {
	padding: 9px 20px; border-width: 2px; box-shadow: none; white-space: nowrap;
	font-size: var(--e-global-typography-vpwbtnp-font-size);
}
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-orders-table, .woocommerce-table--order-downloads) .button:not(#place_order):is(:hover, :focus-visible) { box-shadow: 0 0 12px var(--e-global-color-vpwglow); }

/* Tableau des commandes */
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table { width: 100%; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table thead th {
	padding: 0 12px 12px; vertical-align: bottom;
	color: var(--e-global-color-vpwhalo);
	font-family: var(--e-global-typography-vpwmenu-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
	font-weight: var(--e-global-typography-vpwmenu-font-weight);
	letter-spacing: .04em; text-transform: uppercase;
}
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody :is(th, td) { padding: 18px 12px; vertical-align: middle; font-weight: 400; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table :is(th, td):first-child { padding-left: 0; }
.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table :is(th, td):last-child { padding-right: 0; text-align: right; }
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-number a {
	color: var(--e-global-color-primary); text-decoration: none; white-space: nowrap;
	font-family: var(--e-global-typography-vpwlabl-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwlabl-font-size);
	font-weight: var(--e-global-typography-vpwlabl-font-weight);
}
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-number a:is(:hover, :focus-visible) { color: var(--e-global-color-text); }
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-date time { white-space: nowrap; }
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-total del { color: var(--e-global-color-vpwhalo); opacity: .7; }
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-total ins { text-decoration: none; }
.vpw-wc--myaccount .woocommerce-orders-table__cell-order-actions .button { margin: 4px 0 4px 8px; }
.vpw-wc--myaccount .woocommerce-pagination { display: flex; justify-content: space-between; gap: 10px; margin-top: 25px; }

/* Adresses : une carte par adresse, titre et lien « Modifier » sur une ligne */
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin: 20px 0 0; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Addresses::after { display: none; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address {
	float: none; width: auto; margin: 20px 0 0; padding: 25px;
	border: 1px solid rgba(215, 238, 254, .25); border-radius: 20px;
	background: rgba(215, 238, 254, .05);
}
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { margin: 0; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 15px; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title::before,
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title::after { display: none; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	float: none; padding: 7px 18px;
	border: 2px solid var(--e-global-color-vpwturq); border-radius: 999px;
	color: var(--e-global-color-text); text-decoration: none;
	font-family: var(--e-global-typography-vpwbtnp-font-family), sans-serif;
	font-size: var(--e-global-typography-vpwpeti-font-size);
	font-weight: var(--e-global-typography-vpwbtnp-font-weight);
	text-transform: uppercase;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address-title .edit:is(:hover, :focus-visible) { border-color: var(--e-global-color-primary); box-shadow: 0 0 12px var(--e-global-color-vpwglow); }
.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address address { margin: 0; line-height: 1.7; }

/* Détails du compte : aide sous le nom affiché, bloc mot de passe séparé par un filet */
.vpw-wc--myaccount .woocommerce-MyAccount-content #account_display_name_description { display: block; margin-top: 8px; color: var(--e-global-color-vpwhalo); font-size: var(--e-global-typography-vpwpeti-font-size); }
.vpw-wc--myaccount .woocommerce-MyAccount-content #account_display_name_description em { font-style: normal; }
.vpw-wc--myaccount .woocommerce-MyAccount-content fieldset { margin: 30px 0 0; padding: 25px 0 0; border: 0; border-top: 1px solid rgba(215, 238, 254, .25); }
.vpw-wc--myaccount .woocommerce-MyAccount-content fieldset > legend { float: left; width: 100%; }
.vpw-wc--myaccount .woocommerce-MyAccount-content fieldset > legend + * { clear: both; }
.vpw-wc--myaccount .woocommerce-MyAccount-content form > p:has(> button[type="submit"]) { margin-top: 30px; }

@media (max-width: 1024px) {
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { grid-column: 1; }
	/* Menu en rangée de pastilles au-dessus du contenu */
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation a { padding: 9px 16px; }
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 767px) {
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce > nav.woocommerce-MyAccount-navigation { padding: 15px; }
	/* Menu sur deux colonnes, déconnexion sur toute la largeur */
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; }
	.vpw-wc--myaccount .woocommerce-MyAccount-navigation a { padding: 8px 10px; font-size: 14px; text-align: center; }
	.vpw-wc--myaccount .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) { flex-wrap: wrap; padding: 15px 20px; }
	/* Commandes : WooCommerce empile chaque commande en fiche (libellé à gauche, valeur à droite) */
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody tr { display: block; padding: 10px 0; border-top: 1px solid rgba(215, 238, 254, .25); }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody tr:first-child { border-top: 0; padding-top: 0; }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody :is(th, td) { padding: 6px 0; border: 0; background: transparent; text-align: right; }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody :is(th, td)::before { color: var(--e-global-color-vpwhalo); font-weight: 400; }
	.vpw-wc--myaccount .elementor-widget-shortcode .woocommerce table.woocommerce-orders-table tbody th { display: block; } /* n° de commande, masqué par WooCommerce */
	.vpw-wc--myaccount .woocommerce-orders-table__cell-order-actions::before { display: none; }
	.vpw-wc--myaccount .woocommerce-orders-table__cell-order-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
	.vpw-wc--myaccount .woocommerce-orders-table__cell-order-actions .button { margin: 0; }
	.vpw-wc--myaccount .woocommerce-MyAccount-content .woocommerce-Address { padding: 20px; }
}