/* brut-theme.css — passe tout le site public au style « brut » (2026-10-09).

   Chargé par layout.html APRÈS base.css, app.css et la feuille propre à la
   page : il gagne par l'ordre, sans toucher au balisage. Les pages
   d'administration ne le chargent pas (admin_base.html surcharge le bloc
   `theme_css`) : outils internes sur Bootstrap, avec leur propre thème bleu.

   Deux étages :
   1. Les jetons de base.css sont redéfinis — tout le CSS du site passe par eux
      (aucune couleur codée en dur dans app.css), donc la bascule de palette,
      de police, d'arrondis et d'ombre est globale.
   2. Les composants communs dont la FORME change (menu, boutons, champs,
      titres, pied de page) sont rhabillés ici.

   Référence visuelle : la page d'accueil (templates/demo_visuel.html,
   demo-brut.css) — noir pur, blanc, un seul jaune signal, bordures visibles,
   aucun arrondi, titres Manrope 800 en capitales, texte en Space Mono. */

:root {
    --mv-bg:          #000000;
    --mv-bg-raised:   #0B0B0B;
    --mv-bg-sunken:   #000000;
    --mv-bg-overlay:  #000000;

    --mv-line:        #333333;   /* séparateur décoratif */
    --mv-border:      #FFFFFF;   /* bord de panneau : filet blanc franc */
    --mv-line-field:  #FFFFFF;   /* bord de champ */

    --mv-text:        #FFFFFF;
    --mv-text-muted:  #A6A6A6;   /* 8,6:1 sur noir */
    --mv-text-faint:  #8C8C8C;   /* 6,1:1 sur noir */

    --mv-accent:       #FFE500;  /* jaune signal, 19:1 sur noir */
    --mv-accent-hover: #FFFFFF;
    --mv-accent-ink:   #000000;
    --mv-accent-wash:  rgba(255, 229, 0, 0.14);
    --mv-accent-line:  rgba(255, 229, 0, 0.6);

    --mv-hover:        rgba(255, 255, 255, 0.08);
    --mv-hover-strong: rgba(255, 255, 255, 0.14);
    --mv-grid-line:    rgba(255, 255, 255, 0.10);

    --mv-success:     #4ADE80;
    --mv-warning:     #FF9F0A;
    --mv-danger:      #FF453A;

    --mv-font-body: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bx-grot: "Manrope", "Arial Black", system-ui, sans-serif;

    /* Titres plus massifs : le style brut tient sur la typographie. */
    --t-h1: clamp(2.25rem, 6vw, 4.5rem);
    --t-h2: clamp(1.6rem, 3.6vw, 2.5rem);

    --r1: 0;
    --r2: 0;
    --r-pill: 0;

    /* Les calques flottants se détachent par un décalage dur, pas un flou. */
    --shadow-overlay: 6px 6px 0 var(--mv-accent);

    /* Survols et bascules instantanés ; menus et accordéons gardent leur durée. */
    --dur-1: 0ms;
    --dur-2: 0ms;
}

/* Aucun arrondi nulle part, y compris les rayons codés en dur ou en style en
   ligne (register.html) — sauf le spinner, qui doit rester un anneau. */
*, *::before, *::after { border-radius: 0 !important; }
.spinner-border { border-radius: 50% !important; }

::selection { background: var(--mv-accent); color: var(--mv-accent-ink); }

