/* ==========================================================================
   Klubby - Application Styles
   Basé sur le design Figma Make
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* ================================================================
       Charte « Tableau de coach » — tokens SOURCE DE VÉRITÉ
       (handoff design_handoff_charte_klubby). Les noms historiques
       plus bas sont des ALIAS mappés sur ces tokens : tout le CSS
       existant hérite de la nouvelle charte sans réécriture.
       ================================================================ */
    color-scheme: light;

    /* Marque */
    --color-brand:        #1C2536;  /* ardoise — nav, boutons primaires */
    --color-brand-hover:  #263043;
    --color-ardoise:      #1C2536;  /* ardoise — surfaces dominantes (sidebar, KPI héro), STABLE clair ET sombre */
    --color-accent:       #F0B429;  /* jaune signal — focus, fanion, KPI clé */
    --color-accent-ink:   #7A5307;  /* texte sur fond jaune clair */
    --color-positive:     #0F7C6C;  /* teal — succès, présence */

    /* Sémantique — statuts de paiement */
    --color-paid-bg:      #DBF0EC;  --color-paid-ink:      #0A5D51;
    --color-partial-bg:   #FCEFCE;  --color-partial-ink:   #7A5307;
    --color-pending-bg:   #EDEBE6;  --color-pending-ink:   #6B6862;  /* 4,08:1 → AA */
    --color-unpaid-bg:    #FBE2DE;  --color-unpaid-ink:    #A32718;
    --color-danger-fg:    #FFFFFF;  /* texte posé SUR une surface de danger */
    --color-exempt-bg:    #E4E8EF;  --color-exempt-ink:    #2C3A52;

    /* Neutres greige — 7 crans */
    --color-bg:      #F7F6F3;   --color-surface: #FFFFFF;
    --n-100: #EDEBE6;  --n-200: #DCD9D2;  --n-300: #B6B2A9;
    /* #7B7871 ne tenait que 4,08:1 sur le fond de page : sous le seuil WCAG AA
       de 4,5 pour du texte normal. Assombri d'un cran, il passe partout où il
       sert (page 5,14 / barre latérale 4,82 / carte 5,55) sans changer le ton. */
    --n-500: #6B6862;  --n-700: #464540;  --n-900: #1A1917;

    /* Typo */
    --font-display: 'Archivo', system-ui, sans-serif;      /* 600/700, -0.03em */
    --font-body:    'Instrument Sans', system-ui, sans-serif;
    --text-xs: 10.5px; --text-sm: 12px; --text-base: 13px;
    --text-lg: 16px; --text-xl: 19px;  --text-2xl: 24px; --text-3xl: 29px;

    /* Formes & élévation */
    --radius-sm: 9px;  --radius-md: 11px;  --radius-lg: 16px;  --radius-pill: 999px;
    --elev-1: 0 1px 2px rgba(0,0,0,.05);
    --elev-2: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(28,37,54,.05);
    --focus-ring: 0 0 0 3px rgba(240,180,41,.55);

    /* Texte posé sur le JAUNE d'accent, dans les deux thèmes : le blanc sur jaune
       tombe à 1,9:1, illisible au soleil (handoff v2, point 2). L'encre donne 9,9:1. */
    --color-on-accent: #1C2536;

    /* Espacements (base 4) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    --tap-min: 44px;

    /* ---------------- ALIAS DE COMPATIBILITÉ (ancien système) ---------------- */
    /* Couleurs sémantiques */
    --color-primary:            var(--color-brand);
    --color-primary-foreground: #F1F2F4;
    --color-primary-500:        var(--color-brand-hover);
    --color-primary-600:        var(--color-brand);
    --color-primary-700:        var(--color-brand-hover);
    --color-background:         var(--color-surface);
    --color-foreground:         var(--n-900);
    --color-muted:              var(--n-100);
    --color-muted-foreground:   var(--n-500);
    --color-border:             var(--n-200);
    --color-destructive:        var(--color-unpaid-ink);

    /* Bleus → ardoise (la charte n'a pas de bleu) */
    --color-blue-50:  #EDEFF3;
    --color-blue-100: #DCE0E8;
    --color-blue-600: var(--color-brand);
    --color-blue-700: var(--color-brand-hover);

    /* Verts → teal positif / statut payé */
    --color-green-50:  var(--color-paid-bg);
    --color-green-100: #CDE9E3;
    --color-green-300: #7FC9BC;
    --color-green-500: var(--color-positive);
    --color-green-600: #0C6A5C;
    --color-green-700: var(--color-paid-ink);

    /* Violet → neutre ardoisé discret */
    --color-purple-50:  #EEF0F5;
    --color-purple-600: #4B5A78;

    /* Orange → jaune accent / statut partiel */
    --color-orange-50:  var(--color-partial-bg);
    --color-orange-400: var(--color-accent);
    --color-orange-500: var(--color-accent);
    --color-orange-600: var(--color-accent-ink);

    /* Rouge → statut impayé */
    --color-red-50:  var(--color-unpaid-bg);
    --color-red-100: #F6D0CA;
    --color-red-300: #E79B90;
    --color-red-500: #C6493A;
    --color-red-600: var(--color-unpaid-ink);
    --color-red-700: #8A2115;

    /* Gris → greige */
    --color-gray-50:  var(--color-bg);
    --color-gray-100: var(--n-100);
    --color-gray-200: var(--n-200);
    --color-gray-300: var(--n-300);
    --color-gray-400: #9A968D;
    --color-gray-500: var(--n-500);
    --color-gray-600: #5C5B55;
    --color-gray-700: var(--n-700);
    --color-gray-900: var(--n-900);

    /* Typo legacy */
    --font-family:    var(--font-body);
    --font-size-xs:   var(--text-xs);
    --font-size-sm:   var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg:   var(--text-lg);
    --font-size-xl:   var(--text-xl);
    --font-size-2xl:  var(--text-2xl);

    /* Espacements legacy (px = anciens rem, valeurs identiques) */
    --spacing-1: 4px;  --spacing-2: 8px;  --spacing-3: 12px; --spacing-4: 16px;
    --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px;

    /* Rayons legacy */
    --radius-xl:   var(--radius-lg);
    --radius-2xl:  var(--radius-lg);
    --radius-full: var(--radius-pill);

    /* Ombres legacy */
    --shadow-sm: var(--elev-1);
    --shadow-md: var(--elev-2);
    --shadow-lg: var(--elev-2);
    --shadow-xl: var(--elev-2);

    /* Transitions legacy */
    --transition-fast: 130ms ease-out;
    --transition-base: 150ms ease-out;
}

/* --------------------------------------------------------------------------
   Variables de compatibilité

   Le code (surtout des <style> inline de templates) utilise un jeu de
   variables historiques jamais déclarées (noms sémantiques + nuances de
   palette manquantes). Faute de définition, ces var() étaient invalides et
   les couleurs retombaient sur des valeurs par défaut. On les déclare ici,
   mappées sur les tokens canoniques.
   -------------------------------------------------------------------------- */
:root {
    /* Nuances de palette manquantes (hex Tailwind, cohérent avec l'existant) */
    --color-blue-200: #DCE0E8;
    --color-blue-300: #C3C8D1;
    --color-blue-500: var(--color-brand);
    --color-gray-800: #2A2926;
    --color-red-200: #fecaca;
    --color-orange-100: #ffedd5;
    --color-orange-200: #fed7aa;
    --color-orange-300: #fdba74;
    --color-orange-700: #c2410c;
    --color-orange-800: #9a3412;
    --color-purple-100: #f3e8ff;
    --color-purple-300: #d8b4fe;
    --color-purple-500: var(--color-brand);
    --color-purple-700: #7e22ce;
    --color-green-200: #bbf7d0;
    --color-green-400: #4ade80;
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef9c3;
    --color-yellow-200: #fef08a;
    --color-yellow-500: var(--color-accent);
    --color-yellow-700: var(--color-accent-ink);
    --color-yellow-800: #854d0e;
    --color-white: #ffffff;

    /* Échelle "primary" complétée (alignée sur le bleu de marque) */
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-light: var(--color-blue-100);

    /* Alias "primary" sémantiques */
    --primary: var(--color-blue-600);
    --primary-color: var(--color-blue-600);
    --primary-hover: var(--color-blue-700);
    --primary-light: var(--color-blue-100);

    /* Texte */
    --text-primary: var(--color-gray-900);
    --color-text-primary: var(--color-gray-900);
    --color-text: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --color-text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --color-text-tertiary: var(--color-gray-500);
    --text-muted: var(--color-gray-500);
    --color-text-muted: var(--color-gray-500);

    /* Bordures & fonds */
    --border-color: var(--color-gray-200);
    --bg-secondary: var(--color-gray-50);
    --color-bg-secondary: var(--color-gray-50);
    --color-surface-secondary: var(--color-gray-50);
    --color-bg-primary: var(--color-background);
    --background-color: var(--color-background);
    --card-bg: var(--color-background);
    --card-background: var(--color-background);
    /* NE PAS refaire pointer --color-surface sur --color-background : ce dernier est
       désormais un alias DE --color-surface (charte), ça créerait un cycle → valeur
       invalide → fond transparent (modales, toasts…). --color-surface est canonique. */
    --color-surface-elevated: var(--color-surface);
    --bg-hover: var(--color-gray-100);

    /* États (succès / erreur / avertissement / info) */
    --color-success: var(--color-green-600);
    --success-color: var(--color-green-600);
    --color-success-light: var(--color-green-50);
    --color-error: var(--color-red-500);
    --color-error-light: var(--color-red-50);
    --color-warning: var(--color-orange-500);
    --color-warning-600: var(--color-orange-600);
    --color-warning-dark: var(--color-orange-700);
    --color-warning-light: var(--color-orange-50);
    --color-info-bg: var(--color-blue-50);

    /* Espacements, typo & divers manquants */
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --text-sm: 12px;
    --text-2xl: 24px;
    --border-radius: var(--radius-md);
    --transition-normal: var(--transition-base);
}

/* --------------------------------------------------------------------------
   Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-foreground);
    background-color: var(--color-gray-50);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* --------------------------------------------------------------------------
   Lucide Icons - Global Styles
   -------------------------------------------------------------------------- */
[data-lucide] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.lucide {
    width: inherit;
    height: inherit;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ==========================================================================
   UTILITY CLASSES - Reusable Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card Utilities
   Base card styles with size modifiers
   -------------------------------------------------------------------------- */
.u-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.u-card--sm { padding: var(--spacing-3); }
.u-card--md { padding: var(--spacing-4); }
.u-card--lg { padding: var(--spacing-5); }
.u-card--xl { padding: var(--spacing-6); }
.u-card--no-padding { padding: 0; }

.u-card--hover {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.u-card--hover:hover {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.u-card--highlighted {
    border-left: 4px solid var(--color-primary-500);
}

/* --------------------------------------------------------------------------
   Badge Utilities
   Base badge with color modifiers
   -------------------------------------------------------------------------- */
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-weight: 500;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Badge sizes */
.u-badge--xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}
.u-badge--sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
}
.u-badge--md {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
}
.u-badge--lg {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* Badge colors - semantic */
.u-badge--success {
    background: var(--color-green-50);
    color: var(--color-green-600);
}
.u-badge--primary {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}
.u-badge--secondary {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}
.u-badge--warning {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}
.u-badge--danger {
    background: var(--color-red-50);
    color: var(--color-red-700);
}
.u-badge--muted {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* Badge colors - explicit */
.u-badge--green { background: var(--color-green-50); color: var(--color-green-600); }
.u-badge--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.u-badge--purple { background: var(--color-purple-50); color: var(--color-purple-600); }
.u-badge--orange { background: var(--color-orange-50); color: var(--color-orange-600); }
.u-badge--red { background: var(--color-red-50); color: var(--color-red-700); }
.u-badge--gray { background: var(--color-gray-100); color: var(--color-gray-600); }
.u-badge--yellow { background: rgba(234, 179, 8, 0.15); color: #b45309; }
.u-badge--pink { background: rgba(236, 72, 153, 0.1); color: #db2777; }

/* Badge pill variant (square corners) */
.u-badge--pill {
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Icon Container Utilities
   Styled icon wrappers with size and color modifiers
   -------------------------------------------------------------------------- */
.u-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

/* Icon sizes */
.u-icon--xs { width: 1.5rem; height: 1.5rem; }
.u-icon--sm { width: 2rem; height: 2rem; }
.u-icon--md { width: 2.5rem; height: 2.5rem; }
.u-icon--lg { width: 3rem; height: 3rem; }
.u-icon--xl { width: 4rem; height: 4rem; }

.u-icon--xs svg { width: 0.875rem; height: 0.875rem; }
.u-icon--sm svg { width: 1rem; height: 1rem; }
.u-icon--md svg { width: 1.25rem; height: 1.25rem; }
.u-icon--lg svg { width: 1.5rem; height: 1.5rem; }
.u-icon--xl svg { width: 2rem; height: 2rem; }

/* Icon shapes */
.u-icon--rounded { border-radius: var(--radius-lg); }
.u-icon--circle { border-radius: var(--radius-full); }

/* Icon colors */
.u-icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.u-icon--green { background: var(--color-green-50); color: var(--color-green-600); }
.u-icon--purple { background: var(--color-purple-50); color: var(--color-purple-600); }
.u-icon--orange { background: var(--color-orange-50); color: var(--color-orange-600); }
.u-icon--red { background: var(--color-red-50); color: var(--color-red-700); }
.u-icon--gray { background: var(--color-gray-100); color: var(--color-gray-600); }
.u-icon--yellow { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }

/* --------------------------------------------------------------------------
   Stat Card Utilities
   For dashboard statistics display
   -------------------------------------------------------------------------- */
.u-stat {
    display: flex;
    gap: var(--spacing-3);
}
.u-stat--vertical { flex-direction: column; }
.u-stat--horizontal { flex-direction: row; align-items: center; }

.u-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}
.u-stat__icon svg { width: 1.25rem; height: 1.25rem; }

.u-stat__icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.u-stat__icon--green { background: var(--color-green-50); color: var(--color-green-600); }
.u-stat__icon--purple { background: var(--color-purple-50); color: var(--color-purple-600); }
.u-stat__icon--orange { background: var(--color-orange-50); color: var(--color-orange-600); }
.u-stat__icon--red { background: var(--color-red-50); color: var(--color-red-700); }
.u-stat__icon--gray { background: var(--color-gray-100); color: var(--color-gray-600); }

.u-stat__content { flex: 1; min-width: 0; }
.u-stat__label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-bottom: 0.125rem;
}
.u-stat__value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
}
.u-stat__value--sm { font-size: var(--font-size-lg); }
.u-stat__value--lg { font-size: var(--font-size-2xl); }

/* --------------------------------------------------------------------------
   Grid Utilities
   Responsive grid layouts
   -------------------------------------------------------------------------- */
.u-grid {
    display: grid;
    gap: var(--spacing-4);
}

/* 1 -> 2 -> 3 columns */
.u-grid--1-2-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .u-grid--1-2-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .u-grid--1-2-3 { grid-template-columns: repeat(3, 1fr); } }

/* 1 -> 2 -> 4 columns */
.u-grid--1-2-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .u-grid--1-2-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .u-grid--1-2-4 { grid-template-columns: repeat(4, 1fr); } }

/* 2 -> 4 columns */
.u-grid--2-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .u-grid--2-4 { grid-template-columns: repeat(4, 1fr); } }

/* 1 -> 2 columns */
.u-grid--1-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .u-grid--1-2 { grid-template-columns: repeat(2, 1fr); } }

/* 1 -> 3 columns */
.u-grid--1-3 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .u-grid--1-3 { grid-template-columns: repeat(3, 1fr); } }

/* Auto-fill grids */
.u-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.u-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.u-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Gap modifiers */
.u-grid--gap-sm { gap: var(--spacing-2); }
.u-grid--gap-md { gap: var(--spacing-4); }
.u-grid--gap-lg { gap: var(--spacing-6); }

/* --------------------------------------------------------------------------
   Detail Card Utilities
   For show/detail pages
   -------------------------------------------------------------------------- */
.u-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
}

.u-detail-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.u-detail-card__title svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Empty State Utilities
   -------------------------------------------------------------------------- */
.u-empty {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

.u-empty__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.u-empty__icon svg {
    width: 2rem;
    height: 2rem;
}

.u-empty__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.u-empty__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-4);
}

/* --------------------------------------------------------------------------
   Text Utilities
   -------------------------------------------------------------------------- */
.u-text-xs { font-size: var(--font-size-xs); }
.u-text-sm { font-size: var(--font-size-sm); }
.u-text-base { font-size: var(--font-size-base); }
.u-text-lg { font-size: var(--font-size-lg); }
.u-text-xl { font-size: var(--font-size-xl); }
.u-text-2xl { font-size: var(--font-size-2xl); }

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

/* Lien au fil d'une phrase. La remise à zéro rend `a` invisible (couleur héritée,
   pas de soulignement) : sans cette classe, un renvoi en toutes lettres se lit
   comme du texte mort. */
.u-link {
    /* `accent-ink`, pas `accent` : le jaune signal sur fond clair ne se lit pas.
       Ce jeton est la déclinaison texte, et il bascule avec le thème. */
    color: var(--color-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.u-link:hover { text-decoration-thickness: 2px; }
.u-text-secondary { color: var(--color-gray-600); }
.u-text-primary { color: var(--color-gray-900); }

.u-font-medium { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold { font-weight: 700; }

/* --------------------------------------------------------------------------
   Spacing Utilities
   -------------------------------------------------------------------------- */
.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: var(--spacing-1); }
.u-mb-2 { margin-bottom: var(--spacing-2); }
.u-mb-3 { margin-bottom: var(--spacing-3); }
.u-mb-4 { margin-bottom: var(--spacing-4); }
.u-mb-6 { margin-bottom: var(--spacing-6); }

/* Responsive visibility */
@media (max-width: 767px) {
    .u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .u-hide-desktop { display: none !important; }
}

/* Flexbox utilities */
.u-flex { display: flex; }
.u-gap-1 { gap: var(--spacing-1); }
.u-gap-2 { gap: var(--spacing-2); }
.u-gap-3 { gap: var(--spacing-3); }
.u-gap-4 { gap: var(--spacing-4); }

/* Checkbox label */
.u-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

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

/* Text color danger */
.u-text-danger { color: var(--color-red-500); }

/* ==========================================================================
   END UTILITY CLASSES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout - App Shell (Mobile First)
   -------------------------------------------------------------------------- */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* `clip`, pas `hidden` : voir .app-content--flush. `hidden` laisse le
       navigateur faire défiler ce conteneur pour atteindre une ancre, ce qui
       chassait l'en-tête de l'écran sans moyen de le ramener.
       `min-height: 0` vient AVEC `clip` : `hidden` fait de l'élément un
       conteneur de défilement, ce qui ramenait seul sa hauteur minimale
       automatique à zéro. `clip` ne le fait pas — sans cette ligne, la boîte
       grandit à la taille de son contenu et la colonne cesse de borner. */
    overflow: clip;
    min-height: 0;
}

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
}

@media (min-width: 1024px) {
    .app-layout {
        flex-direction: row;
        height: 100vh;
        overflow: clip;
    }

    .app-content {
        padding: var(--spacing-6);
    }
}

/* --------------------------------------------------------------------------
   Mobile Header
   -------------------------------------------------------------------------- */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.mobile-header-logo-icon {
    width: 22px;
    height: 30px;
    background: var(--color-accent);
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
/* Fanion jaune : on masque l'icône interne (cohérent avec la sidebar). */
.mobile-header-logo-icon i,
.mobile-header-logo-icon svg {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
}

.mobile-header-logo-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    color: var(--color-gray-700);
    transition: background var(--transition-fast);
}

.mobile-menu-btn:hover {
    background: var(--color-gray-100);
}

.mobile-menu-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 1024px) {
    .mobile-header {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Sidebar Overlay (Mobile)
   -------------------------------------------------------------------------- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1024px) {
    .sidebar-overlay {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Sidebar (Mobile First)
   -------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--color-background);
    border-right: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
}

.sidebar.active {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .sidebar {
        position: relative;
        width: 16rem;
        max-width: none;
        transform: none;
        z-index: auto;
    }
}

.sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-close-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.sidebar-close-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-close-btn i {
    font-size: 1.25rem;
}

@media (min-width: 1024px) {
    .sidebar-close-btn {
        display: none;
    }
}

.sidebar-header {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .sidebar-header {
        padding: var(--spacing-6);
    }
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.sidebar-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-blue-600);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sidebar-logo-icon i {
    font-size: 1.25rem;
}

.sidebar-logo-icon--admin {
    background: var(--color-orange-500);
}

.sidebar-user-avatar--admin {
    background: var(--color-orange-100);
    color: var(--color-orange-600);
}

.sidebar-logo-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.sidebar-nav-item:hover {
    background: var(--color-gray-50);
}

.sidebar-nav-item.active {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
}

.sidebar-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-nav-item i {
    width: 1.25rem;
    font-size: 1.1rem;
    text-align: center;
}

.sidebar-nav-item--admin {
    color: var(--color-orange-500);
}

.sidebar-nav-item--admin:hover {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.sidebar-nav-item--admin.active {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.sidebar-nav-item--support {
    color: var(--color-brand);
}

.sidebar-nav-item--support:hover {
    background: var(--n-100);
    color: var(--color-brand-hover);
}

.sidebar-nav-item--support.active {
    background: var(--n-100);
    color: var(--color-brand-hover);
}

.sidebar-nav-divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: var(--spacing-2) var(--spacing-4);
}

/* Member Switcher */
.sidebar-member-switcher {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    position: relative;
}

.sidebar-member-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-2);
    font-weight: 500;
}

.sidebar-member-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-member-select:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.sidebar-member-select.active {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 2px var(--color-blue-100);
}

.sidebar-member-name {
    font-weight: 500;
}

.sidebar-member-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast);
}

.sidebar-member-select.active .sidebar-member-chevron {
    transform: rotate(180deg);
}

.sidebar-member-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: var(--spacing-2);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.sidebar-member-dropdown.active {
    display: block;
}

.sidebar-member-option-form {
    margin: 0;
}

.sidebar-member-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sidebar-member-option:hover {
    background: var(--color-gray-50);
}

.sidebar-member-option.active {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
}

.sidebar-member-option:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sidebar-member-option:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sidebar-member-check {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue-600);
}

.sidebar-member-type {
    margin-left: auto;
    font-size: var(--font-size-xs);
    /* `gray-400` est un ton décoratif : à 2,56:1 il ne peut pas porter le rôle
       du membre, qui est une information. On prend le gris atténué. */
    color: var(--color-text-muted);
}

.sidebar-footer {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.sidebar-user:hover {
    background: var(--color-gray-50);
}

.sidebar-user-avatar {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-green-500) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.sidebar-user-avatar--img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* --------------------------------------------------------------------------
   Header (Desktop)
   -------------------------------------------------------------------------- */
.header {
    display: none;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--spacing-3) var(--spacing-4);
}

@media (min-width: 1024px) {
    .header {
        display: block;
        padding: var(--spacing-4) var(--spacing-6);
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header-selectors {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

@media (min-width: 768px) {
    .header-selectors {
        gap: var(--spacing-4);
    }
}

.header-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.header-selector:hover {
    background: var(--color-gray-100);
}

.header-selector-icon {
    width: 2rem;
    height: 2rem;
    background: var(--color-blue-600);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    /* `white` en dur donnait 1,86:1 en thème sombre, où la primaire devient le
       jaune. Le jeton suit la surface : clair sur l'ardoise, sombre sur jaune. */
    color: var(--color-primary-foreground);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.header-selector-text {
    text-align: left;
}

.header-selector-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
}

.header-selector-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.header-selector-arrow {
    color: var(--color-gray-400);
    margin-left: var(--spacing-2);
}

.header-notifications {
    position: relative;
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.header-notifications:hover {
    background: var(--color-gray-50);
}

.header-notifications svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-600);
}

.header-notifications-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-red-500);
    border-radius: var(--radius-full);
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: var(--color-blue-600);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-4);
}

.login-logo svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.login-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-background);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-weight: 500;
    color: var(--color-gray-700);
    transition: border-color var(--transition-fast);
}

.login-btn:hover {
    border-color: var(--color-gray-300);
}

.login-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.login-footer {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}

.login-footer p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.stat-icon.blue {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.stat-icon.green {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.stat-icon.purple {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.stat-icon.orange {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.stat-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md);
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
    transition: all 0.15s ease;
}

.stat-action:hover {
    background-color: var(--color-primary-500);
    color: white;
}

.stat-action svg {
    width: 1rem;
    height: 1rem;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-1);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.stat-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-content {
    flex: 1;
    min-width: 0;
}

.stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
}

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--spacing-1);
}

/* Stats Grid (unified) */
.stats-grid {
    display: grid;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Generic No Season State */
.no-season {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-16);
    text-align: center;
}

.no-season-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-6);
    color: var(--color-gray-400);
}

.no-season h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.no-season p {
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-6);
}

.no-season .btn {
    margin-bottom: var(--spacing-4);
}

/* Generic Empty State */
.empty-state {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-12);
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-400);
}

.empty-state > .empty-state-icon:first-child {
    margin-top: var(--spacing-4);
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.empty-state p {
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-4);
}

.empty-state .btn {
    margin-bottom: var(--spacing-4);
}

/* Cards */
.card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

/* Card header inside no-padding cards needs its own padding */
.u-card--no-padding .card-header {
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: 0;
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.card-title svg {
    width: 1.25rem;
    height: 1.25rem;
}

.card-link {
    font-size: var(--font-size-sm);
    color: var(--color-blue-600);
    font-weight: 500;
}

.card-link:hover {
    color: var(--color-blue-700);
}

/* Event List */
.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
}

.event-item:hover {
    background: var(--color-gray-100);
}

.event-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.event-title {
    font-weight: 500;
    color: var(--color-gray-900);
}

.event-date {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.event-attendance {
    text-align: right;
}

/* Dashboard Event Attendance Summary */
.event-attendance-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 90px;
}

.attendance-badges {
    display: flex;
    gap: 4px;
}

.attendance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    position: relative;
    cursor: default;
}

.attendance-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--color-gray-900);
    color: white;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    margin-bottom: 4px;
    pointer-events: none;
}

.attendance-badge:hover::after {
    opacity: 1;
    visibility: visible;
}

.attendance-badge.present {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.attendance-badge.absent {
    background: var(--color-red-50);
    color: var(--color-red-700);
}

.attendance-badge.pending {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.attendance-bar {
    display: flex;
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.attendance-bar-present {
    background: var(--color-green-500);
    transition: width var(--transition-base);
}

.attendance-bar-absent {
    background: var(--color-red-500);
    transition: width var(--transition-base);
}

/* Actions List */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
}

.action-item:hover {
    background: var(--color-gray-100);
}

.action-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    margin-top: 0.375rem;
    flex-shrink: 0;
}

.action-dot.high {
    background: var(--color-red-500);
}

.action-dot.medium {
    background: var(--color-orange-400);
}

/* Le montant dû, sous l'intitulé : « 3 licences à encaisser » ne dit pas
   combien (§62). */
.action-detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.action-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.actions-list-empty {
    text-align: center;
    padding: 2rem;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

@media (min-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

.quick-action {
    padding: var(--spacing-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-align: left;
    transition: all var(--transition-fast);
}

.quick-action:hover {
    border-color: var(--color-blue-300);
    background: var(--color-blue-50);
}

.quick-action.green:hover {
    border-color: var(--color-green-500);
    background: var(--color-green-50);
}

.quick-action.purple:hover {
    border-color: var(--color-purple-600);
    background: var(--color-purple-50);
}

.quick-action.orange:hover {
    border-color: var(--color-orange-500);
    background: var(--color-orange-50);
}

.quick-action-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: var(--spacing-2);
}

.quick-action-icon.blue {
    color: var(--color-blue-600);
}

.quick-action-icon.green {
    color: var(--color-green-600);
}

.quick-action-icon.purple {
    color: var(--color-purple-600);
}

.quick-action-icon.orange {
    color: var(--color-orange-600);
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center {
    text-align: center;
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   Landing Page Styles
   ========================================================================== */

/* Additional Colors for Landing */
:root {
    --color-pink-100: #fce7f3;
    --color-pink-600: #db2777;
    --color-indigo-100: #e0e7ff;
    --color-indigo-600: #4f46e5;
    --color-yellow-400: #facc15;
}

/* --------------------------------------------------------------------------
   Landing Page Layout
   -------------------------------------------------------------------------- */
.landing-page {
    min-height: 100vh;
    background: var(--color-background);
}

.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

.hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.25;
    border: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-primary {
    background: var(--color-blue-600);
    color: white;
}

.btn-primary:hover {
    background: var(--color-blue-700);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-gray-300);
    color: var(--color-gray-700);
}

.btn-outline:hover {
    border-color: var(--color-blue-600);
    color: var(--color-blue-600);
}

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

.btn-outline.btn-danger:hover {
    border-color: var(--color-red-600);
    color: white;
    background: var(--color-red-600);
}

.btn-outline.btn-warning {
    border-color: var(--color-orange-500);
    color: var(--color-orange-500);
    background: transparent;
}

.btn-outline.btn-warning:hover {
    border-color: var(--color-orange-600);
    color: white;
    background: var(--color-orange-600);
}

.btn-white {
    background: white;
    color: var(--color-blue-600);
}

.btn-white:hover {
    background: var(--color-blue-50);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
}

.btn-full {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Landing Navigation
   -------------------------------------------------------------------------- */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-gray-200);
    z-index: 50;
}

.landing-nav-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .landing-nav-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .landing-nav-container {
        padding: 0 2rem;
    }
}

.landing-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.landing-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-blue-600);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.landing-logo-text {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
}

.landing-nav-links {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .landing-nav-links {
        display: flex;
    }
}

.landing-nav-link {
    color: var(--color-gray-700);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.landing-nav-link:hover {
    color: var(--color-blue-600);
}

.landing-mobile-toggle {
    display: flex;
    padding: 0.5rem;
    border-radius: var(--radius-lg);
}

.landing-mobile-toggle:hover {
    background: var(--color-gray-100);
}

@media (min-width: 768px) {
    .landing-mobile-toggle {
        display: none;
    }
}

.landing-mobile-menu {
    border-top: 1px solid var(--color-gray-200);
    background: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .landing-mobile-menu {
        display: none !important;
    }
}

.landing-mobile-link {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-gray-700);
    font-weight: 500;
}

.landing-mobile-link:hover {
    color: var(--color-blue-600);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
    padding-top: 8rem;
    padding-bottom: 5rem;
    background: linear-gradient(180deg, var(--color-blue-50) 0%, var(--color-background) 100%);
}

.hero-content {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 4rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
}

.hero-description {
    font-size: var(--font-size-xl);
    color: var(--color-gray-600);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Hero Preview */
.hero-preview {
    max-width: 64rem;
    margin: 0 auto;
}

.preview-logo {
    width: 6rem;
    height: 6rem;
    background: var(--color-blue-600);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   Features Section
   -------------------------------------------------------------------------- */
.features {
    padding: 5rem 1rem;
    background: var(--color-background);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-blue-300);
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Mise en route en trois étapes

   Une liste ordonnée, parce que c'en est une : l'ordre porte l'information, et
   un lecteur d'écran l'annonce comme telle. Le numéro affiché est décoratif
   (`aria-hidden`), la sémantique venant du `<ol>`.
   -------------------------------------------------------------------------- */
.steps {
    padding: 5rem 1rem;
    /* `--color-surface`, pas `white` : en thème sombre un blanc codé en dur
       reste blanc pendant que le texte s'éclaircit — mesuré à 1,12:1, soit
       illisible. */
    background: var(--color-surface);
}

.steps-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.steps-subtitle {
    color: var(--color-gray-600);
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 34rem;
}

.steps-list {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0 auto;
    max-width: 64rem;
    display: grid;
    gap: 2rem;
}

.step {
    text-align: left;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.step-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.4rem;
}

.step-description {
    color: var(--color-gray-600);
    margin: 0;
}

@media (min-width: 768px) {
    .steps-title { font-size: 2rem; }
    .steps-list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Démonstration vidéo

   `aspect-ratio` sur le lecteur plutôt qu'une hauteur fixe : la place est
   réservée avant même que l'affiche soit chargée, donc aucun décalage de mise
   en page à aucune largeur.
   -------------------------------------------------------------------------- */
/* La vidéo occupe la colonne droite du hero : c'est une page de vente, et
   montrer l'outil en marche vaut mieux qu'une capture figée.

   `.hero-preview` est un conteneur flex en ligne (il n'accueillait qu'un seul
   enfant, la maquette). Avec deux enfants, la note se plaçait À CÔTÉ de la
   vidéo : on empile. */
.hero .hero-preview {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Un montage par orientation : le paysage 16/9 laisserait des bandes noires
   sur un téléphone. Bascule en CSS, donc sans JavaScript — l'attribut `media`
   d'un `<source>` n'est honoré que dans `<picture>`, jamais pour la vidéo. */
.hero-video--paysage { display: none; }
.hero-video--portrait { display: block; }

@media (min-width: 768px) {
    .hero-video--paysage { display: block; }
    .hero-video--portrait { display: none; }
}

.hero-video {
    width: 100%;
    max-width: 44rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    background: var(--color-gray-900);
}

/* Bornée en largeur : un 9/16 pleine largeur occuperait tout l'écran d'un
   téléphone et repousserait le reste de la page hors de vue. */
.hero-video--portrait {
    max-width: 17rem;
    margin: 0 auto;
}

/* `.demo-video` impose 16/9 — le montage portrait s'affichait sinon en
   270×152, écrasé dans un cadre paysage. */
.hero-video--portrait .demo-video {
    aspect-ratio: 9 / 16;
}

.hero-video-note {
    max-width: 44rem;
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    text-align: center;
}

.demo-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   Pricing Section
   -------------------------------------------------------------------------- */
.pricing {
    padding: 5rem 1rem;
    background: var(--color-gray-50);
}

/* Une seule carte, centrée : il n'y a qu'une offre (§68.2), et la mettre dans
   une grille de comparaison laisserait croire qu'il en manque. */
.pricing-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.pricing-subtitle {
    color: var(--color-gray-600);
    text-align: center;
    margin: 0 auto 2.5rem;
    max-width: 34rem;
}

.pricing-card {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem 1.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.pricing-eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand);
}

.pricing-amount {
    /* Le chiffre domine, son unité le cadre : c'est l'information de la section. */
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-gray-900);
    font-variant-numeric: tabular-nums;
    margin: 0.75rem 0 0;
}

.pricing-unit {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    margin-top: 0.5rem;
}

.pricing-note {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin: 1rem auto 0;
    max-width: 26rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--color-gray-700);
}

.pricing-features svg {
    flex: none;
    margin-top: 0.25rem;
    color: var(--color-positive);
}

.pricing-cta {
    margin-top: 1.75rem;
    width: 100%;
    justify-content: center;
}

.pricing-contact-note {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin: 0.9rem 0 0;
}

@media (min-width: 768px) {
    .pricing-title { font-size: 2rem; }
    .pricing-amount { font-size: 3.5rem; }
}

/* --------------------------------------------------------------------------
   Final CTA Section
   -------------------------------------------------------------------------- */
.final-cta {
    padding: 5rem 1rem;
    background: var(--color-background);
    text-align: center;
}

.final-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .final-cta-title {
        font-size: 2.5rem;
    }
}

.final-cta-description {
    font-size: var(--font-size-xl);
    color: var(--color-gray-600);
    max-width: 40rem;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.final-cta .btn {
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    background: var(--color-gray-900);
    color: white;
    padding: 3rem 1rem;
}

/* --------------------------------------------------------------------------
   NEW Landing Page Styles (2024 Redesign)
   -------------------------------------------------------------------------- */

/* Hero Section - New Design */
.hero {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
    padding: 6rem 1rem 4rem;
    /* .hero-app-glow déborde à droite (right: -2rem) : sans clip, scroll horizontal sur mobile */
    overflow-x: clip;
}

.hero-container {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        padding: 0 2rem;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--color-blue-200);
    border-radius: 9999px;
    font-size: var(--font-size-sm);
    color: var(--color-blue-600);
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero-cta {
    margin-bottom: 1.5rem;
}

.hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hero-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.hero-check svg {
    color: var(--color-green-500);
}

/* Hero Preview Card */
.hero-preview {
    display: flex;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Hero V2 — accent "terrain" + aperçu application
   (nouvelles classes uniquement, n'altère pas le hero existant)
   -------------------------------------------------------------------------- */
/* Alignement cohérent (override le centrage hérité de .hero-content) */
.hero .hero-content {
    max-width: none;
    margin: 0;
    text-align: left;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-green-600);
    margin-bottom: 1rem;
}

.hero-title-accent {
    color: var(--color-accent-ink);
}

.hero-title-underline {
    width: 4rem;
    height: 5px;
    border-radius: 3px;
    background: var(--color-green-600);
    margin: -0.5rem 0 1.5rem;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hero-cta-row .hero-cta {
    margin-bottom: 0;
}

/* Tarif dans le premier écran (§68.3). Encadré plutôt que posé à plat : le
   chiffre doit se détacher du texte courant sans crier. Largeur ajustée au
   contenu, pour ne pas devenir une bannière. */
.hero-price {
    display: inline-block;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--color-surface);
    border: 2px solid var(--color-brand);
    border-radius: var(--radius-lg);
}

.hero-price-eyebrow {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
}

.hero-price-amount {
    /* Le chiffre domine ; sa taille suit la largeur pour tenir à 320 px. */
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-gray-900);
    font-variant-numeric: tabular-nums;
    margin: 0.4rem 0 0;
}

.hero-price-tax {
    font-size: 0.5em;
    font-weight: 600;
    color: var(--color-gray-600);
}

.hero-price-unit {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-gray-700);
    margin-top: 0.35rem;
}

.hero-price-note {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0.5rem 0 0;
}

/* Aperçu application (maquette dashboard encadrée navigateur) */
.hero-app {
    position: relative;
    width: 100%;
    max-width: 36rem;
}

.hero-app-glow {
    position: absolute;
    width: 24rem;
    height: 24rem;
    right: -2rem;
    top: -1.5rem;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.22), transparent 70%);
    filter: blur(8px);
    z-index: 0;
    pointer-events: none;
}

