/* =============================================================================
   Vitrine « Bois · Pellets · Poêles » — page Contact et commande (?page=contact)
   Chargée par templates/header.php APRÈS style.css et le thème du vendeur.
   Réutilise le vocabulaire du socle : .vt-wrap, .vt-section, .vt-page-tete, .vt-h2,
   .vt-btn (et variantes), .vt-lien, .vt-champ, .vt-etiq, .vt-point__ico, .vt-cp*,
   .vt-est-ok / .vt-est-erreur, .vt-reveal, jetons --primary, --gris, --filet…
   Préfixes propres à la page : .vt-contact, .vt-cform, .vt-recap, .vt-case, .vt-coord, .vt-faq.
   ============================================================================= */

/* ============================================================
   1. DEUX COLONNES — formulaire à gauche (plus large), coordonnées à droite
   ============================================================ */
.vt-contact { padding: 48px 0 64px; }
.vt-contact__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: start; }

/* ============================================================
   2. FORMULAIRE — carte blanche à bord 1 px, champs du socle, erreurs sous les champs
   ============================================================ */
.vt-cform { padding: 30px 32px 32px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
.vt-cform__intro { margin-top: 10px; font-size: .95rem; }
.vt-cform__form { margin-top: 22px; }
.vt-cform__form[hidden] { display: none; }
.vt-cform__rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vt-cform__champ { min-width: 0; margin-top: 16px; }
.vt-cform__rangee .vt-cform__champ { margin-top: 0; }
.vt-cform__rangee + .vt-cform__rangee, .vt-cform__champ + .vt-cform__rangee, .vt-cform__resume + .vt-cform__rangee { margin-top: 16px; }
.vt-cform__champ .vt-etiq { display: flex; align-items: baseline; gap: 6px; }
.vt-cform__champ .vt-etiq b { color: var(--erreur); font-weight: 800; }
.vt-cform__champ .vt-etiq em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texte-3); }
.vt-cform__champ .vt-champ[readonly] { background: var(--gris); border-left: 4px solid var(--primary); cursor: default; }
.vt-cform__aide { margin-top: 6px; font-size: .84rem; color: var(--texte-3); }
.vt-cform__aide a { color: var(--primary); font-weight: 600; }
.vt-cform__aide a:hover { color: var(--primaire-fonce); text-decoration: underline; }
textarea.vt-champ { min-height: 130px; }

/* État d'erreur : la classe du socle .vt-est-erreur colorie en rouge ; ici on cible champ + message */
.vt-cform__champ.vt-est-erreur { color: inherit; }
.vt-cform__champ.vt-est-erreur .vt-etiq { color: var(--erreur); }
.vt-cform__champ.vt-est-erreur .vt-champ { border-color: var(--erreur); }
.vt-cform__champ.vt-est-erreur .vt-champ:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.vt-cform__erreur { display: none; margin-top: 6px; font-size: .84rem; font-weight: 600; color: var(--erreur); }
.vt-cform__erreur::before { content: ""; display: inline-block; width: 10px; height: 3px; margin: 0 8px 3px 0; background: var(--erreur); }
.vt-cform__champ.vt-est-erreur .vt-cform__erreur { display: block; }
.vt-cform__resume { display: none; margin-top: 18px; padding: 12px 16px; border-left: 4px solid var(--erreur); background: var(--gris); font-size: .92rem; font-weight: 600; color: var(--erreur); }
.vt-cform__resume.vt-est-visible { display: block; }

/* Cases à cocher : case native à la couleur primaire, texte à côté */
.vt-cform__cases { margin-top: 20px; display: grid; gap: 12px; }
.vt-cform__champ--case { margin-top: 0; }
.vt-case { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .92rem; line-height: 1.5; color: var(--texte-2); }
.vt-case input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.vt-case span b { color: var(--erreur); font-weight: 800; }
.vt-cform__champ--case.vt-est-erreur .vt-case { color: var(--erreur); }
.vt-cform__champ--case.vt-est-erreur input { outline: 2px solid var(--erreur); outline-offset: 2px; }
.vt-cform__champ--case .vt-cform__erreur { margin-left: 32px; }

