/* ============================================================
   ArsNova Place — Styles
   ============================================================

   Fichier unique, volontairement : le projet n'a pas d'étape de
   build, et découper imposerait soit une dizaine de <link> soit un
   artefact généré. Or l'ordre du fichier EST un contrat — la couche
   « Utilitaires » doit rester en dernier pour l'emporter à
   spécificité égale. Un sommaire coûte moins cher qu'un ordre de
   chargement à maintenir ailleurs.

   Pour naviguer : grep -n "nom de section" public/css/style.css

   Sommaire (dans l'ordre du fichier) :
      1. Focus clavier
      2. Mouvement réduit
      3. Layout
      4. Barre d'icônes (colonne fixe gauche)
      5. Bouton toggle panneau
      6. Panneau secondaire contextuel
      7. Contenu principal
      8. Drawer latéral droit
      9. Auth pages
     10. Forms
     11. Fieldsets
     12. Buttons
     13. Modal
     14. Alerts
     15. Page header
     16. Cards
     17. Stats grid (dashboard)
     18. Saison select
     19. Tables
     20. Badges
     21. 2FA code boxes
     22. Toggle password
     23. Filtres
     24. Dropdown
     25. Tableau événements hiérarchique
     26. Responsive
     27. Scope toggle (triple switch)
     28. Widget cards grid
     29. Catalogue des œuvres
     30. Theme picker
     31. Mode toggle (light / dark)
     32. Dark mode overrides
     33. Onboarding
     34. Don cards (association view)
     35. Bottom-sheet modal (association)
     36. Response panel — stepper design
     37. Page de connexion — split-screen avec carrousel
     38. Panneau visuel (carrousel)
     39. Panneau formulaire
     40. Page Référentiels
     41. Formulaire de don unifié
     42. Journal d'activité
     43. Utilitaires
   ============================================================ */

/* ---- Police Inter (auto-hébergée) ----
   Inter v20 est une police variable : un seul fichier couvre les graisses
   400 à 700. Auto-hébergée pour supprimer deux connexions tierces (Google
   Fonts) sur chaque page et éviter toute requête vers un tiers.
   Licence SIL Open Font License 1.1.
   Le sous-ensemble latin-ext n'est téléchargé par le navigateur que si un
   glyphe de sa plage apparaît (noms d'Europe centrale : Dvořák, Janáček…). */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --color-primary: #1a1a2e;
    --color-primary-light: #16213e;
    --color-accent: #e94560;
    --color-accent-hover: #c73e54;
    --color-accent-rgb: 233, 69, 96;   /* même valeur que --color-accent, en composantes */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    --color-bg: #f5f6fa;
    --color-white: #ffffff;
    --color-text: #2c3e50;
    --color-text-light: #7f8c8d;
    --color-border: #dcdde1;
    --color-border-light: #f0f0f0;
    --color-bg-alt: #f0f1f5;
    --color-bg-hover: #eef0f4;
    --color-danger: #e74c3c;
    /* Texte et icônes posés sur un fond saturé ou foncé (--color-primary,
       --color-accent, --color-success…). Ne change PAS en mode sombre :
       --color-white y devient une couleur de surface (#1e1e2a), l'utiliser
       comme couleur de texte donnait un contraste de 1.04:1. */
    --color-on-dark: #ffffff;
    --color-text-lighter: #68737a;  /* 4.5:1 sur --color-bg — #bbb ne donnait que 1.78:1 */
    --iconbar-width: 60px;
    --panel-width: 250px;
    --sidebar-width: 60px;
    /* Rayons. --radius reste le cran par défaut (cartes, champs, boutons).
       50% et les rayons composés (« 6px 0 0 6px ») restent en dur : ils
       décrivent une forme, pas un cran d'échelle. */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Suit --color-accent-rgb : l'anneau de focus change donc avec le thème.
       Opacité volontairement franche — un indicateur de focus doit se voir. */
    --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);

    /* Durées d'animation. Les 46 transitions existantes gardent leur valeur
       littérale (les réécrire changerait le ressenti sans bénéfice) ; ces
       tokens sont la référence pour tout nouveau code. */
    --dur-fast: 0.15s;
    --dur-base: 0.2s;
    --dur-slow: 0.3s;

    /* Échelle d'espacement de référence pour le nouveau code. L'existant mêle
       encore des valeurs hors échelle (6, 10, 14, 20px) héritées d'une UI très
       dense : les migrer déplacerait la mise en page sur les 84 vues, c'est un
       chantier à mener écran par écran, pas par remplacement automatique. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Échelle typographique. Exprimée en rem sur une racine laissée à la valeur
       du navigateur (16px) : le réglage « taille du texte » de l'utilisateur est
       donc respecté, ce que l'ancien `html { font-size: 12px }` écrasait.
       Le commentaire donne le rendu par défaut. */
    --fs-2xs: 0.625rem;   /* 10px */
    --fs-xs: 0.6875rem;   /* 11px */
    --fs-sm: 0.75rem;     /* 12px — taille de base de l'interface */
    --fs-md: 0.8125rem;   /* 13px */
    --fs-lg: 0.875rem;    /* 14px */
    --fs-xl: 1.125rem;    /* 18px */
    --fs-2xl: 1.25rem;    /* 20px */
    --fs-3xl: 1.5rem;     /* 24px */
    --fs-4xl: 1.875rem;   /* 30px */
    --fs-5xl: 2.25rem;    /* 36px */

    /* Points de rupture — 5 paliers, et rien d'autre :
         600px   mobile
         768px   tablette (bascule du layout applicatif : iconbar horizontale)
        1024px   petit écran / portable
        1280px   large
        1600px   très large
       CSS n'accepte pas les variables dans @media : ces valeurs restent donc
       écrites en clair, mais toute nouvelle requête doit reprendre un palier
       de cette liste. Les @media vivent à côté du composant qu'ils modifient,
       pas regroupés en fin de fichier. */

    /* Échelle d'empilement. Toute valeur de z-index qui sort d'un composant
       passe par un de ces paliers. Les petites valeurs locales (0 à 10) restent
       en dur : elles n'ont de sens qu'à l'intérieur de leur propre contexte. */
    --z-panel: 90;      /* panneau latéral secondaire */
    --z-sticky: 100;    /* barre d'icônes, en-têtes collants */
    --z-dropdown: 300;  /* menus déroulants, listes d'autocomplétion */
    --z-overlay: 500;   /* voile d'un drawer */
    --z-drawer: 510;    /* drawer latéral droit */
    --z-sheet: 900;     /* bottom-sheet (espace association) */
    --z-modal: 1000;    /* modales génériques — au-dessus du bottom-sheet */
    --z-tooltip: 1100;  /* infobulles — toujours au sommet */

    --status-projection-bg: #dfe6e9;
    --status-projection-text: #636e72;
    --status-envoye-bg: #74b9ff;
    --status-envoye-text: #0a3d62;
    --status-accepte-bg: #55efc4;
    --status-accepte-text: #00695c;
    --status-refuse-bg: #fab1a0;
    --status-refuse-text: #c0392b;
    --status-annule-bg: #ffeaa7;
    --status-annule-text: #856404;
    --status-expire-bg: #b2bec3;
    --status-expire-text: #2d3436;

    /* Alertes — fond / texte / bordure. Ces trois familles pilotent aussi
       .db-alert, .ac-titre mark et .ac-badge : redéfinir les variables en mode
       sombre suffit, aucun override de règle n'est nécessaire. */
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --alert-info-border: #bee5eb;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #856404;
    --alert-warning-border: #ffc107;
    --alert-error-bg: #f8d7da;
    --alert-error-text: #721c24;
    --alert-error-border: #f5c6cb;
}

html.theme-opera {
    --color-primary: #1b0a2e;
    --color-primary-light: #2d1650;
    --color-accent: #9b59b6;
    --color-accent-rgb: 155, 89, 182;
    --color-accent-hover: #8e44ad;
}

html.theme-ocean {
    --color-primary: #0a1628;
    --color-primary-light: #102040;
    --color-accent: #2980b9;
    --color-accent-rgb: 41, 128, 185;
    --color-accent-hover: #1f6fa5;
}

html.theme-foret {
    --color-primary: #0d1f0d;
    --color-primary-light: #1a331a;
    --color-accent: #27ae60;
    --color-accent-rgb: 39, 174, 96;
    --color-accent-hover: #1e8449;
}

