/* ============================================================
   ASMAS — Association Sportive Marocaine de Snooker
   Design system « Light Minimal »

   Surfaces claires, texte quasi-noir, une seule couleur d'action
   (vert snooker). L'or est réservé aux distinctions (podium,
   records) et les panneaux sombres aux blocs de mise en avant.

   Ce fichier se pose PAR-DESSUS Bootstrap 5 : les classes
   existantes (.card, .btn-warning, .text-warning, .bg-dark…)
   sont redéfinies, le HTML des pages n'a pas besoin de changer.
   ============================================================ */

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

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
    /* Surfaces */
    --bg:            #F7F8F7;
    --surface:       #FFFFFF;
    --surface-2:     #F1F3F1;
    --surface-3:     #E9ECE9;
    --border:        #E4E7E4;
    --border-strong: #D2D8D3;

    /* Encre */
    /* Encre — les niveaux 2 et 3 tiennent le ratio AA (4.5:1)
       aussi bien sur --surface que sur --bg. */
    --ink:      #0B120E;
    --ink-2:    #39443D;
    --ink-3:    #63706A;
    --ink-4:    #7C8880;

    /* Accent principal — vert snooker */
    --green:      #12703A;
    --green-600:  #0D5A2D;
    --green-700:  #094523;
    --green-100:  #D6EADE;
    --green-50:   #EDF6F1;

    /* Or — distinctions uniquement */
    --gold:       #A8781F;   /* lisible sur fond clair */
    --gold-lite:  #E2B45A;   /* sur fond sombre */
    --gold-50:    #FBF3E3;

    /* Rouge */
    --red:        #B3242A;
    --red-50:     #FBECEC;

    /* Panneau sombre (blocs de mise en avant) */
    --dark:       #101512;
    --dark-2:     #1A211D;
    --dark-line:  rgba(255, 255, 255, 0.10);

    /* Élévation — volontairement discrète */
    --sh-1: 0 1px 2px rgba(11,18,14,.05), 0 1px 3px rgba(11,18,14,.04);
    --sh-2: 0 2px 4px rgba(11,18,14,.04), 0 8px 20px rgba(11,18,14,.06);
    --sh-3: 0 12px 40px rgba(11,18,14,.10);

    /* Rayons */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-xl: 22px;

    --ease: cubic-bezier(.2, .7, .3, 1);

    /* Alias Bootstrap */
    --bs-warning: var(--gold);
    --bs-primary: var(--green);
}

/* ------------------------------------------------------------
   2. Base
   ------------------------------------------------------------ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.18;
}
.display-1, .display-2, .display-3, .display-4 { font-weight: 800; letter-spacing: -0.035em; }
.display-5, .display-6 { font-weight: 800 !important; letter-spacing: -0.028em; }

.lead { font-size: 1.075rem; color: var(--ink-3); font-weight: 400; }
.small, small { font-size: 0.825rem; }

a { color: var(--green); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--green-600); }

hr { border-color: var(--border); opacity: 1; }

/* Chiffres alignés (scores, statistiques) */
.stat-number, .match-score, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6, table td, table th {
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--green-100); color: var(--green-700); }

/* ------------------------------------------------------------
   3. Couleurs utilitaires
   ------------------------------------------------------------ */
.text-muted     { color: var(--ink-3) !important; }
.text-gold      { color: var(--gold) !important; }
.text-warning   { color: var(--gold) !important; }
.text-snookix-green,
.text-asmas-green,
.text-success   { color: var(--green) !important; }
.text-danger    { color: var(--red) !important; }
.text-dark      { color: var(--ink) !important; }
.text-primary   { color: var(--green) !important; }

.border-gold    { border-color: var(--gold) !important; }
.max-w-700      { max-width: 700px; }
.letter-spacing-2 { letter-spacing: .12em; }
.z-1            { z-index: 1; }

