/* =============================================================================
   Vitrine « Bois · Pellets · Poêles » — socle + page d'accueil
   Mélange retenu par le client : en-tête, tiroir, livraison, engagements,
   présentation et pied de la direction C « Négoce » ; hero et appel final de la
   direction B « Forêt » ; cartes produit de la direction A « Comptoir ».
   Une seule famille : Manrope 400 / 600 / 800 (chargée dans templates/header.php).
   Un seul dispositif décoratif de marque : le carré plein --primary devant
   chaque titre de section (.vt-h2::before).

   COULEURS DE MARQUE — lib/Theme.php injecte sur :root, après cette feuille :
     --primary-color, --secondary-color, --accent-color, --on-primary.
   Correspondance avec les jetons de la vitrine :
     --primary       <- --primary-color    (repli #04922d) : boutons pleins, prix, carré des titres
     --secondary     <- --secondary-color  (repli #0d4a24) : barre supérieure, voile du hero, appel final
     --accent        <- --accent-color     (repli #e8a33d) : « Livraison offerte », bouton « Me rappeler »
     --sur-primaire  <- --on-primary       (repli #fff)    : texte posé sur la primaire
   Le texte posé sur la secondaire est blanc : la secondaire est foncée par convention.
   Neutres fixes : blanc, #F5F3EF (gris chaud), #1F1D1A (anthracite). Vert WhatsApp seule exception.

   Les pages catalogue, fiche et contact reçoivent chacune une feuille
   assets/css/page-{catalogue|detail|contact}.css chargée après celle-ci par header.php.
   ============================================================================= */

/* ============================================================
   0. JETONS + RESET
   ============================================================ */
