/* ==========================================================================
   Maquettes testables — A « Projecteur », B « Soirée », C « Affiche »
   Même site, même contenu : seuls les tokens (couleurs, typographie, formes)
   et quelques variantes de mise en page changent. Test : ?maquette=a|b|c
   ========================================================================== */

:root, :root[data-theme='a'] {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --display-weight: 640; --display-tracking: -.015em;

  --bg: #fbf5e9; --bg-alt: #f4e9d2; --surface: #fffdf8;
  --ink: #16224a; --ink-soft: #46527a;
  --line: rgba(22, 34, 74, .14); --line-strong: rgba(22, 34, 74, .38); --hover: rgba(22, 34, 74, .07);
  --primary: #16224a; --on-primary: #fbf5e9;
  --accent: #ee6c4d; --on-accent: #16224a;
  --highlight: #f4b942; --on-highlight: #16224a; --highlight-strong: #c98a08;
  --focus: #1d4ed8; --eyebrow: #46527a; --field-bg: #fff;
  --ok: #1d7a4d; --warn: #9a5b00; --danger: #b3261e;

  --t-societe: #ee6c4d; --t-soiree: #e0a21c; --t-tcg: #4f6fd6; --t-jdr: #8a5cc2; --t-initiation: #3a9467;

  --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --btn-radius: 14px;
  --btn-shadow: 0 6px 16px -8px rgba(22, 34, 74, .55); --btn-shadow-hover: 0 12px 22px -10px rgba(22, 34, 74, .6);
  --card-border: 1px solid var(--line); --card-shadow: 0 10px 30px -22px rgba(22, 34, 74, .6); --card-shadow-hover: 0 22px 40px -24px rgba(22, 34, 74, .65);

  --hero-bg: radial-gradient(120% 90% at 85% 0%, #fde9c4 0%, transparent 60%), linear-gradient(180deg, #fbf5e9, #f6ead2);
  --hero-ink: #16224a; --hero-em: #d4492b;
  --hero-badge-bg: #16224a; --hero-badge-ink: #fbf5e9; --hero-card: #fffdf8; --hero-card-ink: #16224a;

}

/* ---------- A validée — boutons à ombre portée pleine (emprunt à la maquette C, version adoucie) ----------
   Ombre courte (3 px) bleu nuit, contour net, coins arrondis conservés ; au survol le bouton se soulève,
   à l'appui il s'enfonce. Sur les fonds bleu nuit, contour et ombre passent en crème pour rester visibles. */
:root[data-theme='a'] { --btn-shadow: 3px 3px 0 var(--ink); --btn-shadow-hover: 5px 5px 0 var(--ink); --btn-shadow-press: 1px 1px 0 var(--ink); }
:root[data-theme='a'] .btn { --_bd: var(--ink); transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease; }
:root[data-theme='a'] .btn:active { transform: translate(2px, 2px); box-shadow: var(--btn-shadow-press); }
:root[data-theme='a'] .btn--ghost { --_bg: var(--surface); box-shadow: var(--btn-shadow); }
:root[data-theme='a'] .btn[disabled], :root[data-theme='a'] .btn[aria-disabled='true'] { box-shadow: none; transform: none; }
:root[data-theme='a'] .mobile-bar .btn { box-shadow: 2px 2px 0 var(--ink); }
:root[data-theme='a'] .mobile-bar .btn:active { box-shadow: var(--btn-shadow-press); }
:root[data-theme='a'] .section--ink, :root[data-theme='a'] .site-footer, :root[data-theme='a'] .adm-bar { --btn-shadow: 3px 3px 0 var(--bg); --btn-shadow-hover: 5px 5px 0 var(--bg); --btn-shadow-press: 1px 1px 0 var(--bg); }
:root[data-theme='a'] .section--ink .btn, :root[data-theme='a'] .site-footer .btn, :root[data-theme='a'] .adm-bar .btn { --_bd: var(--bg); }
:root[data-theme='a'] .section--ink .btn--ghost, :root[data-theme='a'] .adm-bar .btn--ghost { --_bg: transparent; --_fg: var(--bg); }
@media (hover: hover) {
  :root[data-theme='a'] .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--btn-shadow-hover); }
  :root[data-theme='a'] .btn:active { transform: translate(2px, 2px); box-shadow: var(--btn-shadow-press); }
  :root[data-theme='a'] .btn--ghost:hover { --_bg: var(--ink); --_fg: var(--bg); box-shadow: var(--btn-shadow-hover); }
  :root[data-theme='a'] .section--ink .btn--ghost:hover, :root[data-theme='a'] .adm-bar .btn--ghost:hover { --_bg: var(--bg); --_fg: var(--ink); }
}
@media (hover: none) { :root[data-theme='a'] .btn:hover { transform: none; box-shadow: var(--btn-shadow); } :root[data-theme='a'] .btn--ghost:hover { --_bg: var(--surface); --_fg: var(--ink); box-shadow: var(--btn-shadow); }
  :root[data-theme='a'] .section--ink .btn--ghost:hover, :root[data-theme='a'] .adm-bar .btn--ghost:hover { --_bg: transparent; --_fg: var(--bg); } }