html.theme-crepuscule {
    --color-primary: #2c1810;
    --color-primary-light: #3d2218;
    --color-accent: #e67e22;
    --color-accent-rgb: 230, 126, 34;
    --color-accent-hover: #d35400;
}

html.theme-ardoise {
    --color-primary: #1c1c1c;
    --color-primary-light: #2d2d2d;
    --color-accent: #636e72;
    --color-accent-rgb: 99, 110, 114;
    --color-accent-hover: #535c60;
}

html.mode-dark {
    --color-bg: #121218;
    --color-white: #1e1e2a;
    --color-text: #e0e0e8;
    --color-text-light: #9a9ab0;
    --color-border: #2e2e40;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --color-surface-alt: #26263a;
    --color-surface-hover: #2a2a3e;
    --color-text-lighter: #8e8ea6;

    --alert-success-bg: #1a3a2a;
    --alert-success-text: #6ddb9a;
    --alert-success-border: #2a5a3a;
    --alert-info-bg: #1a2a3a;
    --alert-info-text: #70c0d0;
    --alert-info-border: #2a4a5a;
    --alert-warning-bg: #3a3018;
    --alert-warning-text: #f0d070;
    --alert-warning-border: #5a4a28;
    --alert-error-bg: #3a1a1a;
    --alert-error-text: #f5a0a0;
    --alert-error-border: #5a2a2a;
}

html:not(.mode-dark) {
    --color-surface-alt: #eaecf3;
    --color-surface-hover: #e0e2ea;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* La racine garde la taille définie par le navigateur (16px par défaut, mais
   ajustable par l'utilisateur) : c'est ce réglage que l'ancien
   `html { font-size: 12px }` neutralisait. La densité de l'interface est
   portée par --fs-sm sur le body, pas par un écrasement de la racine. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-sm);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

a { color: var(--color-accent); text-decoration: none; }

/* Le soulignement au survol est réservé aux liens rédactionnels. Ailleurs
   (navigation, cartes, lignes de tableau, boutons) le lien est une commande :
   son affordance vient du composant, pas du soulignement. Cette règle globale
   forçait auparavant chaque composant à se défendre à coups de.
   `:where()` neutralise la spécificité du sélecteur de contexte. */
:where(.alert, .prose, .form-hint, .empty-state, .auth-card) a:hover {
    text-decoration: underline;
}

/* ---- Focus clavier ---- */

/* Anneau de focus unifié pour tout ce qui est interactif hors champs de
   formulaire (ceux-ci ont déjà leur propre traitement border + box-shadow).
   :focus-visible ne se déclenche qu'au clavier : la souris n'affiche rien. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Sur les fonds sombres (barre d'icônes, en-têtes de tableau événements),
   l'accent du thème peut être trop proche du fond : on force le blanc. */
.iconbar a:focus-visible,
.iconbar button:focus-visible,
.evt-header a:focus-visible,
.evt-header button:focus-visible {
    outline-color: var(--color-on-dark);
}

/* ---- Mouvement réduit ---- */

/* Respecte le réglage système « réduire les animations ». On neutralise durées
   et défilement animé sans supprimer les transitions (0.01ms garde les
   callbacks transitionend, dont dépendent certains drawers). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Layout ---- */

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* -- Barre d'icônes (colonne fixe gauche) -- */

.iconbar {
    width: var(--iconbar-width);
    background: var(--color-primary);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: var(--z-sticky);
}

.iconbar-top,
.iconbar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconbar-top { padding-top: 8px; }
.iconbar-bottom { padding-bottom: 12px; }

.iconbar-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--color-accent);
    color: var(--color-on-dark);
    font-size: var(--fs-3xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    text-decoration: none;
    transition: transform 0.15s;
}

.iconbar-logo:hover {
    transform: scale(1.08);
    text-decoration: none;
}

.iconbar-sep {
    width: 28px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 6px 0;
}

.iconbar-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s;
    margin: 2px 0;
    text-decoration: none;
    position: relative;
}

.iconbar-item svg {
    width: 22px;
    height: 22px;
}

.iconbar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.iconbar-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-on-dark);
}

.iconbar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 0 3px 3px 0;
}

/* Tooltip au survol */
.iconbar-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-primary);
    color: var(--color-on-dark);
    padding: 5px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: var(--z-tooltip);
}

/* -- Bouton toggle panneau -- */

.panel-toggle {
    position: fixed;
    top: 16px;
    left: var(--iconbar-width);
    z-index: calc(var(--z-sticky) + 1);
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: var(--shadow);
    transition: left 0.25s ease;
    transform: translateX(-50%);
}

.panel-toggle svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-light);
    transition: transform 0.25s ease;
}

.panel-toggle:hover {
    background: var(--color-bg);
}

.app-layout.has-panel .panel-toggle {
    left: calc(var(--iconbar-width) + var(--panel-width));
}

.app-layout.has-panel .panel-toggle svg {
    transform: rotate(180deg);
}

.app-layout[data-has-panel="0"] .panel-toggle,
.app-layout[data-has-panel="0"] .sidebar-panel {
    display: none !important;
}

/* -- Panneau secondaire contextuel -- */

.sidebar-panel {
    width: var(--panel-width);
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: var(--iconbar-width);
    height: 100vh;
    overflow-y: auto;
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(-1 * var(--panel-width)));
    transition: transform 0.25s ease;
}

.app-layout.has-panel .sidebar-panel {
    transform: translateX(0);
}

.panel-footer {
    padding: 16px;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.panel-user-name {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.panel-user-role {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.panel-content {
    flex: 1;
    padding: 16px 8px 16px 16px;
}

.panel-section-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    margin: 16px 0 8px;
    font-weight: 500;
}

.panel-section-title:first-child {
    margin-top: 0;
}

.panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: 400;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.panel-link:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.panel-link.active {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
    font-weight: 500;
}

.panel-badge {
    background: var(--color-bg);
    color: var(--color-text-light);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--radius-lg);
    min-width: 22px;
    text-align: center;
}

.panel-link.active .panel-badge {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
}

.panel-show-more {
    color: var(--color-accent);
    padding: 4px 8px;
    justify-content: flex-start;
}

/* -- Contenu principal -- */

.main-content {
    margin-left: var(--iconbar-width);
    flex: 1;
    padding: 32px;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}

.app-layout.has-panel .main-content {
    margin-left: calc(var(--iconbar-width) + var(--panel-width));
}

/* ---- Drawer latéral droit ---- */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.drawer.open {
    transform: translateX(0);
}

.drawer-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.drawer-close,
.drawer-back {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    transition: background 0.15s, color 0.15s;
}

.drawer-close:hover,
.drawer-back:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.drawer-close svg,
.drawer-back svg {
    width: 18px;
    height: 18px;
}


.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.drawer-body .drawer-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
}

.drawer-body .drawer-header h3 {
    font-size: var(--fs-sm);
    font-weight: 400;
    margin: 0;
    color: var(--color-text);
}

.drawer-meta {
    color: var(--color-text-light);
    width: 100%;
    order: 10;
}

.drawer-header .drawer-fullpage-link {
    width: 100%;
    order: 11;
}

.drawer-section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
}

.drawer-section:last-child {
    border-bottom: none;
}

.drawer-section h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-count {
    background: var(--color-bg);
    color: var(--color-text-light);
    padding: 1px 8px;
    border-radius: var(--radius-lg);
    font-weight: 400;
}

.drawer-field {
    margin-bottom: 10px;
}

.drawer-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}

.drawer-label {
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.drawer-fullpage-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
    padding: 4px 0;
}

.drawer-fullpage-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.drawer-fullpage-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.drawer-value {
    color: var(--color-text);
}

.drawer-text {
    color: var(--color-text);
    line-height: 1.5;
}

.drawer-empty {
    font-weight: 400;
    color: var(--color-text-light);
    font-style: italic;
}

.drawer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-list-item {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.drawer-list-item:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.drawer-item-past {
    opacity: 0.5;
}

.drawer-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-item-date {
    font-weight: 500;
    color: var(--color-text);
}

.drawer-item-sub {
    display: block;
    color: var(--color-text-light);

}

.drawer-places {
    margin-top: 4px;
}

.drawer-places-bar .progress-bar-mini {
    margin-bottom: 6px;
}

.drawer-places-text {
    color: var(--color-text);
}

.drawer-actions {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.drawer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--color-text-light);
}

/* ---- Auth pages ---- */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-primary);
}

