/* ══════════════════════════════════════════════════════════
   EPS Multi-Tools — Thème (palette logo)
   Teal    : #0f9e8e   Orange  : #e84020
   Or      : #f5b800   Marine  : #1a2b3a
   ══════════════════════════════════════════════════════════ */

/* ── Variables de thème ──────────────────────────────────── */
:root {
    /* Palette */
    --eps-teal:          #0f9e8e;
    --eps-teal-dark:     #0c8a7c;
    --eps-teal-darker:   #0a7468;
    --eps-teal-light:    #e6f7f5;
    --eps-orange:        #e84020;
    --eps-gold:          #f5b800;
    --eps-navy:          #111f2d;     /* plus profond, moins bleu-vert */
    --eps-navy-mid:      #1a2b3a;    /* niveau intermédiaire */

    /* Surfaces */
    --eps-surface:       #f5f7fa;    /* gris-bleu neutre, pas teinté teal */
    --eps-surface-alt:   #ffffff;
    --eps-border:        #e4e8ee;    /* légèrement plus froid que Bootstrap */

    /* Texte */
    --eps-text:          #1b2433;    /* légèrement navy, pas pur #212529 */
    --eps-text-muted:    #5c6b7e;    /* slate, plus chaud que #6c757d */

    /* Override Bootstrap primary */
    --bs-primary:            #0f9e8e;
    --bs-primary-rgb:        15, 158, 142;
    --bs-link-color:         #0c8a7c;
    --bs-link-color-rgb:     12, 138, 124;
    --bs-link-hover-color:   #0a7468;
    --bs-focus-ring-color:   rgba(15, 158, 142, .25);
    --bs-body-color:         #1b2433;
    --bs-secondary-color:    #5c6b7e;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md:   0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --shadow-lg:   0 10px 20px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);
    --shadow-xl:   0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
    --shadow-teal: 0 8px 24px rgba(15,158,142,.22);
    --shadow-gold: 0 8px 24px rgba(245,184,0,.28);

    /* ── Transitions ──────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:  150ms;
    --t-base:  260ms;
    --t-slow:  420ms;

    /* ── Radius ───────────────────────────────────────────── */
    --radius-sm:  .375rem;
    --radius-md:  .75rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;
}