.hero-app-window {
    position: relative;
    z-index: 1;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 1rem;
    box-shadow: 0 30px 60px -24px rgba(2, 6, 23, 0.3);
    overflow: hidden;
}

.hero-app-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.hero-app-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: var(--color-gray-300);
}

.hero-app-url {
    margin-left: 0.6rem;
    flex: 1;
    max-width: 18rem;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.45rem;
    padding: 0.3rem 0.7rem;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

.hero-app-body {
    padding: 1.1rem;
}

.hero-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.hero-app-club {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
}

.hero-app-club-badge {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    background: var(--color-blue-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.hero-app-season {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
}

.hero-app-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.hero-app-kpi {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: 0.7rem;
    padding: 0.7rem;
}

.hero-app-kpi-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.hero-app-kpi-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.hero-app-kpi-icon--blue {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.hero-app-kpi-icon--green {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.hero-app-kpi-icon--orange {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.hero-app-kpi-icon--purple {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.hero-app-kpi-label {
    display: block;
    font-size: 0.7rem;
    color: var(--color-gray-500);
}

.hero-app-kpi-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-gray-900);
}

.hero-app-panels {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.6rem;
}

.hero-app-panel {
    border: 1px solid var(--color-gray-200);
    border-radius: 0.7rem;
    padding: 0.8rem;
}

.hero-app-panel-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.6rem;
}

.hero-app-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
}

.hero-app-row:last-child {
    border-bottom: none;
}

.hero-app-row-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.45rem;
    background: var(--color-blue-50);
    color: var(--color-blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-app-row-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.hero-app-row-meta {
    color: var(--color-gray-400);
    font-size: 0.7rem;
}

.hero-app-todo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
}

.hero-app-todo-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: var(--color-orange-500);
    flex-shrink: 0;
}

.hero-app-todo-dot--green {
    background: var(--color-green-600);
}

@media (max-width: 640px) {
    .hero-app-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-app-panels {
        grid-template-columns: 1fr;
    }
}

/* Social Proof Section */
.social-proof {
    padding: 2rem 1rem;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.social-proof-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

.social-proof-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (min-width: 768px) {
    .social-proof-stats {
        gap: 4rem;
    }
}

.social-proof-stat {
    text-align: center;
}

.social-proof-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary-600);
}

.social-proof-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Pain Points Section */
.pain-points {
    padding: 5rem 1rem;
    background: white;
}

.pain-points-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .pain-points-title {
        font-size: 2.25rem;
    }
}

.pain-points-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    text-align: center;
    margin-bottom: 3rem;
}

.pain-points-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pain-points-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pain-point-card {
    padding: 1.5rem;
    border-radius: 1rem;
}

.pain-point-card--red {
    background: #fef2f2;
}

.pain-point-card--orange {
    background: #fff7ed;
}

.pain-point-card--yellow {
    background: #fefce8;
}

.pain-point-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.pain-point-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

.pain-points-arrow {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0;
    color: var(--color-gray-300);
}

.solution-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

.solution-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    text-align: center;
}

/* Features Section - Detailed Cards */
.features {
    padding: 4rem 1rem;
    background: var(--color-gray-50);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card-detailed {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 1rem;
    padding: 1.5rem;
}

.feature-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-card-icon--blue {
    background: var(--color-blue-100);
    color: var(--color-blue-600);
}

.feature-card-icon--green {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.feature-card-icon--pink {
    background: var(--color-pink-100);
    color: var(--color-pink-600);
}

.feature-card-icon--purple {
    background: #ede9fe;
    color: var(--color-brand-hover);
}

.feature-card-icon--indigo {
    background: var(--color-indigo-100);
    color: var(--color-indigo-600);
}

.feature-card-icon--orange {
    background: #ffedd5;
    color: #ea580c;
}

.feature-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.feature-card-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.feature-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-card-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.feature-card-list svg {
    color: var(--color-blue-500);
    flex-shrink: 0;
}

.features-cta {
    text-align: center;
}

.features-cta-box {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-blue-50) 100%);
    border: 1px solid var(--color-gray-200);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.features-cta-text {
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

/* Why Different Section */
.why-different {
    padding: 5rem 1rem;
    background: white;
}

.why-different-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .why-different-title {
        font-size: 2.25rem;
    }
}

.why-different-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    text-align: center;
    margin-bottom: 3rem;
}

.why-different-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .why-different-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
    }
}

.why-different-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.why-different-icon-box {
    width: 8rem;
    height: 8rem;
    background: var(--color-blue-600);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.why-different-visual-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    text-align: center;
}

.why-different-points {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.why-different-point {
    display: flex;
    gap: 1rem;
}

.why-different-point-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.why-different-point-icon--blue {
    background: var(--color-blue-100);
    color: var(--color-blue-600);
}

.why-different-point-icon--green {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.why-different-point-icon--purple {
    background: #ede9fe;
    color: var(--color-brand-hover);
}

.why-different-point-icon--orange {
    background: #ffedd5;
    color: #ea580c;
}

.why-different-point-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.why-different-point-content p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* Security Section */
.security {
    padding: 5rem 1rem;
    background: var(--color-gray-50);
}

.security-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .security-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.security-item {
    text-align: center;
}

.security-item-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.security-item-icon--purple {
    background: #f3e8ff;
    color: var(--color-brand);
}

.security-item-icon--green {
    background: #d1fae5;
    color: #059669;
}

.security-item-icon--blue {
    background: #dbeafe;
    color: var(--color-brand);
}

.security-item-icon--orange {
    background: #ffedd5;
    color: #ea580c;
}

.security-item-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.security-item-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   FAQ Section
   -------------------------------------------------------------------------- */
.faq {
    padding: 5rem 1rem;
    background: var(--color-gray-50);
}

.faq-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .faq-title {
        font-size: 2.5rem;
    }
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.faq-item {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.faq-question i,
.faq-question svg {
    flex-shrink: 0;
    color: var(--color-primary-500);
    margin-top: 2px;
}

.faq-answer {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    padding-left: calc(20px + 0.75rem);
}

/* Final CTA - Gradient Background */
.final-cta {
    padding: 5rem 1rem;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-positive) 100%);
    text-align: center;
}

.final-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .final-cta-title {
        font-size: 2.5rem;
    }
}

.final-cta-description {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    max-width: 40rem;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.final-cta .btn-white {
    background: white;
    color: var(--color-blue-600);
    font-weight: 600;
}

.final-cta .btn-white:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Dark Footer */
.footer-dark {
    background: var(--color-brand);
    color: white;
    padding: 4rem 1rem 2rem;
}

.footer-dark-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

@media (min-width: 768px) {
    .footer-dark-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.footer-dark-brand {
    max-width: 280px;
}

.footer-dark-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-dark-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-blue-600);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.footer-dark-logo span {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.footer-dark-tagline {
    font-size: var(--font-size-sm);
    color: #94a3b8;
    line-height: 1.6;
}

.footer-dark-links h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-dark-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-dark-links a {
    font-size: var(--font-size-sm);
    color: #94a3b8;
    transition: color var(--transition-fast);
}

.footer-dark-links a:hover {
    color: white;
}

.footer-dark-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-brand-hover);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .footer-dark-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-dark-bottom p {
    font-size: var(--font-size-sm);
    color: #64748b;
}

.footer-dark-bottom .heart {
    color: #ef4444;
}

.footer-dark-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-dark-legal a {
    font-size: var(--font-size-sm);
    color: #64748b;
    transition: color var(--transition-fast);
}

.footer-dark-legal a:hover {
    color: white;
}

/* ========================================
   ONBOARDING PAGES
======================================== */

.onboarding-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-green-50) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.onboarding-container {
    max-width: 600px;
    width: 100%;
}

/* Onboarding Header */
.onboarding-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.onboarding-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-success) 100%);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}

.onboarding-logo svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.onboarding-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.onboarding-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
}

/* Onboarding Choices */
.onboarding-choices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.onboarding-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 1rem;
    text-decoration: none;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.onboarding-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.onboarding-card--green:hover {
    border-color: var(--color-success);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.onboarding-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-50);
    color: var(--color-primary);
}

.onboarding-card-icon svg {
    width: 24px;
    height: 24px;
}

.onboarding-card--green .onboarding-card-icon {
    background: var(--color-green-50);
    color: var(--color-success);
}

.onboarding-card-content {
    flex: 1;
    min-width: 0;
}

.onboarding-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.onboarding-card-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.5;
}

.onboarding-card-arrow {
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.onboarding-card-arrow svg {
    width: 20px;
    height: 20px;
}

.onboarding-card:hover .onboarding-card-arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

.onboarding-card--green:hover .onboarding-card-arrow {
    color: var(--color-success);
}

/* Onboarding Footer */
.onboarding-footer {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

.onboarding-footer p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.onboarding-footer strong {
    color: var(--color-gray-900);
}

.onboarding-logout {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.onboarding-logout:hover {
    color: var(--color-gray-900);
    text-decoration: underline;
}

/* Onboarding Categories */
.onboarding-category-input {
    display: flex;
    gap: var(--spacing-2);
}

.onboarding-category-input .form-input {
    flex: 1;
}

.onboarding-categories-list {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.onboarding-categories-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-3);
}

.onboarding-categories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.onboarding-category-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.onboarding-category-name {
    color: var(--color-gray-900);
}

.onboarding-category-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.onboarding-category-delete:hover {
    background: var(--color-red-100);
    color: var(--color-red-600);
}

.onboarding-category-delete svg {
    width: 14px;
    height: 14px;
}

.onboarding-categories-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-6);
    color: var(--color-gray-400);
    text-align: center;
}

.onboarding-categories-empty svg {
    width: 32px;
    height: 32px;
}

.onboarding-categories-empty p {
    font-size: var(--font-size-sm);
}

.onboarding-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.onboarding-back:hover {
    color: var(--color-gray-900);
}

.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Espacement vertical par défaut entre champs empilés. Neutralisé dans
       .form-row (l'espacement y est porté par le gap de la grille). */
    margin-bottom: var(--spacing-4);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.required-indicator,
.required {
    color: var(--color-red-500, #ef4444);
    font-weight: 500;
}

.form-input {
    width: 100%;
    background: var(--color-background);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder {
    color: var(--color-gray-400);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Champs date / heure — iOS ignore `width: 100%` tant que l'apparence native
   du contrôle est en place : le champ se réduit à son contenu. Mesuré sur
   iPhone SE, il faisait 119 px là où le champ texte voisin en faisait 325.
   `min-width`, `max-width` et `overflow` n'y peuvent rien : seul
   `appearance: none` rend la main au CSS. */
.form-input[type="date"],
.form-input[type="time"],
.form-input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Revers de `appearance: none` : le contrôle perd aussi sa hauteur implicite
   et s'écrase à 26 px quand il est vide. On rend la hauteur à la ligne de
   texte — en em, pour qu'elle suive la police au lieu d'être figée. Avec
   `font: inherit`, le contenu cesse enfin de s'afficher à la taille du
   navigateur plutôt qu'à la nôtre. */
.form-input[type="date"]::-webkit-date-and-time-value,
.form-input[type="time"]::-webkit-date-and-time-value,
.form-input[type="datetime-local"]::-webkit-date-and-time-value {
    font: inherit;
    margin: 0;
    text-align: left;
    min-height: 1.25em;
}

.form-input[type="date"]::-webkit-datetime-edit,
.form-input[type="time"]::-webkit-datetime-edit,
.form-input[type="datetime-local"]::-webkit-datetime-edit {
    font: inherit;
    padding: 0;
}

/* L'icône de calendrier ne se comprime pas : elle garde sa place, c'est le
   texte qui cède. (Chrome la conserve malgré `appearance: none` ; iOS n'en
   affiche pas et ouvre son sélecteur à la tape.) */
.form-input::-webkit-calendar-picker-indicator {
    flex-shrink: 0;
    margin-left: var(--spacing-2);
    padding: 0;
}

/* Zoom iOS à la prise de focus — sous 16 px, Safari agrandit la page dès
   qu'un champ de saisie reçoit le focus : le formulaire part hors cadre et il
   faut repincer pour voir la suite. Nos champs sont à 13 px, donc tous
   concernés.

   La règle vise les ÉLÉMENTS et non nos classes : le déclencheur est le
   `font-size` calculé, quelle que soit la classe — et il y a une dizaine de
   familles de champs dans l'app (`form-input`, `fv-input`, `size-select`,
   `quantity-input`…) qu'une liste de sélecteurs laisserait filer, aujourd'hui
   ou au prochain écran ajouté. Les contrôles non textuels sont exclus : leur
   taille ne dépend pas de la police et ils ne déclenchent pas le zoom. */
@media (max-width: 480px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* Input Group (for currency, units, etc.) */
.form-input-group {
    display: flex;
    align-items: stretch;
}

.form-input-group .form-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.form-input-group .form-input:focus {
    z-index: 1;
}

.form-input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-3);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

/* Avertissement de champ non bloquant (ex. date dans le passé). */
.field-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-200);
    border-radius: var(--radius-md);
    color: var(--color-orange-800);
    font-size: var(--font-size-sm);
}

.field-warning[hidden] {
    display: none;
}

/* Encart informatif (ex. orienter vers les journées de match). */
.info-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-blue-50, #eff6ff);
    border: 1px solid var(--color-blue-200, #bfdbfe);
    border-radius: var(--radius-lg);
    color: var(--color-blue-800, var(--color-brand));
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.info-callout a {
    color: var(--color-blue-700, var(--color-brand-hover));
    font-weight: 600;
    text-decoration: underline;
}

.info-callout svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-callout--warning {
    background: var(--color-amber-50, #fffbeb);
    border-color: var(--color-amber-200, #fde68a);
    color: var(--color-amber-800, #92400e);
}

/* Search Input with icon */
.search-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-input svg {
    position: absolute;
    left: var(--spacing-3);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-gray-400);
    pointer-events: none;
}

.search-input .form-input {
    padding-left: 2.5rem;
}

/* Form Page Layout - Generic form container/card/header styles */
.form-container {
    max-width: 700px;
    margin: 0 auto;
}

.form-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.form-card--wide {
    max-width: 900px;
}

.form-header {
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    background: linear-gradient(to bottom, var(--color-gray-50), var(--color-background));
}

.form-header--centered {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-2);
}

.form-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-purple-600));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.form-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.form-icon--blue {
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-600));
}

.form-icon--green {
    background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
}

.form-header-text {
    flex: 1;
}

.form-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.form-subtitle {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-6);
    align-items: center;
}

/* Les libellés longs (« Enregistrer sans valider », « Approuver l'inscription »)
   ne doivent pas passer sur deux lignes : sinon le bouton devient plus haut que
   « Annuler ». On garde chaque bouton sur une ligne (même hauteur) ; s'ils ne
   tiennent pas tous, le rang passe à la ligne suivante (flex-wrap ci-dessus). */
.form-actions .btn {
    white-space: nowrap;
}

/* Variante : boutons toujours sur la MÊME ligne (mobile compris) ; en mobile
   ils se partagent la largeur — utilisée quand les libellés courts le permettent. */
.form-actions--inline { flex-wrap: nowrap; }
@media (max-width: 640px) {
    .form-actions--inline .btn { flex: 1; justify-content: center; }
}

/* Form Vertical Layout */
.form-vertical .form-group {
    margin-bottom: 1.5rem;
}

.form-vertical .form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

/* Form Labels */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.required {
    color: var(--color-red-500);
}

/* Form Help Text */
.form-help {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.form-help a {
    color: var(--color-blue-600);
}

.form-help.text-warning {
    color: var(--color-orange-600);
}

/* Form Checkbox */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
}

/* Input with Preview */
.input-with-preview {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.input-with-preview .form-input {
    flex: 1;
}

.icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-gray-100);
    border-radius: 8px;
}

/* Badge System */
.badge--system {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* Select / Dropdown */
.form-select {
    width: 100%;
    background: var(--color-background);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-gray-900);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-select:hover {
    border-color: var(--color-gray-400);
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* Select placeholder style (first empty option) */
.form-select option[value=""] {
    color: var(--color-gray-400);
}

/* Select size variants */
.form-select--sm {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background-position: right 0.5rem center;
    background-size: 0.875rem;
}

.form-select--lg {
    padding: 1rem 3rem 1rem 1.25rem;
    font-size: 1.0625rem;
    background-position: right 1rem center;
    background-size: 1.125rem;
}

/* Note: .btn-lg et .btn-full définis plus haut */

.btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

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

.btn-success:hover {
    background: #16a34a;
}

/* Info Box */
.onboarding-info {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--color-blue-50);
    border-radius: var(--radius-md);
}

.onboarding-info-icon {
    flex-shrink: 0;
    color: var(--color-primary);
}

.onboarding-info-icon svg {
    width: 20px;
    height: 20px;
}

.onboarding-info p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Welcome Page */
.onboarding-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem;
}

.onboarding-welcome-card {
    background: var(--color-background);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.onboarding-welcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--color-green-50);
    border-radius: var(--radius-full);
    color: var(--color-green-500);
    margin-bottom: 1.5rem;
}

.onboarding-welcome-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 0.75rem 0;
}

.onboarding-welcome-subtitle {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.onboarding-welcome-club {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-bottom: 2rem;
    text-align: left;
}

.onboarding-welcome-club-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-muted-foreground);
    flex-shrink: 0;
}

.onboarding-welcome-club-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.onboarding-welcome-club-label {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

.onboarding-welcome-club-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.onboarding-welcome-club-season {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
}

.onboarding-welcome-hint {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    margin: 1rem 0 0 0;
}

/* Steps Page */
.onboarding-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem;
}

.onboarding-steps-card {
    background: var(--color-background);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 520px;
}

/* Progress Bar */
.onboarding-progress {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.onboarding-progress-step {
    flex: 1;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
}

.onboarding-progress-step--active {
    background: var(--color-primary);
}

.onboarding-progress-step--completed {
    background: var(--color-primary);
}

.onboarding-steps-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 0.5rem 0;
}

.onboarding-steps-subtitle {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    margin: 0 0 1.5rem 0;
}

/* Role Selection */
.onboarding-role-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.onboarding-role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.onboarding-role-option {
    cursor: pointer;
}

.onboarding-role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onboarding-role-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all 0.15s ease;
}

.onboarding-role-option input:checked + .onboarding-role-card {
    background: var(--color-blue-50);
    border-color: var(--color-primary);
}

.onboarding-role-option:hover .onboarding-role-card {
    border-color: var(--color-gray-300);
}

.onboarding-role-option input:checked + .onboarding-role-card:hover {
    border-color: var(--color-primary);
}

.onboarding-role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.onboarding-role-option input:checked + .onboarding-role-card .onboarding-role-icon {
    background: var(--color-primary);
    color: white;
}

.onboarding-role-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.25rem;
}

.onboarding-role-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.onboarding-role-desc {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

/* Steps Actions */
.onboarding-steps-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.onboarding-steps-actions .btn-flex-1 {
    flex: 1;
}

/* Profile Form */
.onboarding-profile-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.onboarding-validation-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-100);
    border-radius: var(--radius-lg);
}

.onboarding-validation-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    color: white;
    flex-shrink: 0;
}

.onboarding-validation-notice-icon svg {
    width: 16px;
    height: 16px;
}

.onboarding-validation-notice-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.onboarding-validation-notice-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
}

.onboarding-validation-notice-text {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

.onboarding-skip-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    text-decoration: none;
    margin-top: 0.5rem;
}

.onboarding-skip-link:hover {
    color: var(--color-foreground);
}

/* Complete Page */
.onboarding-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem;
}

.onboarding-complete-card {
    background: var(--color-background);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 520px;
}

.onboarding-complete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--color-blue-50);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    margin: 0 auto 1.5rem;
}

.onboarding-complete-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-foreground);
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.onboarding-complete-subtitle {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

/* Timeline */
.onboarding-timeline {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.onboarding-timeline-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.onboarding-timeline-icon {
    color: var(--color-muted-foreground);
}

.onboarding-timeline-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.onboarding-timeline-desc {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.onboarding-timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 0.5rem;
}

.onboarding-timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
}

.onboarding-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 18px;
    width: 2px;
    height: calc(100% + 0.75rem);
    background: var(--color-gray-200);
}

.onboarding-timeline-step-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
    flex-shrink: 0;
    margin-top: 4px;
}

.onboarding-timeline-step--done .onboarding-timeline-step-dot {
    background: var(--color-primary);
}

.onboarding-timeline-step--done::after {
    background: var(--color-primary) !important;
}

.onboarding-timeline-step--pending .onboarding-timeline-step-dot {
    background: var(--color-gray-300);
    border: 2px solid var(--color-gray-400);
}

.onboarding-timeline-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.onboarding-timeline-step-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
}

.onboarding-timeline-step--future .onboarding-timeline-step-title {
    color: var(--color-muted-foreground);
}

.onboarding-timeline-step-subtitle {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

/* Complete Info */
.onboarding-complete-info {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.onboarding-complete-info-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
}

.onboarding-complete-info-header svg {
    color: var(--color-muted-foreground);
}

.onboarding-complete-info-text {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.onboarding-complete-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.onboarding-complete-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-foreground);
}

.onboarding-complete-checklist svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Complete Tip */
.onboarding-complete-tip {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-yellow-50);
    border: 1px solid var(--color-yellow-200);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.onboarding-complete-tip-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.onboarding-complete-tip p {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    line-height: 1.5;
    margin: 0;
}

.onboarding-complete-tip strong {
    color: var(--color-gray-900);
}

.onboarding-complete-footer {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    text-align: center;
    margin: 1rem 0 0 0;
}

/* Onboarding Save Form (from join.html.twig, profile.html.twig, role.html.twig) */
.onboarding-save-form {
    margin-top: 1.5rem;
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Onboarding Resume Page (from resume.html.twig) */
.onboarding-resume-info {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.onboarding-resume-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-success);
    font-weight: 500;
}

.onboarding-resume-date {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.onboarding-resume-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.onboarding-restart-form {
    margin-top: 0.5rem;
}

/* Responsive */
@media (min-width: 641px) {
    .onboarding-page {
        padding: 2rem;
    }

    .onboarding-card {
        padding: 1.25rem 1.5rem;
    }

    .onboarding-welcome-card {
        padding: 3rem 2.5rem;
    }

    .onboarding-steps-card {
        padding: 2.5rem;
    }

    .onboarding-role-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 420px;
    padding: 1rem 1.25rem;
    background: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
}

.toast-message {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toast-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.toast-close svg {
    width: 1rem;
    height: 1rem;
}

/* Toast Success */
.toast--success {
    border-left: 4px solid var(--color-green-500);
}

.toast--success .toast-icon {
    color: var(--color-green-500);
}

/* Toast Error */
.toast--error {
    border-left: 4px solid var(--color-red-500);
}

.toast--error .toast-icon {
    color: var(--color-red-500);
}

/* Toast Info */
.toast--info {
    border-left: 4px solid var(--color-blue-600);
}

.toast--info .toast-icon {
    color: var(--color-blue-600);
}

/* Toast Warning */
.toast--warning {
    border-left: 4px solid var(--color-orange-500);
}

.toast--warning .toast-icon {
    color: var(--color-orange-500);
}

/* Multiple toasts stacking */
.toast:nth-child(2) {
    top: calc(1.5rem + 5rem);
}

.toast:nth-child(3) {
    top: calc(1.5rem + 10rem);
}

.toast:nth-child(4) {
    top: calc(1.5rem + 15rem);
}

/* Toast - Mobile first */
.toast {
    left: 1rem;
    right: 1rem;
    min-width: auto;
    max-width: none;
}

@media (min-width: 481px) {
    .toast {
        left: auto;
        right: 1.5rem;
        min-width: 300px;
        max-width: 450px;
    }
}

/* ==========================================================================
   Profile Page (Figma Design)
   ========================================================================== */

.profile-page {
    max-width: 1100px;
    margin: 0 auto;
}

/* Two-column Layout */
.profile-layout {
    display: grid;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr 380px;
    }
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Profile Card */
.profile-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

.profile-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.profile-card-title svg {
    color: var(--color-gray-500);
}

/* Profile Avatar */
.profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.profile-avatar-placeholder {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-green-500) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: white;
}

.profile-avatar--large .profile-avatar-img,
.profile-avatar--large .profile-avatar-placeholder,
.profile-avatar-placeholder--large {
    width: 6rem;
    height: 6rem;
    font-size: var(--font-size-2xl);
}

/* Profile User Info */
.profile-user-info {
    flex: 1;
    min-width: 0;
}

.profile-user-name {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.profile-user-email {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Profile Section */
.profile-section {
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--color-gray-100);
}

.profile-section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

/* Profile Personal Info (Figma) */
.profile-personal-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.profile-info-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 481px) {
    .profile-info-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-6);
    }
}

.profile-info-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.profile-info-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray-500);
}

.profile-info-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
}

.profile-info-value svg {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* Profile Clubs List */
.profile-clubs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Profile Club Card (Figma) */
.profile-club-card {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.profile-club-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.profile-club-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--color-blue-600);
    color: var(--color-primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.profile-club-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.profile-club-info {
    flex: 1;
    min-width: 0;
}

.profile-club-name {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

/* Profile Role Badge */
.profile-role-badge {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.profile-role-badge--admin {
    /* `--color-red-500` est une teinte de surface, trop claire pour du texte :
       3,54:1 sur ce fond. L'encre « impayé » est la déclinaison lisible. */
    background: var(--color-unpaid-bg);
    color: var(--color-unpaid-ink);
}

.profile-role-badge--manager {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.profile-role-badge--educator {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.profile-role-badge--member {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* Profile Club Meta */
.profile-club-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
}

.profile-club-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.profile-club-meta-item svg {
    color: var(--color-gray-400);
}

/* Profile Quick Actions */
.profile-quick-actions {
    display: flex;
    flex-direction: column;
}

.profile-quick-action {
    display: block;
    padding: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.profile-quick-action:last-child {
    border-bottom: none;
}

.profile-quick-action:hover {
    background: var(--color-gray-50);
}

.profile-quick-action--danger {
    color: var(--color-red-500);
}

.profile-quick-action--danger:hover {
    background: rgba(239, 68, 68, 0.05);
}

/* Profile Empty State */
.profile-empty {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-gray-500);
}

.profile-empty svg {
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-300);
}

.profile-empty p {
    margin-bottom: var(--spacing-4);
}

/* Profile Info List */
.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.profile-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.profile-info-item:last-child {
    border-bottom: none;
}

.profile-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.profile-info-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Profile Edit Page */
.profile-edit-header {
    margin-bottom: var(--spacing-6);
}

.profile-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-4);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.profile-back:hover {
    color: var(--color-gray-900);
}

.profile-edit-container {
    max-width: 600px;
}

.profile-edit-avatar-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    border-bottom: 1px solid var(--color-gray-200);
}

.profile-edit-avatar-title {
    font-weight: 500;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.profile-edit-avatar-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* ==========================================================================
   Form Container Styles
   ========================================================================== */

.form-container {
    max-width: 560px;
    margin: 0 auto;
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.form-container--lg {
    max-width: 700px;
}

.form-header {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.form-header--with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
}

.form-header-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-purple-600));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.form-header-icon svg {
    width: 20px;
    height: 20px;
}

.form-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-1);
}

.form-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.form-divider {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: var(--spacing-4) 0;
}

.form-row {
    display: grid;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Dans une row, le gap gère l'espacement : pas de marge sur les groupes */
.form-row .form-group {
    margin-bottom: 0;
}

@media (min-width: 480px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.form-input--disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* Aide avec icône : disposition en ligne. Sans icône, la règle générale (bloc)
   s'applique — un flex sur toute aide découpait les phrases contenant un mot en gras. */
.form-hint:has(> svg) {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.form-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.profile-edit-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--color-gray-200);
}

/* Danger Zone */
.profile-card--danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.02);
}

.profile-card-title--danger {
    color: var(--color-red-500);
}

.profile-card-title--danger svg {
    color: var(--color-red-500);
}

.profile-danger-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}

.btn-danger {
    background: var(--color-red-500);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.btn-sm svg {
    width: 1rem;
    height: 1rem;
}

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Profile Activity Card (Figma) */
.profile-card--activity {
    margin-top: 0;
}

/* Activity List (Figma) */
.profile-activity-list {
    display: flex;
    flex-direction: column;
}

.profile-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.profile-activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-activity-item:first-child {
    padding-top: 0;
}

/* Activity Dot */
.profile-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 6px;
}

.profile-activity-dot--blue {
    background: var(--color-blue-500);
}

.profile-activity-dot--green {
    background: var(--color-green-500);
}

.profile-activity-dot--purple {
    background: var(--color-purple-500);
}

.profile-activity-dot--yellow {
    background: var(--color-yellow-500);
}

.profile-activity-dot--red {
    background: var(--color-red-500);
}

.profile-activity-dot--gray {
    background: var(--color-gray-400);
}

/* Activity Content */
.profile-activity-content {
    flex: 1;
    min-width: 0;
}

.profile-activity-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.profile-activity-meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* Empty Activity State */
.profile-empty--activity {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-gray-500);
}

/* Profile - Mobile first overrides */
.profile-card-header {
    flex-direction: column;
    text-align: center;
}

.profile-user-info {
    text-align: center;
}

.profile-edit-avatar-section {
    flex-direction: column;
    text-align: center;
}

.profile-edit-actions {
    flex-direction: column;
}

.profile-edit-actions .btn {
    width: 100%;
}

@media (min-width: 641px) {
    .profile-card-header {
        flex-direction: row;
        text-align: left;
    }

    .profile-user-info {
        text-align: left;
    }

    .profile-edit-avatar-section {
        flex-direction: row;
        text-align: left;
    }

    .profile-edit-actions {
        flex-direction: row;
    }

    .profile-edit-actions .btn {
        width: auto;
    }
}

/* ==========================================================================
   Seasons Page
   ========================================================================== */

.seasons-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.page-header-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.page-header-icon {
    width: 3rem;
    height: 3rem;
    background: var(--color-blue-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-600);
    flex-shrink: 0;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.page-subtitle {
    color: var(--color-gray-600);
}

.page-header-actions {
    flex-shrink: 0;
}

/* Action rapide « + » à droite du titre (mobile) : bouton rond. */
.page-header-fab {
    margin-left: auto;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-600);
    color: #fff;
    text-decoration: none;
}

.page-header-fab:hover {
    background: var(--color-blue-700);
}

.page-header-back {
    margin-bottom: var(--spacing-4);
}

/* Barre de retour à deux liens (retour à gauche, action texte à droite). */
.page-header-back--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.season-stat-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Responsive - Season Page */
@media (min-width: 641px) {
    .season-active-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .season-history-card {
        flex-direction: row;
        align-items: flex-start;
    }

    .season-history-actions {
        align-items: flex-end;
    }
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.status-badge--lg {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Statuts — 5 tons et 5 seulement (handoff v2, point 1). La couleur dit ce
   qu'il faut faire : teal = réglé, jaune = à compléter, ardoise = on attend un
   tiers, rouge = en retard, gris = sorti du circuit. Une icône accompagne
   toujours la couleur (daltonisme). Les anciens modificateurs sont des alias.
   ========================================================================== */
.status-badge--done {
    background: #DBF0EC;
    color: #0A5D51;
}

.status-badge--partial {
    background: #FCEFCE;
    color: #7A5307;
}

.status-badge--waiting {
    background: #EDEFF3;
    color: #263043;
}

.status-badge--late {
    background: #FBE2DE;
    color: #8A2115;
}

.status-badge--off {
    background: #EDEBE6;
    color: #464540;
}

/* Alias des statuts historiques (migration progressive des gabarits). */
.status-badge--active,
.status-badge--approved,
.status-badge--paid,
.status-badge--completed,
.status-badge--confirmed,
.status-badge--validated,
.status-badge--delivered,
.status-badge--received,
.status-badge--distributed,
.status-badge--success { background: #DBF0EC; color: #0A5D51; }

.status-badge--in_progress,
.status-badge--warning,
.status-badge--ongoing { background: #FCEFCE; color: #7A5307; }

.status-badge--pending,
.status-badge--scheduled,
.status-badge--planned,
.status-badge--info,
.status-badge--in { background: #EDEFF3; color: #263043; }

.status-badge--cancelled,
.status-badge--rejected,
.status-badge--unpaid,
.status-badge--expired,
.status-badge--danger { background: #FBE2DE; color: #8A2115; }

.status-badge--inactive,
.status-badge--archived,
.status-badge--exempt,
.status-badge--incomplete,
.status-badge--muted { background: #EDEBE6; color: #464540; }

/* Icon Button */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.btn-icon--success {
    color: var(--color-green-600);
}

.btn-icon--success:hover {
    background: var(--color-green-50);
    color: var(--color-green-700);
}

.btn-icon--deliver {
    color: var(--color-blue-600);
}

.btn-icon--deliver:hover {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
}

.inline-form {
    display: inline;
}

/* Seasons Empty */
.seasons-empty {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-gray-500);
}

.seasons-empty svg {
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-3);
}

/* Season Form */
.season-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.season-form-info {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-blue-50);
    border-radius: var(--radius-lg);
}

.season-form-info-icon {
    flex-shrink: 0;
    color: var(--color-blue-600);
}

.season-form-info p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-1);
}

.season-form-info p:last-child {
    margin-bottom: 0;
    color: var(--color-gray-600);
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all var(--transition-fast);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-blue-600);
    border-color: var(--color-blue-600);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    width: 0.5rem;
    height: 0.25rem;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
    margin-bottom: 2px;
}

.checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkbox-text strong {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
}

.checkbox-text small {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* Season Stats Grid */
.season-stats-grid {
    display: grid;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
    .season-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .season-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.season-stat-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    position: relative;
}

.season-stat-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-3);
}

