/* ============================================================================
   css/vitrine-takeapp.css — Vitrine publique, PHASE A1 (habillage TakeApp)
   commande.php — plans/commande_publique_takeapp.md §2.2
   Page AUTONOME (sans session, sans main.css/CP.php) : palette et composants
   entièrement dédiés, volontairement indépendants du design system interne
   (ERP) — c'est la charte "TakeApp" propre à la boutique publique.
   Chaque paire couleur de texte / fond est fixée explicitement (règle
   CONTRASTE de CLAUDE.md), y compris en RTL (arabe).
   ============================================================================ */
:root{
  --vt-accent:#6A3E8A; --vt-accent-dark:#52306B; --vt-accent-light:#F0E8FF;
  --vt-text:#222; --vt-text-dim:#666;
  /* 🔴 Trois teintes ASSOMBRIES le 31/07/2026 pour respecter la règle de
     contraste du projet (4,5:1 sur du texte normal). Mesuré au ratio WCAG en
     navigateur réel AVANT/APRÈS sur tout le parcours de commande :
       --vt-text-faint #999    -> #767676  (2,85 -> 4,54)  libellés discrets, croix de fermeture
       --vt-danger     #E53935 -> #C62828  (4,23 -> 5,90)  astérisques « obligatoire », croix de suppression
       --vt-warn       #B9660B -> #8F4F08  (4,23 -> 5,80)  « Stock limité »
     Ces trois jetons servent SOIT de couleur de texte sur fond blanc, SOIT de
     fond sous du texte blanc : les assombrir améliore le contraste DANS LES DEUX
     SENS (le texte blanc du badge panier passe de 4,23 à 5,90). Défauts
     PRÉ-EXISTANTS — aucun n'a été introduit par le checkout. */
  --vt-text-faint:#767676;
  --vt-border:#E5E0F0; --vt-bg:#FAFAFC; --vt-white:#fff;
  --vt-danger:#C62828; --vt-success:#1F7A54; --vt-warn:#8F4F08;
  --vt-radius:10px;

  /* ══ LES COULEURS DE TAKEAPP, RELEVÉES AU PIXEL (04/09/2026) ══════════════
     ghassen, 04/09 : « je veux que l'affichage des articles soit vraiment
     identique à TakeApp […] même la couleur, je la veux verte comme ma
     boutique. » Maquette validée : plans/maquette_articles_takeapp_2026-09-04.html
     🔴 UNE SEULE COULEUR N'EST PAS COPIÉE À LA LETTRE : le bouton d'action.
        TakeApp l'écrit en BLANC sur #4BA62D = 3,10:1, SOUS le seuil de 4,5
        que ce programme s'impose partout. #2F7A1D rend 5,35:1 — indistinguable
        à l'œil, conforme. Le bandeau et la pastille, eux, sont écrits en NOIR
        chez TakeApp (6,78:1 et 13,20:1) : là on copie tel quel.
     ⚠️ Une couleur de texte ne se pose JAMAIS sans son fond (règle CONTRASTE) :
        chaque jeton ci-dessous est utilisé en PAIRE dans la section « TakeApp »
        en bas de ce fichier. */
  --ta-vert-bandeau:#4BA62D;   /* fond du bandeau d'annonce   → encre #000 */
  --ta-vert-badge:#00ED2F;     /* fond de la pastille NOUVEAU → encre #000 */
  --ta-vert-btn:#2F7A1D;       /* fond du bouton d'action     → encre #fff */
  --ta-vert-btn-h:#265F17;     /* survol du bouton d'action   → encre #fff */
  --ta-encre:#25262B;          /* typo des cartes                          */
  --ta-bord:#EAEDF4;           /* bordure « Afficher tout » / compteur      */
  --ta-gris:#6B7280;           /* « / 1 PCS », sur fond de page             */
  --ta-img:#F1F3F5;            /* fond du cadre photo                      */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--vt-bg);color:var(--vt-text);font-family:'Segoe UI',Tahoma,Arial,sans-serif}
body{font-size:14px;line-height:1.4}
img{max-width:100%}
button{font-family:inherit}
a{color:var(--vt-accent);text-decoration:none}
[dir="rtl"]{text-align:right}

/* ── Bandeau d'annonce ── */
.vt-announce{background:var(--vt-accent);color:#fff;text-align:center;font-size:12.5px;font-weight:600;padding:8px 36px;position:relative}
.vt-announce-close{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.85}
.vt-announce-close:hover{opacity:1}
.vt-announce-closed{background:var(--vt-danger)}

/* ── En-tête ── */
.vt-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#fff;border-bottom:1px solid var(--vt-border);padding:10px 16px;position:sticky;top:0;z-index:250}
.vt-menu-btn{display:none}
.vt-logo{cursor:pointer;justify-self:center;display:flex;align-items:center;gap:8px;max-width:220px}
.vt-logo img{height:38px;object-fit:contain}
.vt-logo-txt{font-size:19px;font-weight:800;color:var(--vt-accent)}
.vt-header-actions{display:flex;align-items:center;gap:4px;justify-self:end}
.vt-icon-btn{background:none;border:none;font-size:19px;color:var(--vt-text);cursor:pointer;padding:8px;border-radius:50%;position:relative;line-height:1}
.vt-icon-btn:hover{background:var(--vt-accent-light);color:var(--vt-accent)}
.vt-cart-btn{color:var(--vt-accent)}
.vt-badge{position:absolute;top:2px;inset-inline-end:0;background:var(--vt-danger);color:#fff;border-radius:50%;min-width:16px;height:16px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px}
.vt-lang-btn{border:1px solid var(--vt-accent);background:#fff;color:var(--vt-accent);border-radius:14px;padding:5px 11px;font-size:11px;font-weight:800;cursor:pointer;margin-inline-start:4px}
.vt-lang-btn:hover{background:var(--vt-accent-light)}

/* ── Recherche (overlay) ── */
.vt-search-bar{display:flex;gap:8px;align-items:center;background:#fff;border-bottom:1px solid var(--vt-border);padding:10px 16px;position:sticky;top:60px;z-index:240}
.vt-search-bar input{flex:1;padding:10px 14px;border:1px solid var(--vt-border);border-radius:8px;font-size:14px;color:var(--vt-text);background:#fff}
.vt-search-bar input:focus{outline:none;border-color:var(--vt-accent)}

/* ── Layout ── */
.vt-layout{display:flex;align-items:flex-start;max-width:1280px;margin:0 auto}
.vt-sidebar{width:230px;flex-shrink:0;padding:18px 14px;position:sticky;top:60px;align-self:flex-start;max-height:calc(100vh - 60px);overflow-y:auto}
.vt-sidebar-search input{width:100%;padding:9px 12px;border:1px solid var(--vt-border);border-radius:8px;font-size:13px;color:var(--vt-text);background:#fff;margin-bottom:14px}
.vt-sidebar-search input:focus{outline:none;border-color:var(--vt-accent)}
.vt-sidebar-link{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;color:var(--vt-text);font-weight:600;font-size:13.5px;cursor:pointer}
.vt-sidebar-link:hover,.vt-sidebar-link.active{background:var(--vt-accent-light);color:var(--vt-accent)}
.vt-sidebar-cats-label{font-size:11px;font-weight:800;color:var(--vt-text-faint);text-transform:uppercase;letter-spacing:.04em;margin:16px 4px 6px}
.vt-sidebar-cats{display:flex;flex-direction:column;gap:2px}
.vt-sidebar-cat{padding:8px 10px;border-radius:8px;font-size:13px;color:var(--vt-text-dim);cursor:pointer}
.vt-sidebar-cat:hover,.vt-sidebar-cat.active{background:var(--vt-accent-light);color:var(--vt-accent);font-weight:700}
/* Pages d'information (§1, 02/08/2026) : simple séparateur sous les catégories,
   les liens réutilisent .vt-sidebar-link (même style que Accueil). */
.vt-sidebar-sep{border-top:1px solid var(--vt-border);margin:14px 4px 8px}
.vt-sidebar-info{font-weight:600;color:var(--vt-text-dim)}
.vt-sidebar-info:hover{background:var(--vt-accent-light);color:var(--vt-accent)}
.vt-nav-overlay{display:none}
.vt-main{flex:1;min-width:0;padding:0 16px 60px}

/* ── Pied de page (§1, 02/08/2026) : pages d'information + contact — mêmes
   liens qu'en sidebar, visibles depuis n'importe où dans le catalogue. ── */
.vt-footer{border-top:1px solid var(--vt-border);background:#fff;padding:16px}
.vt-footer-links{max-width:1280px;margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.vt-footer-links a{color:var(--vt-accent);font-size:13px;font-weight:700;cursor:pointer;padding:6px 4px}
.vt-footer-links a:hover{text-decoration:underline}

/* ── Bloc boutique ── */
.vt-storeblock{margin-top:14px;background:#fff;border-radius:var(--vt-radius);overflow:hidden;border:1px solid var(--vt-border);text-align:center}
.vt-cover{height:150px;background:linear-gradient(135deg,var(--vt-accent) 0%,var(--vt-accent-dark) 100%);background-size:cover;background-position:center}
.vt-store-id{padding:0 20px 20px;margin-top:-38px}
.vt-store-logo{width:76px;height:76px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.15);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.vt-store-logo img{width:100%;height:100%;object-fit:contain}
.vt-store-name{font-size:19px;font-weight:800;color:var(--vt-text)}
.vt-store-slogan{font-size:12px;font-weight:700;color:var(--vt-accent);letter-spacing:.06em;margin-top:2px}
.vt-store-contacts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.vt-contact-btn{background:var(--vt-accent-light);color:var(--vt-accent);border-radius:16px;padding:6px 14px;font-size:12px;font-weight:700}
.vt-contact-btn:hover{background:var(--vt-accent);color:#fff}
.vt-contact-btn.vt-wa{background:#E7F7EF;color:#1F7A54}
.vt-contact-btn.vt-wa:hover{background:#1F7A54;color:#fff}

/* ── Rangée de catégories (icônes/pastilles) ── */
.vt-cat-row{display:flex;gap:14px;overflow-x:auto;padding:16px 2px;scrollbar-width:thin}
.vt-cat-row::-webkit-scrollbar{height:5px}
.vt-cat-row::-webkit-scrollbar-thumb{background:#D8CDEE;border-radius:3px}
.vt-cat-pill{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;min-width:74px;user-select:none}
.vt-cat-pill-img{width:60px;height:60px;border-radius:50%;overflow:hidden;border:3px solid var(--vt-border);background:var(--vt-accent-light);display:flex;align-items:center;justify-content:center}
.vt-cat-pill-img img{width:100%;height:100%;object-fit:cover}
.vt-cat-pill.active .vt-cat-pill-img{border-color:var(--vt-accent);box-shadow:0 0 0 3px rgba(106,62,138,.15)}
.vt-cat-pill-name{font-size:11px;font-weight:700;color:var(--vt-text-dim);text-align:center;max-width:78px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-cat-pill.active .vt-cat-pill-name{color:var(--vt-accent)}

/* ── Sections d'accueil (cartes) ── */
.vt-section{margin-top:22px}
.vt-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;gap:10px}
.vt-section-title{font-size:16px;font-weight:800;color:var(--vt-text)}
.vt-section-link{font-size:12.5px;font-weight:700;color:var(--vt-accent);cursor:pointer;white-space:nowrap}
.vt-section-link:hover{text-decoration:underline}
/* 🔴 NOMBRE DE COLONNES FIXE (04/09/2026) — c'est le défaut que ghassen a
   repéré : « aucune différence entre les deux écrans ». `auto-fill` faisait
   SUIVRE le nombre de colonnes à la largeur (mesuré : 5 par rangée à 1280 px,
   contre 4 chez TakeApp). TakeApp en met 4 sur ordinateur et 2 sur téléphone,
   quelle que soit la largeur — mesuré à 1440 px (4 × gap 24/20) et à 375 px
   (2 × 146,5 px, gap 16). La bascule est dans le SEUL @media(max-width:820px)
   plus bas : ne pas remettre de règle de grille dans le bloc 480 px. */
.vt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
/* La grille « articles similaires » vit DANS la fiche produit (boîte de 560 px) :
   4 colonnes y donneraient 115 px par carte. Elle garde donc sa largeur
   minimale, et sa spécificité (0,2,0) la met à l'abri des règles ci-dessus. */
.vt-pd-similar .vt-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.vt-list-rows{display:flex;flex-direction:column;gap:8px}

/* ── Carte produit ── */
.vt-card{background:#fff;border:1px solid var(--vt-border);border-radius:var(--vt-radius);overflow:hidden;display:flex;flex-direction:column;position:relative}
.vt-card-imgwrap{position:relative;aspect-ratio:1/1;background:var(--vt-accent-light);cursor:pointer}
.vt-card-imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.vt-badge-new{position:absolute;top:0;inset-inline-start:0;background:var(--vt-success);color:#fff;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:0 0 8px 0}
.vt-badge-promo{position:absolute;top:0;inset-inline-end:0;background:var(--vt-danger);color:#fff;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:0 0 0 8px}
.vt-card-ref{position:absolute;bottom:0;inset-inline-start:0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:0 6px 0 0}
.vt-card-body{padding:9px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.vt-card-des{font-size:12.5px;font-weight:700;color:var(--vt-text);text-transform:uppercase;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-card-meta{display:flex;flex-wrap:wrap;gap:4px}
.vt-pill{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap}
.vt-pill-unite{background:#E3F0FF;color:#1A5DAD}
.vt-pill-emb{background:var(--vt-accent-light);color:var(--vt-accent)}
.vt-avail{font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.vt-avail .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.vt-avail.ok{color:var(--vt-success)} .vt-avail.ok .dot{background:var(--vt-success)}
.vt-avail.low{color:var(--vt-warn)} .vt-avail.low .dot{background:var(--vt-warn)}
.vt-avail.out{color:var(--vt-danger)} .vt-avail.out .dot{background:var(--vt-danger)}
.vt-card-cta{border:none;background:var(--vt-accent);color:#fff;font-weight:700;font-size:12px;padding:8px;border-radius:7px;cursor:pointer;margin-top:auto}
.vt-card-cta:hover{background:var(--vt-accent-dark)}
.vt-card-cta.added{background:var(--vt-success)}
.vt-card-cta:disabled,.vt-card-cta.out{background:#ccc;color:#666;cursor:not-allowed}
.vt-card.out .vt-card-imgwrap img{filter:grayscale(1);opacity:.6}
.vt-card-outlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);color:#fff;font-size:11px;font-weight:800;text-align:center;padding:6px;text-transform:uppercase}
.vt-pd-addbtn:disabled{background:#ccc;color:#666;cursor:not-allowed}

/* Vue LISTE (mode 'liste' d'une section, ou carte pleine largeur) */
.vt-row-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--vt-border);border-radius:var(--vt-radius);padding:8px}
.vt-row-card .vt-card-imgwrap{width:64px;height:64px;flex-shrink:0;border-radius:8px}
.vt-row-card .vt-card-body{padding:0;flex:1;min-width:0}
.vt-row-card .vt-card-des{-webkit-line-clamp:1;min-height:1.3em}
.vt-row-card .vt-card-cta{width:auto;padding:8px 16px;margin-top:0;flex-shrink:0}

/* ── États vides / chargement ── */
.vt-empty,.vt-loading{text-align:center;color:var(--vt-text-faint);padding:30px;font-size:13px}
.vt-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--vt-accent-light);border-top-color:var(--vt-accent);border-radius:50%;animation:vtspin .7s linear infinite;vertical-align:middle;margin-inline-end:6px}
@keyframes vtspin{to{transform:rotate(360deg)}}
.vt-load-more{text-align:center;margin:16px 0}
.vt-load-more button{background:var(--vt-accent-light);color:var(--vt-accent);border:1px solid var(--vt-border);border-radius:7px;padding:9px 22px;font-size:13px;font-weight:700;cursor:pointer}
.vt-load-more button:hover{background:#E0D4F7}
.vt-cat-header{display:flex;align-items:center;gap:10px;margin:16px 0 12px}
.vt-cat-header h2{font-size:17px;font-weight:800;margin:0;color:var(--vt-text)}
.vt-back-link{font-size:13px;font-weight:700;color:var(--vt-accent);cursor:pointer;flex-shrink:0}
/* Image de la famille en haut de sa page (08/10/2026, demande de ghassen) : posée depuis l'écran Familles.
   `contain` : l'image s'affiche ENTIÈRE (jamais rognée), centrée sur le fond doux de la boutique. */
.vt-cat-cover{margin:0 0 14px;border-radius:14px;overflow:hidden;background:var(--vt-accent-light);display:flex;align-items:center;justify-content:center}
.vt-cat-cover img{display:block;max-width:100%;max-height:220px;width:auto;height:auto;object-fit:contain}
@media (max-width:600px){.vt-cat-cover img{max-height:170px}}
/* Sous-titre de catégorie (02/08/2026) — titre et sous-titre empilés DANS
   l'en-tête existant : le lien de retour reste sur la même ligne que le titre.
   `min-width:0` : sans lui, un sous-titre long empêcherait la boîte de se
   réduire et pousserait l'en-tête hors du cadre sur téléphone. */
.vt-cat-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
/* 🔴 Couleur POSÉE, pas `--vt-text-faint` (#767676) : ce gris a été calibré sur
   du BLANC pur (4,54:1) alors que le fond de cette zone est #FAFAFC — il n'y
   rend que 4,36:1, sous le minimum de 4,5. Mesuré par
   `outils/audit_contraste_runtime.js` sur la page réelle. #6E6E6E rend 4,89:1
   sur ce fond. Règle projet : jamais une couleur de texte sans son fond. */
.vt-cat-sub{font-size:12.5px;color:#6E6E6E;background:transparent;line-height:1.35;
            overflow-wrap:break-word;word-break:break-word}

/* ── Page d'information (« À propos » / « Conditions de vente », §1 02/08/2026) ──
   Même couleur de texte que .vt-cat-sub ci-dessus (#6E6E6E, 4,89:1 sur ce fond
   #FAFAFC) pour le corps — le texte est plus long ici, la lisibilité prime. */
.vt-info-page{max-width:640px;font-size:13.5px;line-height:1.6;color:var(--vt-text-dim);background:transparent}
.vt-info-page h4{font-size:14px;font-weight:800;color:var(--vt-text);background:transparent;margin:18px 0 6px}
.vt-info-page h4:first-child{margin-top:0}
.vt-info-page p{margin:0 0 11px;background:transparent;overflow-wrap:break-word;word-break:break-word}

/* ── Modals (structure fixe : en-tête / contenu scrollable / pied) ── */
.vt-modal-bg{display:none;position:fixed;inset:0;background:rgba(20,10,30,.55);z-index:1000;align-items:center;justify-content:center;padding:16px}
.vt-modal-bg.open{display:flex}
.vt-modal-box{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}
.vt-modal-head{padding:14px 18px;flex-shrink:0;border-bottom:1px solid var(--vt-border);font-weight:800;color:var(--vt-text);display:flex;align-items:center;justify-content:space-between}
.vt-modal-scroll{padding:16px 18px;overflow-y:auto;flex:1}
.vt-modal-foot{padding:12px 18px;flex-shrink:0;border-top:1px solid var(--vt-border);display:flex;gap:10px}
.vt-modal-close{background:none;border:none;color:var(--vt-text-faint);font-size:17px;cursor:pointer;padding:2px 6px}
.vt-modal-close:hover{color:var(--vt-text)}

/* Fiche produit */
.vt-product-box{max-width:640px}
/* 18/10/2026 — PHOTO NETTE ET COMPACTE (ghassen : « les images sont encore floues »).
   Avant : `width:100%` + `aspect-ratio:1/1` étirait la version 200 px à toute la
   largeur (346 px à 414 px d'écran, 589 px à 1280) : flou PAR CONSTRUCTION.
   Maintenant `width:auto` = taille NATURELLE du fichier, jamais agrandie au-delà
   (`max-width:100%`) ; une HD de 1000 px prend toute la largeur, une photo de
   200 px reste à 200 px sur son fond clair. Hauteur plafonnée à 45 % de l'écran
   pour que référence, prix et bouton restent visibles sans défiler. */
.vt-pd-imgwrap{background:var(--vt-accent-light);border-radius:10px;text-align:center;line-height:0;min-height:96px}
.vt-pd-img{display:block;width:auto;height:auto;max-width:100%;max-height:45vh;margin:0 auto;object-fit:contain;cursor:zoom-in}
.vt-pd-title{font-size:17px;font-weight:800;color:var(--vt-text);margin:12px 0 4px;text-transform:uppercase}
.vt-pd-sku{font-size:12px;color:var(--vt-text-dim)}
.vt-pd-desc{font-size:13px;color:var(--vt-text-dim);line-height:1.55;margin:12px 0}
.vt-pd-price{font-size:20px;font-weight:800;color:var(--vt-accent);margin:10px 0}
.vt-pd-price .old{font-size:13px;color:var(--vt-text-faint);text-decoration:line-through;font-weight:400;margin-inline-start:8px}
.vt-pd-lockmsg{background:var(--vt-accent-light);color:var(--vt-accent-dark);border-radius:8px;padding:10px 14px;font-size:12.5px;font-weight:700;margin:10px 0}
.vt-pd-actions{display:flex;align-items:center;gap:10px;margin-top:14px}
.vt-qty-ctrl{display:flex;align-items:center;border:1px solid var(--vt-border);border-radius:8px;overflow:hidden}
.vt-qty-ctrl button{border:none;background:#fff;color:var(--vt-accent);width:34px;height:36px;font-size:16px;font-weight:700;cursor:pointer}
.vt-qty-ctrl button:hover{background:var(--vt-accent-light)}
.vt-qty-ctrl input{width:46px;border:none;border-inline:1px solid var(--vt-border);text-align:center;font-size:14px;height:36px}
/* « maximum : 20 » — visible UNIQUEMENT sur un article bloqué (décision Q2 du
   04/08 : un blocage muet est interdit ; un article libre n'affiche rien).
   🔴 Couleur de texte ET fond posés ensemble (règle CONTRASTE) : #6B5300 sur
   #FFF8E0 = 8,4:1, largement au-dessus du seuil 4,5:1. */
.vt-qty-max{margin-top:8px;display:inline-block;background:#FFF8E0;border:1px solid #FFD700;color:#6B5300;
            border-radius:6px;padding:4px 10px;font-size:12.5px;font-weight:700}
.vt-pd-addbtn{flex:1;background:var(--vt-accent);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:800;font-size:14px;cursor:pointer}
.vt-pd-addbtn:hover{background:var(--vt-accent-dark)}
.vt-fav-btn{border:1px solid var(--vt-border);background:#fff;color:var(--vt-danger);width:40px;height:40px;border-radius:8px;font-size:17px;cursor:pointer;flex-shrink:0}
.vt-fav-btn.active{background:var(--vt-danger);color:#fff;border-color:var(--vt-danger)}
.vt-pd-similar{margin-top:20px;border-top:1px solid var(--vt-border);padding-top:14px}
.vt-pd-similar h4{font-size:13px;font-weight:800;color:var(--vt-text);margin:0 0 10px}

/* Identification téléphone */
.vt-phone-box{max-width:400px}
.vt-phone-hint{font-size:12.5px;color:var(--vt-text-dim);margin:0 0 12px;line-height:1.5}
#vtPhoneInput{width:100%;padding:11px 14px;border:1px solid var(--vt-border);border-radius:8px;font-size:15px;color:var(--vt-text)}
#vtPhoneInput:focus{outline:none;border-color:var(--vt-accent)}
.vt-phone-err{color:var(--vt-danger);font-size:12px;margin-top:8px;min-height:1.2em}
.vt-btn-main{width:100%;background:var(--vt-accent);color:#fff;border:none;border-radius:8px;padding:12px;font-weight:800;font-size:14px;cursor:pointer}
.vt-btn-main:hover{background:var(--vt-accent-dark)}
.vt-btn-main:disabled{background:#bbb;cursor:not-allowed}
.vt-btn-sec{background:#fff;color:var(--vt-accent);border:1.5px solid var(--vt-accent);border-radius:8px;padding:11px 18px;font-weight:700;font-size:13px;cursor:pointer}
.vt-btn-sec:hover{background:var(--vt-accent-light)}

/* ── Tiroirs (panier / favoris) ── */
.vt-drawer-bg{display:none;position:fixed;inset:0;background:rgba(20,10,30,.5);z-index:900}
.vt-drawer-bg.open{display:block}
/* 🔴 `visibility:hidden` quand le tiroir est fermé (correctif 31/07/2026).
   Les tiroirs se ferment par `transform` : hors écran, ils restaient donc
   MESURABLES et surtout ATTEIGNABLES AU CLAVIER (leur bouton Fermer entrait
   dans l'ordre de tabulation, et deux tiroirs fermés superposaient leurs deux
   boutons au même point). Défaut PRÉ-EXISTANT, vérifié sur la version de
   sauvegarde avant correction. Le délai `.28s` sur `visibility` laisse
   l'animation de fermeture se dérouler entièrement avant de masquer. */
.vt-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:400px;max-width:92vw;background:#fff;z-index:950;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;box-shadow:-4px 0 20px rgba(0,0,0,.15)}
[dir="rtl"] .vt-drawer{transform:translateX(-100%)}
.vt-drawer.open{transform:translateX(0);visibility:visible;transition:transform .28s ease,visibility 0s linear 0s}
.vt-drawer-head{padding:16px 18px;flex-shrink:0;border-bottom:1px solid var(--vt-border);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:space-between}
.vt-drawer-min{padding:8px 18px;flex-shrink:0;background:var(--vt-accent-light);color:var(--vt-accent-dark);font-size:12px;font-weight:700}
.vt-drawer-body{padding:14px 18px;overflow-y:auto;flex:1}
.vt-drawer-foot{padding:14px 18px;flex-shrink:0;border-top:1px solid var(--vt-border)}
.vt-cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--vt-border)}
.vt-cart-line img{width:50px;height:50px;object-fit:cover;border-radius:7px;background:var(--vt-accent-light);flex-shrink:0}
.vt-cart-line-body{flex:1;min-width:0}
.vt-cart-line-name{font-size:12.5px;font-weight:700;color:var(--vt-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-cart-line-price{font-size:12px;color:var(--vt-accent);font-weight:700;margin-top:2px}
.vt-cart-line-locked{font-size:11px;color:var(--vt-text-faint);font-style:italic;margin-top:2px}
.vt-cart-remove{background:none;border:none;color:var(--vt-danger);font-size:15px;cursor:pointer;flex-shrink:0}
.vt-cart-total-row{display:flex;justify-content:space-between;font-weight:800;font-size:15px;color:var(--vt-text);margin-bottom:10px}
.vt-cart-total-row span:last-child{color:var(--vt-accent)}

/* ── Checkout (page pleine largeur) ── */
.vt-checkout{max-width:760px;margin:20px auto 60px;padding:0 16px}
.vt-co-card{background:#fff;border:1px solid var(--vt-border);border-radius:var(--vt-radius);padding:22px;margin-bottom:16px}
.vt-co-card h2{font-size:15px;font-weight:800;color:var(--vt-accent);margin:0 0 14px;border-bottom:2px solid var(--vt-accent-light);padding-bottom:8px}
.vt-fg{margin-bottom:12px}
.vt-fg label{display:block;font-size:12.5px;font-weight:700;color:var(--vt-text-dim);margin-bottom:4px}
.vt-req{color:var(--vt-danger)}
.vt-fg input,.vt-fg select,.vt-fg textarea{width:100%;padding:9px 12px;border:1px solid var(--vt-border);border-radius:7px;font-size:14px;font-family:inherit;color:var(--vt-text)}
/* 🔴 Les cases à cocher et boutons radio sont EXCLUS du `width:100%` ci-dessus
   (correctif 31/07/2026). Sans ça, le rond occupe toute la largeur de son
   cadre et pousse son libellé à la ligne : les choix se lisaient en deux
   étages, rond centré au-dessus du texte. Défaut PRÉ-EXISTANT, visible sur le
   choix « Facture / Bon de Livraison » ; il touchait aussi le nouveau choix
   « Retrait / Livraison ». Vérifié en navigateur réel à 360/375/1280 px. */
.vt-fg input[type="radio"],.vt-fg input[type="checkbox"]{width:auto;flex:0 0 auto;padding:0;margin:0}
.vt-fg input:focus,.vt-fg select:focus,.vt-fg textarea:focus{outline:none;border-color:var(--vt-accent)}
.vt-fg textarea{resize:vertical;height:60px}
.vt-row2{display:flex;gap:12px;flex-wrap:wrap}
.vt-row2 .vt-fg{flex:1;min-width:130px}
.vt-phone-row{display:flex;gap:8px;margin-bottom:8px}
.vt-phone-row input{flex:1}
.vt-btn-sm{border:none;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.vt-btn-rem{background:#FFE3E3;color:var(--vt-danger)}
.vt-btn-add{background:var(--vt-accent-light);color:var(--vt-accent);margin-top:2px}
.vt-typedoc-wrap{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.vt-typedoc-wrap label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:13px;color:var(--vt-text);padding:9px 16px;border:1.5px solid var(--vt-border);border-radius:8px}
.vt-typedoc-wrap input:checked + span,.vt-typedoc-wrap label:has(input:checked){border-color:var(--vt-accent);background:var(--vt-accent-light);color:var(--vt-accent)}
.vt-recap-table{width:100%;border-collapse:collapse;font-size:13px}
.vt-recap-table th{background:var(--vt-accent);color:#fff;padding:8px 10px;text-align:start}
.vt-recap-table td{padding:8px 10px;border-bottom:1px solid var(--vt-border)}
/* 🔴 Vignette du récapitulatif (correctif 09/08/2026) : sans largeur minimale,
   la colonne image se fait comprimer par le nom de l'article et la photo
   s'affiche en filet vertical de quelques pixels. Deux règles, mesurées. */
.vt-recap-table td:first-child{width:44px}
.vt-recap-table td:first-child img{min-width:40px}
.vt-recap-total{text-align:end;font-size:15px;font-weight:800;color:var(--vt-accent);padding:12px 4px 0}
.vt-err-box{background:#FFECEC;border:1px solid #FFAAAA;border-radius:7px;padding:12px 16px;color:#B00000;font-size:13px;margin-bottom:12px}
.vt-err-box ul{margin:4px 0 0;padding-inline-start:18px}
.vt-warn-box{background:#FFF8E0;border:1px solid #FFD700;border-radius:7px;padding:12px 16px;font-size:13px;margin-top:10px;color:#6B5300}

/* ══ PHASE A3 — checkout ═══════════════════════════════════════════════════
   Règle contraste (obligatoire) : aucune couleur de texte sans sa couleur de
   fond, et aucun fond coloré sans sa couleur de texte. Chaque bloc ci-dessous
   fixe les deux.
   Règle mobile (ghassen, 28/07) : on NE GROSSIT PAS les boutons ni les champs —
   ce qui compte est l'ÉCARTEMENT entre deux cibles voisines. Les blocs de choix
   ci-dessous jouent donc sur `gap`, jamais sur la taille des contrôles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rappel du minimum de commande, dans le panier. Deux états lisibles. */
.vt-drawer-min.vt-min-ok{background:#E7F5EE;color:#14603F}
.vt-drawer-min.vt-min-ko{background:#FFF1E2;color:#8A4A05}
.vt-min-ko{color:#8A4A05;background:transparent;font-size:12.5px;font-weight:700}

/* Ligne de panier devenue non commandable : visible mais sortie du total. */
.vt-cart-line-dim{opacity:.62}
.vt-cart-line-off{font-size:11.5px;font-weight:700;color:var(--vt-danger);background:transparent;margin-top:2px}
.vt-recap-off td{color:var(--vt-text-faint);background:#F7F7F9;text-decoration:line-through}
.vt-recap-off td:last-child{text-decoration:none;color:var(--vt-danger)}

/* Mode de réception (retrait / livraison). Même grammaire visuelle que le
   choix Facture/BL juste au-dessus, pour ne pas inventer un 2e style. */
.vt-mode-block{margin-top:4px}
.vt-mode-wrap{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.vt-mode-opt{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:13px;
             color:var(--vt-text);background:#fff;padding:9px 16px;border:1.5px solid var(--vt-border);border-radius:8px}
.vt-mode-opt:hover{border-color:var(--vt-accent)}
.vt-mode-opt:has(input:checked){border-color:var(--vt-accent);background:var(--vt-accent-light);color:var(--vt-accent)}

/* Information neutre (frais de livraison non calculés). */
.vt-note-box{background:#EEF4FB;border:1px solid #C9DDF2;color:#1B4A75;
             border-radius:7px;padding:10px 14px;font-size:12.5px;line-height:1.45;margin:2px 0 12px}

/* Récapitulatif FINAL (page de confirmation) : ce sont les montants renvoyés
   par le serveur, pas ceux que la page avait en mémoire. */
.vt-success-recap{margin:18px 0 4px;text-align:start;background:#fff;color:var(--vt-text);
                  border:1px solid var(--vt-border);border-radius:var(--vt-radius);padding:14px;overflow-x:auto}
/* Pas de `min-width` sur le récapitulatif final : à 375 px il poussait le
   TOTAL de chaque ligne hors du cadre. Le cadre défile bien (le contrôle
   automatique passait), mais le client ne voit pas le montant sans faire
   glisser le tableau — inacceptable pour LE chiffre de la page. On laisse donc
   la désignation revenir à la ligne, comme le fait déjà le récapitulatif du
   checkout juste avant. `overflow-x:auto` du parent reste le filet. */
.vt-recap-final td:nth-child(2){word-break:break-word}
.vt-recap-final td,.vt-recap-final th{padding:7px 6px}
.vt-recap-note{font-size:11.5px;color:var(--vt-text-dim);background:transparent;margin-top:8px;line-height:1.45}

/* ── Succès ── */
.vt-success-card{background:#fff;border:1px solid #BEE8CE;border-radius:var(--vt-radius);padding:32px 24px;text-align:center}
.vt-success-card .icon{font-size:52px}
.vt-success-card h2{color:var(--vt-success);font-size:19px;margin:8px 0}
.vt-success-card .bcnum{font-size:28px;font-weight:800;color:var(--vt-accent);margin:8px 0}

/* ── Lightbox ── */
.vt-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;align-items:center;justify-content:center;padding:20px;cursor:pointer}
.vt-lightbox.open{display:flex}
.vt-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   A4 — COMMANDER POUR PLUSIEURS POINTS DE VENTE DU CLIENT (31/07/2026)
   ---------------------------------------------------------------------------
   🔴 Chaque paire couleur de texte / couleur de fond est fixée EXPLICITEMENT
      (règle CONTRASTE du projet) : aucune couleur de texte n'est posée sans son
      fond, aucun fond coloré sans sa couleur de texte.
   🔴 Une seule mise en page à toutes les largeurs : la répartition se fait
      POINT DE VENTE PAR POINT DE VENTE (blocs dépliables). Rien à basculer
      entre téléphone et grand écran, donc rien qui puisse diverger.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Case « je commande pour plusieurs de mes points de vente » */
.vt-multi-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  background:var(--vt-accent-light);color:var(--vt-text);
  border:1px solid var(--vt-border);border-radius:8px;padding:12px 14px;font-weight:700;font-size:13.5px}
.vt-multi-check input{width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--vt-accent)}
.vt-multi-check:hover{border-color:var(--vt-accent)}
.vt-multi-hint{font-size:11.5px;color:var(--vt-text-dim);background:transparent;margin:8px 2px 0;line-height:1.45}

/* Compteur de points de vente */
.vt-mag-count{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.vt-mag-count label{font-size:12.5px;font-weight:700;color:var(--vt-text-dim);background:transparent;margin:0}
.vt-mag-count-ctrl{display:flex;align-items:center;gap:4px}
.vt-mag-count-ctrl button{width:38px;height:38px;border:1px solid var(--vt-border);background:#fff;color:var(--vt-accent);
  border-radius:8px;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.vt-mag-count-ctrl button:hover{background:var(--vt-accent);color:#fff;border-color:var(--vt-accent)}
.vt-mag-count-ctrl span{min-width:38px;text-align:center;font-size:16px;font-weight:800;color:var(--vt-text);background:transparent}

/* Carte d'un point de vente du client */
.vt-mag-box{border:1px solid var(--vt-border);border-radius:9px;padding:14px;margin-bottom:12px;background:var(--vt-bg)}
.vt-mag-head{font-size:12px;font-weight:800;color:var(--vt-accent);background:transparent;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.vt-mag-box .vt-fg input,.vt-mag-box .vt-fg textarea,.vt-mag-box .vt-fg select{background:#fff}
.vt-mag-hint{font-size:11px;color:var(--vt-text-dim);background:transparent;margin-top:4px;line-height:1.4}
.vt-row2-solo .vt-fg{flex:1 1 100%}

/* Répartition : un bloc dépliable par point de vente */
.vt-dist-pdv{border:1px solid var(--vt-border);border-radius:9px;margin-bottom:10px;background:#fff;overflow:hidden}
.vt-dist-pdv[open]{border-color:var(--vt-accent)}
.vt-dist-pdv summary{list-style:none;cursor:pointer;padding:12px 14px;background:var(--vt-accent-light);color:var(--vt-text);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;font-size:13.5px}
.vt-dist-pdv summary::-webkit-details-marker{display:none}
.vt-dist-pdv summary::after{content:'\25BE';color:var(--vt-accent);font-size:13px;margin-inline-start:auto}
.vt-dist-pdv[open] summary::after{content:'\25B4'}
.vt-dist-nom{color:var(--vt-accent);background:transparent}
.vt-dist-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:11.5px}
.vt-dist-nb{color:var(--vt-text-dim);background:transparent}
.vt-dist-tot{color:var(--vt-text);background:transparent;font-weight:800;font-size:13px}
.vt-dist-badge{border-radius:10px;padding:2px 9px;font-size:10.5px;font-weight:800;white-space:nowrap}
.vt-dist-badge.ok{background:#E7F7EF;color:var(--vt-success)}
.vt-dist-badge.ko{background:#FDECEC;color:var(--vt-danger)}

.vt-dist-body{padding:6px 12px 12px}
.vt-dist-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--vt-border)}
.vt-dist-line:last-child{border-bottom:none}
.vt-dist-line img{width:42px;height:42px;flex:0 0 auto;object-fit:cover;border-radius:6px;background:var(--vt-accent-light)}
.vt-dist-info{flex:1;min-width:0}
.vt-dist-des{font-size:12.5px;font-weight:700;color:var(--vt-text);background:transparent;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-dist-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.vt-dist-ref{font-size:10.5px;font-weight:700;color:var(--vt-accent);background:var(--vt-accent-light);border-radius:6px;padding:1px 6px}
.vt-dist-reste{font-size:10.5px;color:var(--vt-text-dim);background:transparent}
.vt-dist-reste.vt-dist-over{color:var(--vt-warn);background:transparent;font-weight:700}
.vt-dist-qty{width:74px;flex:0 0 auto;padding:9px 8px;border:1px solid var(--vt-border);border-radius:7px;
  font-size:14px;font-weight:700;text-align:center;color:var(--vt-text);background:#fff}
.vt-dist-qty:focus{outline:none;border-color:var(--vt-accent)}

.vt-dist-grandtotal{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:2px solid var(--vt-accent-light);
  font-size:14px;font-weight:700;color:var(--vt-text-dim);background:transparent}
.vt-dist-grandtotal strong{font-size:16px;color:var(--vt-accent);background:transparent}

/* Confirmation : la liste des bons de commande créés */
.vt-grp-list{display:flex;flex-direction:column;gap:12px;margin:16px 0;text-align:start}
.vt-grp-bon{border:1px solid var(--vt-border);border-radius:9px;overflow:hidden;background:#fff}
.vt-grp-bon-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--vt-accent);color:#fff;padding:9px 14px}
.vt-grp-rang{background:rgba(255,255,255,.22);color:#fff;border-radius:10px;padding:2px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.vt-grp-nom{font-size:13.5px;font-weight:800;color:#fff;background:transparent}
.vt-grp-bon-body{padding:12px 14px}
.vt-grp-num{font-size:13px;color:var(--vt-text);background:transparent;margin-bottom:4px}
.vt-grp-num strong{color:var(--vt-accent);background:transparent}
.vt-grp-meta{font-size:11.5px;color:var(--vt-text-dim);background:transparent;margin-bottom:3px}
.vt-grp-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--vt-border);font-size:12.5px;color:var(--vt-text-dim);background:transparent}
.vt-grp-line strong{font-size:14px;color:var(--vt-accent);background:transparent}
.vt-grp-track{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;
  background:var(--vt-accent-light);color:var(--vt-accent);border-radius:7px;padding:7px 12px}
.vt-grp-track:hover{background:var(--vt-accent);color:#fff}

/* ── Responsive ── */
@media(max-width:900px){
  .vt-sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;width:270px;max-width:82vw;background:#fff;z-index:400;transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 16px rgba(0,0,0,.15);max-height:none;padding-top:70px}
  [dir="rtl"] .vt-sidebar{transform:translateX(100%)}
  .vt-sidebar.open{transform:translateX(0)}
  .vt-menu-btn{display:inline-flex}
  .vt-nav-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:390}
}
@media(max-width:480px){
  .vt-header{padding:8px 10px}
  .vt-main{padding:0 10px 60px}
  /* [04/09/2026] La règle de grille qui était ici est REMONTÉE dans
     @media(max-width:820px) : le nombre de colonnes se décide maintenant à un
     SEUL seuil (2 colonnes sous 820, 4 au-dessus). En laisser une deuxième ici
     ferait dépendre l'affichage de l'ordre des blocs dans ce fichier. */
  .vt-drawer{width:100%;max-width:100%}
  .vt-cover{height:110px}
  .vt-store-name{font-size:16px}
  /* A4 — téléphone : c'est là que la majorité des clients commandent.
     On récupère de la largeur utile sans jamais RÉDUIRE une cible tactile
     (règle projet : ne pas agrandir non plus — ce qui compte est l'écartement). */
  .vt-co-card{padding:14px}
  .vt-mag-box{padding:11px}
  .vt-dist-body{padding:4px 9px 10px}
  .vt-dist-line{gap:8px}
  .vt-dist-line img{width:36px;height:36px}
  .vt-dist-qty{width:66px}
  .vt-dist-pdv summary{padding:11px 12px}
  /* Le résumé du bloc passe sous le nom au lieu de le comprimer. */
  .vt-dist-sum{width:100%;justify-content:space-between}
  .vt-dist-pdv summary::after{margin-inline-start:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTIQUE — VISUEL + PLUSIEURS POINTS DE VENTE (09/08/2026)
   Maquettes validées le 05/08 : plans/maquette_AZ_ordinateur|mobile_2026-08-05
   🔴 RÈGLE CONTRASTE DU PROJET : aucune couleur de texte n'est posée ici sans
      sa couleur de fond, et aucun fond coloré sans sa couleur de texte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA PLAQUE DE RÉFÉRENCE ──
   « la référence est trop petite et passe inaperçue » (ghassen, 05/08). Elle
   devient la PREMIÈRE ligne sous la photo, en chasse fixe : les commerçants
   gèrent leur stock par référence, ils la lisent avant la désignation.
   Fond encre + texte blanc = 15,9:1, très au-dessus du seuil. */
.vt-refplate{display:inline-block;background:#1f2937;color:#fff;
  font-family:'Consolas','Courier New',monospace;font-weight:800;font-size:13.5px;
  letter-spacing:1px;padding:5px 9px;border-radius:7px;margin-bottom:6px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-refplate-sm{font-size:11px;letter-spacing:.6px;padding:3px 6px;margin-bottom:3px}
/* L'ancienne pastille posée SUR la photo n'a plus lieu d'être (la référence a
   quitté l'image) : on la neutralise sans toucher au reste de la carte. */
.vt-card-ref{display:none}

/* ── Le pas-à-pas − 1 + sur la carte (commande au doigt, sans ouvrir la fiche) ── */
.vt-card-step{display:flex;align-items:center;justify-content:space-between;
  border:1.5px solid #6d28d9;border-radius:10px;overflow:hidden;margin-top:auto;background:#fff}
.vt-card-step button{width:40px;min-height:40px;border:0;background:#f3f0fa;color:#4c1d95;
  font-size:18px;font-weight:700;cursor:pointer}
.vt-card-step button:active{background:#e9e2fb}
.vt-card-qte{flex:1;text-align:center;font-weight:800;font-size:14px;color:#1f2937;background:#fff}

/* ── Bandeau « je commande pour N points de vente » ── */
.vt-pv-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;
  border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:12.5px}
.vt-pv-bantxt{font-weight:700}
.vt-pv-chip{background:#059669;color:#fff;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700}
.vt-pv-banbtn{margin-inline-start:auto;background:#fff;color:#065f46;border:1px solid #a7f3d0;
  border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;cursor:pointer;min-height:32px}

/* ── Fenêtre « un seul / plusieurs » ── */
.vt-bigchoice{display:flex;gap:10px;margin-top:6px}
.vt-bigchoice button{flex:1;border:1.5px solid #e5e7eb;background:#fff;color:#1f2937;
  border-radius:13px;padding:16px 8px;font-size:13px;font-weight:700;line-height:1.35;cursor:pointer}
.vt-bigchoice button:hover,.vt-bigchoice button:focus{border-color:#6d28d9;background:#f5f1ff;color:#4c1d95}
.vt-bigchoice-ic{display:block;font-size:26px;margin-bottom:6px}

/* ── Fenêtre « mes points de vente » ── */
.vt-pv-box{max-width:520px}
.vt-pv-item{display:flex;align-items:flex-start;gap:10px;padding:11px;margin-top:8px;
  border:1.5px solid #e5e7eb;border-radius:11px;cursor:pointer;background:#fff;color:#1f2937}
.vt-pv-item.on{border-color:#6d28d9;background:#f8f5ff}
.vt-pv-item input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:#6d28d9}
.vt-pv-txt{flex:1;font-size:13px}
.vt-pv-txt b{display:block;font-weight:700}
.vt-pv-txt small{display:block;color:#666;font-size:11px;margin-top:3px;line-height:1.4}
.vt-pv-none{background:#fff7e6;color:#92400e;border:1px solid #fde68a;border-radius:10px;
  padding:12px;font-size:12.5px;margin-top:8px}
.vt-pv-add{width:100%;margin-top:10px;background:#fff;color:#4c1d95;
  border:1.5px dashed #6d28d9;border-radius:11px;padding:11px;
  font-size:12.5px;font-weight:700;cursor:pointer;min-height:42px}
.vt-pv-formbox{border:1.5px solid #e5e7eb;border-radius:12px;padding:4px 12px 12px;margin-top:10px;background:#fbfaff}
.vt-pv-formtitle{font-size:11px;font-weight:800;color:#4c1d95;margin:10px 0 2px;letter-spacing:.4px}

/* ── Fenêtre « quantités par point de vente » ── */
.vt-qty-des{font-size:12.5px;font-weight:600;color:#1f2937;display:block;margin-top:4px}
.vt-qty-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid #e5e7eb}
.vt-qty-nom{font-size:12.5px;font-weight:600;color:#1f2937;flex:1;min-width:0}
.vt-stepper{display:inline-flex;align-items:center;border:1.5px solid #e5e7eb;border-radius:10px;
  overflow:hidden;flex:0 0 auto;background:#fff}
.vt-stepper button{width:38px;height:40px;border:0;background:#f3f4f6;color:#1f2937;font-size:17px;cursor:pointer}
.vt-stepper input{width:56px;height:40px;border:0;text-align:center;font-size:15px;font-weight:700;
  color:#1f2937;background:#fff;-moz-appearance:textfield}
.vt-stepper input::-webkit-outer-spin-button,.vt-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vt-qty-total{display:flex;justify-content:space-between;align-items:center;
  padding:12px 0 0;font-size:13.5px;font-weight:800;color:#1f2937}
.vt-qty-total.vt-over{color:#b45309}
.vt-qty-warn{background:#fff7e6;color:#92400e;border:1px solid #fde68a;border-radius:8px;
  padding:8px 10px;font-size:11.5px;margin-top:8px}

/* ── Le panier, point de vente par point de vente ── */
.vt-cart-pv{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;margin-bottom:12px;background:#fff}
.vt-cart-pv.vide{opacity:.72}
.vt-cart-pv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;background:#f8f7fc;border-bottom:1px solid #e5e7eb;
  font-size:12.5px;font-weight:800;color:#1f2937}
.vt-cart-pv-tot{font-weight:800;color:#4c1d95;white-space:nowrap}
.vt-cart-pv.vide .vt-cart-pv-tot{color:#666;font-weight:600}
.vt-cart-pv-body{padding:2px 10px}
.vt-cart-note{font-size:11.5px;color:#666;margin:4px 2px 10px;line-height:1.5}

/* ── Rappel des points sur la page de commande ── */
.vt-pvrecap{border:1px solid #e5e7eb;border-radius:11px;padding:11px 12px;margin-top:9px;background:#fff}
.vt-pvrecap.vide{background:#f9fafb;opacity:.8}
.vt-pvrecap.court{border-color:#fde68a;background:#fffdf5}
.vt-pvrecap-nom{font-size:13px;font-weight:800;color:#1f2937}
.vt-pvrecap-det{font-size:11px;color:#666;margin-top:3px;line-height:1.45}
.vt-pvrecap-tot{font-size:12.5px;color:#1f2937;margin-top:6px}
.vt-pvrecap-warn{font-size:11.5px;color:#92400e;background:#fff7e6;border:1px solid #fde68a;
  border-radius:8px;padding:7px 9px;margin-top:7px}
.vt-pvrecap-chg{width:100%;margin-top:12px}

/* ── Barre du bas (téléphone) ──
   Ses mots (05/08) : « c'est le téléphone qui est devenu l'outil le plus
   utilisé dans le travail ». Masquée au-delà de la largeur téléphone, où la
   barre du haut et le panneau latéral suffisent. */
.vt-bottombar{display:none}
@media(max-width:820px){
  .vt-bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -2px 10px rgba(20,10,60,.06)}
  .vt-bottombar button{flex:1;border:0;background:none;color:#666;
    padding:7px 2px 8px;font-size:10.5px;font-weight:600;cursor:pointer;position:relative;min-height:52px}
  .vt-bottombar .vt-bb-ic{display:block;font-size:19px;margin-bottom:2px;line-height:1}
  .vt-bottombar .vt-badge{position:absolute;top:4px;inset-inline-end:calc(50% - 22px)}
  /* La barre ne doit jamais recouvrir la fin du contenu ni le bouton de
     validation : on rend au corps de page la hauteur qu'elle occupe. */
  body{padding-bottom:56px}
  .vt-refplate{font-size:12.5px;padding:4px 8px}
  .vt-qty-nom{font-size:12px}
  .vt-bigchoice{flex-direction:column}
  /* 🔴 TÉLÉPHONE : 2 colonnes, gap 16 — mesuré sur TakeApp à 375 px (04/09/2026).
     Seuil 820 px = celui que cette feuille utilise DÉJÀ pour la barre du bas et
     la plaque de référence ; aucun point de rupture nouveau. Entre 480 et 820
     (petites tablettes) 4 colonnes donneraient des cartes de ~100 px, où le
     pas-à-pas − N + ne tient plus : c'est pourquoi la bascule est ici et pas
     à 480. */
  .vt-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* Fiche produit : référence + Copier, en tête (09/08/2026). */
.vt-pd-refrow{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.vt-pd-copybtn{background:#fff;color:#4c1d95;border:1.5px solid #6d28d9;border-radius:9px;
  padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;min-height:34px}
.vt-pd-copybtn:active{background:#f5f1ff}


/* ══════════════════ « Mes informations » (19/08/2026) ══════════════════
   Maquette figée : plans/maquette_client_mes_infos_2026-08-19.html.
   🔴 CONTRASTE : chaque couleur de texte est écrite AVEC sa couleur de fond, et
      l'inverse — jamais l'une sans l'autre (règle du 14/07). Les quatre familles
      de message (attente / refus / succès / info) portent les trois valeurs
      ensemble : fond, bordure, texte.
   ⚠️ Aucune nouvelle feuille de style : tout vit ici (règle « un seul fichier à
      uploader »). */
.vt-mi-sub{color:#4b5563;background:transparent;font-size:13.5px;margin:0 0 18px}

/* 28 px entre les blocs : des logiques différentes se séparent à l'œil. */
.vt-mi-card{background:#fff;color:#1f2937;border:1px solid #e5e7eb;border-radius:10px;
            padding:14px;margin-bottom:28px}
.vt-mi-card h2{font-size:15px;margin:0 0 2px;color:#1E3A5F;background:transparent}
.vt-mi-hint{font-size:12.5px;color:#6b7280;background:transparent;margin:0 0 12px}
.vt-mi-tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:99px;
           border:1px solid #e5e7eb;background:#f9fafb;color:#4b5563;margin-left:6px;
           vertical-align:middle;font-weight:400}
.vt-mi-tag.tag-team{background:#fff7e6;border-color:#d99a00;color:#7a4f00}
.vt-mi-tag.tag-now {background:#e9f7ef;border-color:#1e8449;color:#14532d}

/* ── Champ + son BADGE D'ÉTAT : icône + MOT + couleur, jamais la couleur seule
      (daltonisme, et lisibilité en défilant). ── */
.vt-mi-fg{margin-bottom:16px}
.vt-mi-fghead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
              flex-wrap:wrap;margin-bottom:5px}
.vt-mi-fg label{display:block;font-size:13px;color:#4b5563;background:transparent;font-weight:600}
.vt-mi-badge{font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid;
             white-space:nowrap;font-weight:600}
.vt-mi-badge.b-wait{background:#fff7e6;border-color:#d99a00;color:#7a4f00}
.vt-mi-badge.b-bad {background:#fdecec;border-color:#c0392b;color:#8e2a20}
.vt-mi-badge.b-good{background:#e9f7ef;border-color:#1e8449;color:#14532d}
.vt-mi-badge.b-edit{background:#f1ecfb;border-color:#6d28d9;color:#4c1d95}

.vt-mi-fieldwrap{position:relative}
.vt-mi-fg input,.vt-mi-fg select{width:100%;padding:9px 10px;border:1px solid #cbd5e1;
    border-radius:7px;font-size:16px;color:#1f2937;background:#fff;font-family:inherit}
.vt-mi-fg input:focus,.vt-mi-fg select:focus{outline:2px solid #1B6285;outline-offset:1px}
.vt-mi-fg.edited input{border-color:#6d28d9;border-width:2px;background:#f1ecfb;color:#1f2937}
.vt-mi-fg input[readonly]{background:#f8fafc;color:#4b5563}
/* Contrôle de format — E-MAIL SEULEMENT. Jamais sur le matricule : 34 formes
   distinctes en base, aucune règle de format ne tient (note de la maquette). */
.vt-mi-fieldwrap .vt-mi-okmark{position:absolute;right:10px;top:50%;transform:translateY(-50%);
    color:#1e8449;background:transparent;font-size:16px;font-weight:700;pointer-events:none}
[dir="rtl"] .vt-mi-fieldwrap .vt-mi-okmark{right:auto;left:10px}

/* Messages d'état : structure UNIFORME, icône à gauche / texte à droite. */
.vt-mi-note{border-radius:8px;padding:9px 11px;font-size:13px;margin-top:7px;border:1px solid;
            display:flex;gap:9px;align-items:flex-start}
.vt-mi-note .ico{flex:0 0 auto;font-size:15px;line-height:1.25}
.vt-mi-note .txt{flex:1 1 auto;min-width:0}
.vt-mi-note.n-wait{background:#fff7e6;border-color:#d99a00;color:#7a4f00}
.vt-mi-note.n-bad {background:#fdecec;border-color:#c0392b;color:#8e2a20}
.vt-mi-note.n-good{background:#e9f7ef;border-color:#1e8449;color:#14532d}
.vt-mi-note.n-info{background:#f8fafc;border-color:#e5e7eb;color:#4b5563}

/* L'ancienne valeur À CÔTÉ de la nouvelle : sans elle, le client ne sait plus ce
   qu'il a demandé et ne peut pas juger s'il doit annuler. */
.vt-mi-cmp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:13px}
.vt-mi-cmp .old{text-decoration:line-through;color:#6b7280;background:transparent}
.vt-mi-cmp .arrow{color:#6b7280;background:transparent}
.vt-mi-cmp .new{font-weight:700}

/* 🔴 `--teal` de la charte (#2E86AB) ne donne que 4,11:1 sur blanc : sous le
   seuil pour du TEXTE. On utilise #1B6285 (6,7:1) partout où c'est du texte
   cliquable (mesure du 08/08/2026). */
.vt-mi-linkbtn{display:inline-block;margin-top:8px;font-size:13px;color:#1B6285;
    background:none;text-decoration:underline;cursor:pointer;border:0;padding:8px 0;
    font-family:inherit;min-height:38px}
.vt-mi-linkbtn[disabled]{color:#6b7280;cursor:default;text-decoration:none}
/* Un refus propose un CHEMIN, pas seulement une phrase. */
.vt-mi-minibtn{display:inline-block;margin-top:8px;padding:9px 13px;border-radius:7px;
    font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
    background:#fff;border:1px solid #c0392b;color:#8e2a20;min-height:38px}

/* ⛔ Pas de barre collée en bas, pas de bouton flottant : écartés trois fois
   (07/08, 09/08, 19/08). Les boutons restent dans le flux. */
.vt-mi-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px;align-items:center}
.vt-mi-btn{padding:10px 16px;border-radius:7px;font-size:14px;cursor:pointer;border:1px solid;
           font-family:inherit;font-weight:600;min-height:40px}
.vt-mi-btn.main{background:#1E3A5F;border-color:#1E3A5F;color:#fff}
.vt-mi-btn.sec {background:#fff;border-color:#cbd5e1;color:#1f2937}
.vt-mi-btn[disabled]{opacity:.6;cursor:default}
.vt-mi-err{color:#8e2a20;background:transparent;font-size:13px;margin-top:8px;min-height:1px}

/* ── Points de vente ── */
.vt-mi-pv{border:1px solid #e5e7eb;border-radius:9px;padding:11px;margin-bottom:9px;
          background:#fff;color:#1f2937}
.vt-mi-pv-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.vt-mi-pv-inf{flex:1 1 200px;min-width:0}
.vt-mi-pv-act{display:flex;gap:4px;flex-wrap:wrap;flex:0 0 auto}
.vt-mi-pv-nom{font-weight:700;font-size:14px}
.vt-mi-pv-l{font-size:12.5px;color:#4b5563;background:transparent;margin-top:3px;
            overflow-wrap:break-word;word-break:break-word}
.vt-mi-pv-l b{color:#1f2937;font-weight:600}
.vt-mi-pv-btn{font-size:13px;color:#1B6285;background:#fff;border:1px solid #cbd5e1;
    border-radius:7px;cursor:pointer;padding:8px 12px;font-family:inherit;
    white-space:nowrap;min-height:38px}
.vt-mi-pv-btn.danger{color:#8e2a20;border-color:#e0b4ae}
.vt-mi-addpv{display:inline-block;margin-top:4px;padding:10px 14px;border-radius:7px;
    font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
    background:#fff;border:1px solid #1E3A5F;color:#1E3A5F;min-height:40px}

.vt-mi-quote{background:#fff;color:#4b5563;border-left:4px solid #1B6285;padding:10px 12px;
    font-size:13px;border-radius:0 7px 7px 0;margin:10px 0}
[dir="rtl"] .vt-mi-quote{border-left:0;border-right:4px solid #1B6285;border-radius:7px 0 0 7px}

/* ── La fenêtre : en-tête fixe / contenu scrollable / pied fixe.
      Le bouton de validation ne doit JAMAIS être masqué par le défilement. ── */
.vt-mi-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;
             display:none;align-items:center;justify-content:center;padding:12px}
.vt-mi-modal.open{display:flex}
.vt-mi-modal-box{background:#fff;color:#1f2937;width:460px;max-width:100%;border-radius:10px;
    display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden}
.vt-mi-modal-head{padding:14px 18px;flex-shrink:0;border-bottom:1px solid #e5e7eb;
    font-weight:700;background:#1E3A5F;color:#fff;font-size:15px}
.vt-mi-modal-body{padding:16px 18px;overflow-y:auto;flex:1 1 auto;
    background:#fff;color:#1f2937;
    /* WCAG 2.2 §2.4.11 : l'en-tête est collé, un champ qui prend le focus ne doit
       pas atterrir derrière lui. */
    scroll-padding-top:8px}
.vt-mi-modal-foot{padding:12px 18px;flex-shrink:0;border-top:1px solid #e5e7eb;
    display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;background:#fff}
.vt-mi-step{display:block;font-size:11.5px;font-weight:600;opacity:.85;margin-bottom:2px;
    color:#fff;background:transparent}

@media (max-width:820px){
    .vt-mi-card{padding:12px;margin-bottom:22px}
    .vt-mi-modal-box{max-height:calc(100vh - 24px)}
    .vt-mi-pv-act{width:100%}
    .vt-mi-pv-btn{flex:1 1 auto;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFFICHAGE DES ARTICLES — COPIE DE TAKEAPP (04/09/2026)
   ---------------------------------------------------------------------------
   ghassen, 04/09 : « ce qui m'intéresse c'est que l'affichage des articles soit
   vraiment identique à TakeApp. Aucune différence entre les deux écrans. Un
   copier-collé total côté affichage. […] Le bouton Afficher tout doit être
   identique. Même la couleur, je la veux verte comme ma boutique. »
   Maquette VALIDÉE : plans/maquette_articles_takeapp_2026-09-04.html
   Toutes les valeurs sont MESURÉES sur bazar-gros.net (1440 px puis 375 px).

   🔴 CE QU'ON COPIE : la MISE EN FORME (couleurs, grille, cadre photo carré,
      typo, pastille, bouton « Afficher tout »).
   🔴 CE QU'ON NE COPIE PAS : le CONTENU de la carte. La nôtre porte QUATRE
      choses de plus, toutes demandées par ghassen et CONSERVÉES (décision du
      04/09) : la plaque de référence, le bouton Commander / le pas-à-pas
      − N +, l'état du stock, les pastilles unité + colisage. C'est la règle du
      projet : « la charte fixe le commun, chaque écran garde sa spécificité ».
   🔴 Et les PRIX restent réservés aux clients identifiés : c'est la seule
      différence de fond avec TakeApp, assumée depuis l'origine de la boutique.

   Le nombre de colonnes est plus haut (près de la règle .vt-grid d'origine),
   pour qu'il n'y ait qu'un seul endroit où le lire.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau d'annonce : vert TakeApp, ENCRE NOIRE ──
   #4BA62D + blanc = 3,10:1 (sous le seuil) ; #4BA62D + noir = 6,78:1.
   L'encre ne peut donc PAS rester blanche comme avant. */
/* Hauteur 50 px, MESURÉE chez TakeApp — obtenue par le REMBOURRAGE, pas par une
   hauteur fixe : sur téléphone l'annonce tient sur 3 lignes, elle doit pouvoir
   grandir. 🔴 Et surtout PAS `display:flex` ici : la croix de fermeture est en
   `position:absolute` dans ce bloc — mesuré le 04/09, passer le bandeau en flex
   le fait monter à 191 px, fait DÉBORDER la page et rend la croix inatteignable
   (`elementFromPoint` ne la trouve plus). Le rembourrage ne change aucun mode
   de mise en page : 8 → 16 px en haut et en bas, soit 17,5 + 32 ≈ 50 px. */
.vt-announce{background:var(--ta-vert-bandeau);color:#000;padding:16px 36px}
.vt-announce-close{color:#000}
/* Le bandeau « boutique fermée » garde son rouge : il ne dit pas la même chose. */
.vt-announce-closed{background:var(--vt-danger);color:#fff}
.vt-announce-closed .vt-announce-close{color:#fff}

/* ── LA CARTE : plus de cadre, plus de bordure — comme TakeApp ── */
.vt-card{background:transparent;border:0;border-radius:0;overflow:visible}
.vt-card-imgwrap{border-radius:16px;overflow:hidden;background:var(--ta-img)}
.vt-card-body{padding:0;gap:0;color:var(--ta-encre)}
/* La plaque de référence prend un peu d'air sous la photo (elle est collée au
   bord du cadre maintenant que la carte n'a plus de rembourrage). */
.vt-card-body .vt-refplate{margin-top:9px;margin-bottom:0;font-size:11px;
  letter-spacing:.5px;padding:2px 7px;border-radius:4px}
.vt-card .vt-card-des{font-size:15px;font-weight:600;line-height:16.875px;
  height:34px;min-height:0;margin:5px 0 3px;text-transform:none;color:var(--ta-encre)}
.vt-card .vt-card-meta{margin:0 0 2px;gap:5px}
.vt-card .vt-avail{margin:3px 0 6px}
/* Le prix — 15px/600 chez TakeApp. Il n'apparaît QUE pour un client identifié
   (le serveur ne l'envoie pas autrement : `priced`, gate prix A2-1). */
.vt-card-price{font-size:15px;font-weight:600;color:var(--ta-encre);background:transparent}
.vt-card-price .old{font-size:12.5px;color:var(--ta-gris);text-decoration:line-through;
  font-weight:400;margin-inline-start:7px}
.vt-card-unit{font-size:13px;color:var(--ta-gris);background:transparent;display:block}

/* Vue LISTE : elle rend la carte en RANGÉE — on lui rend son cadre, sinon la
   ligne n'a plus aucune limite visible. */
.vt-row-card{background:#fff;border:1px solid var(--vt-border)}
.vt-row-card .vt-card-body{padding:0 0 0 2px}
.vt-row-card .vt-card-des{height:auto;min-height:1.3em}
.vt-row-card .vt-card-imgwrap{border-radius:8px}

/* ── LA PASTILLE : forme TakeApp (10px / 700 / uppercase / rayon 1000 / h.18) ──
   🔴 « NOUVEAU » prend le vert exact de TakeApp (#00ED2F + noir = 13,20:1).
   ⚠️ « PROMO » garde son ROUGE (#C62828 + blanc = 5,90:1) : c'est une
      information, pas une décoration — en vert, une promo deviendrait
      indistinguable d'une nouveauté. Elle prend la même FORME, pas la même
      couleur. Écart DÉLIBÉRÉ et déclaré au compte rendu. */
.vt-badge-new,.vt-badge-promo{top:8px;font-size:10px;font-weight:700;
  text-transform:uppercase;border-radius:1000px;height:18px;line-height:18px;
  padding:0 8px;letter-spacing:.2px}
.vt-badge-new{inset-inline-start:8px;background:var(--ta-vert-badge);color:#000}
.vt-badge-promo{inset-inline-end:8px;background:var(--vt-danger);color:#fff}

/* ── LE BOUTON D'ACTION : vert, pleine largeur ── */
.vt-card-cta{background:var(--ta-vert-btn);color:#fff;font-size:14px;font-weight:600;
  min-height:38px;border-radius:8px;margin-top:7px}
.vt-card-cta:hover{background:var(--ta-vert-btn-h);color:#fff}
.vt-card-cta.added{background:var(--ta-vert-btn-h);color:#fff}
/* « Épuisé » : #767676 + blanc = 4,72:1 (l'ancien #ccc/#666 rendait 2,85:1). */
.vt-card-cta:disabled,.vt-card-cta.out{background:#767676;color:#fff}

/* ── LE PAS-À-PAS, AVEC UNE CASE QU'ON PEUT REMPLIR (demande du 04/09) ──
   « je veux pouvoir mettre la quantité sans passer par le panier, comme sur
   TakeApp ». Avant, le nombre était un <span> : pour 24 pièces, 24 clics.
   Mesuré sur TakeApp : − et + de 36 × 36 px, case de 48 × 36 px, centrée. */
.vt-card-step{border:0;border-radius:0;overflow:visible;background:transparent;
  gap:6px;justify-content:flex-start;margin-top:7px}
.vt-card-step button{width:36px;min-height:36px;height:36px;flex:0 0 36px;
  border:1px solid var(--ta-bord);background:#fff;color:#000;
  border-radius:8px;font-size:17px;font-weight:700}
.vt-card-step button:hover{background:#F4F6F9;color:#000}
.vt-card-step button:active{background:#E9EDF3;color:#000}
.vt-card-qty{flex:1 1 auto;min-width:0;width:48px;height:36px;text-align:center;
  font-size:15px;font-weight:600;color:var(--ta-encre);background:#fff;
  border:1px solid var(--ta-bord);border-radius:8px;font-family:inherit;
  -moz-appearance:textfield}
.vt-card-qty:focus{outline:none;border-color:var(--ta-vert-btn);
  box-shadow:0 0 0 2px rgba(47,122,29,.18)}
/* Flèches natives du type=number retirées : elles font doublon avec − et +. */
.vt-card-qty::-webkit-outer-spin-button,
.vt-card-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── « AFFICHER TOUT » : bouton pleine largeur SOUS la grille ──
   Mesuré chez TakeApp : fond BLANC, bordure 1px #EAEDF4, rayon 8px,
   hauteur 42px, texte NOIR 15px graisse 500. Il quitte donc le coin haut
   droit de l'en-tête de section, où il était un petit lien violet. */
.vt-see-all{display:block;width:100%;height:42px;margin-top:24px;background:#fff;
  border:1px solid var(--ta-bord);border-radius:8px;color:#000;
  font-size:15px;font-weight:500;cursor:pointer;font-family:inherit}
.vt-see-all:hover{background:#F7F9FC;color:#000}

@media(max-width:820px){
  /* Le bouton reste confortable au doigt sans se rapprocher de la dernière
     rangée de cartes : la marge du haut se resserre, pas la hauteur. */
  .vt-see-all{margin-top:18px}
}

/* ═══ FICHE PRODUIT COMPACTE (18/10/2026, ghassen, capture MA22046) ═════════════
   « Beaucoup d'espace perdu : une ligne pour chaque information même toute
   petite. » Fin de fichier EXPRÈS : ces règles passent après `.vt-pd-refrow`
   (l. ~648), `.vt-refplate` et `.vt-pd-addbtn` et les surchargent sans
   `!important`. Tout est scopé à la fenêtre de détail (`.vt-pd-*`) : les CARTES du
   catalogue (`.vt-card …`, y compris « Vous pourriez aussi aimer » qui vit DANS
   cette fenêtre) gardent leurs tailles — d'où `.vt-pd-meta …` et jamais
   `#vtProductBody .vt-avail`.
   Rangée 1 : [référence][Copier] + désignation — `flex-wrap` : la désignation passe
   à la ligne suivante seulement si elle ne tient pas, la référence et « Copier »
   restent solidaires. Rangée 2 : unité + stock sur UNE ligne, ×1,5 (11 → 16,5 px,
   pastille 9,5 → 14,25 px, point 7 → 10,5 px). Couleurs inchangées (#1F7A54 /
   #8F4F08 / #C62828 sur blanc : déjà ≥ 4,5:1, mesuré dans le CR). */
.vt-pd-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.vt-pd-head .vt-pd-refrow{flex:0 0 auto;margin:0}
.vt-pd-head .vt-refplate{margin-bottom:0}
.vt-pd-head .vt-pd-title{flex:1 1 auto;min-width:0;margin:0;line-height:1.25}
.vt-pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:8px 0 0}
.vt-pd-meta:empty{display:none}
.vt-pd-meta .vt-card-meta{margin:0;gap:6px}
.vt-pd-meta .vt-pill{font-size:14.25px;padding:3px 10.5px;border-radius:12px}
.vt-pd-meta .vt-avail{font-size:16.5px;gap:8px;margin:0}
.vt-pd-meta .vt-avail .dot{width:10.5px;height:10.5px}
.vt-pd-desc{margin:8px 0}
.vt-pd-price{margin:6px 0}
.vt-pd-lockmsg{margin:6px 0}
/* Rangée d'achat : DEUX groupes qui se replient l'un sous l'autre (jamais un
   bouton écrasé) — [− 1 +][Total] puis [Ajouter][♡]. `.vt-pd-addbtn` ne prend plus
   « tout le reste de la ligne » (`flex:1`, 10 px / 14 px) : largeur au contenu. */
.vt-pd-actions{flex-wrap:wrap;gap:8px 10px;margin-top:8px}
.vt-pd-buy{display:flex;align-items:center;gap:8px;min-width:0}
.vt-pd-buy:empty{display:none}
.vt-pd-buy .vt-pd-addbtn{flex:none;padding:7px 14px;font-size:13px;white-space:nowrap;min-height:36px}
.vt-pd-total{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;box-sizing:border-box;
  border:1px solid var(--vt-border);border-radius:8px;background:var(--vt-accent-light);
  color:var(--vt-text);font-size:13px;white-space:nowrap}
.vt-pd-total strong{font-weight:800;color:var(--vt-accent-dark)}