.auth-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.auth-card {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 40px 32px;
    box-shadow: var(--shadow);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header .logo {
    color: var(--color-primary);
}

.auth-link {
    text-align: center;
    margin-top: 16px;
}

/* ---- Forms ---- */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s;
}

.form-group select {
    height: 42px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ---- Fieldsets ---- */

fieldset {
    border: none;
    padding: 0;
    margin: 0 0 28px 0;
}

fieldset:last-of-type {
    margin-bottom: 0;
}

fieldset legend {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

fieldset.fieldset-danger legend {
    color: var(--color-error);
}

/* ---- Buttons ---- */

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-on-dark);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
}

.btn-secondary {
    background: var(--color-primary-light);
    color: var(--color-on-dark);
}

.btn-secondary:hover { opacity: 0.9; text-decoration: none; }

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-text);
    text-decoration: none;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-icon:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

.btn-success {
    background: var(--color-success);
    color: var(--color-on-dark);
}

.btn-sm { padding: 6px 14px; }
.btn-block { display: block; width: 100%; }

/* ---- Modal ---- */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-box {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
}

.modal-box h3 {
    margin-bottom: 12px;
    font-size: var(--fs-sm);
    font-weight: 400;
}

.modal-box p {
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-list {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 14px;
}

.modal-list strong {
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-light);
}

.modal-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list li {
    padding: 3px 0;
    color: var(--color-text);
}

.modal-list li::before {
    content: "•";
    color: var(--color-accent);
    margin-right: 8px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---- Alerts ---- */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border: 1px solid var(--alert-success-border); }
.alert-error   { background: var(--alert-error-bg);   color: var(--alert-error-text);   border: 1px solid var(--alert-error-border); }

/* ---- Page header ---- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-text);
}

h2 {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
}

h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-light);
    text-decoration: none;
    margin-top: 4px;
}

.back-link:hover {
    color: var(--color-accent);
}

.back-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ---- Cards ---- */

.card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ---- Stats grid (dashboard) ---- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 110px;
}
.stat-card .stat-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.stat-card .stat-icon {
    width: 13px;
    height: 13px;
    stroke: var(--color-text-light);
    flex-shrink: 0;
}
.stat-card .stat-label {
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.stat-card .stat-value {
    font-size: var(--fs-5xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: auto 0;
    line-height: 1;
}
.stat-card .stat-note {
    position: absolute;
    bottom: 8px;
    right: 10px;
    cursor: help;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.stat-card .stat-note svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-border);
    stroke-width: 2;
}
.stat-card .stat-note:hover {
    opacity: 1;
}
.stat-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    white-space: normal;
    z-index: var(--z-tooltip);
    pointer-events: none;
}
.stat-card .stat-note:hover .stat-tooltip {
    display: block;
}
.stat-card-warning {
    border-left: 4px solid var(--color-warning);
}
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Saison select ---- */

.saison-select {
    padding: 8px 32px 8px 14px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.saison-select:hover {
    border-color: var(--color-primary);
}
.saison-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.dashboard-header {
    background: var(--color-white);
    margin: -32px -32px 24px;
    padding: 24px 32px 20px;
    border-bottom: 1px solid var(--color-border);
}
.dashboard-header .page-header {
    margin-bottom: 16px;
}
.dashboard-header .scope-toggle {
    margin-bottom: 0;
}
.dashboard-header .dashboard-subtabs,
.dashboard-header .dashboard-chips {
    margin-bottom: 0;
    margin-top: 16px;
}

.dashboard-subtabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.dashboard-subtab {
    padding: 6px 16px;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: all 0.2s;
}

.dashboard-subtab:hover {
    color: var(--color-text);
    background: var(--color-white);
    border-color: var(--color-text-light);
    text-decoration: none;
}

.dashboard-subtab.active {
    color: var(--color-on-dark);
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

.dashboard-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
.dashboard-chip {
    padding: 6px 16px;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    white-space: nowrap;
}
.dashboard-chip:hover {
    color: var(--color-text);
    background: var(--color-white);
    border-color: var(--color-text-light);
    text-decoration: none;
}
.dashboard-chip.active {
    color: var(--color-on-dark);
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

.dashboard-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.table-simple {
    width: 100%;
    border-collapse: collapse;
}

.table-simple th,
.table-simple td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.table-simple th {
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-muted {
    color: var(--color-text-light);
    padding: 12px 0;
}

.db-section {
    margin-bottom: 32px;
}
.db-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.01em;
}
.db-section-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--color-primary);
}
.db-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--alert-warning-bg);
    border: 1px solid var(--alert-warning-border);
    border-radius: var(--radius-md);
    font-weight: 500;
    color: var(--alert-warning-text);
}

/* ---- Tables ---- */

.table-container {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    text-align: left;
    padding: 10px 10px;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg);
}

table td {
    padding: 10px 10px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--color-border);
}

table tr:hover td {
    background: #F5F6FA;
}

table .actions {
    white-space: nowrap;
    width: 1%;
    text-align: center;
    vertical-align: middle;
    padding-left: 4px;
    padding-right: 4px;
}

table .actions a,
table .actions button {
    margin-right: 4px;
}
table .actions a:last-child,
table .actions button:last-child {
    margin-right: 0;
}

/* ---- Badges ---- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-xl);
    font-weight: 400;
}

.badge-projection  { background: var(--status-projection-bg); color: var(--status-projection-text); }
.badge-envoye      { background: var(--status-envoye-bg); color: var(--status-envoye-text); }
.badge-accepte     { background: var(--status-accepte-bg); color: var(--status-accepte-text); }
.badge-refuse      { background: var(--status-refuse-bg); color: var(--status-refuse-text); }
.badge-annule      { background: var(--status-annule-bg); color: var(--status-annule-text); }
.badge-expire      { background: var(--status-expire-bg); color: var(--status-expire-text); }
.badge-supprime    { background: var(--status-projection-bg); color: var(--status-projection-text); }

.badge-super-admin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #2d3436, #636e72);
    color: var(--color-on-dark);
    border: 1px solid rgba(255,255,255,0.1);
}

#dons-table .don-supprime td {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ---- 2FA code boxes ---- */

.code-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 16px 0;
}

.code-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: var(--fs-3xl);
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.code-digit:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

/* ---- Toggle password ---- */

.input-password {
    position: relative;
    display: flex;
}

.input-password input {
    flex: 1;
    padding-right: 80px;
}

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 4px 8px;
    font-weight: 500;
}

.toggle-password:hover {
    text-decoration: underline;
}

/* ---- Filtres ---- */

.filters-bar {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.filters-bar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
}

.filters-bar-header > span {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1;
}

.filters-count:empty,
.filters-count[data-count="0"] {
    display: none;
}

.active-filters-tags {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
}

.filters-bar.collapsed .active-filters-tags {
    display: inline-flex;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    font-weight: 400;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filter-tag .aft-label {
    color: var(--color-text-light);
    font-weight: 400;
}

.filters-bar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 2px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.filters-bar.collapsed .filters-bar-toggle {
    transform: rotate(-90deg);
}

.filters-bar-body {
    padding: 0 20px 16px;
}

.filters-bar.collapsed .filters-bar-body {
    display: none;
}

.filters-bar.collapsed .filters-bar-header {
    padding-bottom: 12px;
}

.filters-section-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 8px;
    margin-top: 12px;
}

.filters-section-title:first-child {
    margin-top: 0;
}

.filters-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.filters-row:last-of-type {
    margin-bottom: 8px;
}

.filter-group {
    flex: 1 1 0%;
    min-width: 0;
    max-width: calc(25% - 9px);
}

.filter-group label {
    display: block;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-bottom: 4px;
    font-weight: 400;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.2s;
}

.filter-group select {
    height: 34px;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.filter-group .flatpickr-input + input.form-control {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.2s;
    height: 34px;
    box-sizing: border-box;
}

.filter-group .flatpickr-input + input.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.filters-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- Dropdown ---- */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: var(--z-dropdown);
    padding: 4px 0;
}

.dropdown-menu.open {
    display: block;
}

/* ---- Tableau événements hiérarchique ---- */

.evt-header td {
    background: var(--color-primary);
    color: var(--color-on-dark);
    padding: 10px 16px;
    border-bottom: none;
}

.evt-header:hover td {
    background: var(--color-primary-light);
}

.evt-header a,
.evt-header .evt-titre {
    color: var(--color-on-dark);
    font-weight: 700;
    text-decoration: none;
    margin: 0;
}

.evt-header-content {
    display: flex;
    align-items: center;
}