.season-stat-card-icon.blue {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.season-stat-card-icon.green {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.season-stat-card-icon.purple {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.season-stat-card-icon.orange {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.season-stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.season-stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}

.season-stat-card-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--color-blue-600);
    text-decoration: none;
    font-weight: 500;
}

.season-stat-card-link:hover {
    color: var(--color-blue-700);
}

/* Season Detail Card */
.season-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.season-detail-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.season-detail-card-title svg {
    color: var(--color-gray-500);
}

/* Season Progress */
.season-progress {
    margin-top: var(--spacing-4);
}

.season-progress-bar {
    height: 0.75rem;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.season-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-blue-600) 0%, var(--color-green-500) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.season-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.season-progress-percent {
    font-weight: 500;
    color: var(--color-gray-700);
}

/* Season Info Grid */
.season-info-grid {
    display: grid;
    gap: var(--spacing-4);
}

@media (min-width: 640px) {
    .season-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.season-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.season-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.season-info-value {
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Season Page - Mobile first */
.page-header {
    flex-direction: column;
}

/* Contenu pleine largeur sur mobile → le « + » (page-header-fab) se place à droite du titre. */
.page-header-content {
    width: 100%;
}

.page-header-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
}

.page-header-actions .btn {
    flex: 1;
    white-space: nowrap;
}

@media (min-width: 641px) {
    .page-header {
        flex-direction: row;
    }

    .page-header-content {
        width: auto;
    }

    .page-header-actions {
        flex-direction: row;
        width: auto;
    }

    .page-header-actions .btn {
        width: auto;
    }
}

/* ==========================================================================
   Members Page Styles
   ========================================================================== */

.members-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Members Toolbar */
.members-toolbar {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* Toolbar de validation : checkbox « Tout sélectionner » à gauche,
   bouton « Approuver la sélection » à droite (sinon empilés à gauche). */
.members-toolbar--validation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.members-search-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    /* Recherche + « Plus de filtres » sur la même ligne (y compris en mobile). */
    flex-direction: row;
}
/* La recherche occupe l'espace ; le toggle se place juste à côté. */
.members-search-form .search-input { flex: 1 1 12rem; min-width: 0; }

/* Desktop : champ de recherche un peu plus grand. */
@media (min-width: 768px) {
    .members-search-form .search-input { flex-basis: 24rem; }
    .members-search-form .search-input .form-input { height: 2.75rem; }
}

/* Members List */
.members-list {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.members-list-header {
    display: none;
}

.members-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    align-items: center;
    transition: background var(--transition-fast);
    position: relative;
    cursor: pointer;
}

/* Toute la ligne cliquable → fiche membre : le nom est étiré sur la ligne
   (« stretched link »). Les colonnes contact (mailto/tel) et statut (actions
   approuver/réactiver) restent cliquables via un z-index supérieur. */
.members-list-row .member-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.members-list-col--contact,
.members-list-col--status,
.members-list-col--actions {
    position: relative;
    z-index: 1;
}

.members-list-row:last-child {
    border-bottom: none;
}

.members-list-row:hover {
    background: var(--color-gray-50);
}

.members-list-col--member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.members-list-col--contact {
    display: none;
}

.members-list-col--type,
.members-list-col--status,
.members-list-col--category,
.members-list-col--date {
    display: none;
}

.members-list-col--checkbox {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.members-list-col--actions {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
}

/* Validation list : grille spécifique car une colonne checkbox précède
   les colonnes habituelles (sinon décalage des colonnes et boutons
   d'action qui passent à la ligne). */
.members-list--validation .members-list-row {
    grid-template-columns: 40px 1fr auto;
}

/* Laisse la colonne membre rétrécir pour que le nom soit tronqué
   (text-overflow) au lieu de pousser les boutons d'action hors écran
   sur mobile quand le nom est long. */
.members-list--validation .members-list-col--member {
    min-width: 0;
}

/* Member Avatar */
.member-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-purple-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    min-width: 0;
}

.member-name {
    font-weight: 500;
    color: var(--color-gray-900);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-name:hover {
    color: var(--color-blue-600);
}

.member-age {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Taux de présence (assiduité §39.8) sous le nom, dans la liste des membres. */
.member-attendance {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

/* Page détail assiduité : carte compacte (pas de bloc date gris ; titre + date
   + statut sur la même ligne, statut poussé à droite). */
.attendance-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-3);
    flex-wrap: wrap;
}
.attendance-line .event-card-title {
    margin: 0;
}
.attendance-line .attendance-badge {
    margin-left: auto;
    position: relative;
    z-index: 1;
}

/* Member Type Badge */
.member-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.member-type-badge--player {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.member-type-badge--parent {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.member-type-badge--manager {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.member-type-badge--lg {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.form-select--compact {
    padding: var(--spacing-1) var(--spacing-6) var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    min-width: 100px;
    max-width: 150px;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Member Contact */
.member-contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    transition: color var(--transition-fast);
}

.member-contact:hover {
    color: var(--color-blue-600);
}

.member-contact-empty {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

/* Status Badge - Clickable (for reactivation) */
.status-badge--clickable {
    cursor: pointer;
    border: 1px dashed var(--color-green-400);
    background: var(--color-green-50);
    color: var(--color-green-700);
    transition: all 0.2s ease;
}

.status-badge--clickable:hover {
    background: var(--color-green-100);
    border-style: solid;
    transform: scale(1.02);
}

/* Members Footer */
.members-footer {
    padding: var(--spacing-4);
    text-align: center;
}

.members-count {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   Member Form Styles
   ========================================================================== */

.member-form {
    padding: var(--spacing-4);
}

.member-form .form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.member-form .form-group {
    margin-bottom: var(--spacing-4);
}

.member-form .form-row {
    margin-bottom: var(--spacing-4);
}

.member-form .form-row .form-group {
    margin-bottom: 0;
}

/* Form Section */
.form-section {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.form-section-title svg {
    color: var(--color-gray-400);
}

/* Form Card Container */
.form-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    max-width: 800px;
}

.form-card .form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Première section d'un formulaire : pas de séparateur haut redondant (l'en-tête
   est déjà juste au-dessus). Couvre les formulaires en .form-container, y compris
   ceux qui commencent par un champ caché (_token) comme le formulaire commande. */
.form-container form > .form-section:first-child,
.form-container form > input[type="hidden"]:first-child + .form-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.type-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

/* Form Textarea */
.form-textarea {
    width: 100%;
    padding: var(--spacing-3);
    background: var(--color-background);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--color-blue-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Member Form - Warning Section */
.form-section--warning {
    border: 2px solid var(--color-orange-300);
    background: var(--color-orange-50);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
}

.form-section-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.form-section-badge--warning {
    background: var(--color-orange-500);
    color: white;
}

/* ==========================================================================
   Member Detail Page Styles
   ========================================================================== */

.member-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-6);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.member-detail-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-purple-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.member-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-detail-info {
    flex: 1;
}

.member-detail-badges {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    flex-wrap: wrap;
    justify-content: center;
}

.member-detail-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.member-detail-age {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-500);
}

.member-detail-actions {
    display: flex;
    gap: var(--spacing-3);
    flex-shrink: 0;
    width: 100%;
    flex-direction: column;
}

.member-detail-actions .btn,
.member-detail-actions form {
    width: 100%;
}

.member-detail-actions form .btn {
    width: 100%;
}

/* Member Detail Grid */
.member-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.member-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
}

.member-detail-card--wide {
    grid-column: span 1;
}

.member-detail-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
}

.member-detail-card-title svg {
    color: var(--color-gray-400);
}

/* Member Contact List */
.member-contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* Fiche joueur (PRD §36) */
.fiche-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: 0;
}

.fiche-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fiche-row dt {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-500, var(--n-500));
}

.fiche-row dd {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-900, #111827);
}

.fiche-positions {
    margin: 0;
    padding-left: 1.2em;
}

.fiche-positions li {
    margin: 0;
}

/* Ligne de contact : le lien occupe toute la place, le bouton de copie se pose
   à côté — il ne peut pas vivre dans le lien (§ fiche membre). */
.member-contact-row {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
}

.member-contact-row > .member-contact-item {
    flex: 1;
    min-width: 0;
}

.member-contact-copy {
    flex: none;
    width: var(--tap-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.member-contact-copy:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.member-contact-copy:focus-visible {
    box-shadow: var(--focus-ring);
}

.member-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.member-contact-item:hover {
    background: var(--color-gray-100);
}

.member-contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.member-contact-content {
    display: flex;
    flex-direction: column;
}

.member-contact-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.member-contact-value {
    color: var(--color-gray-900);
    font-weight: 500;
}

.member-contact-empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    padding: var(--spacing-3);
}

/* Member Address */
.member-address {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.member-address-line {
    color: var(--color-gray-900);
}

.member-address-empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

/* Member Relations (Parents/Children) */
.member-relations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.member-relation-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, transform 0.2s;
}

.member-relation-item:hover {
    background: var(--color-gray-100);
    transform: translateX(4px);
}

.member-relation-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.member-relation-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.member-relation-info {
    flex: 1;
    min-width: 0;
}

.member-relation-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    display: block;
}

.member-relation-type {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.member-relation-arrow {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* Member Children List (simplified) */
.member-children-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.member-child-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary-600);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color 0.2s;
}

.member-child-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.member-child-link svg {
    flex-shrink: 0;
}

/* Member Seasons List */
.member-seasons-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.member-season-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.member-season-item.active {
    background: var(--color-green-50);
    border: 1px solid var(--color-green-100);
}

.member-season-name {
    font-weight: 500;
    color: var(--color-gray-900);
}

.member-season-category {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-left: var(--spacing-2);
}

.member-season-dates {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.member-seasons-empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

.member-season-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

/* Member Affiliations List */
.member-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.member-detail-card-header .member-detail-card-title {
    margin-bottom: 0;
}

.member-detail-card-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-gray-500);
    margin-left: var(--spacing-2);
}

.affiliations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.affiliation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
}

.affiliation-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.affiliation-category {
    font-weight: 500;
    color: var(--color-gray-900);
}

.affiliation-category a {
    color: inherit;
    text-decoration: none;
}

.affiliation-category a:hover {
    color: var(--color-primary-600);
}

.affiliation-type {
    font-size: var(--font-size-xs);
}

.affiliation-actions {
    display: flex;
    gap: var(--spacing-1);
}

.affiliations-empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Membership Type Badges */
.member-type-badge--player {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.member-type-badge--educator {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.member-type-badge--coach {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.member-type-badge--manager {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
}

.member-type-badge--staff {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Member Licenses List */
.member-licenses-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.member-license-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.member-license-number {
    font-weight: 500;
    color: var(--color-gray-900);
}

.member-license-season {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-left: var(--spacing-2);
}

.member-licenses-empty {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}

/* Member Notes */
.member-notes {
    color: var(--color-gray-700);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Member Info List */
.member-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.member-info-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.member-info-item:last-child {
    border-bottom: none;
}

.member-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.member-info-value {
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Danger Button */
.btn-danger {
    background: var(--color-red-500);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: background var(--transition-fast);
}

.btn-danger:hover {
    background: #dc2626;
}

/* Ghost Button */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-gray-500);
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Lien-bouton (actions « tout cocher / décocher »). Remonté depuis un
   <style> inline ; le token --primary-color y était indéfini. */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-blue-600);
    font-size: 0.8125rem;
    cursor: pointer;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Pastille de compteur sur un bouton (ex. nombre de catégories) */
.btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-blue-600);
    color: white;
    border-radius: 9px;
}

/* Members Page Responsive */
@media (min-width: 640px) {
    .members-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .members-search-form {
        flex-direction: row;
    }

    .search-input {
        flex: 1;
        min-width: 200px;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .members-search-form {
        flex-wrap: nowrap;
    }

    .search-input {
        min-width: 150px;
    }

    .members-search-form .form-select {
        flex: 0;
        min-width: 180px;
    }
}

@media (min-width: 768px) {
    .members-list-header {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 80px;
        gap: var(--spacing-4);
        padding: var(--spacing-3) var(--spacing-4);
        background: var(--color-gray-50);
        border-bottom: 1px solid var(--color-gray-200);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .members-list-row {
        grid-template-columns: 2fr 1fr 1fr 1fr 80px;
        gap: var(--spacing-4);
    }

    /* Validation : checkbox + membre + type + date + actions.
       Colonne actions à 180px (largeur fixe identique en-tête/lignes
       pour rester aligné) : les boutons « Approuver »/« Rejeter »
       affichent leur texte dès 768px et débordaient sur la colonne date
       avec 100px. */
    .members-list--validation .members-list-header,
    .members-list--validation .members-list-row {
        grid-template-columns: 40px 2fr 1fr 1fr 180px;
    }

    .members-list-col--type,
    .members-list-col--status,
    .members-list-col--category,
    .members-list-col--date {
        display: block;
    }

    .member-detail-header {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .member-detail-badges {
        justify-content: flex-start;
    }

    .member-detail-actions {
        width: auto;
        flex-direction: row;
    }

    .member-detail-actions .btn,
    .member-detail-actions form {
        width: auto;
    }

    .member-detail-actions form .btn {
        width: auto;
    }

    .member-season-item {
        grid-template-columns: 1fr auto auto;
        gap: var(--spacing-4);
    }
}

@media (min-width: 1024px) {

    .members-list-header,
    .members-list-row {
        grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr 100px;
    }

    /* Validation : checkbox + membre + type + contact + date + actions */
    .members-list--validation .members-list-header,
    .members-list--validation .members-list-row {
        grid-template-columns: 40px 2fr 1fr 1.5fr 1fr 180px;
    }

    .members-list-col--contact {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .member-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .member-detail-card--wide {
        grid-column: span 2;
    }
}

/* ==========================================================================
   Sortable Header Component
   ========================================================================== */

.sortable-header {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.sortable-header:hover {
    color: var(--color-primary-600);
}

.sortable-header--active {
    color: var(--color-primary-600);
    font-weight: 600;
}

.sortable-header svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Member New Page - Parent Select and Modal (from new.html.twig)
   ========================================================================== */

/* Parent select wrapper */
.parent-select-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.parent-select-wrapper .form-select {
    flex: 1;
}

/* Modal styles for add parent */
#addParentModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

#addParentModal.open {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    visibility: visible;
}

#addParentModal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

#addParentModal .modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    margin: 1rem;
    z-index: 1001;
}

#addParentModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 0.75rem 0.75rem 0 0;
}

#addParentModal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-gray-900);
}

#addParentModal .modal-close {
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--n-500);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s;
}

#addParentModal .modal-close:hover {
    background: #f3f4f6;
    color: var(--color-gray-900);
}

#addParentModal .modal-body {
    padding: 1.5rem;
    background: #ffffff;
}

#addParentModal .modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Spinner for loading state */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

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

/* ==========================================================================
   Member Compare Page Styles (from compare.html.twig)
   ========================================================================== */

.compare-page {
    max-width: 900px;
    margin: 0 auto;
}

.compare-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.compare-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}

.compare-section-desc {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    margin-bottom: var(--spacing-4);
}

.member-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.member-option {
    display: block;
    cursor: pointer;
}

.member-option input {
    display: none;
}

.member-option-content {
    padding: var(--spacing-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
}

.member-option.selected .member-option-content {
    border-color: var(--color-green-500);
    background: var(--color-green-50);
}

.member-option:not(.selected) .member-option-content {
    border-color: var(--color-red-200);
    background: var(--color-red-50);
}

.member-option-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.compare-page .member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.compare-page .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-page .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
}

.compare-page .member-name {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.selection-badge {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.keep-badge {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.delete-badge {
    background: var(--color-red-100);
    color: var(--color-red-700);
}

/* Scroll horizontal sur mobile pour le tableau de comparaison (nombreuses
   colonnes) : sans ça, il est coupé par .app-main { overflow: hidden }. */
.fields-comparison {
    overflow-x: auto;
}

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

.comparison-table th,
.comparison-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    background: var(--color-gray-50);
}

.field-label {
    font-weight: 500;
    color: var(--color-muted-foreground);
}

.primary-value {
    background: var(--color-green-50);
}

.duplicate-value {
    background: var(--color-red-50);
}

.field-action {
    text-align: center;
}

.field-checkbox {
    width: 18px;
    height: 18px;
}

.relations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-4);
}

.relation-card {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.relation-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    font-weight: 500;
    color: var(--color-muted-foreground);
}

.relation-count {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-foreground);
}

.relation-duplicate {
    font-size: var(--font-size-sm);
    color: var(--color-green-600);
}

.compare-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
}

@media (max-width: 640px) {
    .member-selection {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Member Duplicates Page Styles (from duplicates.html.twig)
   ========================================================================== */

.duplicates-page {
    max-width: 900px;
    margin: 0 auto;
}

.duplicate-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.duplicate-group-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.duplicate-group-header {
    padding: var(--spacing-4);
    background: var(--color-yellow-50);
    border-bottom: 1px solid var(--color-border);
}

.duplicate-group-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.duplicate-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-yellow-100);
    color: var(--color-yellow-800);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.duplicate-key {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.duplicate-members-list {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.duplicate-member-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.member-avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-sm {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.duplicate-member-info {
    flex: 1;
    min-width: 0;
}

.duplicate-member-name {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.duplicate-member-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.duplicate-member-details span:not(:last-child)::after {
    content: '\2022';
    margin-left: var(--spacing-2);
}

.duplicate-member-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.duplicate-group-actions {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-gray-50);
}

.select-pair-message {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.select-pair-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.btn-xs {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   Member Validation Page Styles (from validation.html.twig)
   ========================================================================== */

.validation-page {
    max-width: 1200px;
    margin: 0 auto;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

/* Validation Page - Reject Modal Styles */
#reject-modal.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reject-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

#reject-modal .modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    margin: var(--spacing-4);
    box-shadow: var(--shadow-xl);
}

#reject-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

#reject-modal .modal-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

#reject-modal .modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted-foreground);
    padding: var(--spacing-1);
}

#reject-modal .modal-close:hover {
    color: var(--color-foreground);
}

#reject-modal .modal-body {
    padding: var(--spacing-4);
}

#reject-modal .modal-text {
    margin-bottom: var(--spacing-4);
}

#reject-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* Responsive - Validation Page */
@media (max-width: 768px) {
    .validation-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .validation-card-checkbox {
        grid-row: span 2;
    }

    .validation-card-avatar {
        display: none;
    }

    .validation-card-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Categories Page Styles
   ========================================================================== */

.categories-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.category-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
    cursor: pointer;
}
/* Toute la carte cliquable vers la catégorie (lien étiré sur le nom), comme les
   pages événements/membres. Les actions restent cliquables (z-index au-dessus). */
.category-card-link {
    color: inherit;
    text-decoration: none;
}
.category-card-actions,
.category-card-drag {
    position: relative;
    z-index: 1;
}

.category-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Drag and Drop States */
.category-card--dragging {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.category-card--placeholder {
    background: var(--color-blue-50);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-xl);
    min-height: 80px;
}

.category-card-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-gray-400);
    cursor: grab;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    transition: color 0.15s, background 0.15s;
}

.category-card-drag:hover {
    color: var(--color-gray-600);
    background: var(--color-gray-100);
}

.category-card-drag:active {
    cursor: grabbing;
}

.category-card-drag svg {
    stroke-width: 3;
}

/* Groupe de droite : badge + compteur puis actions, sur la ligne du nom. */
.category-card-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.category-card-order {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.categories-empty,
.categories-no-club {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

.categories-empty h3,
.categories-no-club h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.categories-empty p,
.categories-no-club p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-6);
    max-width: 400px;
}

.categories-empty .btn,
.categories-no-club .btn {
    margin-bottom: var(--spacing-4);
}

/* Form Toggle */
.form-toggle {
    display: flex;
    align-items: center;
}

.form-toggle input[type="checkbox"] {
    display: none;
}

.form-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
}

.form-toggle-switch {
    width: 44px;
    height: 24px;
    background: var(--color-gray-300);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
}

.form-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.form-toggle input:checked + .form-toggle-label .form-toggle-switch {
    background: var(--color-primary-500);
}

.form-toggle input:checked + .form-toggle-label .form-toggle-switch::after {
    transform: translateX(20px);
}

.form-toggle-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* ==========================================================================
   Orders Page Styles
   ========================================================================== */

.orders-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Product Detail Page */
.product-detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.product-detail-image {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-300);
}

.product-detail-info {
    flex: 1;
}

.product-detail-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2);
}

.product-detail-ref {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-family: ui-monospace, monospace;
}

.product-detail-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.product-detail-price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-blue-600);
    margin-bottom: var(--spacing-3);
}

.product-detail-description {
    color: var(--color-gray-600);
    line-height: 1.6;
}

.product-detail-actions {
    display: flex;
    gap: var(--spacing-3);
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.product-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.product-detail-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.product-detail-card-header svg {
    color: var(--color-gray-500);
}

.product-detail-card-header h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
}

.product-detail-card-content {
    padding: var(--spacing-4);
}

.product-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.product-detail-row:last-child {
    border-bottom: none;
}

.product-detail-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.product-detail-value {
    font-weight: 500;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.product-detail-value--lg {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.product-stock-list {
    margin-top: var(--spacing-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.product-stock-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.product-stock-size {
    color: var(--color-gray-600);
}

.product-stock-qty {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Danger Zone */
.danger-zone {
    background: var(--color-background);
    border: 1px solid var(--color-red-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
}

.danger-zone-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-red-600);
    margin-bottom: var(--spacing-2);
}

.danger-zone-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
    .product-detail-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .product-detail-actions {
        flex-shrink: 0;
    }

    .product-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Carte commande compacte sur mobile : référence + statut + actions sur la 1re ligne,
   membre puis métadonnées (articles · montant · date) dessous. Les boutons d'action
   (payer / livrer) restent accessibles. */
@media (max-width: 768px) {
    .orders-list-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-1) var(--spacing-3);
    }

    .orders-list-col--reference,
    .orders-list-col--member,
    .orders-list-col--items,
    .orders-list-col--amount,
    .orders-list-col--status,
    .orders-list-col--date {
        display: block;
        min-width: 0;
    }

    .orders-list-col--reference { order: 1; flex: 1 1 auto; font-size: 0.9375rem; }
    .orders-list-col--status { order: 2; }
    .orders-list-col--actions { order: 3; flex: 0 0 auto; }
    .orders-list-col--member { order: 4; flex: 1 1 100%; font-size: 0.875rem; color: var(--color-gray-700); }
    .orders-list-col--items { order: 5; }
    .orders-list-col--amount { order: 6; font-weight: 700; color: var(--color-gray-800); }
    .orders-list-col--date { order: 7; }

    .orders-list-col--items,
    .orders-list-col--amount,
    .orders-list-col--date {
        font-size: 0.8125rem;
        color: var(--color-gray-500);
    }

    .orders-list-col--amount::before,
    .orders-list-col--date::before {
        content: "·";
        margin-right: var(--spacing-2);
        color: var(--color-gray-300);
    }
}

/* Order Member */
.order-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Order Amount */
.order-amount {
    font-weight: 600;
    color: var(--color-gray-900);
}

.orders-count {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Order Items Container */
.order-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.order-item {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.order-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-200);
}

.order-item-number {
    font-weight: 600;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.order-item-remove {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    transition: all var(--transition-fast);
}

.order-item-remove:hover {
    background: var(--color-red-500);
    color: white;
}

.order-item-content {
    padding: var(--spacing-4);
}

.order-item-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}

.order-item-options .form-group--sm.is-hidden {
    display: none;
}

.form-group--sm {
    flex: 1;
    min-width: 80px;
    max-width: none;
    margin-bottom: 0; /* disposés en flex avec gap (options de commande) */
}

.order-item-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-gray-200);
}

.order-item-price-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.order-item-price-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Add Item Button */
.order-add-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-3);
    margin-top: var(--spacing-3);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-xl);
    color: var(--color-gray-500);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.order-add-item:hover {
    border-color: var(--color-blue-600);
    color: var(--color-blue-600);
    background: var(--color-blue-50);
}

/* Order No Equipment */
.order-no-equipment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    color: var(--color-gray-400);
    text-align: center;
}

/* Order Summary */
.order-summary {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    color: var(--color-gray-600);
}

.order-summary-total {
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-3);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Form Hint Warning */
.form-hint--warning {
    color: var(--color-orange-600);
}

.form-hint--warning a {
    color: var(--color-blue-600);
    text-decoration: underline;
}

/* Order Item Options */
.order-item-option {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin-right: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Order New Form - Initials Price Hint
   Source: templates/order/new.html.twig
   -------------------------------------------------------------------------- */
.initials-price-hint {
    font-weight: normal;
    font-size: 0.85em;
    color: var(--color-primary, var(--color-brand));
}

/* --------------------------------------------------------------------------
   Product Form - File Upload Styles
   Source: templates/equipment/new.html.twig, templates/equipment/edit.html.twig
   -------------------------------------------------------------------------- */
.file-upload-wrapper {
    position: relative;
}

.form-input-file {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-input-file:hover {
    border-color: var(--primary-color, var(--color-brand));
}

.file-upload-preview {
    margin-top: 12px;
    position: relative;
    display: inline-block;
}

.file-upload-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-color, #e0e0e0);
}

.btn-remove-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-remove-preview:hover {
    background: #dc2626;
}

/* Product Edit Form - Current Image (from equipment/edit.html.twig) */
.current-image {
    margin-bottom: 12px;
}

.current-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-color, #e0e0e0);
    transition: opacity 0.2s;
}

.current-image-actions {
    margin-top: 8px;
}

.checkbox-inline {
    display: inline-flex;
}

/* ==========================================================================
   Order Receive Page Styles
   Source: templates/order/receive.html.twig
   ========================================================================== */
.receive-page {
    max-width: 1100px;
    margin: 0 auto;
}

.receive-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Receive Header Card */
.receive-header-card {
    background: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-blue-700) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.receive-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.receive-header-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.receive-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
}

.receive-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin: var(--spacing-1) 0 0;
}

.receive-header-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}

.receive-stat {
    text-align: center;
}

.receive-stat-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.receive-stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.receive-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
}

/* Receive Distribution Card */
.receive-distribution-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.receive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.receive-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.receive-card-actions {
    display: flex;
    gap: var(--spacing-2);
}

.btn-sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* Receive Table */
.receive-table-wrapper {
    overflow-x: auto;
}

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

.receive-table th {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-gray-200);
}

.receive-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}

/* Barre de filtres de la réception (§54.8) : on ne coche que ce qu'on voit. */
/* Relance des non-répondants sur la fiche événement (§60). */
.event-remind {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-3);
    margin: 0 0 var(--spacing-4);
}

.event-remind-note {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.receive-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-4) var(--spacing-3);
}

.receive-filter-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
}

.receive-filter-search i {
    position: absolute;
    left: var(--spacing-3);
    color: var(--color-gray-500);
    pointer-events: none;
}

.receive-filter-search .form-input {
    width: 100%;
    padding-left: calc(var(--spacing-3) * 2 + 16px);
}

.receive-filters .form-select {
    flex: 0 1 auto;
    width: auto;
}

.receive-filter-count {
    margin: 0;
    padding: 0 var(--spacing-4) var(--spacing-3);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

/* `hidden` doit l'emporter sur l'affichage de ligne de tableau. */
.receive-table tbody tr[hidden] {
    display: none;
}

.receive-table tbody tr:last-child td {
    border-bottom: none;
}

.receive-table tbody tr:hover {
    background: var(--color-gray-50);
}

.receive-row--received {
    background: var(--color-blue-50);
}

.receive-row--received:hover {
    background: var(--color-blue-100) !important;
}

.receive-row--delivered {
    background: var(--color-green-50);
}

.receive-row--delivered:hover {
    background: var(--color-green-100) !important;
}

.receive-table-col--check {
    width: 50px;
    text-align: center;
}

/* Receive Custom Checkbox */
.receive-checkbox-input {
    display: none;
}

.receive-checkbox-label {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.receive-checkbox-label:hover {
    border-color: var(--color-blue-500);
}

.receive-checkbox-input:checked + .receive-checkbox-label {
    background: var(--color-blue-600);
    border-color: var(--color-blue-600);
}

.receive-checkbox-input:checked + .receive-checkbox-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.receive-checked-icon {
    color: var(--color-green-600);
}

.receive-table-col--member {
    width: 200px;
}

.receive-member-info {
    min-width: 0;
}

.receive-member-name {
    display: block;
    font-weight: 600;
    color: var(--color-gray-900);
}

.receive-member-ref {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-family: ui-monospace, monospace;
}

.receive-table-col--article {
    min-width: 180px;
}

.receive-article-name {
    font-weight: 500;
    color: var(--color-gray-800);
}

.receive-table-col--details {
    min-width: 150px;
}

.receive-item-details {
    display: flex;
    gap: var(--spacing-1);
    flex-wrap: wrap;
}

.receive-item-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.receive-item-badge--size {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.receive-item-badge--initials {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.receive-item-badge--qty {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
}

.receive-table-col--status {
    width: 130px;
}

.receive-status {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.receive-status--received {
    color: var(--color-blue-600);
}

.receive-status--delivered {
    color: var(--color-green-600);
}

.receive-status--pending {
    color: var(--color-orange-600);
}

.receive-table-col--action {
    width: 100px;
    text-align: center;
}

.inline-form {
    display: inline;
}

.btn-success {
    background: var(--color-green-600);
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.btn-success:hover {
    background: var(--color-green-700);
}

.receive-action-done {
    color: var(--color-green-600);
}

/* Receive Actions */
.receive-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding-top: var(--spacing-2);
}

.btn-lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
}

#submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Receive Print Styles */
@media print {
    .page-header-back,
    .receive-actions,
    .receive-card-actions,
    .receive-checkbox-input,
    .receive-checkbox-label,
    .receive-table-col--action,
    .inline-form {
        display: none !important;
    }

    .receive-page {
        max-width: 100%;
    }

    .receive-header-card {
        background: white !important;
        color: black !important;
        border: 2px solid #333;
    }

    .receive-header-icon {
        background: #eee !important;
        color: #333 !important;
    }

    .receive-stat-divider {
        background: #ccc !important;
    }

    .receive-distribution-card {
        border: 1px solid #333;
    }

    .receive-table {
        font-size: 10pt;
    }

    .receive-table th,
    .receive-table td {
        padding: 8px 10px;
    }

    .receive-row--received {
        background: #e8f5e9 !important;
    }

    .receive-item-badge {
        border: 1px solid #999;
        background: white !important;
    }
}

/* Receive Responsive */
@media (max-width: 768px) {
    .receive-header-card {
        flex-direction: column;
        text-align: center;
    }

    .receive-header-content {
        flex-direction: column;
    }

    .receive-card-header {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .receive-actions {
        flex-direction: column;
    }

    .receive-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Order Submit Page Styles
   Source: templates/order/submit.html.twig
   ========================================================================== */
.order-submit-container {
    max-width: 900px;
    margin: 0 auto;
}

.order-submit-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.order-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-green-50);
    color: var(--color-green-600);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.order-submit-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.order-submit-subtitle {
    color: var(--color-gray-500);
}

.order-submit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.order-submit-stat {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    text-align: center;
}

.order-submit-stat-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.order-submit-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.order-submit-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.order-submit-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.order-submit-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.order-submit-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
    align-items: center;
}

/* Le récapitulatif se recalcule à la coche (§54.7) : une ligne ou un nom
   retirés se masquent par `hidden`, qui perdrait sinon contre `display` ci-dessus. */
.order-submit-table-row[hidden],
.order-submit-detail[hidden] {
    display: none;
}

.order-submit-table-row:last-child {
    border-bottom: none;
}

.order-submit-ref {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.order-submit-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-2);
    background: var(--color-green-100);
    color: var(--color-green-700);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.order-submit-detail {
    display: inline-block;
    background: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    margin: 2px;
}

.order-submit-orders {
    display: grid;
    gap: var(--spacing-2);
}

.order-submit-order-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

/* Choix des commandes qui partent au fournisseur (§54.7) : la carte entière
   est cliquable, la case ne fait que montrer l'état. */
label.order-submit-order-card {
    cursor: pointer;
}

label.order-submit-order-card:has(.order-submit-order-check:not(:checked)) {
    opacity: 0.55;
}

.order-submit-order-check {
    flex: none;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.order-submit-order-check:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Le règlement est une information, pas un verrou : il se lit sans crier. */
.order-submit-order-payment {
    margin-left: auto;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.order-submit-order-payment.is-paid {
    color: var(--color-gray-600);
}

.order-submit-order-payment.is-unpaid {
    color: var(--color-pending-ink);
}

.order-submit-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.order-submit-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.order-submit-hint {
    margin: calc(var(--spacing-2) * -1) 0 var(--spacing-3);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.order-submit-order-ref {
    font-family: ui-monospace, monospace;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-right: var(--spacing-3);
}

.order-submit-order-member {
    color: var(--color-gray-600);
}

.order-submit-order-amount {
    font-weight: 600;
    color: var(--color-green-600);
}

.order-submit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

@media print {
    .page-header-back,
    .order-submit-actions {
        display: none;
    }

    .order-submit-section {
        break-inside: avoid;
    }
}

/* Orders Page Responsive */
@media (min-width: 640px) {
    .orders-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .orders-search-form {
        flex-direction: row;
    }

    .orders-search-form .search-input {
        min-width: 200px;
        width: auto;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {

    .order-item-options {
        flex-direction: row;
        gap: var(--spacing-3);
    }

    .order-item-options .form-group--sm {
        max-width: 140px;
    }

    .order-item-options .form-group--sm.is-hidden {
        visibility: hidden;
    }

    .form-group--sm {
        max-width: 140px;
    }
}

/* ==========================================================================
   Events Page Styles
   ========================================================================== */

.events-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Events List */
.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.event-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    cursor: pointer;
}

/* Toute la carte cliquable vers la fiche (stretched-link sur le titre) — cf. page membres. */
.event-card .event-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.event-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-sm);
}

/* Carte « Journée à préparer » (§38) : lien, léger liseré d'accent à gauche. */
.event-card--matchday {
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--color-accent);
}

.event-card-date {
    width: 100%;
    height: auto;
    padding: var(--spacing-3);
    background: var(--color-primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-card-day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-600);
    line-height: 1;
}

.event-card-month {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-primary-500);
    text-transform: uppercase;
}

.event-card-content {
    flex: 1;
    min-width: 0;
}

.event-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2);
}

.event-card-type {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
}

.event-card-type--training {
    background: var(--color-green-50);
    color: var(--color-green-700);
}

.event-card-type--match {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
}

.event-card-type--tournament {
    background: var(--color-purple-50);
    color: var(--color-purple-700);
}

.event-card-type--other {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.event-card-category {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.event-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

/* Titre + horaire sur la même ligne (horaire juste à droite du libellé) */
.event-card-title-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.event-card-title-row .event-card-title {
    margin: 0;
}

.event-card-title a {
    color: inherit;
    text-decoration: none;
}

.event-card-title a:hover {
    color: var(--color-primary-600);
}

.event-card-time,
.event-card-location {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.event-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    justify-content: flex-end;
}

/* Mobile : carte compacte en ligne (date en petit carré) au lieu de l'empilement
   avec une barre de date pleine largeur → cartes bien moins hautes. */
@media (max-width: 767px) {
    .event-card {
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-3);
        gap: var(--spacing-3);
    }
    .event-card-date {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        flex-direction: column;
        gap: 0;
    }
    .event-card-header { margin-bottom: var(--spacing-1); }
    .event-card-title { font-size: 0.9375rem; }
    .event-card-actions { width: auto; flex-shrink: 0; }
}

/* ==========================================================================
   Event Detail Styles
   ========================================================================== */

.event-detail-header {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    /* Ancre le menu « ⋯ » des actions (positionné en haut à droite en mobile). */
    position: relative;
}

.event-detail-date-block {
    width: 100%;
    height: auto;
    padding: var(--spacing-4);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    border-radius: var(--radius-xl);
    /* Masqué sur mobile (la date est déjà dans la ligne « lundi 3 août… ») ;
       réaffiché en desktop (≥768px). Cf. icône info à côté du titre. */
    display: none;
    flex-direction: row;
    gap: var(--spacing-3);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-detail-day {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.event-detail-month {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.event-detail-info {
    flex: 1;
}

/* Titre + icône info (popup Informations, surtout utile en mobile) */
.event-detail-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}
.event-detail-title-row .event-detail-title {
    margin-bottom: 0;
}
.event-info-modal {
    display: inline-flex;
    flex-shrink: 0;
}
.event-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    transition: background var(--transition-fast);
}
.event-info-toggle:hover {
    background: var(--color-primary-100);
}
/* Popup Informations : contenu aligné à gauche (liste clé/valeur). */
.modal-container--info {
    text-align: left;
    max-width: 440px;
}
.modal-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}
.modal-info-head .modal-title {
    margin: 0;
}
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
    flex-shrink: 0;
}
.modal-close-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}
.modal-container--info .modal-actions {
    margin-top: var(--spacing-5);
    justify-content: flex-end;
}

.event-detail-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2);
}

.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.event-type-badge--training {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.event-type-badge--match {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.event-type-badge--tournament {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.event-type-badge--other {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

/* Chronomètre du match (§37.8) : temps qui défile + pause/reprise. */
.match-clock {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}
.match-clock-time {
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-gray-900);
    margin-right: auto;
}
.match-clock-half {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-600, #1a73e8);
}
/* .btn force display:inline-flex, ce qui masque l'attribut [hidden] : on rétablit
   le masquage pour n'afficher que Pause OU Reprendre. */
.match-clock [hidden] { display: none; }

/* Réglage du chrono (§53.10) : discret, à côté des commandes de marche/arrêt. */
.match-clock-settings-btn {
    color: var(--color-gray-500);
}
.match-clock-settings-btn:hover {
    color: var(--color-gray-900);
}

.match-score {
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0 var(--spacing-2);
}

.match-score--win { color: var(--color-green-600, #16a34a); }
.match-score--loss { color: var(--color-red-600, #dc2626); }
.match-score--draw { color: var(--color-gray-600); }

.match-tag {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.match-tag--win { background: var(--color-green-50, #f0fdf4); color: var(--color-green-700, #15803d); }
.match-tag--loss { background: var(--color-red-50, #fef2f2); color: var(--color-red-700, #b91c1c); }
.match-tag--draw { background: var(--color-gray-100); color: var(--color-gray-700); }

.match-score-form {
    /* Lecture seule par défaut : le crayon (mode édition) révèle le formulaire. */
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding-top: var(--spacing-4);
    margin-top: var(--spacing-2);
    border-top: 1px solid var(--color-gray-100);
}
.match-card--editing .match-score-form { display: flex; }
/* Crayon d'édition poussé à droite du titre de la carte Match (score). */
.match-edit-btn { margin-left: auto; }
/* Bouton « Exporter » à droite du titre de la carte Convocation. */
.card-title-export { margin-left: auto; }

/* Deux groupes de score côte à côte, séparés visuellement : score final | mi-temps. */
.score-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5);
}
.score-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.score-group + .score-group {
    padding-left: var(--spacing-5);
    border-left: 1px solid var(--color-gray-200);
}
.score-group-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
}
.score-group-opt {
    font-weight: 400;
    color: var(--color-gray-500);
}
.score-inline {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-2);
}
.score-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.score-field label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}
.score-field .form-input {
    width: 68px;
    text-align: center;
}
.score-dash {
    padding-bottom: 8px;
    color: var(--color-gray-400);
    font-weight: 700;
}
/* Mobile : les deux groupes s'empilent, le séparateur passe en haut. */
@media (max-width: 560px) {
    .score-groups { flex-direction: column; }
    .score-group + .score-group {
        padding-left: 0;
        border-left: none;
        padding-top: var(--spacing-4);
        border-top: 1px solid var(--color-gray-200);
    }
}

.match-score-form .form-input {
    width: 72px;
}

.lineup-row {
    display: grid;
    grid-template-columns: 48px minmax(110px, 2fr) 70px 1.3fr 64px 64px 56px 64px;
    gap: var(--spacing-2);
    align-items: center;
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

/* Composition (PRD §37.8) : n° de maillot + nom, placement sur le schéma. */
.lineup-jerseys-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}
.lineup-jerseys-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lineup-jerseys {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin: var(--spacing-2) 0 var(--spacing-3);
}

.lineup-row--jersey {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--spacing-2);
    align-items: center;
}
/* Titulaire (placé sur le terrain) : numéro mis en évidence dans la liste. */
.lineup-row--placed .form-input {
    border-color: var(--color-primary-600, #1a73e8);
    font-weight: 700;
}

/* Composition figée (lecture seule) : la liste des joueurs (source de données du
   schéma) reste masquée — le terrain suffit. L'attribut [hidden] du bloc était
   contourné par « .lineup-jerseys { display: flex } » ; on le rétablit. */
.lineup-frozen-body .lineup-jerseys[hidden] {
    display: none;
}

.lineup-compo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
}
/* Rappel de ce qui manque pour lancer le match (11 titulaires + capitaine). */
.lineup-launch-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
/* Bouton « Lancer » désactivé tant que la compo n'est pas complète. */
.lineup-compo-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Capitaine (§37.8) : sélecteur mis en évidence sous le terrain (composition). */
.captain-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    margin: var(--spacing-3) 0 var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-primary-600, #1a73e8);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}
.captain-picker-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 700;
    color: var(--color-gray-900);
}
.captain-picker .form-select { min-width: 180px; }
.captain-picker-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* Compo figée repliable (match lancé) : la timeline reste l'élément principal. */
.lineup-frozen-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-600);
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) 0;
}
.lineup-frozen-toggle:hover {
    color: var(--color-gray-900);
}
.lineup-frozen-chevron {
    transition: transform 0.15s ease;
}
.lineup-frozen--collapsed .lineup-frozen-chevron {
    transform: rotate(-90deg);
}
.lineup-frozen--collapsed .lineup-frozen-body {
    display: none;
}

/* Joueur placé sur un poste, en lecture seule (match lancé). */
.lineup-slot-player {
    display: block;
    font-size: 0.625rem;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    text-align: center;
}

/* Liste de convocation (PRD §37.8) : cases à cocher auto-enregistrées. */
.convocation-list {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-2);
}

.convocation-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
}

