/* =====================================================================
   KALYFORM — DESIGN SYSTEM (thème sombre premium)
   Identité : violet #7C6FF0 (primaire, éclairci pour contraste sur fond
   sombre) / mint #2DD4A7 (accent) / fond profond #0B0A1F
   Typo : Manrope (display) + Inter (texte courant)
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --kf-violet: #7C6FF0;
    --kf-violet-dark: #6355D8;
    --kf-violet-darker: #4C3FC0;
    --kf-violet-soft: rgba(124, 111, 240, .14);
    --kf-mint: #2DD4A7;
    --kf-mint-dark: #17B890;
    --kf-mint-soft: rgba(45, 212, 167, .14);

    --kf-bg: #0B0A1F;
    --kf-bg-alt: #100E28;
    --kf-surface: #15132F;
    --kf-surface-glass: rgba(255, 255, 255, .04);
    --kf-surface-glass-hover: rgba(255, 255, 255, .07);
    --kf-border: rgba(255, 255, 255, .08);
    --kf-border-soft: rgba(255, 255, 255, .05);

    --kf-ink: #F3F1FC;
    --kf-ink-soft: #A9A5C4;
    --kf-ink-faint: #6E6A8E;
    --kf-paper: var(--kf-bg);

/* ---------------------------------------------------------------------
   CORRECTIF GLOBAL — plusieurs pages déclarent data-bs-theme="light" (ou
   ne déclarent rien), ce qui pousse Bootstrap à utiliser ses couleurs de
   texte pensées pour un fond blanc (--bs-body-color, --bs-heading-color,
   --bs-secondary-color...), alors que le fond réel de Kalyform est
   toujours sombre. Résultat : du texte quasi invisible sur certains
   éléments Bootstrap "bruts" (labels, titres, texte secondaire) qui
   n'ont pas de couleur définie explicitement ailleurs.
   On force ici les variables Bootstrap elles-mêmes à suivre l'encre du
   thème Kalyform, sur toutes les pages, quel que soit data-bs-theme —
   s'applique automatiquement sur PC, mobile et tablette puisque ce
   fichier est chargé partout. Les éléments qui ont déjà une couleur
   explicite (badges, boutons colorés...) ne sont pas affectés.
--------------------------------------------------------------------- */
html, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-color: var(--kf-ink) !important;
    --bs-body-color-rgb: 243, 241, 252 !important;
    --bs-heading-color: var(--kf-ink) !important;
    --bs-emphasis-color: var(--kf-ink) !important;
    --bs-secondary-color: var(--kf-ink-soft) !important;
    --bs-tertiary-color: var(--kf-ink-faint) !important;
    --bs-border-color: var(--kf-border) !important;
}
.form-label, .form-check-label, label,
.table, .table > :not(caption) > * > *,
h1, h2, h3, h4, h5, h6,
.metric .value, .value:not([class*="bg-"]) {
    color: var(--kf-ink);
}
.text-muted, .text-secondary, .form-text {
    color: var(--kf-ink-soft) !important;
}

    --kf-font-display: 'Manrope', 'Inter', system-ui, sans-serif;
    --kf-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --kf-radius-sm: 10px;
    --kf-radius: 18px;
    --kf-radius-lg: 26px;
    --kf-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --kf-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
    --kf-glow-violet: 0 0 60px rgba(124, 111, 240, .25);
    --kf-glow-mint: 0 0 60px rgba(45, 212, 167, .2);

    /*
    |--------------------------------------------------------------------------
    | Alias de compatibilité — chaque page du site a historiquement inventé
    | ses propres noms de variables (--text, --ink, --card, --dark-bg...).
    | Ce bloc les fait TOUS pointer vers les vraies couleurs officielles
    | ci-dessus, avec des valeurs fixes et lisibles (jamais de rgba quasi
    | transparent). Objectif : qu'une page ne puisse plus jamais afficher
    | du texte invisible, même si son propre :root contient une erreur —
    | dans la mesure où on la fait migrer vers ces noms au fil de l'eau.
    |--------------------------------------------------------------------------
    */
    --bg: var(--kf-bg);
    --bg-main: var(--kf-bg);
    --bg2: var(--kf-bg-alt);
    --bg-card: var(--kf-surface-glass);
    --dark-bg: var(--kf-bg);
    --dark-card: var(--kf-surface-glass);
    --dark-border: var(--kf-border);
    --dark-muted: var(--kf-ink-soft);
    --dark-soft: var(--kf-surface-glass);
    --dark-text: var(--kf-ink);

    --card: var(--kf-surface-glass);
    --card2: var(--kf-surface-glass);
    --panel: var(--kf-surface-glass);
    --panel2: var(--kf-surface-glass);
    --sidebar: var(--kf-surface);
    --soft: var(--kf-surface-glass);
    --soft-hover: var(--kf-surface-glass-hover);
    --course-bg: var(--kf-surface-glass);

    --text: var(--kf-ink);
    --ink: var(--kf-ink);
    --kf-text: var(--kf-ink);
    --input-text: var(--kf-ink);
    --text-muted-soft: var(--kf-ink-soft);
    --muted: var(--kf-ink-soft);
    --kf-muted: var(--kf-ink-soft);
    --kf-muted-2: var(--kf-ink-soft);

    --border: var(--kf-border);
    --border-soft: var(--kf-border-soft);
    --line: var(--kf-border);
    --stroke: var(--kf-border);
    --input: var(--kf-surface-glass);
    --input-bg: var(--kf-surface-glass);
    --shadow: var(--kf-shadow);

    --primary: var(--kf-violet);
    --primary-dark: var(--kf-violet-dark);
    --primary2: var(--kf-violet-dark);
    --kf-primary: var(--kf-violet);
    --kf-primary-2: var(--kf-violet-dark);
    --accent: var(--kf-violet);
    --accent-2: var(--kf-violet-dark);
    --accent2: var(--kf-violet-dark);
    --violet: var(--kf-violet);
    --purple: var(--kf-violet);
    --blue: #4f8cff;
    --blue-soft: rgba(124, 111, 240, .14);

    --green: var(--kf-mint);
    --ok: var(--kf-mint);
    --success: var(--kf-mint);
    --red: #ef4444;
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, .14);
    --danger-text: #fca5a5;
    --orange: #f59e0b;
    --amber: #f59e0b;
    --warn: #f59e0b;
    --warning: #f59e0b;
    --kf-warning: #f59e0b;

    --bs-table-color: var(--kf-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--kf-border);
}

