/* KravFEKM v2 — Design system avec thème sémantique personnalisable */
/* Chaque variable CSS porte le nom de l'élément d'interface qu'elle affecte. */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* ===== VARIABLES THÈME (~55 propriétés sémantiques) =====
   Nommage : --{élément}-{propriété}
   Valeurs par défaut = thème "FEKM Classique" (dark indigo).
   Surchargées dynamiquement via JS pour les presets/custom. */
:root {
    /* --- PAGE --- */
    --page-fond: #1e1b4b;
    --page-fond-secondaire: #252149;
    --page-fond-enfonce: #312e5c;

    /* --- TEXTE --- */
    --texte-principal: #f1f5f9;
    --texte-secondaire: #94a3b8;
    --texte-discret: #64748b;
    --texte-lien: #6366f1;
    --texte-lien-survol: #4f46e5;

    /* --- NAVBAR --- */
    --navbar-fond: rgba(30, 27, 75, 0.9);
    --navbar-texte: #f1f5f9;
    --navbar-bordure: rgba(255, 255, 255, 0.08);

    /* --- ONGLETS --- */
    --onglet-actif-fond: #6366f1;
    --onglet-actif-texte: #ffffff;
    --onglet-inactif-fond: transparent;
    --onglet-inactif-texte: #94a3b8;

    /* --- BOUTONS --- */
    --bouton-action-fond: #6366f1;
    --bouton-action-texte: #ffffff;
    --bouton-action-survol: #4f46e5;
    --bouton-positif-fond: #10b981;
    --bouton-positif-texte: #ffffff;
    --bouton-danger-fond: #ef4444;
    --bouton-danger-texte: #ffffff;

    /* --- CARTES --- */
    --carte-fond: #252149;
    --carte-bordure: rgba(255, 255, 255, 0.08);
    --carte-entete-fond: transparent;
    --carte-survol-ombre: 0 4px 6px -1px rgba(var(--ombre-couleur), 0.1), 0 2px 4px -2px rgba(var(--ombre-couleur), 0.1);

    /* --- LISTES --- */
    --liste-bordure: rgba(255, 255, 255, 0.08);
    --liste-survol-fond: rgba(99, 102, 241, 0.15);
    --liste-active-fond: rgba(99, 102, 241, 0.15);
    --liste-active-bordure: #6366f1;

    /* --- FORMULAIRES --- */
    --champ-bordure: rgba(255, 255, 255, 0.15);
    --champ-focus-bordure: #6366f1;
    --champ-focus-ombre: rgba(99, 102, 241, 0.15);
    --champ-label-texte: #94a3b8;

    /* --- TABLEAU --- */
    --tableau-entete-texte: #64748b;
    --tableau-ligne-survol: rgba(99, 102, 241, 0.15);
    --tableau-bordure: rgba(255, 255, 255, 0.08);

    /* --- MODALES --- */
    --modale-fond: #252149;
    --modale-bordure: rgba(255, 255, 255, 0.15);
    --modale-entete-bordure: rgba(255, 255, 255, 0.08);

    /* --- BADGES (techniques FEKM) --- */
    --badge-categorie-fond: rgba(99, 102, 241, 0.15);
    --badge-categorie-texte: #6366f1;
    --badge-periode-fond: rgba(6, 182, 212, 0.15);
    --badge-periode-texte: #06b6d4;
    --badge-type-fond: rgba(245, 158, 11, 0.12);
    --badge-type-texte: #f59e0b;
    --badge-wod-fond: #f59e0b;
    --badge-wod-texte: #1a1a1a;
    --badge-combat-fond: #ef4444;
    --badge-combat-texte: #ffffff;
    --badge-drill-fond: #06b6d4;
    --badge-drill-texte: #ffffff;

    /* --- ALERTES --- */
    --alerte-succes: #10b981;
    --alerte-erreur: #ef4444;
    --alerte-attention: #f59e0b;
    --alerte-info: #06b6d4;

    /* --- SÉPARATEURS --- */
    --separateur: rgba(255, 255, 255, 0.08);
    --separateur-fort: rgba(255, 255, 255, 0.15);

    /* --- TOAST (notifications) --- */
    --toast-fond: #252149;
    --toast-bordure: rgba(255, 255, 255, 0.15);

    /* --- SELECTION / FOCUS --- */
    --selection-fond: rgba(99, 102, 241, 0.15);
    --selection-bordure: #6366f1;

    /* --- RECHERCHE (highlight) --- */
    --recherche-surlignage: #ffe066;
    --recherche-surlignage-texte: #1a1a1a;

    /* --- ÉLÉMENTS AVANCÉS (nouvellement personnalisables) --- */
    /* Badge secondaire (sous-catégorie de séance, étiquettes contextuelles) */
    --badge-sous-categorie-fond: #6f42c1;
    --badge-sous-categorie-texte: #ffffff;
    /* Badge compteur (nombre de techniques par UV/type dans la vue cartes) */
    --badge-compteur-fond: rgba(255, 255, 255, 0.08);
    --badge-compteur-texte: #94a3b8;
    /* Icône d'information (tooltips, indices) */
    --icone-info: #06b6d4;
    /* Couleur d'ombre (élévation des cartes, navbar, modales) — teinte RGB seule */
    --ombre-couleur: 0, 0, 0;
    /* Teinte de fond par défaut d'une carte sans couleur de ceinture — RGB seul */
    --carte-teinte-defaut: 108, 117, 125;

    /* --- Utilitaires internes (non personnalisables) --- */
    --kfm-radius: 0.75rem;
    --kfm-radius-sm: 0.5rem;
    --kfm-shadow: 0 1px 3px rgba(var(--ombre-couleur), 0.12), 0 1px 2px rgba(var(--ombre-couleur), 0.06);
    --kfm-shadow-md: 0 4px 6px -1px rgba(var(--ombre-couleur), 0.1), 0 2px 4px -2px rgba(var(--ombre-couleur), 0.1);
    --kfm-shadow-lg: 0 10px 15px -3px rgba(var(--ombre-couleur), 0.1), 0 4px 6px -4px rgba(var(--ombre-couleur), 0.1);
    --kfm-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Base ===== */
/* Override Bootstrap body colors pour utiliser nos variables thème */
html, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --bs-body-bg: var(--page-fond) !important;
    --bs-body-color: var(--texte-principal) !important;
    --bs-link-color: var(--texte-lien) !important;
    --bs-link-hover-color: var(--texte-lien-survol) !important;
    --bs-border-color: var(--separateur) !important;
    --bs-secondary-color: var(--texte-secondaire) !important;
    --bs-tertiary-bg: var(--page-fond-enfonce) !important;
    --bs-secondary-bg: var(--page-fond-secondaire) !important;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    letter-spacing: -0.01em;
    background: var(--page-fond) !important;
    color: var(--texte-principal) !important;
}

