/* ── Variables ───────────────────────────────────────────── */
:root {
    color-scheme: light dark;

    --color-navy:       #1B3A6B;
    --color-navy-dark:  #122849;
    --color-navy-light: #2a508f;
    --color-accent:     #1B3A6B;

    --color-bg:         #F5F6F8;
    --color-surface:    #FFFFFF;
    --color-border:     #E2E5EA;

    --color-text:       #1A1D23;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;

    --color-error:      #DC2626;
    --color-error-bg:   #FEF2F2;
    --color-success:    #16A34A;
    --color-success-bg: #F0FDF4;

    /* Teintes pastel — blocs de section (obésité / pédiatrie) — claires */
    --tint-blue-bg:   #f0f5ff;
    --tint-red-bg:    #fff5f5;
    --tint-amber-bg:  #fffaf0;
    --tint-purple-bg: #f7f0ff;
    --tint-green-bg:  #f0faf4;
    --tint-gray-bg:   #f5f6f8;

    /* Teintes pastel — alertes & sélections (hémorragie) — claires */
    --tint-info-bg:          #eff6ff;
    --tint-info-border:      #3b82f6;
    --tint-info-border-soft: #bfdbfe;
    --tint-info-text:        #1e40af;
    --tint-info-text-soft:   #60a5fa;

    --tint-ok-bg:      #f0fdf4;
    --tint-ok-border:  #4ade80;
    --tint-ok-text:    #15803d;

    --tint-warn-bg:      #fffbeb;
    --tint-warn-border:  #f59e0b;
    --tint-warn-text:    #92400e;

    --tint-danger-bg:      #fef2f2;
    --tint-danger-border:  #f87171;
    --tint-danger-text:    #b91c1c;

    --tint-muted-bg:      #f8fafc;
    --tint-muted-border:  #cbd5e1;
    --tint-muted-text:    #475569;

    /* Orange — « conditionnel / variable » (distinct de l'ambre --tint-warn-*) */
    --tint-orange-bg:     #fff7ed;
    --tint-orange-border: #fb923c;
    --tint-orange-text:   #c2410c;

    /* Violet — bordure + texte (fond = --tint-purple-bg ci-dessus).
       Bordure alignée sur la saturation des autres teintes bordure+texte (orange/rose/cyan
       ci-dessous) : l'ancienne valeur pastel (#ddd6fe) était trop proche du fond blanc pour
       marquer une sélection active (cf. bouton "Élevé +" du risque hémorragique). */
    --tint-purple-border: #a78bfa;
    --tint-purple-text:   #7c3aed;

    /* Rose — badge AAP / événement timeline anticoagulants (consultation) */
    --tint-pink-bg:     #fbe4ee;
    --tint-pink-border: #be123c;
    --tint-pink-text:   #be185d;

    /* Cyan — événement "relais" timeline anticoagulants (consultation) */
    --tint-cyan-border: #0891b2;

    --font-family:      'Inter', system-ui, -apple-system, sans-serif;
    --font-size-2xs:    0.6875rem; /* 11px — micro-références */
    --font-size-xs:     0.75rem;
    --font-size-sm:     0.875rem;
    --font-size-md:     0.9375rem; /* 15px — champs démasqués / cellules denses */
    --font-size-base:   1rem;
    --font-size-lg:     1.125rem;
    --font-size-xl:     1.25rem;
    --font-size-2xl:    1.5rem;
    --font-size-3xl:    1.875rem; /* 30px — gros titres */

    /* Tokens sémantiques (pointent vers l'échelle ci-dessus) */
    --fs-page-title:    var(--font-size-2xl);
    --fs-section-title: var(--font-size-lg);
    --fs-body:          var(--font-size-base);
    --fs-field:         var(--font-size-md);
    --fs-label:         var(--font-size-sm);
    --fs-source:        var(--font-size-xs);

    --radius-sm:        4px;
    --radius:           8px;
    --radius-lg:        12px;

    --shadow-sm:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:           0 4px 12px rgba(0,0,0,.08);

    --sidebar-width:    220px;
    --topbar-height:    56px;
    --bottomnav-height: 60px;

    /* Largeurs de contenu (paliers centrés) */
    --content-wide:     1200px;
    --content-medium:   960px;
    --content-narrow:   640px;

    /* Échelle d'espacement */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --transition:       150ms ease;
}