.convocation-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.convocation-name {
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Bloc d'infos à droite d'une ligne de convocation : taux de présence + icône postes. */
.convocation-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.convocation-rate {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Icône « i » : détail des postes préférés / à éviter (§36). */
.convocation-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    cursor: pointer;
    border-radius: 6px;
}

.convocation-info:hover {
    color: var(--color-primary, #1C2536);
    background: var(--color-gray-100);
}

/* Fil d'étapes du parcours match (Présence → Convocation → Composition → Match). */
.match-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-4) 0;
}

.match-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-gray-400);
}

.match-step:not(:last-child)::after {
    content: "→";
    margin-left: var(--spacing-1);
    color: var(--color-gray-300);
}

.match-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    font-size: 0.72rem;
    font-weight: 700;
}

.match-step-label {
    color: inherit;
    text-decoration: none;
}
/* Étape cliquable (Convocation / Composition) : bouton rendu à l'identique du
   libellé « Présence » (même CSS, sans style bouton). */
.match-step-form { display: contents; }
.match-step-label--action {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.match-step.is-done {
    color: var(--color-gray-600);
}

.match-step.is-done .match-step-num {
    background: var(--color-positive, #0F7C6C);
    color: #fff;
}

.match-step.is-current {
    color: var(--color-primary, #1C2536);
    font-weight: 700;
}

.match-step.is-current .match-step-num {
    background: var(--color-accent, #F0B429);
    color: #1C2536;
}

/* Ligne « Tout convoquer » : séparée du reste du pool. */
.convocation-row--all {
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--spacing-1);
}

/* Terrain de composition (PRD §37.8) */
.lineup-pitch {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: var(--spacing-3) auto;
    aspect-ratio: 2 / 3;
    background: linear-gradient(180deg, var(--color-positive) 0%, #0C6A5C 100%);
    border: 2px solid #ffffff;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Terrain enveloppé pour poser le bouton « Vider » en haut à droite du schéma. */
.lineup-pitch-wrap {
    position: relative;
    max-width: 380px;
    margin: var(--spacing-3) auto;
}
.lineup-pitch-wrap .lineup-pitch {
    margin: 0;
    max-width: none;
}
.lineup-clear-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    color: #dc2626;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.lineup-clear-btn:hover { background: #ffffff; }

.lineup-pitch::before {
    /* ligne médiane */
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
}

.lineup-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 62px;
    text-align: center;
}

.lineup-slot select {
    width: 62px;
    font-size: 0.625rem;
    padding: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.lineup-slot-label {
    display: block;
    font-size: 0.5625rem;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    margin-bottom: 1px;
}

/* Pastille « C » du capitaine, sur le poste (§37.8). */
.lineup-captain-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent, #f0a020);
    color: #ffffff;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.lineup-bench {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin: var(--spacing-2) 0 var(--spacing-3);
}

.lineup-bench b {
    color: var(--color-gray-900);
}

/* Timeline du match (PRD §37.8) */
.timeline-list {
    list-style: none;
    margin: 0 0 var(--spacing-3);
    padding: 0;
}

.timeline-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
}

.timeline-minute {
    min-width: 48px;
    font-weight: 700;
    color: var(--color-gray-500);
    font-variant-numeric: tabular-nums;
}

/* Passeur d'un but (§37.8), discret à côté du buteur. */
.timeline-assist { color: var(--color-gray-500); font-size: var(--font-size-sm); }

/* Commentaire libre affiché sur sa propre ligne sous l'évènement. */
.timeline-comment {
    flex-basis: 100%;
    padding-left: 56px;
    color: var(--color-gray-600);
    font-style: italic;
}

.timeline-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.timeline-who {
    flex: 1;
    color: var(--color-gray-900);
}

.timeline-item--yellow_card .timeline-label svg { color: var(--color-accent); fill: var(--color-accent); }
.timeline-item--red_card .timeline-label svg { color: #dc2626; fill: #dc2626; }
.timeline-item--goal .timeline-label svg { color: var(--color-primary-600, #1a73e8); }

/* Timeline verrouillée par défaut (score saisi) : suppression et formulaire
   masqués ; le crayon (.timeline-card--editing) les révèle. */
.timeline-delete { margin: 0; display: none; }
.timeline-card--editing .timeline-delete { display: block; }

.timeline-form {
    display: none;
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--spacing-3);
}
.timeline-card--editing .timeline-form { display: block; }

/* Bouton « Ajouter un évènement » sous le chronomètre : ouvre le formulaire en popup. */
.match-add-event-btn { margin-bottom: var(--spacing-4); }

/* Accès à la vue « direct » depuis la feuille de match (§53). */
.live-access-btn { margin-bottom: var(--spacing-4); }

/* Fusion de commandes (§54.4) : bandeau sous les actions de la fiche. */
.order-merge {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    border: 1px dashed var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}
.order-merge-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}
.order-merge-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-gray-700); }
.order-merge .form-hint { margin: var(--spacing-2) 0 0; }

/* Formulaire timeline présenté en popup : toujours visible, aligné à gauche. */
.timeline-form--modal {
    display: block;
    border-top: none;
    padding-top: 0;
    text-align: left;
}
.modal-container--form {
    max-width: 460px;
    text-align: left;
}
/* .form-group force display:flex, ce qui neutralise l'attribut [hidden] : on rétablit
   le masquage des champs conditionnels (sortant / passeur). */
.timeline-form--modal .form-group[hidden] { display: none; }

/* Marqueur de mi-temps (§53) : ligne discrète, sans joueur ni suppression. */
.timeline-item--half_time { color: var(--color-gray-500); font-weight: 600; }
.timeline-item--half_time .timeline-label svg { color: var(--color-gray-400); }

/* === Vue « direct » (§53) : titre + score + chrono + évènements, sans scroll === */
.live-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--spacing-4);
    gap: var(--spacing-4);
}
.live-header { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }
.live-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    flex-shrink: 0;
}
.live-title { font-size: var(--font-size-lg); font-weight: 700; margin: 0; }
.live-sub { font-size: var(--font-size-sm); color: var(--color-gray-500); margin: 0; }
.live-score {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-4);
    color: var(--color-gray-900);
}
.live-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 40vw;
}
.live-team-name {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.live-team--ours .live-team-name { color: var(--color-primary-600, #1a73e8); font-weight: 700; }
.live-score-value {
    font-size: 3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.live-score-sep { color: var(--color-gray-300); font-size: 3rem; font-weight: 800; line-height: 1; align-self: center; }
.live-clock .match-add-event-btn { margin-bottom: 0; }
/* Mi-temps en cours bien visible : bandeau centré en tête de la carte chrono. */
.live-clock .match-clock-half {
    order: -1;
    flex-basis: 100%;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-200);
}
/* Évènements : occupent la place restante et défilent seuls si nombreux. */
.live-events { flex: 1; overflow-y: auto; min-height: 0; }
.live-events .timeline-delete { display: block; }

/* Accès au direct : bouton primaire dédié. */
.live-access-btn { margin-bottom: var(--spacing-4); }

/* Partage spectateurs (§53) : lien public copiable + activation/révocation. */
.live-share {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    border: 1px dashed var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}
.live-share-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin: 0 0 var(--spacing-2);
}
.live-share-row { display: flex; gap: var(--spacing-2); align-items: center; }
.live-share-row .form-input { flex: 1; min-width: 0; font-size: var(--font-size-sm); }
.live-share-toggle { margin-top: var(--spacing-2); }

/* Page publique : badge Direct + note d'actualisation. */
.live-page--public { max-width: 560px; }
.live-header--public { justify-content: space-between; }
.live-badge {
    align-self: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-red-500, #ef4444);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.live-refresh-note {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin-top: var(--spacing-2);
}

/* Temps écoulé : minutes : secondes côte à côte. */
.time-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.time-inputs .form-input { width: 90px; text-align: center; }
.time-inputs-sep { font-weight: 700; color: var(--color-gray-500); }

.timeline-opponent {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.lineup-name {
    font-weight: 500;
}

.form-select--sm,
.form-input--sm {
    padding: 0.35rem 0.5rem;
    font-size: var(--font-size-sm);
    width: 100%;
}

/* Écran buteurs & passeurs (PRD §37.7) */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-rank {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.ranking-item:nth-child(1) .ranking-rank { background: #fde68a; color: #92400e; }
.ranking-item:nth-child(2) .ranking-rank { background: #e5e7eb; color: #374151; }
.ranking-item:nth-child(3) .ranking-rank { background: #fed7aa; color: #9a3412; }

.ranking-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-gray-900);
}

.ranking-value {
    font-weight: 700;
    color: var(--color-gray-900);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.ranking-unit {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-gray-500);
}

.event-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-3);
}

.event-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Score du match remonté dans l'en-tête (§37.8) : ligne score + crayon d'édition. */
.event-detail-score { margin-top: var(--spacing-3); }
.event-score-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.event-score-head .match-halftime { font-size: var(--font-size-sm); color: var(--color-gray-600); }

.event-detail-time,
.event-detail-location {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.event-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
    width: 100%;
    flex-wrap: wrap;
}

/* Les boutons sont parfois enveloppés (form de soumission, span de modale).
   On rend ces wrappers transparents pour que TOUS les boutons soient des
   enfants flex identiques → même flex, même largeur, même alignement. */
.event-detail-actions > form,
.event-detail-actions > span {
    display: contents;
}

.event-detail-actions .btn {
    /* basis auto (pas 0%) pour que le libellé ne passe jamais sur 2 lignes. */
    flex: 1 1 auto;
    /* Hauteur fixe : sinon un <a> (Modifier) et un <button> (Annuler), ou
       btn-outline (bordure 2px) et btn-primary, n'ont pas la même hauteur.
       box-sizing:border-box absorbe la bordure → toutes identiques. */
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Actions en menu « ⋯ » (mobile) ────────────────────────────────────
   En mobile, les actions (Modifier / Générer / Annuler…) sont regroupées
   derrière un bouton « ⋯ » en haut à droite de l'en-tête, pour laisser le
   suivi des présences remonter. En desktop (≥768px, plus bas), le bouton
   est masqué et la liste redevient une rangée de boutons en ligne. */
.event-detail-actions-wrap {
    position: absolute;
    top: var(--spacing-5);
    right: var(--spacing-5);
    width: auto;
    z-index: 20;
}
.event-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-background);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.event-actions-toggle:hover { background: var(--color-gray-50); }
/* Réserve la place du bouton pour que les badges ne passent pas dessous. */
.event-detail-header .event-detail-info { padding-right: 2.75rem; }
.event-detail-actions-wrap .event-detail-actions {
    display: none;
    position: absolute;
    top: calc(100% + var(--spacing-2));
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    min-width: 12rem;
    max-width: 80vw;
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-2);
    gap: var(--spacing-1);
}
.event-detail-actions-wrap .event-detail-actions.active { display: flex; }
.event-detail-actions-wrap .event-detail-actions .btn {
    width: 100%;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.inline-form {
    display: inline;
}

/* Event Detail Grid — une seule colonne à toutes les largeurs. La colonne
   latérale de 320 px ne portait que la carte « Informations » : elle prenait
   40 % de la zone de contenu pour quatre lignes de métadonnées, lues à
   l'occasion. Ces lignes vivent désormais dans la popup de l'icône « i ». */
.event-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

.event-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Event Detail Cards */
.event-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.event-detail-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.event-detail-card-content {
    padding: var(--spacing-4);
}

.event-attendance-summary {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

/* Event Info List */
.event-info-list {
    margin: 0;
}

.event-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.event-info-item:last-child {
    border-bottom: none;
}

.event-info-item dt {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.event-info-item dd {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-900);
    margin: 0;
}

/* Attendance Stats */
.event-attendance-stats {
    padding: 0 var(--spacing-4) var(--spacing-4);
}

.event-attendance-bar {
    height: 0.5rem;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    display: flex;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.event-attendance-bar-present {
    background: var(--color-green-500);
}

.event-attendance-bar-absent {
    background: var(--color-red-500);
}

.event-attendance-legend {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.event-attendance-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.event-attendance-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
}

.event-attendance-legend-item.present .event-attendance-dot {
    background: var(--color-green-500);
}

.event-attendance-legend-item.absent .event-attendance-dot {
    background: var(--color-red-500);
}

.event-attendance-legend-item.pending .event-attendance-dot {
    background: var(--color-gray-300);
}

/* Groupes de présences (présents / sans réponse / absents) — couleurs de statut
   cohérentes avec la légende (§8). */
.attendance-group {
    margin-bottom: var(--spacing-4);
}

.attendance-group:last-child {
    margin-bottom: 0;
}

/* En-tête de la carte présences : titre à gauche, action « Remonter » à droite. */
.attendance-card-head {
    display: flex;
    /* Mobile : titre + bouton empilés (évite le chevauchement du texte sur le
       bouton « Remonter les joueurs… » quand la place manque). */
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}
.attendance-card-head .event-detail-card-title {
    min-width: 0;
    padding: 0;
    border-bottom: none;
}
.attendance-card-head .sync-players-action {
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .attendance-card-head {
        flex-direction: row;
        align-items: center;
    }
    .attendance-card-head .event-detail-card-title {
        flex: 1;
    }
}

.attendance-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Même retrait horizontal que les rangées (padding spacing-4) pour ne pas
       coller le titre au bord de la carte. */
    padding: 0 var(--spacing-4) var(--spacing-1);
    margin-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-200);
    /* Bouton de repli : reset des styles natifs, pleine largeur, cliquable. */
    width: 100%;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.attendance-group-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-gray-500);
    transition: transform 0.15s ease;
}

.attendance-group--collapsed .attendance-group-chevron {
    transform: rotate(-90deg);
}

.attendance-group--collapsed .attendance-group-body {
    display: none;
}

/* Carte repliable (ex. suivi des présences d'une journée, une fois clôturé) */
.card-collapse-toggle {
    margin-left: auto;
    transition: transform var(--transition-fast);
}
.card--collapsed .card-collapse-toggle {
    transform: rotate(-90deg);
}
.card--collapsed .card-collapsible-body {
    display: none;
}
/* Carte repliée : padding resserré + pas de marge sous l'en-tête (corps masqué),
   pour ne pas laisser de grand vide autour du seul en-tête. */
.card--collapsed {
    padding: var(--spacing-4);
}
.card--collapsed .card-header {
    margin-bottom: 0;
}

.attendance-group-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.attendance-group-title--present { color: var(--color-green-600); }
.attendance-group-title--pending { color: var(--color-gray-500); }
.attendance-group-title--absent { color: var(--color-red-600); }

.attendance-group-count {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.5rem;
}

.attendance-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.attendance-group-empty {
    font-size: var(--font-size-sm);
    margin: 0;
    padding: var(--spacing-1) var(--spacing-4);
}

/* Recherche d'un joueur dans le suivi des présences (fiche événement) */
.attendance-search {
    position: relative;
    margin-bottom: var(--spacing-3);
}
.attendance-search-icon {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}
.attendance-search-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) calc(var(--spacing-3) + 1.5rem);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-background);
    color: var(--color-gray-900);
    font-size: 0.875rem;
}
.attendance-search-input:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
.attendance-search-empty {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: center;
}

.event-attendance-list {
    max-height: 400px;
    overflow-y: auto;
}

.event-attendance-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.event-attendance-row:last-child {
    border-bottom: none;
}

.event-attendance-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.event-attendance-avatar {
    width: 2rem;
    height: 2rem;
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
}

.event-attendance-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-attendance-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Présence annoncée vs constatée (PRD §39) */
.event-attendance-declared {
    font-size: 0.6875rem;
    color: var(--color-gray-500, var(--n-500));
}

.event-attendance-flag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.attendance-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.attendance-badge--noshow {
    background: var(--color-amber-50, #fffbeb);
    color: var(--color-amber-800, #92400e);
    border: 1px solid var(--color-amber-200, #fde68a);
}

.attendance-badge--surprise {
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-blue-800, var(--color-brand));
    border: 1px solid var(--color-blue-200, #bfdbfe);
}

.event-attendance-buttons {
    display: flex;
    gap: var(--spacing-2);
    width: 100%;
}

.event-attendance-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    flex: 1;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    cursor: pointer;
    transition: all 0.15s ease;
}

.event-attendance-btn:hover {
    border-color: var(--color-gray-300);
}

.event-attendance-btn.present.active {
    background: var(--color-green-50);
    border-color: var(--color-green-300);
    color: var(--color-green-700);
}

.event-attendance-btn.absent.active {
    background: var(--color-red-50);
    border-color: var(--color-red-300);
    color: var(--color-red-700);
}

.event-attendance-btn.pending.active {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.event-attendance-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ==========================================================================
   Modal / Dialog
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    /* Fermeture : le fondu joue, puis l'overlay devient invisible (retardé). */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    /* Ouverture : visible immédiatement (le focus clavier peut être placé sans attendre
       la fin du fondu — accessibilité, audit 2026-09-22), seul l'opacité s'anime. */
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.modal-container {
    background: var(--color-background);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

.modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.modal-icon--danger {
    background: var(--color-red-50);
    color: var(--color-red-500);
}

.modal-icon--warning {
    background: var(--color-orange-50);
    color: var(--color-orange-500);
}

.modal-icon--success {
    background: var(--color-green-50);
    color: var(--color-green-500);
}

.modal-icon--info {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.modal-message {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-6);
    line-height: 1.5;
}

.modal-text {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-2);
    line-height: 1.5;
}

.modal-note {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    background: var(--color-muted);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    margin-bottom: var(--spacing-4);
}

.modal-form {
    display: inline;
}

/* Popup « Maillots à laver » : sélecteur pleine largeur + actions empilés. */
.modal-form--stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}
.modal-form--stack .form-select { width: 100%; }

/* Une popup ouverte depuis le menu « ⋯ » de l'événement est un descendant DOM du
   menu : ses boutons ne doivent pas hériter du style « pleine largeur » des
   entrées de menu. On rétablit une largeur naturelle dans .modal-actions. */
.event-detail-actions .modal-actions .btn {
    width: auto;
    flex: 0 0 auto;
    height: auto;
    /* Rétablit le padding vertical du bouton (le menu « ⋯ » le met à 0 pour ses
       entrées de 40px de haut) — sinon les boutons de la popup sont écrasés. */
    padding: 0.625rem 1.5rem;
    justify-content: center;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    align-items: center;
}

/* Modal - Mobile first */
.modal-container {
    padding: var(--spacing-5);
}

@media (min-width: 481px) {
    .modal-container {
        padding: var(--spacing-6);
    }
}

/* --------------------------------------------------------------------------
   Invite Code Modal Styles
   -------------------------------------------------------------------------- */
.invite-code-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    color: var(--color-muted-foreground);
}

.invite-code-error {
    padding: var(--spacing-4);
    background: var(--color-red-50);
    color: var(--color-red-600);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.invite-code-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.invite-code-value {
    flex: 1;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.05em;
    user-select: all;
}

.invite-code-linked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-green-50);
    color: var(--color-green-700);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.invite-code-regenerate {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.invite-code-help {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--spacing-4);
}

.btn-success {
    background-color: var(--color-green-500);
    color: white;
    border-color: var(--color-green-500);
}

.btn-success:hover {
    background-color: var(--color-green-600);
    border-color: var(--color-green-600);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Events Page Responsive
   ========================================================================== */

@media (min-width: 640px) {
    .events-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .events-search-form {
        flex-direction: row;
    }

    .events-search-form .search-input {
        flex: 1;
        min-width: 200px;
        width: auto;
    }
}

@media (min-width: 768px) {

    .event-card {
        flex-direction: row;
    }

    .event-card-date {
        width: 3.5rem;
        height: 3.5rem;
        padding: 0;
        flex-direction: column;
        gap: 0;
    }

    .event-card-actions {
        width: auto;
        justify-content: flex-start;
    }

    .event-detail-header {
        flex-direction: row;
    }

    .event-detail-date-block {
        display: flex;
        width: 5rem;
        height: 5rem;
        padding: 0;
        flex-direction: column;
        gap: 0;
    }

    .event-detail-actions {
        width: auto;
        flex-wrap: nowrap;
    }

    .event-detail-actions .btn {
        flex: 0 0 auto;
    }

    /* Le menu « ⋯ » est conservé à toutes les tailles (desktop compris) : les
       actions restent regroupées derrière le bouton trois points, déroulé au
       clic (les règles de base gèrent l'affichage du menu). */

    .event-type-selector {
        grid-template-columns: repeat(4, 1fr);
    }

    .event-attendance-row {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .event-attendance-buttons {
        width: auto;
    }

    .event-attendance-btn {
        flex: 0;
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {

}

/* ==========================================================================
   Licenses Page Styles
   ========================================================================== */

.licenses-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Mobile : recherche + statut sur la même ligne. */
@media (max-width: 768px) {
    .licenses-search-form {
        flex-direction: row;
        align-items: center;
    }
    .licenses-search-form .search-input { flex: 1 1 auto; min-width: 0; }
    .licenses-search-form .form-select { flex: 0 1 auto; min-width: 0; max-width: 45%; }
}

/* Licenses List */
.licenses-list {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

/* Carte licence compacte sur mobile : nom + statut sur une ligne, montants dessous ;
   toute la carte est cliquable (fiche licence), l'œil/chevron est masqué. */
@media (max-width: 768px) {
    .licenses-list-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-2) var(--spacing-4);
        padding: var(--spacing-3) var(--spacing-4);
    }

    .licenses-list-col--member { order: 1; flex: 1 1 auto; min-width: 0; }
    .licenses-list-col--status { order: 2; flex: 0 0 auto; }
    .licenses-list-col--number { order: 3; }
    .licenses-list-col--amount { order: 4; }
    .licenses-list-col--actions { display: none; }

    .licenses-list-col--number,
    .licenses-list-col--amount {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .license-col-label {
        display: block;
    }
}

.license-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.license-member-type {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.license-number {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    font-family: monospace;
}

.license-amount {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-900);
}

/* Reste à payer (liste des licences, §57) : orange s'il reste dû, vert si soldé. */
.license-amount.due {
    color: var(--color-orange-600);
}

/* Badge « Informations » cliquable dans le titre → ouvre le modal (gain de place). */
.license-info {
    display: inline-flex;
}

.license-info-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    background: var(--color-gray-50);
    color: var(--color-gray-700);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.license-info-badge:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

/* Liste d'infos dans le modal : alignée à gauche. */
.license-info-list--modal {
    text-align: left;
    margin-top: var(--spacing-2);
}

/* Paiement partiel en modal : le formulaire passe en LIGNE sur desktop (champs
   côte à côte) → dans un modal étroit ça débordait. On force une colonne lisible.
   Double classe pour l'emporter en spécificité sur la règle desktop. */
.license-partial-payment-form.license-partial-payment-form--modal {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
}

.license-partial-payment-form.license-partial-payment-form--modal .form-group {
    flex: none;
    width: 100%;
}

.license-partial-payment-form.license-partial-payment-form--modal .form-input,
.license-partial-payment-form.license-partial-payment-form--modal .form-select {
    width: 100%;
}

.license-partial-payment-form--modal .form-label {
    display: block;
    margin-bottom: var(--spacing-1);
    font-weight: 600;
}

/* Boutons du modal en largeur auto (ne pas hériter du .btn { width: 100% } de base). */
.license-partial-payment-form--modal .modal-actions .btn {
    width: auto;
}

/* Suppression discrète : lien texte rouge centré, séparé du contenu par un filet.
   Composant réutilisable (components/_delete_link.html.twig). */
.delete-zone {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}

.delete-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-red-500);
    cursor: pointer;
}

.delete-link:hover {
    color: var(--color-red-600);
    text-decoration: underline;
}

/* Liste des modules du club (page club) : nom barré si non activé. */
.club-modules-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.club-module {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    background: var(--color-gray-100);
}

.club-module--on {
    color: var(--color-gray-800);
    font-weight: 500;
}

.club-module--off {
    color: var(--color-gray-400);
    text-decoration: line-through;
}

/* Liste des amendes / motifs d'amende (module Amendes, PRD §44). */
.fines-list {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

/* Statut en liste déroulante (fiche licence, PRD §46) — remplace le badge quand
   modifiable (aucun versement). Couleurs alignées sur les badges. */
.license-status-form { display: inline-flex; margin: 0; }
.license-status-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--n-200);
    border-radius: var(--radius-pill);
    padding: 6px 32px 6px 14px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    color: var(--n-700);
    background-color: var(--color-surface);
    background-image: 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='%23464540' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.license-status-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.license-status-select--incomplete { background-color: var(--n-100); color: var(--n-700); border-color: var(--n-200); }
.license-status-select--pending { background-color: var(--color-partial-bg); color: var(--color-partial-ink); border-color: transparent; }
.license-status-select--exempt { background-color: var(--color-exempt-bg); color: var(--color-exempt-ink); border-color: transparent; }

.licenses-count {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Licenses Empty State */
.licenses-empty {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-12);
    text-align: center;
}

.licenses-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.licenses-empty p {
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-4);
}

/* ==========================================================================
   License Form Styles
   ========================================================================== */

.license-form {
    padding: var(--spacing-6);
}

/* Mobile : statut de paiement en 2 colonnes compactes (icône réduite, sans
   description) — les 4 cartes tenaient trop de place empilées en pleine largeur. */
@media (max-width: 768px) {
    .license-status-selector {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
    }
    .license-status-card {
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-2);
    }
    .license-status-icon {
        width: 2rem;
        height: 2rem;
    }
    .license-status-icon svg,
    .license-status-icon i {
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
    }
    .license-status-desc {
        display: none;
    }
}

/* License Edit Member Display */
.license-edit-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.license-edit-member-avatar {
    width: 3rem;
    height: 3rem;
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.license-edit-member-info {
    display: flex;
    flex-direction: column;
}

.license-edit-member-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
}

.license-edit-member-type {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* ==========================================================================
   License Detail Styles
   ========================================================================== */

.license-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.license-detail-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.license-member-type-badge {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.license-number-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0.25rem 0.625rem;
    background: var(--color-blue-50);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-blue-700);
    font-family: monospace;
}

.license-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* License Detail Cards */
.license-detail-card {
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.license-detail-card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.license-detail-card-content {
    padding: var(--spacing-4);
}

/* License Payment Card */
.license-payment-card .license-detail-card-content {
    padding: 0;
}
/* Cartes « Dossier à compléter » / « Exonérée » : contenu = simple texte (form-hint),
   qui a besoin du padding (sinon collé au bord — le padding:0 ci-dessus vise les
   sous-blocs paiement qui gèrent leur propre padding). */
.license-payment-card .license-detail-card-content > .form-hint {
    padding: var(--spacing-4);
    margin: 0;
}

.license-payment-summary {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.license-payment-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.license-payment-amount {
    text-align: center;
    min-width: 0;
}

.license-payment-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-1);
}

.license-payment-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.license-payment-value.green {
    color: var(--color-green-600);
}

.license-payment-value.orange {
    color: var(--color-orange-600);
}

/* Payment Progress */
.license-payment-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.license-payment-progress-bar {
    flex: 1;
    height: 0.5rem;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.license-payment-progress-fill {
    height: 100%;
    background: var(--color-orange-500);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.license-payment-progress-fill.complete {
    background: var(--color-green-500);
}

/* Payment Actions */
.license-payment-actions {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.license-quick-pay-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: center;
}

.license-quick-pay-form .form-select,
.license-quick-pay-form .btn {
    width: 100%;
}

/* Partial Payment */
.license-partial-payment {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
}

.license-partial-payment-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: flex-end;
}

.license-partial-payment-form .form-group {
    width: 100%;
    margin: 0;
}

.license-partial-payment-form .btn {
    width: 100%;
}

.license-partial-payment-form .form-group label {
    font-size: 0.75rem;
}

/* License Info List */
.license-info-list {
    margin: 0;
}

.license-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.license-info-item:last-child {
    border-bottom: none;
}

.license-info-item dt {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.license-info-item dd {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-900);
    margin: 0;
}

.license-info-item dd a {
    color: var(--color-primary-600);
    text-decoration: none;
}

.license-info-item dd a:hover {
    text-decoration: underline;
}

/* Button Block */
.btn-block {
    display: block;
    width: 100%;
    margin-top: var(--spacing-3);
}

/* ==========================================================================
   Licenses Page Responsive
   ========================================================================== */

@media (min-width: 641px) {
    .licenses-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 769px) {

    /* Le select ne doit pas prendre toute la largeur (sinon il passe à la ligne) :
       largeur au contenu, comme sur la page membres. */
    .licenses-search-form .form-select {
        flex: 0 0 auto;
        width: auto;
        min-width: 200px;
    }

    .license-detail-badges {
        justify-content: flex-start;
    }

    .license-payment-amounts {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }

    .license-quick-pay-form {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* La date ne doit pas prendre toute la ligne (sinon le select « Mode de
       paiement » est écrasé à quelques pixels et devient illisible). */
    .license-quick-pay-form .form-input {
        flex: 0 1 auto;
        width: auto;
        min-width: 150px;
    }

    .license-quick-pay-form .form-select {
        flex: 1;
        width: auto;
        min-width: 170px;
    }

    .license-quick-pay-form .btn {
        width: auto;
    }

    .license-partial-payment-form {
        flex-direction: row;
    }

    .license-partial-payment-form .form-group {
        flex: 1;
        width: auto;
    }

    .license-partial-payment-form .btn {
        width: auto;
    }
}

/* ============================================
   MEETING PAGES
   ============================================ */

.meetings-page {
    max-width: 1200px;
    margin: 0 auto;
}

.meeting-participants {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Meeting Type Badge */
.meeting-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: #f3f4f6;
    color: #4b5563;
}

.meeting-type-badge--bureau {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.meeting-type-badge--ag {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.meeting-type-badge--commission {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.meeting-type-badge--other {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* Responsive Styles for Meetings */
@media (min-width: 641px) {
    .meetings-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .meetings-search-form {
        flex-direction: row;
    }

    .meetings-search-form .search-input {
        width: auto;
        flex: 1;
    }
}

.meeting-form {
    padding: 1.5rem 2rem 2rem;
}

/* Meeting Participants Selector */
.meeting-participants-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

@media (min-width: 640px) {
    .meeting-participants-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.meeting-participant-option {
    cursor: pointer;
}

.meeting-participant-option input {
    display: none;
}

.meeting-participant-card {
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.meeting-participant-card:hover {
    border-color: var(--color-gray-300);
}

.meeting-participant-option input:checked + .meeting-participant-card {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.meeting-participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex-shrink: 0;
}

.meeting-participant-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meeting-participant-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
}

.meeting-participant-email {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meeting Agenda/Minutes Content */
.meeting-agenda-content,
.meeting-minutes-content {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Meeting Participation Progress */
.meeting-participation-progress {
    margin-bottom: 1.25rem;
}

.meeting-participation-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.meeting-participation-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.meeting-participation-fill.complete {
    background: var(--color-positive);
}

.meeting-participation-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meeting-participation-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meeting-participation-legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.meeting-participation-legend-item.present .dot {
    background: var(--color-positive);
}

.meeting-participation-legend-item.excused .dot {
    background: var(--color-accent);
}

.meeting-participation-legend-item.absent .dot {
    background: #ef4444;
}

/* Meeting Participants Form */
.meeting-participants-form {
    margin-bottom: 1.5rem;
}

.meeting-participants-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.meeting-participant-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
}

.meeting-participant-row .meeting-participant-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meeting-participant-details {
    display: flex;
    flex-direction: column;
}

.meeting-participant-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meeting-participant-status {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 0.375rem;
}

.meeting-status-radio {
    cursor: pointer;
}

.meeting-status-radio input {
    display: none;
}

.meeting-status-btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: all 0.2s;
}

.meeting-status-radio input:checked + .meeting-status-btn--present {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--color-positive);
    color: var(--color-positive);
}

.meeting-status-radio input:checked + .meeting-status-btn--excused {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.meeting-status-radio input:checked + .meeting-status-btn--absent {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* Add Participant Form */
.meeting-add-participant {
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
}

.meeting-add-participant-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

.meeting-add-participant-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.meeting-add-participant-form .form-group {
    margin: 0;
    width: 100%;
}

.meeting-add-participant-form .btn {
    width: 100%;
}

/* Meeting Minutes Form */
.meeting-minutes-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Meeting Actions List */
.meeting-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Meeting Current Status */
.meeting-current-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.meeting-current-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.meeting-current-status-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Responsive Styles for Meeting Forms & Details */
@media (min-width: 769px) {
    .meeting-type-selector {
        grid-template-columns: repeat(4, 1fr);
    }

    .meeting-participants-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .meeting-detail-header {
        flex-direction: row;
    }

    .meeting-detail-date-block {
        width: 80px;
        align-self: initial;
    }

    .meeting-participant-row {
        flex-direction: row;
        align-items: center;
    }

    .meeting-participant-status {
        width: auto;
    }

    .meeting-add-participant-form {
        flex-direction: row;
    }

    .meeting-add-participant-form .form-group {
        flex: 1;
        width: auto;
    }

    .meeting-add-participant-form .btn {
        width: auto;
    }
}

/* ========================================
   CLUB LIFE / VIE DU CLUB PAGES
   ======================================== */

.clublife-page {
    max-width: 1400px;
    margin: 0 auto;
}

.clublife-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.clublife-type-badge--party {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-brand);
}

.clublife-type-badge--fundraising {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-positive);
}

.clublife-type-badge--meal {
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-partial-ink);
}

.clublife-type-badge--outing {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-brand);
}

.clublife-type-badge--ceremony {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.clublife-type-badge--other {
    background: rgba(107, 114, 128, 0.1);
    color: var(--n-500);
}

.clublife-form {
    padding: 1.25rem;
}

/* Actions Card */
.clublife-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clublife-actions .btn {
    width: 100%;
    justify-content: center;
}

/* Results Form */
.clublife-results-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clublife-results-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Club Life Responsive */
@media (min-width: 641px) {
    .clublife-stats {
        grid-template-columns: 1fr 1fr;
    }

    .clublife-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

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

@media (min-width: 769px) {

    .clublife-form {
        padding: 1.5rem 2rem 2rem;
    }
}

/* ========================================
   PARTNERS / PARTENAIRES PAGES
   ======================================== */

.partners-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* Utility Classes */
.btn-block {
    width: 100%;
}

.btn-success {
    background: var(--color-positive);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #16a34a;
}

/* Partners Responsive */
@media (min-width: 641px) {
    .partners-stats {
        grid-template-columns: 1fr 1fr;
    }

    .partners-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ==========================================================================
   Alert & Warning Styles
   ========================================================================== */

.alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.alert-warning {
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-200);
    color: var(--color-orange-800);
}

.alert-warning svg {
    flex-shrink: 0;
    color: var(--color-orange-500);
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    display: block;
    margin-bottom: var(--spacing-1);
}

.alert-content p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

.btn-warning {
    /* Orange franc et lisible avec un texte blanc (l'ancien fond « orange-500 »
       était en réalité le jaune signal #F0B429 → texte blanc illisible). */
    background: #EA580C;
    color: #fff;
    flex-shrink: 0;
}

.btn-warning:hover {
    background: #C2410C;
}

@keyframes pulse-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   CLUB PAGE - Additional Styles
   ========================================================================== */

/* Club avatar variant (square with rounded corners) */
.member-detail-avatar--club {
    border-radius: var(--radius-lg);
}

/* Card action link (Gérer, Voir tous) */
.member-detail-card-action {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--primary);
    text-decoration: none;
}

.member-detail-card-action:hover {
    text-decoration: underline;
}

/* Static relation item (no hover effect) */
.member-relation-item--static {
    cursor: default;
}

.member-relation-item--static:hover {
    background: var(--bg-secondary);
}

/* Responsive */
@media (min-width: 640px) {
    .club-partners-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   CLUB TEAM PAGE
   ========================================================================== */

.team-page {
    max-width: 900px;
}

/* Team List */
.team-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Team Card */
.team-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.team-card:hover {
    border-color: var(--color-gray-300);
}

.team-card--current {
    background: var(--color-blue-50);
    border-color: var(--color-primary);
}

.team-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.team-card-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.team-card-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    overflow: hidden;
}

.team-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.team-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-card-you {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
}

.team-card-email {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Role Badges */
.team-card-role {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}

.team-card-role--admin {
    background: var(--color-purple-50);
    color: var(--color-purple-600);
}

.team-card-role--manager {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

.team-card-role--educator {
    background: var(--color-green-50);
    color: var(--color-green-600);
}
.team-card-role--secretary {
    background: var(--color-yellow-50);
    color: var(--color-orange-600);
}

.team-card-role--member {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.team-card-role--pending {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

/* Team Section */
.team-section {
    margin-bottom: 2rem;
}

.team-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-foreground);
}

.team-section-title svg {
    color: var(--color-orange-500);
}

.team-section-count {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

/* Pending Card Styles */
.team-card--pending {
    border: 2px dashed var(--color-orange-300);
    background: var(--color-orange-50);
}

.team-card--pending:hover {
    border-color: var(--color-orange-400);
}

.team-card-avatar--pending {
    opacity: 0.7;
}

.team-activate-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-card-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

.team-card-date svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Team Card Actions */
.team-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.team-role-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted-foreground);
    white-space: nowrap;
}

.inline-form {
    display: inline-flex;
}

/* Team Footer */
.team-footer {
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
}

.team-count {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* Team Empty State */
.team-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.team-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
    color: var(--color-muted-foreground);
}

.team-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 0.5rem 0;
}

.team-empty p {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* Team Legend */
.team-legend {
    padding: 1.25rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.team-legend-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 1rem 0;
}

.team-legend-title svg {
    color: var(--color-muted-foreground);
}

.team-legend-grid {
    display: grid;
    gap: 1rem;
}

.team-legend-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.team-legend-role {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    width: fit-content;
}

.team-legend-desc {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
}

/* Responsive */
@media (min-width: 640px) {
    .team-card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .team-card-actions {
        padding-top: 0;
        border-top: none;
        justify-content: flex-end;
    }

    .team-legend-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-legend-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-option {
    display: flex;
    cursor: pointer;
    position: relative;
}

.category-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Alert */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.alert-warning {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}

.alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Badge extensions */
.badge-lg {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.badge-category {
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}

/* Form row layouts */
.form-row--2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .form-row--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Inline form for buttons */
.inline-form {
    display: inline-block;
}

/* Section title */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

/* Categories list */
.categories-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Modal (Simple CSS-based)
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}

.modal--open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--color-background);
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    padding: var(--spacing-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-muted-foreground);
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-gray-100);
    color: var(--color-foreground);
}

.modal-header {
    padding: var(--spacing-6) var(--spacing-6) 0;
}

.modal-header.modal-header--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--spacing-8);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
}

.modal-header .login-logo {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.modal-header .login-logo svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.modal-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.modal-icon--warning {
    /* Orange net (l'ancien « orange-600 » = #7A5307 brun-doré terne). */
    background: #FFEDD5;
    color: #EA580C;
}

.modal-icon--danger {
    background: var(--color-red-100);
    color: var(--color-red-600);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}

.modal-header .modal-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--spacing-2);
}

.modal-subtitle {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    margin: 0;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.modal-body {
    padding: var(--spacing-6);
}

.modal-content--login .login-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.modal-content--login .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-foreground);
    text-decoration: none;
    transition: var(--transition-fast);
}

.modal-content--login .login-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.modal-content--login .login-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Troisième porte de connexion (§66.9), sous les boutons sociaux. */
.login-alt {
    margin: var(--spacing-3) 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
}
.login-alt a { color: var(--color-primary-600); text-decoration: underline; }

.login-footer-text {
    font-size: 0.8125rem;
    color: var(--color-muted-foreground);
    text-align: center;
    margin: var(--spacing-4) 0 0;
}

/* ==========================================================================
   Resource Pages - SEO Content
   ========================================================================== */

/* Resource Page Layout */
.resource-page {
    min-height: 100vh;
    background: var(--color-background);
}

/* Breadcrumb */
.resource-breadcrumb {
    background: var(--color-gray-50);
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: var(--color-gray-400);
}

.breadcrumb a {
    color: var(--color-gray-600);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-primary-600);
}