a { color: var(--texte-lien); }
a:hover { color: var(--texte-lien-survol); }

/* ===== Navbar ===== */
.navbar {
    background: var(--navbar-fond);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--navbar-bordure);
    box-shadow: var(--kfm-shadow);
    padding: 0.5rem 1rem;
}
.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navbar-texte);
}
.navbar-brand img {
    border-radius: 6px;
    box-shadow: var(--kfm-shadow);
}

/* ===== Onglets navigation (KFM custom) ===== */
.nav-tab-btn {
    background: var(--onglet-inactif-fond);
    color: var(--onglet-inactif-texte);
    border: 1px solid var(--separateur);
    border-radius: var(--kfm-radius-sm);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all var(--kfm-transition);
}
.nav-tab-btn:hover {
    background: var(--liste-survol-fond);
    color: var(--texte-principal);
}
.nav-tab-btn.active {
    background: var(--onglet-actif-fond) !important;
    color: var(--onglet-actif-texte) !important;
    border-color: var(--onglet-actif-fond) !important;
}

/* Onglets mobile (bottom nav) */
.nav-tab-mobile {
    color: var(--onglet-inactif-texte);
    transition: color var(--kfm-transition);
}
.nav-tab-mobile.active {
    color: var(--onglet-actif-fond) !important;
}

