/* =============================================================================
   Onagre UI — socle : reset, typographie, accessibilité, utilitaires de mise en page.
   Ordre des couches : reset < base < components < layout < utilities (une utilité l'emporte toujours).
   ============================================================================= */
@layer o-reset, o-base, o-components, o-layout, o-utilities;

@layer o-reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
    body { min-height: 100dvh; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    img { height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
    button { cursor: pointer; background: none; border: 0; padding: 0; }
    button:disabled { cursor: not-allowed; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    a { color: inherit; text-decoration: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    ul[role="list"], ol[role="list"], ul.o-list-reset, ol.o-list-reset { list-style: none; padding: 0; }
    fieldset { border: 0; padding: 0; min-width: 0; }
    legend { padding: 0; }
    [hidden] { display: none !important; }
    dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
    hr { border: 0; border-top: 1px solid var(--o-border-subtle); }
    code, kbd, samp, pre { font-family: var(--o-font-mono); font-size: 0.92em; }
    pre { overflow: auto; }
    summary { cursor: pointer; }
}

@layer o-base {
    html {
        font-family: var(--o-font-sans);
        font-size: 100%;
        font-feature-settings: var(--o-font-features);
        font-optical-sizing: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        background: var(--o-bg);
        color: var(--o-text);
        scrollbar-color: var(--o-border-strong) transparent;
        scrollbar-width: thin;
    }

    body {
        font-size: var(--o-text-md);
        line-height: var(--o-leading-normal);
        font-weight: var(--o-weight-regular);
        background: var(--o-bg);
        color: var(--o-text);
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: var(--o-weight-semibold);
        line-height: var(--o-leading-tight);
        letter-spacing: var(--o-tracking-tight);
        color: var(--o-text);
        text-wrap: balance;
    }
    h1 { font-size: var(--o-text-2xl); letter-spacing: var(--o-tracking-display); }
    h2 { font-size: var(--o-text-xl); }
    h3 { font-size: var(--o-text-lg); }
    h4, h5, h6 { font-size: var(--o-text-md); }
    p { text-wrap: pretty; }

    a { color: var(--o-accent-fg); transition: color var(--o-duration-fast) var(--o-ease-out), text-decoration-color var(--o-duration-fast) var(--o-ease-out); }
    a:hover { color: var(--o-accent-hover); }
    /* Liens de texte : l'accent est neutre, le soulignement les distingue du texte */
    a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); }
    a:not([class]):hover { text-decoration-color: currentColor; }
    strong, b { font-weight: var(--o-weight-semibold); }
    small { font-size: var(--o-text-xs); }

    ::selection { background: color-mix(in oklch, var(--o-accent) 28%, transparent); }

    :focus { outline: none; }
    :focus-visible {
        outline: 2px solid var(--o-focus);
        outline-offset: 2px;
        border-radius: var(--o-radius-xs);
    }

    code {
        padding: 0.1em 0.35em;
        border-radius: var(--o-radius-xs);
        background: var(--o-surface-2);
        border: 1px solid var(--o-border-subtle);
        color: var(--o-text);
    }

    kbd {
        display: inline-flex;
        align-items: center;
        min-width: 1.4em;
        height: 1.4em;
        padding: 0 0.35em;
        border-radius: var(--o-radius-xs);
        border: 1px solid var(--o-border);
        border-bottom-width: 2px;
        background: var(--o-surface);
        color: var(--o-text-2);
        font-size: var(--o-text-2xs);
        font-family: var(--o-font-sans);
        font-weight: var(--o-weight-medium);
    }

    /* Validation Blazor : messages sous les champs */
    .validation-message {
        display: flex;
        align-items: center;
        gap: var(--o-space-1);
        margin-top: var(--o-space-1-5);
        font-size: var(--o-text-xs);
        color: var(--o-danger-fg);
    }
    .validation-errors {
        list-style: none;
        padding: var(--o-space-3) var(--o-space-4);
        border-radius: var(--o-radius-md);
        border: 1px solid var(--o-danger-line);
        background: var(--o-danger-soft);
        color: var(--o-danger-fg);
        font-size: var(--o-text-sm);
        display: grid;
        gap: var(--o-space-1);
    }

    /* Interface d'erreur Blazor (reconnexion / exception) */
    #blazor-error-ui {
        display: none;
        position: fixed;
        inset: auto var(--o-space-4) var(--o-space-4) auto;
        z-index: var(--o-z-toast);
        max-width: 26rem;
        padding: var(--o-space-3) var(--o-space-4);
        border-radius: var(--o-radius-lg);
        background: var(--o-surface-raised);
        border: 1px solid var(--o-danger-line);
        box-shadow: var(--o-shadow-lg);
        font-size: var(--o-text-sm);
        color: var(--o-text);
    }
    #blazor-error-ui .reload { color: var(--o-accent-fg); font-weight: var(--o-weight-medium); margin-left: var(--o-space-2); }
    #blazor-error-ui .dismiss { float: right; color: var(--o-text-3); margin-left: var(--o-space-3); cursor: pointer; }

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

/* =============================================================================
   Utilitaires — volontairement restreints : mise en page et typographie. Les composants portent le reste.
   ============================================================================= */
@layer o-utilities {
    .o-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;
    }

    /* Empilements et alignements */
    .o-stack { display: flex; flex-direction: column; gap: var(--o-gap, var(--o-space-4)); }
    .o-row { display: flex; align-items: center; gap: var(--o-gap, var(--o-space-2)); }
    .o-row--top { align-items: flex-start; }
    .o-row--baseline { align-items: baseline; }
    .o-row--wrap { flex-wrap: wrap; }
    .o-row--between { justify-content: space-between; }
    .o-row--end { justify-content: flex-end; }
    .o-row--center { justify-content: center; }
    .o-grow { flex: 1 1 0%; min-width: 0; }
    .o-shrink-0 { flex-shrink: 0; }
    .o-ml-auto { margin-left: auto; }

    .o-gap-0 { --o-gap: 0; }
    .o-gap-1 { --o-gap: var(--o-space-1); }
    .o-gap-2 { --o-gap: var(--o-space-2); }
    .o-gap-3 { --o-gap: var(--o-space-3); }
    .o-gap-4 { --o-gap: var(--o-space-4); }
    .o-gap-5 { --o-gap: var(--o-space-5); }
    .o-gap-6 { --o-gap: var(--o-space-6); }
    .o-gap-8 { --o-gap: var(--o-space-8); }

    /* Grilles adaptatives : colonnes minimales, retour automatique à la ligne */
    .o-grid { display: grid; gap: var(--o-gap, var(--o-space-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--o-col-min, 16rem)), 1fr)); }
    .o-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .o-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .o-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .o-grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
    .o-grid--aside-left { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; }
    .o-span-2 { grid-column: span 2; }
    .o-span-all { grid-column: 1 / -1; }
    @media (max-width: 75rem) {
        .o-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .o-grid--sidebar, .o-grid--aside-left { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 48rem) {
        .o-grid--2, .o-grid--3, .o-grid--4 { grid-template-columns: minmax(0, 1fr); }
        .o-span-2 { grid-column: auto; }
        .o-hide-mobile { display: none !important; }
    }
    @media (min-width: 48.0625rem) {
        .o-only-mobile { display: none !important; }
    }

    /* Texte */
    .o-text-2xs { font-size: var(--o-text-2xs); }
    .o-text-xs { font-size: var(--o-text-xs); }
    .o-text-sm { font-size: var(--o-text-sm); }
    .o-text-md { font-size: var(--o-text-md); }
    .o-text-lg { font-size: var(--o-text-lg); }
    .o-text-xl { font-size: var(--o-text-xl); }
    .o-text-2xl { font-size: var(--o-text-2xl); letter-spacing: var(--o-tracking-display); }
    .o-text-3xl { font-size: var(--o-text-3xl); letter-spacing: var(--o-tracking-display); }

    .o-fg { color: var(--o-text); }
    .o-fg-2 { color: var(--o-text-2); }
    .o-fg-3 { color: var(--o-text-3); }
    .o-fg-accent { color: var(--o-accent-fg); }
    .o-fg-ok { color: var(--o-ok-fg); }
    .o-fg-warn { color: var(--o-warn-fg); }
    .o-fg-danger { color: var(--o-danger-fg); }
    .o-fg-info { color: var(--o-info-fg); }

    .o-medium { font-weight: var(--o-weight-medium); }
    .o-semibold { font-weight: var(--o-weight-semibold); }
    .o-bold { font-weight: var(--o-weight-bold); }
    .o-mono { font-family: var(--o-font-mono); font-size: 0.92em; letter-spacing: 0; }
    .o-num { font-variant-numeric: tabular-nums; font-feature-settings: var(--o-font-features), "tnum"; }
    .o-caps { text-transform: uppercase; letter-spacing: var(--o-tracking-caps); font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); }
    .o-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .o-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .o-nowrap { white-space: nowrap; }
    .o-break { overflow-wrap: anywhere; }
    .o-text-center { text-align: center; }
    .o-text-end { text-align: end; }

    /* Espacements ponctuels (les composants gèrent l'essentiel) */
    .o-mt-1 { margin-top: var(--o-space-1); }
    .o-mt-2 { margin-top: var(--o-space-2); }
    .o-mt-3 { margin-top: var(--o-space-3); }
    .o-mt-4 { margin-top: var(--o-space-4); }
    .o-mt-6 { margin-top: var(--o-space-6); }
    .o-mt-8 { margin-top: var(--o-space-8); }
    .o-mb-2 { margin-bottom: var(--o-space-2); }
    .o-mb-4 { margin-bottom: var(--o-space-4); }
    .o-mb-6 { margin-bottom: var(--o-space-6); }
    .o-p-0 { padding: 0 !important; }
    .o-w-full { width: 100%; }
    .o-min-w-0 { min-width: 0; }
}

/* Bascule de thème : aucune transition de couleur pendant le changement */
.o-theme-switching, .o-theme-switching *, .o-theme-switching *::before, .o-theme-switching *::after { transition: none !important; }

@layer o-base {
    /* Lien d'évitement : premier élément focusable, visible au clavier seulement */
    .o-skip-link {
        position: fixed; left: var(--o-space-3); top: var(--o-space-3); z-index: var(--o-z-tooltip);
        padding: var(--o-space-2) var(--o-space-3); border-radius: var(--o-radius-md);
        background: var(--o-accent); color: var(--o-on-accent); font-size: var(--o-text-sm); font-weight: var(--o-weight-medium);
        transform: translateY(-200%); transition: transform var(--o-duration-base) var(--o-ease-out);
    }
    .o-skip-link:focus-visible { transform: none; color: var(--o-on-accent); }
}

@layer o-base {
    /* Focus programmatique (FocusOnNavigate, tabindex="-1") : pas d'anneau, le contenu ne devient pas un contrôle */
    [tabindex="-1"]:focus, h1:focus { outline: none; }
}