/* ── Base ────────────────────────────────────────────────── */
body {
    background-color: var(--eps-surface);
    color: var(--eps-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.text-muted { color: var(--eps-text-muted) !important; }

/* Rendre bg-light cohérent avec la surface */
.bg-light { background-color: var(--eps-surface) !important; }
.bg-white  { background-color: #ffffff !important; }

main {
    flex: 1;
    animation: fadeIn var(--t-base) var(--ease-out);
}

/* ── Dual range slider (custom JS) ──────────────────────── */
.dual-range-wrap {
    position: relative;
    height: 30px;
    margin: 8px 2px 4px;
}
.dual-range-track {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 8px;
    border-radius: 4px;
    background: #dee2e6;
    pointer-events: none;
}
.dual-range-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--eps-navy-mid);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: grab;
    touch-action: none;
    user-select: none;
    z-index: 2;
    transition: box-shadow var(--t-fast);
}
.dual-range-handle:active { cursor: grabbing; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ── Table rows ──────────────────────────────────────────── */
.table-hover > tbody > tr {
    transition: background-color var(--t-fast);
}

/* ── Tool nav buttons (classe/show) ─────────────────────── */
.tool-btn {
    transition: transform     var(--t-fast) var(--ease-out),
                box-shadow    var(--t-fast) var(--ease-out),
                background-color var(--t-fast),
                border-color     var(--t-fast);
}

.tool-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Boutons — border-radius global ─────────────────────── */
.btn          { border-radius: .5rem; }
.btn-sm       { border-radius: .375rem; }
.btn-lg       { border-radius: .625rem; }

/* ── Bootstrap primary overrides ────────────────────────── */
.btn-primary {
    --bs-btn-bg:               #0f9e8e;
    --bs-btn-border-color:     #0f9e8e;
    --bs-btn-hover-bg:         #0c8a7c;
    --bs-btn-hover-border-color: #0c8a7c;
    --bs-btn-active-bg:        #0a7468;
    --bs-btn-active-border-color: #0a7468;
    --bs-btn-disabled-bg:      #0f9e8e;
    --bs-btn-disabled-border-color: #0f9e8e;
}

.btn-outline-primary {
    --bs-btn-color:            #0f9e8e;
    --bs-btn-border-color:     #0f9e8e;
    --bs-btn-hover-bg:         #0f9e8e;
    --bs-btn-hover-border-color: #0f9e8e;
    --bs-btn-active-bg:        #0c8a7c;
    --bs-btn-active-border-color: #0c8a7c;
}

.text-primary   { color: #0f9e8e !important; }
.bg-primary     { background-color: #0f9e8e !important; }
.border-primary { border-color: #0f9e8e !important; }

.badge.bg-primary { background-color: #0f9e8e !important; }

/* form focus ring */
.form-control:focus,
.form-select:focus {
    border-color: #0f9e8e;
    box-shadow: 0 0 0 .25rem rgba(15, 158, 142, .25);
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar-eps {
    background: var(--eps-navy);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: padding var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}

.navbar-eps.navbar-scrolled {
    padding-top:    .25rem;
    padding-bottom: .25rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}

/* Nav links */
.navbar-eps .nav-link {
    font-size: .9rem;
    letter-spacing: -.01em;
    color: rgba(255,255,255,.78);
    padding-left: .65rem;
    padding-right: .65rem;
}
.navbar-eps .nav-link:hover  { color: #fff !important; opacity: 1; }
.navbar-eps .nav-link.active,
.navbar-eps .nav-link:focus-visible { color: var(--eps-teal) !important; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
    border-top: none !important;
    background: #0b1a26 !important;
}
.footer-link {
    font-size: .83rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color var(--t-fast);
    display: block;
    padding: .15rem 0;
}
.footer-link:hover {
    color: rgba(255,255,255,.85);
    text-decoration: none;
}
.footer-social-link:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

/* ── Cards (global) ──────────────────────────────────────── */
.card {
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

/* ── Tool cards ──────────────────────────────────────────── */
.tool-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--eps-border);
    border-top: 3px solid var(--card-accent, var(--eps-teal));
}
.tool-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--card-accent, rgba(15,158,142,.3));
    border-top-color: var(--card-accent, var(--eps-teal));
    z-index: 10;
}
.tool-card:has(.dropdown.show) {
    z-index: 10;
}

.tool-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--card-accent-bg, var(--eps-teal-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--card-accent, var(--eps-teal));
    flex-shrink: 0;
    margin-bottom: 1rem;
}

/* ── Preview cards (grille outils dashboard) ─────────────── */
.preview-card {
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.preview-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Score display ───────────────────────────────────────── */
.score-display {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Timer ───────────────────────────────────────────────── */
.timer-display,
.font-monospace {
    font-family: 'Courier New', Courier, monospace;
}

/* ── Elève chip ──────────────────────────────────────────── */
.eleve-chip {
    border: 1px solid transparent;
    transition: background-color 0.1s, border-color 0.1s;
}
.eleve-chip:hover {
    background-color: #d4f0ec !important;
    border-color: #0f9e8e;
}

/* ── Bracket match cell ──────────────────────────────────── */
.bracket-match {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    min-width: 160px;
    border-radius: .375rem;
}

/* ── Form errors ─────────────────────────────────────────── */
.form-error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ── Score card overflow ─────────────────────────────────── */
.score-card-wrapper {
    overflow-x: auto;
}

/* ── App dialog (<dialog> natif) ─────────────────────────── */
dialog.app-dialog {
    padding: 0;
    border: none;
    border-radius: .75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    max-width: 90vw;
}

dialog.app-dialog::backdrop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
}

.app-dialog-inner {
    padding: 1.5rem;
    min-width: 280px;
    max-width: 440px;
    font-family: inherit;
}

.app-dialog-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: 1rem;
}

.app-dialog-header i { font-size: 1.25rem; }

#dlg-msg {
    color: #6c757d;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.app-dialog-footer {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ── Toast (notification non-bloquante) ──────────────────── */
.app-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    font-size: .875rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.app-toast--success { background: #1a2b3a; color: #fff; }
.app-toast--error   { background: #dc3545; color: #fff; }
.app-toast--info    { background: #0d6efd; color: #fff; }
.app-toast--visible { opacity: 1; transform: translateY(0); }

/* ── Misc utilities ──────────────────────────────────────── */
.opacity-90 { opacity: 0.9; }

.navbar .nav-link:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   Phase 1 — Animation foundations
   ══════════════════════════════════════════════════════════════ */

/* ── Typographie ─────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

/* ── Dégradé de texte ────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--eps-teal) 0%, var(--eps-teal-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15,158,142,.35); }
    50%       { box-shadow: 0 0 0 8px rgba(15,158,142,0); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ── Smooth scroll ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }


/* ── Scroll indicator (hero) ─────────────────────────────────── */
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50%       { transform: translateY(6px); opacity: 1; }
}
.scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.45);
    font-size: 1.3rem;
    animation: bounceDown 2s ease-in-out infinite;
    cursor: pointer;
    transition: color var(--t-fast);
}
.scroll-indicator:hover { color: rgba(255,255,255,.9); }

/* ── Scroll-reveal ───────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
    will-change: opacity, transform;
}

.reveal.fade-up    { transform: translateY(24px); }
.reveal.fade-in    { transform: none; }
.reveal.scale-in   { transform: scale(0.93); }
.reveal.slide-right { transform: translateX(-20px); }

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Stagger enfants ─────────────────────────────────────────── */
.stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
}

.stagger.is-visible > *:nth-child(1)  { transition-delay:   0ms; }
.stagger.is-visible > *:nth-child(2)  { transition-delay:  50ms; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: 100ms; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: 150ms; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: 200ms; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: 250ms; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: 300ms; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: 350ms; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: 390ms; }
.stagger.is-visible > *:nth-child(10) { transition-delay: 420ms; }
.stagger.is-visible > *:nth-child(11) { transition-delay: 450ms; }
.stagger.is-visible > *:nth-child(12) { transition-delay: 470ms; }
.stagger.is-visible > *:nth-child(13) { transition-delay: 490ms; }
.stagger.is-visible > *:nth-child(14) { transition-delay: 505ms; }
.stagger.is-visible > *:nth-child(15) { transition-delay: 520ms; }

.stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

/* ── Hover lift ──────────────────────────────────────────────── */
.hover-lift {
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    will-change: transform;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ── Hover glow (teal) ───────────────────────────────────────── */
.hover-glow {
    transition: box-shadow var(--t-base) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-teal);
}

/* ── Ripple sur boutons ──────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast),
                border-color var(--t-fast);
}

.btn:active:not(:disabled) {
    transform: scale(0.96);
}

.ripple {
    position: absolute;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: rippleAnim 500ms linear;
    pointer-events: none;
}

/* ── Compteurs animés ────────────────────────────────────────── */
[data-counter] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── Animations directes (au-dessus de la ligne de flottaison) ── */
.animate-fade-up {
    animation: fadeUp var(--t-slow) var(--ease-out) both;
}

.animate-fade-in {
    animation: fadeIn var(--t-slow) var(--ease-out) both;
}

.animate-scale-in {
    animation: scaleIn var(--t-slow) var(--ease-spring) both;
}

.delay-1 { animation-delay:  80ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 340ms; }
.delay-4 { animation-delay: 480ms; }
.delay-5 { animation-delay: 620ms; }

/* ── Hover glow gold (carte premium) ────────────────────────── */
.hover-glow-gold {
    transition: box-shadow var(--t-base) var(--ease-out),
                transform  var(--t-base) var(--ease-out);
}

.hover-glow-gold:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-4px);
}

/* ── Accordion ───────────────────────────────────────────────── */
.accordion-item {
    transition: background-color var(--t-fast);
}

.accordion-button {
    transition: background-color var(--t-fast), box-shadow var(--t-fast);
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgba(15,158,142,.15);
}

/* ── KPI cards ───────────────────────────────────────────────── */
.kpi-card {
    border-top: 3px solid transparent;
    transition: border-color var(--t-base) var(--ease-out),
                transform     var(--t-fast) var(--ease-out),
                box-shadow    var(--t-fast) var(--ease-out);
}

.kpi-card:hover {
    border-top-color: var(--eps-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Timeline ────────────────────────────────────────────────── */
.timeline-row {
    transition: background-color var(--t-fast);
}

.timeline-row:hover {
    background-color: var(--eps-teal-light) !important;
}

/* ── Floating orbs (hero) ────────────────────────────────────── */
@keyframes floatOrb {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.04); }
}

.hero-orb {
    animation: floatOrb 7s ease-in-out infinite;
    will-change: transform;
}

.hero-orb:nth-child(2) {
    animation-duration: 9s;
    animation-delay: -3s;
}

/* ══════════════════════════════════════════════════════════
   Dark mode — redéfinition des variables EPS + corrections
   ══════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    /* Surfaces */
    --eps-surface:     #131720;
    --eps-surface-alt: #1b2030;
    --eps-border:      #28334a;

    /* Texte */
    --eps-text:        #d5dce8;
    --eps-text-muted:  #7c90a8;

    /* Bootstrap body (héritent via cascade) */
    --bs-body-color:      #d5dce8;
    --bs-secondary-color: #7c90a8;
    --bs-link-color:           #3ecfc0;
    --bs-link-color-rgb:       62, 207, 192;
    --bs-link-hover-color:     #5ed8cb;

    /* Teal-light teinté adapté au dark */
    --eps-teal-light: rgba(15, 158, 142, .15);
}

