/* ============================================================================
   base.css — socle du design system Michel Vision
   ----------------------------------------------------------------------------
   Ordre de chargement : fonts.css → [bootstrap admin] → base.css → app.css
   Contient : tokens, reset, typographie, focus, primitives, shims de layout.
   Ne contient AUCUN composant de page — ceux-ci vivent dans app.css.

   Principe directeur : le relief vient d'un changement de fond + un filet 1 px.
   Jamais d'une ombre. Une seule couleur d'accent.
   ========================================================================== */

/* ── Shim critique ───────────────────────────────────────────────────────────
   d-none est manipulée par analyze.js (21 lignes) et contribute.js. Sans elle,
   /analyze affiche simultanément la zone d'upload, le loader, le résultat et
   l'erreur — et aucun test ne le voit. Déclarée en tout premier. */
.d-none { display: none !important; }


/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    /* Fonds — jamais #000000 */
    --mv-bg:          #0B0E13;
    --mv-bg-raised:   #11151C;   /* panneaux — opaque, plus de rgba + blur */
    --mv-bg-sunken:   #070A0E;   /* bandes de rythme, thead, puits */
    --mv-bg-overlay:  #141922;   /* calques flottants (menu, toast) */

    /* Filets et bordures */
    --mv-line:        #1E242E;   /* séparateur décoratif */
    --mv-border:      #2B333F;   /* bord de panneau */
    --mv-line-field:  #5A6473;   /* bord de champ — 3,23:1, WCAG 1.4.11 */

    /* Texte (contrastes calculés sur --mv-bg) */
    --mv-text:        #E6EAF0;   /* 16,0:1  */
    --mv-text-muted:  #9AA4B2;   /*  7,66:1 */
    --mv-text-faint:  #7C8697;   /*  5,26:1 — jamais sous 13 px */

    /* Accent unique — ambre signal (ex --mv-signal, promue) */
    --mv-accent:      #F59E0B;   /*  9,0:1  */
    --mv-accent-ink:  #0B0E13;   /* texte sur ambre plein */
    --mv-accent-wash: rgba(245, 158, 11, 0.10);
    --mv-accent-line: rgba(245, 158, 11, 0.45);  /* bordure au survol */

    /* Sémantique — verdicts uniquement (analyze.js:206-210 les lit) */
    --mv-success:     #4ADE80;   /* 11,1:1 */
    --mv-warning:     #FB923C;   /*  8,5:1 */
    --mv-danger:      #F87171;   /*  7,0:1 */

    /* Alias conservés : consommés hors de ce fichier, ne pas renommer.
       --mv-signal  : templates + analyze.js
       --mv-bg-card : CSS admin
       --mv-surface : review_hard.html:7-19 (avec fallback) */
    --mv-signal:      var(--mv-accent);
    --mv-bg-card:     var(--mv-bg-raised);
    --mv-surface:     var(--mv-bg-overlay);

    /* Typographie */
    --mv-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mv-font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-display: clamp(2.5rem, 5.5vw, 4rem);
    --t-h1:      clamp(1.75rem, 3.2vw, 2.375rem);
    --t-h2:      1.5rem;
    --t-h3:      1.125rem;
    --t-body:    1rem;
    --t-sm:      0.875rem;
    --t-meta:    0.8125rem;
    --t-mono:    0.75rem;   /* plancher absolu — rien en dessous */
    --t-num:     0.875rem;

    /* Espacement — échelle 4 px */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;   --s9: 6rem;

    /* Rythme vertical — trois valeurs, plus une seule */
    --sec-tight: 3rem;
    --sec:       4.5rem;
    --sec-loose: 7rem;

    /* Rayons — deux, pas plus */
    --r1: 2px;   /* tags, barres, badges */
    --r2: 4px;   /* panneaux, boutons, champs, images */

    /* Ombre — un seul token, réservé aux calques flottants qui doivent
       réellement occlure ce qu'il y a dessous (.mv-dd-menu, .mv-toast). */
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.55);

    /* Mouvement — courbes d'emil-design-eng */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-1: 120ms;   /* survol, onglet, lien */
    --dur-2: 180ms;   /* bascule, toast */
    --dur-3: 240ms;   /* menu, burger, accordéon */
    --dur-4: 320ms;   /* plafond absolu */

    --mv-maxw: 1140px;
}


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

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