.breadcrumb li:last-child {
    color: var(--color-gray-900);
    font-weight: 500;
}

/* Resources Hub */
.resources-hub {
    padding: 3rem 0;
}

.resources-header {
    text-align: center;
    margin-bottom: 3rem;
}

.resources-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .resources-title {
        font-size: 2.5rem;
    }
}

.resources-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 40rem;
    margin: 0 auto;
}

/* Featured Resource */
.resources-featured {
    margin-bottom: 3rem;
}

.resources-featured-card {
    display: block;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-positive) 100%);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    color: white;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.resources-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.resources-featured-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 1rem;
}

.resources-featured-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .resources-featured-title {
        font-size: 2rem;
    }
}

.resources-featured-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: 1.5rem;
    max-width: 40rem;
}

.resources-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* Resources Grid */
.resources-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
}

.resources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .resources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.resource-card {
    display: block;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.resource-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.resource-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.resource-card-icon--blue { background: #dbeafe; color: var(--color-brand); }
.resource-card-icon--green { background: #d1fae5; color: #059669; }
.resource-card-icon--purple { background: #ede9fe; color: var(--color-brand-hover); }
.resource-card-icon--orange { background: #ffedd5; color: #ea580c; }
.resource-card-icon--pink { background: #fce7f3; color: #db2777; }

.resource-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.resource-card-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.resource-card-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-600);
}

/* Article Layout */
.article-container {
    padding-bottom: 3rem;
}

.article-header {
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
    color: white;
    padding: 3rem 1rem;
    margin-bottom: 2rem;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
}

.article-category {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.article-reading-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.8;
}

.article-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .article-title {
        font-size: 2.5rem;
    }
}

.article-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    max-width: 40rem;
}

/* Article Layout with TOC */
.article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: 250px 1fr;
    }
}

/* Table of Contents */
.article-toc {
    display: none;
}

@media (min-width: 1024px) {
    .article-toc {
        display: block;
    }
}

.article-toc-sticky {
    position: sticky;
    top: 2rem;
}

.article-toc-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-toc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.article-toc-list li {
    margin-bottom: 0.5rem;
}

.article-toc-list a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    line-height: 1.4;
}

.article-toc-list a:hover {
    color: var(--color-primary-600);
}

.article-toc-cta {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.article-toc-cta p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: 0.75rem;
}

/* Article Body */
.article-body {
    max-width: 720px;
}

.article-intro {
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.article-intro p {
    margin-bottom: 1rem;
}

.article-section {
    margin-bottom: 3rem;
}

.article-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
    padding-top: 1rem;
}

.article-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 1.5rem 0 0.75rem;
}

.article-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 1.25rem 0 0.5rem;
}

.article-section p {
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.article-section ul,
.article-section ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--color-gray-700);
}

.article-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Article Callouts */
.article-callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
}

.article-callout--tip {
    background: var(--color-green-50);
    border: 1px solid #a7f3d0;
}

.article-callout--tip .article-callout-icon {
    color: #059669;
}

.article-callout--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.article-callout--warning .article-callout-icon {
    color: #d97706;
}

.article-callout-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.article-callout-content strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-gray-900);
}

.article-callout-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* Article Pillars */
.article-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 640px) {
    .article-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article-pillar {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.article-pillar-number {
    width: 32px;
    height: 32px;
    background: var(--color-primary-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm);
    margin-bottom: 0.75rem;
}

.article-pillar h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.article-pillar p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0 0 0.75rem;
}

.article-pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-600);
    text-decoration: none;
}

.article-pillar-link:hover {
    color: var(--color-primary-700);
}

/* Article Roles */
.article-roles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 640px) {
    .article-roles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article-role {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.article-role h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.article-role h4 svg {
    color: var(--color-primary-600);
}

.article-role p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

/* Article Comparison */
.article-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .article-comparison {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article-comparison-item {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.article-comparison-item--bad {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.article-comparison-item--good {
    background: var(--color-green-50);
    border: 1px solid #a7f3d0;
}

.article-comparison-item h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.article-comparison-item--bad h4 svg {
    color: #dc2626;
}

.article-comparison-item--good h4 svg {
    color: #059669;
}

.article-comparison-item ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.article-comparison-verdict {
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-gray-600);
    margin: 0;
}

/* Article Product Mention */
.article-product-mention {
    display: flex;
    gap: 1rem;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}

.article-product-mention-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-primary-600);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-product-mention-content h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.article-product-mention-content p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin: 0 0 1rem;
}

/* Article Links */
.article-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-primary-600);
    text-decoration: none;
    margin-top: 0.5rem;
}

.article-link:hover {
    color: var(--color-primary-700);
}

/* Article Conclusion */
.article-conclusion {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}

.article-conclusion h2 {
    margin-top: 0;
    padding-top: 0;
}

/* Related Articles */
.article-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.article-related h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.article-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .article-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .article-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.article-related-card {
    display: block;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-decoration: none;
    transition: border-color 0.2s;
}

.article-related-card:hover {
    border-color: var(--color-primary-300);
}

.article-related-card h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.article-related-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

/* Resource CTA Section */
.resource-cta {
    background: var(--color-gray-50);
    padding: 4rem 1rem;
}

.resource-cta-box {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.resource-cta-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-600);
    color: white;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.resource-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.resource-cta-text {
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Equipment Forms - File Upload
   Source: templates/equipment/new.html.twig, templates/equipment/edit.html.twig
   ========================================================================== */

.file-upload-wrapper {
    position: relative;
}

.form-input-file {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--color-gray-300, #e0e0e0);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50, #f8f9fa);
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-input-file:hover {
    border-color: var(--color-primary-500, var(--color-brand));
}

.file-upload-preview {
    margin-top: var(--spacing-3);
    position: relative;
    display: inline-block;
}

.file-upload-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid var(--color-gray-200, #e0e0e0);
}

.btn-remove-preview {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-red-500, #ef4444);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-remove-preview:hover {
    background: var(--color-red-600, #dc2626);
}

/* ==========================================================================
   Equipment Edit - Current Image
   Source: templates/equipment/edit.html.twig
   ========================================================================== */

.current-image {
    margin-bottom: var(--spacing-3);
}

.current-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid var(--color-gray-200, #e0e0e0);
    transition: opacity 0.2s;
}

.current-image-actions {
    margin-top: var(--spacing-2);
}

.checkbox-inline {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Transfer Ownership (from templates/club/transfer_ownership.html.twig)
   -------------------------------------------------------------------------- */
.transfer-page {
    max-width: 700px;
    margin: 0 auto;
}

.page-header-icon--warning {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.transfer-warning {
    display: flex;
    gap: 1rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.transfer-warning-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transfer-warning-content h3 {
    margin: 0 0 0.5rem;
    color: #ef4444;
    font-size: 1rem;
}

.transfer-warning-content p {
    margin: 0 0 0.75rem;
    color: var(--color-text-secondary);
}

.transfer-warning-content ul {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}

.transfer-warning-content li {
    margin-bottom: 0.25rem;
}

.transfer-form {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.transfer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: 1px solid #ef4444;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.transfer-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.transfer-empty-icon {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.transfer-empty h3 {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
}

.transfer-empty p {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
}

.transfer-empty .btn {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   No Club State (from templates/clublife/index.html.twig, templates/treasurer/index.html.twig)
   -------------------------------------------------------------------------- */
.no-club-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-top: 2rem;
}

.no-club-icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-500);
    margin-bottom: 1.5rem;
}

.no-club-state h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
}

.no-club-state p {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Header Dropdown (from templates/components/_header.html.twig)
   -------------------------------------------------------------------------- */
.header-selector-wrapper {
    position: relative;
}

.header-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--spacing-2);
    min-width: 280px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.header-dropdown.active {
    display: block;
}

.header-dropdown-label {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}

.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.2s;
}

.header-dropdown-item:hover {
    background: var(--color-gray-50);
}

.header-dropdown-item.active {
    background: var(--color-primary-50);
}

.header-dropdown-item--danger {
    color: var(--color-red-600);
}

.header-dropdown-item--danger:hover {
    background: var(--color-red-50);
}

.header-dropdown-separator {
    height: 1px;
    background: var(--color-gray-200);
    margin: var(--spacing-2) 0;
}

.header-dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.header-dropdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.header-dropdown-title {
    font-weight: 500;
    font-size: 0.875rem;
}

.header-dropdown-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.header-dropdown-check {
    color: var(--color-primary-500);
}

.header-selector-icon img,
.header-dropdown-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Validation Pages (from templates/dashboard/pending_validation.html.twig, validation_rejected.html.twig)
   -------------------------------------------------------------------------- */
.validation-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    background: var(--color-bg-secondary);
}

.validation-container {
    max-width: 480px;
    text-align: center;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.validation-icon {
    margin-bottom: var(--spacing-6);
}

.validation-icon--pending {
    color: var(--color-orange-500);
}

.validation-icon--rejected {
    color: var(--color-red-500);
}

.validation-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
}

.validation-text {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.validation-text--secondary {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.validation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.validation-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    text-align: left;
}

.validation-info svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.validation-info p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.validation-reason {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-red-50);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-red-500);
    text-align: left;
}

.validation-reason-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-red-700);
    margin-bottom: var(--spacing-2);
}

.validation-reason-text {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Calendar Page (from templates/event/calendar.html.twig)
   -------------------------------------------------------------------------- */
.calendar-page {
    max-width: 1200px;
    margin: 0 auto;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.calendar-title {
    font-size: 1.5rem;
    font-weight: 600;
    min-width: 200px;
    text-align: center;
}

.calendar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 1.5rem;
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    text-align: center;
}

.calendar-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-50);
    color: var(--color-blue-500);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.calendar-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.calendar-empty-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 400px;
    margin-bottom: 1rem;
}

.calendar-container {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.calendar-grid {
    width: 100%;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.calendar-header-cell {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.calendar-header-cell.calendar-weekend {
    color: var(--color-text-muted);
}

.calendar-body {
    display: flex;
    flex-direction: column;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--color-border);
}

.calendar-week:last-child {
    border-bottom: none;
}

.calendar-day {
    min-height: 120px;
    padding: 0.5rem;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-primary);
}

.calendar-day:nth-child(7) {
    border-right: none;
}

.calendar-day--other-month {
    background: var(--color-bg-secondary);
}

.calendar-day--other-month .calendar-day-number {
    color: var(--color-text-muted);
}

.calendar-day--today {
    background: #FDF9EE;
    box-shadow: inset 2px 0 0 var(--color-accent);
}
[data-theme="dark"] .calendar-day--today { background: #1F2733; }

.calendar-day--today .calendar-day-number {
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.calendar-day-number {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-event {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
    text-decoration: none;
    color: white;
    overflow: hidden;
    white-space: nowrap;
}

.calendar-event:hover {
    opacity: 0.9;
}

.calendar-event--training {
    background: var(--color-positive);
}

.calendar-event--match {
    background: var(--color-brand);
}

.calendar-event--tournament {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.calendar-event--other {
    background: var(--n-500);
}

.calendar-event--cancelled {
    opacity: 0.5;
    text-decoration: line-through;
}

.calendar-event-time {
    font-weight: 600;
    flex-shrink: 0;
}

.calendar-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-day-more {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 2px 4px;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.calendar-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.calendar-legend-color--training {
    background: var(--color-positive);
}

.calendar-legend-color--match {
    background: var(--color-brand);
}

.calendar-legend-color--tournament {
    background: var(--color-accent);
}

.calendar-legend-color--other {
    background: var(--n-500);
}

/* Calendar Responsive */
@media (max-width: 768px) {
    .calendar-day {
        min-height: 80px;
        padding: 0.25rem;
    }

    .calendar-event-time {
        display: none;
    }

    .calendar-legend {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Calendrier — sélecteur de vue, vue semaine, vue année (PRD §43)
   -------------------------------------------------------------------------- */

/* Sélecteur Semaine / Mois / Année (segmenté, centré) */
.calendar-view-switch {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.calendar-view-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    text-decoration: none;
    background: var(--color-background);
}

.calendar-view-btn:not(:last-child) {
    border-right: 1px solid var(--color-gray-200);
}

.calendar-view-btn:hover {
    background: var(--color-gray-50);
}

.calendar-view-btn.is-active {
    background: var(--color-blue-600);
    color: var(--color-primary-foreground);
}

/* Bloc central de la navigation (titre + bouton « Aujourd'hui ») */
.calendar-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Vue semaine : 7 jours */
.calendar-week-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

@media (min-width: 900px) {
    .calendar-week-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.calendar-week-day {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-background);
}

.calendar-week-day--today {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 1px var(--color-blue-500);
}

.calendar-week-day-header {
    padding: var(--spacing-2);
    text-align: center;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.calendar-week-day--weekend .calendar-week-day-header {
    background: var(--color-gray-100);
}

.calendar-week-day-weekday {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-500);
}

.calendar-week-day-num {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
}

.calendar-week-day--today .calendar-week-day-num {
    color: var(--color-blue-600);
}

.calendar-week-day-events {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    min-height: 3rem;
    flex: 1;
}

.calendar-week-day-empty {
    color: var(--color-gray-300);
    text-align: center;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) 0;
}

/* Vue année : 12 mini-mois */
.calendar-year-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 560px) {
    .calendar-year-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .calendar-year-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .calendar-year-grid { grid-template-columns: repeat(4, 1fr); }
}

.year-month {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    background: var(--color-background);
}

.year-month-title {
    display: block;
    text-align: center;
    font-weight: 700;
    color: var(--color-gray-900);
    text-decoration: none;
    margin-bottom: var(--spacing-2);
}

.year-month-title:hover {
    color: var(--color-blue-600);
}

.year-mini-head,
.year-mini {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.year-mini-head span {
    text-align: center;
    font-size: 10px;
    color: var(--color-gray-400);
    padding-bottom: 2px;
}

.year-mini-day {
    position: relative;
    text-align: center;
    font-size: 11px;
    color: var(--color-gray-700);
    padding: 3px 0 9px;
}

.year-mini-day.is-out {
    color: transparent;
}

.year-mini-day.is-today {
    background: var(--color-blue-50);
    border-radius: var(--radius-sm);
    color: var(--color-blue-700);
    font-weight: 700;
}

.year-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.year-dot--training { background: var(--color-positive); }
.year-dot--match { background: var(--color-brand); }
.year-dot--tournament { background: var(--color-accent); }
.year-dot--other { background: var(--n-500); }

/* Affinage mobile : le titre de la vue semaine est plus long que « Mois AAAA »,
   on évite qu'il serre la navigation sur petit écran. */
@media (max-width: 480px) {
    .calendar-title {
        font-size: 1.15rem;
        min-width: 0;
    }

    .calendar-nav {
        gap: var(--spacing-2);
    }

    .calendar-view-btn {
        padding: var(--spacing-2) var(--spacing-3);
    }
}

/* Impression / export PDF du calendrier (PRD §43) : ne conserver que la grille,
   le titre et la légende ; couleurs par type fidèles ; format paysage. */
@media print {
    .mobile-header,
    .sidebar,
    .sidebar-overlay,
    .header,
    .impersonation-banner,
    .calendar-page .page-header-actions,
    .calendar-view-switch,
    .calendar-nav .btn,
    .calendar-empty-state {
        display: none !important;
    }

    .app-main {
        padding: 0 !important;
        margin: 0 !important;
    }

    .calendar-page .page-header,
    .calendar-nav {
        margin-bottom: 8px;
    }

    .calendar-event,
    .calendar-legend-color,
    .year-dot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calendar-week,
    .calendar-week-day,
    .year-month {
        break-inside: avoid;
    }

    /* Bordures nettes à l'impression : les couleurs d'écran (rgba noir 10 % pour la
       grille mensuelle, gris clair pour semaine/année) combinées au zoom global
       deviennent quasi invisibles en PDF → on force un gris opaque. */
    .calendar-container,
    .calendar-header,
    .calendar-week,
    .calendar-day,
    .calendar-week-day,
    .calendar-week-day-header,
    .year-month {
        border-color: #888 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        size: landscape;
        margin: 10mm;
    }
}

/* --------------------------------------------------------------------------
   Impersonation Banner (from templates/layout/app.html.twig)
   -------------------------------------------------------------------------- */
.impersonation-banner {
    background: linear-gradient(90deg, var(--color-accent), #d97706);
    color: white;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.9rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.app-layout--impersonating {
    padding-top: 48px;
}

.app-layout--impersonating .mobile-header {
    top: 48px;
}

.app-layout--impersonating .sidebar {
    top: 48px;
    height: calc(100% - 48px);
}

@media (min-width: 1024px) {
    .app-layout--impersonating .sidebar {
        top: 0;
        height: 100%;
    }
}

.impersonation-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    background: #dc2626;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #fef2f2;
    cursor: pointer;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.impersonation-exit:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* User impersonation variant (purple/violet) */
.impersonation-banner--user {
    background: linear-gradient(90deg, var(--color-brand), var(--color-brand-hover));
}

/* Offset toasts below impersonation banner */
.toast {
    top: calc(48px + 1.5rem) !important;
}

/* --------------------------------------------------------------------------
   Profile Avatar Editable (from templates/profile/club_edit.html.twig, club_new.html.twig)
   -------------------------------------------------------------------------- */
.profile-avatar--editable {
    cursor: pointer;
    position: relative;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profile-avatar-overlay svg {
    color: white;
}

.profile-avatar--editable:hover .profile-avatar-overlay {
    opacity: 1;
}

.profile-edit-avatar-hint {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Profile Info List (from templates/profile/club_new.html.twig)
   -------------------------------------------------------------------------- */
.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.profile-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: left;
}

.profile-info-item span {
    flex: 1;
}

.profile-info-item svg {
    flex-shrink: 0;
    color: var(--color-primary-500);
    margin-top: 2px;
}

.profile-club-actions {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

.profile-club-actions .btn {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Profile Page Styles (from templates/profile/index.html.twig)
   -------------------------------------------------------------------------- */
.profile-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-card-title-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.profile-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary-500);
    color: #ffffff !important;
    transition: all 0.2s;
}

.profile-card-action svg {
    stroke: #ffffff;
}

.profile-card-action:hover {
    background: var(--color-primary-600);
    color: #ffffff !important;
}

.profile-card .btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.profile-club-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-club-active-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: var(--color-green-100);
    color: var(--color-green-700);
    border-radius: var(--radius-full);
    width: fit-content;
}

.profile-club-card--active {
    border-color: var(--color-green-200);
    background: var(--color-green-50);
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal--open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-4);
    animation: modalSlideIn 0.2s ease-out;
    z-index: 1001;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid #e5e7eb;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--n-500);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: var(--spacing-5);
}

.modal-description {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 var(--spacing-4);
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Club action buttons */
.profile-club-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 6px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    /* Fond et bordure en dur : ils restaient clairs en thème sombre, où le gris
       du texte tombait à 2,77:1. Les jetons suivent la surface. */
    color: var(--color-text-muted);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.profile-club-action-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.profile-club-action-btn--primary {
    color: #ffffff;
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.profile-club-action-btn--primary:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #ffffff;
}

.profile-club-action-btn--danger {
    /* #dc2626 sur #fef2f2 ne tenait que 4,41:1 : l'encre « impayé » de la charte
       est plus sombre et suit le thème. */
    color: var(--color-unpaid-ink);
    background: var(--color-unpaid-bg);
    border-color: var(--color-unpaid-bg);
}

.profile-club-action-btn--danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.club-code-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-lg);
}

.club-code-value {
    flex: 1;
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-gray-900);
    text-align: center;
}

.club-code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background: var(--color-primary-500, var(--color-brand));
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.club-code-copy-btn:hover {
    background: var(--color-primary-600, var(--color-brand));
}

.club-code-copied {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.875rem;
    color: #059669;
    background: #d1fae5;
    border-radius: var(--radius-md);
    text-align: center;
}

/* Logout modal styles */
.modal-content--logout {
    max-width: 480px;
}

.modal-header--logout {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.logout-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #dc2626;
    border-radius: var(--radius-md);
    color: #ffffff;
}

.modal-body--logout {
    text-align: center;
    padding: var(--spacing-6) var(--spacing-5);
}

.logout-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    color: #d97706;
}

.logout-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.logout-subtitle {
    font-size: 0.875rem;
    color: var(--n-500);
    margin: 0 0 var(--spacing-4);
}

.modal-footer--logout {
    justify-content: center;
    gap: var(--spacing-3);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Import Members Page (from templates/season/import_members.html.twig)
   -------------------------------------------------------------------------- */
.import-members-page {
    max-width: 900px;
    margin: 0 auto;
}

.import-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.import-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.import-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-4);
}

.checkbox-card {
    display: block;
    cursor: pointer;
}

.checkbox-card input {
    display: none;
}

.checkbox-card-content {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.checkbox-card input:checked + .checkbox-card-content {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.checkbox-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    color: var(--color-muted-foreground);
}

.checkbox-card input:checked + .checkbox-card-content .checkbox-card-icon {
    background: var(--color-primary);
    color: white;
}

.checkbox-card-title {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.checkbox-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.import-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.import-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
}

.member-card-checkbox {
    display: block;
    cursor: pointer;
}

.member-card-checkbox input {
    display: none;
}

.member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.member-card-checkbox input:checked + .member-card {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

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

.member-name {
    font-weight: 500;
    margin-bottom: var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.member-category {
    font-size: var(--font-size-xs);
    color: var(--color-muted-foreground);
}

.member-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray-100);
    color: transparent;
}

.member-card-checkbox input:checked + .member-card .member-check {
    background: var(--color-primary);
    color: white;
}

.badge-player {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.badge-parent {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.badge-manager {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
}

.empty-state-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-green-50);
    border-radius: var(--radius-md);
    color: var(--color-green-700);
}

.import-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
}

/* --------------------------------------------------------------------------
   Season Preparation Page (from templates/season/preparation.html.twig)
   -------------------------------------------------------------------------- */
.preparation-page {
    max-width: 1200px;
    margin: 0 auto;
}

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

.stat-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon.blue {
    background: var(--color-blue-100);
    color: var(--color-blue-600);
}

.stat-card-icon.green {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.stat-card-icon.orange {
    background: var(--color-orange-100);
    color: var(--color-orange-600);
}

.stat-card-icon.purple {
    background: var(--color-purple-100);
    color: var(--color-purple-600);
}

.stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-foreground);
}

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.preparation-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.preparation-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.quick-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.quick-action-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
    background: white;
    white-space: nowrap;
}

.quick-action-card:hover {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.quick-action-card-button {
    cursor: pointer;
    text-align: left;
}

.quick-action-form {
    display: contents;
}

.quick-action-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.quick-action-content {
    flex: 1;
    min-width: 0;
}

.quick-action-title {
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.quick-action-desc {
    font-size: var(--font-size-xs);
    color: var(--color-muted-foreground);
    line-height: 1.2;
}

.preparation-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.toolbar-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.selected-count {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.members-table-container {
    overflow-x: auto;
}

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

.members-table th,
.members-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.members-table th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    background: var(--color-gray-50);
}

.col-checkbox {
    width: 40px;
}

.row-inactive {
    background: var(--color-gray-50);
}

.member-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.member-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-sm {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.category-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-purple-100);
    color: var(--color-purple-700);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}


.form-select-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    min-width: 180px;
}

/* --------------------------------------------------------------------------
   Treasurer Page (from templates/treasurer/index.html.twig)
   -------------------------------------------------------------------------- */
.treasurer-page {
    max-width: 1200px;
    margin: 0 auto;
}

.treasurer-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .treasurer-sections {
        grid-template-columns: 1fr;
    }
}

.treasurer-section {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.treasurer-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--color-text-primary);
}

.treasurer-breakdown {
    margin-bottom: 1.5rem;
}

.treasurer-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.treasurer-breakdown-row:last-child {
    border-bottom: none;
}

.treasurer-breakdown-row--total {
    font-weight: 600;
    padding-top: 0.75rem;
    border-top: 2px solid var(--color-border);
}

.treasurer-breakdown-label {
    color: var(--color-text-secondary);
}

.treasurer-breakdown-value {
    font-weight: 500;
}

.treasurer-breakdown-value--success {
    color: var(--color-positive);
}

.treasurer-breakdown-value--warning {
    color: var(--color-partial-ink);
}

.treasurer-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.treasurer-status-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.treasurer-status-badge {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.treasurer-status-badge--warning { color: var(--color-partial-ink); }  /* #f97316 ne tenait que 2,8:1 */
.treasurer-status-badge--info { color: var(--color-brand); }
.treasurer-status-badge--success { color: var(--color-positive); }
.treasurer-status-badge--danger { color: #ef4444; }
.treasurer-status-badge--muted { color: var(--n-500); }

.treasurer-status-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.treasurer-payments {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
}

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

.treasurer-payments-table th,
.treasurer-payments-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.treasurer-payments-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   Admin Component Styles
   ========================================================================== */

/* Admin Cards */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.admin-stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.admin-stat-card h3 {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 0.5rem;
}

.admin-stat-card .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.admin-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.admin-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-card-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

.admin-card-body {
    padding: 1.5rem;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.admin-table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
}

.admin-table tr:hover {
    background-color: var(--color-gray-50);
}

.admin-table a {
    color: var(--color-primary-600);
    text-decoration: none;
}

.admin-table a:hover {
    text-decoration: underline;
}

/* Page Header */
.admin-page-header {
    margin-bottom: 2rem;
}

.admin-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.admin-page-header p {
    color: var(--color-gray-500);
}

/* Filters */
.admin-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.admin-filters input,
.admin-filters select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.admin-filters input {
    min-width: 250px;
}

/* Admin Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}

.badge--success {
    background-color: var(--color-green-50);
    color: var(--color-green-700);
}

.badge--warning {
    background-color: var(--color-orange-50);
    color: var(--color-orange-600);
}

.badge--danger {
    background-color: var(--color-red-50);
    color: var(--color-red-700);
}

.badge--info {
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
}

.badge--gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Detail page */
.admin-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.admin-detail-section {
    margin-bottom: 1.5rem;
}

.admin-detail-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.admin-detail-value {
    font-size: 1rem;
    color: var(--color-gray-900);
}

/* ==========================================================================
   Admin Administration Page Styles
   ========================================================================== */

.data-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.data-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.data-stat-label {
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.data-stat-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

.admin-card--danger {
    border: 2px solid var(--color-red-300);
}

.admin-card--danger .admin-card-header {
    background-color: var(--color-red-50);
    border-bottom-color: var(--color-red-300);
}

.admin-card--danger .admin-card-header h2 {
    color: var(--color-red-700);
}

.danger-zone-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.danger-zone-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.danger-zone-info p {
    color: var(--color-gray-600);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.danger-warning {
    color: var(--color-red-500) !important;
    font-weight: 600;
}

.btn.btn-danger {
    background-color: var(--color-red-500) !important;
    border-color: var(--color-red-500) !important;
    /* `white` en dur ne tenait que 2,26:1 en thème sombre, où la surface de
       danger devient un corail clair. Le jeton suit la surface. */
    color: var(--color-danger-fg) !important;
    flex-shrink: 0;
}

.btn.btn-danger:hover {
    background-color: var(--color-red-700) !important;
    border-color: var(--color-red-700) !important;
}

.purge-modal {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.purge-modal h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.purge-modal p {
    color: var(--color-gray-600);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.purge-list {
    text-align: left;
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.purge-list li {
    margin-bottom: 0.25rem;
}

.purge-warning {
    color: var(--color-red-500) !important;
    font-weight: 600;
    margin-top: 1rem !important;
}

.purge-confirm-text {
    display: block;
    background: var(--color-gray-100);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-family: monospace;
    margin: 0.5rem 0 1rem;
    color: var(--color-red-700);
}

.purge-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.purge-input:focus {
    outline: none;
    border-color: var(--color-red-500);
}

.purge-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.purge-modal-actions .btn {
    min-width: 150px;
}

/* ==========================================================================
   Admin Club Show Page Styles
   ========================================================================== */

.admin-club-hero {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.admin-club-hero-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.admin-club-hero-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.admin-club-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-club-hero-logo-placeholder {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.admin-club-hero-info {
    flex: 1;
}

.admin-club-hero-badges {
    margin-bottom: 0.5rem;
}

.admin-club-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #ffffff;
}

.admin-club-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.admin-club-hero-code,
.admin-club-hero-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.admin-club-hero-code code {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-weight: 600;
}

.admin-club-hero-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}

.admin-club-hero-back:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.admin-club-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-club-stat {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.admin-club-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.admin-club-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.admin-club-stat--primary .admin-club-stat-icon {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

.admin-club-stat--danger .admin-club-stat-icon {
    background: #fee2e2;
    color: #dc2626;
}

.admin-club-stat--warning .admin-club-stat-icon {
    background: #fef3c7;
    color: #d97706;
}

.admin-club-stat--info .admin-club-stat-icon {
    background: #dbeafe;
    color: var(--color-brand);
}

.admin-club-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1;
}

.admin-club-stat-label {
    font-size: 0.75rem;
    color: var(--n-500);
    margin-top: 0.375rem;
}

.admin-card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-card-header h2 svg {
    color: var(--color-primary-500);
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.admin-user-email {
    font-weight: 500;
    color: var(--color-primary-600);
}

.admin-user-name {
    font-size: 0.75rem;
    color: var(--n-500);
}

.admin-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-status-indicator--active {
    background: #d1fae5;
    color: #065f46;
}

.admin-status-indicator--inactive {
    background: #fee2e2;
    color: #991b1b;
}

.admin-status-danger-zone {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #fee2e2;
}

.admin-status-danger-zone h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #dc2626;
    margin: 0 0 0.5rem;
}

.admin-status-danger-zone p {
    font-size: 0.75rem;
    color: var(--n-500);
    margin: 0 0 1rem;
}

@media (max-width: 768px) {
    .admin-club-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .admin-club-hero-meta {
        justify-content: center;
    }

    .admin-club-hero-back {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .admin-club-hero {
        position: relative;
    }

    .admin-club-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Admin Clubs Grid Styles
   ========================================================================== */

.admin-clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.admin-club-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.admin-club-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.admin-club-card--inactive {
    opacity: 0.7;
    background: #f9fafb;
}

.admin-club-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0;
}

.admin-club-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.admin-club-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-club-logo-placeholder {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.admin-club-card-body {
    padding: 1rem 1.25rem;
}

.admin-club-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.admin-club-code {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: #f3f4f6;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--n-500);
    margin-bottom: 0.75rem;
}

.admin-club-code code {
    font-family: monospace;
    font-weight: 600;
    color: #374151;
}

.admin-club-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-club-meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--n-500);
}

.admin-club-card-footer {
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.admin-club-card-footer .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.admin-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: #f9fafb;
    border-radius: var(--radius-lg);
    color: #9ca3af;
}

.admin-empty-state p {
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   Season Import Members Styles
   ========================================================================== */

.import-members-page {
    max-width: 900px;
    margin: 0 auto;
}

.import-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.import-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.import-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-4);
}

.checkbox-card {
    display: block;
    cursor: pointer;
}

.checkbox-card input {
    display: none;
}

.checkbox-card-content {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.checkbox-card input:checked + .checkbox-card-content {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.checkbox-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    color: var(--color-muted-foreground);
}

.checkbox-card input:checked + .checkbox-card-content .checkbox-card-icon {
    background: var(--color-primary);
    color: white;
}

.checkbox-card-title {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.checkbox-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.import-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.import-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
}

.member-card-checkbox {
    display: block;
    cursor: pointer;
}

.member-card-checkbox input {
    display: none;
}

.member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.member-card-checkbox input:checked + .member-card {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

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

.member-name {
    font-weight: 500;
    margin-bottom: var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.member-category {
    font-size: var(--font-size-xs);
    color: var(--color-muted-foreground);
}

.member-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray-100);
    color: transparent;
}

.member-card-checkbox input:checked + .member-card .member-check {
    background: var(--color-primary);
    color: white;
}

.badge-player {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.badge-parent {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.badge-manager {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
}

.empty-state-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-green-50);
    border-radius: var(--radius-md);
    color: var(--color-green-700);
}

.import-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
}

/* ==========================================================================
   Season Preparation Styles
   ========================================================================== */

.preparation-page {
    max-width: 1200px;
    margin: 0 auto;
}

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

.stat-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon.blue {
    background: var(--color-blue-100);
    color: var(--color-blue-600);
}

.stat-card-icon.green {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.stat-card-icon.orange {
    background: var(--color-orange-100);
    color: var(--color-orange-600);
}

.stat-card-icon.purple {
    background: var(--color-purple-100);
    color: var(--color-purple-600);
}

.stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-foreground);
}

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.preparation-section {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.preparation-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.quick-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.quick-action-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
    background: white;
    white-space: nowrap;
}

.quick-action-card:hover {
    border-color: var(--color-primary);
    background: var(--color-blue-50);
}

.quick-action-card-button {
    cursor: pointer;
    text-align: left;
}

.quick-action-form {
    display: contents;
}

.quick-action-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.quick-action-content {
    flex: 1;
    min-width: 0;
}

.quick-action-title {
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.quick-action-desc {
    font-size: var(--font-size-xs);
    color: var(--color-muted-foreground);
    line-height: 1.2;
}

.preparation-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.toolbar-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.selected-count {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

.members-table-container {
    overflow-x: auto;
}

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

.members-table th,
.members-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.members-table th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    background: var(--color-gray-50);
}

.col-checkbox {
    width: 40px;
}

.row-inactive {
    background: var(--color-gray-50);
}

.member-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.member-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-sm {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.category-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-purple-100);
    color: var(--color-purple-700);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}


.form-select-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    min-width: 180px;
}

.text-center {
    text-align: center;
}

/* ==========================================================================
   Treasurer Page Styles
   ========================================================================== */

.no-club-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-top: 2rem;
}

.no-club-icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-500);
    margin-bottom: 1.5rem;
}

.no-club-state h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
}

.no-club-state p {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
}

.treasurer-page {
    max-width: 1200px;
    margin: 0 auto;
}

.treasurer-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .treasurer-sections {
        grid-template-columns: 1fr;
    }
}

