/* ============================================================
   Bannière de consentement cookies (RGPD) — variantes A/B.
   Hérite du thème via les tokens DS Vantage (aucune couleur en dur).
   ============================================================ */

#vsq-consent { font-family: var(--font-body); }

/* Scrim commun */
.vsqc-scrim {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(1.5px);
  opacity: 0; transition: opacity .3s ease;
}
#vsq-consent.vsqc-in .vsqc-scrim { opacity: 1; }

/* Eyebrow / titre / corps communs */
.vsqc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vsqc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.vsqc-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 8px 0 6px; color: var(--text); }
.vsqc-body { color: var(--text2); font-size: 13.5px; line-height: 1.55; margin: 0; }
.vsqc-link { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.vsqc-link:hover { color: var(--accent-bright); }

/* Boutons : s'appuient sur .btn du DS ; on ajuste tailles/hiérarchie */
#vsq-consent .btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; border-radius: var(--radius-md); }
.vsqc-dominant { font-size: 13px; padding: 13px 30px; box-shadow: 0 0 0 1px var(--accent-deep); }
.vsqc-dominant:hover { background: var(--accent-bright); box-shadow: 0 0 22px var(--glow); }
.vsqc-neutral { color: var(--text2); }

/* ---------- Variante 1A : barre pleine largeur ---------- */
.vsqc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--panel); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .28); padding: 20px 24px;
  transform: translateY(110%); opacity: 0; transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s;
}
#vsq-consent.vsqc-in .vsqc-bar { transform: none; opacity: 1; }
.vsqc-bar-main { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; max-width: 1320px; margin: 0 auto; }
.vsqc-txtblock { flex: 1; min-width: 280px; }
.vsqc-bar .vsqc-body { max-width: 640px; }
.vsqc-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vsqc-actions .btn--ghost { font-size: 11px; padding: 11px 16px; }

/* ---------- Variante 1B : carte d'angle ---------- */
.vsqc-card {
  position: fixed; bottom: 22px; right: 22px; width: 340px; z-index: 9999;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(24px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s;
}
#vsq-consent.vsqc-in .vsqc-card { transform: none; opacity: 1; }
.vsqc-cardtop { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
.vsqc-card .vsqc-title { font-size: 16px; }
.vsqc-card .vsqc-body { font-size: 13px; }
.vsqc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0 10px; }
.vsqc-grid .btn { padding: 12px 0; font-size: 12px; justify-content: center; }
.vsqc-grid .btn--ghost { border: 1px solid var(--accent); color: var(--accent); }
.vsqc-grid .btn--ghost:hover { background: var(--glow); }
.vsqc-grid .btn--primary:hover { background: var(--accent-bright); box-shadow: 0 0 18px var(--glow); }
.vsqc-cardlink { display: block; width: 100%; background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--text2); padding: 6px 0 0; }
.vsqc-cardlink:hover { color: var(--accent); }

/* ---------- Modale de préférences (commune) ---------- */
.vsqc-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); }
.vsqc-dialog {
  width: 100%; max-width: 460px; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; padding: 22px;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s;
}
#vsq-consent.vsqc-in .vsqc-dialog { transform: none; opacity: 1; }
.vsqc-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vsqc-dialog-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; color: var(--text); }
.vsqc-x { background: none; border: 0; color: var(--text2); font-size: 16px; cursor: pointer; padding: 4px; }
.vsqc-x:hover { color: var(--text); }
.vsqc-dialog-foot { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.vsqc-dialog-foot .btn { font-size: 12px; padding: 11px 16px; flex: 1; justify-content: center; }
.vsqc-save { border: 1px solid var(--accent); color: var(--accent); }

/* ---------- Catégories + toggles ---------- */
.vsqc-cats { display: flex; flex-direction: column; gap: 9px; }
.vsqc-cat { display: flex; align-items: center; gap: 14px; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; }
.vsqc-cat-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vsqc-cat-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text); }
.vsqc-cat-desc { color: var(--text2); font-size: 12.5px; line-height: 1.45; }
.vsqc-lock { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

.vsqc-tog { position: relative; width: 42px; height: 23px; border-radius: 100px; background: var(--panel2); border: 1px solid var(--border-strong); cursor: pointer; flex: none; padding: 0; transition: background .25s, border-color .25s; }
.vsqc-tog .knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text3); transition: transform .25s, background .25s; }
.vsqc-tog.on { background: var(--accent); border-color: var(--accent); }
.vsqc-tog.on .knob { background: var(--accent-ink); transform: translateX(19px); }
.vsqc-tog.locked { opacity: .7; cursor: not-allowed; }

/* ---------- Toasts ---------- */
.vsqc-toast { position: fixed; bottom: 22px; z-index: 10001; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; max-width: 320px; }
.vsqc-toast.in { opacity: 1; transform: none; }
.vsqc-toast-left { left: 22px; }
.vsqc-toast-right { right: 22px; }

@media (max-width: 560px) {
  .vsqc-card { left: 12px; right: 12px; width: auto; }
  .vsqc-actions { width: 100%; }
  .vsqc-actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vsqc-scrim, .vsqc-bar, .vsqc-card, .vsqc-dialog, .vsqc-toast { transition: opacity .2s; transform: none; }
}