/* ==========================================================================
   VERDICT — système visuel d'AI TestList (refonte 2026)
   Couleurs reprises telles quelles des maquettes. Ce fichier se charge APRÈS
   Bootstrap : il redéfinit les variables de Bootstrap pour que les pages pas
   encore refaites prennent quand même le nouveau style.
   La couleur d'accent change selon la partie du site (attribut data-partie
   sur <body>) : citron (public, application), lilas (affiliés), crème (admin).
   ========================================================================== */

:root {
    --v-encre: #0E0E0C;        /* fond */
    --v-encre-2: #161614;      /* bandes et panneaux sombres */
    --v-trait: #34332E;        /* filets, bordures */
    --v-creme: #EDE9DF;        /* texte, panneaux clairs */
    --v-creme-2: #D4CFC4;      /* texte courant secondaire */
    --v-gris: #A39E93;         /* étiquettes */
    --v-gris-fonce: #6E6A62;   /* annulé */
    --v-attente: #3A3934;      /* en attente */
    --v-citron: #D7F25A;       /* succès, accent de l'application */
    --v-citron-fonce: #9DB82A; /* succès sur fond crème */
    --v-vermillon: #FF5A36;    /* échec */
    --v-ciel: #7CC4FF;         /* en cours */
    --v-lilas: #C9B8FF;        /* accent des affiliés */
    --v-accent: var(--v-citron);

    --v-titre: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
    --v-texte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v-mono: 'Martian Mono', ui-monospace, Consolas, monospace;

    color-scheme: dark;
}

body[data-partie="affilies"] { --v-accent: var(--v-lilas); }
body[data-partie="admin"]    { --v-accent: var(--v-creme); }

/* ----- Variables Bootstrap remappées sur Verdict ----- */
:root, [data-bs-theme="dark"] {
    --bs-body-bg: var(--v-encre);
    --bs-body-color: var(--v-creme);
    --bs-body-font-family: var(--v-texte);
    --bs-emphasis-color: var(--v-creme);
    --bs-secondary-color: var(--v-gris);
    --bs-secondary-bg: var(--v-encre-2);
    --bs-tertiary-bg: var(--v-encre-2);
    --bs-tertiary-color: var(--v-gris);
    --bs-border-color: var(--v-trait);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-pill: 999px;
    --bs-link-color: var(--v-accent);
    --bs-link-color-rgb: 215, 242, 90;
    --bs-link-hover-color: var(--v-creme);
    --bs-link-hover-color-rgb: 237, 233, 223;
    --bs-primary: #D7F25A;
    --bs-primary-rgb: 215, 242, 90;
    --bs-success: #D7F25A;
    --bs-success-rgb: 215, 242, 90;
    --bs-danger: #FF5A36;
    --bs-danger-rgb: 255, 90, 54;
    --bs-info: #7CC4FF;
    --bs-info-rgb: 124, 196, 255;
    --bs-warning: #EDE9DF;
    --bs-warning-rgb: 237, 233, 223;
    --bs-secondary: #6E6A62;
    --bs-secondary-rgb: 110, 106, 98;
    --bs-dark-rgb: 14, 14, 12;
    --bs-light-rgb: 237, 233, 223;
    /* Les titres héritent de la couleur de leur panneau : encre sur crème ou citron, crème sur encre */
    --bs-heading-color: inherit;
    --bs-focus-ring-color: rgba(215, 242, 90, .35);
}

/* ----- Base ----- */
body {
    background: var(--v-encre);
    color: var(--v-creme);
    font-family: var(--v-texte);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--v-accent); }
a:hover { color: var(--v-creme); }
::selection { background: var(--v-accent); color: var(--v-encre); }

h1, h2, h3, h4, .v-titre {
    font-family: var(--v-titre);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: .95;
    text-wrap: balance;
}
h5, h6 { font-family: var(--v-texte); font-weight: 700; }
.v-mono, .v-etiq { font-family: var(--v-mono); }
.v-etiq {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v-gris);
}
.v-accent { color: var(--v-accent) !important; }
.v-contour {
    color: transparent;
    -webkit-text-stroke: 2px var(--v-accent);
}
.text-muted, .text-secondary { color: var(--v-gris) !important; }