/* ===== Boutons ===== */
.btn {
    border-radius: var(--kfm-radius-sm);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all var(--kfm-transition);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--bouton-action-fond);
    border-color: var(--bouton-action-fond);
    color: var(--bouton-action-texte);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--bouton-action-survol);
    border-color: var(--bouton-action-survol);
    box-shadow: 0 0 0 3px var(--champ-focus-ombre);
}
.btn-success {
    background: var(--bouton-positif-fond);
    border-color: var(--bouton-positif-fond);
    color: var(--bouton-positif-texte);
}
.btn-outline-danger { color: var(--bouton-danger-fond); border-color: var(--bouton-danger-fond); }
.btn-outline-danger:hover { background: var(--bouton-danger-fond); color: var(--bouton-danger-texte); }

/* ===== Cards ===== */
.card {
    background: var(--carte-fond);
    border: 1px solid var(--carte-bordure);
    border-radius: var(--kfm-radius);
    box-shadow: var(--kfm-shadow);
    overflow: hidden;
    transition: box-shadow var(--kfm-transition);
}
.card:hover { box-shadow: var(--carte-survol-ombre); }
.card-header {
    background: var(--carte-entete-fond);
    border-bottom: 1px solid var(--carte-bordure);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ===== Listes ===== */
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--liste-bordure);
    transition: all var(--kfm-transition);
    border-radius: 0 !important;
}
.list-group-item:hover {
    background: var(--liste-survol-fond);
    transform: translateX(2px);
}
.list-group-item.active {
    background: var(--liste-active-fond);
    border-left: 3px solid var(--liste-active-bordure);
    color: inherit;
}
.list-group {
    border-radius: var(--kfm-radius);
    overflow: hidden;
    border: 1px solid var(--liste-bordure);
}

/* ===== Formulaires ===== */
.form-control, .form-select {
    border-radius: var(--kfm-radius-sm);
    font-size: 0.85rem;
    border-color: var(--champ-bordure);
    transition: border-color var(--kfm-transition), box-shadow var(--kfm-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--champ-focus-bordure);
    box-shadow: 0 0 0 3px var(--champ-focus-ombre);
}
.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--champ-label-texte);
}

/* ===== Tables ===== */
.table { font-size: 0.85rem; }
.table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--tableau-entete-texte);
    border-bottom: 2px solid var(--tableau-bordure);
}
.table tbody tr { transition: background var(--kfm-transition); }
.table tbody tr:hover { background: var(--tableau-ligne-survol) !important; }

/* ===== Badges ===== */
.badge {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.35em 0.7em;
}

/* ===== Modales ===== */
.modal-backdrop { backdrop-filter: blur(4px); }
.modal-content {
    background: var(--modale-fond);
    border: 1px solid var(--modale-bordure);
    border-radius: var(--kfm-radius);
    box-shadow: var(--kfm-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--modale-entete-bordure); }
.modal-footer { border-top: 1px solid var(--modale-entete-bordure); }

/* ===== Toasts ===== */
.toast-container .toast {
    background: var(--toast-fond);
    border: 1px solid var(--toast-bordure);
    border-radius: var(--kfm-radius-sm);
    animation: slideIn 0.25s ease-out;
    box-shadow: var(--kfm-shadow-lg);
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ===== Spinner ===== */
.spinner-border { width: 1.5rem; height: 1.5rem; border-width: 0.2em; }

/* ===== Mobile layout ===== */
@media (max-width: 991.98px) {
    main { padding-bottom: 5rem !important; }
}

.fixed-bottom.bg-body {
    backdrop-filter: blur(12px);
    box-shadow: 0 -2px 10px rgba(var(--ombre-couleur), 0.1);
}

/* Master-detail responsive */
@media (max-width: 767.98px) {
    .master-detail.detail-open .master-panel { display: none; }
    .master-detail .detail-panel { display: none; }
    .master-detail.detail-open .detail-panel { display: block; }
    .filters-row .form-select, .filters-row .form-control { font-size: 0.78rem; padding: 0.3rem 0.5rem; }
    .filters-row .form-label { font-size: 0.65rem; margin-bottom: 0.1rem; }
    .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .btn-group-sm .btn { min-width: 34px; min-height: 34px; }
    .card-body { padding: 0.75rem; }
    .card-header { padding: 0.5rem 0.75rem; }
    .list-group-item { padding: 0.75rem 1rem; }
    .navbar { padding: 0.4rem 0.75rem; }
    .navbar-brand span { font-size: 0.9rem; }
}
/* NB : sur desktop, la visibilité des panneaux (liste vs calendrier, et le
   panneau détail) est entièrement pilotée par x-show d'Alpine. On n'ajoute
   aucun override `display` desktop, sinon `!important` écraserait x-show et
   afficherait liste + calendrier simultanément. La règle mobile ci-dessus
   (.detail-open .master-panel) est déjà scopée en max-width, sans effet ici. */

/* ===== Belt dot (pastille ceinture — NON thémable, couleurs métier) ===== */
.belt-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid var(--separateur-fort);
    flex-shrink: 0;
}
.belt-dot-lg {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--separateur-fort);
    flex-shrink: 0;
}

