/* Numerilabs — base.css
   Design tokens + resets + composants partagés (button, form).
   Tokens portés depuis l'ancien base.css/global.css de l'app React.
*/

/* Fonts auto-hébergées dans /assets/fonts/ (woff2 latin + latin-ext subsets).
   Deux @font-face par poids avec unicode-range : le navigateur choisit
   automatiquement le bon woff2 selon le caractère rendu (latin pour ASCII +
   accents Latin-1 + ponctuation, latin-ext pour œ Œ et le reste du Latin
   étendu). Couvre tous les caractères français correctement. */

/* === Inter 400 === */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Inter 500 === */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Inter 600 === */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Inter 700 === */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('/assets/fonts/inter-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Space Grotesk 400 === */
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/space-grotesk-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/space-grotesk-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Space Grotesk 500 === */
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Space Grotesk 600 === */
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('/assets/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('/assets/fonts/space-grotesk-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Space Grotesk 700 === */
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('/assets/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === JetBrains Mono 400 === */
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === JetBrains Mono 500 === */
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Caveat 400 === */
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/caveat-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('/assets/fonts/caveat-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback fonts avec métriques alignées sur les fonts web.
   Tant que les fonts ne sont pas chargées (cache vide, connexion lente),
   ces fallbacks occupent EXACTEMENT le même espace pour éviter tout shift. */

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 107.4%;
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 28%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'JetBrains Mono Fallback';
    src: local('Menlo'), local('Consolas'), local('Courier New');
    size-adjust: 100%;
    ascent-override: 87%;
    descent-override: 23%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Caveat Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 90%;
    ascent-override: 100%;
    descent-override: 30%;
    line-gap-override: 0%;
}

:root {
    /* Z-index layers */
    --z-content-low: 10;
    --z-content: 20;
    --z-content-high: 30;
    --z-nav-low: 100;
    --z-nav: 200;
    --z-nav-sticky: 300;
    --z-overlay: 400;
    --z-spotlight: 1000;
    --z-critical: 2000;

    /* Spacing scale (rem) */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-13: 3.25rem;
    --spacing-14: 3.5rem;
    --spacing-15: 3.75rem;
    --spacing-16: 4rem;
    --spacing-17: 4.25rem;
    --spacing-18: 4.5rem;
    --spacing-19: 4.75rem;
    --spacing-20: 5rem;
}

:root {
    /* Light mode — Atelier palette */
    --background: hsl(213 20% 97%);          /* Drafting Paper */
    --foreground: hsl(216 30% 15%);          /* Slate Ink */
    --surface: hsl(213 20% 91%);             /* Vellum Mist */
    --surface-foreground: hsl(216 30% 15%);
    --sidebar: hsl(216 30% 12%);
    --sidebar-foreground: hsl(210 20% 96%);
    --card: hsl(0 0% 100%);                  /* Studio White */
    --card-foreground: hsl(216 30% 15%);
    --popup: hsl(0 0% 100%);
    --popup-foreground: hsl(216 30% 15%);

    --primary: hsl(216 90% 38%);             /* Blueprint Indigo */
    --primary-foreground: hsl(0 0% 100%);

    --secondary: hsl(210 20% 90%);
    --secondary-foreground: hsl(216 30% 15%);

    --accent: hsl(216 50% 94%);              /* Schematic Wash */
    --accent-foreground: hsl(216 90% 35%);

    --muted: hsl(210 15% 92%);
    --muted-foreground: hsl(215 15% 45%);    /* Pencil Grey */

    --success: hsl(150 60% 35%);
    --success-foreground: hsl(0 0% 100%);
    --error: hsl(0 70% 50%);
    --error-foreground: hsl(0 0% 100%);
    --warning: hsl(35 80% 50%);
    --warning-foreground: hsl(0 0% 100%);

    --border: hsl(210 15% 88%);              /* Ledger Line */

    /* Fonts — chaque famille inclut sa Fallback avec métriques alignées.
       Avec font-display: optional, si la vraie font arrive en <100ms elle s'affiche
       sans aucun swap. Sinon le Fallback metric-aligned reste pour la session. */
    --font-family-base: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-heading: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
    --font-family-monospace: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
    --font-family-cursive: 'Caveat', 'Caveat Fallback', cursive;

    /* Border radius — engineered scale */
    --radius-sm: 2px;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Shadows — invisible by design (alpha 0.05) */
    --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-focus: 0 0 0 2px hsl(216 90% 38% / 0.2);

    /* Animation durations */
    --animation-duration-fast: 150ms;
    --animation-duration-normal: 250ms;
    --animation-duration-slow: 400ms;
}

@media (prefers-color-scheme: dark) {
    :root.theme-auto {
        --background: hsl(220 30% 8%);
        --foreground: hsl(210 20% 96%);
        --surface: hsl(220 25% 12%);
        --card: hsl(220 25% 12%);
        --popup: hsl(220 25% 14%);
        --primary: hsl(216 80% 60%);
        --primary-foreground: hsl(220 30% 8%);
        --accent: hsl(216 40% 20%);
        --accent-foreground: hsl(216 80% 70%);
        --muted: hsl(215 20% 18%);
        --muted-foreground: hsl(215 15% 65%);
        --border: hsl(215 20% 20%);
        --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    }
}

/* Resets */

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

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

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul, ol {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* Alpine x-cloak — masque les éléments encore non hydratés */

[x-cloak] {
    display: none !important;
}

/* Boutons partagés (btn) */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-4);
    height: 2.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--animation-duration-fast) ease, color var(--animation-duration-fast) ease, border-color var(--animation-duration-fast) ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}

.btn-sm {
    height: 2rem;
    padding: 0 var(--spacing-3);
    font-size: 0.875rem;
}

.btn-lg {
    height: 3rem;
    padding: 0 var(--spacing-6);
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary), black 10%);
}

.btn-primary:active {
    background-color: color-mix(in srgb, var(--primary), black 15%);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background-color: color-mix(in srgb, var(--primary), white 90%);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--secondary), white 15%);
}

.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
}

.btn-ghost:hover {
    background-color: var(--muted);
}

/* Form primitives */

.form-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-5);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: 0.04em;
}

.form-required {
    color: var(--error);
    margin-left: 2px;
}

.form-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--spacing-3);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    color: var(--foreground);
    transition: border-color var(--animation-duration-fast) ease, box-shadow var(--animation-duration-fast) ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.form-input::placeholder {
    color: color-mix(in srgb, var(--muted-foreground), transparent 30%);
}

.form-input:hover {
    border-color: color-mix(in srgb, var(--primary), transparent 20%);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 85%);
}

.form-input.has-error {
    border-color: var(--error);
}

.form-input.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error), transparent 85%);
}

.form-textarea {
    height: auto;
    min-height: 8rem;
    padding: var(--spacing-3);
    resize: vertical;
    line-height: 1.5;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23637084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

.form-message {
    font-size: 0.8125rem;
    color: var(--error);
    line-height: 1.4;
}