:root {
	--primary: var(--primary-color, #04922d);
	--secondary: var(--secondary-color, #0d4a24);
	--accent: var(--accent-color, #e8a33d);
	--sur-primaire: var(--on-primary, #ffffff);

	/* Dérivés de la primaire (repli fixe, puis color-mix quand il est pris en charge) */
	--primaire-pale: #e9efeb;
	--primaire-pale: color-mix(in srgb, var(--primary) 9%, #ffffff);
	--primaire-filet: #c5d4cb;
	--primaire-filet: color-mix(in srgb, var(--primary) 28%, #ffffff);
	--primaire-fonce: #174a2e;
	--primaire-fonce: color-mix(in srgb, var(--primary) 82%, #000000);
	--secondaire-clair: #1a3b2a;
	--secondaire-clair: color-mix(in srgb, var(--secondary) 86%, #ffffff);
	/* Voile du hero : sombre quasi neutre (la secondaire n'y entre qu'à 30 %) pour que la photo garde ses couleurs */
	--voile-teinte: #0d110e;
	--voile-teinte: color-mix(in srgb, var(--secondary) 30%, #0b0d0b);
	--voile-haut: rgba(13, 17, 14, .42);
	--voile-haut: color-mix(in srgb, var(--voile-teinte) 42%, transparent);
	--voile-milieu: rgba(13, 17, 14, .6);
	--voile-milieu: color-mix(in srgb, var(--voile-teinte) 60%, transparent);
	--voile-bas: rgba(13, 17, 14, .9);
	--voile-bas: color-mix(in srgb, var(--voile-teinte) 90%, transparent);
	--accent-fonce: #c98a2a;
	--accent-fonce: color-mix(in srgb, var(--accent) 85%, #000000);

	--blanc: #ffffff;
	--gris: #f5f3ef;
	--gris-2: #ece8e1;
	--texte: #1f1d1a;
	--texte-2: #5e584f;
	--texte-3: #8a8378;
	--filet: #e3ded5;
	--pied: #1f1d1a;
	--pied-2: #171512;
	--sur-sombre: rgba(255, 255, 255, .92);
	--sur-sombre-2: rgba(255, 255, 255, .66);
	--filet-sombre: rgba(255, 255, 255, .14);
	--filet-sombre-2: rgba(255, 255, 255, .3);
	--whatsapp: #25d366;
	--whatsapp-2: #1db85a;
	--ok: #1f7a3f;
	--erreur: #b3261e;

	--police: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ombre: 0 10px 26px rgba(31, 29, 26, .10);
	--ombre-carte: 0 1px 2px rgba(31, 29, 26, .05), 0 10px 28px rgba(31, 29, 26, .07);
	--ombre-carte-haute: 0 2px 4px rgba(31, 29, 26, .06), 0 24px 48px rgba(31, 29, 26, .14);
	--rayon: 6px;
	--rayon-carte: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Défilement doux seulement lors d'une navigation par ancre (clic, clavier) : jamais pour window.scrollTo() */
html:focus-within { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--police);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--texte);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
body.vt-tiroir-ouvert { overflow: hidden; }
h1, h2, h3, h4, h5, p, ul, ol, li, figure, figcaption, address, form, table { margin: 0; padding: 0; font-style: normal; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
p { color: var(--texte-2); }
[id] { scroll-margin-top: 110px; }
.vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-main { display: block; }

/* ============================================================
   1. VOCABULAIRE — conteneur, titres (carré de marque), boutons, badges, champs, apparition
   ============================================================ */
.vt-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.vt-section { padding: 52px 0 60px; }

/* Titre de section : LE dispositif de marque, un carré plein primaire de 14 px devant le texte */
.vt-h2 { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; letter-spacing: -.01em; color: var(--texte); text-wrap: balance; }
.vt-h2::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--primary); }
.vt-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.vt-tete > div:first-child { min-width: 0; }
.vt-tete__chapo { max-width: 620px; margin-top: 8px; }

/* Boutons : plein primaire par défaut ; contour, sombre, blanc, accent, WhatsApp */
.vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--primary); border-radius: var(--rayon); background: var(--primary); color: var(--sur-primaire); font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.vt-btn svg { width: 18px; height: 18px; }
.vt-btn:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: var(--sur-primaire); }
.vt-btn--contour { background: var(--blanc); color: var(--primary); }
.vt-btn--contour:hover { background: var(--primaire-pale); border-color: var(--primary); color: var(--primary); }
.vt-btn--sombre { background: var(--secondary); border-color: var(--secondary); color: #ffffff; }
.vt-btn--sombre:hover { background: var(--secondaire-clair); border-color: var(--secondaire-clair); color: #ffffff; }
.vt-btn--blanc { background: #ffffff; border-color: #ffffff; color: var(--secondary); }
.vt-btn--blanc:hover { background: var(--gris); border-color: var(--gris); color: var(--secondary); }
.vt-btn--accent { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }  /* texte blanc (choix du client) : ambre assombri pour garder le contraste */
.vt-btn--accent:hover { background: color-mix(in srgb, var(--accent) 72%, #000000); border-color: color-mix(in srgb, var(--accent) 72%, #000000); color: #ffffff; }
.vt-btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #ffffff; }
.vt-btn--whatsapp:hover { background: var(--whatsapp-2); border-color: var(--whatsapp-2); color: #ffffff; }
.vt-btn--large { width: 100%; min-height: 50px; font-size: 1rem; }
.vt-btn--large-auto { min-height: 50px; padding: 0 24px; font-size: 1rem; }
.vt-btn--petit { min-height: 40px; padding: 0 14px; font-size: .88rem; }
.vt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.vt-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--primary); white-space: nowrap; transition: color .2s, gap .2s var(--ease); }
.vt-lien svg { width: 18px; height: 18px; }
.vt-lien:hover { color: var(--primaire-fonce); gap: 12px; }

.vt-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--filet); border-radius: 4px; background: var(--gris); font-weight: 600; font-size: .74rem; letter-spacing: .01em; color: var(--texte-2); white-space: nowrap; }
.vt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.vt-champ { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); color: var(--texte); font-size: .95rem; line-height: 40px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.vt-champ::placeholder { color: var(--texte-3); }
.vt-champ:hover { border-color: var(--texte-3); }
.vt-champ:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primaire-pale); }
select.vt-champ { padding-right: 38px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E584F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/18px 18px; }
textarea.vt-champ { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.vt-etiq { display: block; font-weight: 600; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 5px; }

.vt-coche { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: .93rem; color: var(--texte); }
.vt-coche svg { width: 18px; height: 18px; color: var(--primary); margin-top: 3px; }
.vt-est-ok { color: var(--ok); }
.vt-est-erreur { color: var(--erreur); }

/* Apparition au défilement : assets/js/main.js pose .est-visible (IntersectionObserver) */
.vt-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--delai, 0s); }
.vt-reveal.est-visible { opacity: 1; transform: none; }

/* Point pratique / engagement : icône dans un carré pâle */
.vt-point__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--rayon); background: var(--primaire-pale); color: var(--primary); }
.vt-point__ico svg { width: 22px; height: 22px; }

/* ============================================================
   2. EN-TÊTE — barre fine sur la secondaire, barre de menu blanche, bouton « Ma commande » plein
   ============================================================ */
.vt-entete { position: sticky; top: 0; z-index: 60; }
.vt-top { background: var(--secondary); color: #ffffff; font-size: .82rem; font-weight: 600; }
.vt-top__in { display: flex; align-items: center; gap: 24px; height: 34px; }
.vt-top__item { display: inline-flex; align-items: center; gap: 7px; color: #ffffff; white-space: nowrap; min-width: 0; }
.vt-top__item svg { width: 14px; height: 14px; opacity: .85; }
.vt-top__item:hover { color: #ffffff; }
a.vt-top__item:hover { text-decoration: underline; text-underline-offset: 3px; }
.vt-top__offre { margin-left: auto; color: #ffffff; overflow: hidden; text-overflow: ellipsis; }
.vt-top__offre b { color: var(--accent); font-weight: 800; }
.vt-hd { position: relative; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.vt-hd__in { display: flex; align-items: center; gap: 16px; height: 66px; }
.vt-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--texte); min-width: 0; }
.vt-logo:hover { color: var(--texte); }
.vt-logo__img { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.vt-logo__marque { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary); color: var(--sur-primaire); border-radius: var(--rayon); }
.vt-logo__marque svg { width: 22px; height: 22px; }
.vt-logo__nom { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1; letter-spacing: -.01em; color: var(--texte); white-space: nowrap; }
.vt-logo__sous { display: block; margin-top: 4px; font-weight: 600; font-size: .68rem; line-height: 1; letter-spacing: .03em; color: var(--texte-3); white-space: nowrap; }
.vt-hd__nav { margin: 0 auto; }
.vt-hd__nav ul { display: flex; align-items: center; gap: 2px; }
.vt-hd__nav a { display: block; padding: 9px 11px; border-radius: var(--rayon); font-weight: 600; font-size: .9rem; white-space: nowrap; color: var(--texte); transition: background .2s, color .2s; }
.vt-hd__nav a:hover { background: var(--gris); color: var(--primary); }
.vt-hd__nav a.vt-est-actif, .vt-hd__nav a.vt-est-actif:hover { background: var(--primary); color: var(--sur-primaire); font-weight: 700; }  /* page en cours : pastille pleine, comme le bouton de commande */
.vt-hd__nav .vt-hd__nav-tel { display: none; }
.vt-hd__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Sélecteur de langue : bouton drapeau + code, menu déroulant (ouvert = .vt-est-ouvert, géré par main.js) */
.vt-langue { position: relative; flex: none; }
.vt-langue__btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 10px 0 11px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); color: var(--texte); font-weight: 800; font-size: .82rem; letter-spacing: .02em; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.vt-langue__btn:hover, .vt-langue.vt-est-ouvert .vt-langue__btn { border-color: var(--texte); color: var(--texte); }
.vt-langue__btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primaire-pale); }
.vt-drapeau { display: block; width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(31, 29, 26, .12); }
.vt-langue__fleche { width: 14px; height: 14px; color: var(--texte-3); transition: transform .2s var(--ease); }
.vt-langue.vt-est-ouvert .vt-langue__fleche { transform: rotate(180deg); }
.vt-langue__menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 188px; margin: 0; padding: 6px; list-style: none; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 14px 30px rgba(31, 29, 26, .14); }
.vt-langue.vt-est-ouvert .vt-langue__menu { display: block; }
.vt-langue__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon); font-weight: 600; font-size: .9rem; color: var(--texte); white-space: nowrap; transition: background .15s, color .15s; }
.vt-langue__item .vt-drapeau { width: 20px; height: 13px; }
.vt-langue__item:hover, .vt-langue__item:focus-visible { background: var(--gris); color: var(--primary); outline: none; }
.vt-langue__item[aria-current] { background: var(--primaire-pale); color: var(--primary); font-weight: 700; }
.vt-hd__panier { padding: 0 16px; }
.vt-hd__panier svg { width: 19px; height: 19px; }
.vt-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sur-primaire); color: var(--primary); font-weight: 800; font-size: .78rem; line-height: 1; transition: transform .25s var(--ease); }
.vt-btn:hover .vt-compte { background: var(--sur-primaire); color: var(--primary); }
.vt-compte.vt-est-anime { transform: scale(1.25); }
.vt-hd__burger { display: none; width: 44px; height: 44px; border-radius: var(--rayon); color: var(--texte); border: 1.5px solid var(--filet); align-items: center; justify-content: center; transition: border-color .2s, color .2s; }
.vt-hd__burger:hover { border-color: var(--texte); color: var(--texte); }
.vt-hd__burger svg { width: 22px; height: 22px; }
.vt-hd__burger .vt-hd__burger-x, .vt-hd.vt-est-ouvert .vt-hd__burger .vt-hd__burger-lignes { display: none; }
.vt-hd.vt-est-ouvert .vt-hd__burger .vt-hd__burger-x { display: block; }