/* Actions : WhatsApp plein + e-mail en contour ; état + note */
.vt-cform__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vt-cform__etat { margin-top: 12px; min-height: 1.5em; font-weight: 600; font-size: .92rem; color: var(--ok); }
.vt-cform__etat:empty { display: none; }
.vt-cform__note { margin-top: 12px; font-size: .84rem; color: var(--texte-3); }
.vt-cform__note b { color: var(--erreur); }

/* --- Récapitulatif du panier dans le formulaire --- */
.vt-recap { margin-top: 20px; padding: 16px 18px 18px; background: var(--gris); border: 1px solid var(--filet); border-radius: var(--rayon); }
.vt-recap[hidden] { display: none; }
.vt-recap__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vt-recap__tete .vt-etiq { margin: 0; }
.vt-recap__modifier { font-size: .88rem; }
.vt-recap__lignes { margin-top: 10px; border-top: 1px solid var(--filet); }
.vt-recap__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: .92rem; }
.vt-recap__ligne > b { font-weight: 800; color: var(--primary); white-space: nowrap; min-width: 2.6em; }
.vt-recap__nom { font-weight: 600; color: var(--texte); min-width: 0; }
.vt-recap__nom small { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: var(--texte-2); }
.vt-recap__ligne output { font-weight: 800; color: var(--texte); white-space: nowrap; }
.vt-recap__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; font-weight: 800; font-size: 1rem; color: var(--texte); }
.vt-recap__total small { display: block; font-weight: 600; font-size: .76rem; color: var(--texte-3); }
.vt-recap__total output { font-size: 1.25rem; color: var(--primary); white-space: nowrap; }

/* --- Après l'envoi : panneau « message prêt » --- */
.vt-cform__apres { margin-top: 22px; }
.vt-cform__apres[hidden] { display: none; }
.vt-cform__apres:focus { outline: none; }
.vt-cform__apres-tete { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--filet); }
.vt-cform__apres-tete .vt-point__ico { background: var(--primary); color: var(--sur-primaire); }
.vt-cform__apres-tete h3 { font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--texte); }
.vt-cform__apres-tete p { margin-top: 4px; font-size: .92rem; }
.vt-cform__apercu { margin: 18px 0 0; padding: 16px 18px; background: var(--gris); border-left: 4px solid var(--primary); border-radius: 0 var(--rayon) var(--rayon) 0; font: inherit; font-size: .92rem; line-height: 1.55; color: var(--texte); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.vt-cform__apres-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.vt-cform__vider[hidden] { display: none; }
.vt-cform__apres-vide { margin-top: 12px; font-weight: 600; font-size: .92rem; color: var(--ok); }
.vt-cform__apres-vide[hidden] { display: none; }
.vt-cform__retour { margin-top: 18px; color: var(--texte-2); }
.vt-cform__retour svg { transform: rotate(180deg); }
.vt-cform__retour:hover { color: var(--texte); }

/* ============================================================
   3. COORDONNÉES — liste à icônes carrées, puis bloc livraison sur gris chaud
   ============================================================ */
.vt-coord { border: 1px solid var(--filet); border-radius: var(--rayon-carte); background: var(--blanc); overflow: hidden; }
.vt-coord__titre { padding: 26px 26px 0; font-size: clamp(1.25rem, 1.8vw, 1.45rem); }
.vt-coord__liste { padding: 8px 26px 22px; }
.vt-coord__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.vt-coord__item:last-child { border-bottom: 0; }
.vt-coord__item > div { min-width: 0; flex: 1; }
.vt-coord__item small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.vt-coord__fort { display: block; margin-top: 3px; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--texte); overflow-wrap: anywhere; }
p.vt-coord__fort { font-weight: 600; color: var(--texte); }
p.vt-coord__fort + p.vt-coord__fort { margin-top: 1px; }
a.vt-coord__fort { transition: color .2s; }
a.vt-coord__fort:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.vt-coord__ico-wa { background: rgba(37, 211, 102, .14); color: #128c4a; }
.vt-coord__itin { margin-top: 8px; font-size: .9rem; }
.vt-coord__reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vt-coord__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--filet); border-radius: var(--rayon); color: var(--texte); transition: border-color .2s, color .2s, background .2s; }
.vt-coord__reseaux a:hover { border-color: var(--primary); color: var(--primary); background: var(--primaire-pale); }
.vt-coord__reseaux svg { width: 18px; height: 18px; }