/* ── Fond de la zone admin (inline style dans le layout) ─── */
.admin-content-main {
    background: #f4f6f9;
    min-height: 100vh;
}
[data-bs-theme="dark"] .admin-content-main {
    background: var(--eps-surface) !important;
}

/* ── bg-white / bg-light forcés dans app.css ──────────────── */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--eps-surface-alt) !important;
}
/* bg-light utilise déjà var(--eps-surface) via app.css → OK */

/* ── En-têtes de card forcés blancs dans les templates ────── */
[data-bs-theme="dark"] .card-header {
    background-color: rgba(255,255,255,.04) !important;
    border-bottom-color: var(--eps-border) !important;
}
[data-bs-theme="dark"] .card-footer {
    background-color: rgba(255,255,255,.04) !important;
    border-top-color:  var(--eps-border) !important;
}

/* ── Tool cards forcées blanches ──────────────────────────── */
[data-bs-theme="dark"] .tool-card {
    background: var(--eps-surface-alt) !important;
    border-color: var(--eps-border) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .table {
    --bs-table-border-color: var(--eps-border);
    --bs-table-color:        var(--eps-text);
    --bs-table-striped-color: var(--eps-text);
    --bs-table-hover-color:  var(--eps-text);
}
[data-bs-theme="dark"] .table-light {
    --bs-table-bg:           rgba(255,255,255,.04);
    --bs-table-striped-bg:   rgba(255,255,255,.03);
    --bs-table-hover-bg:     rgba(255,255,255,.06);
    --bs-table-color:        var(--eps-text);
    --bs-table-border-color: var(--eps-border);
}
[data-bs-theme="dark"] .table-warning {
    --bs-table-color:        var(--eps-text);
    --bs-table-bg:           rgba(245,184,0,.13);
    --bs-table-border-color: rgba(245,184,0,.22);
    --bs-table-striped-color: var(--eps-text);
    --bs-table-hover-color:  var(--eps-text);
    --bs-table-hover-bg:     rgba(245,184,0,.18);
}
[data-bs-theme="dark"] .table-danger {
    --bs-table-color:        var(--eps-text);
    --bs-table-bg:           rgba(220,53,69,.13);
    --bs-table-border-color: rgba(220,53,69,.22);
    --bs-table-striped-color: var(--eps-text);
    --bs-table-hover-color:  var(--eps-text);
    --bs-table-hover-bg:     rgba(220,53,69,.18);
}

/* ── Utilitaires texte/lien ───────────────────────────────── */
[data-bs-theme="dark"] .text-dark   { color: var(--eps-text) !important; }
[data-bs-theme="dark"] .link-dark   { color: var(--eps-text) !important; }
[data-bs-theme="dark"] .link-dark:hover { color: var(--bs-link-hover-color) !important; }

/* ── Dialog natif ─────────────────────────────────────────── */
[data-bs-theme="dark"] dialog.app-dialog {
    background: var(--eps-surface-alt);
    color: var(--eps-text);
}
[data-bs-theme="dark"] #dlg-msg { color: var(--eps-text-muted); }

/* ── Tinted icon backgrounds (color-mix avec white) ──────── */
[data-bs-theme="dark"] .icon-tinted {
    background: rgba(15,158,142,.18) !important;
}

/* ── Progress bar label visibility ───────────────────────── */
[data-bs-theme="dark"] .progress {
    background-color: rgba(255,255,255,.1);
}

/* ── form-switch dans la navbar ───────────────────────────── */
.navbar-eps .form-check-input {
    background-color: rgba(255,255,255,.25);
    border-color:     rgba(255,255,255,.35);
}
.navbar-eps .form-check-input:checked {
    background-color: var(--eps-teal);
    border-color:     var(--eps-teal);
}

/* ── Surfaces tintées hardcodées → adaptatif dark ─────────── */

/* Teal clair (#e6f7f5) → tint sombre */
[data-bs-theme="dark"] [style*="background:#e6f7f5"] {
    background: rgba(15,158,142,.16) !important;
    border-color: rgba(15,158,142,.35) !important;
}
/* Texte teal foncé (#0a7468) → teal clair lisible */
[data-bs-theme="dark"] [style*="color:#0a7468"] {
    color: #3ecfc0 !important;
}

/* Rouge clair (#fff5f5, #fecaca borders) → tint sombre */
[data-bs-theme="dark"] [style*="background:#fff5f5"] {
    background: rgba(220,53,69,.12) !important;
    border-color: rgba(220,53,69,.3) !important;
}
/* Texte rouge foncé (#842029, #c0392b) → rouge lisible */
[data-bs-theme="dark"] [style*="color:#842029"],
[data-bs-theme="dark"] [style*="color:#c0392b"] {
    color: #ea868f !important;
}

/* Or clair (#fffbea) → tint sombre */
[data-bs-theme="dark"] [style*="background:#fffbea"] {
    background: rgba(245,184,0,.08) !important;
}

/* Bleu clair (#eff6ff) → tint sombre */
[data-bs-theme="dark"] [style*="background:#eff6ff"] {
    background: rgba(13,110,253,.1) !important;
}

/* Texte navy standalone (pas sur fond coloré) ─────────────── */
/* Exclut les badges gold (background:#f5b800;color:#1a2b3a) qui restent OK */
[data-bs-theme="dark"] [style*="color:#1a2b3a"]:not([style*="background"]) {
    color: var(--eps-text) !important;
}

/* ── Lien "Voir le résumé" et spans de section ────────────── */
[data-bs-theme="dark"] .fw-bold.fs-4,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: var(--bs-body-color);
}