:root {
    color-scheme: dark;
}

select, .form-select {
    color-scheme: dark;
}

option {
    background: #15132F;
    color: #F3F1FC;
}

* { box-sizing: border-box; }

body {
    background: radial-gradient(circle at 15% 0%, rgba(124,111,240,.12), transparent 40%),
                radial-gradient(circle at 85% 20%, rgba(45,212,167,.08), transparent 45%),
                var(--kf-bg);
    color: var(--kf-ink);
    font-family: var(--kf-font-body);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .fw-bold, .fw-900, .fw-black {
    font-family: var(--kf-font-display);
    color: var(--kf-ink);
}

a { color: var(--kf-violet); }
a:hover { color: var(--kf-mint); }

.text-muted, .muted, .small-muted, .text-secondary { color: var(--kf-ink-soft) !important; }

.card-k, .card, .kf-card {
    background: var(--kf-surface-glass);
    border: 1px solid var(--kf-border);
    border-radius: var(--kf-radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--kf-shadow);
    color: var(--kf-ink);
}
.card-k:hover, .kf-card:hover { background: var(--kf-surface-glass-hover); }

.card-header, .card-body, .card-footer {
    background: transparent;
    border-color: var(--kf-border);
    color: var(--kf-ink);
}

.btn-primary, .btn.primary {
    background: linear-gradient(135deg, var(--kf-violet), var(--kf-violet-darker));
    border: none;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,111,240,.35);
}
.btn-primary:hover, .btn.primary:hover {
    background: linear-gradient(135deg, var(--kf-mint), var(--kf-mint-dark));
    box-shadow: 0 8px 24px rgba(45,212,167,.35);
    color: #06140f;
}