/* Bandeau « Mode prévisualisation » (token de démo) */
.vt-apercu { background: var(--gris); border-bottom: 1px solid var(--filet); font-size: .84rem; color: var(--texte-2); }
.vt-apercu__in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-top: 8px; padding-bottom: 8px; }
.vt-apercu__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 4px; background: var(--accent); color: var(--texte); font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.vt-apercu strong { color: var(--texte); }

/* ============================================================
   3. TIROIR « MA COMMANDE » — glisse depuis la droite, voile anthracite (écrit dans <body>)
   ============================================================ */
.vt-voile { position: fixed; inset: 0; z-index: 90; background: rgba(31, 29, 26, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.vt-voile.vt-est-ouvert { opacity: 1; visibility: visible; transition: opacity .3s; }
.vt-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--blanc); box-shadow: -12px 0 32px rgba(31, 29, 26, .18); transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.vt-tiroir.vt-est-ouvert { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.vt-tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--filet); }
.vt-tiroir__titre { font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--texte); }
.vt-tiroir__titre small { display: block; margin-top: 3px; font-weight: 600; font-size: .78rem; color: var(--texte-3); }
.vt-tiroir__fermer { flex: none; width: 40px; height: 40px; border-radius: var(--rayon); display: inline-flex; align-items: center; justify-content: center; color: var(--texte-2); border: 1.5px solid var(--filet); transition: border-color .2s, color .2s; }
.vt-tiroir__fermer:hover { border-color: var(--texte); color: var(--texte); }
.vt-tiroir__fermer svg { width: 18px; height: 18px; }
.vt-tiroir__corps { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px; }
.vt-tiroir__vide { padding: 40px 10px; text-align: center; font-size: .95rem; color: var(--texte-3); transition: color .2s; }
.vt-tiroir__vide[hidden] { display: none; }
.vt-tiroir__vide.vt-est-erreur { color: var(--erreur); }
.vt-tiroir__vide svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--filet); }
.vt-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.vt-ligne__nom { font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--texte); }
.vt-ligne__var { font-size: .82rem; color: var(--texte-2); }
.vt-ligne__prix { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-weight: 800; font-size: .98rem; color: var(--texte); white-space: nowrap; text-align: right; }
.vt-ligne__bas { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.vt-qte { display: inline-flex; align-items: center; border: 1.5px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.vt-qte button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--texte); background: var(--blanc); transition: background .2s, color .2s; }
.vt-qte button:hover { background: var(--gris); color: var(--primary); }
.vt-qte button svg { width: 14px; height: 14px; }
.vt-qte output { min-width: 34px; text-align: center; font-weight: 800; font-size: .92rem; color: var(--texte); }
.vt-ligne__suppr { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .8rem; color: var(--texte-3); transition: color .2s; }
.vt-ligne__suppr:hover { color: var(--erreur); }
.vt-ligne__suppr svg { width: 14px; height: 14px; }
.vt-tiroir__pied { padding: 16px 22px 20px; border-top: 1px solid var(--filet); background: var(--gris); }
.vt-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 1.05rem; color: var(--texte); }
.vt-total output { font-size: 1.3rem; color: var(--primary); white-space: nowrap; }
.vt-total small { display: block; font-weight: 600; font-size: .76rem; color: var(--texte-3); }
.vt-tiroir__commune { display: block; margin-top: 14px; }
.vt-tiroir__btns { display: grid; gap: 8px; margin-top: 12px; }
/* Page de commande : bouton principal, logos des moyens acceptés, puis l'envoi par message en second choix */
.vt-tiroir__caisse { width: 100%; margin-top: 12px; }
.vt-tiroir__caisse[aria-disabled="true"] { opacity: .55; }
.vt-tiroir__ou { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .76rem; color: var(--texte-3); }
.vt-tiroir__ou::before, .vt-tiroir__ou::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.vt-tiroir__btns--second { margin-top: 8px; }
.vt-tiroir__btns--second .vt-btn { min-height: 40px; font-size: .86rem; }