/* ── Cards Bootstrap (bg-body-tertiary → adapte correctement) */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25) !important;
}

/* ── Badges Bootstrap sur fond clair ─────────────────────── */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: rgba(255,255,255,.12) !important;
    color: var(--eps-text) !important;
}
[data-bs-theme="dark"] .bg-light.text-dark {
    background-color: rgba(255,255,255,.08) !important;
    color: var(--eps-text) !important;
}

/* ── Alertes ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .alert {
    border-color: rgba(255,255,255,.1);
}

/* ── Accordion ───────────────────────────────────────────── */
[data-bs-theme="dark"] .accordion-button {
    background-color: var(--eps-surface-alt);
    color: var(--eps-text);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(15,158,142,.12);
    color: var(--eps-teal);
}
[data-bs-theme="dark"] .accordion-item {
    background-color: var(--eps-surface-alt);
    border-color: var(--eps-border);
}

/* ── Dropdown menu ───────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--eps-surface-alt);
    --bs-dropdown-border-color: var(--eps-border);
    --bs-dropdown-link-color: var(--eps-text);
    --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
    --bs-dropdown-divider-bg: var(--eps-border);
}

/* ── Inputs / Selects ────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--eps-surface-alt);
    border-color: var(--eps-border);
    color: var(--eps-text);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--eps-text-muted);
}
[data-bs-theme="dark"] .input-group-text {
    background-color: rgba(255,255,255,.06);
    border-color: var(--eps-border);
    color: var(--eps-text-muted);
}

/* ── Btn outline secondary ───────────────────────────────── */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:        var(--eps-text-muted);
    --bs-btn-border-color: var(--eps-border);
    --bs-btn-hover-bg:     rgba(255,255,255,.08);
    --bs-btn-hover-color:  var(--eps-text);
    --bs-btn-active-bg:    rgba(255,255,255,.12);
}

