/* Normigo design tokens — version "tech sobre"
   - Geist Sans + Geist Mono (self-hosted)
   - Palette bleu nuit / slate / lime
   - Tokens centralisés pour site + démo
*/

@font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/Geist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Geist Mono retire 2026-05-24 (audit perf) : seul usage etait
   .demo-item-phase en label uppercase court, le fallback stack systeme
   (ui-monospace / SF Mono / Menlo) rend tres bien sans charger 102 KB. */

:root {
    color-scheme: light dark;

    /* Typographie */
    --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    /* Palette dominante */
    --blue:        #0F1729;  /* bleu nuit, dominante hero/nav */
    --blue-dark:   #020617;  /* hover blue */
    --blue-light:  #1E293B;  /* slate-800, alternative subtile */

    /* Accent */
    --accent:      #84CC16;  /* lime-500 */
    --accent-dark: #65A30D;  /* lime-600, hover */
    --accent-soft: #ECFCCB;  /* lime-100, fond léger */

    /* Neutres */
    --bg:          #F8FAFC;  /* slate-50 */
    --bg-card:     #FFFFFF;
    --bg-subtle:   #F1F5F9;  /* slate-100 */
    --text:        #0F172A;  /* slate-900 */
    --text-muted:  #64748B;  /* slate-500 */
    --text-soft:   #94A3B8;  /* slate-400 */
    --border:      #E2E8F0;  /* slate-200 */
    --border-strong: #CBD5E1;/* slate-300 */

    /* Sémantique */
    --ok:          #16A34A;  /* green-600 — fond OK pour décoration */
    --ok-dark:     #15803D;  /* green-700 — AA sur blanc et inverse, à utiliser pour texte */
    --ok-text:     #15803D;  /* alias sémantique pour usage texte AA */
    --warning:     #D97706;  /* amber-600 — décoration */
    --warning-text:#B45309;  /* amber-700 — AA sur blanc, usage texte */
    --danger:      #DC2626;  /* red-600 — AA */
    --danger-dark: #B91C1C;  /* red-700 */

    /* Niveaux de sévérité (DUERP INRS 5×5) — tous AA sur blanc en inverse */
    --severity-low:      #15803D;  /* faible : indice 1-4 */
    --severity-med:      #B45309;  /* moyen : indice 5-9 */
    --severity-high:     #C2410C;  /* élevé : indice 10-15 */
    --severity-critical: #B91C1C;  /* critique : indice 16-25 */

    /* Rétrocompat avec l'existant */
    --link:        var(--blue);

    /* Forme */
    --radius:      6px;
    --radius-lg:   12px;
    --radius-full: 999px;

    --shadow-sm:   0 1px 2px rgba(15, 23, 41, .04);
    --shadow:      0 4px 12px rgba(15, 23, 41, .07);
    --shadow-lg:   0 20px 40px rgba(15, 23, 41, .12);
}

@media (prefers-color-scheme: dark) {
    :root {
        --blue:        #1E293B;  /* slate-800 plus doux en dark */
        --blue-dark:   #0F172A;
        --blue-light:  #475569;  /* slate-600, contraste suffisant sur bg dark */

        --accent:      #BEF264;  /* lime-300 plus clair pour contraste */
        --accent-dark: #A3E635;  /* lime-400 */
        --accent-soft: #1A2E05;

        --bg:          #0B1220;
        --bg-card:     #131C31;
        --bg-subtle:   #0F172A;
        --text:        #F1F5F9;
        --text-muted:  #94A3B8;
        --text-soft:   #64748B;
        --border:      #1E293B;
        --border-strong: #334155;

        --ok:          #22C55E;
        --ok-dark:     #16A34A;
        --ok-text:     #4ADE80;  /* green-400, AAA sur bg-card dark */
        --warning:     #F59E0B;
        --warning-text:#FBBF24;  /* amber-400, AAA sur bg-card dark */
        --danger:      #EF4444;
        --danger-dark: #DC2626;

        /* Niveaux sévérité dark : versions claires, texte sombre dessus */
        --severity-low:      #4ADE80;  /* green-400 */
        --severity-med:      #FBBF24;  /* amber-400 */
        --severity-high:     #FB923C;  /* orange-400 */
        --severity-critical: #F87171;  /* red-400 */

        --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
        --shadow:      0 4px 12px rgba(0, 0, 0, .4);
        --shadow-lg:   0 20px 40px rgba(0, 0, 0, .5);
    }

    /* Liens génériques : override les `a { color: var(--blue) }` inline
       des pages (var(--blue) en dark = slate-800, invisible sur bg sombre). */
    body a { color: var(--accent); }
}

