/* ============================================================================
   Système visuel — Dashboard ma-db-exos
   Inspiration : papier/encre, couleurs de chapitres calculées en OKLCH.
   ============================================================================ */

:root {
    /* === Couleurs de fond et de texte === */
    --bg: #f5f2ec;              /* fond général : papier vieilli */
    --paper: #fbfaf6;           /* fond cartes et éléments : papier propre */
    --surface: #ffffff;         /* fond éléments d'avant-plan : blanc pur */
    --ink: #1a1815;             /* texte principal : encre */
    --ink-2: #4a463d;           /* texte secondaire : encre claire */
    --muted: #88827a;           /* texte tertiaire : gris papier */
    --line: #e8e3d7;            /* bordures fines */
    --line-strong: #d3ccbd;     /* bordures appuyées */

    /* === Couleurs sémantiques === */
    --accent: oklch(48% 0.13 240);          /* bleu encre, action principale */
    --accent-soft: oklch(94% 0.03 240);     /* bleu pâle, fond actif */
    --warn: oklch(60% 0.13 65);             /* orange/ambre, attention */
    --warn-soft: oklch(95% 0.05 75);        /* ambre pâle, fond alerte */
    --ok: oklch(55% 0.11 150);              /* vert sourd, succès */
    --ok-soft: oklch(95% 0.04 150);         /* vert pâle, fond succès */
    --danger: oklch(55% 0.16 25);           /* rouge sourd, erreur */
    --danger-soft: oklch(95% 0.03 25);

    /* === 12 couleurs de chapitres calculées (rotation de hue) ===
       Choix manuel des hues pour maximiser les contrastes entre chapitres
       non liés thématiquement, tout en gardant des "familles" proches pour
       les chapitres liés. */
    --ch-1: oklch(72% 0.10 25);     /* Second degré         — rouge-orange */
    --ch-2: oklch(72% 0.10 50);     /* Compléments 2nd degré — orange (proche du 1) */
    --ch-3: oklch(72% 0.10 95);     /* Probas conditionnelles — jaune-vert */
    --ch-4: oklch(72% 0.10 145);    /* Nombre dérivé         — vert */
    --ch-5: oklch(72% 0.10 170);    /* Fonctions dérivées    — vert-turquoise (proche du 4) */
    --ch-6: oklch(72% 0.10 210);    /* Suites numériques     — cyan-bleu */
    --ch-7: oklch(72% 0.10 235);    /* Suites de références  — bleu (proche du 6) */
    --ch-8: oklch(72% 0.10 280);    /* Variables aléatoires  — violet */
    --ch-9: oklch(72% 0.10 320);    /* Exponentielle         — magenta */
    --ch-10: oklch(70% 0.13 350);   /* Trigonométrie         — rose vif */
    --ch-11: oklch(55% 0.07 50);    /* Produit scalaire      — brun (très différent du rose) */
    --ch-12: oklch(45% 0.04 240);   /* Droites et cercles    — bleu marine sombre */

    /* === Typographie === */
    --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    /* === Espacements (système 4px) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* === Rayons de bordures === */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* === Ombres === */
    --shadow-soft: 0 2px 4px rgba(20, 18, 14, 0.04);
    --shadow-mid: 0 8px 24px -12px rgba(20, 18, 14, 0.12);
    --shadow-strong: 0 24px 60px -32px rgba(20, 18, 14, 0.18), 0 2px 4px rgba(20, 18, 14, 0.04);
}

/* ============================================================================
   Polices locales — chargées depuis app/static/fonts/
   ============================================================================ */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces-VariableFont.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/InterTight-VariableFont.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-VariableFont.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
   Reset et base
   ============================================================================ */

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

html {
    /* Permet de placer le footer en bas même quand la page est courte */
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Largeur étendue par défaut sur toutes les pages : pas de limite Pico */
    max-width: none !important;
}