/* ── Tabs ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--eps-border);
    --bs-nav-tabs-link-active-bg: var(--eps-surface-alt);
    --bs-nav-tabs-link-active-color: var(--eps-text);
    --bs-nav-tabs-link-active-border-color: var(--eps-border) var(--eps-border) var(--eps-surface-alt);
}
[data-bs-theme="dark"] .nav-link {
    color: var(--eps-text-muted);
}
[data-bs-theme="dark"] .nav-link:hover {
    color: var(--eps-text);
}

/* ── Pagination ──────────────────────────────────────────── */
[data-bs-theme="dark"] .page-link {
    background-color: var(--eps-surface-alt);
    border-color: var(--eps-border);
    color: var(--eps-text);
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--eps-surface);
    color: var(--eps-text-muted);
}

/* ── Modal ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--eps-surface-alt);
    color: var(--eps-text);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--eps-border);
}

/* ── bg-warning / bg-info : le fond reste clair → texte toujours sombre ── */
[data-bs-theme="dark"] .bg-warning { color: #1a2b3a !important; }
[data-bs-theme="dark"] .bg-info    { color: #1a2b3a !important; }

/* ── Tirage au sort : chips pool & tirés ────────────────────────────── */
.tirage-pool-item {
    background: #f8fffe;
    border: 1px solid #d0f0eb;
}
[data-bs-theme="dark"] .tirage-pool-item {
    background: rgba(15,158,142,.1);
    border-color: rgba(15,158,142,.3);
}
.tirage-pool-inapt { opacity: .45; }
.tirage-drawn-item {
    background: #f8f9fa;
    border: 1px solid #e4e4e4;
}
[data-bs-theme="dark"] .tirage-drawn-item {
    background: rgba(255,255,255,.06);
    border-color: var(--eps-border);
}
.tirage-drawn-first {
    background: #e6f7f5;
    border: 1px solid #0f9e8e;
}
[data-bs-theme="dark"] .tirage-drawn-first {
    background: rgba(15,158,142,.18);
    border-color: var(--eps-teal);
}
@media (min-width: 768px) {
    .tools-menu { min-width: 460px !important; columns: 2; column-gap: 0; }
}