.evt-header-content .evt-header-text {
    flex: 1;
    min-width: 0;
}

.evt-add-date {
    margin-left: auto;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
    font-size: var(--fs-sm);
    padding: 2px 10px;
    white-space: nowrap;
}

.evt-add-date:hover {
    color: var(--color-on-dark);
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.evt-header .evt-meta {
    display: block;
    color: rgba(255, 255, 255, 0.6);

}

.evt-header .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-on-dark);
}

.evt-header .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.evt-header .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-on-dark);
}

tr.clickable-row {
    cursor: pointer;
}

tr.clickable-row:hover td {
    background: #F5F6FA;
}

/* Collapse chevron */

.section-subtitle {
    margin: 32px 0 12px;
    font-weight: 600;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    z-index: var(--z-dropdown);
    max-height: 380px;
    overflow-y: auto;
}

.autocomplete-list:empty {
    display: none;
}

.ac-section + .ac-section {
    border-top: 1px solid var(--color-border);
}

.ac-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 4px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-light);
}

.ac-header svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--color-bg);
}

.ac-item-content {
    flex: 1;
    min-width: 0;
}

.ac-titre {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-titre mark {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-radius: var(--radius-xs);
    padding: 0 1px;
    font-weight: 600;
}

.ac-detail {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--color-text-light);
}

.ac-detail .sep {
    color: var(--color-border);
    font-weight: 400;
}

.ac-badge {
    flex-shrink: 0;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.ac-badge.existing {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
}

.ac-badge.catalogue {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
}

.oeuvre-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-radius: var(--radius-md);
    font-size: var(--fs-2xs);
    font-weight: 500;
}

.oeuvre-unlink {
    background: none;
    border: none;
    color: var(--alert-info-text);
    font-size: var(--fs-md);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.6;
}

.oeuvre-unlink:hover {
    opacity: 1;
}

html.mode-dark .oeuvre-link-badge {
    background: #1a2a3a;
    color: #70c0d0;
}

html.mode-dark .oeuvre-unlink {
    color: #70c0d0;
}

.repr-row {
    background: #ffffff;
}
.repr-row td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
}

.repr-row:hover td {
    background: #F5F6FA;
}

.repr-date {
    white-space: nowrap;
}
.repr-date-jour,
.repr-lieu-nom,
.repr-public,
.repr-duree {
    display: block;
    font-weight: 500;
    line-height: 1.3;
}
.repr-date-heure {
    display: block;
    font-weight: 400;
    color: var(--color-text-light);
    line-height: 1.3;
}
.repr-salle {
    display: block;
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.3;
}
.repr-logis {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--color-text-light);
    font-weight: 400;
    font-size: var(--fs-sm);
    line-height: 1.3;
}
.repr-logis svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.evt-link,
.repr-evt-titre {
    display: block;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}
.don-asso-nom {
    display: block;
    line-height: 1.3;
}
.don-historique-envoi {
    display: block;
    line-height: 1.3;
}
.don-historique-statut {
    display: block;
    line-height: 1.3;
}
.don-places {
    display: block;
    text-align: center;
}

.don-places-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.don-places-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.don-places-label {
    color: var(--color-text-light);
    font-weight: 400;
}

.don-places-value {
    font-weight: 500;
}

.repr-places {
    display: block;
    text-align: center;
    font-weight: 400;

}

.repr-passee td {
    background: var(--color-bg) !important;
}

.repr-passee td,
.repr-passee a,
.repr-passee .repr-places {
    color: var(--color-text-light) !important;
}

.repr-passee:hover td {
    background: var(--color-surface-hover) !important;
}


.repr-empty {
    color: var(--color-text-light);
    font-weight: 400;
    font-style: italic;
    padding-left: 32px;
}


.table-container table {
    table-layout: auto;
}
.table-container table td .repr-salle,
.table-container table td .evt-meta {
    display: block;
}
.table-container table .evt-header td {
    white-space: normal;
}

#dons-table {
    table-layout: fixed;
}

/* Ligne date dans le tableau dons — fond tranché */
#dons-table .repr-row {
    background: var(--color-primary);
    color: var(--color-on-dark);
}
#dons-table .repr-row td {
    background: transparent;
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: none;
}

#dons-table .repr-row:hover {
    background: var(--color-primary-light);
}
#dons-table .repr-row:hover td {
    background: transparent;
}

#dons-table .repr-row td,
#dons-table .repr-row .repr-evt-titre,
#dons-table .repr-row .repr-lieu-nom,
#dons-table .repr-row .repr-date-jour,
#dons-table .repr-row .repr-public,
#dons-table .repr-row .repr-duree {
    color: var(--color-on-dark);
}

#dons-table .repr-row .repr-date-heure,
#dons-table .repr-row .repr-salle {
    color: rgba(255, 255, 255, 0.7);
}


#dons-table .repr-row .repr-places {
    color: rgba(255, 255, 255, 0.8);
}

#dons-table .repr-row .badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-on-dark);
    background: rgba(255, 255, 255, 0.12);
}

#dons-table .repr-row .btn {
    color: var(--color-on-dark);
    border-color: rgba(255, 255, 255, 0.3);
}

#dons-table .repr-row .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

#dons-table .repr-row .btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

#dons-table .repr-row.repr-passee {
    background: var(--color-primary);
}
#dons-table .repr-row.repr-passee td {
    background: transparent !important;
    color: var(--color-on-dark) !important;
}
#dons-table .repr-row.repr-passee:hover {
    background: var(--color-primary-light) !important;
}
#dons-table .repr-row.repr-passee:hover td {
    background: transparent !important;
}
#dons-table .repr-row.repr-passee .repr-evt-titre,
#dons-table .repr-row.repr-passee .repr-lieu-nom,
#dons-table .repr-row.repr-passee .repr-date-jour,
#dons-table .repr-row.repr-passee .repr-public,
#dons-table .repr-row.repr-passee .repr-duree {
    color: var(--color-on-dark) !important;
}
#dons-table .repr-row.repr-passee .repr-date-heure,
#dons-table .repr-row.repr-passee .repr-salle {
    color: rgba(255, 255, 255, 0.7) !important;
}
#dons-table .repr-row.repr-passee a,
#dons-table .repr-row.repr-passee .repr-places {
    color: rgba(255, 255, 255, 0.8) !important;
}
#dons-table .repr-row.repr-passee .badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-on-dark) !important;
    background: rgba(255, 255, 255, 0.12);
}

/* Don grid layout (inside single colspan=8 cell) */
.don-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr 1fr;
    align-items: center;
    gap: 0 8px;
    padding: 0 6px;
}
.don-grid--header {
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.don-grid-asso { padding-left: 24px; }
.don-grid-actions { text-align: right; }

/* Sous-en-tête et lignes de don */
#dons-table .don-subheader td {
    background: var(--color-white);
    padding: 3px 0;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
}
#dons-table .don-row td {
    background: var(--color-white);
    padding: 6px 0;
    border-top: 1px dashed var(--color-border);
}
#dons-table .don-row:hover td {
    background: #F5F6FA;
}
#dons-table .don-row.repr-passee:hover td {
    background: #E3E7F9;
}

.progress-bar-mini {
    width: 180px;
    height: 12px;
    background: var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    margin: 0 auto;
}

.progress-segment {
    height: 100%;
    position: relative;
    cursor: default;
    transition: opacity 0.15s;
}

.progress-segment:first-child {
    border-radius: 6px 0 0 6px;
}

.progress-segment:last-child {
    border-radius: 0 6px 6px 0;
}

.progress-segment:only-child {
    border-radius: var(--radius-md);
}

.progress-segment--confirme {
    background-color: var(--seg-color);
}

.progress-segment--envoye {
    background: repeating-linear-gradient(
        90deg,
        var(--seg-color) 0px,
        var(--seg-color) 3px,
        color-mix(in srgb, var(--seg-color) 30%, white) 3px,
        color-mix(in srgb, var(--seg-color) 30%, white) 6px
    );
}

.progress-segment--projection {
    background-color: color-mix(in srgb, var(--seg-color) 30%, white);
}

.progress-segment--dispo {
    background: transparent;
}

