/* =========================================================================
   Synoptïa — Design System Tokens (colors + type + radii + spacing + shadows)
   Source : bundle Claude Design export du 2026-04-23, extrait de synoptia.fr
   À charger AVANT espace.css pour que les variables soient disponibles partout.
   ========================================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wghtOnly-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plusjakartasans-latin-wghtOnly-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin-normal.woff2') format('woff2');
}

/* ---------- TOKENS (Dark — default) ---------- */
:root {
  /* Canvas */
  --bg: #0B1226;
  --bg-mesh-start: #020617;
  --bg-mesh-end:   #0F172A;

  /* Ink */
  --text:  #E6EDF7;
  --muted: #B6C7DA;

  /* Surfaces */
  --panel:        rgba(255,255,255,.05);
  --panel-strong: rgba(8,14,32,.85);
  --border:       rgba(255,255,255,.12);

  /* Brand */
  --primary-900: #0F1E6D;   /* deep navy */
  --primary-800: #1733A6;
  --primary-700: #2451FF;   /* electric blue (primary CTA) */
  --accent-500:  #22D3EE;   /* cyan (secondary / accent) */
  --magenta:     #E11D8D;   /* brand magenta */

  /* Offer ladder — each of the 5 offers has its own brand color */
  --offer-forger:     #22D3EE;   /* cyan — step 1 */
  --offer-propulser:  #FF6B6B;   /* coral — step 2 (rainbow) */
  --offer-ancrer:     #E11D8D;   /* magenta — step 3 */
  --offer-rayonner:   #8B5CF6;   /* violet — step 4 */
  --offer-eclore:     #10B981;   /* emerald — step 5 */

  /* Propulser rainbow letters (step 2 gradient) */
  --rb-1: #FF6B6B;
  --rb-2: #FFA94D;
  --rb-3: #FFE066;
  --rb-4: #69DB7C;
  --rb-5: #22D3EE;
  --rb-6: #748FFC;
  --rb-7: #B197FC;
  --rb-8: #F06595;

  /* Focus ring */
  --focus: rgba(34,211,238,.35);

  /* Glass surfaces */
  --glass-subtle-bg:     rgba(255,255,255,.02);
  --glass-medium-bg:     rgba(255,255,255,.04);
  --glass-strong-bg:     rgba(255,255,255,.06);
  --glass-border-light:  rgba(255,255,255,.10);
  --glass-border-medium: rgba(255,255,255,.15);
  --glass-border-strong: rgba(255,255,255,.25);

  /* Elevation (glass) */
  --glass-shadow-light:  0 4px 16px rgba(0,0,0,.08);
  --glass-shadow-medium: 0 8px 24px rgba(0,0,0,.15);
  --glass-shadow-strong: 0 12px 40px rgba(0,0,0,.25);

  /* Neon glows (drop-shadow filters) */
  --glow-cyan:    drop-shadow(0 0 12px rgba(34,211,238,.7))  drop-shadow(0 0 24px rgba(34,211,238,.5));
  --glow-blue:    drop-shadow(0 0 12px rgba(36,81,255,.7))   drop-shadow(0 0 24px rgba(36,81,255,.5));
  --glow-magenta: drop-shadow(0 0 12px rgba(216,27,96,.7))   drop-shadow(0 0 24px rgba(216,27,96,.5));

  /* Metal / highlight sheen */
  --metal-shine: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.35) 100%);

  /* Signature brand gradients */
  --grad-hero:      linear-gradient(90deg, var(--primary-700), var(--magenta) 55%, var(--accent-500));
  --grad-btn:       linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 100%);
  --grad-btn-hover: linear-gradient(135deg, var(--primary-700) 0%, var(--accent-500) 100%);
  --grad-parcours:  linear-gradient(90deg, #22D3EE, #FF6B6B, #E11D8D, #8B5CF6, #10B981);

  /* Radii */
  --radius-xs:   8px;   /* chips, tags */
  --radius-sm:  12px;   /* inputs, small buttons */
  --radius-md:  16px;   /* info panels, testimonial cards */
  --radius-lg:  20px;   /* primary cards, hero image */
  --radius-xl:  24px;   /* large glass cards */
  --radius-pill: 999px; /* pills, CTAs */

  /* Spacing scale */
  --gap:    22px;
  --gap-xs:  6px;
  --gap-sm: 12px;
  --gap-md: 18px;
  --gap-lg: 28px;
  --gap-xl: 48px;

  /* Header */
  --header-h: 70px;

  /* Type scale (semantic) */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Orbitron', ui-monospace, monospace;

  --h1-size: clamp(44px, 7vw, 76px);
  --h1-weight: 900;
  --h1-leading: 0.98;
  --h1-tracking: -0.03em;

  --h2-size: clamp(28px, 4.2vw, 40px);
  --h2-weight: 800;
  --h2-leading: 1.15;

  --h3-size: 24px;
  --h3-weight: 700;

  --body-size: 16px;
  --body-leading: 1.6;
  --lead-size: 18px;

  color-scheme: dark;
}

/* ---------- TOKENS (Light) ---------- */
[data-theme="light"] {
  --bg: #F8FAFC;
  --bg-mesh-start: #F8FAFC;
  --bg-mesh-end:   #E2E8F0;

  --text:  #1E293B;
  --muted: #475569;

  --panel:        rgba(0,0,0,.03);
  --panel-strong: rgba(255,255,255,.90);
  --border:       rgba(0,0,0,.08);

  --primary-900: #1E40AF;
  --primary-800: #2563EB;
  --primary-700: #3B82F6;
  --accent-500:  #0891B2;
  --magenta:     #DB2777;

  --focus: rgba(8,145,178,.30);

  color-scheme: light;
}