.treasurer-section {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.treasurer-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--color-text-primary);
}

.treasurer-breakdown {
    margin-bottom: 1.5rem;
}

.treasurer-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.treasurer-breakdown-row:last-child {
    border-bottom: none;
}

.treasurer-breakdown-row--total {
    font-weight: 600;
    padding-top: 0.75rem;
    border-top: 2px solid var(--color-border);
}

.treasurer-breakdown-label {
    color: var(--color-text-secondary);
}

.treasurer-breakdown-value {
    font-weight: 500;
}

.treasurer-breakdown-value--success {
    color: var(--color-positive);
}

.treasurer-breakdown-value--warning {
    color: var(--color-partial-ink);
}

.treasurer-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.treasurer-status-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.treasurer-status-badge {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.treasurer-status-badge--warning { color: var(--color-partial-ink); }  /* #f97316 ne tenait que 2,8:1 */
.treasurer-status-badge--info { color: var(--color-brand); }
.treasurer-status-badge--success { color: var(--color-positive); }
.treasurer-status-badge--danger { color: #ef4444; }
.treasurer-status-badge--muted { color: var(--n-500); }

.treasurer-status-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.treasurer-payments {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
}

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

.treasurer-payments-table th,
.treasurer-payments-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.treasurer-payments-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
}

.text-right {
    text-align: right;
}

/* ==========================================================================
   Profile Page Styles
   ========================================================================== */

.profile-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-card-title-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.profile-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary-500);
    color: #ffffff !important;
    transition: all 0.2s;
}

.profile-card-action svg {
    stroke: #ffffff;
}

.profile-card-action:hover {
    background: var(--color-primary-600);
    color: #ffffff !important;
}

.profile-card .btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.profile-club-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-club-active-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: var(--color-green-100);
    color: var(--color-green-700);
    border-radius: var(--radius-full);
    width: fit-content;
}

.profile-club-card--active {
    border-color: var(--color-green-200);
    background: var(--color-green-50);
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal--open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-4);
    animation: modalSlideIn 0.2s ease-out;
    z-index: 1001;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid #e5e7eb;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--n-500);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-body {
    padding: var(--spacing-5);
}

.modal-description {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 var(--spacing-4);
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Club action buttons */
.profile-club-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid #e5e7eb;
}

.profile-club-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 6px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    /* Doublon du bloc plus haut : c'est celui-ci qui s'applique. Fond et bordure
       en dur restaient clairs en thème sombre, où le texte tombait à 2,77:1.
       Le gris atténué ne suffit pas sur cette surface (4,12:1) : ton secondaire. */
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.profile-club-action-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.profile-club-action-btn--primary {
    color: #ffffff;
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.profile-club-action-btn--primary:hover {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #ffffff;
}

.profile-club-action-btn--danger {
    /* #dc2626 sur #fef2f2 ne tenait que 4,41:1. L'encre « impayé » de la charte
       est plus sombre et suit le thème. */
    color: var(--color-unpaid-ink);
    background: var(--color-unpaid-bg);
    border-color: var(--color-unpaid-bg);
}

.profile-club-action-btn--danger:hover {
    background: var(--color-unpaid-bg);
    border-color: var(--color-unpaid-ink);
    color: var(--color-unpaid-ink);
}

.club-code-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-lg);
}

.club-code-value {
    flex: 1;
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-gray-900);
    text-align: center;
}

.club-code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background: var(--color-primary-500, var(--color-brand));
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.club-code-copy-btn:hover {
    background: var(--color-primary-600, var(--color-brand));
}

.club-code-copied {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.875rem;
    color: #059669;
    background: #d1fae5;
    border-radius: var(--radius-md);
    text-align: center;
}

.btn-danger {
    color: #ffffff;
    background: #dc2626;
    border: 1px solid #dc2626;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Logout modal styles */
.modal-content--logout {
    max-width: 480px;
}

.modal-header--logout {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.logout-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #dc2626;
    border-radius: var(--radius-md);
    color: #ffffff;
}

.modal-body--logout {
    text-align: center;
    padding: var(--spacing-6) var(--spacing-5);
}

.logout-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    color: #d97706;
}

.logout-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2);
}

.logout-subtitle {
    font-size: 0.875rem;
    color: var(--n-500);
    margin: 0 0 var(--spacing-4);
}

.modal-footer--logout {
    justify-content: center;
    gap: var(--spacing-3);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    padding: var(--spacing-4) 0;
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.15s ease;
}

.pagination-link:hover:not(.pagination-link--disabled):not(.pagination-link--current) {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-primary);
}

.pagination-link--current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.pagination-link--disabled {
    color: var(--color-gray-400);
    cursor: not-allowed;
    background: var(--color-gray-50);
}

.pagination-link--prev,
.pagination-link--next {
    padding: 0;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-gray-400);
}

/* ============================================
   Address Autocomplete
   ============================================ */

.address-autocomplete-wrapper {
    position: relative;
}

.address-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.address-autocomplete-results.active {
    display: block;
}

.address-autocomplete-item {
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background-color 0.15s ease;
}

.address-autocomplete-item:last-child {
    border-bottom: none;
}

.address-autocomplete-item:hover,
.address-autocomplete-item.highlighted {
    background: var(--color-gray-50);
}

.address-autocomplete-item-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-900);
    font-weight: 500;
}

.address-autocomplete-item-main i,
.address-autocomplete-item-main svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.address-autocomplete-item-secondary {
    margin-top: 2px;
    margin-left: 24px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ============================================
   Club Modules Page
   ============================================ */
.club-modules-page {
    padding-bottom: 2rem;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.module-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-200);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.module-card--enabled {
    border-color: var(--color-green-200);
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-green-50) 100%);
}

.module-card:hover {
    box-shadow: var(--shadow-sm);
}

.module-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.module-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-card--enabled .module-icon {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

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

.module-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem 0;
}

.module-description {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.4;
}

.module-card-actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

.module-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--color-gray-500);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* =============================================================
   Responsive : éviter le débordement horizontal des tables nues
   sur petit écran (défilement horizontal plutôt que page cassée).
   Ne s'active qu'en dessous de 768px — aucun impact desktop.
   ============================================================= */
@media (max-width: 768px) {
    .treasurer-payments-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Pages légales (mentions, confidentialité, CGU, RGPD, cookies)
   -------------------------------------------------------------------------- */
.legal-main {
    /* 7rem en haut : la navbar publique est fixe (4rem) et recouvrirait le titre */
    padding: 7rem 1rem 4rem;
    background: var(--color-background);
}

.legal-container {
    max-width: 48rem;
}

.legal-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.legal-updated {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 1.5rem;
}

.legal-draft {
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-400);
    color: var(--color-orange-600);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    font-size: var(--font-size-sm);
    margin-bottom: 2rem;
}

.legal-prose section {
    margin-bottom: 1.75rem;
}

.legal-prose h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.legal-prose p {
    color: var(--color-gray-700);
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Inscription publique (PRD §34) + variantes d'erreur réutilisables
   -------------------------------------------------------------------------- */
.alert-danger {
    background: var(--color-red-50);
    border: 1px solid var(--color-red-200);
    color: var(--color-red-700);
}

.form-error {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-red-600);
}

.public-registration {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-4);
    background: linear-gradient(180deg, var(--color-blue-50) 0%, var(--color-background) 100%);
}

.public-registration-card {
    width: 100%;
    max-width: 46rem;
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
}

.public-registration-card--center {
    text-align: center;
}

/* Pied fort — groupe de choix en pastilles (PRD §36) */
.foot-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.foot-option {
    flex: 1 1 auto;
    cursor: pointer;
}

.foot-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.foot-option span {
    display: block;
    text-align: center;
    padding: var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.foot-option input:checked + span {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.foot-option input:focus-visible + span {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.public-registration-header {
    margin-bottom: var(--spacing-6);
}

.public-registration-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.public-registration-subtitle {
    margin-top: var(--spacing-2);
    color: var(--color-gray-600);
    line-height: 1.5;
}

/* Formulaire de demande de lien (§66.9). La carte centre son texte, ce qui
   convient au titre mais pas à un libellé posé au-dessus d'un champ pleine
   largeur : il doit s'aligner sur le champ qu'il annonce. Et `.form-group`
   n'a pas de marge haute — sans elle, le libellé colle au sous-titre. */
.login-link-form {
    margin-top: var(--spacing-5);
    text-align: left;
}
.login-link-form .form-group {
    margin-bottom: var(--spacing-4);
}
.login-link-form .btn {
    width: 100%;
    justify-content: center;
}

/* Écran de confirmation d'envoi (§66.9) : trois pas, pour que l'utilisateur
   sache quoi faire plutôt que de rester devant un simple message. */
.login-steps {
    margin: var(--spacing-5) 0;
    padding-left: var(--spacing-5);
    text-align: left;
    color: var(--color-gray-700);
    line-height: 1.9;
}
.login-sent-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}

.public-registration-footnote {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    text-align: center;
}

.public-registration-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.public-registration-icon--success {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.public-registration-icon--muted {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

.public-registration-rgpd {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

/* Sections de la fiche d'inscription : panneaux numérotés (étapes 1, 2, 3).
   Scopé à .public-registration pour ne pas affecter les autres formulaires. */
.public-registration form {
    counter-reset: section;
}

.public-registration .form-section {
    margin-top: var(--spacing-5);
    padding: var(--spacing-5);
    border: 1px solid var(--color-gray-200);
    border-top: 1px solid var(--color-gray-200); /* annule le séparateur seul de .form-section */
    border-radius: var(--radius-xl);
    background: var(--color-gray-50);
}

.public-registration .form-section:first-of-type {
    margin-top: 0;
}

.public-registration .form-section-title {
    counter-increment: section;
    margin: 0 0 var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-lg);
}

.public-registration .form-section-title::before {
    content: counter(section);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--color-blue-600);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Terrain interactif — sélection des postes (PRD §36)
   -------------------------------------------------------------------------- */
/* Sous-panneau d'un terrain : séparation visuelle préférés (bleu) / à éviter (rouge). */
.pitch-block {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-background);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
}

.pitch-block:first-of-type {
    margin-top: var(--spacing-3);
}

.pitch-block--preferred {
    border-top-color: var(--color-blue-600);
}

.pitch-block--avoided {
    border-top-color: var(--color-red-600, #dc2626);
}

/* Titre de chaque terrain (préférés / à éviter). */
.pitch-block-title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-800);
}

.pitch-block--preferred .pitch-block-title {
    color: var(--color-blue-700, var(--color-brand-hover));
}

.pitch-block--avoided .pitch-block-title {
    color: var(--color-red-700, #b91c1c);
}

.pitch-block-hint {
    font-weight: 400;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.pitch-message {
    min-height: 1.25rem;
    margin-bottom: var(--spacing-2);
    color: var(--color-orange-600, #ea580c);
    font-size: var(--font-size-sm);
}

/* Demi-terrain vertical : largeur pleine, ratio constant, marqueurs superposés. */
.pitch {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto var(--spacing-4);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pitch-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pitch-grass {
    fill: #2e9e57;
}

.pitch-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

.pitch-line--area {
    stroke-width: 0.6;
}

/* Marqueur tactile (≥ 36 px) positionné en % via left/top, recentré sur le point. */
.pitch-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.pitch-marker:hover {
    background: rgba(17, 24, 39, 0.75);
}

.pitch-marker.is-preferred {
    background: var(--color-blue-600);
    border-color: #fff;
}

.pitch-marker.is-avoided {
    background: var(--color-red-600, #dc2626);
    border-color: #fff;
}

.pitch-marker-code {
    pointer-events: none;
}

/* Badge de rang (préféré) ou croix (à éviter), en coin du marqueur. */
.pitch-marker-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--color-gray-900);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pitch-marker-badge:empty {
    display: none;
}

.pitch-marker.is-avoided .pitch-marker-badge {
    color: var(--color-red-600, #dc2626);
}

.pitch-summary-list {
    margin: 0 0 var(--spacing-3);
    padding-left: 1.1rem;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.pitch-block .pitch-summary-list:last-child {
    margin-bottom: 0;
}

ol.pitch-summary-list {
    list-style: decimal;
}

ul.pitch-summary-list {
    list-style: disc;
}

.pitch-summary-empty {
    list-style: none;
    margin-left: -1.1rem;
    color: var(--color-gray-400);
    font-style: italic;
}

/* Réinitialiser : cible tactile pleine largeur, confortable au pouce. */
.pitch-reset {
    width: 100%;
    min-height: 44px;
}

/* Mobile : marges de carte réduites pour maximiser la zone utile,
   et CTA principal plus haut (confort tactile au pouce). */
@media (max-width: 480px) {
    /* Trois rembourrages s'empilaient — page 12 + carte 20 + section 20 — soit
       52 px pris de chaque côté : sur un écran de 320 px il ne restait que
       212 px au champ, et le sélecteur de date natif n'y tient pas. */
    .public-registration {
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-6);
    }

    .public-registration-card {
        padding: var(--spacing-4);
    }

    .public-registration .form-section {
        padding: var(--spacing-4);
    }
}

.public-registration .btn-full {
    min-height: 48px;
}

/* --------------------------------------------------------------------------
   Encadrants par catégorie (PRD §35)
   -------------------------------------------------------------------------- */
.educators-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.educator-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
}

.educator-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
}

.educator-add-form {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Équipes par catégorie (PRD §37) */
.teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.team-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.team-rename-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
}

.team-rename-form .form-input {
    max-width: 280px;
}

.team-add-form {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
}

.team-add-form .form-input {
    max-width: 280px;
}

.matchday-add-form {
    /* Édition uniquement : masqué par défaut, révélé par le crayon (mode édition). */
    display: none;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
}
/* Formulaire de création de journée (page dédiée) : toujours visible (il partage
   la classe .matchday-add-form pour la mise en page, mais hors du mode édition). */
.matchday-add-form--standalone { display: flex; }
/* 3 champs (adversaire, dom./ext., horaire) + bouton sur une même ligne ; l'adversaire
   occupe l'espace, les autres à leur largeur naturelle. Repli en mobile (flex-wrap). */
.matchday-add-form .form-input,
.matchday-add-form .form-select { width: auto; }
.matchday-add-form input[name="opponent"] { flex: 1 1 140px; min-width: 120px; }
.matchday-add-form input[name="start_time"] { flex: 0 0 auto; }

/* Mode édition (crayon) : masque la lecture, montre formulaires + équipes + annuler. */
.matchday-teams-form { display: none; }

.presence-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

/* Un bloc par équipe sur la page d'une journée (PRD §37.8) */
/* Équipes engagées ce jour-là (toggle-chips, §38). */
.matchday-engaged-form {
    padding: var(--spacing-3);
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

/* Édition du libellé : masquée par défaut, ouverte via le crayon (contrôleur collapse). */
.matchday-label-form { display: none; margin-bottom: var(--spacing-4); }

.matchday-team {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.matchday-team:last-child {
    border-bottom: none;
}

.matchday-add-form .form-input {
    max-width: 220px;
}

.educator-add-form .form-select {
    max-width: 22rem;
}

/* ==========================================================================
   Utilitaires de taille d'icône (Lucide / SVG)
   Remplacent les style="width:Npx;height:Npx" inline des templates.
   Placés après .lucide pour gagner sur width/height:inherit (specificity égale).
   ========================================================================== */
.u-icon-12 { width: 12px; height: 12px; }
.u-icon-13 { width: 13px; height: 13px; }
.u-icon-14 { width: 14px; height: 14px; }
.u-icon-16 { width: 16px; height: 16px; }
.u-icon-18 { width: 18px; height: 18px; }
.u-icon-20 { width: 20px; height: 20px; }
.u-icon-22 { width: 22px; height: 22px; }
.u-icon-24 { width: 24px; height: 24px; }
.u-icon-28 { width: 28px; height: 28px; }
.u-icon-32 { width: 32px; height: 32px; }
.u-icon-48 { width: 48px; height: 48px; }
.u-icon-64 { width: 64px; height: 64px; }
.u-icon-muted { opacity: 0.4; }
.u-text-warning { color: var(--color-orange-500); }

/* ==========================================================================
   CHARTE « TABLEAU DE COACH » — surcouche
   Ces règles arrivent en fin de feuille (elles gagnent à spécificité égale).
   Réf : design_handoff_charte_klubby/README.md
   ========================================================================== */

/* ---- Thème sombre (dormant tant qu'aucun [data-theme=dark] n'est posé) ---- */
[data-theme="dark"] {
    color-scheme: dark;                /* chrome natif (date-picker, scrollbars) en sombre */
    --color-bg: #131A26;   --color-surface: #1B2431;
    --color-brand: #F0B429;            /* le jaune devient l'action primaire */
    --color-ardoise: #1C2536;          /* surfaces dominantes restent ardoise (PRD §48.3) */
    --color-positive: #4FCBB4;
    --n-100: #2A3442;  --n-200: #2A3442;  --n-300: #8D94A1;
    --n-500: #8D94A1;  --n-700: #C3C8D1;  --n-900: #F1F2F4;
    /* Gris greige littéraux (400/600/800) : sans override, ils restaient en valeurs
       « mode clair » → textes illisibles en sombre (addon, chips modules, dates…). */
    --color-gray-400: #7A828F;   /* muted / désactivé */
    --color-gray-600: #AAB0BA;   /* texte secondaire */
    --color-gray-800: #E6E8EC;   /* texte fort */
    --color-partial-bg: rgba(240,180,41,.15);  --color-partial-ink: #F0B429;
    --color-unpaid-bg:  rgba(255,140,122,.15); --color-unpaid-ink:  #FF8C7A;
    /* La surface de danger devient un corail clair : le texte doit s'assombrir. */
    --color-danger-fg:  #131A26;
    --color-background: var(--color-surface);
    --color-gray-50: var(--color-bg);
    --elev-2: 0 0 0 1px #2A3442;
}

/* ---- Base typographique de la charte ---- */
h1, h2, h3, h4, h5, h6,
.card-title, .form-title, .page-title, .page-header-title,
.section-title, .modal-title, .stat-value, .empty-state-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Chiffres tabulaires pour aligner les montants */
.license-amount, .order-amount, .fines-row-amount, .fines-row-date,
.kpi-num, .kpi-hero-num, .stat-value {
    font-variant-numeric: tabular-nums;
}
/* Anneau de focus jaune — signe d'identité (ne jamais neutraliser sans remplacer) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Sidebar ardoise (token dédié, stable en clair ET sombre — PRD §48.3) ---- */
.sidebar {
    background: var(--color-ardoise);
    border-right: none;
}
@media (min-width: 1024px) {
    .sidebar { width: 216px; }
}
.sidebar-header { border-bottom-color: rgba(255,255,255,.08); }
.sidebar-logo-text { color: #F1F2F4; font-family: var(--font-display); letter-spacing: -0.03em; font-weight: 700; }
/* Logo = fanion jaune vertical (signe de marque principal) */
.sidebar-logo-icon {
    background: var(--color-accent);
    width: 24px;
    height: 32px;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.sidebar-logo-icon i, .sidebar-logo-icon svg { display: none; }
.sidebar-close-btn { color: #A9AEB8; }
.sidebar-close-btn:hover { background: rgba(255,255,255,.08); color: #F1F2F4; }

.sidebar-nav-item {
    color: #A9AEB8;
    border-radius: 10px;
    border-left: 3px solid transparent;
    font-weight: 600;
}
.sidebar-nav-item:hover { background: rgba(255,255,255,.06); color: #F1F2F4; }
.sidebar-nav-item.active {
    background: rgba(240,180,41,.13);
    color: #F1F2F4;
    font-weight: 700;
    border-left-color: var(--color-accent);
}
.sidebar-nav-item--admin { color: var(--color-accent); }
.sidebar-nav-item--admin:hover,
.sidebar-nav-item--admin.active { background: rgba(240,180,41,.13); color: var(--color-accent); }
.sidebar-nav-item--support { color: #C3C8D1; }
.sidebar-nav-item--support:hover,
.sidebar-nav-item--support.active { background: rgba(255,255,255,.06); color: #F1F2F4; }
.sidebar-nav-divider { background: rgba(255,255,255,.08); }

.sidebar-footer { border-top-color: rgba(255,255,255,.08); }
.sidebar-member-switcher { background: rgba(255,255,255,.05); }
.sidebar-member-label { color: #A1A8B4; }  /* 4,35:1 → 5,54:1 */
.sidebar-member-select {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: #F1F2F4;
}
.sidebar-member-select:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.sidebar-member-chevron { color: #8D94A1; }
.sidebar-user { background: rgba(255,255,255,.07); border-radius: 12px; }
.sidebar-user:hover { background: rgba(255,255,255,.11); }
.sidebar-user.active { background: rgba(240,180,41,.13); }
.sidebar-user-avatar { background: var(--color-accent); color: var(--color-brand); font-weight: 700; }
.sidebar-user-name { color: #F1F2F4; }
.sidebar-user-role { color: #A1A8B4; }  /* 4,09:1 → 5,22:1 */

/* ---- Tableau de bord ---- */
.dash { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.eyebrow {
    font-family: var(--font-body);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--n-500); margin: 0 0 6px;
}
.eyebrow--light { color: rgba(241,242,244,.72); }
.dash-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 29px; letter-spacing: -0.03em; line-height: 1.08;
    color: var(--n-900); margin: 0;
}

.kpi-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 10px; }
.kpi-row--3 { grid-template-columns: 1.35fr 1fr 1fr; }
.kpi-row--2 { grid-template-columns: 1.35fr 1fr; }
.kpi-row--1 { grid-template-columns: 1fr; }
.kpi {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--elev-2); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
/* Carte KPI cliquable (redirige vers la page dédiée). */
.kpi--link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi--link:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-1px); }
.kpi--link:focus-visible { outline: 3px solid var(--color-primary, #f5c542); outline-offset: 2px; }
.kpi-num {
    font-family: var(--font-display); font-weight: 700;
    font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; color: var(--n-900);
}
.kpi-foot { font-size: 11.5px; color: var(--n-500); }
.kpi-foot--pos { color: var(--color-positive); font-weight: 600; }
.kpi-num--pos { color: var(--color-positive); }
/* Ligne active « Historique des saisons » : teinte teal sombre (texte clair lisible) */
[data-theme="dark"] .member-season-item.active { background: rgba(79,203,180,.13); border-color: rgba(79,203,180,.28); }

/* Champs de formulaire en sombre : bordure adoucie (le gris clair par défaut est trop vif). */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-control {
    border-color: #3a4656;
}

/* Survols à fond clair littéral (illisibles en sombre) → survol sombre approprié. */
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .profile-club-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .profile-club-action-btn--danger:hover {
    background: rgba(255, 140, 122, 0.15);
}

/* Survols à teinte claire (*-50) → versions sombres, évite le flash clair au survol.
   (.btn-white est exclu : c'est le CTA blanc de la landing, son survol clair est correct.) */
[data-theme="dark"] .quick-action:hover,
[data-theme="dark"] .quick-action-card:hover,
[data-theme="dark"] .day-label:hover,
[data-theme="dark"] .category-label:hover {
    background: rgba(96, 165, 250, 0.12);
}
[data-theme="dark"] .quick-action.green:hover {
    background: rgba(79, 203, 180, 0.14);
}
[data-theme="dark"] .quick-action.purple:hover {
    background: rgba(167, 139, 250, 0.14);
}
[data-theme="dark"] .quick-action.orange:hover {
    background: rgba(240, 180, 41, 0.12);
}
[data-theme="dark"] .header-dropdown-item--danger:hover {
    background: rgba(255, 140, 122, 0.15);
}
/* Ces survols posent aussi un texte coloré foncé : on éclaircit texte + fond. */
[data-theme="dark"] .btn-icon--success:hover {
    background: rgba(79, 203, 180, 0.16);
    color: #4FCBB4;
}
[data-theme="dark"] .btn-icon--deliver:hover {
    background: rgba(96, 165, 250, 0.16);
    color: #93C5FD;
}
[data-theme="dark"] .order-add-item:hover {
    background: rgba(96, 165, 250, 0.12);
    color: #93C5FD;
    border-color: #60A5FA;
}
[data-theme="dark"] .sidebar-nav-item--admin:hover {
    background: rgba(240, 180, 41, 0.14);
    color: #F0B429;
}

/* ---- Bascule thème clair/sombre (PRD §48) ---- */
.header-actions { display: flex; align-items: center; gap: var(--spacing-1); }
.header-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.header-theme-toggle:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
/* Icône affichée selon le thème : lune en clair (→ sombre), soleil en sombre (→ clair) */
.header-theme-toggle .theme-icon-sun { display: none; }
.header-theme-toggle .theme-icon-moon { display: inline-flex; }
[data-theme="dark"] .header-theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .header-theme-toggle .theme-icon-sun { display: inline-flex; }

.kpi--hero { position: relative; background: var(--color-ardoise); color: #F1F2F4; padding: 18px 20px 16px; }
.kpi--hero .eyebrow { padding-left: 4px; }
/* Carte assiduité cliquable → détail des présences */
.kpi--link { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.kpi--link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,26,36,.18); }
.kpi--link .eyebrow i { vertical-align: -2px; opacity: .7; }
.kpi-hero-bar {
    position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px;
    border-radius: 0 3px 3px 0; background: var(--color-accent);
}
.kpi-hero-num {
    font-family: var(--font-display); font-weight: 700;
    font-size: 36px; letter-spacing: -0.035em; line-height: 1; color: #fff; padding-left: 4px;
}
.kpi-hero-total { color: rgba(241,242,244,.55); font-size: 22px; }
.kpi-progress {
    height: 7px; border-radius: 999px; background: rgba(255,255,255,.14);
    overflow: hidden; margin: 6px 0 4px 4px;
}
.kpi-progress > span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.kpi-hero-foot { font-size: 12px; color: rgba(241,242,244,.75); padding-left: 4px; }

.dash-lower { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; }
.dash-panel {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--elev-2); overflow: hidden;
}
.dash-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.tick { display: inline-block; flex: 0 0 auto; width: 4px; height: 16px; border-radius: 2px; background: var(--color-accent); vertical-align: -2px; margin-right: 8px; }
.dash-panel-head .tick { width: 4px; height: 16px; border-radius: 2px; background: var(--color-accent); margin-right: 0; }
.dash-panel-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 16px; letter-spacing: -0.02em; color: var(--n-900); margin: 0; flex: 1;
}
.dash-panel-link { font-size: 12.5px; font-weight: 600; color: var(--color-accent-ink); }

/* Chiffre dominant à côté d'un titre de page (charte : « Membres 148 ») */
.page-title-count { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--n-300); }

/* Fiche licence : carte paiement = carte d'action (barre d'accent jaune en haut) */
.license-payment-card { position: relative; overflow: hidden; }
.license-payment-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--color-accent);
}
.license-payment-progress-meta {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 8px; font-size: 12px; color: var(--n-500);
}

/* Historique des versements (§45) */
.versement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.versement-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--n-100); }
.versement-row:first-child { border-top: none; }
.versement-meta { color: var(--n-500); font-size: 13px; }
.versement-amount { margin-left: auto; font-weight: 700; color: var(--color-positive); font-variant-numeric: tabular-nums; }
.versement-delete { margin: 0; display: flex; }
.versement-delete-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; color: var(--n-500); background: transparent;
}
.versement-delete-btn:hover { background: var(--color-unpaid-bg); color: var(--color-unpaid-ink); }

@media (max-width: 900px) {
    .kpi-row { grid-template-columns: 1fr 1fr; }
    /* 1 ou 2 cartes : empilées pleine largeur (pas de colonne vide). */
    .kpi-row--1, .kpi-row--2 { grid-template-columns: 1fr; }
    .kpi--hero { grid-column: 1 / -1; }
    .dash-lower { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .dash-title { font-size: 23px; letter-spacing: -0.035em; }
    .kpi-hero-num { font-size: 38px; }
}

/* ========= Audit responsive 320-430 px (UX_RULES §5) — correctifs ciblés ========= */

/* Cartes catégories : l'en-tête (n° + nom / badges + actions) se replie. */
@media (max-width: 640px) {
    .category-card-header { flex-wrap: wrap; }
}

/* Listes de membres (fiche catégorie, index) : la colonne nom peut rétrécir,
   les noms longs passent à la ligne au lieu de faire déborder la carte. */
@media (max-width: 640px) {
    .members-list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .members-list-col--member { min-width: 0; }
    .members-list-col--member > * { min-width: 0; }
    .members-list-col--member .member-name { overflow-wrap: anywhere; }
}

/* Calendrier mensuel : cellules d'en-tête compressibles (7 jours en 320 px). */
@media (max-width: 640px) {
    .calendar-header-cell { padding: 0.5rem 0.125rem; font-size: 0.75rem; }
}

/* Trésorerie : les 4 compteurs de statut passent en 2 × 2. */
@media (max-width: 640px) {
    .treasurer-status-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Modules du club : une carte ne dépasse jamais la largeur disponible. */
.modules-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* Saison (fiche) : la rangée d'actions se replie. */
@media (max-width: 640px) {
    .season-detail-actions { flex-wrap: wrap; }
}

/* Préparation de saison : barre d'outils repliable (le tableau, lui, défile
   dans son conteneur .members-table-container comme prévu). */
@media (max-width: 640px) {
    .preparation-toolbar,
    .toolbar-left,
    .toolbar-right,
    .toolbar-action { flex-wrap: wrap; }
    /* Le select (« Assigner à une catégorie… ») ne dépasse pas la largeur disponible. */
    .toolbar-action .form-select { max-width: 100%; }
}

/* Profil : les valeurs longues sans espaces (e-mail) se coupent, et la rangée
   d'actions d'un club (code d'invitation…) se replie. */
.profile-info-value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .profile-club-actions { flex-wrap: wrap; }
}

/* Partenaires (index) : une carte ne dépasse jamais la largeur disponible,
   et les contacts longs (e-mail) se coupent au lieu d'élargir la carte. */
.partners-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* La barre de filtres (selects) se replie sur petit écran. */
@media (max-width: 640px) {
    .partners-filters,
    .partners-filters-form { flex-wrap: wrap; }
    .partners-filters-form .form-select { max-width: 100%; }
}

/* ============ Assiduité club (§39.8) : tableau triable, responsive ============ */
/* Tableau de statistiques par joueur (assiduité §39.8, lavage des maillots §38.9) :
   gabarit commun, libellés raccourcis et compteurs masqués en petit écran. */
.stats-table-scroll { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table th,
.stats-table td { padding: var(--spacing-2) var(--spacing-3); }
.stats-table tbody tr { border-top: 1px solid var(--color-border); }
.stats-table-th-player,
.stats-table-td-player { text-align: left; }
.stats-table-th-num,
.stats-table-td-num { text-align: right; white-space: nowrap; }
.stats-table-th-num a { text-decoration: none; color: inherit; }
.stats-table-count { font-size: 0.85em; }
.stats-table-label-short { display: none; }
/* Mobile (UX_RULES §5, 320-430 px) : détail (x/y) masqué, libellés courts,
   padding resserré → les 4 colonnes tiennent sans défilement horizontal. */
@media (max-width: 640px) {
    .stats-table th,
    .stats-table td { padding: var(--spacing-2); }
    .stats-table-count { display: none; }
    .stats-table-label-full { display: none; }
    .stats-table-label-short { display: inline; }
}
/* Très petits écrans (≤400 px, viewport 320) : police resserrée pour tenir sans défilement. */
@media (max-width: 400px) {
    .stats-table { font-size: 0.85em; }
    .stats-table th,
    .stats-table td { padding: var(--spacing-2) var(--spacing-1); }
}

/* ---- Autocomplete multi-membres (pastilles + recherche) ---- */
.member-multi-autocomplete {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}
.member-chips:empty {
    display: none;
}
.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-900);
}
.member-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-gray-200);
    color: var(--color-gray-700);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.member-chip-remove:hover {
    background: var(--color-unpaid-bg);
    color: var(--color-unpaid-ink);
}

/* ---- Rappel contextuel « Relancer les réponses » sur les cartes d'événement du dashboard ---- */
.event-relance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--spacing-2);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-partial-bg);
    color: var(--color-accent-ink);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   Analyse de l'adversaire (PRD §52)
   Lecture par défaut ; le crayon (classe .analysis--editing) ouvre le formulaire.
   ============================================================ */
.analysis-page .page-header-content { align-items: center; }
.analysis-edit-btn { margin-left: auto; }

/* Bascule lecture / édition (même logique que la fiche journée). */
.analysis-form { display: none; }
.analysis--editing .analysis-form { display: block; }
.analysis--editing .analysis-readonly { display: none; }

/* Deux colonnes qui repassent en une seule en mobile. */
.analysis-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-4);
}
@media (max-width: 640px) {
    .analysis-columns { grid-template-columns: 1fr; }
}

.analysis-description { margin: 0 0 var(--spacing-4); line-height: 1.5; }

/* Bandeau de statistiques de l'adversaire (système, classement, points…). */
.analysis-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}
.analysis-stat {
    display: flex;
    flex-direction: column;
    min-width: 72px;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
}
.analysis-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.analysis-stat-value { font-weight: 700; font-size: var(--font-size-lg); }

.analysis-list { margin: 0; padding-left: var(--spacing-4); }
.analysis-list li { margin-bottom: var(--spacing-2); line-height: 1.4; }
.analysis-titled { list-style: none; margin: 0; padding: 0; }
.analysis-titled li { margin-bottom: var(--spacing-3); line-height: 1.4; }

.analysis-lineup-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Formulaire d'édition. */
.analysis-form-section {
    margin: var(--spacing-5) 0 var(--spacing-3);
    font-size: var(--font-size-base);
    font-weight: 700;
}
.analysis-form-section:first-of-type { margin-top: 0; }
.analysis-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-3);
}
.analysis-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .analysis-form-grid,
    .analysis-form-grid--2 { grid-template-columns: 1fr; }
}
.analysis-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}

/* ==========================================================================
   Effectifs par équipe (page catégorie, PRD §59) — affectation rapide
   ========================================================================== */
.team-roster-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.team-roster-list {
    display: flex;
    flex-direction: column;
}

.team-roster-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.team-roster-row:last-child {
    border-bottom: none;
}

.team-roster-row .form-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 9rem;
}

.form-select--saved {
    border-color: var(--color-green-600);
}

/* ==========================================================================
   Journée v3.49 — lignes de match à la création, compteurs par équipe
   ========================================================================== */
.match-lines { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); }
.match-lines[hidden] { display: none; } /* l'attribut hidden doit l'emporter sur display:flex */
.match-line { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto auto; align-items: center; gap: var(--spacing-2); }
.match-line-team { display: inline-flex; align-items: center; gap: var(--spacing-2); font-weight: 600; }
.match-line .form-input[type="text"] { min-width: 0; }
.match-line .form-select, .match-line .form-input[type="time"] { width: auto; }
@media (max-width: 640px) {
    .match-line { grid-template-columns: 1fr 1fr; }
    .match-line-team, .match-line .form-input[type="text"] { grid-column: 1 / -1; }
}

.presence-teams { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: var(--spacing-3) 0; }
.presence-team-chip { display: inline-flex; gap: var(--spacing-1); align-items: baseline; padding: 0.25rem 0.6rem; border-radius: var(--radius-full, 999px); background: var(--color-gray-100); font-size: var(--font-size-xs); }
.attendance-team-badge { display: inline-block; margin-left: var(--spacing-1); padding: 0 0.4rem; border-radius: var(--radius-sm); background: var(--color-gray-100); color: var(--color-gray-600); font-size: 0.7rem; font-weight: 600; vertical-align: middle; }
.card-header .inline-form { margin-left: auto; }

/* ==========================================================================
   Finition charte v3.50 — en-tête de page, menu « Plus », sections du menu,
   ligne méta de la fiche événement, journées en mobile
   ========================================================================== */
.page-header-text { min-width: 0; }
.page-eyebrow { margin-bottom: 4px; }
.page-title { letter-spacing: -0.03em; }
.page-subtitle { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: 2px; }

.page-header-actions { display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; justify-content: flex-end; }
.page-header-menu { position: relative; }
.page-header-menu-list {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 220px; padding: 6px; background: var(--color-surface, #fff);
    border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); box-shadow: var(--elev-2);
}
.page-header-menu-list.active { display: block; }
.page-header-menu-item {
    display: flex; align-items: center; gap: var(--spacing-2); padding: 9px 10px;
    border-radius: var(--radius-md); color: var(--color-gray-800); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none;
}
.page-header-menu-item:hover { background: var(--color-gray-50); }
.page-header-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 768px) {
    .page-header-actions { flex-direction: row; }
    .page-header-menu { flex: 1; }
    .page-header-menu > .btn { width: 100%; }
    .page-header-menu-list { left: 0; right: auto; min-width: 100%; }
}

.sidebar-nav-label {
    margin: var(--spacing-3) var(--spacing-3) 2px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    /* 0.7 d'opacité donnait 4,14:1 sur l'ardoise : sous le seuil AA. */
    color: rgba(169, 174, 184, 0.92);
}

.event-detail-meta { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-gray-500); }
.event-detail-meta a { color: inherit; text-decoration: underline; }

/* Journées (mobile) : date · libellé · chevron sur la 1re ligne, scores dessous. */
@media (max-width: 640px) {
    .matchday-item > svg { order: 2; margin-left: auto; }
    .matchday-scores { order: 3; }
}