.btn-outline-primary, .btn.outline {
    border: 1px solid var(--kf-border);
    color: var(--kf-ink);
    background: transparent;
}
.btn-outline-primary:hover { background: var(--kf-surface-glass-hover); color: var(--kf-ink); border-color: var(--kf-violet); }

.btn-outline-secondary { border-color: var(--kf-border); color: var(--kf-ink-soft); }
.btn-outline-secondary:hover { background: var(--kf-surface-glass-hover); color: var(--kf-ink); }

.btn-light {
    background-color: #F3F1FC !important;
    border-color: #F3F1FC !important;
    color: #15132F !important;
}
.btn-light:hover {
    background-color: #fff !important;
    color: #15132F !important;
}

.btn-danger, .btn-outline-danger { color: #fca5a5; border-color: rgba(248,113,113,.4); background: transparent; }
.btn-danger { background: rgba(248,113,113,.15); }

.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--kf-border) !important;
    color: var(--kf-ink) !important;
    border-radius: 12px !important;
}
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--kf-violet) !important;
    box-shadow: 0 0 0 .2rem rgba(124,111,240,.2) !important;
    color: var(--kf-ink) !important;
}
.form-control::placeholder { color: var(--kf-ink-faint) !important; }
.form-label, label { color: var(--kf-ink-soft); font-weight: 600; }

input[type="checkbox"], input[type="radio"] {
    width: 1.15em !important;
    height: 1.15em !important;
    min-height: 0 !important;
    margin-top: 0.2em;
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid var(--kf-border) !important;
    flex-shrink: 0;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: var(--kf-violet) !important;
    border-color: var(--kf-violet) !important;
}


.table { color: var(--kf-ink); }
.table thead th { border-color: var(--kf-border); color: var(--kf-ink-soft); font-weight: 700; }
.table td, .table th { border-color: var(--kf-border-soft); }
.table-hover tbody tr:hover { background: var(--kf-surface-glass-hover); }

