/* La coquille MINIMALE : variables et mise en page. Chargée par
   templates/shell/layout.html.twig, donc par cinq gabarits — connexion, bandeau de
   session, pages d'erreur, explorateur de routes, page de session. Toute règle ajoutée
   ici les touche TOUS LES CINQ : c'est la raison pour laquelle une page qui a un
   visuel propre a sa propre feuille (auth.css, explorer.css, error.css).

   ── LES RÈGLES `.error-*` ONT QUITTÉ CE FICHIER LE 11/08/2026 ───────────────

   Elles peignaient la page d'erreur avec la palette SOMBRE d'ici, d'avant l'identité
   claire de l'application : « l'erreur 500 qui est encore noir » (le responsable produit, 11/08/2026).
   Elles vivent maintenant dans public/assets/css/error.css, avec les jetons `--app-*`.
   Le déplacement est SANS EFFET sur les quatre autres gabarits, et c'est mesuré et non
   supposé : le balayage des gabarits et des feuilles du dépôt ne trouve qu'UN SEUL
   porteur de `.error`, `.error-status`, `.error-summary`, `.error-hint`, `.error-back`
   et `.error-trace` — templates/error/error.html.twig. Le projet ne garde pas de
   sélecteur sans porteur.

   ── CE QUI RESTE ICI EST ENCORE SOMBRE, ET C'EST UN CHOIX EN ATTENTE ────────

   La palette ci-dessous habille toujours l'explorateur de routes et la page de session
   — deux outils de développement. Les repeindre est une décision du responsable produit, pas un effet
   de bord à provoquer en passant.

   ── LE LOT « PALETTE FROIDE » DU 12/08/2026 N'A RIEN CHANGÉ ICI, ET C'EST MESURÉ ──

   Ce lot a refroidi les neutres de tout le site (app.css et les feuilles qui en
   consomment les jetons, auth.css comprise). CE FICHIER EN EST RESTÉ DEHORS
   DÉLIBÉRÉMENT, pour la raison écrite juste au-dessus : ses dix couleurs ne sont pas
   des littérales oubliées, ce sont les DÉFINITIONS de la palette sombre des deux
   outils de dev. Les convertir aux jetons `--app-*` reviendrait à repeindre ces deux
   écrans en clair — exactement la décision qui appartient au responsable produit.

   LA CONTRE-ÉPREUVE QUI COMPTE, PARCE QU'ELLE EST LA SEULE QUI POUVAIT INVALIDER CE
   CHOIX : est-ce que cette palette sombre déborde sur la page de CONNEXION, qui charge
   pourtant bien ce fichier ? NON — repris règle par règle, chacune est recouverte par
   auth.css ou sans porteur sur cet écran :
     body.page (fond + encre)   recouvert par body.page.page-login  (0,2,1 > 0,1,1)
     a { color: var(--accent) } recouvert par .signin-microsoft     (0,1,0 > 0,0,1)
                                — le bouton Microsoft EST le seul <a> de la page
     h1                         recouvert par .signin-heading h1
     .shell-head                display: none sur la page de connexion
     .shell-main                recouvert par .page-login .shell-main
     code, pre                  aucun porteur sur la page de connexion
   Le fond clair et l'encre froide de la connexion ne doivent donc RIEN à ce fichier,
   et le laisser sombre ne coûte rien à l'écran public. REFAIRE CE RELEVÉ avant
   d'ajouter ici la moindre règle sur un élément nu : ce serait le seul moyen de
   ramener du sombre sur la page de connexion sans s'en apercevoir. */

:root {
    --bg: #10141a;
    --panel: #191f28;
    --panel-alt: #212936;
    --line: #303a4a;
    --text: #e7ecf3;
    --muted: #97a3b6;
    --accent: #6ea8fe;
    --global: #b795f6;
    --own: #6ee7a8;
    --warn: #f8b76b;
    --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

* {
    box-sizing: border-box;
}

body.page {
    margin: 0;
    padding: 0 0 3rem;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 system-ui, "Segoe UI", sans-serif;
}

code, pre {
    font-family: var(--mono);
}

a {
    color: var(--accent);
}

h1 {
    margin: 0 0 0.4rem;
    font-size: 1.45rem;
}

.shell-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.shell-brand {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.shell-tabs ul {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell-tabs-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.shell-main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem;
}