body {
    margin: 0;
    background: var(--mv-bg);
    color: var(--mv-text);
    font-family: var(--mv-font-body);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

hr { border: 0; border-top: 1px solid var(--mv-line); margin: var(--s5) 0; }

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


/* ── Typographie ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mv-font-body);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.028em;
    margin: 0 0 var(--s3);
    text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.012em; }
h4, h5, h6 { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--t-meta); }

strong, b { font-weight: 700; }

/* Chiffres tabulaires partout où une colonne s'aligne. */
.num, .mv-num, td, th { font-variant-numeric: tabular-nums; }

/* Kicker — implémentation UNIQUE. Remplace les ~35 redéclarations du motif
   mono / uppercase / letterspacing qui parsemaient l'ancien style.css. */
.mv-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--mv-font-mono);
    font-size: var(--t-mono);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mv-text-muted);
    margin: 0 0 var(--s3);
}
.mv-kicker--accent { color: var(--mv-accent); }

/* En-tête de section — primitive unique remplaçant les 4 blocs clonés
   (.conflict-head / .recall-head / .enc-head / .ba-head). Non centré par
   défaut : le centrage systématique est un marqueur de gabarit. */
.sec-head { max-width: 62ch; margin: 0 0 var(--s5); }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-title { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--s2); }
.sec-sub { color: var(--mv-text-muted); font-size: var(--t-sm); margin: 0; max-width: 58ch; }
.sec-head--center .sec-sub { margin-inline: auto; }


/* ── Focus ───────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--mv-accent);
    outline-offset: 2px;
    border-radius: var(--r1);
}


/* ── Primitives ──────────────────────────────────────────────────────────── */

/* Panneau : fond relevé + filet. Aucune ombre, aucun déplacement au survol. */
.mv-panel {
    background: var(--mv-bg-raised);
    border: 1px solid var(--mv-border);
    border-radius: var(--r2);
    padding: var(--s5);
}
@media (hover: hover) and (pointer: fine) {
    .mv-panel--link:hover { border-color: var(--mv-accent-line); }
}

/* Bande : rupture de rythme pleine largeur. Filets haut/bas, pas de radius. */
.mv-band {
    background: var(--mv-bg-sunken);
    border-top: 1px solid var(--mv-line);
    border-bottom: 1px solid var(--mv-line);
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

.mv-rule { border: 0; border-top: 1px solid var(--mv-line); margin: var(--s5) 0; }

.mv-tag {
    display: inline-block;
    padding: 2px var(--s2);
    border: 1px solid var(--mv-border);
    border-radius: var(--r1);
    font-family: var(--mv-font-mono);
    font-size: var(--t-mono);
    letter-spacing: 0.04em;
    color: var(--mv-text-muted);
    background: transparent;
}

/* Boutons ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid var(--mv-line-field);
    border-radius: var(--r2);
    background: transparent;
    color: var(--mv-text);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

.btn-solid, .btn-primary {
    background: var(--mv-accent);
    border-color: var(--mv-accent);
    color: var(--mv-accent-ink);
}
.btn-outline-primary { border-color: var(--mv-accent); color: var(--mv-accent); }
.btn-success { background: var(--mv-success); border-color: var(--mv-success); color: var(--mv-accent-ink); }
.btn-outline-secondary { border-color: var(--mv-border); color: var(--mv-text-muted); }
.btn-sm { padding: var(--s1) var(--s3); font-size: var(--t-meta); }

@media (hover: hover) and (pointer: fine) {
    .btn:hover { border-color: var(--mv-accent-line); }
    .btn-solid:hover, .btn-primary:hover { background: #FFB224; border-color: #FFB224; }
    .btn-outline-primary:hover { background: var(--mv-accent-wash); }
    .btn-success:hover { filter: brightness(1.08); }
    .btn-outline-secondary:hover { border-color: var(--mv-line-field); color: var(--mv-text); }
}

/* Lien-action discret : la seconde action d'une paire. Pas un second bouton. */
.btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--mv-text-muted);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--mv-border);
    padding-bottom: 2px;
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .btn-quiet:hover { color: var(--mv-text); border-color: var(--mv-accent); text-decoration: none; }
}

/* Bouton de fermeture (remplace .btn-close de Bootstrap) */
.mv-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--r1);
    background: transparent;
    color: var(--mv-text-muted);
    line-height: 1;
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .mv-close:hover { color: var(--mv-text); background: rgba(255, 255, 255, 0.06); }
}

/* Champs -------------------------------------------------------------------- */
.form-label, .field-label {
    display: block;
    margin-bottom: var(--s2);
    font-size: var(--t-meta);
    font-weight: 700;
    color: var(--mv-text-muted);
}

