/* =========================================================
   THOMATHS — BASE
   =========================================================
   Réinitialisation minimale + règles vraiment globales.

   Ce fichier est chargé JUSTE APRÈS tokens.css et AVANT tout
   le reste (cf. base.html) : il ne doit donc contenir que ce
   qui vaut pour toute page, jamais du style de composant —
   n'importe quelle règle posée ici est écrasée par les 12
   feuilles qui suivent, ce qui rend le résultat imprévisible.
   Un composant va dans son propre fichier (doc.css, form.css,
   context_bar.css…).

   Comme partout : aucune couleur en dur, uniquement des
   var(--token) de tokens.css.
   ========================================================= */

/* Le scroll vit dans #app-body (cf. nav.css), pas au niveau du document :
   html/body ne défilent jamais, donc pas de scrollbar-gutter à réserver ici
   (la navbar et tout ce qui est position:fixed gagnent la pleine largeur).
   overflow-x: hidden en filet de sécurité — un élément qui déborderait
   légèrement de la largeur (ex. item flottant en drag-and-drop) ne doit
   jamais faire apparaître une scrollbar horizontale sur le document. */
html, body {
    overflow-x: hidden;
}

/* Fond, couleur de texte, police et line-height du body sont posés par
   theme.css (dégradé + grain), pas ici : ne PAS les redéclarer, la version
   de theme.css gagne de toute façon (chargée plus tard) et deux
   définitions concurrentes du même body sont un piège à débogage.
   Seul le reset de marge reste ici — theme.css ne le pose pas, et sans lui
   la marge par défaut de 8px du navigateur revient. */
body {
    margin: 0;
    padding: 0;
}

/* Pas de `h1 { text-align: center }` ici : l'alignement d'un titre est une
   décision de mise en page, qui appartient au composant qui le porte
   (.doc-header h1, .dp-title, .accueil-title…). La règle globale obligeait
   chaque page à écrire un override `text-align: left` pour retrouver le
   comportement normal. */

/* La navbar (header, logo, liens, menu mobile) vit dans nav.css. */

/* ===== MAIN =====
   Largeur de repli, pour les seules pages qui n'ont pas encore de socle DA
   (admin_panel, ai_prompts, cours_conflicts, imports, orphans,
   exercises/detail). Toutes les pages "document" l'écrasent déjà via un
   sélecteur plus spécifique : main:has(.doc-page-scroll) (doc.css),
   main:has(> .ctx-bar) (context_bar.css), main:has(> .accueil)
   (accueil.css). À supprimer quand les pages ci-dessus seront passées sur
   _context_bar_page.html. */
main {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
}

/* ===== MESSAGES DJANGO =====
   django.contrib.messages, affichés en haut de <main> par base.html —
   donc susceptibles d'apparaître sur n'importe quelle page. */
.app-messages {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.app-message {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Teinte de fond très basse (~12%) mélangée à --surface plutôt qu'un aplat
   saturé : le message doit se lire comme une carte de l'interface qui a
   pris une couleur, pas comme un bandeau d'alerte étranger au thème. */
.app-message-success {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.app-message-warning {
    background: color-mix(in srgb, var(--hint) 12%, var(--surface));
    color: var(--hint);
    border-color: color-mix(in srgb, var(--hint) 40%, transparent);
}

.app-message-error {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}