@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&family=DM+Mono:wght@300;400;500&family=Figtree:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════
   NEXUS · Design System
   Base = C (Ivoire · Graphite · Miel)
   Hybridé B (Violet doux pour interactions)
   ════════════════════════════════════════════════════════ */
:root {
    /* ── Fond ivoire · papier ── */
    --bg:        #F8F5EF;
    --bg-1:      #FFFFFF;
    --bg-2:      #F3EFE7;
    --bg-3:      #EBE6DA;
    --bg-4:      #E0D9CB;

    /* ── Bordures ── */
    --border:        rgba(60,50,30,0.10);
    --border-md:     rgba(60,50,30,0.17);
    --border-strong: rgba(60,50,30,0.30);

    /* ── Accent principal : Miel chaud ── */
    --honey:        #C4891F;
    --honey-bright: #E0A030;
    --honey-dim:    rgba(196,137,31,0.14);
    --honey-faint:  rgba(196,137,31,0.07);

    /* ── Accent secondaire : Violet B (hover, pills, interactions) ── */
    --violet:       #6B63E8;
    --violet-dim:   rgba(107,99,232,0.12);
    --violet-faint: rgba(107,99,232,0.06);
    --violet-text:  #4A43BF;

    /* ── Texte ── */
    --text:   #1A1710;
    --text-2: #635C4E;
    --text-3: #A49A89;
    --text-4: #C4BDB0;

    /* ── Sémantique ── */
    --ok:   #1F7A4A;
    --ok-bg: rgba(31,122,74,0.08);
    --warn:  #A06020;
    --warn-bg: rgba(160,96,32,0.10);
    --err:   #A03020;
    --err-bg: rgba(160,48,32,0.08);

    /* ── Typographie ── */
    --display: "Fraunces", Georgia, serif;   /* grands titres + italic */
    --sans:    "Figtree", system-ui, sans-serif; /* UI, labels, body */
    --mono:    "DM Mono", "Courier New", monospace;

    /* ── Espace ── */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --max-w: 1100px;
    --max-w-sm: 720px;

    /* ── Ombres légères (fond clair = ombres subtiles) ── */
    --shadow-xs: 0 1px 4px rgba(60,50,30,0.07);
    --shadow-sm: 0 2px 10px rgba(60,50,30,0.08);
    --shadow-md: 0 4px 24px rgba(60,50,30,0.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grain papier — très subtil, marque de fabrique */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

main, section, header, footer, nav { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: 700; }

::selection { background: var(--violet-dim); color: var(--text); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--bg-4); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Toast ── */
#toast-root {
    position: fixed;
    inset: auto 20px 20px auto;
    display: grid; gap: 8px; z-index: 9000;
}
.toast {
    min-width: 220px; max-width: 320px;
    padding: 11px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text-2);
    font-family: var(--mono); font-size: 0.78rem;
    box-shadow: var(--shadow-md);
    animation: toast-in 200ms cubic-bezier(0.22,1,0.36,1);
}
.toast[data-tone="success"] { border-color: rgba(31,122,74,0.25); color: var(--ok); }
.toast[data-tone="warning"]  { border-color: rgba(160,96,32,0.25); color: var(--warn); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.noscript-card {
    position: fixed; inset: auto 16px 16px;
    z-index: 100; padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--bg-1); border: 1px solid var(--border-md);
    font-family: var(--mono); font-size: 0.82rem;
    box-shadow: var(--shadow-sm);
}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
body.has-overlay, body.has-info-modal { overflow: hidden; }

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

/* ════════════════════════════════════════════════════════
   DARK MODE
   Activé par : [data-theme="dark"] sur <html>
   OU prefers-color-scheme: dark (si pas de préférence stockée)
   ════════════════════════════════════════════════════════ */