/* Licences (mobile) : grille stable quelle que soit la longueur du nom. */
@media (max-width: 768px) {
    .licenses-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-3); row-gap: var(--spacing-1); }
    .licenses-list-col--member { grid-column: 1; grid-row: 1; min-width: 0; }
    .licenses-list-col--status { grid-column: 2; grid-row: 1; justify-self: end; }
    .licenses-list-col--amount { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: baseline; gap: var(--spacing-2); }
    .license-member-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Ligne méta de la fiche événement : tout sur une ligne, lien inline. */
.event-detail-meta { display: block; }
.event-detail-meta a { display: inline; white-space: nowrap; }

/* Journées : libellé extensible, chevron toujours en 1re ligne. */
.matchday-date { flex: 0 0 auto; }

/* Thème sombre : résultat de match lisible (les teintes claires étaient délavées). */
[data-theme="dark"] .match-tag--loss { background: rgba(255, 140, 122, 0.15); color: #FF8C7A; }
[data-theme="dark"] .match-tag--win { background: rgba(79, 203, 180, 0.15); color: #4FCBB4; }

/* Menu latéral : la liste défile si elle dépasse la hauteur de fenêtre (le bloc
   utilisateur reste visible en bas) ; libellés de section resserrés. */
.sidebar-nav { overflow-y: auto; min-height: 0; gap: 2px; scrollbar-width: thin; }
.sidebar-nav-label { margin: var(--spacing-2) var(--spacing-3) 0; }
.sidebar-nav-label:first-of-type { margin-top: var(--spacing-1); }
/* Indice de défilement discret en bas de la liste du menu. */
.sidebar-nav { box-shadow: inset 0 -14px 14px -14px rgba(0, 0, 0, 0.45); }

/* Sections repliables du menu latéral (état mémorisé par navigateur). */
.sidebar-nav-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-group-body { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-group.is-collapsed .sidebar-nav-group-body { display: none; }
button.sidebar-nav-label {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 6px var(--spacing-3) 2px; cursor: pointer; text-align: left;
    font: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    /* Même raison qu'au-dessus : 0.7 donnait 4,14:1 sur l'ardoise. Ce sélecteur
       est plus spécifique, il faut le corriger aussi — les intitulés de section
       sont des boutons depuis qu'ils se replient. */
    color: rgba(169, 174, 184, 0.92); border-radius: var(--radius-sm);
}
button.sidebar-nav-label:hover { color: #F1F2F4; }
button.sidebar-nav-label:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.sidebar-nav-label-chevron { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.sidebar-nav-group.is-collapsed .sidebar-nav-label-chevron { transform: rotate(-90deg); }

/* Catalogue d'équipements : visuels moins hauts, grille plus dense sur grand écran. */
.product-card-image { aspect-ratio: 16 / 10; max-height: 190px; }

/* Thème sombre : les teintes claires « -50 » (fonds de cartes sélectionnées, encarts,
   lignes actives) restaient en valeurs claires → textes clairs illisibles (audit 15/09).
   Tokens redéfinis une fois pour toutes plutôt que règle par règle. */
[data-theme="dark"] {
    --color-blue-50: #1F2733;
    --color-purple-50: #1F2733;
    --color-yellow-50: rgba(240, 180, 41, 0.12);
    --color-paid-bg: rgba(79, 203, 180, 0.15);   --color-paid-ink: #4FCBB4;
    --color-pending-bg: #2A3442;                  --color-pending-ink: #C3C8D1;
    --color-exempt-bg: rgba(169, 190, 221, 0.15); --color-exempt-ink: #A9BEDD;
}
[data-theme="dark"] .team-card--current { background: rgba(240, 180, 41, 0.10); }
[data-theme="dark"] .profile-club-card--active { background: rgba(79, 203, 180, 0.10); border-color: rgba(79, 203, 180, 0.35); }
[data-theme="dark"] .module-card--enabled { background: var(--color-surface); border-color: rgba(79, 203, 180, 0.35); box-shadow: inset 3px 0 0 var(--color-positive); }
[data-theme="dark"] { --color-white: var(--color-surface); } /* utilisé uniquement en fond de carte */
.event-attendance-stats { padding-top: var(--spacing-3); } /* la barre ne colle plus à l'en-tête de carte */

/* ==========================================================================
   Thème sombre — alignement sur la maquette 3b « Tableau de coach » (v3.50)
   Barre latérale plus sombre que le contenu, cartes bordées sans ombre, chips
   en teintes translucides, bouton primaire jaune à texte sombre.
   ========================================================================== */
[data-theme="dark"] {
    --color-accent-ink: #F0B429;
    --color-green-100: rgba(79, 203, 180, 0.16); --color-green-200: rgba(79, 203, 180, 0.30);
    --color-green-300: #4FCBB4; --color-green-400: #4FCBB4; --color-green-600: #4FCBB4;
    --color-red-100: rgba(255, 140, 122, 0.16); --color-red-200: rgba(255, 140, 122, 0.30);
    --color-red-300: #FF8C7A; --color-red-500: #FF8C7A; --color-red-700: #FF8C7A;
    --color-orange-100: rgba(240, 180, 41, 0.16); --color-orange-200: rgba(240, 180, 41, 0.30);
    --color-orange-300: #F0B429; --color-orange-700: #F0B429; --color-orange-800: #F0B429;
    --color-purple-100: rgba(196, 181, 253, 0.16); --color-purple-300: #C4B5FD;
    --color-purple-600: #C4B5FD; --color-purple-700: #C4B5FD;
    --color-yellow-100: rgba(240, 180, 41, 0.16); --color-yellow-200: rgba(240, 180, 41, 0.30); --color-yellow-800: #F0B429;
    --color-blue-100: #2A3442; --color-blue-200: #2A3442; --color-blue-300: #8D94A1;
}
[data-theme="dark"] .sidebar { background: #0E141E; }
[data-theme="dark"] .header { background: var(--color-bg); border-bottom-color: #2A3442; }
[data-theme="dark"] .card, [data-theme="dark"] .kpi, [data-theme="dark"] .event-card,
[data-theme="dark"] .matchday-item, [data-theme="dark"] .members-list, [data-theme="dark"] .licenses-list,
[data-theme="dark"] .event-detail-card, [data-theme="dark"] .dash-panel, [data-theme="dark"] .product-card,
[data-theme="dark"] .team-card, [data-theme="dark"] .module-card, [data-theme="dark"] .profile-club-card,
[data-theme="dark"] .stat-card, [data-theme="dark"] .empty-state {
    background: var(--color-surface); border: 1px solid #2A3442; box-shadow: none;
}
[data-theme="dark"] .kpi--hero { background: var(--color-surface); }
[data-theme="dark"] .kpi--hero .eyebrow { color: var(--color-accent); }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .page-header-fab { background: var(--color-accent); color: #0E141E; }
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .page-header-fab:hover { background: #F5C452; color: #0E141E; }
[data-theme="dark"] .btn-primary svg, [data-theme="dark"] .page-header-fab svg { color: #0E141E; }
[data-theme="dark"] .btn-outline { border-color: #3A4656; color: #F1F2F4; }
[data-theme="dark"] .btn-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: #4A5668; color: #F1F2F4; }
[data-theme="dark"] .members-list-header, [data-theme="dark"] .licenses-list-header,
[data-theme="dark"] .orders-list-header, [data-theme="dark"] thead th { background: #151E29; color: #8D94A1; }
/* Texte « ardoise » (blue-700) : clair en sombre (badges de type, libellés). Les fonds qui
   l'utilisaient (boutons au survol) ont leurs propres règles sombres ci-dessus. */
[data-theme="dark"] { --color-blue-700: #C3C8D1; }
[data-theme="dark"] .receive-header-card { background: var(--color-surface); }
/* Bloc date des cartes événement : primary-500 = ardoise (invisible en sombre). */
[data-theme="dark"] .event-card-date { background: #2A3442; }
[data-theme="dark"] .event-card-month { color: #C3C8D1; }
[data-theme="dark"] .event-card-day { color: var(--color-accent); }

/* ==========================================================================
   Audit 2026-09-22 — corrections UX/accessibilité (points 13 à 20)
   Charte « Tableau de coach » conservée : tokens existants, aucune refonte.
   ========================================================================== */

/* 12. Modales : les contrôles n'animent pas la visibilité héritée de l'overlay
   (`.btn { transition: all }` interpolerait `visibility` et retarderait le focus
   initial). Seules les propriétés décoratives restent animées. */
.modal-overlay .btn,
.modal-overlay button,
.modal-overlay a,
.modal-overlay input,
.modal-overlay select,
.modal-overlay textarea {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

/* 13. Calendrier : 7 colonnes égales, alignées sur l'en-tête, jamais coupées.
   minmax(0, 1fr) + min-width: 0 empêchent une colonne de s'élargir avec son contenu. */
.calendar-header,
.calendar-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-header-cell,
.calendar-day,
.calendar-day-events,
.calendar-event,
.calendar-week-day,
.calendar-week-day-events {
    min-width: 0;
}
.calendar-event-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-day-more {
    display: block;
    text-decoration: none;
    font-weight: 600;
    border-radius: 3px;
}
.calendar-day-more:hover,
.calendar-day-more:focus-visible {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}
@media (min-width: 900px) {
    .calendar-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.year-mini-head,
.year-mini {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.year-mini-day { min-width: 0; }
@media (max-width: 640px) {
    .calendar-day { padding: 0.25rem 0.125rem; }
    .calendar-event { padding: 2px 3px; font-size: 0.6875rem; gap: 2px; }
    .calendar-day-more { font-size: 0.6875rem; padding: 2px 3px; }
}

/* 14. Formulaire d'événement : carte sélectionnée lisible en sombre
   (bordure et libellé jaune signal, fond translucide déjà en place). */
[data-theme="dark"] .event-type-option input:checked + .event-type-card,
[data-theme="dark"] .event-type-option input:checked + .event-type-card:hover,
[data-theme="dark"] .recurrence-option input:checked + .recurrence-card {
    border-color: var(--color-accent);
}

/* 17. Formulaire d'événement : cartes de type et de récurrence compactes
   (une ligne, 44 px de cible), pour rapprocher titre, catégorie, date et heure. */
.event-type-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-2);
}

/* 15. Cibles tactiles : les actions importantes font 42 px (ordinateur) / 44 px (mobile).
   .btn-sm ne descend jamais sous 44 px de zone tactile en mobile (--tap-min). */
.license-payment-actions .btn { min-height: 42px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.license-quick-pay-form .form-input,
.license-quick-pay-form .form-select { min-height: 42px; }
.license-payment-actions { display: flex; flex-direction: column; gap: var(--spacing-3); }
@media (max-width: 767px) {
    .btn-sm { min-height: var(--tap-min, 44px); padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .license-payment-actions .btn,
    .license-quick-pay-form .form-input,
    .license-quick-pay-form .form-select { min-height: var(--tap-min, 44px); width: 100%; }
    .license-partial-trigger { width: 100%; }
}

/* 16. En-tête de page : le menu « Plus » vit sur la ligne du titre.
   Ordinateur : bouton « ⋯ Plus » à droite du titre, avant l'action principale.
   Mobile : bouton-icône rond « ⋯ » (44 px) à côté du « + ». */
.page-header-content { flex: 1 1 auto; min-width: 0; }
.page-header-content .page-header-menu { margin-left: auto; align-self: center; flex-shrink: 0; }
.page-header-menu + .page-header-fab { margin-left: var(--spacing-2); }
.page-header-more-label { margin-left: 0; }
@media (max-width: 767px) {
    .page-header-content { align-items: center; }
    .page-header-menu { flex: none; }
    .page-header-menu > .btn.page-header-more {
        width: var(--tap-min, 44px);
        height: var(--tap-min, 44px);
        min-height: 0;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
    .page-header-more-label { display: none; }
    .page-header-menu-list { left: auto; right: 0; min-width: 220px; }
}

/* 19. Liste des commandes : membre, montant et statut en avant ; référence en secondaire. */
.orders-list-row .order-reference { font-family: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.order-ref {
    display: block;
    margin-top: 1px;
    font-family: ui-monospace, monospace;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-amount { font-variant-numeric: tabular-nums; }

/* 20. Liste des membres : nom en fort, ligne méta discrète, postes en puces
   (masquées sous 390 px, détail sur la fiche). */
.members-list-row .member-name { font-weight: 700; }
.member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--spacing-3);
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.member-meta .member-age,
.member-meta .member-attendance { font-size: inherit; font-weight: 500; color: inherit; }
/* 17 (suite). Très petits écrans : le libellé du type peut passer sur deux lignes
   sans pousser l'icône hors de la carte. */
@media (max-width: 480px) {
    .event-type-card { justify-content: flex-start; padding: var(--spacing-2); gap: 6px; }
    .event-type-label { white-space: normal; min-width: 0; overflow-wrap: anywhere; font-size: 0.75rem; line-height: 1.15; }
}
/* 11. L'attribut hidden doit l'emporter sur display:inline-flex des boutons
   (bouton « Réinitialiser » piloté par JS hors du turbo-frame). */
.btn[hidden] { display: none !important; }

/* 19 (suite). Carte commande mobile : membre · statut · action sur la 1re ligne,
   articles · montant · date sur la 2e (saut de ligne forcé par un pseudo-élément). */
@media (max-width: 767px) {
    .orders-list-row::after { content: ""; flex-basis: 100%; height: 0; order: 4; }
}

/* ==========================================================================
   Lot Sportif — séries récurrentes & journées de match (handoff 28/09/2026)
   Composants partagés introduits par le lot : contrôle segmenté et puces de
   filtre. Charte « Tableau de coach » : aucun token nouveau, pilules de 44 px.
   ========================================================================== */

/* Segmenté : vues exclusives d'une même liste (À venir / Passées). */
.segmented {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--n-100);
    border-radius: var(--radius-md);
}

.segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 var(--spacing-4);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--n-500);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.segmented-item--active {
    background: var(--color-surface);
    color: var(--n-900);
    font-weight: 700;
    box-shadow: var(--elev-1);
}

/* Puce de filtre : sélection directe, cible tactile de 44 px (UX_RULES §5). */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.chip-filter {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--n-700);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.chip-filter:hover {
    border-color: var(--n-300);
    color: var(--n-900);
}

.chip-filter--active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-primary-foreground);
    font-weight: 700;
}

/* Barre de filtres : segmenté à gauche, puces à droite, repliées en mobile. */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

[data-theme="dark"] .segmented { background: #151E29; }
[data-theme="dark"] .segmented-item--active { background: var(--color-surface); color: #F1F2F4; }
[data-theme="dark"] .chip-filter { border-color: #3A4656; color: #C3C8D1; }
[data-theme="dark"] .chip-filter:hover { border-color: #4A5668; color: #F1F2F4; }
[data-theme="dark"] .chip-filter--active { background: var(--color-accent); border-color: var(--color-accent); color: #0E141E; }

/* S1 · Séries récurrentes — liste en cartes (handoff Sportif). Une carte = une
   série : titre, portée, rythme, lieu, et l'échéance en pied de carte. */
.series-grid {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

/* Mise en page des fiches du lot Sportif : colonne latérale de 340 px à droite
   (KPI, matchs) et colonne principale fluide, empilées en mobile. */
.sport-split {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.sport-split-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.sport-split-main { min-width: 0; }

@media (min-width: 960px) {
    .sport-split {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: var(--spacing-5);
    }
    .sport-split-side { flex: 0 0 340px; }
    .sport-split-main { flex: 1 1 auto; }
}

/* Titre de section : fanion jaune 4×17 px + Archivo 700 16 px (charte). */
.section-title-pennant {
    width: 4px;
    height: 17px;
    flex: none;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* KPI héro : total et barre de progression (un seul KPI dominant par écran). */
.kpi-hero-of {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: #C3C8D1;
}

.kpi-hero-progress {
    height: 8px;
    margin: var(--spacing-3) 0 var(--spacing-2);
    background: rgba(255, 255, 255, .12);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.kpi-hero-progress > span {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width .3s ease;
}

/* Liste de faits (fiche série, fiche journée). */
.fact-list { margin: 0; }

.fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
    padding: var(--spacing-3) 0;
    border-top: 1px solid var(--color-border);
}

.fact-row:first-child { border-top: 0; padding-top: 0; }

.fact-row dt {
    flex: 0 0 120px;
    font-size: var(--text-sm);
    color: var(--n-500);
}

.fact-row dd {
    flex: 1 1 200px;
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--n-900);
}

/* Prochaines séances : lignes de 48 px, date + heure + chevron. */
.session-list {
    list-style: none;
    margin: 0 0 var(--spacing-3);
    padding: 0;
}

.session-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 48px;
    padding: 0 var(--spacing-2);
    border-top: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.session-list li:first-child .session-row { border-top: 0; }
.session-row:hover { background: var(--n-100); }
.session-row-date { font-weight: 600; font-size: var(--text-base); }
.session-row-time { color: var(--n-500); font-size: var(--text-base); }
.session-row-chevron { margin-left: auto; color: var(--n-300); }

.series-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

[data-theme="dark"] .session-row:hover { background: rgba(255, 255, 255, .05); }

/* S2 / S4 · Formulaire de série : puces à bascule, aperçu et avertissements. */
.chip-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--n-700);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.chip-toggle:hover { border-color: var(--n-300); }
.chip-toggle:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.chip-toggle:has(input:checked) {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-primary-foreground);
    font-weight: 700;
}

/* Segmenté à radios : l'option cochée porte le fond clair. */
.segmented-item:has(input:checked) {
    background: var(--color-surface);
    color: var(--n-900);
    font-weight: 700;
    box-shadow: var(--elev-1);
}

.segmented-item:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.series-preview,
.series-past-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--n-700);
}

.series-past-warning { color: var(--color-accent-ink); font-weight: 500; }

.series-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

[data-theme="dark"] .chip-toggle { border-color: #3A4656; color: #C3C8D1; }
[data-theme="dark"] .chip-toggle:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: #0E141E; }
[data-theme="dark"] .segmented-item:has(input:checked) { background: var(--color-surface); color: #F1F2F4; }

/* `hidden` doit primer sur les display des composants (bandeaux d'erreur, avertissements). */
.alert[hidden],
.series-preview[hidden],
.series-past-warning[hidden] { display: none; }

/* J1 · Journées de match — lignes-cartes : bloc date, intitulé, état. */
.matchday-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* J2 · Lignes de match à la création d'une journée. */
.matchday-team-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.matchday-team-row {
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.matchday-team-fields {
    display: grid;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
    grid-template-columns: 1fr;
}

.matchday-team-rows[hidden],
.matchday-team-fields[hidden] { display: none; }

@media (min-width: 640px) {
    .matchday-team-fields { grid-template-columns: 2fr 1fr 1fr; }
}

[data-theme="dark"] .matchday-team-row { border-color: #2A3442; }

/* J3 / J4 · Fiche journée — matchs et pointage. */
.matchday-match-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.matchday-match {
    position: relative;
    padding: var(--spacing-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    overflow: hidden;
}

/* Journée clôturée : fanion haut jaune, le match attend sa convocation. */
.matchday-match-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--color-accent);
}

.matchday-match--ready { padding-top: calc(var(--spacing-4) + 5px); }

.matchday-match-title {
    margin: var(--spacing-1) 0 var(--spacing-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -.02em;
}

.matchday-match-counts {
    margin: 0 0 var(--spacing-3);
    font-size: var(--text-base);
    color: var(--n-500);
}

.matchday-match-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
}

.matchday-match-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
}

.presences-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
}

.presences-header .section-title { flex: 1 1 auto; }
.presences-lock { display: inline-flex; align-items: center; gap: var(--spacing-1); }

.presence-rows { list-style: none; margin: 0; padding: 0; }

.presence-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 56px;
    padding: 0 var(--spacing-1);
    border-top: 1px solid var(--color-border);
}

.presence-rows li:first-child { border-top: 0; }
.presence-row[hidden] { display: none; }
.presence-row.is-busy { opacity: .6; }

.presence-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

/* Point 3 · mode terrain : deux grands choix explicites, libellés visibles.
   Trois pictos de 44 px côte à côte provoquaient des erreurs de doigt. */
.presence-pick { display: flex; flex: none; gap: var(--spacing-2); }

.presence-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-width: 96px;
    min-height: var(--tap-min, 44px);
    padding: 0 var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--n-500);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.presence-btn:hover { color: var(--n-900); border-color: var(--n-300); }
.presence-btn--present.is-active { background: var(--color-paid-bg); border-color: var(--color-paid-bg); color: var(--color-paid-ink); font-weight: 700; }
.presence-btn--absent.is-active { background: var(--color-unpaid-bg); border-color: var(--color-unpaid-bg); color: var(--color-unpaid-ink); font-weight: 700; }

/* Sous 400 px, l'icône suffit : les deux cibles restent larges. */
@media (max-width: 399px) {
    .presence-btn { min-width: 64px; }
    .presence-btn-label { display: none; }
}

/* Compteur et action principale sous le pouce, tant que le pointage est ouvert. */
.presence-sticky {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin: var(--spacing-4) calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-4));
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.presence-sticky-count { font-size: var(--text-base); color: var(--n-500); }
.presence-sticky-count strong { font-size: var(--text-lg); color: var(--n-900); }
.presence-sticky .btn { min-height: var(--tap-min, 44px); }

/* J5 · Convocation d'un match. */
.notice-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    color: var(--n-700);
}

.notice-row p { margin: 0; font-size: var(--text-base); }

.convocation-master {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: 44px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.convocation-rows { list-style: none; margin: 0 0 var(--spacing-3); padding: 0; }

.convocation-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 56px;
    border-top: 1px solid var(--color-border);
}

.convocation-rows li:first-child { border-top: 0; }

.convocation-pick {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 44px;
    cursor: pointer;
}

.convocation-pick input { width: 24px; height: 24px; }
.convocation-name { font-size: var(--text-base); font-weight: 600; }

[data-theme="dark"] .matchday-match { border: 1px solid #2A3442; box-shadow: none; }
[data-theme="dark"] .presence-btn { background: var(--color-surface); border-color: #3A4656; color: #8D94A1; }
[data-theme="dark"] .presence-btn--present.is-active { background: rgba(15, 124, 108, .3); border-color: transparent; color: #DBF0EC; }
[data-theme="dark"] .presence-btn--absent.is-active { background: rgba(163, 39, 24, .34); border-color: transparent; color: #FBE2DE; }
[data-theme="dark"] .presence-sticky { border-color: #2A3442; }

/* ==========================================================================
   Handoff v2 — lot A (fondations) : contraste sur l'accent et cibles tactiles.
   ========================================================================== */

/* Point 2 · texte sur l'accent. En sombre, le primaire DEVIENT le jaune : tout ce
   qui s'y pose passe à l'encre, et le jaune d'accent garde l'encre dans les deux
   thèmes (contraste 9,9:1 au lieu de 1,9:1 avec du blanc). */
[data-theme="dark"] {
    --color-on-accent: #0E141E;
    --color-primary-foreground: #0E141E;
}

/* Le chip « match » suit le primaire : ardoise en clair, jaune en sombre. */
[data-theme="dark"] .calendar-event--match { color: var(--color-on-accent); }

@media (max-width: 767px) {
    .calendar-event { min-height: 28px; }
    .versement-row .btn-icon,
    .table-actions .btn-icon { min-width: 44px; min-height: 44px; }
}

/* Point 1 (suite) · les familles de badges parallèles (licence, événement,
   commande, partenaire, animation, trésorerie) adoptent les mêmes 5 tons.
   Un même statut ne change plus de couleur d'un écran à l'autre. */
.license-status-badge--paid,
.event-status-badge--completed,
.order-status-badge--delivered,
.order-status-badge--validated,
.partner-status-badge--active,
.partner-card-status-badge--active,
.partner-card-status-badge--paid,
.clublife-status-badge--completed,
.treasurer-status-badge--success { background: #DBF0EC; color: #0A5D51; }

.license-status-badge--partial,
.clublife-status-badge--ongoing,
.treasurer-status-badge--warning { background: #FCEFCE; color: #7A5307; }

.license-status-badge--pending,
.event-status-badge--scheduled,
.order-status-badge--pending,
.partner-status-badge--pending,
.partner-card-status-badge--pending,
.clublife-status-badge--planned,
.treasurer-status-badge--info { background: #EDEFF3; color: #263043; }

.event-status-badge--cancelled,
.order-status-badge--cancelled,
.partner-status-badge--expired,
.partner-card-status-badge--expired,
.partner-status-badge--cancelled,
.partner-card-status-badge--cancelled,
.clublife-status-badge--cancelled,
.treasurer-status-badge--danger { background: #FBE2DE; color: #8A2115; }

.license-status-badge--exempt,
.license-status-badge--incomplete,
.treasurer-status-badge--muted { background: #EDEBE6; color: #464540; }

/* Thème sombre : mêmes 5 tons, fonds translucides et encres claires. */
[data-theme="dark"] .status-badge--done,
[data-theme="dark"] .status-badge--active,
[data-theme="dark"] .status-badge--approved,
[data-theme="dark"] .status-badge--paid,
[data-theme="dark"] .status-badge--completed,
[data-theme="dark"] .status-badge--confirmed,
[data-theme="dark"] .status-badge--validated,
[data-theme="dark"] .status-badge--delivered,
[data-theme="dark"] .status-badge--received,
[data-theme="dark"] .status-badge--distributed,
[data-theme="dark"] .status-badge--success,
[data-theme="dark"] .license-status-badge--paid,
[data-theme="dark"] .event-status-badge--completed,
[data-theme="dark"] .order-status-badge--delivered,
[data-theme="dark"] .order-status-badge--validated,
[data-theme="dark"] .partner-status-badge--active,
[data-theme="dark"] .partner-card-status-badge--active,
[data-theme="dark"] .partner-card-status-badge--paid,
[data-theme="dark"] .clublife-status-badge--completed,
[data-theme="dark"] .treasurer-status-badge--success { background: rgba(79, 203, 180, .15); color: #4FCBB4; }

[data-theme="dark"] .status-badge--partial,
[data-theme="dark"] .status-badge--in_progress,
[data-theme="dark"] .status-badge--warning,
[data-theme="dark"] .status-badge--ongoing,
[data-theme="dark"] .license-status-badge--partial,
[data-theme="dark"] .clublife-status-badge--ongoing,
[data-theme="dark"] .treasurer-status-badge--warning { background: rgba(240, 180, 41, .15); color: #F0B429; }

[data-theme="dark"] .status-badge--waiting,
[data-theme="dark"] .status-badge--pending,
[data-theme="dark"] .status-badge--scheduled,
[data-theme="dark"] .status-badge--planned,
[data-theme="dark"] .status-badge--info,
[data-theme="dark"] .status-badge--in,
[data-theme="dark"] .license-status-badge--pending,
[data-theme="dark"] .event-status-badge--scheduled,
[data-theme="dark"] .order-status-badge--pending,
[data-theme="dark"] .partner-status-badge--pending,
[data-theme="dark"] .partner-card-status-badge--pending,
[data-theme="dark"] .clublife-status-badge--planned,
[data-theme="dark"] .treasurer-status-badge--info { background: #1F2733; color: #C3C8D1; }

[data-theme="dark"] .status-badge--late,
[data-theme="dark"] .status-badge--cancelled,
[data-theme="dark"] .status-badge--rejected,
[data-theme="dark"] .status-badge--unpaid,
[data-theme="dark"] .status-badge--expired,
[data-theme="dark"] .status-badge--danger,
[data-theme="dark"] .event-status-badge--cancelled,
[data-theme="dark"] .order-status-badge--cancelled,
[data-theme="dark"] .partner-status-badge--expired,
[data-theme="dark"] .partner-card-status-badge--expired,
[data-theme="dark"] .partner-status-badge--cancelled,
[data-theme="dark"] .partner-card-status-badge--cancelled,
[data-theme="dark"] .clublife-status-badge--cancelled,
[data-theme="dark"] .treasurer-status-badge--danger { background: rgba(255, 140, 122, .15); color: #FF8C7A; }

[data-theme="dark"] .status-badge--off,
[data-theme="dark"] .status-badge--inactive,
[data-theme="dark"] .status-badge--archived,
[data-theme="dark"] .status-badge--exempt,
[data-theme="dark"] .status-badge--incomplete,
[data-theme="dark"] .status-badge--muted,
[data-theme="dark"] .license-status-badge--exempt,
[data-theme="dark"] .license-status-badge--incomplete,
[data-theme="dark"] .treasurer-status-badge--muted { background: #2A3442; color: #C3C8D1; }

/* Point 1 (fin) · un rôle ou un type de membre n'est pas un statut : badge neutre,
   sans couleur d'alerte. La couleur reste réservée à ce qu'il faut faire. */
.badge-role {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    background: var(--n-100);
    color: var(--n-700);
    font-size: var(--text-sm);
    font-weight: 600;
}

[data-theme="dark"] .badge-role { background: #2A3442; color: #C3C8D1; }

/* Point 5 · le chiffre clé reste en mobile. Les cartes secondaires disparaissent
   sous 768 px, le KPI héro devient un bandeau compact de 64 px : on garde
   l'information qui décide (reste à encaisser, prochain événement). */
@media (max-width: 767px) {
    .kpi-row--keep-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .kpi-row--keep-hero .kpi:not(.kpi--hero) { display: none; }

    .kpi-row--keep-hero .kpi--hero {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 2px var(--spacing-3);
        min-height: 64px;
        padding: var(--spacing-3) var(--spacing-4);
    }

    .kpi-row--keep-hero .kpi--hero .eyebrow { grid-column: 1; align-self: end; }
    .kpi-row--keep-hero .kpi--hero .kpi-hero-num {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: var(--text-2xl);
        align-self: center;
    }
    .kpi-row--keep-hero .kpi--hero .kpi-hero-foot { grid-column: 1; align-self: start; }
    .kpi-row--keep-hero .kpi--hero .kpi-progress,
    .kpi-row--keep-hero .kpi--hero .kpi-hero-progress { grid-column: 1 / -1; margin: var(--spacing-2) 0 0; }
}

/* Point 6 · le statut reste visible en liste sur téléphone. Sous 768 px, la ligne
   passe sur deux niveaux : nom + statut, puis type · catégorie. On ne cache plus
   ce qui dit qui attend une validation ou une licence. */
@media (max-width: 767px) {
    .members-list-row {
        grid-template-columns: 1fr auto;
        row-gap: var(--spacing-2);
    }

    .members-list-col--member { grid-column: 1; grid-row: 1; }

    .members-list-col--status {
        display: flex;
        align-items: center;
        grid-column: 1;
        grid-row: 2;
    }

    .members-list-col--type,
    .members-list-col--category {
        display: inline-flex;
        align-items: center;
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    /* Type et catégorie se suivent sur la seconde ligne, après le statut. */
    .members-list-col--type { margin-left: auto; }

    .members-list-col--actions { grid-column: 2; grid-row: 1 / span 2; }

    /* L'âge fait partie de l'identité du joueur : il reste lisible. */
    .members-list-row .member-age { display: inline !important; }
}

/* Point 4 · confirmations proportionnées. La fenêtre dit ce qui change ; au
   niveau 3, elle liste ce qui disparaît et exige la ressaisie du nom. */
.confirm-action { display: inline-flex; }

.confirm-loss {
    list-style: none;
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--n-100);
    border-radius: var(--radius-md);
    text-align: left;
}

.confirm-loss li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 2px 0;
    font-size: var(--text-base);
    color: var(--n-700);
}

.confirm-type-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--text-base);
    color: var(--n-700);
    text-align: left;
}

/* Un bouton verrouillé doit se voir verrouillé (handoff : opacité .45). */
.modal-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

[data-theme="dark"] .confirm-loss { background: #151E29; }

/* Point 7 · vue semaine en agenda sur téléphone. Sept cartes empilées, jours
   vides compris, demandaient trois écrans de défilement pour six événements.
   Sous 900 px : on masque les jours sans événement et on aère ceux qui restent. */
@media (max-width: 899px) {
    .calendar-week-day--empty { display: none; }

    .calendar-week-day-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--color-surface);
    }

    .calendar-week-day-events { gap: var(--spacing-2); }

    /* En agenda, l'événement est une ligne lisible, pas une pastille de grille. */
    .calendar-week-grid .calendar-event {
        min-height: 44px;
        padding: var(--spacing-2) var(--spacing-3);
        border-radius: var(--radius-sm);
        font-size: var(--text-base);
        white-space: normal;
    }
}

/* Point 12a · une section obligatoire se voit : filet jaune et badge explicite. */
.form-section--required {
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.form-section-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    background: var(--color-partial-bg);
    color: var(--color-partial-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

[data-theme="dark"] .form-section-badge { background: rgba(240, 180, 41, .18); color: #FCEFCE; }

/* Point 12b · sections de formulaire repliables, avec compteur de champs remplis. */
.form-fold {
    margin-bottom: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.form-fold-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: var(--tap-min, 44px);
    padding: var(--spacing-3) var(--spacing-4);
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.form-fold-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

.form-fold-count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--n-500);
}

.form-fold-chevron { transition: transform .15s ease; color: var(--n-500); }
.form-fold--open .form-fold-chevron { transform: rotate(180deg); }

.form-fold-body { padding: 0 var(--spacing-4) var(--spacing-4); }
.form-fold-body[hidden] { display: none; }

[data-theme="dark"] .form-fold { border-color: #2A3442; }

/* Point 13 · utilitaires de remplacement des styles en ligne (administration,
   partenaires). Le style reste dans la feuille, pas dans le gabarit. */
.u-nowrap { white-space: nowrap; }
.u-text-center { text-align: center; }
.u-uppercase { text-transform: uppercase; }
.u-inline { display: inline; }
.u-mb-5 { margin-bottom: var(--spacing-5); }
.u-maxw-600 { max-width: 600px; }
.u-w-60 { width: 60px; }
.u-w-100 { width: 100px; }
.u-w-120 { width: 120px; }
.u-w-auto { width: auto; }

/* Point 14 · chargement, erreur, hors connexion. Le squelette n'apparaît qu'au
   bout de 300 ms : en dessous, l'attente n'est pas perçue et le clignotement
   coûte plus qu'il ne rassure. */
.load-state { margin: var(--spacing-3) 0; }

.load-state--skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    opacity: 0;
    animation: load-state-appear 0s linear 300ms forwards;
}

@keyframes load-state-appear { to { opacity: 1; } }

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
}

.skeleton-dot {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--n-100);
}

.skeleton-lines { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; }

.skeleton-line {
    height: 10px;
    border-radius: var(--radius-sm);
    background: var(--n-100);
}

.skeleton-line--short { width: 45%; }

.load-state--notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
}

.load-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.load-state-icon--error { background: var(--color-unpaid-bg); color: var(--color-unpaid-ink); }
.load-state-icon--warn { background: var(--color-partial-bg); color: var(--color-partial-ink); }

.load-state-title { margin: 0 0 2px; font-weight: 700; font-size: var(--text-base); }
.load-state-text { margin: 0 0 var(--spacing-3); font-size: var(--text-base); color: var(--n-500); }
.load-state-text:last-child { margin-bottom: 0; }

[data-theme="dark"] .skeleton-dot,
[data-theme="dark"] .skeleton-line { background: #2A3442; }
[data-theme="dark"] .load-state--notice { border: 1px solid #2A3442; box-shadow: none; }

/* Motifs P1 et P3 de l'audit · un seul en-tête d'écran. Le lien de retour occupe
   sa propre ligne au-dessus du titre : celui-ci garde toute la largeur, y compris
   en 320 px, et ne tombe plus sur trois lignes entre deux boutons. */
.page-header-backlink {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--tap-min, 44px);
    margin-bottom: var(--spacing-1);
    color: var(--n-500);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
}

.page-header-backlink:hover { color: var(--n-900); }

/* Motif P1 · en-tête du mode direct. Barre d'app en haut, titre pleine largeur
   en dessous : sur 320 px le titre ne tombe plus sur trois lignes entre deux
   boutons, et les actions secondaires passent dans le menu « ⋯ ». */
.live-header { display: block; }

.live-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: var(--tap-min, 44px);
}

.live-state {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 auto;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--n-500);
}

.live-state-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-unpaid-ink);
}

.live-menu { position: relative; }

.live-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.live-menu-btn:hover { background: var(--n-100); }

.live-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    display: none;
    min-width: 240px;
    padding: var(--spacing-2);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
}

.live-menu-list.active { display: block; }

.live-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    min-height: var(--tap-min, 44px);
    padding: 0 var(--spacing-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.live-menu-item:hover { background: var(--n-100); }

.live-heading { margin-top: var(--spacing-3); }

.live-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0;
}

[data-theme="dark"] .live-menu-list { border: 1px solid #2A3442; box-shadow: none; }
[data-theme="dark"] .live-menu-btn:hover,
[data-theme="dark"] .live-menu-item:hover { background: rgba(255, 255, 255, .06); }

/* Timeline en 320 px : `min-width: 120px` sur le libellé écrasait la colonne du
   joueur, qui tombait à un mot par ligne. Sous 480 px, la ligne passe sur deux
   niveaux : minute et type d'abord, joueur en dessous, pleine largeur. */
@media (max-width: 479px) {
    .timeline-item { row-gap: 2px; }
    .timeline-label { min-width: 0; }
    .timeline-who { flex-basis: 100%; padding-left: 56px; }
    .timeline-comment { padding-left: 56px; }
}

/* ==========================================================================
   GABARIT « LISTE + FICHE »  (handoff v2 — planche « Klubby Membres v2 »)
   --------------------------------------------------------------------------
   Un seul gabarit pour les onze listes du produit (membres, licences,
   amendes, commandes, équipements, partenaires, réunions, animations,
   tâches, événements, catégories).

     · mobile   : la liste occupe l'écran ; ouvrir une ligne remplace la liste
                  par la fiche (retour à gauche, « Modifier » à droite).
     · ≥ 1024px : liste de 420 px à gauche, fiche à droite ; la ligne ouverte
                  porte un filet jaune de 3 px et un fond `--lf-row-on`.

   La bascule mobile repose sur une classe posée par le gabarit : dès que la
   fiche contient un corps (`.lf-detail-body`), `.lf` reçoit `lf--fiche` et la
   colonne liste sort du flux. Aucune duplication de gabarit, aucun JavaScript
   pour la mise en page — et aucun sélecteur que Safari ignorerait.
   ========================================================================== */
:root {
    --lf-row-on:    #F7F6F3;   /* fond de la ligne ouverte (desktop) */
    --lf-search-bg: #EDEBE6;   /* champ de recherche en mobile */
    --lf-list-w:    420px;
    --lf-detail-w:  880px;
}
[data-theme="dark"] {
    --lf-row-on:    #1F2733;
    --lf-search-bg: #1B2431;
}

/* Le gabarit prend toute la hauteur utile : c'est la page qui ne défile pas,
   ce sont les deux colonnes. `app-content--flush` retire la gouttière. */
/* `clip` et non `hidden` : `hidden` masque la barre de défilement mais laisse
   le conteneur défiler par programme. Un lien d'ancre interne (#paiement,
   #commande-actions…) faisait donc défiler CETTE boîte — qui n'a pas de barre —
   au lieu de la colonne fiche, décalant les deux colonnes vers le haut sans
   aucun moyen de revenir. `clip` interdit le défilement, le navigateur fait
   alors défiler le vrai conteneur, `.lf-detail`. */
/* `min-height: 0` va de pair avec `clip` : `hidden` faisait de cette boîte un
   conteneur de défilement, ce qui ramenait à zéro sa hauteur minimale
   automatique. En passant à `clip` (pour l'ancre), cette propriété implicite a
   disparu : la boîte s'est mise à grandir à la taille du formulaire, `.fv-scroll`
   n'avait plus rien à faire défiler, et tout ce qui dépassait devenait
   inatteignable — durée, lieu, description sur TOUS les écrans de création. */
.app-content--flush { padding: 0; overflow: clip; display: flex; min-height: 0; }

.lf {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg);
    color: var(--n-900);
}

/* ---------------- Colonne liste ---------------- */
.lf-list {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg);
}

.lf-list-head {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: 0 var(--sp-5) 10px;
}

.lf-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
}
.lf-title-row > div { min-width: 0; }

.lf-eyebrow {
    margin: 0;
    font: 600 var(--text-xs) var(--font-body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--n-500);
}

.lf-title {
    margin: 2px 0 0;
    font: 800 34px/1 var(--font-display);
    letter-spacing: -.04em;
    color: var(--n-900);
}
/* `--n-300` ne tenait que 2,11:1 : un compteur est une information, pas un
   ornement. Il prend le gris de texte atténué (5,55:1 sur blanc). */
.lf-title-count { color: var(--n-500); font-variant-numeric: tabular-nums; }

/* Bandeau de synthèse des listes d'argent : deux pastilles, jamais plus.
   La pastille prend la couleur de ce qu'elle annonce (reste dû, encaissé). */
.lf-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lf-summary-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--color-pending-bg);
    color: var(--color-pending-ink);
}
.lf-summary-label {
    font: 600 11px var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    /* L'encre de la pastille tient le seuil AA, mais pas à 80 % d'opacité :
       l'intitulé tombait entre 3,9 et 4,3:1. La majuscule et la graisse
       suffisent à le distinguer du montant, sans l'éclaircir. */
    opacity: 1;
}
.lf-summary-value {
    font: 800 17px var(--font-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.lf-summary-pill--done    { background: var(--color-paid-bg);    color: var(--color-paid-ink); }
.lf-summary-pill--partial { background: var(--color-partial-bg); color: var(--color-partial-ink); }
.lf-summary-pill--waiting { background: var(--color-exempt-bg);  color: var(--color-exempt-ink); }
.lf-summary-pill--late    { background: var(--color-unpaid-bg);  color: var(--color-unpaid-ink); }
.lf-summary-pill--off     { background: var(--color-pending-bg); color: var(--color-pending-ink); }

/* Recherche : 44 px de haut, toujours atteignable au pouce. */
.lf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--tap-min);
    padding: 0 6px 0 14px;
    border-radius: var(--radius-pill);
    background: var(--lf-search-bg);
    box-sizing: border-box;
}
.lf-search > svg { flex: none; color: var(--n-500); }
.lf-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font: 500 14px var(--font-body);
    color: var(--n-900);
}
.lf-search input::placeholder { color: var(--n-300); }
.lf-search-clear {
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--n-500);
    cursor: pointer;
}

/* Onglets de filtre : pastilles défilantes en mobile, enroulées en desktop. */
/* Deux rangs d'onglets (période / catégorie sur les journées). Empilés par
   défaut : le conteneur reprend l'espacement que `.lf-list-head` donnait
   auparavant entre les deux rangs devenus frères. */
.lf-tab-rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.lf-tabs {
    display: flex;
    gap: 6px;
    margin: 0 calc(var(--sp-5) * -1);
    padding: 0 var(--sp-5);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.lf-tabs::-webkit-scrollbar { display: none; }
.lf-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--n-700);
    font: 600 13px var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.lf-tab-count { font: 600 11px var(--font-body); color: var(--n-500); font-variant-numeric: tabular-nums; }
.lf-tab[aria-selected="true"] {
    background: var(--color-ardoise);
    color: #F1F2F4;
    font-weight: 700;
}
.lf-tab[aria-selected="true"] .lf-tab-count { color: var(--color-accent); }
[data-theme="dark"] .lf-tab[aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
[data-theme="dark"] .lf-tab[aria-selected="true"] .lf-tab-count { color: var(--color-on-accent); }

/* Filtres secondaires (statut, dossier…) : pastilles à puce colorée. */
.lf-filters { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--sp-1); }
.lf-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--n-200);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--n-900);
    font: 500 12.5px var(--font-body);
    text-decoration: none;
    cursor: pointer;
}
.lf-filter[aria-pressed="true"] { border-color: var(--n-900); font-weight: 700; }

/* ---------------- Lignes ---------------- */
.lf-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 96px; }

.lf-group-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 10px var(--sp-5) 6px;
    background: var(--color-bg);
    font: 700 11px var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--n-500);
}

.lf-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 66px;
    padding: 0 var(--sp-5);
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;
}
.lf-row-body {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--n-100);
}
.lf-row-text { flex: 1; min-width: 0; }
.lf-row-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 15px var(--font-body);
    color: var(--n-900);
}
.lf-row-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lf-row-warn { flex: none; color: var(--color-partial-ink); }
.lf-row-sub {
    display: block;
    margin-top: 1px;
    font: 400 12.5px var(--font-body);
    color: var(--n-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lf-row-value {
    flex: none;
    font: 700 13.5px var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--n-900);
}
.lf-row-value--late { color: var(--color-unpaid-ink); }
.lf-row-value--muted { color: var(--n-500); }

/* Pastille de statut : la couleur seule ne dit rien, l'intitulé accessible
   voyage avec elle (title + texte lu par les lecteurs d'écran). */
.lf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); }
.lf-dot--done    { background: var(--color-positive); }
.lf-dot--partial { background: var(--color-accent); }
.lf-dot--waiting { background: var(--color-ardoise); }
.lf-dot--late    { background: var(--color-unpaid-ink); }
.lf-dot--off     { background: var(--n-300); }
[data-theme="dark"] .lf-dot--waiting { background: #A9BEDD; }

.lf-count {
    margin: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    text-align: center;
    font: 400 var(--text-sm) var(--font-body);
    color: var(--n-500);
}

/* Bouton flottant « créer » — mobile seulement (le desktop a le bouton du titre). */
.lf-fab {
    position: absolute;
    right: var(--sp-5);
    bottom: 28px;
    z-index: 5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 20px;
    background: var(--color-ardoise);
    color: var(--color-accent);
    box-shadow: var(--elev-2);
    cursor: pointer;
}
[data-theme="dark"] .lf-fab { background: var(--color-accent); color: var(--color-on-accent); }

/* ---------------- Avatars ---------------- */
.lf-av {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px var(--font-body);
    text-transform: uppercase;
    background: var(--n-100);
    color: var(--n-700);
    overflow: hidden;
}
.lf-av img { width: 100%; height: 100%; object-fit: cover; }
.lf-av--p0 { background: #DCE0E8; color: #263043; }
.lf-av--p1 { background: #DBF0EC; color: #0A5D51; }
.lf-av--p2 { background: #FCEFCE; color: #7A5307; }
.lf-av--p3 { background: #FBE2DE; color: #8A2115; }
.lf-av--p4 { background: #EDEBE6; color: #464540; }
[data-theme="dark"] .lf-av--p0 { background: #2A3442; color: #C3C8D1; }
[data-theme="dark"] .lf-av--p1 { background: rgba(79,203,180,.18); color: #4FCBB4; }
[data-theme="dark"] .lf-av--p2 { background: rgba(240,180,41,.18); color: #F0B429; }
[data-theme="dark"] .lf-av--p3 { background: rgba(255,140,122,.18); color: #FF8C7A; }
[data-theme="dark"] .lf-av--p4 { background: #2A3442; color: #AAB0BA; }
/* Variante compacte : listes de personnes à l'intérieur d'une carte, où la
   pastille de 44 px écraserait la ligne. */
.lf-av--sm { width: 34px; height: 34px; font-size: 12px; }
/* Variante « date » : un carré qui porte le jour et le mois (événements, réunions). */
.lf-av--date {
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
    line-height: 1;
}
.lf-av-day   { font: 800 16px var(--font-display); letter-spacing: -.03em; }
.lf-av-month { font: 700 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }

/* ---------------- Colonne fiche ---------------- */
.lf-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--color-bg);
}
.lf-detail-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-1) var(--sp-3) 0;
}
.lf-detail-pad {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--lf-detail-w);
    padding: var(--sp-2) var(--sp-4) var(--sp-8);
    box-sizing: border-box;
}
.lf-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6);
    text-align: center;
    color: var(--n-500);
    font: 500 14px var(--font-body);
}
.lf-detail-empty > svg { color: var(--n-300); }

.lf-hero { display: flex; align-items: flex-start; gap: 14px; }
.lf-hero-text { flex: 1; min-width: 0; }
.lf-av--lg { width: 72px; height: 72px; border-radius: 24px; font-size: 24px; }
/* Nom + icône « i » (popup Informations) sur une ligne ; la marge basse passe
   du nom à la rangée pour que l'espacement sous le titre ne change pas. */
.lf-name-row { display: flex; align-items: center; gap: var(--sp-2); margin: 2px 0 var(--sp-2); }
.lf-name-row .lf-name { margin: 0; }
.lf-name {
    margin: 2px 0 var(--sp-2);
    font: 800 28px/1.05 var(--font-display);
    letter-spacing: -.04em;
    color: var(--n-900);
    overflow-wrap: anywhere;
}
.lf-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Bandeau d'alerte de la fiche : une seule action, celle qui règle le problème. */
.lf-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px var(--sp-4);
    border-radius: var(--radius-lg);
    background: var(--color-exempt-bg);
    color: var(--color-exempt-ink);
}
.lf-band > svg { flex: none; }
.lf-band-text { flex: 1 1 180px; font: 600 13px var(--font-body); }
.lf-band--partial { background: var(--color-partial-bg); color: var(--color-partial-ink); }
.lf-band--late    { background: var(--color-unpaid-bg);  color: var(--color-unpaid-ink); }
.lf-band--done    { background: var(--color-paid-bg);    color: var(--color-paid-ink); }
.lf-band--off     { background: var(--color-pending-bg); color: var(--color-pending-ink); }
.lf-band-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Quatre raccourcis, toujours quatre : grisés quand ils n'ont pas de sens,
   jamais retirés — l'emplacement reste le même d'une fiche à l'autre. */
.lf-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.lf-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 64px;
    padding: 0 4px;
    border: none;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--elev-1);
    color: var(--n-900);
    font: 600 12px var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.lf-quick-item[aria-disabled="true"],
.lf-quick-item:disabled { color: var(--n-300); cursor: default; }
/* Deux lignes plutôt qu'une coupure : « Fiche membre » vaut mieux que
   « Fiche mem… » sur un écran de 390 px. */
.lf-quick-label {
    max-width: 100%;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="dark"] .lf-quick-item { border: 1px solid var(--n-100); }

/* Cartes de la fiche */
.lf-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.lf-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--elev-1);
}
[data-theme="dark"] .lf-card { border: 1px solid var(--n-100); }
.lf-card--wide { grid-column: 1 / -1; }
.lf-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lf-card-title { margin: 0; font: 700 13px var(--font-body); letter-spacing: 0; color: var(--n-900); }
.lf-card-num {
    font: 800 26px/1 var(--font-display);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--n-900);
}
.lf-card-note { font: 500 12px var(--font-body); color: var(--n-500); }
.lf-card-text { margin: 0; font: 400 13px/1.55 var(--font-body); color: var(--n-700); }
.lf-card-empty { font: 500 13px var(--font-body); color: var(--n-500); }
.lf-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--n-100);
    overflow: hidden;
}
.lf-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }
.lf-bar--done > span { background: var(--color-positive); }
/* Liste clé → valeur, et liste de lignes séparées par un filet. */
.lf-kv { display: flex; flex-direction: column; gap: var(--sp-2); }
.lf-kv-item { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-body); color: var(--n-900); }
.lf-kv-item > svg { flex: none; color: var(--n-500); }
.lf-kv-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-lines { display: flex; flex-direction: column; }
.lf-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--n-100);
    font: 600 13px var(--font-body);
    color: var(--n-900);
    text-decoration: none;
}
.lf-line-sub { font: 400 12.5px var(--font-body); color: var(--n-500); }
.lf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-paid-bg);
    color: var(--color-paid-ink);
    font: 700 12px var(--font-body);
}
.lf-tag--muted { background: var(--n-100); color: var(--n-700); }
/* Barres d'assiduité : hautes = présent, basses = absent, plates = pas de séance. */
.lf-attbars { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.lf-attbars > span { flex: 1; border-radius: 6px; background: var(--n-100); height: 8px; }
.lf-attbars > .is-on  { height: 48px; background: var(--color-positive); }
.lf-attbars > .is-off { height: 16px; background: var(--color-unpaid-bg); }

/* ---------------- Bascule mobile : liste OU fiche ---------------- */
@media (max-width: 1023px) {
    .lf { flex-direction: column; }
    /* Une fiche ouverte prend tout l'écran : la liste sort du flux. L'aperçu de
       la première ligne (`lf-preview`) est un confort d'écran large : il ne doit
       jamais escamoter la liste sur un téléphone. */
    /* La classe est posée par le gabarit (layout.html.twig) quand le bloc
       `detail` contient une vraie fiche. Elle remplace `:has()`, que Safari
       ignore avant iOS 15.4 : la règle tombait alors en silence et la liste
       entière restait affichée AU-DESSUS de la fiche — « page coupée en
       deux », la fiche et son bouton de suppression mille pixels plus bas. */
    .lf--fiche .lf-list { display: none; }
    .lf:not(.lf--fiche) .lf-detail { display: none; }
    .lf-preview { display: none; }
    .lf-list-head { padding-top: var(--sp-2); }
}

/* ---------------- Deux colonnes ---------------- */
@media (min-width: 1024px) {
    .lf-list {
        width: var(--lf-list-w);
        flex: none;
        background: var(--color-surface);
        border-right: 1px solid var(--n-100);
    }
    .lf-list-head { padding: var(--sp-6) var(--sp-5) var(--sp-3); }
    .lf-title { font-size: 30px; }
    .lf-search {
        border-radius: var(--radius-md);
        background: var(--color-bg);
        border: 1px solid var(--n-100);
    }
    .lf-tabs { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
    /* Sur ordinateur les deux rangs tiennent sur une même ligne tant que la
       colonne (420 px) le permet ; au-delà, le second passe dessous plutôt que
       de déborder. Le filet garde les deux questions distinctes : sans lui,
       « Passées » et « Toutes » se liraient comme une seule série et « Toutes »
       semblerait parler de la période. */
    .lf-tab-rows { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
    .lf-tab-rows > .lf-tabs + .lf-tabs {
        padding-left: 12px;
        border-left: 1px solid var(--n-100);
    }
    .lf-tab { height: 32px; padding: 0 11px; font-size: 12px; }
    .lf-tab:not([aria-selected="true"]) { border: 1px solid var(--n-100); }
    .lf-group-head { background: var(--color-surface); }
    .lf-row { padding: 0 var(--sp-4) 0 17px; min-height: 64px; }
    .lf-row .lf-av { width: 40px; height: 40px; font-size: 14px; }
    .lf-row[aria-current="true"] { border-left-color: var(--color-accent); background: var(--lf-row-on); }
    .lf-list-scroll { padding-bottom: 0; }
    .lf-fab { display: none; }
    .lf-detail-bar { display: none; }
    .lf-detail-pad { padding: 28px var(--sp-8) 40px; gap: var(--sp-4); }
    .lf-hero { align-items: center; gap: 18px; }
    .lf-av--lg { width: 88px; height: 88px; border-radius: 28px; font-size: 29px; }
    .lf-name { font-size: 32px; }
}
@media (min-width: 640px) {
    .lf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Nombre impair de cartes : la dernière se retrouvait seule sur sa rangée,
       en demi-largeur, avec un vide à sa droite. Elle prend la rangée entière.

       Le modificateur est volontairement explicite plutôt qu'appliqué à toutes
       les grilles : `nth-child(odd)` suppose que chaque carte occupe UNE
       colonne, ce qui cesse d'être vrai dès qu'une `lf-card--wide` consomme une
       rangée et décale la parité (commande, réunion, série d'événements). Les
       fiches qui mêlent des cartes larges ne le portent donc pas — et la fiche
       licence a sa propre règle, parce que sa carte de paiement est large. */
    .lf-cards--remplir > .lf-card:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}
/* Sous 360 px, quatre raccourcis côte à côte deviennent illisibles : deux par
   rang, l'emplacement reste stable. */
@media (max-width: 359px) {
    .lf-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Actions secondaires de l'en-tête de liste : repliées, jamais supprimées. */
.lf-more { margin-top: calc(var(--sp-1) * -1); }
.lf-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    list-style: none;
    cursor: pointer;
    font: 600 12.5px var(--font-body);
    color: var(--n-500);
}
.lf-more-toggle::-webkit-details-marker { display: none; }
.lf-more-panel { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); }
.lf-more-form { display: flex; min-width: 150px; }
.lf-more-form .form-select { width: 100%; }
.lf-plain { padding: var(--sp-4); }

/* La fiche membre garde ses cartes historiques : elles prennent la forme du
   gabarit (deux colonnes dès 640 px, rayon 18) sans changer de nom de classe. */
.lf-detail .member-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin-bottom: 0;
}
.lf-detail .member-detail-card { border-radius: 18px; }
.lf-detail .member-detail-card--wide { grid-column: 1 / -1; }
.lf-detail .member-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (min-width: 640px) {
    .lf-detail .member-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En mobile, les boutons de la fiche passent sous le nom : côte à côte ils
   écrasaient le titre, qui tombait à une lettre par ligne. */
@media (max-width: 1023px) {
    .lf-hero { flex-wrap: wrap; }
    .lf-detail .member-detail-actions {
        width: 100%;
        order: 3;
        /* En rangée : la règle historique passait en colonne, et la base de
           flex devenait une hauteur — des boutons de 140 px de haut. */
        flex-direction: row;
        flex-wrap: wrap;
    }
    .lf-detail .member-detail-actions > .btn,
    .lf-detail .member-detail-actions > form { flex: 1 1 140px; }
    .lf-detail .member-detail-actions > form > .btn { width: 100%; }
}

/* ---- Cartes de fiche du gabarit : cinq formes, pas une de plus ---- */
/* Clé → valeur : l'intitulé à gauche, la valeur à droite, un filet entre deux. */
.lf-kv-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 7px 0;
    border-top: 1px solid var(--n-100);
    font: 400 12.5px var(--font-body);
}
.lf-kv-key { flex: none; color: var(--n-500); }
.lf-kv-val { min-width: 0; font-weight: 500; color: var(--n-900); text-align: right; overflow-wrap: anywhere; }

/* Liste de lignes : intitulé à gauche, valeur à droite, icône facultative. */
.lf-line-icon { flex: none; color: var(--n-300); }
.lf-line-icon--done { color: var(--color-positive); }
.lf-line-label { flex: 1; min-width: 0; font: 500 13px var(--font-body); color: var(--n-900); }
.lf-line-value { flex: none; font: 600 12.5px var(--font-body); color: var(--n-500); font-variant-numeric: tabular-nums; }
.lf-line-value--positive { color: var(--color-positive); }
.lf-line--row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--n-100);
}

