/* ═══════════════════════════════════════════
   BOLD VILLAGE — Design System v3.0
   Brand refresh avril 2026
   Palette bordeaux · Or conservé · Cormorant Garamond / Onest
   Single source of truth for all CSS tokens
   ═══════════════════════════════════════════ */

:root {
  /* ─── Brand Colors ─── */
  --aubergine:   #7b1c3e;   /* prune Bold Village — unifié #7b1c3e (demande client) */
  --prune-mid:   #7b1c3e;   /* prune — unifié (mêmes que aubergine, à plat) */
  --prune-light: #7b1c3e;   /* prune — unifié */
  --prune-soft:  #F5E8EA;   /* fond soft bordeaux — badges, tags */
  --or:          #C9A96E;   /* or Bold Village (modèle --bv-gold) */
  --or-dark:     #A77B34;   /* or profond — hover (modèle --bv-gold-deep) */
  --or-light:    #F5EDD8;   /* or très clair — fond or doux */
  --blanc:       #FFFFFF;
  --ivoire:      #F6F3E4;   /* ivoire — surface premium ponctuelle (modèle --bv-ivory) */
  --creme:       #FFFFFF;   /* blanc — grands fonds (demande client : pas de beige sur les grands fonds) */
  --page-bg:     #FFFFFF;   /* fond de page (modèle --bv-page) */
  --sombre:      #1E100F;   /* fond le plus sombre (modèle --bv-black) */

  /* ─── Text ─── */
  --text:        #1E100F;   /* texte principal (modèle --bv-black) */
  --text-mid:    #765E59;   /* texte secondaire — taupe (modèle --bv-muted) */
  --text-light:  #A98D84;   /* texte désactivé / hints (modèle --bv-soft) */
  --heading:     var(--prune-mid);  /* titres h1-h4 */

  /* ─── Utility ─── */
  --border:      #EADBCF;   /* bordures légères (modèle --bv-line) */
  --border-input:#D8C1B5;   /* bordures inputs (modèle --bv-line-strong) */
  --border-soft: #F0EAE5;   /* bordures très légères */
  --input-bg:    #FBF8EE;   /* fond des champs texte */
  --input-ph:    #BBB0A6;   /* placeholder couleur */
  --success:     #2E7D4F;   /* modèle --bv-ok */
  --error:       #B93B35;   /* modèle --bv-error */
  --warning:     #9A7400;   /* modèle --bv-warning */

  /* ─── Surfaces ─── */
  --glass-white: rgba(255, 255, 255, 0.78);
  --glass-dark:  rgba(48, 5, 14, 0.88);

  /* ─── Shadows ─── */
  --shadow-1: 0 1px 3px rgba(30,16,15,0.06), 0 1px 2px rgba(30,16,15,0.04);
  --shadow-2: 0 4px 16px rgba(30,16,15,0.08), 0 1px 4px rgba(30,16,15,0.04);
  --shadow-3: 0 8px 32px rgba(30,16,15,0.12), 0 2px 8px rgba(30,16,15,0.06);
  --shadow-4: 0 16px 48px rgba(30,16,15,0.16), 0 4px 16px rgba(30,16,15,0.08);

  /* ─── Radii ─── */
  --radius-pill: 28px;
  --radius-card: 12px;
  --radius-sm:   8px;

  /* ─── Typography ─── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Cormorant Garamond', Georgia, serif;   /* utiliser font-style:italic */
  --font-body:    'Onest', system-ui, sans-serif;

  /* ─── Layout ─── */
  --content-max: 1200px;
  --nav-h:       72px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Icons (Iconify) ─── */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 40px;

  /* ─── Aliases (dashboard & admin use minified names) ─── */
  --au: var(--aubergine);
  --pm: var(--prune-mid);
  --pl: var(--prune-light);
  --ps: var(--prune-soft);
  --ol: var(--or-light);
  --wh: var(--blanc);
  --cr: var(--creme);
  --tx: var(--text);
  --tm: var(--text-mid);
  --tl: var(--text-light);
  --bd: var(--border);
  --su: var(--success);
  --er: var(--error);
  --wr: var(--warning);
  --s1: var(--shadow-1);
  --s2: var(--shadow-2);
  --s3: var(--shadow-3);
  --s4: var(--shadow-4);
  --rc: var(--radius-card);
  --rs: var(--radius-sm);
  --rp: var(--radius-pill);
  --fd: var(--font-display);
  --fs: var(--font-script);
  --fb: var(--font-body);
  --eo: var(--ease-out);
  --ixs: var(--icon-xs);
  --ism: var(--icon-sm);
  --imd: var(--icon-md);
  --ilg: var(--icon-lg);
  --ixl: var(--icon-xl);
}