/* ----- Boutons ----- */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: .7rem;
    --bs-btn-padding-x: 1.4rem;
    font-family: var(--v-texte);
}
.btn-primary, .btn-gradient, .btn-success, .v-btn {
    --bs-btn-color: var(--v-encre);
    --bs-btn-bg: var(--v-accent);
    --bs-btn-border-color: var(--v-accent);
    --bs-btn-hover-color: var(--v-encre);
    --bs-btn-hover-bg: var(--v-creme);
    --bs-btn-hover-border-color: var(--v-creme);
    --bs-btn-active-color: var(--v-encre);
    --bs-btn-active-bg: var(--v-creme);
    --bs-btn-active-border-color: var(--v-creme);
    --bs-btn-disabled-color: var(--v-encre);
    --bs-btn-disabled-bg: var(--v-gris);
    --bs-btn-disabled-border-color: var(--v-gris);
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
}
.btn-primary:hover, .btn-gradient:hover, .btn-success:hover, .v-btn:hover {
    background: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
    transform: none;
    box-shadow: none;
}
.btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .v-btn-contour {
    --bs-btn-color: var(--v-creme);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--v-trait);
    --bs-btn-hover-color: var(--v-encre);
    --bs-btn-hover-bg: var(--v-creme);
    --bs-btn-hover-border-color: var(--v-creme);
    --bs-btn-active-color: var(--v-encre);
    --bs-btn-active-bg: var(--v-creme);
    --bs-btn-active-border-color: var(--v-creme);
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
}
.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--v-encre);
    --bs-btn-bg: var(--v-vermillon);
    --bs-btn-border-color: var(--v-vermillon);
    --bs-btn-hover-color: var(--v-encre);
    --bs-btn-hover-bg: var(--v-creme);
    --bs-btn-hover-border-color: var(--v-creme);
}
.btn-outline-danger { --bs-btn-color: var(--v-vermillon); --bs-btn-bg: transparent; }
.btn-lg { --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 2rem; --bs-btn-font-size: 1.15rem; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .8rem; }

/* ----- Formulaires ----- */
.form-control, .form-select {
    background-color: var(--v-encre);
    color: var(--v-creme);
    border: 1px solid var(--v-trait);
    border-radius: 0;
    min-height: 48px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--v-encre);
    color: var(--v-creme);
    border-color: var(--v-accent);
    box-shadow: 0 0 0 3px rgba(215, 242, 90, .2);
}
.form-control::placeholder { color: var(--v-gris-fonce); }
.form-label {
    font-family: var(--v-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v-gris);
}
.form-check-input { border-radius: 0; background-color: var(--v-encre); border-color: var(--v-gris); }
.form-check-input:checked { background-color: var(--v-accent); border-color: var(--v-accent); }
.form-text { color: var(--v-gris); }
.invalid-feedback { color: var(--v-vermillon); }
.input-group-text { background: var(--v-encre-2); color: var(--v-gris); border-color: var(--v-trait); border-radius: 0; }

/* ----- Cartes, panneaux ----- */
.card {
    --bs-card-bg: var(--v-encre);
    --bs-card-border-color: var(--v-trait);
    --bs-card-cap-bg: var(--v-encre-2);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    color: var(--v-creme);
}
.v-panneau-creme { background: var(--v-creme); color: var(--v-encre); }
.v-panneau-creme a { color: var(--v-encre); }

/* ----- Tableaux ----- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--v-creme);
    --bs-table-border-color: var(--v-trait);
    --bs-table-striped-bg: rgba(237, 233, 223, .03);
    --bs-table-hover-bg: rgba(237, 233, 223, .05);
    --bs-table-hover-color: var(--v-creme);
}
.table > thead th {
    font-family: var(--v-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v-gris);
    border-bottom-color: var(--v-creme);
}
.table-dark { --bs-table-bg: transparent; }

/* ----- Alertes, pastilles ----- */
.alert { border-radius: 0; border-width: 0 0 0 4px; background: var(--v-encre-2); color: var(--v-creme); }
.alert-success { border-color: var(--v-citron); }
.alert-danger { border-color: var(--v-vermillon); }
.alert-info { border-color: var(--v-ciel); }
.alert-warning { border-color: var(--v-creme); }
.badge { border-radius: 0; font-family: var(--v-mono); font-weight: 500; letter-spacing: .04em; }
.bg-primary, .bg-success { background-color: var(--v-citron) !important; color: var(--v-encre) !important; }
.bg-danger { background-color: var(--v-vermillon) !important; color: var(--v-encre) !important; }
.bg-info { background-color: var(--v-ciel) !important; color: var(--v-encre) !important; }
.bg-warning { background-color: var(--v-creme) !important; color: var(--v-encre) !important; }
.bg-secondary { background-color: var(--v-gris-fonce) !important; color: var(--v-creme) !important; }
.text-primary, .text-success { color: var(--v-citron) !important; }
.text-danger { color: var(--v-vermillon) !important; }
.text-info { color: var(--v-ciel) !important; }