/* ===== Tech cards ===== */
.tech-card {
    transition: transform var(--kfm-transition), box-shadow var(--kfm-transition);
    border: 1px solid var(--carte-bordure);
}
.tech-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--carte-survol-ombre);
}
.tech-card .card-body { font-size: 0.82rem; }
.tech-card .card-footer { padding: 0.25rem 0.5rem; }

/* Fond des cartes teinté (discret) de la couleur de la ceinture.
   --belt-rgb est injecté par Alpine (ex: "247, 210, 27"). */
.tech-card.belt-tinted {
    background-color: rgba(var(--belt-rgb, var(--carte-teinte-defaut)), 0.06);
    border-left: 3px solid rgba(var(--belt-rgb, var(--carte-teinte-defaut)), 0.45);
}
.tech-card.belt-tinted .card-footer { background-color: transparent; }
.tech-card.belt-tinted:hover {
    background-color: rgba(var(--belt-rgb, var(--carte-teinte-defaut)), 0.11);
}

/* ===== En-têtes de groupe repliables (UV & Type dans la vue cartes) ===== */
.group-toggle {
    background: transparent;
    border: none;
    border-radius: var(--kfm-radius, 0.375rem);
    padding: 0.2rem 0.35rem;
    color: inherit;
    text-align: left;
    transition: background-color var(--kfm-transition);
}
.group-toggle:hover { background-color: var(--selection-fond); }
.group-toggle > .bi { color: var(--texte-discret); transition: transform var(--kfm-transition); }
.group-toggle.uv-toggle { border-radius: 0; }

/* ===== Badge pills (techniques FEKM) ===== */
.badge-pill {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    background: var(--badge-categorie-fond);
    color: var(--badge-categorie-texte);
    font-weight: 500;
}
.badge-pill.period {
    background: var(--badge-periode-fond);
    color: var(--badge-periode-texte);
}
.badge-pill.type {
    background: var(--badge-type-fond);
    color: var(--badge-type-texte);
}
.badge-pill.clickable {
    cursor: pointer;
    border: none;
    transition: all var(--kfm-transition);
}
.badge-pill.clickable:hover {
    transform: scale(1.05);
    opacity: 0.8;
    box-shadow: 0 0 0 2px var(--selection-fond);
}

/* ===== Drag & drop ===== */
.drag-over {
    background: var(--selection-fond) !important;
    border-top: 2px solid var(--selection-bordure) !important;
}
[draggable="true"] { user-select: none; }
[draggable="true"]:active { opacity: 0.6; cursor: grabbing; }

/* ===== Empty state ===== */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--texte-discret);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }

/* ===== Badges avancés (thémables) ===== */
/* Badge compteur : nombre de techniques par UV/type dans la vue cartes */
.badge-compteur {
    background: var(--badge-compteur-fond) !important;
    color: var(--badge-compteur-texte) !important;
}
/* Badge secondaire : sous-catégorie de séance, étiquettes contextuelles */
.badge-sous-categorie {
    background: var(--badge-sous-categorie-fond) !important;
    color: var(--badge-sous-categorie-texte) !important;
}
/* Icône d'information */
.icone-info { color: var(--icone-info) !important; }

/* ===== Utilities ===== */
.fw-medium { font-weight: 500; }
.text-accent { color: var(--onglet-actif-fond); }

