/* ============================================================
   KRÉGBÉ — CSS Principal
   Charte : Rouge #C0392B | Noir #1A1A1A | Blanc #FFFFFF
   Police : Inter (corps) | Playfair Display (titres)
   ============================================================ */

/* ─── Variables CSS ─────────────────────────────────────────── */
:root {
    --red:         #C0392B;
    --red-dark:    #a93226;
    --red-light:   #e74c3c;
    --dark:        #1A1A1A;
    --dark-2:      #2d2d2d;
    --dark-3:      #3d3d3d;
    --white:       #FFFFFF;
    --gray-50:     #f9f9f9;
    --gray-100:    #f0f0f0;
    --gray-200:    #e0e0e0;
    --gray-400:    #9e9e9e;
    --gray-600:    #555;
    --font-body:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-title:  'Playfair Display', Georgia, serif;
    --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
    --shadow-md:   0 4px 20px rgba(0,0,0,.12);
    --shadow-lg:   0 8px 40px rgba(0,0,0,.15);
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --transition:  all .2s ease;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
}

/* ─── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; }
.font-playfair      { font-family: var(--font-title); }
.text-red           { color: var(--red) !important; }
.text-dark-custom   { color: var(--dark) !important; }
.fw-500             { font-weight: 500; }
.fw-600             { font-weight: 600; }
.fw-700             { font-weight: 700; }

/* ─── Bootstrap overrides ───────────────────────────────────── */
.btn-danger, .btn-danger:hover   { background-color: var(--red); border-color: var(--red); }
.btn-outline-danger              { color: var(--red); border-color: var(--red); }
.btn-outline-danger:hover        { background-color: var(--red); border-color: var(--red); }
.bg-danger                       { background-color: var(--red) !important; }
.border-danger                   { border-color: var(--red) !important; }
.text-danger                     { color: var(--red) !important; }
.badge.bg-danger                 { background-color: var(--red) !important; }

.progress-bar.bg-danger          { background-color: var(--red) !important; }

/* ─── Scrollbar custom ──────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: #f1f1f1; }
::-webkit-scrollbar-thumb        { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--red); }

/* ─── Utilitaires ───────────────────────────────────────────── */
.min-w-0   { min-width: 0; }
.gap-2px   { gap: 2px; }
.shadow-card { box-shadow: var(--shadow-md); }