.bg-snookix-green,
.bg-asmas-green, .bg-felt { background: var(--green) !important; color: #fff !important; }
.bg-light  { background-color: var(--surface-2) !important; }
.bg-white  { background-color: var(--surface) !important; }

/* Sur fond sombre, l'or reprend sa version claire */
.bg-dark .text-warning, .bg-dark .text-gold,
footer .text-warning,   footer .text-gold,
.navbar .text-warning,  .panel-dark .text-warning,
.bg-felt .text-warning, .bg-asmas-green .text-warning, .bg-snookix-green .text-warning { color: var(--gold-lite) !important; }

.bg-dark .text-muted, footer .text-muted, .panel-dark .text-muted {
    color: rgba(255,255,255,.55) !important;
}
.bg-dark .text-success, .panel-dark .text-success { color: #6FCF97 !important; }
.bg-dark .text-danger,  .panel-dark .text-danger  { color: #F08A8E !important; }
.bg-dark a:hover, footer a:hover { color: var(--gold-lite) !important; }

/* Filet décoratif */
.snookix-accent,
.asmas-accent {
    width: 44px; height: 3px;
    background: var(--green);
    border-radius: 999px;
    margin: 12px auto;
}

.hover-gold:hover { color: var(--gold) !important; }
footer .hover-gold:hover, .bg-dark .hover-gold:hover { color: var(--gold-lite) !important; }

/* ------------------------------------------------------------
   4. Navbar — claire, sticky, discrète
   ------------------------------------------------------------ */
.navbar {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: 0;
    transition: box-shadow .25s var(--ease);
}
.navbar.is-scrolled { box-shadow: var(--sh-1); }

.navbar-brand {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.navbar-brand img {
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: transform .25s var(--ease);
}
.navbar-brand:hover img { transform: scale(1.04); }

.navbar-brand .brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--ink) !important;
}
.navbar-brand .brand-sub {
    display: block;
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
    margin-top: 3px;
}

.navbar .nav-link {
    position: relative;
    color: var(--ink-3) !important;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 1.35rem .85rem !important;
    transition: color .18s var(--ease);
}
.navbar .nav-link:hover { color: var(--ink) !important; }

.navbar .nav-link.active { color: var(--ink) !important; font-weight: 600; }
.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: .85rem; right: .85rem; bottom: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s var(--ease);
}
.navbar .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler { padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230B120E' stroke-linecap='round' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* Pastille « nouvelles actualités » */
.nav-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    vertical-align: super;
    margin-left: 4px;
}

/* ------------------------------------------------------------
   5. Boutons
   ------------------------------------------------------------ */
.btn {
    font-weight: 600;
    border-radius: var(--r-sm);
    padding: .55rem 1.1rem;
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none !important;
    border-width: 1px;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; box-shadow: none; }
.btn-lg { padding: .8rem 1.6rem; font-size: .975rem; border-radius: var(--r); }
.btn-sm { padding: .35rem .8rem; font-size: .82rem; }

/* Action principale (classe historique du projet) */
.btn-warning, .btn-primary, .btn-success {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.btn-warning:hover, .btn-primary:hover, .btn-success:hover,
.btn-warning:focus, .btn-primary:focus, .btn-success:focus {
    background: var(--green-600);
    border-color: var(--green-600);
    color: #fff;
    box-shadow: 0 4px 14px rgba(18,112,58,.22);
}

.btn-outline-warning, .btn-outline-primary, .btn-outline-success {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--ink);
}
.btn-outline-warning:hover, .btn-outline-primary:hover, .btn-outline-success:hover {
    background: var(--green-50);
    border-color: var(--green);
    color: var(--green-700);
}

.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }

.btn-outline-dark, .btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--ink-2);
    background: transparent;
}
.btn-outline-dark:hover, .btn-outline-secondary:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #941C22; border-color: #941C22; color: #fff; }

.btn-outline-danger { border-color: var(--border-strong); color: var(--red); background: transparent; }
.btn-outline-danger:hover { background: var(--red-50); border-color: var(--red); color: var(--red); }

.btn-light { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-light:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }

/* Boutons posés sur un panneau sombre */
.bg-dark .btn-outline-light, .panel-dark .btn-outline-light, footer .btn-outline-light {
    border-color: var(--dark-line);
    color: #fff;
}
.bg-dark .btn-outline-light:hover, .panel-dark .btn-outline-light:hover, footer .btn-outline-light:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
.panel-dark .btn-outline-warning, .bg-dark .btn-outline-warning {
    border-color: rgba(255,255,255,.22);
    color: #fff;
}
.panel-dark .btn-outline-warning:hover, .bg-dark .btn-outline-warning:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

