/* ==========================================================================
   Design System — CISSP Express
   Principes : sobriété, lisibilité, confiance, concentration, cybersécurité.
   --------------------------------------------------------------------------
   Palette : bleu profond (confiance + cyber) + ambre (attention mémo)
            + vert (réussite) + rouge (alerte). Fonds neutres gris/ivoire.
   Typographie : système + Inter si chargée. Taille fluide (clamp).
   ========================================================================== */

/* ----- Design tokens — inspired by NeuroSec (corporate cyber trust) ---- */
:root {
    /* Couleurs — base (neutres slate, design NeuroSign) */
    --c-bg:          #FFFFFF;      /* blanc pur */
    --c-bg-alt:      #F1F5F9;      /* muted — alternance de sections */
    --c-surface:     #FFFFFF;
    --c-surface-alt: #F1F5F9;
    --c-border:      #E2E8F0;
    --c-text:        #0F1A2E;      /* foreground slate — titres, texte principal */
    --c-text-muted:  #64748B;
    --c-text-soft:   #94A3B8;

    /* Marque — slate (texte fort, ADAPTATIF clair/sombre) + lime primaire (NeuroSign) */
    --c-brand:        #0F1A2E;      /* slate profond ; passe en clair dans le thème sombre */
    --c-brand-hover:  #1E293B;
    --c-brand-soft:   #F1F5F9;      /* tint de survol (liens, toc) */
    --c-brand-alt:    #334155;
    --c-chip:         #0F1A2E;      /* SURFACE sombre constante (chips, footer, badges) */
    --c-accent:       #A2E771;      /* lime — identité NeuroSign */
    --c-accent-hover: #8BDC52;
    --c-accent-soft:  #E7F9DA;
    --c-accent-ink:   #356611;      /* vert lisible sur fond clair (liens/accents) */
    --c-on-accent:    #15300A;      /* texte sur fond lime (boutons primaires) */

    /* États pédagogiques */
    --c-success:      #4D9619;      /* vert (bonnes réponses), famille lime */
    --c-success-soft: #E7F9DA;
    --c-warning:      #D97706;      /* ambre — pièges, attention */
    --c-warning-soft: #FEF3C7;
    --c-warning-ink:  #92400E;
    --c-danger:       #DC2626;      /* rouge — erreurs */
    --c-danger-soft:  #FEE2E2;
    --c-danger-ink:   #991B1B;
    --c-info:         #3F74B8;      /* bleu info */
    --c-info-soft:    #E3EBF6;

    /* Typographie — Inter (UI) + Caveat (signature, accents) */
    --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
    --ff-signature: 'Caveat', 'Segoe Script', cursive;
    --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-2xl:  clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
    --fs-3xl:  clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.65;
    --lh-loose: 1.8;

    /* Espacements (échelle 4pt) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Rayons, ombres, focus */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm:  0 1px 2px rgba(15, 26, 43, 0.06);
    --shadow-md:  0 4px 12px rgba(15, 26, 43, 0.08);
    --shadow-lg:  0 12px 28px rgba(15, 26, 43, 0.12);

    --focus-ring: 3px solid #F59E0B;
    --focus-offset: 2px;

    /* Layout */
    --container:   min(72rem, 100% - 2rem);
    --container-narrow: min(56rem, 100% - 2rem);

    /* Animation */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 240ms;
}

/* Dark theme — navy très profond inspiré cyber */
[data-theme="dark"] {
    --c-bg:          #0E1726;       /* slate très profond */
    --c-bg-alt:      #131D30;
    --c-surface:     #131D30;
    --c-surface-alt: #1B2740;
    --c-border:      #2A3854;
    --c-text:        #E8EDF5;
    --c-text-muted:  #9FB0C9;
    --c-text-soft:   #6E7F99;
    --c-brand:       #E2E8F0;       /* texte fort → clair en sombre (adaptatif) */
    --c-brand-hover: #FFFFFF;
    --c-brand-soft:  rgba(255, 255, 255, 0.06);
    --c-brand-alt:   #94A3B8;
    --c-chip:        #22304A;       /* SURFACE chips/footer — reste sombre, lisible */
    --c-accent:      #A2E771;       /* lime conserve son éclat */
    --c-accent-hover:#B9ED94;
    --c-accent-soft: rgba(162, 231, 113, 0.15);
    --c-accent-ink:  #A2E771;       /* liens/accents → lime lisible sur sombre */
    --c-on-accent:   #15300A;
    --c-success:      #7BC74D;
    --c-success-soft: rgba(123, 199, 77, 0.16);
    --c-warning:      #FBBF24;
    --c-warning-soft: rgba(251, 191, 36, 0.15);
    --c-warning-ink:  #FCD34D;
    --c-danger:       #F87171;
    --c-danger-soft:  rgba(248, 113, 113, 0.15);
    --c-danger-ink:   #FCA5B5;
    --c-info:         #6FA8FF;
    --c-info-soft:    rgba(111, 168, 255, 0.14);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.65);
}

/* ----- Polices (self-hosted, CSP font-src 'self') --------------------- */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-variable.ttf') format('truetype-variations');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('/assets/fonts/caveat-variable.ttf') format('truetype-variations');
    font-weight: 400 700; font-style: normal; font-display: swap;
}

/* Police signature (accents manuscrits — design NeuroSign) */
.signature { font-family: var(--ff-signature); font-weight: 600; }

/* ----- Reset minimal --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent-ink); text-decoration-skip-ink: auto; }
a:hover { color: var(--c-accent-ink); text-decoration: underline; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
    line-height: var(--lh-tight);
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
h3 { font-size: var(--fs-xl); margin-top: var(--sp-6); }
h4 { font-size: var(--fs-lg); margin-top: var(--sp-5); }

p, ul, ol { margin: 0 0 var(--sp-4); }
ul, ol { padding-left: var(--sp-5); }
li + li { margin-top: var(--sp-1); }

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

/* ----- Layout primitives ---------------------------------------------- */
.container        { width: var(--container); margin-inline: auto; }
.container-narrow { width: var(--container-narrow); margin-inline: auto; }
.stack > * + *    { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.grid-auto { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* Utilities pédagogiques */
.pad-block-6 { padding-block: var(--sp-6); }
.pad-block-7 { padding-block: var(--sp-7); }
.pad-block-8 { padding-block: var(--sp-8); }
.mt-0 { margin-top: 0; }
.text-muted { color: var(--c-text-muted); }
.text-soft  { color: var(--c-text-soft); }
.max-60ch   { max-width: 60ch; }
.max-56rem  { max-width: 56rem; }
.card-link  { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.lead       { font-size: var(--fs-md); color: var(--c-text-muted); max-width: 60ch; }
.prose      { max-width: 56rem; line-height: var(--lh-base); }
.prose h2   { border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-2); }
.prose ul ul { margin-top: var(--sp-1); }
.prose code { background: var(--c-surface-alt); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 0.92em; }

/* Accessibilité — skip link */
.skip-link {
    position: absolute; left: -9999px;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-chip); color: #fff;
    border-radius: var(--radius-md);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); z-index: 1000; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ----- Motion preferences --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}