/* ── Titres ─────────────────────────────────────────────────────────────── */
h1, h2,
.sec-title, .hf-title, .hero-title, .closing-title, .error-title,
.az-header-title, .veh-section-title, .dossier-title, .tagline-heading {
    font-family: var(--bx-grot);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
h3, h4, h5, h6 { letter-spacing: 0.01em; text-transform: uppercase; }

/* Mot mis en avant dans un titre : surligné en bloc jaune, plus en couleur.
   inline-block : le fond couvre la boîte de ligne et non la hauteur pleine des
   glyphes, qui mordait sur les lignes voisines avec un interlignage serré. */
.hf-title-accent {
    display: inline-block;
    padding: 0 0.06em;
    color: var(--mv-accent-ink);
    background: var(--mv-accent);
    -webkit-text-stroke: 0;
}

/* Vignette « collage » de /presentation : prévue pour la jonction des lignes
   dans l'ancienne police, elle masquait le « à » une fois le titre en capitales
   larges (qui remplissent toute la largeur). Posée AU-DESSUS du titre, à droite
   (le surtitre est à gauche), plus petite, et carrée. */
.hf-title-cutout {
    top: auto;
    bottom: calc(100% + 0.6rem);
    right: 0;
    width: clamp(4rem, 8vw, 6.5rem);
    transform: rotate(-4deg);
    border: 2px solid var(--mv-text);
    outline: 0;
    box-shadow: 6px 6px 0 var(--mv-accent);
}
@media (prefers-reduced-motion: reduce) {
    .hf-title-cutout { transform: none; }
}

.mv-kicker { font-weight: 700; color: var(--mv-accent); }

/* ── Menu ───────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--mv-bg) !important;
    border-bottom: 2px solid var(--mv-text);
}
.navbar-brand {
    font-family: var(--mv-font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.brand-dot { background: var(--mv-accent); }

.navbar-nav .nav-link {
    color: var(--mv-text) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nav-link.active {
    color: var(--mv-accent-ink) !important;
    background: var(--mv-accent);
}
@media (hover: hover) and (pointer: fine) {
    .navbar-nav .nav-link:not(.active):hover { color: var(--mv-bg) !important; background: var(--mv-text); }
}

.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    color: var(--mv-text);
    border: 2px solid var(--mv-text);
}

@media (max-width: 899.98px) {
    .nav-panel {
        border: 2px solid var(--mv-text);
        box-shadow: var(--shadow-overlay);
    }
}

.nav-avatar { color: var(--mv-accent-ink); background: var(--mv-accent); }
.mv-dd-trigger { color: var(--mv-text); }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
    border-width: 2px;
    border-color: var(--mv-text);
    font-family: var(--mv-font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.btn-solid, .btn-primary {
    color: var(--mv-accent-ink);
    background: var(--mv-accent);
    border-color: var(--mv-accent);
}
.btn:active { transform: translate(2px, 2px); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover,
    .btn-solid:hover,
    .btn-primary:hover {
        transform: none;
        color: var(--mv-bg);
        background: var(--mv-text);
        border-color: var(--mv-text);
        box-shadow: none;
    }
}

.btn-quiet {
    color: var(--mv-text);
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid var(--mv-accent);
}

/* ── Champs ─────────────────────────────────────────────────────────────── */
.form-control, .form-select, .field {
    color: var(--mv-text);
    background-color: var(--mv-bg);
    border-width: 2px;
}
.form-control:focus, .form-select:focus, .field:focus {
    border-color: var(--mv-accent);
    box-shadow: 4px 4px 0 var(--mv-accent);
}
.form-label, .field-label {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Pied de page ───────────────────────────────────────────────────────── */
.footer {
    background: var(--mv-bg);
    border-top: 2px solid var(--mv-text);
}
.footer-brand { letter-spacing: 0.04em; text-transform: uppercase; }
.footer-legal a { color: var(--mv-text); text-decoration-color: var(--mv-accent); }

/* ── Chiffres en gros ───────────────────────────────────────────────────── */
/* La Space Mono, plus large que Manrope, faisait déborder les pourcentages des
   jauges circulaires de /analyze (122 px de texte pour 110 px de cercle) :
   en gros, les chiffres passent en Manrope compacte, comme sur l'accueil. */
.radial-gauge-pct {
    font-family: var(--bx-grot);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

/* ── Écran lunettes (/sandbox/glasses) ──────────────────────────────────── */
/* Le vert HUD lumineux passe au jaune du site, sans halo : même code couleur
   que l'accueil (jaune = piste solide, orange = à confirmer, rouge = abstention). */
.gl-hud-viewport { background: var(--mv-bg); }
.gl-hud-corner,
.gl-hud-label { border-color: var(--mv-accent); color: var(--mv-accent); filter: none; text-shadow: none; }
.gl-hud-corner { border-width: 3px; }
.gl-hud-box--medium .gl-hud-corner, .gl-hud-box--medium .gl-hud-label,
.gl-hud-box--low .gl-hud-corner, .gl-hud-box--low .gl-hud-label { border-color: var(--mv-warning); color: var(--mv-warning); filter: none; }
.gl-hud-box--abstained .gl-hud-corner, .gl-hud-box--abstained .gl-hud-label { border-color: var(--mv-danger); color: var(--mv-danger); filter: none; }

/* ── Décors de l'ancien thème ───────────────────────────────────────────── */
/* Masses de couleur floues de /presentation : contraires au style brut. */
.hf-aurora { display: none; }