/* ── Mode sombre — choix manuel (data-theme="dark") ─────── */
:root[data-theme="dark"] {
    --color-bg:         #0F1520;
    --color-surface:    #1A2130;
    --color-border:     #2C3547;

    --color-text:       #E6E9EF;
    --color-text-muted: #9AA4B2;
    --color-text-light: #7C8698;

    --color-navy:       #6E9BE0;
    --color-navy-light: #8FB2E8;
    --color-navy-dark:  #5A86CC;
    --color-accent:     #6E9BE0;

    --color-error:      #F87171;
    --color-error-bg:   #3A1D1D;
    --color-success:    #4ADE80;
    --color-success-bg: #14301F;

    /* Teintes pastel — blocs de section — sombres (fond teinté foncé + texte clair) */
    --tint-blue-bg:   #1B2740;
    --tint-red-bg:    #3A1D1D;
    --tint-amber-bg:  #3A2E14;
    --tint-purple-bg: #2A1F3D;
    --tint-green-bg:  #14301F;
    --tint-gray-bg:   #232B3A;

    /* Teintes pastel — alertes & sélections — sombres */
    --tint-info-bg:          #1B2740;
    --tint-info-border:      #3b5f99;
    --tint-info-border-soft: #2C4066;
    --tint-info-text:        #8FB2E8;
    --tint-info-text-soft:   #6E9BE0;

    --tint-ok-bg:      #14301F;
    --tint-ok-border:  #1f6b3f;
    --tint-ok-text:    #4ADE80;

    --tint-warn-bg:      #3A2E14;
    --tint-warn-border:  #92610e;
    --tint-warn-text:    #FBBF24;

    --tint-danger-bg:      #3A1D1D;
    --tint-danger-border:  #7f3b3b;
    --tint-danger-text:    #F87171;

    --tint-muted-bg:      #232B3A;
    --tint-muted-border:  #3a4457;
    --tint-muted-text:    #9AA4B2;

    --tint-orange-bg:     #3A2614;
    --tint-orange-border: #FB923C;
    --tint-orange-text:   #FDBA74;

    --tint-purple-border: #C4B5FD;
    --tint-purple-text:   #C4B5FD;

    --tint-pink-bg:     #3A1D2E;
    --tint-pink-border: #FB7185;
    --tint-pink-text:   #F472B6;

    --tint-cyan-border: #22D3EE;

    --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
    --shadow:           0 4px 12px rgba(0,0,0,.5);
}

/* ── color-scheme forcé — corrige checkboxes/spinners natifs qui suivent
   l'OS au lieu du thème choisi (bug quand OS=sombre et thème forcé=clair) ── */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── Mode sombre — Auto (suit prefers-color-scheme), sauf override "light" ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:         #0F1520;
        --color-surface:    #1A2130;
        --color-border:     #2C3547;

        --color-text:       #E6E9EF;
        --color-text-muted: #9AA4B2;
        --color-text-light: #7C8698;

        --color-navy:       #6E9BE0;
        --color-navy-light: #8FB2E8;
        --color-navy-dark:  #5A86CC;
        --color-accent:     #6E9BE0;

        --color-error:      #F87171;
        --color-error-bg:   #3A1D1D;
        --color-success:    #4ADE80;
        --color-success-bg: #14301F;

        --tint-blue-bg:   #1B2740;
        --tint-red-bg:    #3A1D1D;
        --tint-amber-bg:  #3A2E14;
        --tint-purple-bg: #2A1F3D;
        --tint-green-bg:  #14301F;
        --tint-gray-bg:   #232B3A;

        --tint-info-bg:          #1B2740;
        --tint-info-border:      #3b5f99;
        --tint-info-border-soft: #2C4066;
        --tint-info-text:        #8FB2E8;
        --tint-info-text-soft:   #6E9BE0;

        --tint-ok-bg:      #14301F;
        --tint-ok-border:  #1f6b3f;
        --tint-ok-text:    #4ADE80;

        --tint-warn-bg:      #3A2E14;
        --tint-warn-border:  #92610e;
        --tint-warn-text:    #FBBF24;

        --tint-danger-bg:      #3A1D1D;
        --tint-danger-border:  #7f3b3b;
        --tint-danger-text:    #F87171;

        --tint-muted-bg:      #232B3A;
        --tint-muted-border:  #3a4457;
        --tint-muted-text:    #9AA4B2;

        --tint-orange-bg:     #3A2614;
        --tint-orange-border: #FB923C;
        --tint-orange-text:   #FDBA74;

        --tint-purple-border: #C4B5FD;
        --tint-purple-text:   #C4B5FD;

        --tint-pink-bg:     #3A1D2E;
        --tint-pink-border: #FB7185;
        --tint-pink-text:   #F472B6;

        --tint-cyan-border: #22D3EE;

        --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
        --shadow:           0 4px 12px rgba(0,0,0,.5);
    }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