/* ===== Rich Text Editor (mini) ===== */
.rich-editor-wrap .rich-toolbar .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}
.rich-editor {
    min-height: 60px;
    overflow-y: auto;
    max-height: 200px;
    line-height: 1.5;
    font-size: 0.85rem;
}
.rich-editor:focus {
    border-color: var(--champ-focus-bordure);
    box-shadow: 0 0 0 3px var(--champ-focus-ombre);
    outline: none;
}
.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--texte-discret);
    pointer-events: none;
}
/* Affichage inline du HTML technique */
.tech-html { display: inline; }
.tech-html b, .tech-html strong { font-weight: 700; }
.tech-html i, .tech-html em { font-style: italic; }
.tech-html u { text-decoration: underline; }

/* ===== Search highlight ===== */
mark {
    background: var(--recherche-surlignage) !important;
    color: var(--recherche-surlignage-texte) !important;
    padding: 0 2px;
    border-radius: 2px;
}

/* ===== Séance : affichage aéré des parties de cours ===== */
/* Chaque partie possède une couleur d'accent et une icône (mappées en JS via partieMeta) */
.seance-partie {
    margin-bottom: 1.25rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--partie-accent, var(--separateur-fort));
}
.seance-partie:last-child { margin-bottom: 0; }

.seance-partie-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--partie-accent, var(--texte-secondaire));
    margin-bottom: 0.4rem;
}
.seance-partie-header .partie-count {
    color: var(--texte-discret);
    font-weight: 500;
}

/* Item d'une partie : le nom prime, les métadonnées sont discrètes */
.seance-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--separateur);
}
.seance-partie .seance-item:last-child { border-bottom: none; }

.seance-item-body { min-width: 0; flex: 1 1 auto; }

/* Ligne principale : pastille ronde + nom focalisé */
.seance-item-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.seance-item-nom {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--texte-principal);
    word-break: break-word;
}

/* Pastille ronde de couleur de ceinture, alignée sur la 1re ligne du nom */
.belt-dot.belt-dot-item {
    width: 11px; height: 11px;
    margin-top: 0.28rem;
    align-self: flex-start;
}

/* Ligne méta : programme + UV + catégorie + type, en gris fin séparés par des points */
.seance-item-meta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--texte-discret);
}
.seance-item-meta > span:not(:first-child)::before {
    content: "·";
    margin: 0 0.4rem;
    color: var(--separateur-fort);
}

/* Badges de nature de contenu (WOD / Drill / Combat) : conservés car porteurs de sens */
.seance-item-nature {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Sous-listes (exercices WOD / items de drill) */
.seance-subitem {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--texte-secondaire);
    padding: 0.1rem 0;
}
.seance-subitem .subitem-index { color: var(--texte-discret); flex-shrink: 0; }

/* Commentaire de la séance (bandeau discret en tête du détail) */
.seance-commentaire {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--texte-secondaire);
    background: var(--page-fond-enfonce, rgba(255, 255, 255, 0.04));
    border-left: 3px solid var(--separateur-fort);
    border-radius: var(--kfm-radius-sm);
    padding: 0.5rem 0.7rem;
    margin-bottom: 1rem;
}
.seance-commentaire > .bi { color: var(--texte-discret); margin-top: 0.1rem; }

/* ===== Sélecteur de coachs (tactile, avec photo de profil) ===== */
/* Remplace un <select multiple> peu utilisable sur mobile par une liste
   de cases à cocher larges. Scrollable au-delà de quelques entrées. */
.coach-picker {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--separateur, rgba(0, 0, 0, 0.15));
    border-radius: var(--kfm-radius-sm);
    -webkit-overflow-scrolling: touch;
}
.coach-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px; /* cible tactile confortable */
    padding: 0.35rem 0.6rem;
    border-radius: var(--kfm-radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
}
.coach-option:hover { background: var(--page-fond-enfonce, rgba(0, 0, 0, 0.04)); }
.coach-option.selected {
    background: var(--kfm-accent-soft, rgba(13, 110, 253, 0.12));
}
.coach-option .form-check-input { flex: 0 0 auto; cursor: pointer; }
.coach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avatar rond réutilisé dans le picker et dans les chips du détail */
.coach-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--page-fond-enfonce, rgba(0, 0, 0, 0.06));
}

