/* Vitrine MBS : compléments au thème Shopery (MIT). Mobile d'abord. */
:root { --vt-vert: #00B207; --vt-vert-fonce: #2C742F; --vt-encre: #1A1A1A; --vt-gris: #666; --vt-fond: #F7F8F7; --vt-bord: #E6E6E6; }
html, body { background: #fff; color: var(--vt-encre); }
/* typographie française : pas de majuscule à chaque mot (le thème capitalise titres et boutons) */
h1, h2, h3, h4, h5, h6, .button, .vt-bouton, .vt-bouton-clair, .font-title--lg, .font-title--md, .font-title--xl { text-transform: none !important; }
.vt-main { min-height: 60vh; }
.vt-section { padding-top: 28px; padding-bottom: 28px; }
.vt-etroit { max-width: 860px; }

/* en-tête */
.vt-entete .header__top { background: var(--vt-encre); color: #ccc; }
.vt-entete .header__top p { margin: 0; padding: 6px 0; font-size: 13px; }
.vt-entete .header__center { padding: 12px 0; border-bottom: 1px solid var(--vt-bord); }
.vt-entete .header__center-content { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vt-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--vt-encre); text-decoration: none; }
.vt-logo-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--vt-vert); color: #fff; display: grid; place-items: center; font-size: 20px; }
.vt-recherche { flex: 1; min-width: 220px; }
.vt-recherche .header__input-form { display: flex; border: 1px solid var(--vt-bord); border-radius: 8px; overflow: hidden; }
.vt-recherche input { flex: 1; border: 0; padding: 10px 14px; outline: none; min-width: 0; }
.vt-recherche .search-btn { border-radius: 0; background: var(--vt-vert); color: #fff; border: 0; padding: 0 18px; }
.vt-panier { position: relative; display: flex; align-items: center; gap: 8px; color: var(--vt-encre); text-decoration: none; }
.vt-panier .item-number { position: absolute; top: -6px; left: 16px; background: var(--vt-vert-fonce); color: #fff; border-radius: 50%; min-width: 20px; height: 20px; font-size: 12px; display: grid; place-items: center; }
.vt-panier-total { font-weight: 600; font-size: 14px; }
.vt-rayons { border-bottom: 1px solid var(--vt-bord); background: #fff; position: sticky; top: 0; z-index: 20; }
.vt-rayons .container { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.vt-rayons a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; color: var(--vt-encre); text-decoration: none; font-size: 14px; }
.vt-rayons a:hover { background: var(--vt-fond); color: var(--vt-vert-fonce); }
@media (max-width: 767px) {
	.vt-entete .header__top-right { display: none; }
	.vt-logo span:last-child { font-size: 17px; }
	.vt-recherche { order: 3; flex-basis: 100%; }
	.vt-panier { margin-left: auto; }
}

/* accueil */
.vt-hero { background: linear-gradient(120deg, #EDF8EE, #F7F8F7); padding: 40px 0; }
.vt-hero h1 { font-size: clamp(26px, 5vw, 44px); font-weight: 700; max-width: 640px; line-height: 1.15; }
.vt-hero p { max-width: 560px; color: var(--vt-gris); font-size: 16px; }
.vt-surtitre { color: var(--vt-vert-fonce) !important; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px !important; }
.vt-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.vt-tuile { border: 1px solid var(--vt-bord); border-radius: 10px; padding: 14px; text-decoration: none; color: var(--vt-encre); display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, box-shadow .15s; }
.vt-tuile:hover { border-color: var(--vt-vert); box-shadow: 0 6px 18px rgba(0, 178, 7, .1); }
.vt-tuile span { color: var(--vt-gris); font-size: 13px; }

/* cartes produit : 2 par ligne au téléphone */
.vt-carte { height: 100%; display: flex; flex-direction: column; }
.vt-carte .cards-md__img-wrapper { aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; overflow: hidden; position: relative; }
.vt-carte .cards-md__img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vt-carte .cards-md__info { margin-top: auto; gap: 8px; }
.vt-carte h6 { font-size: 14px; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--vt-encre); }
.vt-carte .cards-md__info-left { text-decoration: none; min-width: 0; }
.vt-carte .cards-md__info-price span { font-weight: 600; color: var(--vt-encre); }
.vt-ajout { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--vt-fond); color: var(--vt-encre); display: grid; place-items: center; flex-shrink: 0; transition: background .15s; }
.vt-ajout:hover { background: var(--vt-vert); color: #fff; }
.vt-ajout svg { width: 20px; height: 20px; }
@media (max-width: 575px) { .vt-carte .cards-md__info { padding: 8px; } .vt-carte h6 { font-size: 13px; } }

/* rayon */
.vt-rayon-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-outils { display: flex; gap: 12px; align-items: center; color: var(--vt-gris); font-size: 14px; }
.vt-outils select, .vt-bloc select, .vt-bloc input, .vt-bloc textarea { border: 1px solid var(--vt-bord); border-radius: 8px; padding: 10px 12px; font-size: 15px; width: 100%; background: #fff; }
.vt-outils select { width: auto; }
.vt-puces { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.vt-puce { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--vt-fond); color: var(--vt-vert-fonce); text-decoration: none; font-size: 13px; font-weight: 500; }
.vt-vide { text-align: center; color: var(--vt-gris); padding: 40px 0; }

/* produit */
.vt-produit-image { border: 1px solid var(--vt-bord); border-radius: 12px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.vt-produit-image img { max-width: 90%; max-height: 90%; object-fit: contain; }
.vt-produit-info h1 { margin: 10px 0; font-size: clamp(22px, 4vw, 32px); }
.vt-prix { font-size: 28px; font-weight: 700; color: var(--vt-vert-fonce); }
.vt-prix small { font-size: 14px; color: var(--vt-gris); font-weight: 400; }
.vt-stock.ok { color: var(--vt-vert-fonce); } .vt-stock.ko { color: #EA4B48; }
.vt-description { color: var(--vt-gris); }
.vt-acheter { display: flex; gap: 12px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
.vt-quantite { display: inline-flex; align-items: center; border: 1px solid var(--vt-bord); border-radius: 999px; overflow: hidden; }
.vt-quantite button { width: 38px; height: 38px; border: 0; background: var(--vt-fond); font-size: 18px; }
.vt-quantite input, .vt-quantite span { width: 44px; text-align: center; border: 0; font-weight: 600; }
.vt-arguments { color: var(--vt-gris); padding-left: 18px; font-size: 14px; }
.vt-bouton { background: var(--vt-vert) !important; color: #fff !important; border-radius: 999px !important; border: 0; text-decoration: none; display: inline-block; text-align: center; }
.vt-bouton:disabled { opacity: .6; }
.vt-bouton-clair { background: #fff; color: var(--vt-vert-fonce); border: 1px solid var(--vt-vert); border-radius: 999px; text-decoration: none; }

/* panier */
.vt-lignes { border: 1px solid var(--vt-bord); border-radius: 12px; overflow: hidden; }
.vt-ligne { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--vt-bord); }
.vt-ligne:last-child { border-bottom: 0; }
.vt-ligne img { width: 56px; height: 56px; object-fit: contain; }
.vt-ligne a { color: var(--vt-encre); text-decoration: none; font-size: 14px; }
.vt-ligne small { display: block; color: var(--vt-gris); }
@media (max-width: 575px) { .vt-ligne { grid-template-columns: 48px 1fr; } .vt-ligne .vt-quantite, .vt-ligne strong { grid-column: 2; justify-self: start; } }
.vt-recap { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--vt-fond); }
.vt-recap div { display: flex; justify-content: space-between; font-size: 18px; }
.vt-recap p { color: var(--vt-gris); font-size: 14px; }

/* commande */
.vt-bloc { border: 1px solid var(--vt-bord); border-radius: 12px; padding: 18px; margin-bottom: 16px; background: #fff; }
.vt-bloc h2 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.vt-bloc label { display: block; font-size: 14px; color: var(--vt-gris); margin-bottom: 12px; }
.vt-bloc label input, .vt-bloc label select, .vt-bloc label textarea { margin-top: 4px; color: var(--vt-encre); }
.vt-tel { display: flex; margin-top: 4px; }
.vt-tel span { padding: 10px 12px; background: var(--vt-fond); border: 1px solid var(--vt-bord); border-right: 0; border-radius: 8px 0 0 8px; color: var(--vt-encre); }
.vt-tel input { border-radius: 0 8px 8px 0 !important; margin-top: 0 !important; }
.vt-mode { display: flex !important; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--vt-bord); border-radius: 10px; cursor: pointer; color: var(--vt-encre) !important; }
.vt-mode:has(input:checked) { border-color: var(--vt-vert); background: #F2FBF2; }
.vt-mode input { width: auto !important; margin: 0 !important; accent-color: var(--vt-vert); }
.vt-mode span { flex: 1; } .vt-mode small { display: block; color: var(--vt-gris); }
.vt-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt-carte { height: 260px; border-radius: 10px; overflow: hidden; border: 1px solid var(--vt-bord); margin-bottom: 12px; }
.vt-carte-entete { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; color: var(--vt-gris); margin-bottom: 8px; flex-wrap: wrap; }
.vt-lien { border: 0; background: none; color: var(--vt-vert-fonce); font-weight: 600; padding: 0; }
.vt-recap-commande { position: sticky; top: 64px; }
.vt-recap-commande #vt-recap div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.vt-recap-commande .vt-total { border-top: 1px solid var(--vt-bord); margin-top: 8px; padding-top: 10px !important; font-size: 18px !important; }
.vt-paiement { font-size: 13px; color: var(--vt-gris); }

/* confirmation */
.vt-confirmation { text-align: center; padding: 32px 18px; }
.vt-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--vt-vert); color: #fff; font-size: 34px; display: grid; place-items: center; margin: 0 auto 12px; }
.vt-a-payer { font-size: 18px; }
.vt-petit { font-size: 13px; color: var(--vt-gris); margin-top: 8px; }
.vt-retour { display: block; margin-top: 18px; color: var(--vt-vert-fonce); }

/* pied de page, notifications */
.vt-pied { background: var(--vt-encre); color: #bbb; margin-top: 40px; padding: 28px 0; font-size: 14px; }
.vt-pied .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.vt-pied strong { color: #fff; }
.vt-credit { font-size: 12px; color: #888; align-self: end; }
.vt-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--vt-encre); color: #fff; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: all .25s; z-index: 1000; font-size: 14px; }
.vt-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.vt-toast.ko { background: #EA4B48; }