.form-control, .form-select, .field {
    display: block;
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--mv-bg-sunken);
    border: 1px solid var(--mv-line-field);
    border-radius: var(--r2);
    color: var(--mv-text);
    font-size: var(--t-sm);
    line-height: 1.5;
    transition: border-color var(--dur-1) var(--ease-out);
}
.form-control::placeholder { color: var(--mv-text-faint); }
.form-control:focus, .form-select:focus, .field:focus { border-color: var(--mv-accent); }

.form-select, select.field {
    appearance: none;
    padding-right: var(--s6);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239AA4B2' stroke-width='2' stroke-linecap='round'%3e%3cpath d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--s3) center;
    background-size: 14px;
}
.form-select-sm { padding: var(--s1) var(--s5) var(--s1) var(--s2); font-size: var(--t-meta); }

.form-text { font-size: var(--t-meta); color: var(--mv-text-muted); }

/* Alerte -------------------------------------------------------------------- */
.mv-alert, .alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--mv-bg-raised);
    border: 1px solid var(--mv-border);
    border-left: 2px solid var(--mv-text-muted);
    border-radius: var(--r2);
    font-size: var(--t-sm);
    color: var(--mv-text);
}
.mv-alert--info,   .alert-info   { border-left-color: var(--mv-accent); }
.mv-alert--danger, .alert-danger { border-left-color: var(--mv-danger); }

/* Barre de progression ------------------------------------------------------ */
.progress {
    height: 6px;
    background: var(--mv-line);
    border-radius: var(--r1);
    overflow: hidden;
}
.progress-bar { height: 100%; background: var(--mv-accent); border-radius: var(--r1); }

/* Pagination ---------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--s1); list-style: none; padding: 0; margin: 0; }
.page-link {
    display: inline-flex;
    align-items: center;
    padding: var(--s1) var(--s3);
    border: 1px solid var(--mv-border);
    border-radius: var(--r2);
    color: var(--mv-text-muted);
    font-size: var(--t-meta);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .page-link:hover { color: var(--mv-text); border-color: var(--mv-line-field); text-decoration: none; }
}
.page-item.active .page-link { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-accent-ink); }
.page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }

/* Badge (shim Bootstrap) ---------------------------------------------------- */
.badge { display: inline-block; padding: 2px var(--s2); border-radius: var(--r1); font-size: var(--t-mono); font-weight: 700; }
.bg-secondary { background: var(--mv-line); color: var(--mv-text-muted); }


/* ── Shims de layout (remplacent les utilitaires Bootstrap) ──────────────── */
.container {
    width: 100%;
    max-width: var(--mv-maxw);
    margin-inline: auto;
    padding-inline: var(--s4);
}

.d-flex        { display: flex; }
.d-inline      { display: inline; }
.d-block       { display: block; }
.flex-column   { flex-direction: column; }
.flex-grow-1   { flex-grow: 1; }
.flex-wrap     { flex-wrap: wrap; }
.align-items-center      { align-items: center; }
.align-items-start       { align-items: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }

.m-0  { margin: 0; }
.mb-0 { margin-bottom: 0; }        .mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); } .mb-3 { margin-bottom: var(--s4); }
.mb-4 { margin-bottom: var(--s5); } .mb-5 { margin-bottom: var(--s7); }
.mt-2 { margin-top: var(--s2); }    .mt-3 { margin-top: var(--s4); }
.mt-4 { margin-top: var(--s5); }    .mt-auto { margin-top: auto; }
.me-1 { margin-right: var(--s1); }  .me-2 { margin-right: var(--s2); }
.me-auto { margin-right: auto; }    .ms-auto { margin-left: auto; }
.mx-1 { margin-inline: var(--s1); }
.p-2  { padding: var(--s2); }       .p-3  { padding: var(--s4); }
.pt-2 { padding-top: var(--s2); }
.px-3 { padding-inline: var(--s4); } .px-4 { padding-inline: var(--s5); }
.py-4 { padding-block: var(--s5); }
.w-100 { width: 100%; }

.text-center { text-align: center; }
.text-muted  { color: var(--mv-text-muted); }
.text-danger { color: var(--mv-danger); }
.fw-bold     { font-weight: 700; }
.fst-italic  { font-style: italic; }

.position-fixed { position: fixed; }
.top-0 { top: 0; }
.end-0 { right: 0; }

@media (min-width: 992px) {
    .d-lg-inline { display: inline; }
}
@media (max-width: 991.98px) {
    .d-lg-inline { display: none; }
}


/* ── Mouvement réduit ────────────────────────────────────────────────────────
   Le visiteur qui a coché cette préférence système ne doit voir AUCUN
   mouvement — y compris les transformations d'entrée. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .is-in, .is-open, [class*="reveal"] { transform: none !important; opacity: 1 !important; }
}