/* ----- Fenêtres (modales), menus déroulants ----- */
.modal-content {
    background: var(--v-encre);
    color: var(--v-creme);
    border: 1px solid var(--v-creme);
    border-radius: 0;
}
.modal-header, .modal-footer { border-color: var(--v-trait); }
.modal-title { font-family: var(--v-titre); font-weight: 900; text-transform: uppercase; font-size: 1.8rem; }
.dropdown-menu {
    --bs-dropdown-bg: var(--v-encre);
    --bs-dropdown-border-color: var(--v-trait);
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-color: var(--v-creme);
    --bs-dropdown-link-hover-bg: var(--v-creme);
    --bs-dropdown-link-hover-color: var(--v-encre);
    --bs-dropdown-link-active-bg: var(--v-accent);
    --bs-dropdown-link-active-color: var(--v-encre);
}
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--v-creme); --bs-pagination-border-color: var(--v-trait); --bs-pagination-active-bg: var(--v-accent); --bs-pagination-active-color: var(--v-encre); --bs-pagination-active-border-color: var(--v-accent); --bs-pagination-hover-bg: var(--v-encre-2); --bs-pagination-hover-color: var(--v-creme); }
.nav-tabs { --bs-nav-tabs-border-color: var(--v-trait); --bs-nav-tabs-link-active-bg: var(--v-creme); --bs-nav-tabs-link-active-color: var(--v-encre); --bs-nav-tabs-link-active-border-color: var(--v-creme); --bs-nav-tabs-border-radius: 0; }
.nav-link { color: var(--v-creme); }
.progress { --bs-progress-bg: var(--v-attente); --bs-progress-border-radius: 0; --bs-progress-bar-bg: var(--v-accent); }

/* ----- Statuts des tests ----- */
.v-statut {
    display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
    font-family: var(--v-mono); font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap; color: var(--v-encre);
}
.v-statut-succes   { background: var(--v-citron); }
.v-statut-echec    { background: var(--v-vermillon); }
.v-statut-en_cours { background: var(--v-ciel); }
.v-statut-en_attente { background: transparent; color: var(--v-creme); border: 1.5px dotted var(--v-gris); }
.v-statut-annule   { background: var(--v-gris-fonce); color: var(--v-creme); text-decoration: line-through; }

/* Code-barres : une barre par tâche */
.v-barres { display: flex; gap: 3px; height: 48px; }
.v-barres > span { flex: 1 1 0; min-width: 2px; background: var(--v-attente); }
.v-barres > .s { background: var(--v-citron); }
.v-barres > .f { background: var(--v-vermillon); }
.v-barres > .r { background: var(--v-ciel); }
.v-barres > .a { background: var(--v-gris-fonce); }

/* Billet à talon (panneau crème avec perforation) */
.v-billet { position: relative; background: var(--v-creme); color: var(--v-encre); }
.v-billet-perfo { position: relative; border-top: 2px dashed rgba(14, 14, 12, .3); }
.v-billet-perfo::before, .v-billet-perfo::after {
    content: ""; position: absolute; top: -14px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--v-encre);
}
.v-billet-perfo::before { left: -14px; }
.v-billet-perfo::after { right: -14px; }

/* Sceau de résultat */
.v-sceau {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 96px; height: 96px; border: 3px solid currentColor; border-radius: 50%;
    transform: rotate(9deg); flex-shrink: 0;
}

/* Logo coche-curseur */
.v-logo { display: inline-flex; align-items: center; gap: .45em; color: var(--v-creme); text-decoration: none; }
.v-logo svg { color: var(--v-accent); flex-shrink: 0; }
.v-logo-nom { font-family: var(--v-titre); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.v-logo:hover { color: var(--v-creme); }

/* Sélecteur de langue FR / EN */
.v-langue { display: inline-flex; border: 1px solid var(--v-trait); font-family: var(--v-mono); font-size: 12px; }
.v-langue a { padding: 9px 12px; color: var(--v-gris); text-decoration: none; }
.v-langue a.actif { background: var(--v-creme); color: var(--v-encre); }

/* Cible tactile minimale */
@media (pointer: coarse) {
    .btn, .nav-link, .v-langue a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}