/* Usage place partenaire : gris plein, une affectation ferme sans association. */
.progress-segment--usage {
    background: var(--color-text-light, #9aa0a6);
}

/* Usage place partenaire encore en projection : gris éclairci. */
.progress-segment--usage.progress-segment--projection {
    background: color-mix(in srgb, var(--color-text-light, #9aa0a6) 35%, white);
}

/* Non affectée : noir strié de blanc. */
.progress-segment--nonaffectee,
.progress-segment--nonaffectee.progress-segment--envoye {
    background: repeating-linear-gradient(
        45deg,
        #1a1a1a 0px,
        #1a1a1a 3px,
        #ffffff 3px,
        #ffffff 6px
    );
}

.progress-segment--nonaffectee.progress-segment--projection {
    background: repeating-linear-gradient(
        45deg,
        #1a1a1a 0px,
        #1a1a1a 2px,
        #ffffff 2px,
        #ffffff 6px
    );
    opacity: 0.55;
}

/* Dépassement du stock hérité de l'import : signalé, jamais masqué. */
.badge-depassement {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--radius);
    background: var(--color-error, #d93025);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 15px;
}

.progress-segment:hover {
    opacity: 0.8;
}

.progress-segment[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: var(--color-on-dark);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.progress-segment[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-text);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.asso-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    border: 1px solid var(--color-border);
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-row input[type="color"] {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: none;
}

.color-picker-hex {
    font-family: monospace;
    color: var(--color-text-light);
}

/* Badges typologie */
/* Repli générique : toute typologie sans couleur dédiée reçoit ce fond neutre.
   Même spécificité que les règles ci-dessous, placé avant → les couleurs dédiées l'emportent. */
[class*="badge-typo-"]                      { background: #dfe6e9; color: #2d3436; }
.badge-typo-spectacle                       { background: var(--status-envoye-bg); color: var(--status-envoye-text); }
.badge-typo-production                       { background: #81ecec; color: #0a3d3d; }
.badge-typo-repetition_generale             { background: var(--status-projection-bg); color: var(--status-projection-text); }
.badge-typo-avant_premiere                  { background: var(--status-annule-bg); color: var(--status-annule-text); }
.badge-typo-cours_sur_scene                 { background: #a29bfe; color: #2d1b69; }
.badge-typo-seance_relax                    { background: var(--status-accepte-bg); color: var(--status-accepte-text); }
.badge-typo-programmation_jeune_public      { background: #ffeaa7; color: #5c4400; }
.badge-typo-gala_reve_d_enfant              { background: #fd79a8; color: #5c1030; }
.badge-typo-representation_solidaire_14_juillet { background: #74b9ff; color: #0a2e5c; }
.badge-typo-autre                           { background: var(--status-refuse-bg); color: var(--status-refuse-text); }

/* Colonnes tableaux événements & dates */


/* ---- Responsive ---- */

@media (max-width: 768px) {
    .iconbar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
    }

    .iconbar-top, .iconbar-bottom {
        flex-direction: row;
    }

    .iconbar-sep { width: 1px; height: 28px; margin: 0 6px; }

    .sidebar-panel { display: none !important; }

    .main-content,
    .app-layout.has-panel .main-content {
        margin-left: 0;
        padding: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ---- Scope toggle (triple switch) ---- */

.scope-toggle {
    display: inline-flex;
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 4px;
    border: 1px solid var(--color-border);
    gap: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.scope-toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.scope-toggle-btn {
    position: relative;
    z-index: 1;
    padding: 10px 24px;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.25s ease, font-weight 0.25s ease;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.scope-toggle-btn.active {
    color: var(--color-on-dark);
    font-weight: 600;
}

.scope-toggle-btn:hover:not(.active) {
    color: var(--color-text);
}

.scope-toggle--compact .scope-toggle-btn {
    padding: 10px 20px;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.scope-hidden {
    display: none !important;
}

/* ---- Widget cards grid ---- */

.widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.widget-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.widget-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.widget-card-asso {
    border-left: 4px solid var(--color-accent);
    padding-left: 15px;
}

.widget-card-name {
    margin: 0 0 4px;
}

.widget-card-sub {
    color: var(--color-text-light);
    margin: 0 0 10px;
    line-height: 1.5;
}

.widget-card-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-card-field {
    display: flex;
    justify-content: space-between;
}

.widget-card-field-label {
    color: var(--color-text-light);
}

.widget-card-field-value {
    color: var(--color-text);
    text-align: right;
}

.widget-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.widget-tag {
    font-weight: 400;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.widget-tag-accent {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

.widget-tag-pro {
    background: rgba(26, 26, 46, 0.08);
    color: var(--color-primary);
    border-color: rgba(26, 26, 46, 0.15);
}

.widget-card-icons {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.widget-card:hover .widget-card-icons {
    opacity: 1;
}
.widget-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    text-decoration: none;
}
.widget-card-icon svg {
    width: 14px;
    height: 14px;
}
.widget-card-icon:hover {
    background: var(--color-accent);
    color: var(--color-on-dark);
}
.widget-card-icon-danger:hover {
    background: var(--color-error);
    color: var(--color-on-dark);
}

.lieu-cluster {
    margin-bottom: 32px;
}
.lieu-cluster-title {
    margin-bottom: 12px;
}
.lieu-cluster-title a {
    color: inherit;
    text-decoration: none;
}
.lieu-cluster-title a:hover {
    color: var(--color-accent);
}
.lieu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 1600px) { .lieu-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1280px) { .lieu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .lieu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lieu-grid { grid-template-columns: 1fr; } }
.lieu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lieu-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
}
.lieu-card:hover .widget-card-icons {
    opacity: 1;
}
.lieu-card-info {
    padding: 14px 16px;
}
.lieu-card-name {
    margin: 0 0 6px;
}
.lieu-card-detail {
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
}
.lieu-card-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.lieu-card-picto {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.widget-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.widget-card-actions a,
.widget-card-actions button {
    font-size: var(--fs-sm);
}

.widget-card-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-light);
    padding: 32px 16px;
}

.widget-group {
    margin-bottom: 24px;
}

.widget-group-title {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-group-count {
    font-weight: 500;
    color: var(--color-text-light);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 1px 8px;
}

@media (max-width: 1024px) {
    .widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .widget-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Catalogue des œuvres
   ============================================================ */
.catalogue-layout {
    display: flex;
    height: calc(100vh - 60px);
    margin: -24px;
    overflow: hidden;
}

.catalogue-sidebar {
    width: 340px;
    min-width: 340px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.catalogue-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 0;
}
.catalogue-sidebar-header h3 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
}

.catalogue-search {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.catalogue-search input,
.catalogue-search select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    background: var(--color-bg-alt);
}
.catalogue-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.catalogue-count {
    padding: 0 16px 8px;
    color: var(--color-text-light);
}

.catalogue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.catalogue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background .15s;
}
.catalogue-item:hover {
    background: var(--color-bg-alt);
}
.catalogue-item.active {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-left: 3px solid var(--color-primary);
    padding-left: 13px;
}

.catalogue-item-icon {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.catalogue-item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.catalogue-item-titre {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catalogue-item-cc {
    color: var(--color-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catalogue-item-star {
    color: #e2a308;
    margin-left: 2px;
}

/* Détail */
.catalogue-detail {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    background: var(--color-white);
}

.catalogue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--color-text-light);
}

.catalogue-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 16px;
}
.catalogue-view-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.catalogue-view-genre {
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--color-text-light);
    text-transform: uppercase;
}
.catalogue-view-header h2 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-text);
    font-family: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
}
.catalogue-view-author {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text-light);
    margin-top: 4px;
}
.catalogue-view-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 8px;
}

.catalogue-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.catalogue-col-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--color-text);
    font-family: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
}
.catalogue-text {
    line-height: 1.7;
    color: var(--color-text);
}

.catalogue-info-row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.catalogue-info-row:last-child {
    border-bottom: none;
}
.catalogue-info-label {
    flex-shrink: 0;
    width: 140px;
    font-weight: 600;
    color: var(--color-text-light);
}
.catalogue-info-value {
    color: var(--color-text);
}
.catalogue-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.catalogue-section .catalogue-text a {
    color: var(--color-accent);
}

/* Formulaire */
.cat-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.cat-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.cat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 560px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.cat-drawer.open {
    transform: translateX(0);
}
.cat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.cat-drawer-header h3 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
}
.cat-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.btn-danger {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--fs-sm);
}
.btn-danger:hover {
    background: var(--color-danger);
    color: var(--color-on-dark);
}

/* ---- Theme picker ---- */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-swatch:hover {
    border-color: var(--color-text-light);
}

.theme-swatch.active {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.swatch-bar {
    width: 100%;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4px;
}

.swatch-accent {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.swatch-label {
    color: var(--color-text);
}

/* ---- Mode toggle (light / dark) ---- */

.mode-toggle {
    display: inline-flex;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.mode-toggle button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: var(--color-white);
    color: var(--color-text-light);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mode-toggle button + button {
    border-left: 1px solid var(--color-border);
}

.mode-toggle button.active {
    background: var(--color-primary);
    color: var(--color-on-dark);
}

.mode-toggle button:hover:not(.active) {
    background: var(--color-bg);
}

/* ---- Dark mode overrides ---- */

html.mode-dark input[type="text"],
html.mode-dark input[type="email"],
html.mode-dark input[type="password"],
html.mode-dark input[type="number"],
html.mode-dark input[type="tel"],
html.mode-dark input[type="url"],
html.mode-dark input[type="date"],
html.mode-dark input[type="time"],
html.mode-dark input[type="datetime-local"],
html.mode-dark input[type="search"],
html.mode-dark textarea,
html.mode-dark select {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.mode-dark input::placeholder,
html.mode-dark textarea::placeholder {
    color: var(--color-text-light);
}

/* .alert-success/.alert-error, .db-alert, .ac-titre mark et .ac-badge n'ont plus
   d'override ici : ils lisent les variables --alert-* redéfinies dans
   html.mode-dark, en haut de ce fichier. */

html.mode-dark table tbody tr:hover td {
    background: var(--color-surface-alt);
}

/* ---- Onboarding ---- */

.auth-card-wide {
    max-width: 640px;
}

.auth-card-wide .auth-card {
    padding: 36px 32px;
}

.onboarding-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: 600;
    border: 2px solid var(--color-border);
    color: var(--color-text-light);
    background: var(--color-white);
}

.onboarding-step.active .step-number {
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-color: var(--color-accent);
}

.onboarding-step.done .step-number {
    background: var(--color-success);
    color: var(--color-on-dark);
    border-color: var(--color-success);
}

.step-label {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.onboarding-step.active .step-label,
.onboarding-step.done .step-label {
    color: var(--color-text);
    font-weight: 500;
}

.onboarding-step-line {
    width: 60px;
    height: 2px;
    background: var(--color-border);
    margin: 0 12px;
    margin-bottom: 20px;
}

.onboarding-step-line.done {
    background: var(--color-success);
}

.cgu-block {
    margin: 20px 0;
}

.cgu-section {
    margin-bottom: 20px;
}

.cgu-section h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}

.cgu-text {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 16px;
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--color-text-light);
    max-height: 160px;
    overflow-y: auto;
}

.cgu-text ul {
    padding-left: 20px;
    margin: 8px 0;
}

.cgu-text li {
    margin-bottom: 4px;
}

.cgu-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0;
}

.cgu-checkboxes .checkbox-label {
    align-items: flex-start;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.cgu-checkboxes .checkbox-label span {
    padding-top: 1px;
}

.input-readonly {
    background: var(--color-bg);
    color: var(--color-text-light);
    cursor: not-allowed;
}

.welcome-modal-content {
    text-align: center;
}

.welcome-modal-content h3 {
    font-size: var(--fs-2xl);
    margin-bottom: 16px;
}

.welcome-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
    text-align: left;
}

.welcome-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.welcome-feature svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--color-accent);
    margin-top: 2px;
}

.welcome-feature div strong {
    display: block;
    font-size: var(--fs-lg);
    margin-bottom: 2px;
}

.welcome-feature div span {
    font-size: var(--fs-md);
    color: var(--color-text-light);
}

/* ---- Don cards (association view) ---- */

.don-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.don-cards-empty {
    text-align: center;
    color: var(--color-text-light);
    padding: 36px 12px;
}

.don-cards-month-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent);
    text-transform: capitalize;
}

.don-cards-month-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.don-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}

.don-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--color-accent);
}