/* Le main de Pico avait un max-width borné : on l'ouvre */
main.container {
    max-width: none !important;
    width: auto !important;
    padding-left: var(--space-6) !important;
    padding-right: var(--space-6) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sur écrans très larges (>= 2200px), on limite quand même pour la lisibilité */
@media (min-width: 2200px) {
    main.container {
        max-width: 2100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================================
   Typographie
   ============================================================================ */

h1, h2, h3, h4, h5 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-top: 0;
}

h1 { font-size: 2.5rem; margin-bottom: var(--space-6); }
h2 { font-size: 1.75rem; margin-bottom: var(--space-4); }
h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
h4 { font-size: 1.05rem; margin-bottom: var(--space-2); }
h5 { font-size: 0.95rem; margin-bottom: var(--space-2); }

p, ul, ol {
    color: var(--ink-2);
}

code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--paper);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

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

a:hover {
    text-decoration: underline;
}

/* === Eyebrow / mention typographique en mono === */
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

/* ============================================================================
   Topbar (entête principale)
   ============================================================================ */

body > header.container {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 var(--space-6) !important;
    margin: 0 !important;
    max-width: none !important;
}

body > header.container > nav {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    align-items: center;
    height: 56px;
    gap: var(--space-4);
}

body > header.container > nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Marque (premier ul) */
body > header.container > nav > ul:first-child {
    justify-self: start;
}

body > header.container > nav > ul:first-child strong {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* Le lien marque ne doit pas avoir l'apparence d'un lien classique
   mais doit montrer visuellement qu'il est cliquable */
.lien-marque {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lien-marque::before {
    content: "⌂";
    color: var(--muted);
    font-size: 14px;
    margin-right: 2px;
    transition: color 0.15s ease;
}

.lien-marque:hover {
    background: var(--paper);
    text-decoration: none;
}

.lien-marque:hover::before {
    color: var(--accent);
}

/* Navigation (deuxième ul) */
body > header.container > nav > ul:last-child {
    justify-self: center;
    gap: var(--space-1);
}

body > header.container > nav > ul:last-child a {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    color: var(--ink-2);
    text-decoration: none;
    transition: background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body > header.container > nav > ul:last-child a:hover {
    background: var(--paper);
    text-decoration: none;
}

/* Badge du panier dans la nav */
.panier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
}

/* Liens désactivés */
nav .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================================================
   Footer
   ============================================================================ */

body > footer.container {
    margin-top: var(--space-12) !important;
    padding: var(--space-6) var(--space-6) !important;
    border-top: 1px solid var(--line);
    text-align: center;
    background: transparent;
    max-width: none !important;
}

body > footer.container small {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.05em;
}

/* ============================================================================
   Boutons (refonte des boutons Pico)
   ============================================================================ */

button,
input[type="submit"],
input[type="button"] {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}

button:hover {
    background: var(--paper);
    border-color: var(--line-strong);
}

/* Bouton principal (contrast en Pico) */
button.contrast,
input[type="submit"].contrast {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

button.contrast:hover {
    background: #2a2520;
    border-color: #2a2520;
}

/* Bouton accent (action principale colorée) */
button.accent {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

button.accent:hover {
    background: oklch(42% 0.13 240);
    border-color: oklch(42% 0.13 240);
}

/* Bouton secondaire */
button.secondary {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--line);
}

button.secondary:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-strong);
}

/* ============================================================================
   Formulaires (refonte des inputs Pico)
   ============================================================================ */

input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
textarea,
select {
    font-family: var(--sans);
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
    line-height: 1.4;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

label {
    color: var(--ink-2);
    font-size: 13.5px;
}

/* ============================================================================
   Articles et cartes basiques (refonte Pico)
   ============================================================================ */

article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-soft);
}

article h3:first-child,
article h4:first-child {
    margin-top: 0;
}

/* ============================================================================
   Compatibilité : variables Pico CSS remappées vers la nouvelle palette
   ----
   L'ancien CSS (custom.css) utilise abondamment des variables Pico comme
   --pico-card-background-color, --pico-muted-border-color, etc.
   Plutôt que de réécrire tout custom.css d'un coup, on remappe ces variables
   sur notre nouvelle palette. Tout l'ancien code adopte automatiquement la
   bonne couleur sans modification.
   Ces remappages disparaîtront progressivement aux étapes A2 et A3 où on
   refera les composants un par un.
   ============================================================================ */

:root {
    --pico-card-background-color: var(--paper);
    --pico-muted-border-color: var(--line);
    --pico-muted-color: var(--muted);
    --pico-color: var(--ink);
    --pico-color-red-500: var(--danger);
    --pico-color-red-100: var(--danger-soft);
    --pico-primary: var(--accent);
    --pico-primary-hover: oklch(42% 0.13 240);
}