.badge { font-weight: 700; }
.alert { border-radius: var(--kf-radius); border: 1px solid var(--kf-border); }
.alert-success { background: rgba(45,212,167,.12); color: #6EEBC6; border-color: rgba(45,212,167,.3); }
.alert-danger, .alert.err { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(248,113,113,.3); }
.alert-warning { background: rgba(245,166,35,.12); color: #fbbf24; border-color: rgba(245,166,35,.3); }
.alert-info, .alert.info { background: rgba(124,111,240,.12); color: #b8b0f8; border-color: rgba(124,111,240,.3); }

.modal-content {
    background: var(--kf-surface);
    border: 1px solid var(--kf-border);
    color: var(--kf-ink);
}
.modal-header, .modal-footer { border-color: var(--kf-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.5); }

.kf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.kf-orb-violet { background: radial-gradient(circle, rgba(124,111,240,.6), transparent 70%); }
.kf-orb-mint { background: radial-gradient(circle, rgba(45,212,167,.5), transparent 70%); }
.kf-orb-sunset { background: radial-gradient(circle, rgba(255,138,76,.45), rgba(124,111,240,.25) 60%, transparent 75%); }

/* =====================================================================
   KALYFORM — PREMIUM COLOR LAYER 2026
   Harmonisation globale : contraste, profondeur, accents métier.
===================================================================== */
:root {
    --kf-blue: #2387ff;
    --kf-blue-soft: rgba(35,135,255,.16);
    --kf-purple: #8b3dff;
    --kf-purple-soft: rgba(139,61,255,.16);
    --kf-orange: #ffad22;
    --kf-orange-soft: rgba(255,173,34,.16);
    --kf-green: #61c554;
    --kf-green-soft: rgba(97,197,84,.16);
    --kf-red: #ff5d68;
    --kf-red-soft: rgba(255,93,104,.14);
    --kf-cyan: #24b7ff;
    --kf-panel: #101a2c;
    --kf-panel-2: #152238;
    --kf-panel-3: #1b2941;
}

html, body { background-color: #07101f; }
body {
    background:
        radial-gradient(circle at 12% -10%, rgba(139,61,255,.20), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(35,135,255,.15), transparent 34%),
        linear-gradient(145deg, #07101f 0%, #0a1425 48%, #08111f 100%);
}

.kf-main, main { position: relative; }

.card-k, .card, .kf-card, .day-card, .panel, .widget, .box {
    background: linear-gradient(145deg, rgba(22,35,57,.96), rgba(13,24,42,.96)) !important;
    border: 1px solid rgba(137,162,204,.16) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.card-k:hover, .kf-card:hover, .day-card:hover {
    border-color: rgba(124,111,240,.34) !important;
    transform: translateY(-1px);
}

.card-header {
    background: linear-gradient(90deg, rgba(124,111,240,.10), rgba(35,135,255,.05)) !important;
}

.btn {
    border-radius: 11px !important;
    font-weight: 700;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn.primary {
    background: linear-gradient(135deg, #8b3dff 0%, #5257ef 52%, #2387ff 100%) !important;
    box-shadow: 0 10px 28px rgba(83,87,239,.34) !important;
}
.btn-warning {
    background: linear-gradient(135deg, #ffc53d, #f59e0b) !important;
    border: 0 !important;
    color: #251702 !important;
    box-shadow: 0 10px 25px rgba(245,158,11,.28) !important;
}
.btn-success {
    background: linear-gradient(135deg, #63d65d, #23b77b) !important;
    border: 0 !important;
    color: #041b11 !important;
}
.btn-danger { background: linear-gradient(135deg, rgba(255,93,104,.26), rgba(209,48,70,.20)) !important; }
.btn-secondary {
    background: #566274 !important;
    border-color: #657185 !important;
    color: white !important;
}

.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background: rgba(8,17,31,.68) !important;
    border-color: rgba(137,162,204,.19) !important;
    min-height: 42px;
}
.form-control:hover, .form-select:hover { border-color: rgba(124,111,240,.42) !important; }
.form-control:focus, .form-select:focus {
    border-color: #7c6ff0 !important;
    box-shadow: 0 0 0 .2rem rgba(124,111,240,.17), 0 0 22px rgba(83,87,239,.12) !important;
}

.table { --bs-table-bg: transparent !important; }
.table thead th {
    background: rgba(124,111,240,.08) !important;
    color: #cbd5f2 !important;
}
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: rgba(35,135,255,.06) !important; }

.modal-backdrop.show { opacity: .76 !important; backdrop-filter: blur(5px); }
.modal-content {
    background: linear-gradient(150deg, #142137, #0d182a 72%) !important;
    border: 1px solid rgba(124,111,240,.28) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.64), 0 0 45px rgba(82,87,239,.12) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(100deg, #7036dc 0%, #4357df 50%, #1277df 100%) !important;
    border-bottom: 0 !important;
    padding: 18px 22px !important;
}
.modal-title { color: #fff !important; font-weight: 900 !important; }
.modal-body { padding: 20px 22px !important; }
.modal-footer {
    background: rgba(6,14,27,.52) !important;
    padding: 15px 22px !important;
}

.alert-info {
    background: linear-gradient(100deg, rgba(83,87,239,.16), rgba(35,135,255,.13)) !important;
    border-left: 3px solid #6b70ff !important;
    color: #d5dcff !important;
}

.badge.bg-secondary { background: #697586 !important; }

/* Repères chromatiques réutilisables */
.kf-accent-purple { border-left: 3px solid var(--kf-purple) !important; }
.kf-accent-blue { border-left: 3px solid var(--kf-blue) !important; }
.kf-accent-green { border-left: 3px solid var(--kf-green) !important; }
.kf-accent-orange { border-left: 3px solid var(--kf-orange) !important; }

@media (max-width: 768px) {
    .modal-body, .modal-header, .modal-footer { padding-left: 15px !important; padding-right: 15px !important; }
}

/* ============================================================
   Palier responsable tablette / mobile (ajout audit)
   ============================================================ */
@media (max-width: 768px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* Évite tout débordement horizontal accidentel sur petit écran. */
    html, body { overflow-x: hidden; }
    /* Les tableaux ne s'écrasent pas : ils gardent une largeur mini et scrollent. */
    .table-responsive > table { min-width: 520px; }
}