/* =========================================================================
   VOG PROTECT — Base commune des pages refondues (16/09/2026)
   Palette, boutons, cartes à sélectionner, champs : partagés par la fiche
   produit (vogprotect-product.css) et le tunnel de commande
   (vogprotect-checkout.css). Maquettes : design_handoff_fiche_produit et
   design_handoff_commande (vert de marque #CAD02F).
   Chargée par catalog/product.tpl et checkout/checkout.tpl avec une version
   (?v=) : à changer dans ces deux gabarits à chaque modification.
   Texte posé sur le vert : toujours l'encre --vui-ink (le blanc ne passe pas).
   ========================================================================= */

:root {
  --vui-navy: #0B2545;
  --vui-text: #28415E;
  --vui-text-2: #42607F;
  --vui-label: #5C7490;
  --vui-muted: #6F849B;
  --vui-deco: #8FA3BA;
  --vui-blue: #1F63D6;
  --vui-blue-dark: #16479B;
  --vui-lime: #CAD02F;
  --vui-lime-dark: #B4BA23;
  --vui-ink: #1E2400;
  --vui-olive: #67700A;
  --vui-olive-text: #5A6200;
  --vui-olive-deep: #3F4A00;
  --vui-olive-dot: #8E960F;
  --vui-olive-line: #A9AF1E;
  --vui-lime-bg: #FBFCE8;
  --vui-lime-soft: #F7F9E4;
  --vui-lime-border: #E0E6A8;
  --vui-red: #D92D20;
  --vui-page: #EEF2F7;
  --vui-surface: #F4F7FB;
  --vui-stage: #F7FAFD;
  --vui-border: #E3EAF2;
  --vui-border-field: #DFE7F1;
  --vui-border-btn: #CBD8E8;
  --vui-sep: #EEF2F7;
  --vui-shadow: 0 12px 32px -22px rgba(11, 37, 69, .45);
}

/* ─── Boutons ─── */
.vog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.vog-btn:hover { text-decoration: none; }
.vog-btn:disabled,
.vog-btn.disabled { cursor: not-allowed; }
.vog-btn--line { border-color: var(--vui-border-btn); background: #fff; color: var(--vui-navy); }
.vog-btn--line:hover { background: var(--vui-surface); color: var(--vui-navy); }
.vog-btn--blue { min-height: 52px; background: var(--vui-blue); color: #fff; font-size: 15px; font-weight: 800; }
.vog-btn--blue:hover { background: var(--vui-blue-dark); color: #fff; }
.vog-btn--lime { min-height: 50px; padding: 0 22px; background: var(--vui-lime); color: var(--vui-ink); font-size: 15px; font-weight: 800; }
.vog-btn--lime:hover,
.vog-btn--lime:focus-visible { background: var(--vui-lime-dark); color: var(--vui-ink); }
.vog-btn--lime:disabled,
.vog-btn--lime.disabled { background: #E3E7C2; color: #7D8457; opacity: 1; }
.vog-btn--ghost { min-height: 50px; padding: 0 22px; border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 15px; font-weight: 800; }
.vog-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.vog-btn--sm { min-height: 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; }

/* ─── Carte à sélectionner (adresse, transporteur, paiement) ───
   <label class="vog-choice"> <input type=radio class="vog-choice__input"> <span class="vog-choice__dot"> … </label>
   L'état sélectionné suit le bouton radio (:has), sans JS. */
.vog-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  border: 2px solid var(--vui-border);
  border-radius: 14px;
  background: #fff;
  color: var(--vui-navy);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.vog-choice:hover { border-color: var(--vui-border-btn); }
.vog-choice--top { align-items: start; }
.vog-choice__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vog-choice__dot { display: block; width: 20px; height: 20px; border: 2px solid var(--vui-border-btn); border-radius: 50%; background: #fff; }
.vog-choice--top .vog-choice__dot { margin-top: 2px; }
.vog-choice:has(.vog-choice__input:checked) { border-color: var(--vui-olive-line); background: var(--vui-lime-bg); }
.vog-choice:has(.vog-choice__input:checked) .vog-choice__dot { border-color: var(--vui-olive-line); background: var(--vui-lime); }
.vog-choice:has(.vog-choice__input:focus-visible) { outline: 2px solid var(--vui-blue); outline-offset: 2px; }
.vog-choice__title { display: block; color: var(--vui-navy); font-size: 16px; font-weight: 800; line-height: 1.3; }
.vog-choice__desc { display: block; margin-top: 4px; color: var(--vui-text-2); font-size: 14px; font-weight: 600; line-height: 1.6; }
.vog-choice__desc p { margin: 0; }
.vog-choice__aside { color: var(--vui-navy); font-size: 17px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ─── Pastilles ─── */
.vog-pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--vui-lime-soft);
  color: var(--vui-olive-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Encart de confirmation (fond vert clair) ─── */
.vog-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--vui-lime-border);
  border-radius: 12px;
  background: var(--vui-lime-soft);
  color: var(--vui-olive-deep);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.vog-note__icon { flex: 0 0 auto; color: var(--vui-olive-text); font-weight: 800; }

/* ─── Case à cocher encadrée ─── */
.vog-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--vui-border);
  border-radius: 12px;
  background: #fff;
  color: var(--vui-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.vog-check input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vui-olive-dot); }