/* Bloc livraison : vérificateur de code postal du socle + trois points compacts */
.vt-coord__livraison { padding: 22px 26px 24px; background: var(--gris); border-top: 1px solid var(--filet); }
.vt-coord__sous { font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--texte); }
.vt-coord__livraison .vt-cp { margin-top: 14px; }
.vt-coord__livraison .vt-cp__form, .vt-coord__livraison .vt-cp__res { max-width: none; }
.vt-coord__texte { margin-top: 10px; font-size: .92rem; }
.vt-coord__texte a { color: var(--primary); font-weight: 600; }
.vt-coord__points { display: grid; gap: 10px; margin-top: 18px; }
.vt-coord__points li { display: flex; gap: 12px; align-items: flex-start; }
.vt-coord__points svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
.vt-coord__points b { display: block; font-weight: 800; font-size: .9rem; color: var(--texte); }
.vt-coord__points p { margin-top: 2px; font-size: .86rem; line-height: 1.5; }
.vt-coord__lien-livraison { margin-top: 18px; font-size: .9rem; }

/* ============================================================
   4. FAQ — <details> sur gris chaud, question en gras, « + » qui tourne
   ============================================================ */
.vt-faq { padding: 52px 0 64px; background: var(--gris); border-top: 1px solid var(--filet); }
.vt-faq__liste { display: grid; gap: 10px; max-width: 860px; }
.vt-faq__item { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); transition: border-color .2s, box-shadow .2s; }
.vt-faq__item[open] { border-color: var(--primaire-filet); box-shadow: var(--ombre-carte); }
.vt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--texte); transition: color .2s; }
.vt-faq__item summary::-webkit-details-marker { display: none; }
.vt-faq__item summary:hover { color: var(--primary); }
.vt-faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--rayon); }
.vt-faq__plus { flex: none; width: 20px; height: 20px; color: var(--primary); transition: transform .25s var(--ease); }
.vt-faq__item[open] .vt-faq__plus { transform: rotate(45deg); }
.vt-faq__rep { padding: 0 20px 18px; }
.vt-faq__rep p { font-size: .95rem; line-height: 1.65; max-width: 72ch; }
.vt-faq__pied { margin-top: 22px; font-size: .95rem; }
.vt-faq__pied a { color: var(--primary); font-weight: 600; }
.vt-faq__pied a:hover { color: var(--primaire-fonce); text-decoration: underline; }

/* ============================================================
   5. ADAPTATIF — ≤ 1000 : une colonne ; ≤ 640 : champs empilés, boutons pleine largeur
   ============================================================ */
@media (max-width: 1000px) {
	.vt-contact { padding: 36px 0 52px; }
	.vt-contact__grille { grid-template-columns: 1fr; gap: 24px; }
	.vt-cform { padding: 26px 24px 28px; }
}
@media (max-width: 640px) {
	.vt-contact { padding: 28px 0 44px; }
	.vt-cform { padding: 20px 16px 22px; }
	.vt-cform__rangee { grid-template-columns: 1fr; gap: 0; }
	.vt-cform__rangee .vt-cform__champ { margin-top: 16px; }
	.vt-cform__rangee + .vt-cform__rangee, .vt-cform__champ + .vt-cform__rangee, .vt-cform__resume + .vt-cform__rangee { margin-top: 0; }
	.vt-cform__actions, .vt-cform__apres-btns { flex-direction: column; align-items: stretch; }
	.vt-cform__actions .vt-btn, .vt-cform__apres-btns .vt-btn { width: 100%; }
	.vt-recap__ligne { grid-template-columns: auto minmax(0, 1fr); }
	.vt-recap__ligne output { grid-column: 2; text-align: left; }
	.vt-coord__titre { padding: 20px 16px 0; }
	.vt-coord__liste { padding: 4px 16px 16px; }
	.vt-coord__livraison { padding: 18px 16px 20px; }
	.vt-faq { padding: 44px 0 48px; }
	.vt-faq__item summary { padding: 14px 16px; font-size: .95rem; }
	.vt-faq__rep { padding: 0 16px 16px; }
}