a { color: var(--color-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video, iframe { display: block; max-width: 100%; }
table { max-width: 100%; }

input, button, select, textarea {
    font: inherit;
    color: inherit;
}

/* Anti-zoom automatique iOS : Safari zoome sur tout champ dont la police
   fait < 16px. Sur les appareils tactiles, on force 16px (en battant les
   surcharges par page) pour supprimer le saut de zoom à la saisie. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Layout — desktop (sidebar) ─────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    /* +16px : évite que l'ascenseur (quand présent) n'empiète sur le texte
       des libellés. --sidebar-width reste inchangé pour .main-content
       (L~355) : le débord recouvre uniquement le padding du contenu
       principal, jamais du texte. */
    width: calc(var(--sidebar-width) + 16px);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-navy);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.sidebar-brand-logo {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
}

.sidebar-footer {
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
    padding: var(--space-6);
}

/* Conteneurs de contenu centrés (à placer À L'INTÉRIEUR de .main-content).
   Breakpoint canonique du site : mobile = max-width:768px. */
.container {
    width: 100%;
    max-width: var(--content-medium);
    margin-inline: auto;
}
.container--wide { max-width: var(--content-wide); }
.container--narrow { max-width: var(--content-narrow); }

/* Breakpoint canonique du site : mobile = max-width:768px.
   Les CSS d'outils DOIVENT s'aligner sur 768px pour les collapses « empiler sur petit écran ».
   Un breakpoint distinct n'est justifié que par une grille précise. */
/* ── Layout — mobile (sidebar overlay) ──────────────────── */
@media (max-width: 768px) {
    /* Stack vertically: full-width topbar on top, content below.
       The sidebar is position:fixed (out of flow), so block layout
       lets the topbar span the full width instead of becoming a
       narrow flex item beside .main-content. */
    .app-layout {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 260px;
        z-index: 200;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transition: transform 0.25s ease;
        -webkit-transition: -webkit-transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 199;
    }
    .sidebar-backdrop.active {
        display: block;
    }

    .topbar-hamburger {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-text);
        padding: 4px;
        margin-right: 8px;
        display: flex;
        align-items: center;
    }

    .main-content {
        margin-left: 0;
        padding: var(--space-5) var(--space-4) var(--space-5);
    }
}

@media (min-width: 769px) {
    .sidebar-backdrop { display: none !important; }
    .topbar-hamburger { display: none; }
}

/* ── Topbar (mobile only) ────────────────────────────────── */
.topbar {
    display: none;
}

@media (max-width: 768px) {
    .topbar {
        display: flex;
        align-items: center;
        height: var(--topbar-height);
        padding: 0 16px;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        font-weight: 600;
        color: var(--color-navy);
        letter-spacing: -0.01em;
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

/* ── Page titles ─────────────────────────────────────────── */
.page-title {
    font-size: var(--fs-page-title);
    font-weight: 600;
    color: var(--color-navy);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: -20px;
    margin-bottom: 24px;
}

/* ── Focus clavier homogène ──────────────────────────────── */
/* Anneau navy uniforme au clavier uniquement (:focus-visible). Les champs qui
   stylent leur focus par bordure (ex. .cpa-input:focus { outline:none }) gardent
   leur rendu : leur règle :focus est plus spécifique. */
:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
}

/* ── Skip-link (accessibilité clavier) ───────────────────── */
/* Premier élément focusable de la page : masqué hors focus, visible au Tab. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 300;
    padding: 10px 16px;
    background: var(--color-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 150ms ease;
}
.skip-link:focus {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* Cible du skip-link : focalisable par script sans halo permanent */
.main-content:focus { outline: none; }
/* Conteneur sidebar : focalisé par script à l'ouverture du menu mobile
   (tabindex=-1) — pas d'anneau sur ce conteneur non interactif */
.sidebar:focus { outline: none; }

/* ── Titre de page contextuel (topbar mobile) ────────────── */
.topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Mouvement réduit (accessibilité) ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .skip-link {
        transition: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ── Impression ──────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .sidebar-backdrop, .skip-link, .report-btn { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    body { background: #fff; }
}