/* Logos des moyens de paiement acceptés par le vendeur (templates/partials/paiements.php) */
.vt-paie { margin-top: 12px; text-align: center; }
.vt-paie__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vt-paie__logo { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 36px; border: 1px solid var(--filet); border-radius: 5px; background: #ffffff; }
.vt-paie__logo svg { display: block; width: 60px; height: 36px; }
.vt-paie__note { margin-top: 6px; font-size: .74rem; color: var(--texte-3); }
.vt-tiroir__note { margin-top: 10px; font-size: .78rem; line-height: 1.45; color: var(--texte-3); }

/* ============================================================
   4. HERO (direction B) — photo pleine largeur sous voile secondaire, promesse en très grand,
      bande des trois entrées ; puis les quatre arguments sur fond anthracite
   ============================================================ */
.vt-hero { position: relative; overflow: hidden; background: var(--secondary); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--sur-sombre); }
.vt-hero__photo { position: absolute; inset: 0; z-index: 0; }
.vt-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Voile : une teinte sombre, trois opacités (42 % en haut, 90 % en bas) — seul dégradé du site */
.vt-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--voile-haut) 0%, var(--voile-milieu) 55%, var(--voile-bas) 100%); }
.vt-hero__in { position: relative; z-index: 1; padding-top: 40px; }
.vt-hero__contenu { max-width: 860px; }
.vt-hero__sur { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-sombre-2); }
.vt-hero__sur svg { width: 16px; height: 16px; color: var(--accent); }
.vt-h1 { margin-top: 14px; font-weight: 800; font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.08; letter-spacing: -.02em; color: #ffffff; text-wrap: balance; }
.vt-h1 em { font-style: normal; color: var(--accent); }  /* même ambre que les icônes de la bande des familles (choix du client) */
.vt-hero__texte { margin-top: 14px; max-width: 640px; font-size: 1.02rem; color: var(--sur-sombre-2); }
/* Bande des trois entrées : trois colonnes sur la secondaire, séparées par un filet, posée au bas du hero */
.vt-entrees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border: 1px solid var(--filet-sombre-2); border-bottom: 0; background: var(--secondary); border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; }
.vt-entree { display: flex; align-items: center; gap: 16px; padding: 16px 22px; color: var(--sur-sombre); min-width: 0; transition: background .25s; }
.vt-entree + .vt-entree { border-left: 1px solid var(--filet-sombre-2); }
.vt-entree:hover { background: var(--primary); color: var(--sur-primaire); }  /* survol : la primaire pleine, pas un voile grisé */
.vt-entree:hover .vt-entree__ico, .vt-entree:hover .vt-entree__lib { color: var(--sur-primaire); }
.vt-entree:hover .vt-entree__prix { color: var(--sur-primaire); opacity: .88; }
.vt-entree__ico { width: 40px; height: 40px; color: var(--accent); }
.vt-entree__texte { min-width: 0; }
.vt-entree__lib { display: block; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.1; color: #ffffff; }
.vt-entree__prix { display: block; margin-top: 4px; font-size: .88rem; color: var(--sur-sombre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-entree__fleche { margin-left: auto; width: 18px; height: 18px; color: var(--sur-sombre-2); transition: transform .25s var(--ease); }
.vt-entree:hover .vt-entree__fleche { transform: translateX(4px); color: var(--sur-primaire); }
/* Quatre arguments : bande anthracite sous le hero */
.vt-args { background: var(--pied); color: var(--sur-sombre); border-top: 1px solid var(--filet-sombre); }
.vt-args__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-args li { display: flex; align-items: center; gap: 12px; padding: 16px 20px 16px 0; font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--sur-sombre); }
.vt-args li + li { padding-left: 20px; border-left: 1px solid var(--filet-sombre); }
.vt-args svg { width: 22px; height: 22px; color: var(--accent); }

/* ============================================================
   5. PRODUITS (direction A) — intro sur deux colonnes, onglets, cartes généreuses à variantes
   ============================================================ */
.vt-prod { padding: 64px 0 72px; background: var(--blanc); }
.vt-tete--onglets { margin-bottom: 36px; }
.vt-onglets { display: flex; flex: none; flex-wrap: wrap; gap: 8px; }
.vt-onglet { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); font-weight: 600; font-size: .9rem; color: var(--texte); transition: background .2s, color .2s, border-color .2s; }
.vt-onglet:hover { border-color: var(--primary); color: var(--primary); background: var(--blanc); }
.vt-onglet[aria-pressed="true"], .vt-onglet[aria-pressed="true"]:hover { background: var(--primary); border-color: var(--primary); color: var(--sur-primaire); }
.vt-onglet[hidden] { display: none; }
.vt-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.vt-grille__aucun { margin-top: 8px; padding: 24px; border: 1px dashed var(--filet); border-radius: var(--rayon-carte); text-align: center; }
.vt-grille__aucun[hidden] { display: none; }
.vt-grille__aucun a { color: var(--primary); font-weight: 600; }
.vt-grille__aucun a:hover { color: var(--primaire-fonce); text-decoration: underline; }

.vt-carte { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-carte); overflow: hidden; box-shadow: var(--ombre-carte); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .55s var(--ease); }
.vt-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-carte-haute); }
.vt-carte.vt-reveal.est-visible:hover { transform: translateY(-5px); }
.vt-carte[hidden] { display: none; }
.vt-carte__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris); }
.vt-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.vt-carte:hover .vt-carte__photo img { transform: scale(1.04); }
.vt-carte__sans-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primaire-filet); }
.vt-carte__sans-photo svg { width: 64px; height: 64px; }
.vt-carte__corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.vt-carte__famille { font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.vt-carte__nom { margin-top: 8px; font-weight: 800; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.01em; color: var(--texte); min-height: 2.5em; }
.vt-carte__nom a { color: var(--texte); transition: color .2s; }
.vt-carte__nom a:hover { color: var(--primary); }
.vt-carte .vt-badges { margin-top: 12px; }
.vt-carte__label { display: block; margin-top: 18px; margin-bottom: 6px; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.vt-carte__select { height: 46px; line-height: 42px; border-radius: 8px; font-weight: 600; font-size: .92rem; }
.vt-carte__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; }
.vt-carte__prix strong { font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; color: var(--primary); white-space: nowrap; }
.vt-carte__prix span { font-size: .82rem; color: var(--texte-2); }
/* Promotion : ancien prix barré + pourcentage en pastille ; étiquette « Promo » sur la photo */
.vt-prix-avant { font-weight: 600; font-size: 1rem; color: var(--texte-3); text-decoration: line-through; text-decoration-thickness: 1.5px; white-space: nowrap; }
.vt-remise { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--primary); color: var(--sur-primaire); font-style: normal; font-weight: 800; font-size: .78rem; line-height: 1.2; white-space: nowrap; }
.vt-carte__prix .vt-remise { align-self: center; }
.vt-carte__promo { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: var(--primary); color: var(--sur-primaire); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.vt-carte__promo[hidden], .vt-prix-avant[hidden], .vt-remise[hidden] { display: none; }
.vt-carte__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; }
.vt-carte__actions .vt-btn { flex: 1 1 auto; min-height: 48px; }
.vt-carte__actions .vt-lien { flex: none; }
.vt-prod__pied { display: flex; justify-content: center; margin-top: 40px; }

