/* ============================================================================
   Design system Skillopolis — publie depuis src/styles/base.css.
   Version 4. Ne pas editer ce fichier directement : republier via
   scripts/publish-design-system.mjs dans le depot skillopolis.
   ============================================================================ */
/* Inter auto-hebergee : les @import @fontsource sont remplaces par des
   @font-face pointant sur ./fonts/ (self-contained, sans dependance CDN externe). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/inter-latin-700-normal.woff2") format("woff2");
}
/* Reset, typographie de base et scrollbars.
   Inter est auto-hebergee (@fontsource) : pas de dependance a Google Fonts. */
/* Sous-ensemble latin uniquement : les autres jeux (cyrillique, grec,
   vietnamien) tripleraient le poids sans servir a l'interface. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: var(--text-body);
    background: var(--ui-page);
    color: var(--ui-fg);
    /* Les chiffres s'alignent en colonne dans les tableaux et les compteurs. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ui-accent); text-decoration: none; }
a:hover { color: var(--ui-accent-hover); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ui-fg-faint); }

@keyframes ui-pop-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

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