/* ============================================================
   LEBANIM — Variables & Reset
   Fichier partagé par toutes les pages du site.
   Fusion : variables legacy (préfixe sans namespace, ex --gold)
   utilisées par les <style> inline existants + design tokens V3 du
   brief de refonte (préfixe --color-*, --font-*, etc.).
   Aucun conflit de nom : les deux ensembles sont disjoints.
   ============================================================ */

:root {
  /* ═══════════════════════════════════════════════════════════
     LEGACY (pré-V3) — référencées par les <style> inline existants.
     Conservées telles quelles pour ne pas casser le visuel actuel.
     ═══════════════════════════════════════════════════════════ */

  /* Couleurs principales */
  --gold:        #C9A84C;
  --gold-light:  #E8D49A;
  --gold-dark:   #8B6914;
  --cream:       #FAF7F0;
  --parchment:   #F0E8D5;
  --ink:         #1F2937;
  --ink-soft:    #4B5563;
  --ink-muted:   #6B7280;

  /* Couleurs secondaires */
  --blue-deep:   #1B3A5C;
  --blue-mid:    #2E6DA4;
  --green-olive: #4A6741;
  --green:       #2E7D32;
  --green-light: #E8F5E9;
  --red:         #C62828;
  --red-pomegranate: #8B2020;
  --red-light:   #FFEBEE;
  --orange:      #E65100;
  --orange-light: #FFF3E0;
  --purple:      #6A1B9A;
  --purple-light: #F3E5F5;

  /* UI legacy */
  --border:  #E5E7EB;
  --shadow:  0 4px 24px rgba(0, 0, 0, 0.08);
  --radius:  12px;
  --header-height: 64px;

  /* ═══════════════════════════════════════════════════════════
     DESIGN TOKENS V3 — du brief de refonte (design-refresh/).
     Adoptés progressivement page par page lors des étapes 3-7
     du brief. Les noms sont préfixés (--color-*, --font-*, --fs-*,
     --fw-*, --lh-*, --tracking-*, --space-*, --radius-*,
     --transition-*, --tree-*) pour ne pas entrer en conflit avec
     l'existant.
     ═══════════════════════════════════════════════════════════ */

  /* Brand */
  --color-gold:           #C9A961;
  --color-gold-dark:      #8B6F2A;
  --color-gold-soft:      #FAF1DA;
  --color-gold-fade:      rgba(201, 169, 97, 0.18);

  /* Neutral */
  --color-cream:          #FAF7F0;          /* fond des sections principales */
  --color-cream-soft:     #F7F5F0;          /* fond des sub-nav / sections d'appoint */
  --color-paper:          #FFFFFF;          /* fond des cards */
  --color-cream-dark:     #EFEFED;          /* fond du body autour des sections */

  --color-ink:            #0F0B08;          /* fond noir profond */
  --color-ink-soft:       #1A130E;
  --color-ink-light:      #F5EFE0;          /* texte sur fond noir = même que cream */

  /* Texte */
  --color-text-primary:   #1F2937;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #6B7280;
  --color-text-faint:     #9CA3AF;

  /* Bordures */
  --color-border-soft:        rgba(0, 0, 0, 0.08);
  --color-border-medium:      rgba(0, 0, 0, 0.15);
  --color-border-gold:        rgba(201, 169, 97, 0.4);
  --color-border-gold-strong: #C9A961;

  /* États */
  --color-success:        #4A8E4A;
  --color-success-bg:     rgba(99, 153, 99, 0.12);
  --color-success-border: rgba(99, 153, 99, 0.4);
  --color-danger:         #B5482E;
  --color-danger-border:  rgba(181, 72, 46, 0.3);

  /* Couleurs de génération arbre familial (V3) */
  --tree-paternal:    #6E8AB5;
  --tree-maternal:    #C77C9E;
  --tree-sibling:     #B49156;
  --tree-self:        #C9A961;
  --tree-spouse:      #6FA15F;
  --tree-child:       #5BA0CC;
  --tree-grandchild:  #E89656;

  /* Typo */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hebrew: 'Frank Ruhl Libre', serif;

  --fs-h1:      38px;
  --fs-h2:      28px;
  --fs-h3:      22px;
  --fs-body:    18px;
  --fs-small:   16px;
  --fs-tiny:    14px;
  --fs-eyebrow: 12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-eyebrow: 0.18em;
  --tracking-label:   0.06em;

  /* Espacements */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  14px;
  --space-lg:  22px;
  --space-xl:  36px;
  --space-2xl: 56px;
  --space-3xl: 80px;

  /* Radius (V3) — distincts du --radius legacy */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-medium: 0.25s ease;

  /* Layout */
  --topbar-height:     64px;
  --subnav-height:     56px;
  --max-content-width: 1280px;
}

/* ═══════════════════════════════════════════════════════════
   RESET
   Garde le reset legacy + ajoute la propriété antialiased du brief.
   Body : valeurs legacy conservées (--cream, 'DM Sans', --ink) pour
   ne pas changer le visuel actuel. Bascule sur --color-cream /
   var(--font-sans) / var(--color-text-primary) lors de la refonte
   de chaque page (étapes 3-7 du brief).
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  background: var(--color-cream);
  color: var(--color-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Règles globales V3 — affectent les balises non-stylées par les
   inline. Les inline existants gagnent par cascade quand ils sont
   définis (link rel CSS placé AVANT le <style> inline dans les pages). */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
em { color: var(--color-gold); font-style: italic; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* RTL hébreu inline */
[dir="rtl"], .he {
  font-family: var(--font-hebrew);
  direction: rtl;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS COMMUNES (legacy, conservées)
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 80%, 100% { opacity: .2; }
  40%            { opacity: 1; }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(229, 57, 53, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(229, 57, 53, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(229, 57, 53, 0);   }
}