/* Catalogue vide */
.vt-vide { text-align: center; padding: 48px 24px; border: 1px dashed var(--filet); border-radius: var(--rayon-carte); }
.vt-vide svg { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--primaire-filet); }
.vt-vide h3 { font-weight: 800; font-size: 1.1rem; color: var(--texte); }
.vt-vide p { margin: 8px auto 18px; max-width: 460px; }

/* ============================================================
   6. LIVRAISON (direction C) — tableau clair (zone, frais, condition, délai), code postal, trois points pratiques
   ============================================================ */
.vt-livraison { padding: 52px 0 60px; background: var(--gris); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.vt-livraison__in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.vt-table { width: 100%; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.vt-table table { width: 100%; }
.vt-table th { padding: 12px 16px; text-align: left; font-weight: 800; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); background: var(--gris); border-bottom: 1px solid var(--filet); }
.vt-table td { padding: 14px 16px; font-size: .93rem; line-height: 1.45; color: var(--texte-2); border-bottom: 1px solid var(--filet); vertical-align: top; }
.vt-table tr:last-child td { border-bottom: 0; }
.vt-table td:first-child { font-weight: 800; color: var(--texte); }
.vt-table td b { font-weight: 800; color: var(--texte); white-space: nowrap; }
.vt-table td b.vt-est-ok, .vt-table td .vt-est-ok { color: var(--ok); }
.vt-table__note { padding: 12px 16px; border-top: 1px solid var(--filet); font-size: .84rem; color: var(--texte-3); background: var(--blanc); }
.vt-table__note a { color: var(--primary); font-weight: 600; }
.vt-table__note a:hover { color: var(--primaire-fonce); text-decoration: underline; }
.vt-cp { margin-top: 16px; }
.vt-cp__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; max-width: 420px; }
.vt-cp__form label { display: block; min-width: 0; }
.vt-cp__form .vt-btn { min-height: 44px; padding: 0 16px; }
.vt-cp__res { max-width: 420px; margin-top: 14px; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.vt-cp__res[hidden] { display: none; }
.vt-cp__zone { font-weight: 800; font-size: 1rem; color: var(--texte); }
.vt-cp__zone.vt-est-erreur { color: var(--erreur); }
.vt-cp__ligne { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9rem; color: var(--texte-2); }
.vt-cp__ligne b { font-weight: 800; color: var(--texte); text-align: right; }
.vt-cp__ligne b.vt-est-ok { color: var(--ok); }
.vt-cp__note { margin-top: 8px; font-size: .8rem; color: var(--texte-3); }
.vt-cp__note:empty { display: none; }
.vt-pratique { display: grid; gap: 12px; }
.vt-point { display: flex; gap: 14px; padding: 18px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.vt-point h3 { font-weight: 800; font-size: .98rem; line-height: 1.3; color: var(--texte); }
.vt-point p { margin-top: 4px; font-size: .88rem; }

/* ============================================================
   7. ENGAGEMENTS (direction C) — cartes blanches à bord 1 px
   ============================================================ */
.vt-conf { padding: 52px 0 60px; background: var(--blanc); }
.vt-conf__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vt-eng { padding: 22px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); transition: box-shadow .25s var(--ease), border-color .25s, opacity .55s var(--ease), transform .55s var(--ease); }
.vt-eng:hover { box-shadow: var(--ombre); border-color: var(--primaire-filet); }
.vt-eng .vt-point__ico { width: 46px; height: 46px; }
.vt-eng h3 { font-weight: 800; font-size: 1.02rem; line-height: 1.3; color: var(--texte); margin-top: 14px; }
.vt-eng p { margin-top: 6px; font-size: .9rem; }

/* ============================================================
   8. PRÉSENTATION DU VENDEUR (direction C) — texte à gauche, photo à droite, chiffres en texte sobre
   ============================================================ */
.vt-apropos { padding: 60px 0; background: var(--gris); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.vt-apropos__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.vt-apropos__texte p { margin-top: 16px; }
.vt-apropos__chiffres { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 16px; font-weight: 600; font-size: .9rem; color: var(--texte-2); }
.vt-apropos__chiffres b { font-weight: 800; color: var(--texte); }
.vt-apropos__points { margin-top: 22px; display: grid; gap: 12px; }
.vt-apropos__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vt-apropos__photo { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); background: var(--blanc); }
.vt-apropos__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vt-apropos__legende { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--filet); font-size: .86rem; color: var(--texte-2); background: var(--blanc); }
.vt-apropos__legende svg { width: 16px; height: 16px; color: var(--primary); }