/* ═══════════════════════════════════════════
   UTILITY — Screen-reader only (visually hidden)
   ═══════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════
   HEADINGS — couleur globale prune-mid (plus léger)
   Les hero headings (blanc sur fond foncé) overrident via leur propre règle
   ═══════════════════════════════════════════ */
h1, h2, h3, h4 { color: var(--heading); }

/* Titres DANS une bannière/section à fond prune (#7b1c3e) → BLANCS.
   Sinon ils héritent de `--heading` (= prune) et deviennent invisibles sur le fond prune. */
.dash-welcome :is(h1,h2,h3,h4), .diag-report-header :is(h1,h2,h3,h4), .circle-card-mini :is(h1,h2,h3,h4),
.res-header :is(h1,h2,h3,h4), .profil-card :is(h1,h2,h3,h4), .methode :is(h1,h2,h3,h4),
.auth-left :is(h1,h2,h3,h4), .diag-hero :is(h1,h2,h3,h4), .prog-hero :is(h1,h2,h3,h4),
.circle-section :is(h1,h2,h3,h4), .wl-hero :is(h1,h2,h3,h4) { color: #fff; }

/* CTA navbar (pill prune « Mon espace » / « Faire mon diagnostic ») : texte TOUJOURS blanc.
   Sinon écrasé par `.nav-links a` (= foncé) quand le CTA est dans .nav-links. */
.nav-cta { color: #fff !important; }

/* ═══════════════════════════════════════════
   ICONIFY — base styles
   Usage : <iconify-icon icon="lucide:arrow-right"></iconify-icon>
   Taille : attribut width="…" OU classe .icon-sm/md/lg OU font-size
   Couleur : hérite de `color:` du parent (currentColor)
   Sets recommandés : lucide, phosphor, mdi, tabler, heroicons, fluent
   Recherche : https://icon-sets.iconify.design/
   ═══════════════════════════════════════════ */

iconify-icon {
  display: inline-block;
  vertical-align: -0.125em;
  line-height: 1;
  color: inherit;
}

iconify-icon[width],
iconify-icon[height] { vertical-align: middle; }

/* Classes utilitaires — taille */
.icon-xs { font-size: var(--icon-xs); }
.icon-sm { font-size: var(--icon-sm); }
.icon-md { font-size: var(--icon-md); }
.icon-lg { font-size: var(--icon-lg); }
.icon-xl { font-size: var(--icon-xl); }

/* ═══════════════════════════════════════════
   ACCESSIBILITY — Focus visible (WCAG 2.4.7)
   Applied globally; each page may refine per component
   ═══════════════════════════════════════════ */

/* Remove browser default outline, replace with brand ring */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Interactive elements that need focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="checkbox"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Dark surface override — lighter gold ring stands out better on dark */
.auth-left :focus-visible,
.adm-sidebar :focus-visible {
  outline-color: rgba(201, 169, 110, 0.8);
}

/* ═══════════════════════════════════════════
   TOUCH TARGETS — WCAG 2.5.5 (min 44×44px)
   ═══════════════════════════════════════════ */

/* Nav CTAs across all pages */
.nav-cta          { min-height: 44px; display: inline-flex; align-items: center; }
.wl-nav-back      { min-height: 44px; display: inline-flex; align-items: center; }
.circle-tier-cta  { min-height: 44px; display: inline-flex; align-items: center; }

/* Classes utilitaires — couleur */
.icon-or        { color: var(--or); }
.icon-aubergine { color: var(--aubergine); }
.icon-prune     { color: var(--prune-light); }
.icon-blanc     { color: var(--blanc); }
.icon-creme     { color: var(--creme); }
.icon-text      { color: var(--text); }
.icon-muted     { color: var(--text-light); }
.icon-success   { color: var(--success); }
.icon-error     { color: var(--error); }
.icon-warning   { color: var(--warning); }