/* Application typo de base — appliquée à tout le site via cascade */
html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

code, kbd, samp, pre, .l-mono { font-family: var(--font-mono); }

/* FAQ accordéon (P1 SEO 2026-05-22) — utilisé sur les pages /reglementations/<x>/ */
.l-faq { margin: 1rem 0 2rem; display: flex; flex-direction: column; gap: .5rem; }
.l-faq details {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 6px);
    padding: .9rem 1.1rem;
}
.l-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text, #0F172A);
    list-style: none;
    padding-right: 1.5rem;
    position: relative;
    user-select: none;
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    color: var(--text-muted, #64748B);
    transition: transform .15s;
}
.l-faq details[open] summary::after { content: "−"; }
.l-faq details > p {
    margin: .6rem 0 0;
    color: var(--text-muted, #475569);
    line-height: 1.55;
}

/* === Nav / header partagés site (P1 audit nav 2026-05-22) ===
   Style canonique pour TOUTES les pages (home + sous-pages). Avant : style
   inline duplique dans chaque page, avec divergences (logo lime vs blanc,
   bold vs medium, etc.). Maintenant centralise ici.
   Les sous-pages doivent retirer leurs blocs .l-nav* / .l-btn* inline.
*/
.l-nav {
    background: var(--blue);
    color: #fff;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.l-nav-brand {
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: -0.02em;
}
.l-nav-brand a { color: #fff; text-decoration: none; }
.l-nav-brand .logo {
    background: var(--accent);
    color: var(--blue);
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}
.l-nav-links {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}
.l-nav-links a:not(.l-btn) {
    color: rgba(255, 255, 255, .7);
    font-size: .88rem;
    font-weight: 500;
    transition: color .15s;
    text-decoration: none;
}
.l-nav-links a:not(.l-btn):hover { color: #fff; }
.l-btn {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: .88rem;
    border: none;
    cursor: pointer;
    min-height: 40px;
    transition: background .15s, transform .1s;
    font-family: inherit;
    letter-spacing: -0.005em;
    text-decoration: none;
}
.l-btn:active { transform: translateY(1px); }
.l-btn-white { background: #fff; color: var(--blue); }
.l-btn-white:hover { background: var(--accent); }
.l-btn-big { padding: .85rem 2rem; font-size: 1rem; }
@media (max-width: 640px) {
    .l-nav-links a:not(.l-btn) { display: none; }
}

/* Section "Voir aussi" en bas de page (P2 audit nav 2026-05-22) */
.l-see-also {
    max-width: 800px;
    margin: 2rem auto 0;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid var(--border);
}
.l-see-also h2 { font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .03em; }
.l-see-also ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.l-see-also li { margin: 0; }
.l-see-also a {
    color: var(--blue);
    font-size: .95rem;
    padding: .4rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    transition: border-color .15s;
    display: inline-block;
}
.l-see-also a:hover { border-color: var(--blue); text-decoration: none; }

/* Skip link a11y (P2 audit 2026-05-22) — masque sauf au focus clavier */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--blue);
    color: #fff;
    padding: .6rem 1rem;
    text-decoration: none;
    z-index: 200;
    font-size: .9rem;
    border-radius: 0 0 var(--radius) 0;
    transition: top .15s;
}
.skip-link:focus { top: 0; }

/* Burger menu mobile (P0 audit 2026-05-22) — affichage < 640px */
.l-nav-burger {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    padding: .35rem .65rem;
    border-radius: var(--radius);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.l-nav-burger:hover { background: rgba(255, 255, 255, .08); }

/* Cibles tactiles 44px min (P1 audit 2026-05-22) — override l-btn */
.l-btn { min-height: 44px; }

@media (max-width: 640px) {
    .l-nav-burger { display: inline-flex; }
    .l-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--blue);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
        box-shadow: var(--shadow-lg);
    }
    .l-nav-links.is-open { display: flex; }
    .l-nav-links a {
        display: block;
        width: 100%;
        text-align: left;
        padding: .85rem .25rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 1rem;
    }
    .l-nav-links a:last-child { border-bottom: none; }
    .l-nav-links a:not(.l-btn) {
        display: block !important;
        color: rgba(255, 255, 255, .9) !important;
    }
    .l-nav-links .l-btn-white {
        margin-top: .75rem;
        text-align: center;
        justify-content: center;
        border-radius: var(--radius);
    }
    .l-nav { position: sticky; }
}