/* ---------- ALIAS pour compat espace.css ----------
   Le CSS historique du sandbox utilise des noms courts (--primary, --accent).
   On les map aux nouveaux tokens semantiques pour ne rien casser.
*/
:root {
  --primary:       var(--primary-700);
  --primary-hover: var(--accent-500);
  --accent:        var(--accent-500);
  --cyan:          var(--accent-500);   /* alias historique utilisé par assessment.html, admin.html et espace.css */
  --accent-dim:    rgba(34,211,238,.15);
  --magenta-dim:   rgba(225,29,141,.15);
  --green:         var(--offer-eclore);
  --green-dim:     rgba(16,185,129,.15);
  --red:           #EF4444;
  --red-dim:       rgba(239,68,68,.12);
  --yellow:        #FBBF24;

  /* Rainbow historique (utilisé pour PROPULSER branding) */
  --rainbow:      linear-gradient(135deg, var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4), var(--rb-5), var(--rb-6), var(--rb-7), var(--rb-8));
  --rainbow-soft: linear-gradient(135deg,
                    rgba(255,107,107,.6), rgba(255,169,77,.6), rgba(255,224,102,.6),
                    rgba(105,219,124,.6), rgba(34,211,238,.6),  rgba(116,143,252,.6),
                    rgba(177,151,252,.6), rgba(240,101,149,.6));

  /* Surfaces alias */
  --bg-lighter:       #111B33;
  --bg-card:          #131D35;
  --muted-dim:        #7B8DA6;
  --glass-bg:         var(--glass-medium-bg);
  --glass-bg-hover:   rgba(255,255,255,.08);
  --glass-bg-strong:  var(--glass-strong-bg);
  --glass-border:     var(--glass-border-light);
  --glass-border-hover: var(--glass-border-medium);
  --glass-blur:       blur(10px) saturate(150%);

  /* Spacing alias */
  --space-xs: .375rem;
  --space-sm: .625rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radii alias (ancien naming) */
  --radius-full: var(--radius-pill);

  /* Shadows alias */
  --shadow-sm: 0 2px 8px  rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.45);
  --shadow-glow-cyan:    0 0 20px rgba(34,211,238,.25);
  --shadow-glow-primary: 0 0 20px rgba(36,81,255,.25);
  --shadow-glow-magenta: 0 0 20px rgba(225,29,141,.25);

  /* Signature bouton : double ombre glass-metal (design system) */
  --btn-shadow:
    0 8px 24px rgba(23,51,166,.5),
    0 0 30px rgba(36,81,255,.4),
    0 4px 12px rgba(34,211,238,.2),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(0,0,0,.3);
  --btn-shadow-hover:
    0 12px 32px rgba(23,51,166,.6),
    0 0 40px rgba(34,211,238,.6),
    0 6px 16px rgba(34,211,238,.3),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.3);

  /* Sidebar */
  --sidebar-width: 280px;

  /* Transitions */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);
}

/* Light theme : adapter les alias qui dépendent du thème */
[data-theme="light"] {
  --bg-lighter:         #FFFFFF;
  --bg-card:            #FFFFFF;
  --muted-dim:          #8896A8;
  --glass-bg:           rgba(0,0,0,.03);
  --glass-bg-hover:     rgba(0,0,0,.06);
  --glass-bg-strong:    rgba(0,0,0,.04);
  --glass-border:       rgba(0,0,0,.10);
  --glass-border-hover: rgba(0,0,0,.16);
  --glass-blur:         blur(10px) saturate(120%);
  --shadow-sm:          0 2px 8px  rgba(0,0,0,.06);
  --shadow-md:          0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:          0 8px 32px rgba(0,0,0,.10);
  --shadow-glow-cyan:    0 0 20px rgba(34,211,238,.12);
  --shadow-glow-primary: 0 0 20px rgba(36,81,255,.12);
  --shadow-glow-magenta: 0 0 20px rgba(225,29,141,.12);
  --accent-dim:          rgba(34,211,238,.10);
  --magenta-dim:         rgba(225,29,141,.08);
  --green-dim:           rgba(16,185,129,.08);
  --red-dim:             rgba(239,68,68,.06);
}

/* ---------- BASE ELEMENTS ---------- */
html { min-height: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--body-leading);
  background: var(--bg);
  color: var(--text);
}

/* Headings — Plus Jakarta Sans, heavy, with cyan drop-shadow halo */
h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  margin: 0;
  filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--accent-500) 40%, transparent));
}
h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  font-weight: var(--h2-weight);
  margin: 0 0 20px;
  filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--accent-500) 30%, transparent));
}
h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  margin: 0 0 8px;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent-500) 20%, transparent));
}

p    { margin: 0 0 12px; }
.lead { font-size: var(--lead-size); color: var(--muted); max-width: 68ch; margin: 0 auto 24px; text-align: center; }
.muted { color: var(--muted); }

/* Eyebrow label — la signature "LA MÉTHODE SYNOPTÏA" */
.eyebrow {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-500);
  font-weight: 600;
}

/* Hero-title gradient helper (blue → magenta → cyan) */
.grad-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Code / mono */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

/* Focus visible */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus);
}

a { color: inherit; text-decoration: none; }
a.link { color: var(--accent-500); text-underline-offset: 3px; }
a.link:hover { text-decoration: underline; }

/* Halos : les classes .halo, .halo-cyan, .halo-blue, .halo-magenta
   sont définies dans espace.css (convention historique du sandbox avec
   conteneur .login-halos / .espace-halos). Ne pas redéfinir ici. */