/* =============================================================================
   Vitrine « Bois · Pellets · Poêles » — page de commande (?page=commande)
   Chargée par templates/header.php APRÈS style.css et le thème du vendeur.
   Formulaire à gauche (contact, livraison, mode de livraison, paiement, facturation),
   récapitulatif collant à droite ; confirmation avec les instructions de paiement.
   Préfixe propre à la page : .vt-caisse.
   ============================================================================= */

.vt-caisse { padding: 36px 0 64px; }
.vt-caisse__grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.vt-caisse__grille[hidden], .vt-caisse__merci[hidden], .vt-caisse__vide[hidden] { display: none; }

/* Blocs du formulaire */
.vt-caisse__bloc { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.vt-caisse__h { display: block; margin-bottom: 12px; font-size: 1.15rem; font-weight: 800; color: var(--texte); }
.vt-caisse__champ { display: block; margin-bottom: 10px; }
.vt-caisse__champ > span { display: block; margin-bottom: 4px; font-size: .8rem; font-weight: 600; color: var(--texte-2); }
.vt-caisse__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vt-caisse__duo--cp { grid-template-columns: 160px 1fr; }
.vt-caisse__case { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--texte-2); cursor: pointer; }
.vt-caisse__case input { width: 18px; height: 18px; accent-color: var(--primary); }
.vt-caisse__aide { margin: 4px 0 10px; font-size: .8rem; line-height: 1.45; color: var(--texte-3); }
.vt-caisse__info { margin-top: 10px; padding: 12px 14px; background: var(--gris); border: 1px solid var(--filet); border-radius: var(--rayon); font-size: .88rem; line-height: 1.5; color: var(--texte-2); }
.vt-est-verifie .vt-champ:invalid { border-color: var(--erreur); }
.vt-caisse__erreur { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--rayon); background: #fdecea; color: var(--erreur); font-weight: 600; font-size: .9rem; }

/* Options (zones, moyens, facturation) : liste bordée, option choisie surlignée */
.vt-caisse__choix { border: 1.5px solid var(--filet); border-radius: var(--rayon-carte); overflow: hidden; background: var(--blanc); }
.vt-caisse__option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--filet); }
.vt-caisse__choix > .vt-caisse__option:last-child, .vt-caisse__moyen:last-child .vt-caisse__detail, .vt-caisse__moyen:last-child .vt-caisse__option { border-bottom: 0; }
.vt-caisse__option:has(input:checked) { background: var(--primaire-pale); box-shadow: inset 3px 0 0 var(--primary); }
.vt-caisse__option input { flex: none; width: 18px; height: 18px; accent-color: var(--primary); }
.vt-caisse__option-txt { flex: 1; min-width: 0; font-size: .92rem; }
.vt-caisse__option-txt small { display: block; margin-top: 2px; font-size: .78rem; color: var(--texte-3); }
.vt-caisse__option-prix { font-weight: 700; white-space: nowrap; }
.vt-caisse__option-logos { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.vt-caisse__option-logos .vt-paie__logo { width: 46px; height: 28px; }
.vt-caisse__option-logos .vt-paie__logo svg { width: 46px; height: 28px; }
.vt-caisse__detail { padding: 14px 16px 16px 46px; background: var(--gris); border-bottom: 1px solid var(--filet); font-size: .88rem; line-height: 1.5; color: var(--texte-2); }
.vt-caisse__detail[hidden] { display: none; }

/* Coordonnées bancaires */
.vt-caisse__rib { margin-top: 10px; display: grid; gap: 6px; }
.vt-caisse__rib > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.vt-caisse__rib dt { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-3); padding-top: 2px; }
.vt-caisse__rib dd { margin: 0; font-weight: 600; color: var(--texte); overflow-wrap: anywhere; }
.vt-caisse__rib--grand { padding: 16px 18px; border: 1.5px solid var(--primaire-filet); border-radius: var(--rayon-carte); background: var(--blanc); }
.vt-caisse__copier { margin-left: 6px; padding: 2px 10px; border: 1px solid var(--filet); border-radius: 20px; background: var(--gris); font-size: .74rem; font-weight: 700; cursor: pointer; }
.vt-caisse__copier:hover { border-color: var(--primary); color: var(--primary); }

.vt-caisse__factu { margin-top: 14px; }
.vt-caisse__factu[hidden] { display: none; }
.vt-caisse__valider { width: 100%; min-height: 54px; font-size: 1.05rem; }
.vt-caisse__valider:disabled { opacity: .6; cursor: progress; }
.vt-caisse__cgv { margin-top: 10px; text-align: center; }
.vt-caisse__liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: .82rem; }
.vt-caisse__liens a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Récapitulatif */
.vt-caisse__recap { position: sticky; top: 110px; padding: 22px; background: var(--gris); border: 1px solid var(--filet); border-radius: var(--rayon-carte); }
.vt-caisse__lignes { display: grid; gap: 12px; margin-bottom: 16px; }
.vt-caisse__lignes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: .88rem; }
.vt-caisse__qte { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--secondary); color: #ffffff; font-size: .74rem; font-weight: 800; }
.vt-caisse__nom small { display: block; color: var(--texte-3); font-size: .78rem; }
.vt-caisse__prix { font-weight: 700; white-space: nowrap; }
.vt-caisse__totaux { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: .9rem; }
.vt-caisse__totaux > div { display: flex; justify-content: space-between; gap: 12px; }
.vt-caisse__totaux dd { margin: 0; font-weight: 600; text-align: right; }
.vt-caisse__total { padding-top: 8px; font-size: 1.15rem; font-weight: 800; }
.vt-caisse__total dd { font-weight: 800; }

/* Confirmation */
.vt-caisse__merci { max-width: 720px; margin: 0 auto; outline: none; }
.vt-caisse__merci-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--primaire-pale); color: var(--primary); }
.vt-caisse__merci-icone svg { width: 30px; height: 30px; }
.vt-caisse__merci > p { margin-top: 8px; font-size: 1rem; color: var(--texte-2); }
.vt-caisse__merci-ref b { font-size: 1.1rem; letter-spacing: .03em; color: var(--texte); }
.vt-caisse__consigne { margin-top: 22px; }
.vt-caisse__consigne[hidden] { display: none; }
.vt-caisse__consigne h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.vt-caisse__consigne > p { margin-top: 8px; color: var(--texte-2); line-height: 1.55; }
.vt-caisse__just { margin-top: 8px; display: grid; gap: 6px; }
.vt-caisse__just li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.vt-caisse__just svg { width: 18px; height: 18px; color: var(--primary); }
.vt-caisse__just a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.vt-caisse__merci .vt-btn { margin-top: 24px; }
.vt-caisse__indispo p, .vt-caisse__vide p { margin: 10px 0 16px; }

@media (max-width: 1000px) {
	.vt-caisse__grille { grid-template-columns: 1fr; gap: 28px; }
	.vt-caisse__recap { position: static; order: -1; }
}
@media (max-width: 640px) {
	.vt-caisse { padding: 24px 0 44px; }
	.vt-caisse__duo, .vt-caisse__duo--cp { grid-template-columns: 1fr; gap: 0; }
	.vt-caisse__option { padding: 12px 14px; flex-wrap: wrap; }
	.vt-caisse__option-logos { width: 100%; justify-content: flex-start; padding-left: 30px; }
	.vt-caisse__detail { padding-left: 16px; }
	.vt-caisse__rib > div { grid-template-columns: 1fr; gap: 0; }
}