/* Chip coach affichée dans le détail de la séance */
.coach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem 0.15rem 0.15rem;
    border-radius: 999px;
    background: var(--page-fond-enfonce, rgba(0, 0, 0, 0.06));
    font-size: 0.82rem;
    color: var(--texte-secondaire);
}
.coach-chip .coach-avatar { width: 24px; height: 24px; }

/* ===== Caddie : liste de cartes avec accent de couleur par partie ===== */
.cart-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cart-item {
    background: var(--carte-fond, transparent);
    border: 1px solid var(--carte-bordure, var(--separateur));
    border-left: 3px solid var(--partie-accent, var(--separateur-fort));
    border-radius: var(--kfm-radius, 0.5rem);
    padding: 0.6rem 0.75rem;
    transition: box-shadow var(--kfm-transition), border-color var(--kfm-transition);
}
.cart-item:hover { box-shadow: var(--carte-survol-ombre); }

/* Item incomplet (partie ou programme manquant) : liseré d'alerte discret */
.cart-item--unassigned {
    border-left-color: var(--bs-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.cart-item-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.cart-item-icon {
    color: var(--partie-accent, var(--texte-discret));
    font-size: 0.9rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.15rem;
}
.cart-item .belt-dot-item { margin-top: 0.32rem; }

/* Ligne d'assignation : deux champs libellés côte à côte */
.cart-item-assign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.55rem;
}
.cart-field { display: flex; flex-direction: column; gap: 0.15rem; }
.cart-field-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texte-discret);
}
.cart-item-assign .form-select {
    font-size: 0.78rem;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
}

@media (max-width: 575.98px) {
    .cart-item-assign { grid-template-columns: 1fr; }
}

/* ===== Séance : vue calendrier ===== */
.seance-calendar {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grille de 7 colonnes (une par jour de la semaine, lundi -> dimanche) */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* En-tête des jours de la semaine */
.cal-head { margin-bottom: 2px; }
.cal-weekday {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texte-secondaire);
    padding: 0.2rem 0;
}

/* Cellule d'un jour */
.cal-cell {
    min-height: 68px;
    border: 1px solid var(--separateur);
    border-radius: var(--kfm-radius-sm);
    padding: 0.2rem;
    background: var(--carte-fond, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}
/* Jour hors du mois affiché : atténué */
.cal-cell.cal-out {
    opacity: 0.4;
    background: var(--page-fond-enfonce, transparent);
}
/* Aujourd'hui : liseré d'accent */
.cal-cell.cal-today {
    border-color: var(--texte-lien);
    box-shadow: inset 0 0 0 1px var(--texte-lien);
}

.cal-daynum {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--texte-secondaire);
    line-height: 1;
    text-align: right;
    padding: 0.1rem 0.15rem 0;
}

.cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Une séance dans une cellule (bouton cliquable qui ouvre le détail) */
.cal-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    border: none;
    border-left: 3px solid var(--texte-lien);
    border-radius: var(--kfm-radius-sm);
    background: rgba(99, 102, 241, 0.12);
    color: var(--texte-principal);
    font-size: 0.62rem;
    line-height: 1.15;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    transition: background var(--kfm-transition);
}
.cal-event:hover { background: rgba(99, 102, 241, 0.25); }
.cal-event.active {
    background: var(--texte-lien);
    color: #fff;
}
.cal-event .cal-event-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

/* Première ligne d'un événement : horaire à gauche, mini-avatars des coachs à droite */
.cal-event-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}
.cal-coaches {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Avatars empilés/chevauchés à la façon d'un « stack » */
.cal-coach-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--carte-fond, #fff);
    background: var(--page-fond-enfonce, #ccc);
}
.cal-coach-avatar + .cal-coach-avatar { margin-left: -5px; }
.cal-coach-more {
    margin-left: 2px;
    font-size: 0.55rem;
    font-weight: 600;
    opacity: 0.8;
}
.cal-event.active .cal-coach-avatar { border-color: var(--texte-lien); }

/* Sur mobile, cellules plus compactes */
@media (max-width: 767.98px) {
    .cal-cell { min-height: 52px; }
    .cal-event { font-size: 0.58rem; }
}