[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg:        #141210;
    --bg-1:      #1C1916;
    --bg-2:      #231F1B;
    --bg-3:      #2C2720;
    --bg-4:      #38322A;

    --border:        rgba(255,240,210,0.09);
    --border-md:     rgba(255,240,210,0.15);
    --border-strong: rgba(255,240,210,0.28);

    --honey:        #D4973A;
    --honey-bright: #EBB050;
    --honey-dim:    rgba(212,151,58,0.18);
    --honey-faint:  rgba(212,151,58,0.09);

    --violet:       #8880F0;
    --violet-dim:   rgba(136,128,240,0.16);
    --violet-faint: rgba(136,128,240,0.08);
    --violet-text:  #A9A4F5;

    --text:   #F0EBE0;
    --text-2: #B8AF9E;
    --text-3: #756D60;
    --text-4: #4A4438;

    --ok:     #3DAA6A;
    --ok-bg:  rgba(61,170,106,0.10);
    --warn:   #C8822A;
    --warn-bg: rgba(200,130,42,0.12);
    --err:    #C8503A;
    --err-bg: rgba(200,80,58,0.10);

    --shadow-xs: 0 1px 4px rgba(0,0,0,0.28);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.34);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.44);
}}

/* Appliqué via JS avec data-theme="dark" sur <html> */
[data-theme="dark"] {
    --bg:        #141210;
    --bg-1:      #1C1916;
    --bg-2:      #231F1B;
    --bg-3:      #2C2720;
    --bg-4:      #38322A;
    --border:        rgba(255,240,210,0.09);
    --border-md:     rgba(255,240,210,0.15);
    --border-strong: rgba(255,240,210,0.28);
    --honey:        #D4973A;
    --honey-bright: #EBB050;
    --honey-dim:    rgba(212,151,58,0.18);
    --honey-faint:  rgba(212,151,58,0.09);
    --violet:       #8880F0;
    --violet-dim:   rgba(136,128,240,0.16);
    --violet-faint: rgba(136,128,240,0.08);
    --violet-text:  #A9A4F5;
    --text:   #F0EBE0;
    --text-2: #B8AF9E;
    --text-3: #756D60;
    --text-4: #4A4438;
    --ok:     #3DAA6A;
    --ok-bg:  rgba(61,170,106,0.10);
    --warn:   #C8822A;
    --warn-bg: rgba(200,130,42,0.12);
    --err:    #C8503A;
    --err-bg: rgba(200,80,58,0.10);
    --shadow-xs: 0 1px 4px rgba(0,0,0,0.28);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.34);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.44);
}

/* Grain plus subtil en dark */
[data-theme="dark"] body::after { opacity: 0.014; }

/* Chrome blur en dark */
[data-theme="dark"] .site-chrome {
    background: rgba(20,18,16,0.88);
}

/* Intro halo dark */
[data-theme="dark"] .intro-frame::after {
    background: radial-gradient(ellipse at center, rgba(212,151,58,0.09), transparent 70%);
}

/* Option buttons dark — plus de fond blanc aveuglant */
[data-theme="dark"] .option-btn { background: var(--bg-2); }
[data-theme="dark"] .option-btn:hover { background: var(--violet-faint); }
[data-theme="dark"] .option-btn.is-selected { background: var(--violet-faint); }

/* Input dark */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea { background: var(--bg-2); }

/* Select arrow dark */
[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23756D60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Theme toggle button */
.theme-toggle {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-2);
    color: var(--text-3); transition: border-color 150ms, color 150ms, box-shadow 150ms;
}
.theme-toggle:hover { border-color: var(--border-md); color: var(--text); box-shadow: var(--shadow-xs); }
.theme-toggle svg { width: 15px; height: 15px; }

/* traj-card primary gradient en dark */
[data-theme="dark"] .traj-card--primary {
    background: linear-gradient(180deg, rgba(212,151,58,0.06) 0%, var(--bg-1) 70px);
}

/* Panel card subtle shadow en dark */
[data-theme="dark"] .panel-card,
[data-theme="dark"] .traj-card,
[data-theme="dark"] .prog-card,
[data-theme="dark"] .explain-card {
    box-shadow: none;
}

/* Chrome dark mode */
[data-theme="dark"] .site-chrome {
    background: rgba(20,18,16,0.90);
    border-bottom-color: rgba(255,240,210,0.07);
}

/* Analyzing frame dark */
[data-theme="dark"] .analyzing-frame { box-shadow: none; }

/* Outreach/modal backdrop en dark */
[data-theme="dark"] .outreach-prompt__backdrop,
[data-theme="dark"] .info-modal__backdrop {
    background: rgba(10,8,6,0.65);
}