.don-card--past {
    opacity: 0.6;
}

.don-card--past:hover {
    opacity: 0.85;
}

.don-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.don-card-top {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    align-items: flex-start;
}

.don-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.don-card-day {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.don-card-month {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 2px;
}

.don-card-time {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin-top: 4px;
}

.don-card-info {
    flex: 1;
    min-width: 0;
}

.don-card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.don-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.don-card-venue,
.don-card-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-md);
    color: var(--color-text-light);
}

.don-card-venue svg,
.don-card-duration svg {
    flex-shrink: 0;
    stroke: var(--color-text-light);
}

.don-card-deadline {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--color-warning);
    font-weight: 500;
    margin-top: 4px;
}

.don-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
}

.don-card-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-md);
    flex-wrap: wrap;
}

.don-card-places {
    color: var(--color-text-light);
    font-weight: 500;
}

.don-card-places-accepted {
    color: var(--color-success);
    font-weight: 500;
}

.don-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.don-card--envoye {
    border-left: 3px solid var(--status-envoye-bg);
}

.don-card--accepte {
    border-left: 3px solid var(--status-accepte-bg);
}

.don-card--refuse {
    border-left: 3px solid var(--status-refuse-bg);
}

.don-card--annule {
    border-left: 3px solid var(--status-annule-bg);
}

.don-card--expire {
    border-left: 3px solid var(--status-expire-bg);
}

@media (max-width: 1024px) {
    .don-cards-month-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .don-card-top {
        flex-direction: column;
        gap: 10px;
    }

    .don-card-date {
        flex-direction: row;
        gap: 8px;
        min-width: 0;
        width: fit-content;
    }

    .don-card-month {
        margin-top: 0;
    }

    .don-card-time {
        margin-top: 0;
    }

    .don-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .don-card-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .don-card-actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* ── Bottom-sheet modal (association) ────────────────────── */

.don-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-sheet);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.don-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.don-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: calc(var(--z-sheet) + 1);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    width: 900px;
    max-width: calc(100vw - 48px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

.don-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.don-modal-handle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.15s;
}

.don-modal-handle:hover {
    background: rgba(255, 255, 255, 0.35);
}

.don-modal-handle::after {
    content: '✕';
    font-size: var(--fs-lg);
    color: var(--color-on-dark);
    line-height: 1;
}

.don-modal-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.don-modal-hero {
    padding: 24px 24px 24px;
    background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000));
    color: var(--color-on-dark);
    position: relative;
    border-radius: 12px 12px 0 0;
}