/* Personnes : une pastille par nom, avec ses initiales. */
.lf-people { display: flex; gap: 6px; flex-wrap: wrap; }
.lf-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font: 600 12px var(--font-body);
    color: var(--n-900);
}
.lf-person .lf-av { width: 24px; height: 24px; font-size: 10px; }

/* L'action d'une carte ne s'étire pas sur toute sa largeur : elle se pose à gauche. */
.u-self-start { align-self: flex-start; }

/* La fiche licence garde ses cartes historiques : elles prennent la grille et
   la forme du gabarit sans changer de nom de classe. */
.lf-detail .license-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
}
.lf-detail .license-detail-card { border-radius: 18px; margin: 0; }
@media (min-width: 640px) {
    .lf-detail .license-detail-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* La carte de paiement porte le geste du jour : elle prend toute la largeur. */
    .lf-detail .license-payment-card { grid-column: 1 / -1; }
    /* Après la carte de paiement viennent zéro, une ou deux cartes — versements
       et commentaire, toutes deux facultatives. À deux elles s'apparient ; à une
       seule, elle restait sur une demi-largeur avec un vide à sa droite, et le
       cas est le plus courant (des versements, pas de commentaire).
       `nth-child(even):last-child` nomme exactement ce cas : la deuxième carte,
       et il n'y en a pas de troisième. */
    .lf-detail .license-detail-main > .license-detail-card:nth-child(even):last-child {
        grid-column: 1 / -1;
    }
}

/* Pastille carrée : réservée aux objets (entreprise, catégorie, article). Le rond
   reste aux personnes — la forme dit déjà de quoi on parle. */
.lf-av--square { border-radius: var(--radius-md); }
.lf-av--lg.lf-av--square { border-radius: 22px; }
/* Pastille colorée par le statut, pour les objets sans identité propre (tâches). */
.lf-av--tdone    { background: var(--color-paid-bg);    color: var(--color-paid-ink); }
.lf-av--tpartial { background: var(--color-partial-bg); color: var(--color-partial-ink); }
.lf-av--twaiting { background: var(--color-exempt-bg);  color: var(--color-exempt-ink); }
.lf-av--tlate    { background: var(--color-unpaid-bg);  color: var(--color-unpaid-ink); }
.lf-av--toff     { background: var(--color-pending-bg); color: var(--color-pending-ink); }

/* Lignes réordonnables à la souris (catégories) : la poignée, c'est la ligne. */
.lf-sortable-item { cursor: grab; }
.lf-sortable-item:active { cursor: grabbing; }
.lf-sortable-item.category-card--dragging { opacity: .5; }
.lf-sortable-item.category-card--placeholder { background: var(--lf-row-on); }

/* ==========================================================================
   GABARIT « FORMULAIRE »  (handoff v2 — planche « Klubby Formulaires v2 »)
   --------------------------------------------------------------------------
   Les formulaires qui s'ouvrent depuis les listes v2.

     · mobile   : plein écran, fermeture en haut à gauche, action principale
                  collée en bas et pleine largeur ;
     · ≥ 1024px : panneau centré de 720 px, actions en bas à droite.

   Une section = une carte, un intitulé, et ce qu'elle demande. Les listes
   courtes d'options deviennent des puces de 44 px : on choisit d'un pouce,
   sans ouvrir de menu déroulant.
   ========================================================================== */
:root {
    --fv-chip-on:     #1C2536;
    --fv-chip-on-ink: #F1F2F4;
    --fv-input-border: #DCD9D2;
    --fv-foot:        rgba(255, 255, 255, .92);
}
[data-theme="dark"] {
    --fv-chip-on:     #F0B429;
    --fv-chip-on-ink: #0E141E;
    --fv-input-border: #3A4656;
    --fv-foot:        rgba(27, 36, 49, .92);
}

.fv,
/* Le <form> enveloppe la carcasse pour que le bouton de la barre du bas lui
   appartienne : c'est donc lui le porteur de la hauteur et de la largeur. */
.fv-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg);
}

/* Barre du haut : fermer, et ce que le formulaire promet. */
.fv-topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3) 0;
}
.fv-topbar-hint {
    flex: 1;
    min-width: 0;
    text-align: center;
    font: 600 var(--text-base) var(--font-body);
    color: var(--n-500);
}

.fv-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.fv-pad {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-1) var(--sp-4) 28px;
    box-sizing: border-box;
}

.fv-eyebrow {
    margin: 0;
    font: 600 var(--text-xs) var(--font-body);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--n-500);
}
.fv-title {
    margin: 0;
    font: 800 28px/1.05 var(--font-display);
    letter-spacing: -.04em;
    color: var(--n-900);
}

/* Résumé d'erreurs : une phrase, en tête, avant les champs fautifs. */
.fv-errors {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-3) 14px;
    border-radius: 14px;
    background: var(--color-unpaid-bg);
    color: var(--color-unpaid-ink);
    font: 600 13px var(--font-body);
}
.fv-errors > svg { flex: none; }

/* ---------------- Sections ---------------- */
.fv-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: 18px;
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--elev-1);
}
[data-theme="dark"] .fv-section { border: 1px solid var(--n-100); }
.fv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fv-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font: 700 15px var(--font-display);
    letter-spacing: -.01em;
    color: var(--n-900);
}
.fv-section-title > svg { color: var(--n-500); }
.fv-section-hint {
    margin: -4px 0 0;
    font: 400 12.5px/1.5 var(--font-body);
    color: var(--n-500);
}
/* Une section peut porter un rappel : « Obligatoire · mineur », un total. */
.fv-section--warn { box-shadow: var(--elev-1), inset 3px 0 0 var(--color-accent); }

.fv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 560px) {
    .fv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fv-field { grid-column: 1 / -1; }
    .fv-field--half { grid-column: auto; }
}

/* ---------------- Champs ---------------- */
.fv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fv-label {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font: 600 13px var(--font-body);
    color: var(--n-700);
}
.fv-req { color: var(--color-unpaid-ink); }
.fv-aside { font-weight: 500; color: var(--n-500); }
.fv-help { font: 400 12px/1.5 var(--font-body); color: var(--n-500); }
.fv-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 12px var(--font-body);
    color: var(--color-unpaid-ink);
}

.fv-input,
.fv-textarea,
.fv-select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--fv-input-border);
    border-radius: 14px;
    background: var(--color-surface);
    font: 500 15px var(--font-body);
    color: var(--n-900);
    box-sizing: border-box;
}
.fv-textarea { min-height: 84px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.fv-input::placeholder,
.fv-textarea::placeholder { color: var(--n-300); }
.fv-input[aria-invalid="true"],
.fv-textarea[aria-invalid="true"],
.fv-select[aria-invalid="true"] { border-color: var(--color-unpaid-ink); }

/* ---------------- Puces de choix ---------------- */
.fv-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-min);
    padding: 0 14px;
    border: 1.5px solid var(--n-200);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--n-700);
    font: 600 13.5px var(--font-body);
    cursor: pointer;
}
.fv-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fv-chip-check { display: none; }
.fv-chip:has(input:checked) {
    border-color: var(--fv-chip-on);
    background: var(--fv-chip-on);
    color: var(--fv-chip-on-ink);
    font-weight: 700;
}
.fv-chip:has(input:checked) .fv-chip-check { display: inline-flex; }
.fv-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.fv-chip-sub { font-weight: 500; opacity: .75; }
.fv-chips--invalid .fv-chip { border-color: var(--color-unpaid-ink); }

/* ---------------- Interrupteur ---------------- */
.fv-switch {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 48px;
    cursor: pointer;
}
.fv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fv-switch-track {
    position: relative;
    width: 48px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--n-200);
    transition: background .2s;
}
.fv-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .2s;
}
.fv-switch:has(input:checked) .fv-switch-track { background: var(--fv-chip-on); }
.fv-switch:has(input:checked) .fv-switch-knob { left: 23px; background: var(--fv-chip-on-ink); }
.fv-switch:has(input:focus-visible) .fv-switch-track { box-shadow: var(--focus-ring); }
.fv-switch-text { flex: 1; min-width: 0; }
.fv-switch-title { display: block; font: 600 14px var(--font-body); color: var(--n-900); }
.fv-switch-sub { display: block; font: 400 12.5px var(--font-body); color: var(--n-500); }

/* ---------------- Compteur ---------------- */
.fv-stepper { display: flex; align-items: center; gap: 10px; }
.fv-stepper-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--n-200);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--n-900);
    cursor: pointer;
}
.fv-stepper-btn:focus-visible { box-shadow: var(--focus-ring); }
.fv-stepper-btn:disabled { color: var(--n-300); cursor: default; }

/* Un lien posé dans une carte ou dans le résumé d'erreurs doit se voir : le
   style global des liens n'y suffit pas, la couleur étant héritée. */
.fv-section a:not(.btn):not(.fv-chip),
.fv-errors a:not(.btn) { color: inherit; text-decoration: underline; }
.fv-stepper-value {
    min-width: 56px;
    text-align: center;
    font: 800 22px var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--n-900);
}
.fv-stepper-unit { font: 500 13px var(--font-body); color: var(--n-500); }

/* ---------------- Barre d'actions ---------------- */
/* En mobile, c'est la PAGE qui défile : une barre en `sticky` finirait sous le
   pli. Elle est donc fixée au bas de l'écran, et le formulaire se réserve la
   place correspondante pour que le dernier champ reste atteignable. */
.fv-footbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    flex: none;
    display: flex;
    gap: 10px;
    padding: var(--sp-3) var(--sp-4) 22px;
    border-top: 1px solid var(--n-100);
    background: var(--fv-foot);
    backdrop-filter: blur(8px);
}
.fv-footbar .btn { flex: 1; }
@media (max-width: 1023px) {
    .fv-pad { padding-bottom: 104px; }
}

/* La suppression ne se met pas à côté de l'enregistrement : elle reste
   discrète, centrée, sous les sections. */
.fv-danger {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap-min);
    padding: 0 var(--sp-3);
    border: none;
    background: transparent;
    color: var(--color-unpaid-ink);
    font: 600 13px var(--font-body);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .fv-topbar { padding: 14px var(--sp-6); border-bottom: 1px solid var(--n-100); }
    .fv-pad { padding: 28px var(--sp-8) 40px; }
    .fv-title { font-size: 32px; }
    .fv-footbar {
        position: sticky;
        justify-content: flex-end;
        padding: 14px var(--sp-8);
    }
    .fv-footbar .btn { flex: none; }
}

/* Le panier d'une commande vit désormais dans une carte du gabarit v2 : ses
   fonds et ses filets reprennent les neutres greige de la charte plutôt que
   l'ancienne palette grise, sans quoi la carte a deux gris différents. */
.fv-section .order-item { background: var(--color-bg); border-color: var(--n-100); }
.fv-section .order-item-header { background: var(--n-100); }
.fv-section .order-summary { background: var(--color-bg); border-color: var(--n-100); }
.fv-section .order-add-item { border-color: var(--n-200); color: var(--n-500); }
.fv-section .order-add-item:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* Montant : l'unité se pose dans le champ, à droite, sans le rétrécir. */
.fv-money { position: relative; display: flex; }
.fv-money .fv-input { padding-right: 42px; }
.fv-money-unit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font: 600 14px var(--font-body);
    color: var(--n-500);
    pointer-events: none;
}

/* Synthèse du volet de droite : les chiffres d'ensemble d'un module, là où la
   place est libre tant qu'aucune fiche n'est ouverte. */
.lf-summary-title {
    margin: 2px 0 0;
    font: 800 24px/1.1 var(--font-display);
    letter-spacing: -.03em;
    color: var(--n-900);
}
.lf-card-num--late    { color: var(--color-unpaid-ink); }
.lf-card-num--done    { color: var(--color-positive); }
.lf-card-num--partial { color: var(--color-partial-ink); }
.lf-summary-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    font: 500 13px var(--font-body);
    color: var(--n-500);
}

/* Retour discret au-dessus du titre d'une liste de réglages. */
.lf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font: 600 12.5px var(--font-body);
    color: var(--n-500);
    text-decoration: none;
}

/* Utilitaires manquants, utilisés par des gabarits sans jamais avoir été
   définis : le formulaire d'approbation d'une adhésion affichait ses deux
   options côte à côte au lieu de les empiler, et ses blocs dépliés sans retrait. */
.u-flex-col { flex-direction: column; }
.u-items-start { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-ml-6 { margin-left: var(--sp-6); }


/* Une ligne peut porter une bascule à sa gauche : cocher une tâche sans ouvrir
   sa fiche. Le bouton vit HORS du lien — un `<a>` ne peut pas contenir de
   bouton — et reprend la place et la forme de la pastille. */
.lf-row-wrap { display: flex; align-items: stretch; }
/* 12 px : l'écart qui séparait la pastille du texte, pour que le titre reste
   aligné avec celui des lignes sans bascule. */
.lf-row-wrap > .lf-row { flex: 1; min-width: 0; padding-left: var(--sp-3); border-left: none; }
.lf-row-lead {
    display: flex;
    align-items: center;
    flex: none;
    padding-left: var(--sp-5);
    border-left: 3px solid transparent;
}
.lf-tick {
    width: var(--tap-min);
    height: var(--tap-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--n-300);
    cursor: pointer;
}
.lf-tick:hover { background: var(--n-100); color: var(--n-700); }
.lf-tick:focus-visible { box-shadow: var(--focus-ring); }
.lf-tick--done { color: var(--color-positive); }

@media (min-width: 1024px) {
    .lf-row-lead { padding-left: 17px; }
    /* La pastille mesure 40 px en écran large : la bascule s'y cale. */
    .lf-tick { width: 40px; height: 40px; }
    /* Le filet de la ligne ouverte passe sur la bascule, qui la précède. */
    .lf-row-wrap:has(.lf-row[aria-current="true"]) { background: var(--lf-row-on); }
    .lf-row-wrap:has(.lf-row[aria-current="true"]) .lf-row-lead { border-left-color: var(--color-accent); }
}

/* --------------------------------------------------------------------------
   Page de contact (demande d'accès)

   L'offre se règle par prise de contact : cette page est la porte d'entrée
   commerciale. Elle reprend la carcasse des pages légales — navbar publique
   fixe, donc retrait en haut — et le thème de formulaire par défaut
   (`.form-group`, `.form-input`), qui affiche déjà l'erreur sous chaque champ.
   -------------------------------------------------------------------------- */
.contact-main {
    /* 7rem en haut : la navbar publique est fixe (4rem) et recouvrirait le titre */
    padding: 7rem 1rem 4rem;
    background: var(--color-background);
}

.contact-container {
    max-width: 38rem;
}

.contact-container--narrow {
    max-width: 30rem;
    text-align: center;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-brand);
    margin-bottom: 0.75rem;
}

.contact-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
}

.contact-lead {
    color: var(--color-gray-600);
    margin: 0 0 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-submit {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.contact-rgpd {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

/* Leurre anti-robot : hors flux et hors du parcours au clavier. `display: none`
   ferait l'affaire pour l'œil, mais certains robots ignorent précisément les
   champs ainsi masqués — celui-ci reste « affiché » tout en étant inatteignable. */
.contact-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--color-paid-bg);
    color: var(--color-paid-ink);
}

.contact-done-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Attente d'ouverture d'un club : même carcasse que la confirmation de contact,
   mais la pastille dit l'attente et non la réussite. */
.contact-done-icon--waiting {
    background: var(--color-pending-bg);
    color: var(--color-pending-ink);
}

/* --------------------------------------------------------------------------
   Journée — carte de suivi des présences

   Elle reprend le chrome de la fiche événement (`.event-detail-card`,
   `.attendance-card-head`) : les deux écrans pointent des joueurs et n'avaient
   aucune raison de se présenter différemment.
   -------------------------------------------------------------------------- */
.presences-body {
    padding: var(--spacing-4);
}

.presence-row-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 0;
}

/* Le joueur occupe la place laissée par les boutons : les groupes étant les
   statuts, c'est la ligne qui porte le nom ET l'équipe, l'un sous l'autre. */
.presence-row-member { flex: 1 1 auto; }

.presence-row-ident {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.presence-row-team {
    font-size: var(--text-xs);
    color: var(--n-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presence-row-member .presence-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Présences clôturées : la liste est repliée pour laisser remonter la
   convocation et les matchs, qui sont l'étape suivante. */
.presences-recap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}

.presences-recap-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-sm);
}

/* Le chevron par défaut de Safari double le nôtre. */
.presences-recap-summary::-webkit-details-marker {
    display: none;
}

.presences-recap-text {
    color: var(--color-gray-700);
    font-weight: 500;
}

.presences-recap-toggle {
    color: var(--color-brand);
    font-weight: 600;
    white-space: nowrap;
}

.presences-recap[open] .presences-recap-toggle::after {
    content: ' ▴';
}

.presences-recap:not([open]) .presences-recap-toggle::after {
    content: ' ▾';
}

.presences-recap-body {
    padding: 0 var(--spacing-4) var(--spacing-4);
}