/* ------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--sh-1) !important; }
.card:hover { box-shadow: var(--sh-2) !important; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--ink);
    padding: 1rem 1.25rem;
}
.card-header.bg-dark, .card-header.bg-warning, .card-header.bg-success, .card-header.bg-primary {
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0 !important;
}
.card-header.bg-warning { background: var(--surface-2) !important; color: var(--ink) !important; }
.card-header.bg-primary { background: var(--green) !important; color: #fff !important; }
.card-footer { background: transparent; border-top: 1px solid var(--border); }

/* Panneaux sombres : blocs de mise en avant sur page claire */
.bg-dark, .card.bg-dark, .panel-dark {
    background: var(--dark) !important;
    color: #fff;
    border-color: rgba(255,255,255,.08) !important;
}
.card.bg-dark:hover { box-shadow: var(--sh-3) !important; }
.bg-dark .card-header, .panel-dark .card-header { border-bottom-color: var(--dark-line); color: #fff; }
.bg-black { background: var(--dark) !important; }

/* Tuiles colorées (statistiques) — aplaties, sans dégradé */
.card.bg-success, .stat-card.bg-success { background: var(--green) !important; color: #fff; border-color: transparent !important; }
.card.bg-danger,  .stat-card.bg-danger  { background: var(--red)   !important; color: #fff; border-color: transparent !important; }
.card.bg-warning, .stat-card.bg-warning { background: var(--gold)  !important; color: #fff; border-color: transparent !important; }
.card.bg-primary, .stat-card.bg-primary { background: var(--green) !important; color: #fff; border-color: transparent !important; }

/* Variantes du projet */
.feature-card, .news-card, .tournoi-card, .dashboard-widget, .stat-card {
    border-radius: var(--r-lg) !important;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.feature-card:hover, .news-card:hover, .dashboard-widget:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong) !important;
    box-shadow: var(--sh-2) !important;
}
.tournoi-card { border-left: 3px solid var(--green) !important; }

.feature-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-50);
    color: var(--green);
    border: none;
    border-radius: var(--r-sm);
    font-size: 1.2rem;
}
.feature-card:hover .feature-icon { background: var(--green); color: #fff !important; }
.feature-card:hover .feature-icon i { color: #fff !important; }

.news-card { overflow: hidden; }
.news-card img { transition: transform .5s var(--ease); }
.news-card:hover img { transform: scale(1.03); }

.stat-card .stat-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--green-50);
    color: var(--green);
    font-size: 1.05rem;
}
.stat-card.bg-dark .stat-icon, .stat-card.bg-success .stat-icon,
.stat-card.bg-danger .stat-icon, .stat-card.bg-warning .stat-icon,
.stat-card.bg-primary .stat-icon {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.stat-card .stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: inherit;
}
.dashboard-widget { padding: 1.5rem; }

.match-score { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

/* ------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------ */
.hero-section {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    min-height: auto;
    padding: 4.5rem 0 4rem;
}
/* Voile vert très léger + grille discrète */
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 70% at 78% 12%, rgba(18,112,58,.07) 0%, transparent 60%),
        radial-gradient(50% 60% at 8% 90%, rgba(168,120,31,.05) 0%, transparent 60%);
    pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }

.hero-section h1 { color: var(--ink); }
.hero-section .lead { color: var(--ink-3); }

.hero-badge .badge {
    background: var(--green-50) !important;
    color: var(--green-700) !important;
    border: 1px solid var(--green-100);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: .45rem .9rem;
}

.hero-image-wrapper { position: relative; display: inline-block; }
.hero-img {
    width: 100%;
    max-width: 520px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    box-shadow: var(--sh-3);
}
.hero-glow {
    position: absolute;
    inset: 12% 8%;
    background: radial-gradient(circle, rgba(18,112,58,.16) 0%, transparent 70%);
    filter: blur(48px);
    border-radius: 50%;
    z-index: 0;
}

/* ------------------------------------------------------------
   8. Tableaux
   ------------------------------------------------------------ */
.table {
    --bs-table-bg: transparent;
    color: var(--ink-2);
    border-color: var(--border);
    margin-bottom: 0;
}
.table thead th {
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-3);
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: .8rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr { transition: background-color .15s var(--ease); }
.table-hover tbody tr:hover { background-color: var(--surface-2); }
.table-dark { --bs-table-bg: var(--dark); color: #fff; border-color: var(--dark-line); }
.table-dark thead th { color: rgba(255,255,255,.6); border-bottom-color: var(--dark-line); }
.table-dark tbody td { border-bottom-color: var(--dark-line); }
.table > :not(caption) > * > * { box-shadow: none; }

.table-responsive { border-radius: var(--r-lg); }

/* ------------------------------------------------------------
   9. Formulaires
   ------------------------------------------------------------ */
.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--ink);
    margin-bottom: .35rem;
}
.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: .6rem .8rem;
    font-size: .92rem;
    color: var(--ink);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form-control::placeholder { color: var(--ink-4); }