/* ============================================================
   9. APPEL FINAL (direction B) — fond secondaire ; texte et boutons à gauche, « Être rappelé » à droite
   ============================================================ */
.vt-cta { padding: 72px 0; background: var(--secondary); color: var(--sur-sombre); }
.vt-cta__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.vt-cta__titre { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; color: #ffffff; text-wrap: balance; }
.vt-cta__titre::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--accent); }
.vt-cta__texte { margin-top: 16px; max-width: 540px; font-size: 1.02rem; color: var(--sur-sombre-2); }
.vt-cta__texte a { color: #ffffff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.vt-cta__texte a:hover { color: var(--accent); }
.vt-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vt-cta__horaires { margin-top: 14px; font-size: .9rem; color: var(--sur-sombre-2); }
.vt-rappel { padding: 28px 28px 30px; background: var(--secondaire-clair); border: 1px solid var(--filet-sombre-2); border-radius: var(--rayon); }
.vt-rappel__titre { font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: #ffffff; }
.vt-rappel p { margin-top: 8px; font-size: .95rem; color: var(--sur-sombre-2); }
.vt-rappel__form { display: flex; gap: 10px; margin-top: 18px; }
.vt-rappel__form .vt-champ { flex: 1 1 auto; min-width: 0; height: 48px; line-height: 44px; border-color: var(--filet-sombre-2); background: var(--secondary); color: #ffffff; }
.vt-rappel__form .vt-champ::placeholder { color: var(--sur-sombre-2); }
.vt-rappel__form .vt-champ:hover { border-color: var(--sur-sombre-2); }
.vt-rappel__form .vt-champ:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--filet-sombre); }
.vt-rappel__form .vt-btn { flex: none; min-height: 48px; }
.vt-rappel__ok { margin-top: 12px; min-height: 1.5em; font-weight: 600; font-size: .92rem; color: var(--accent); }
.vt-rappel__ok.vt-est-erreur { color: #ffb4ad; }

/* ============================================================
   10. PIED DE PAGE (direction C) — anthracite, quatre colonnes, mentions
   ============================================================ */
.vt-pied { background: var(--pied); color: #d9d4cb; padding: 52px 0 0; }
.vt-pied__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.vt-pied .vt-logo, .vt-pied .vt-logo__nom { color: #ffffff; }
.vt-pied .vt-logo:hover { color: #ffffff; }
.vt-pied .vt-logo__sous { color: #a39c90; }
.vt-pied .vt-logo__img { background: #ffffff; padding: 4px; border-radius: 4px; }
.vt-pied__texte { margin-top: 14px; font-size: .9rem; color: #a39c90; max-width: 340px; }
.vt-pied__reseaux { display: flex; gap: 8px; margin-top: 16px; }
.vt-pied__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--rayon); color: #d9d4cb; transition: border-color .2s, color .2s, background .2s; }
.vt-pied__reseaux a:hover { border-color: #ffffff; color: #ffffff; background: rgba(255, 255, 255, .06); }
.vt-pied__reseaux svg { width: 18px; height: 18px; }
.vt-pied__titre { font-weight: 800; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: #ffffff; margin-bottom: 14px; }
.vt-pied li { font-size: .92rem; line-height: 1.5; margin-top: 8px; color: #d9d4cb; }
.vt-pied li a { color: #d9d4cb; transition: color .2s; }
.vt-pied li a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.vt-pied__adresse { font-size: .92rem; line-height: 1.6; color: #d9d4cb; }
.vt-pied__adresse a { color: #ffffff; font-weight: 600; transition: color .2s; }
.vt-pied__adresse a:hover { color: var(--accent); }
.vt-pied__horaires { margin-top: 10px; font-size: .9rem; color: #a39c90; }
.vt-pied__bas { margin-top: 44px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .1); background: var(--pied-2); }
.vt-pied__bas-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .82rem; color: #a39c90; }
.vt-pied__bas a { color: #a39c90; }
.vt-pied__bas a:hover { color: #ffffff; }
/* Ligne d'identité légale (raison sociale, forme, SIRET, RCS, TVA, siège) : discrète, séparateur « · », retours naturels */
.vt-pied__legal { margin-top: 8px; font-size: .78rem; line-height: 1.6; color: var(--texte-3); }
.vt-pied__legal span { white-space: nowrap; }                 /* chaque morceau reste entier… */
.vt-pied__legal span.vt-pied__legal-sep { white-space: normal; } /* …et la ligne se replie sur les séparateurs « · » */

/* ============================================================
   11. PAGES SECONDAIRES (socle de transition) — en-tête de page, fil d'Ariane, message provisoire
      Réutilisés par page-catalogue.css, page-detail.css et page-contact.css.
   ============================================================ */
.vt-page-tete { padding: 32px 0 28px; background: var(--gris); border-bottom: 1px solid var(--filet); }
.vt-page-tete__titre { margin-top: 10px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.vt-page-tete__chapo { margin-top: 10px; max-width: 640px; }
.vt-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--texte-3); }
.vt-fil a { color: var(--texte-2); transition: color .2s; }
.vt-fil a:hover { color: var(--primary); }
.vt-fil span:last-child { color: var(--texte); }
.vt-provisoire { padding: 32px; border: 1px dashed var(--filet); border-radius: var(--rayon-carte); text-align: center; }
.vt-provisoire a { color: var(--primary); font-weight: 600; }
.vt-provisoire a:hover { color: var(--primaire-fonce); text-decoration: underline; }

/* ============================================================
   12. ADAPTATIF — ≤ 1000 : menu replié, hero en une colonne, cartes 2 ; ≤ 640 : cartes 1, tableau empilé
   ============================================================ */
@media (max-width: 1000px) {
	.vt-wrap { padding: 0 24px; }
	[id] { scroll-margin-top: 104px; }
	.vt-top__horaires { display: none; }
	.vt-hd__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px 24px 18px; background: var(--blanc); border-bottom: 1px solid var(--filet); box-shadow: 0 14px 30px rgba(31, 29, 26, .12); }
	.vt-hd.vt-est-ouvert .vt-hd__nav { display: block; }
	.vt-hd__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.vt-hd__nav a { padding: 12px 10px; border-radius: var(--rayon); font-size: 1rem; }
	.vt-hd__nav .vt-hd__nav-tel { display: inline-flex; width: 100%; margin-top: 12px; }
	.vt-hd__burger { display: inline-flex; }
	.vt-hd__actions { margin-left: auto; }
	.vt-hero { min-height: 0; }
	.vt-hero__in { padding-top: 36px; }
	.vt-entree { padding: 14px 16px; gap: 12px; }
	.vt-entree__ico { width: 32px; height: 32px; }
	.vt-entree__lib { font-size: 1.05rem; }
	.vt-entree__fleche { display: none; }
	.vt-args__in { grid-template-columns: 1fr 1fr; }
	.vt-args li { padding: 13px 16px 13px 0; }
	.vt-args li:nth-child(3) { padding-left: 0; border-left: 0; }
	.vt-args li:nth-child(n+3) { border-top: 1px solid var(--filet-sombre); }
	.vt-tete { flex-direction: column; align-items: flex-start; gap: 16px; }
	.vt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.vt-livraison__in { grid-template-columns: 1fr; }
	.vt-pratique { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vt-conf__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vt-apropos__in { grid-template-columns: 1fr; gap: 28px; }
	.vt-apropos__photo img { aspect-ratio: 16 / 9; }
	.vt-cta__in { grid-template-columns: 1fr; gap: 32px; }
	.vt-pied__in { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px) {
	.vt-wrap { padding: 0 16px; }
	[id] { scroll-margin-top: 100px; }
	.vt-top__in { gap: 14px; }
	.vt-top__offre { display: none; }
	.vt-hd__in { gap: 8px; height: 62px; }
	.vt-hd__nav { padding: 8px 16px 16px; }
	.vt-logo { gap: 8px; min-width: 0; flex: 1 1 auto; }  /* cède la place au sélecteur de langue : le nom passe à la ligne */
	.vt-logo__nom { font-size: .95rem; white-space: normal; }
	.vt-logo__sous { display: none; }
	.vt-logo__img { height: 36px; max-width: 140px; }
	/* Actions compactes : drapeau seul, panier icône + compteur, burger 36 px — le nom du vendeur garde la place */
	.vt-hd__actions { gap: 6px; }
	.vt-langue__btn { height: 36px; padding: 0 7px; gap: 0; }
	.vt-langue__fleche, .vt-langue__code { display: none; }
	.vt-langue__btn svg { width: 22px; height: 15px; }
	.vt-hd__burger { width: 36px; height: 36px; }
	.vt-hd__panier { padding: 0 8px; min-height: 36px; gap: 5px; }
	.vt-hd__panier svg { width: 17px; height: 17px; }
	.vt-hd__panier .vt-compte { min-width: 18px; height: 18px; padding: 0 5px; font-size: .72rem; }
	.vt-hd__panier .vt-hd__panier-txt { display: none; }
	.vt-apercu__in { font-size: .8rem; }
	.vt-hero__in { padding-top: 30px; }
	.vt-h1 { font-size: 1.85rem; }
	.vt-hero__texte { font-size: .95rem; }
	.vt-entrees { grid-template-columns: 1fr; margin-top: 24px; }
	.vt-entree + .vt-entree { border-left: 0; border-top: 1px solid var(--filet-sombre-2); }
	.vt-entree__fleche { display: block; }
	.vt-args__in { grid-template-columns: 1fr; }
	.vt-args li { padding: 11px 0; border-left: 0 !important; padding-left: 0 !important; }
	.vt-args li + li { border-top: 1px solid var(--filet-sombre); }
	.vt-section, .vt-prod, .vt-livraison, .vt-conf { padding: 44px 0 48px; }
	.vt-tete { margin-bottom: 22px; }
	.vt-onglets { width: 100%; }
	.vt-onglet { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
	.vt-grille { grid-template-columns: 1fr; }
	.vt-carte__nom { min-height: 0; }
	.vt-table thead { display: none; }
	.vt-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--filet); }
	.vt-table tr:last-child { border-bottom: 0; }
	.vt-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 16px; border-bottom: 0; }
	.vt-table td::before { content: attr(data-label); flex: none; font-weight: 600; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); }
	.vt-table td:first-child { padding-top: 10px; }
	.vt-table td:last-child { padding-bottom: 10px; }
	.vt-table td span { text-align: right; }
	.vt-cp__form { grid-template-columns: 1fr; }
	.vt-pratique, .vt-conf__grille { grid-template-columns: 1fr; }
	.vt-apropos, .vt-cta { padding: 44px 0; }
	.vt-cta__btns { width: 100%; }
	.vt-apropos__btns .vt-btn, .vt-cta__btns .vt-btn { flex: 1 1 auto; }
	.vt-rappel { padding: 20px 18px 22px; }
	.vt-rappel__form { flex-direction: column; }
	.vt-pied { padding-top: 40px; }
	.vt-pied__in { grid-template-columns: 1fr; gap: 24px; }
	.vt-pied__bas-in { flex-direction: column; }
	.vt-tiroir { width: 100%; }
	.vt-tiroir__tete, .vt-tiroir__corps, .vt-tiroir__pied { padding-left: 16px; padding-right: 16px; }
	.vt-page-tete { padding: 24px 0 22px; }
}

/* ============================================================
   13. MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html:focus-within { scroll-behavior: auto; }
	.vt-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}