/* Normigo - Core styles
   Reset, CSS custom properties, base elements, utilities */

html { max-width: 100vw; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    color-scheme: light dark;
    /* Couleurs principales */
    --bg:          #f0f0ee;
    --bg-card:     #ffffff;
    --blue:        #0056a6;
    --blue-light:  #e8f0fa;
    --ok:          #1b7d3a;
    --warning:     #8a4a00;
    --danger:      #cc2936;
    --red:         #cc2936;
    --green:       #1b7d3a;
    --green-light: #e6f4ea;
    --red-light:   #fde8e8;
    --orange:      #8a4a00;
    --orange-light:#fef3e2;
    --text:        #1a1a1a;
    --text-muted:  #5c5c5c;
    --gray-50:     #f0f0ee;
    --gray-100:    #e8e8e6;
    --gray-200:    #c4c4c4;
    --gray-400:    #5c5c5c;
    --gray-600:    #5c5c5c;
    --gray-800:    #1a1a1a;
    --border:      #c4c4c4;
    --accent:      #ffd000;

    /* Ombres */
    --shadow:      0 1px 3px rgba(0,0,0,.1);
    --shadow-md:   0 4px 12px rgba(0,0,0,.15);
    --shadow-lg:   0 20px 60px rgba(0,0,0,.2);

    /* Transitions */
    --transition-base: all .15s ease;
    --transition-colors: background .15s, color .15s, border-color .15s;

    /* Rayon */
    --radius: 8px;

    /* Echelle espacement (base 4px) */
    --space-1: .25rem;   /* 4px  */
    --space-2: .5rem;    /* 8px  */
    --space-3: .75rem;   /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */

    /* Echelle typographique (base 16px) */
    --text-xs:   .75rem;   /* 12px */
    --text-sm:   .875rem;  /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg:   1.125rem; /* 18px */
    --text-xl:   1.25rem;  /* 20px */
    --text-2xl:  1.5rem;   /* 24px */
    --text-3xl:  2rem;     /* 32px */

    /* Breakpoints (references, pas variables CSS car @media ne les lit pas) */
    /* --bp-sm: 480px  - phone landscape */
    /* --bp-md: 768px  - tablet */
    /* --bp-lg: 1024px - desktop */
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
}

/* --- Accessibilite --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--blue);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    z-index: 1000;
    font-weight: 600;
}
.skip-link:focus {
    top: .5rem;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus clavier uniforme */
*:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}
.form-control:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 0;
    border-color: var(--blue);
}

/* Etat disabled uniforme */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled {
    background: var(--gray-100);
    color: var(--text-muted);
    cursor: not-allowed;
}
.form-control:read-only:not(select):not(textarea) {
    background: var(--gray-50);
}

/* --- Helpers texte --- */
.text-sm { font-size: .85rem; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.text-success { color: var(--ok); }
.text-warning { color: var(--warning); }

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

/* --- Dark mode --- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #1a1a1e;
        --bg-card:     #25252a;
        --text:        #e8e8e6;
        --text-muted:  #a0a0a0;
        --border:      #3a3a3e;
        --gray-50:     #22222a;
        --gray-100:    #2a2a30;
        --gray-200:    #3a3a3e;
        --gray-400:    #a0a0a0;
        --gray-600:    #a0a0a0;
        --gray-800:    #e8e8e6;
        --blue-light:  #0a2a4a;
        --green-light: #0a2a1a;
        --red-light:   #3a1a1a;
        --orange-light:#3a2a0a;
        --shadow: 0 1px 3px rgba(0,0,0,.3);
        --shadow-md: 0 4px 12px rgba(0,0,0,.4);
        --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
    }
    body { background: var(--bg); color: var(--text); }
    .form-control { background: var(--bg-card); color: var(--text); }
    table { color: var(--text); }
    tr:hover td { background: var(--gray-100); }
    .mon-pre { background: #1a1a1a; color: #e0e0e0; }
    .mon-table tr:hover { background: var(--blue-light); }
}

/* --- Print --- */
@media print {
    .skip-link, #nav, .btn, .toast, .modal-overlay, .nav-burger,
    .help-banner, .help-fab, .validated-banner, .nav-search-btn,
    .search-overlay, .feedback-fab { display: none !important; }
    .checklist-readonly { opacity: 1; }
    body { background: #fff; font-size: 11pt; }
    #app { padding: 0; max-width: 100%; }
    .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}