.form-control:focus, .form-select:focus {
    background: var(--surface);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(18,112,58,.12);
    color: var(--ink);
}
.form-control-lg, .form-select-lg {
    padding: .75rem .95rem;
    font-size: .95rem;
    border-radius: var(--r-sm);
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--ink-3); }
.input-group-text {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--ink-3);
    border-radius: var(--r-sm);
}
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18,112,58,.12); }
.form-text { color: var(--ink-3); font-size: .8rem; }

/* ------------------------------------------------------------
   10. Badges
   ------------------------------------------------------------ */
.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .38em .7em;
    border-radius: 999px;
}
.badge.bg-warning { background: var(--gold-50) !important; color: var(--gold) !important; }
.badge.bg-success { background: var(--green-50) !important; color: var(--green-700) !important; }
.badge.bg-danger  { background: var(--red-50) !important;   color: var(--red) !important; }
.badge.bg-primary { background: var(--green-50) !important; color: var(--green-700) !important; }
.badge.bg-dark    { background: var(--ink) !important;      color: #fff !important; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--ink-2) !important; }
.badge.bg-light   { background: var(--surface-2) !important; color: var(--ink-2) !important; }

/* Sur panneau sombre, les badges restent lisibles */
.bg-dark .badge.bg-warning, .panel-dark .badge.bg-warning, footer .badge.bg-warning {
    background: rgba(226,180,90,.16) !important; color: var(--gold-lite) !important;
}
.bg-dark .badge.bg-success, .panel-dark .badge.bg-success {
    background: rgba(111,207,151,.16) !important; color: #6FCF97 !important;
}

/* ------------------------------------------------------------
   11. Alertes
   ------------------------------------------------------------ */
.alert {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: .85rem 1rem;
    font-size: .9rem;
}
.alert-success { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.alert-danger  { background: var(--red-50);   border-color: #F3D4D5;          color: var(--red); }
.alert-warning { background: var(--gold-50);  border-color: #EFDFBE;          color: var(--gold); }
.alert-info    { background: var(--surface-2);border-color: var(--border);    color: var(--ink-2); }

/* ------------------------------------------------------------
   12. Modales, dropdowns, onglets
   ------------------------------------------------------------ */
.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header { padding: 1.1rem 1.4rem; }
.modal-body   { padding: 1.4rem; }
.modal-backdrop.show { opacity: .35; }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-2);
    padding: .35rem;
}
.dropdown-item { border-radius: var(--r-sm); font-size: .9rem; padding: .5rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }

.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-3);
    font-weight: 500;
    padding: .6rem .9rem;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active {
    color: var(--green);
    background: transparent;
    border-bottom-color: var(--green);
}

.pagination .page-link {
    border: 1px solid var(--border);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    margin: 0 2px;
}
.pagination .page-item.active .page-link { background: var(--green); border-color: var(--green); color: #fff; }

.progress { background: var(--surface-3); border-radius: 999px; height: 6px; }
.progress-bar, .progress-bar.bg-warning { background: var(--green) !important; }

.list-group-item { border-color: var(--border); background: var(--surface); color: var(--ink-2); }

.accordion-item { border-color: var(--border); }
.accordion-button { background: var(--surface); color: var(--ink); font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--green-50); color: var(--green-700); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--border); }

/* ------------------------------------------------------------
   13. Sidebar admin — claire
   ------------------------------------------------------------ */