.don-modal-hero.has-image {
    background-color: #1a1a2e;
    background-size: 100% auto; /* largeur = 100% de la vignette, jamais rognée sur les côtés */
    background-position: center center; /* centrage H + V de l'affiche */
    background-repeat: no-repeat;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.don-modal-hero--opera { background: linear-gradient(135deg, #c0392b, #922b21); }
.don-modal-hero--ballet { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.don-modal-hero--concert { background: linear-gradient(135deg, #2980b9, #1a5276); }
.don-modal-hero--theatre { background: linear-gradient(135deg, #d35400, #a04000); }
.don-modal-hero--danse { background: linear-gradient(135deg, #16a085, #0e6655); }
.don-modal-hero--musique { background: linear-gradient(135deg, #2c3e50, #1a252f); }

.don-modal-genre {
    display: inline-block;
    align-self: flex-start; /* le fond épouse le texte (sinon étiré par le flex du hero) */
    width: fit-content;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.don-modal-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.don-modal-composer {
    font-size: var(--fs-lg);
    margin: 0 0 12px;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.don-modal-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.don-modal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.don-modal-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: var(--fs-md);
    color: var(--color-text);
    background: var(--color-white);
}

.don-modal-meta-item svg {
    flex-shrink: 0;
    stroke: var(--color-text-light);
}

.don-modal-body {
    padding: 0 24px 24px;
}

.don-modal-section {
    padding-top: 20px;
}

.don-modal-section h4 {
    font-size: var(--fs-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin: 0 0 10px;
}

.don-modal-synopsis {
    font-size: var(--fs-lg);
    line-height: 1.65;
    color: var(--color-text);
}

.don-modal-synopsis p {
    margin: 0 0 10px;
}

.don-modal-infos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.don-modal-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.don-modal-info-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-light);
}

.don-modal-info-value {
    font-size: var(--fs-lg);
    color: var(--color-text);
}

.don-modal-docs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.don-modal-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s;
}

.don-modal-doc:hover {
    background: var(--color-border);
}

.don-modal-doc svg {
    flex-shrink: 0;
    stroke: var(--color-accent);
}

.don-modal-doc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.don-modal-doc-title {
    font-size: var(--fs-md);
    font-weight: 500;
}

.don-modal-doc-type {
    font-size: var(--fs-xs);
    color: var(--color-text-light);
}

.don-modal-logistique {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text);
}

.don-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.don-modal-actions--response {
    justify-content: flex-end;
}

.don-modal-places {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-lg);
}

.don-modal-deadline {
    font-size: var(--fs-sm);
    color: var(--color-warning);
    font-weight: 500;
}

.don-modal-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* --- Response panel — stepper design --- */
.don-modal-response {
    margin-top: 16px;
    padding: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    animation: don-modal-response-in 0.25s ease-out;
}

@keyframes don-modal-response-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Choice cards row */
.don-response-choices {
    display: flex;
    gap: 8px;
}

.don-response-choice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-light);
    transition: all 0.15s ease;
}

.don-response-choice:hover {
    border-color: var(--color-text-light);
}

.don-response-choice svg {
    opacity: 0.6;
}

.don-response-choice--accept.active {
    background: #eaf7ee;
    border-color: var(--status-accepte-text);
    color: var(--status-accepte-text);
}
.don-response-choice--accept.active svg { color: var(--status-accepte-text); opacity: 1; }

.don-response-choice--partial.active {
    background: #fff8e6;
    border-color: #b8860b;
    color: #8a6508;
}
.don-response-choice--partial.active svg { color: #b8860b; opacity: 1; }

.don-response-choice--refuse.active {
    background: #fdecea;
    border-color: var(--status-refuse-text);
    color: var(--status-refuse-text);
}
.don-response-choice--refuse.active svg { color: var(--status-refuse-text); opacity: 1; }

/* Stepper */
.don-response-stepper {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.don-response-step {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
}

.don-response-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.don-response-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.don-response-step-circle--done {
    background: var(--color-accent);
    color: var(--color-on-dark);
}

.don-response-step-circle--current {
    background: #e8f0fe;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}

.don-response-step-circle--pending {
    background: var(--color-bg);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.don-response-step-line {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: var(--color-border);
    margin: 4px 0;
}

.don-response-step-content {
    flex: 1;
    padding-top: 3px;
    padding-bottom: 12px;
}

.don-response-step-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.don-response-step-title--pending {
    color: var(--color-text-light);
}

.don-response-step-desc {
    color: var(--color-text-light);
    line-height: 1.4;
}

.don-response-step-desc--pending {
    color: var(--color-text-lighter);
}

/* Refuse message */
.don-response-refuse-text {
    margin: 8px 0 0;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Logistic alert */
.don-modal-response-alert {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--alert-warning-bg);
    border: 1px solid #f0d060;
    border-radius: var(--radius);
    margin-top: 10px;
    margin-bottom: 4px;
    line-height: 1.5;
    color: #7a6520;
}

.don-modal-response-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #b8960c;
}

.don-modal-response-alert strong {
    display: block;
    margin-bottom: 4px;
    color: #6b5510;
}

/* Fields inside stepper — form-group style */
.don-modal-response-label {
    display: block;
    font-weight: 500;
    margin-top: 12px;
    margin-bottom: 6px;
    color: var(--color-text);
}

.don-modal-response-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.don-modal-response-range {
    flex: 1;
    accent-color: var(--color-accent);
    height: 6px;
}

.don-modal-response-nb {
    width: 70px;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s;
}

.don-modal-response-nb:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.don-modal-response-max {
    color: var(--color-text-light);
    white-space: nowrap;
}

.don-modal-response-autocomplete {
    position: relative;
    margin-top: 12px;
    margin-bottom: 4px;
}

.don-modal-response-autocomplete .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s;
}

.don-modal-response-autocomplete .form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.don-modal-response-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 180px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: var(--shadow);
}

.don-modal-response-suggestion {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
}

.don-modal-response-suggestion:hover {
    background: var(--color-bg);
}

.don-modal-response-suggestion--empty {
    color: var(--color-text-light);
    cursor: default;
    font-style: italic;
}

.don-modal-response-suggestion span {
    color: var(--color-text-light);
}

/* Action buttons */
.don-modal.loading .don-modal-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.don-modal.loading .don-modal-scroll::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: don-modal-spin 0.6s linear infinite;
}

.don-modal.loading .don-modal-hero,
.don-modal.loading .don-modal-body,
.don-modal.loading .don-modal-meta,
.don-modal.loading .don-modal-actions,
.don-modal.loading .don-modal-handle {
    display: none;
}

@keyframes don-modal-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .don-modal {
        width: auto;
        max-width: none;
        max-height: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        transform: translateY(20px);
    }
    .don-modal.active {
        transform: translateY(0);
    }
    .don-modal-hero {
        border-radius: 0;
    }
    .don-modal-meta {
        grid-template-columns: 1fr;
    }
    .don-modal-infos-grid {
        grid-template-columns: 1fr;
    }
    .don-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .don-modal-btns {
        justify-content: stretch;
    }
    .don-modal-btns .btn {
        flex: 1;
        text-align: center;
    }
}

/* Année dans les dates — masquée par défaut, visible en multi-saisons */
.date-year { display: none; }
.show-years .date-year { display: inline; }

/* ==========================================================================
   Page de connexion — split-screen avec carrousel
   ========================================================================== */

.login-body {
    background: #14141f;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.login-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1080px;
    min-height: 620px;
    background: #1a1a2e;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* --- Panneau visuel (carrousel) --- */
.login-visual {
    position: relative;
    margin: 12px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #141420;
}

.login-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.login-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.login-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 18, 0.88) 0%, rgba(10, 10, 18, 0.25) 45%, rgba(10, 10, 18, 0.15) 100%);
}

.login-slide-app {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141420;
}

.login-slide-app::after {
    background: linear-gradient(to top, rgba(10, 10, 18, 0.85) 0%, rgba(10, 10, 18, 0) 40%);
}

.login-laptop {
    width: 80%;
    max-width: 420px;
    margin-bottom: 60px;
}

.login-laptop-screen {
    border: 9px solid #2b2b3d;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #000;
}

.login-laptop-screen img {
    display: block;
    width: 100%;
    height: auto;
}

.login-laptop-base {
    height: 11px;
    background: #34344a;
    border-radius: 0 0 14px 14px;
    margin: 0 -5%;
}

.login-slide-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 48px;
    z-index: 2;
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.login-credit {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
    font-size: var(--fs-2xs);
    color: rgba(255, 255, 255, 0.5);
}

.login-visual-top {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.login-logo {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}

.login-logo-sub {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-accent);
}

/* Renfort de lisibilité du logo posé sur les slides photo (fonds clairs possibles) */
.login-visual-top .login-logo,
.login-visual-top .login-logo-sub {
    text-shadow: 0 1px 6px rgba(10, 10, 18, 0.75);
}

/* Logo affiché dans le panneau formulaire, uniquement en mobile (le panneau visuel est masqué) */
.login-form-logo {
    display: none;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
}

.login-dots {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.login-dot {
    width: 22px;
    height: 4px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
}

.login-dot.active {
    background: #fff;
    width: 34px;
}

/* --- Panneau formulaire --- */
.login-form-panel {
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-panel h1 {
    color: #fff;
    font-size: var(--fs-3xl);
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0 0 8px;
}

.login-subtitle {
    color: #8a8b9c;
    font-size: var(--fs-md);
    margin: 0 0 26px;
}

.login-body .form-group label {
    color: #b8b9c9;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.login-body .form-group input {
    background: #232336;
    border: 1px solid #2e2e45;
    color: #e8e8f0;
}

.login-body .form-group input:focus {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.login-body .toggle-password {
    color: #8a8b9c;
}

.login-body .toggle-password:hover {
    color: #e8e8f0;
}

.login-body .auth-link a {
    color: var(--color-accent);
    font-size: var(--fs-sm);
}

.login-body .alert-error {
    background: rgba(231, 76, 60, 0.12);
    color: #f5a0a0;
    border: 1px solid rgba(231, 76, 60, 0.35);
}

.login-body .alert-success {
    background: rgba(39, 174, 96, 0.12);
    color: #6ddb9a;
    border: 1px solid rgba(39, 174, 96, 0.35);
}

.login-note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #2a2a3e;
    font-size: var(--fs-xs);
    color: #6d6d82;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .login-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .login-visual {
        display: none;
    }
    .login-form-logo {
        display: flex;
    }
    .login-form-panel {
        padding: 40px 28px;
    }
}

/* ==========================================================================
   Page Référentiels
   ========================================================================== */
.hidden { display: none !important; }

.ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
    margin-top: 8px;
}
.ref-table th {
    text-align: left;
    font-weight: 500;
    color: var(--color-text-light);
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ref-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}
.ref-row-inactive td { opacity: 0.55; }

.badge-success {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #0f6e56;
    background: #e1f5ee;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
.badge-muted {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #5f5e5a;
    background: #f1efe8;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
.btn-icon-danger { color: var(--color-danger); }

html.mode-dark .badge-success { background: #1a3a2a; color: #6ddb9a; }
html.mode-dark .badge-muted   { background: #2a2a35; color: #9a9ab0; }

/* Référentiels — actions + sous-titre drawer */
.ref-actions { text-align: right; white-space: nowrap; }
.ref-actions form { display: inline; }
.drawer-subtitle { display: block; font-size: var(--fs-md); color: var(--color-text-light); margin-top: 2px; }
.panel-link.ref-nav.active { background: var(--color-bg-hover); font-weight: 600; }
.panel-empty { padding: 4px 16px 10px; font-size: var(--fs-sm); color: var(--color-text-lighter); font-style: italic; }

/* Reliquat & affectations (détail date) */
.reliquat-recap { display: flex; flex-wrap: wrap; gap: 8px; }
.reliquat-recap span { background: var(--color-bg-alt); border-radius: var(--radius); padding: 6px 12px; font-size: var(--fs-md); color: var(--color-text-light); }
.reliquat-recap span strong { color: var(--color-text); margin-left: 4px; }
.reliquat-recap .reliquat-total { background: transparent; }

/* ---- Formulaire de don unifié ---- */
.form-hint {
    display: block;
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

.form-hint--above {
    margin: -4px 0 6px;
}

.form-label-note {
    font-weight: 400;
    color: var(--color-text-light);
}

.don-form-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card .don-form-actions {
    flex-direction: row;
    align-items: center;
}

.card .don-form-actions .btn-block {
    width: auto;
}

/* ============================================================
   Journal d'activité
   ------------------------------------------------------------
   Ce composant vivait dans un <style> de app/Views/partials/
   activity_log.php, écrit avec une convention de nommage étrangère
   au projet (--border-color, --bg-secondary, --text-primary,
   --primary-color). Aucune de ces variables n'existant, tout
   retombait sur des valeurs claires en dur : le composant ignorait
   les thèmes et devenait illisible en mode sombre.
   ============================================================ */

.activity-log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    align-items: flex-end;
}

.activity-log-filters label {
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-2xs);
    color: var(--color-text-light);
}

.activity-log-filters select,
.activity-log-filters input {
    padding: var(--sp-1) 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-2xs);
    background: var(--color-white);
    color: var(--color-text);
}

.activity-log-filters .al-search { width: 200px; }

.al-btn {
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-size: var(--fs-2xs);
    cursor: pointer;
}

.al-btn:hover { background: var(--color-surface-hover); }

/* État vide / chargement. `display` reste piloté en inline par le JS
   (loadingEl.style.display = 'block'), on ne met donc ici que le reste. */
.al-state {
    text-align: center;
    padding: var(--sp-5);
    color: var(--color-text-light);
}

.al-entry {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.15s;
}

.al-entry:hover { background-color: var(--color-surface-hover); }

.al-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.al-entry-libelle {
    font-size: var(--fs-xs);
    color: var(--color-text);
}

.al-entry-date {
    font-size: var(--fs-2xs);
    color: var(--color-text-light);
    white-space: nowrap;
    margin-left: var(--sp-3);
}

.al-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-2xs);
    font-weight: 500;
    margin-right: var(--sp-1);
}

/* Palettes catégorielles : fond clair + texte foncé, le contraste est
   porté par la paire elle-même, elle reste donc lisible dans les deux modes. */
.al-badge-authentification { background: #e8f5e9; color: #2e7d32; }
.al-badge-entite           { background: #e3f2fd; color: #1565c0; }
.al-badge-distribution     { background: #fff3e0; color: #e65100; }
.al-badge-billets          { background: #f3e5f5; color: #6a1b9a; }
.al-badge-compte           { background: #fff8e1; color: #f57f17; }
.al-badge-systeme          { background: #eceff1; color: #546e7a; }

.al-detail-section { margin-bottom: var(--sp-3); }

.al-detail-section h4 {
    font-size: var(--fs-2xs);
    color: var(--color-text-light);
    margin-bottom: var(--sp-2);
}

.al-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-2xs);
}

.al-diff-table th,
.al-diff-table td {
    padding: var(--sp-1) 7px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.al-diff-table th {
    background: var(--color-surface-alt);
    font-weight: 600;
}

/* Avant / après : le fond est clair dans les deux modes, on fige donc
   aussi la couleur du texte — sinon --color-text (clair en sombre)
   passerait sur un fond pastel. */
.al-diff-avant { background: #ffebee; color: #7f1d1d; }
.al-diff-apres { background: #e8f5e9; color: #14532d; }

.al-pagination {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.al-pagination-btn {
    padding: 3px var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--fs-2xs);
}

.al-pagination-btn.active {
    background: var(--color-accent);
    color: var(--color-on-dark);
    border-color: var(--color-accent);
}

.al-pagination-btn:hover:not(.active) { background: var(--color-surface-hover); }

/* Badge « action » (libellé libre, sans catégorie) et ellipse de pagination :
   générés côté JS dans activity_log.php. */
.al-badge-action { background: var(--color-surface-alt); color: var(--color-text-light); }
.al-pagination-ellipsis { padding: 0 var(--sp-1); color: var(--color-text-light); }

/* ============================================================
   Utilitaires
   ------------------------------------------------------------
   Couche volontairement minimale, extraite des attributs style=""
   des vues. Elle DOIT rester en dernier dans le fichier : à
   spécificité égale avec une règle de composant, c'est l'ordre
   source qui tranche, et un utilitaire posé dans le HTML doit
   gagner — c'est ce que faisait le style inline qu'il remplace.
   Nommage par valeur en pixels, pas par cran d'échelle : 20px
   n'est pas sur l'échelle --sp-*, et le masquer derrière un nom
   de cran laisserait croire le contraire.
   ============================================================ */

.u-mt-6  { margin-top: 6px; }
.u-mt-12 { margin-top: var(--sp-3); }
.u-mt-16 { margin-top: var(--sp-4); }
.u-mt-20 { margin-top: 20px; }              /* hors échelle */
.u-mt-24 { margin-top: var(--sp-5); }
.u-mt-32 { margin-top: var(--sp-6); }
.u-mt-0  { margin-top: 0; }

.u-mb-12 { margin-bottom: var(--sp-3); }
.u-mb-16 { margin-bottom: var(--sp-4); }
.u-mb-20 { margin-bottom: 20px; }           /* hors échelle */

.u-ml-6  { margin-left: 6px; }
.u-ml-8  { margin-left: var(--sp-2); }

.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }
.u-nowrap      { white-space: nowrap; }

.u-muted { color: var(--color-text-light); }

.u-flex-1 { flex: 1; }

/* Ligne « libellé à gauche, valeur/action à droite ». */
.u-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Lien qui ne doit pas se signaler comme un lien (carte entière cliquable). */
.u-link-plain {
    text-decoration: none;
    color: inherit;
}

/* Icônes SVG posées dans le texte. */
.u-icon-13,
.u-icon-14 {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    vertical-align: -2px;
}
.u-icon-13 { width: 13px; height: 13px; }
.u-icon-14 { width: 14px; height: 14px; }

.u-fs-2xs { font-size: var(--fs-2xs); }
.u-fs-xs  { font-size: var(--fs-xs); }

/* Fiche contact (associations & donateurs) et son formulaire d'ajout.
   Étaient stylés en inline, avec un fallback sur --border-color — variable
   qui n'existe pas dans ce projet : la bordure retombait sur #e0e0e0 en dur
   et ignorait le mode sombre. */
.contact-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    position: relative;
}

.add-contact-form {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

/* Intertitre des blocs de la page Paramètres. */
.settings-section-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: var(--sp-2);
    color: var(--color-text-light);
}

.u-cursor-default { cursor: default; }
/* Cellule « aucun résultat » d'un tableau. */
.u-cell-empty {
    padding: var(--sp-3) var(--sp-4);
    color: var(--color-text-light);
    font-size: var(--fs-xs);
}