.admin-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    min-height: calc(100vh - 66px);
    padding: 1.25rem .75rem !important;
}
.admin-sidebar h6 {
    color: var(--ink-4) !important;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: .75rem !important;
}
.admin-sidebar .nav-link {
    color: var(--ink-2);
    padding: .55rem .8rem;
    border-radius: var(--r-sm);
    margin: 2px 0;
    font-size: .9rem;
    font-weight: 500;
    border-left: none;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.admin-sidebar .nav-link:hover { background: var(--surface-2); color: var(--ink); border-left: none; }
.admin-sidebar .nav-link.active {
    background: var(--green-50);
    color: var(--green-700);
    font-weight: 600;
    border-left: none;
}
.admin-sidebar .nav-link i { width: 18px; text-align: center; opacity: .8; }
.admin-sidebar .nav-link.active i { opacity: 1; }

/* ------------------------------------------------------------
   14. Pied de page — clair
   ------------------------------------------------------------ */
footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border);
    color: var(--ink-3) !important;
    margin-top: 4rem;
}
footer h6 {
    color: var(--ink) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}
footer a, footer .text-white-50 { color: var(--ink-3) !important; }
footer a:hover { color: var(--green) !important; }
footer .text-muted, footer p { color: var(--ink-3) !important; }
footer hr { border-color: var(--border); }

/* ------------------------------------------------------------
   15. Sections sombres de mise en avant (ex. « trouver un club »)
   ------------------------------------------------------------ */
.panel-dark {
    background: var(--dark) !important;
    color: #fff;
}
.panel-dark h1, .panel-dark h2, .panel-dark h3,
.panel-dark h4, .panel-dark h5, .panel-dark h6,
.panel-dark .display-5, .panel-dark .display-6 { color: #fff; }
.panel-dark .lead, .panel-dark p { color: rgba(255,255,255,.62); }
.panel-dark .card {
    background: rgba(255,255,255,.045) !important;
    border-color: var(--dark-line) !important;
    color: #fff;
}
.panel-dark .card:hover {
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.2) !important;
}
.panel-dark .card h1, .panel-dark .card h2, .panel-dark .card h3,
.panel-dark .card h4, .panel-dark .card h5, .panel-dark .card h6 { color: #fff; }
.panel-dark .form-control, .panel-dark .form-select {
    background: rgba(255,255,255,.06);
    border-color: var(--dark-line);
    color: #fff;
}
.panel-dark .form-control::placeholder { color: rgba(255,255,255,.4); }
.panel-dark .form-control:focus, .panel-dark .form-select:focus {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.35);
    box-shadow: none;
    color: #fff;
}
.panel-dark .form-select option { background: var(--dark); color: #fff; }
.panel-dark .form-label { color: rgba(255,255,255,.8); }

/* ------------------------------------------------------------
   16. Section « bandeau » claire (alternance de rythme)
   ------------------------------------------------------------ */
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .6rem;
}

/* ------------------------------------------------------------
   17. Animations — sobres
   ------------------------------------------------------------ */
.fade-in  { animation: fadeIn .5s var(--ease) both; }
.slide-up { animation: slideUp .5s var(--ease) both; }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   18. Barre de défilement
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .navbar .nav-link { padding: .7rem .25rem !important; }
    .navbar .nav-link::after { display: none; }
    .navbar-collapse { padding-bottom: 1rem; }
    .admin-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 767.98px) {
    body { font-size: .92rem; }

    /* Une .row en g-5 applique une marge négative de 24px alors que le
       .container ne compense que 12px : sur petit écran cela déborde.
       On ramène la gouttière à la valeur par défaut. */
    .container > .row.g-5,
    .container > .row.gy-5,
    .container > .row.gx-5 { --bs-gutter-x: 1.5rem; }

    .hero-section { padding: 3rem 0 2.5rem; }
    .hero-section h1, .display-3 { font-size: 2.1rem !important; }
    .display-4, .display-5 { font-size: 1.75rem !important; }
    .display-6 { font-size: 1.4rem !important; }
    .lead { font-size: 1rem; }
    .stat-card .stat-number { font-size: 1.5rem; }
    .btn-lg { padding: .7rem 1.2rem; font-size: .92rem; }
    .table thead th, .table tbody td { padding: .65rem .7rem; }
}

@media (max-width: 575.98px) {
    .hero-section h1, .display-3 { font-size: 1.8rem !important; }
    .hero-section .btn-lg { width: 100%; }
    .hero-section .d-flex.gap-3 { flex-direction: column; }
}