@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&display=swap');

/* ── Design system — socle bordeaux/or (Vue d'ensemble redesign) ──
   Vars posées ici en préparation du futur sélecteur palette/thème
   (réglage utilisateur, voir HANDOFF_TBC_IMPLEMENTATION_VUE_ENSEMBLE.md §2).
   Pour l'instant, seule la sidebar les consomme. */
:root {
    --bordeaux-side: #3F0F1E;
    --bordeaux-side-light: #5A1B31;
    --bordeaux-btn: #7A1F35;
    --or: #C9A24B;
    --f-display: 'Bebas Neue', sans-serif;
    --f-head: 'Oswald', sans-serif;
}

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

body {
    font-family: 'Barlow', sans-serif;
    background: #0a0f1e;
    color: #e8eaf0;
    min-height: 100vh;
}

/* ── LOGO TBC — fond opaque, pas de blend, encart beige pour ressortir sur le sombre ── */
.landing-logo, .sidebar-header img, .login-logo {
    mix-blend-mode: normal;
    background: #E6DCCF;
    border-radius: 12px;
    padding: 6px;
}
.main-header-left img { mix-blend-mode: normal; height: 32px; width: auto; }

/* ── SIDEBAR ── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 230px;
    height: 100vh;
    background: var(--bordeaux-side);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    transition: transform 0.3s ease;
}
.sidebar-header {
    padding: 24px 16px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-header img { height: 80px; width: auto; border-radius: 12px; margin-bottom: 12px; }
.sidebar-team-name {
    font-family: var(--f-head);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 1.5px; color: #ffffff;
    text-transform: uppercase; line-height: 1.4;
}
.sidebar-nav { flex: 1; padding: 12px 8px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 8px;
    cursor: pointer; color: #8892a4;
    font-size: 14px; font-weight: 500;
    transition: all 0.15s; margin-bottom: 2px;
    text-decoration: none !important;
    border: none; background: none; width: 100%; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #e8eaf0; }
.nav-item.active { background: rgba(230,220,207,0.35); color: #fff; border-left: 3px solid #E6DCCF; padding-left: 11px; }
.nav-icon { font-size: 15px; width: 20px; text-align: center; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.btn-deconnexion {
    width: 100%; padding: 10px; border-radius: 8px; border: none;
    background: var(--bordeaux-btn);
    color: #E6DCCF; font-weight: 700; font-size: 13px;
    cursor: pointer; letter-spacing: 0.5px; font-family: 'Barlow', sans-serif;
}
.btn-deconnexion:hover { background: var(--bordeaux-side-light); }

/* ── OVERLAY SIDEBAR MOBILE ── */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
}

/* ── CONTENU PRINCIPAL ── */
.main-content {
    margin-left: 230px;
    min-height: 100vh;
    background: #f4f6fb;
    display: flex;
    flex-direction: column;
}
.main-header {
    background: #fff;
    padding: 0 28px;
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #e8eaf0;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.main-header-left { display: flex; align-items: center; gap: 12px; }
.main-header-title { font-size: 18px; font-weight: 700; color: #0d1526; }
.main-header-right { display: flex; align-items: center; gap: 16px; }
.btn-actualiser {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; background: #4D0B2B; color: #fff;
    border: none; border-radius: 7px; font-size: 13px;
    font-weight: 600; cursor: pointer; font-family: 'Barlow', sans-serif;
}

/* Bouton hamburger — caché sur desktop */
.btn-hamburger {
    display: none;
    background: none; border: none;
    color: #0d1526; font-size: 22px;
    cursor: pointer; padding: 4px 8px;
    margin-right: 4px;
}

.user-info { text-align: right; }
.user-name { font-size: 13px; font-weight: 600; color: #0d1526; }
.user-role { font-size: 11px; color: #8892a4; }
.page-body { padding: 28px; flex: 1; }

/* ── Header en thème sombre — règle globale, posée sur <body> ──
   Le header vit dans app.py, hors de #page-content : comme la classe est
   maintenant sur <body> (persistant sur toute l'appli) plutôt que sur un
   élément de page, plus besoin de la retirer en changeant de route. */
body.theme-dark .main-header {
    background: var(--bg);
    border-bottom-color: var(--stone-line);
}
body.theme-dark .main-header-title { color: var(--ink); }
body.theme-dark .user-name { color: var(--ink) !important; }
body.theme-dark .user-role { color: var(--stone) !important; }
body.theme-dark .btn-hamburger { color: var(--ink); }
body.theme-dark #btn-notif-admin {
    border-color: #3a4a6b !important;
    color: var(--stone) !important;
}

/* ── LANDING PAGE ── */
.landing-page {
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 40%, #3B0F22 0%, #170810 60%, #000 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 20px;
}
.landing-logo { height: 130px; width: auto; margin-bottom: 28px; mix-blend-mode: screen; }
.landing-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 38px; font-weight: 700; color: #fff;
    text-align: center; letter-spacing: 0.5px; margin-bottom: 8px;
}
.landing-slogan { font-size: 14px; color: #8892a4; margin-bottom: 40px; text-align: center; }
.btn-se-connecter {
    padding: 14px 48px; background: #4D0B2B; color: #fff;
    border: none; border-radius: 10px; font-size: 16px;
    font-weight: 700; cursor: pointer; transition: background 0.2s;
    margin-bottom: 48px; font-family: 'Barlow', sans-serif;
}
.btn-se-connecter:hover { background: #6B1440; }
.landing-saison { font-size: 11px; letter-spacing: 2px; color: #3a4460; text-transform: uppercase; }

/* ── LOGIN MODAL ── */
.login-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; backdrop-filter: blur(4px);
    padding: 20px;
}
.login-card {
    background: #2A0F1A; border-radius: 16px;
    padding: 36px 40px 32px; width: 100%; max-width: 420px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.login-close {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,0.08); border: none;
    color: #8892a4; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer; font-size: 16px;
}
.login-logo { height: 64px; width: auto; display: block; margin: 0 auto 24px; }
.login-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    color: #8892a4; text-transform: uppercase; margin-bottom: 8px; display: block;
}
.login-input {
    width: 100%; padding: 11px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: #e8eaf0;
    font-size: 14px; font-family: 'Barlow', sans-serif;
    margin-bottom: 16px; outline: none;
    transition: border 0.15s; display: block;
}
.login-input:focus { border-color: #4D0B2B; }
.login-input::placeholder { color: #4a5568; }
.login-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.login-remember span { font-size: 13px; color: #8892a4; }
.btn-login {
    width: 100%; padding: 12px; background: #4D0B2B; color: #fff;
    border: none; border-radius: 8px; font-size: 15px;
    font-weight: 700; cursor: pointer; font-family: 'Barlow', sans-serif;
    transition: background 0.2s;
}
.btn-login:hover { background: #6B1440; }
.login-error { margin-top: 12px; color: #ff6b6b; font-size: 13px; text-align: center; min-height: 20px; }

/* ── PLACEHOLDER MODULES ── */
.placeholder-text {
    color: #8892a4; font-size: 15px; text-align: center;
    padding: 80px 20px; background: #fff;
    border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* ════════════════════════════════════════════
   TABLETTE (≤ 1024px)
════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar { width: 200px; }
    .main-content { margin-left: 200px; }
    .page-body { padding: 20px; }
    .main-header { padding: 0 20px; }
    .main-header-title { font-size: 16px; }
    .btn-actualiser span { display: none; } /* Cache le texte, garde juste l'icône */
}

/* ════════════════════════════════════════════
   MOBILE (≤ 768px)
════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sidebar cachée par défaut, slide depuis la gauche */
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }

    /* Contenu plein écran */
    .main-content { margin-left: 0; }

    /* Hamburger visible */
    .btn-hamburger { display: block; }

    /* Header compact */
    .main-header { padding: 0 16px; height: 54px; }
    .main-header-title { font-size: 15px; }
    .btn-actualiser { padding: 6px 12px; font-size: 12px; }

    /* Masquer "Administrateur" sur mobile */
    .user-role { display: none; }

    /* Body plus compact */
    .page-body { padding: 16px; }

    /* Landing adaptée mobile */
    .landing-logo { height: 90px; margin-bottom: 20px; }
    .landing-title { font-size: 26px; }
    .landing-slogan { font-size: 13px; margin-bottom: 28px; }
    .btn-se-connecter { padding: 12px 36px; font-size: 15px; margin-bottom: 32px; }

    /* Login card plein écran sur mobile */
    .login-card { padding: 28px 24px; }
}

/* ════════════════════════════════════════════
   PETIT MOBILE (≤ 390px — iPhone SE etc.)
════════════════════════════════════════════ */
@media (max-width: 390px) {
    .landing-title { font-size: 22px; }
    .main-header-title { display: none; }
    .btn-actualiser { font-size: 11px; padding: 5px 10px; }
}

/* ── FIX PLEIN ÉCRAN ── */
#app-container {
    width: 100%;
    min-height: 100vh;
    flex: 1;
}
.main-content {
    flex: 1;
    min-width: 0;
}

/* ── HEADER LOGO (fond blanc = pas de blend) ── */
.header-logo {
    height: 32px;
    width: auto;
    mix-blend-mode: normal;
}

/* ════════════════════════════════════════════
   VUE D'ENSEMBLE
════════════════════════════════════════════ */

/* KPI row */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-top: 3px solid #e8eaf0;
}
.kpi-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}
.kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #8892a4;
    text-transform: uppercase;
}

/* Sélecteur semaine */
.week-selector {
    background: var(--card, #fff);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: inline-block;
}
.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--stone, #8892a4);
    text-transform: uppercase;
}
.date-input {
    padding: 8px 12px;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: #0d1526;
    outline: none;
}
.date-input:focus { border-color: #4D0B2B; }
.btn-refresh-small {
    padding: 8px 14px;
    background: #f4f6fb;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-refresh-small:hover { background: #e8eaf0; }

/* Grille joueuses */
.player-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.player-overview-card {
    background: var(--card, #fff);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s, background .2s;
}
.player-overview-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* ════════════════════════════════════════════
   VUE D'ENSEMBLE — GRILLE DE WIDGETS (redesign)
   Repris de TBC_dashboard_FINAL_v5.html.
   Préfixe "ve-" pour ne pas entrer en collision avec
   les classes .card/.card-* de Bootstrap (dbc.themes.BOOTSTRAP).

   Sélecteur palette/thème (réglage utilisateur) — RÈGLE GLOBALE :
   les classes `theme-dark` / `palette-bordeaux` sont posées sur <body>
   (voir ve_widgets.js::applyBodyTheme, appelé au clic sur un bouton ET
   à chaque changement de page via router.py::register_router_callbacks),
   donc tout module dont le CSS consomme ces vars en hérite automatiquement,
   sans reset à la navigation. Modules déjà convertis : Vue d'ensemble
   (ce bloc), Calendrier (calendrier.css), + classes génériques partagées
   ci-dessous (.placeholder-text, .stat-card). Les autres modules
   (Team Wellness, Team RPE, Documents, Utilisateurs, Prépa Physique...)
   gardent leurs couleurs actuelles tant que leurs CSS respectifs n'ont
   pas été convertis aux mêmes vars — cf. conversation pour la liste des
   fichiers à fournir.
════════════════════════════════════════════ */
:root {
    --d-info: #002395;
    --d-warn: #fb8c00;
    --d-ok: #43a047;
    --d-alert: #e53935;

    --ink: #0d1526;
    --stone: #8892a4;
    --stone-line: #e8eaf0;
    --bg-soft: #f4f6fb;
    --card: #ffffff;
    --bg: #f4f6fb;
}

/* Palette bordeaux/or — mêmes valeurs que la maquette v5 — GLOBALE */
body.palette-bordeaux {
    --d-info: var(--bordeaux-btn);
    --d-warn: #C9862B;
    --d-ok: #8A7A2E;
    --d-alert: #B5502E;
}

/* Thème sombre — GLOBAL (toute l'appli, sidebar exclue : elle reste
   bordeaux en permanence, cf. décision du 26/08/2026) */
body.theme-dark {
    --ink: #EDEEF2;
    --stone: #9298AC;
    --stone-line: #2B2E3A;
    --bg-soft: #262A36;
    --card: #1D2029;
    --bg: #14161C;
    /* #002395 (bleu marque, palette fonctionnelle) est illisible sur fond
       sombre — deux tons sombres qui se superposent. Variante plus
       claire uniquement en sombre, même logique de contraste que le
       reste du thème. Repéré le 26/08/2026 sur la colonne "Retenu" de
       Tests Physiques. */
    --d-info: #6C8EEF;
}
body.theme-dark .main-content { background: var(--bg); transition: background .2s; }
body.theme-dark .page-body { background: transparent; }

/* Classes génériques partagées par plusieurs modules (dont les pages
   encore en "wip" via router.py::_wip) — converties dès maintenant. */
body.theme-dark .placeholder-text { background: var(--card); color: var(--stone); }
body.theme-dark .stat-card { background: var(--card); color: var(--ink); }

/* ── Barre de contrôle palette/thème ── */
.ve-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ve-ctrl-group {
    display: flex; align-items: center; gap: 4px;
    background: var(--card); border: 1px solid var(--stone-line);
    border-radius: 999px; padding: 4px;
}
.ve-ctrl-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    color: var(--stone); text-transform: uppercase; padding: 0 8px;
}
.ve-ctrl-btn {
    font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px;
    padding: 6px 13px; border-radius: 999px; border: none;
    background: transparent; color: var(--ink); cursor: pointer;
}
.ve-ctrl-btn.active { background: var(--bordeaux-btn); color: #fff; }

.ve-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    gap: 13px;
    margin-bottom: 28px;
}

.ve-card {
    background: var(--card);
    border: 1px solid var(--stone-line);
    border-radius: 10px;
    padding: 15px 17px;
    position: relative;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform .12s, box-shadow .12s, opacity .12s, background .2s, border-color .2s;
    overflow: hidden;
}
.ve-card::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--or) 0%, transparent 70%);
    border-radius: 10px 10px 0 0;
}
.ve-card:active { cursor: grabbing; }
.ve-card.dragging { opacity: .35; }
.ve-card.over { outline: 2px dashed var(--bordeaux-btn); outline-offset: -2px; }

.ve-card-label {
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--stone);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ve-card-tools { display: flex; gap: 6px; align-items: center; }
.ve-card-tools span { font-size: 12px; color: var(--stone); cursor: grab; }
.ve-card-resize {
    border: none;
    background: var(--bg-soft);
    color: var(--bordeaux-btn);
    width: 20px; height: 20px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
}
.ve-card-resize:hover { background: var(--stone-line); }
.ve-card-tools .ve-add-teaser { font-size: 10px; color: var(--stone); cursor: default; }

.w-1x1 { grid-column: span 1; }
.w-2x1 { grid-column: span 2; }
.w-2x2 { grid-column: span 2; grid-row: span 2; }
.w-4x1 { grid-column: span 4; }

/* ── Contenu widget Calendrier (placeholder — données réelles à brancher) ── */
.ve-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
.ve-cal-day { background: var(--bg-soft); border-radius: 6px; padding: 6px 4px; text-align: center; }
.ve-cal-day .ve-dname { font-size: 9px; color: var(--stone); text-transform: uppercase; font-weight: 600; }
.ve-cal-day .ve-devt { margin-top: 6px; font-weight: 700; font-size: 10.5px; color: var(--ink); }
.ve-cal-day.match { background: rgba(0,35,149,0.08); }
.ve-cal-day.match .ve-devt { color: var(--d-info); }
.ve-cal-day.rest { background: rgba(67,160,71,0.08); }
.ve-cal-day.rest .ve-devt { color: var(--d-ok); }
.ve-num-sub { font-size: 11px; color: var(--stone); margin-top: 10px; }

/* ── Contenu widget Wellness (données réelles) ── */
.ve-wl-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--bg-soft); }
.ve-wl-row:last-of-type { border-bottom: none; }
.ve-wl-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--stone-line); color: var(--stone);
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.ve-wl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ve-wl-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-wl-score { font-size: 13px; font-weight: 700; }
.ve-wl-score.good { color: var(--d-ok); }
.ve-wl-score.mid { color: var(--d-warn); }
.ve-wl-score.bad { color: var(--d-alert); }
.ve-wl-footer, .ve-wl-empty {
    display: block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
    color: var(--bordeaux-btn); text-decoration: none; cursor: pointer;
}
.ve-wl-empty { color: var(--stone); font-weight: 500; font-style: italic; cursor: default; }

/* ── Contenu widget Planification (placeholder) ── */
.ve-plan-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--bg-soft); }
.ve-plan-row:last-of-type { border-bottom: none; }
.ve-plan-tag { font-size: 10.5px; font-weight: 700; color: var(--stone); background: var(--bg-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.ve-plan-tag.game { color: var(--d-info); background: rgba(0,35,149,0.08); }

/* ── Contenu widgets Alertes / Effectif / 1RM (placeholder) ── */
.ve-mini-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.ve-pill { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.ve-pill.alert { color: var(--d-alert); background: rgba(229,57,53,0.1); }
.ve-big-num { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; }
.ve-big-num.info { color: var(--d-info); }
.ve-big-num.warn { color: var(--d-warn); }

/* ── Widget Positionnement — teaser non fonctionnel (pointillés) ── */
.ve-quad-teaser { border-style: dashed; border-color: var(--stone-line); background: var(--bg-soft); cursor: grab; }
.ve-quad-teaser::after { display: none; }
.ve-quad-mini { position: relative; height: 62px; margin-top: 6px; background: var(--card); border-radius: 6px; }
.ve-quad-mini .ve-axis { position: absolute; background: var(--stone-line); }
.ve-quad-mini .ve-axis.h { top: 50%; left: 0; width: 100%; height: 1px; }
.ve-quad-mini .ve-axis.v { left: 50%; top: 0; height: 100%; width: 1px; }
.ve-quad-mini .ve-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); transform: translate(-50%, -50%); }
.ve-quad-note { font-size: 10px; color: var(--stone); font-style: italic; margin-top: 8px; }

@media (max-width: 1100px) {
    .ve-grid { grid-template-columns: repeat(2, 1fr); }
    .w-4x1 { grid-column: span 2; }
}
@media (max-width: 640px) {
    .ve-grid { grid-template-columns: 1fr; }
    .w-1x1, .w-2x1, .w-2x2, .w-4x1 { grid-column: span 1; }
}

/* Header carte */
.player-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--stone-line, #f0f2f7);
}
.player-avatar-initials {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4D0B2B, #8B2E52);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.player-card-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink, #0d1526);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.player-card-sub { font-size: 12px; color: var(--stone, #8892a4); }

/* Stats mini */
.player-card-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
}
.stat-mini { display: flex; flex-direction: column; gap: 2px; }
.stat-mini-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--stone, #8892a4);
    text-transform: uppercase;
}

/* Mini timeline */
.mini-timeline {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.timeline-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.timeline-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--stone-line, #e8eaf0);
}
.timeline-dot.filled { background: #4D0B2B; }
.timeline-dot.today  { background: var(--stone-line, #e8eaf0); outline: 2px solid #4D0B2B; }
.timeline-dot.filled.today { background: #4D0B2B; outline: 2px solid #4D0B2B; }
.timeline-label {
    font-size: 9px;
    color: var(--stone, #8892a4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .player-grid { grid-template-columns: 1fr; }
}

/* ── PHOTOS JOUEUSES ── */
.player-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8eaf0;
    flex-shrink: 0;
    background: linear-gradient(135deg, #4D0B2B, #8B2E52);
}

/* ════════════════════════════════════════════
   MODULE WELLNESS JOUEUSE
════════════════════════════════════════════ */

.ws-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.ws-form-col { display: flex; flex-direction: column; gap: 16px; }
.ws-score-col { position: sticky; top: 80px; }

/* Score card */
.score-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-align: center;
}
.score-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #8892a4;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.score-card-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}
.score-legend { font-size: 13px; line-height: 2; text-align: left; }

/* Sections */
.ws-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ws-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #0d1526;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Time inputs */
.ws-time-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #8892a4;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ws-time-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Barlow', sans-serif;
    color: #0d1526;
    outline: none;
}
.ws-time-input:focus { border-color: #4D0B2B; }

/* Slider */
.ws-slider { margin: 8px 0 16px !important; }

/* Steps */
.ws-steps-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.ws-step {
    border: 2px solid #e8eaf0;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
    user-select: none;
}
.ws-step:hover { opacity: 0.85; transform: translateY(-1px); }
.ws-step-icon { font-size: 20px; margin-bottom: 6px; }
.ws-step-label { font-size: 11px; font-weight: 700; line-height: 1.2; }
.ws-step-sublabel { font-size: 10px; opacity: 0.7; margin-top: 2px; }

/* Body map tags */
.bm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin: 4px;
}

/* Buttons */
.btn-no-pain {
    width: 100%;
    padding: 10px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
}
.btn-valider {
    width: 100%;
    padding: 14px;
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.2s;
}
.btn-valider:hover { background: #6B1440; }

/* Textarea */
.ws-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: #0d1526;
    resize: vertical;
    outline: none;
}
.ws-textarea:focus { border-color: #4D0B2B; }

/* SVG zones cliquables */
.mzone {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    transition: fill 0.15s;
}
.mzone:hover { fill: rgba(239,68,68,0.2); stroke: #ef4444; stroke-width: 1; }
.mzone.selected { fill: rgba(239,68,68,0.35); stroke: #dc2626; stroke-width: 1.5; }

/* Responsive */
@media (max-width: 900px) {
    .ws-layout { grid-template-columns: 1fr; }
    .ws-score-col { position: static; }
    .ws-steps-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ws-steps-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── FIX COULEURS TROP CLAIRES ── */

/* Score card label + texte */
.score-card-label {
    color: #64748b !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.score-legend { font-size: 13px; line-height: 2.2; text-align: left; }

/* Section titles wellness */
.ws-section-title {
    color: #1e293b !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Time labels */
.ws-time-label {
    color: #475569 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Date picker — texte visible */
.DateInput_input {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.DateRangePickerInput, .SingleDatePickerInput {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

/* Step sublabel plus visible */
.ws-step-sublabel {
    font-size: 10px;
    opacity: 0.85;
    margin-top: 2px;
    color: inherit;
}

/* KPI labels */
.kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #475569 !important;
    text-transform: uppercase;
}

/* Sidebar team name — couleur pilotée par la règle de base (var(--bordeaux-side) system) */

/* User role */
.user-role { color: #64748b !important; }

/* ── FIX COULEURS DATEPICKER + SLIDER MARKS ── */

/* Texte dans le date picker */
.DateInput_input,
.DateInput_input__focused,
.SingleDatePickerInput,
.SingleDatePicker input {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: #fff !important;
}
.DateInput { background: #fff !important; }
.SingleDatePickerInput__withBorder {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
}

/* Marks du slider (les chiffres 1 2 3 4 5) */
.rc-slider-mark-text,
.rc-slider-mark-text-active {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Score card valeur affichée à droite du slider */
.slider-score-badge {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ── TIME SCROLLER ── */
.time-scroller {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    width: 100%;
}
.time-scroller .Select-control,
.time-scroller .Select-menu-outer {
    border: none !important;
    background: transparent !important;
    min-width: 70px;
}
.time-scroller-sep {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    padding: 0 2px;
}
.time-scroller-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px;
}

/* ════ OVERRIDE FORCÉ COULEURS GRISES ════ */

/* Slider marks 1 2 3 4 5 */
.rc-slider-mark-text { color: #1e293b !important; font-weight: 700 !important; font-size: 13px !important; }
.rc-slider-mark-text-active { color: #1e293b !important; }

/* Boîte valeur slider (le carré avec le chiffre) */
.rc-slider-handle { border-color: #4D0B2B !important; }
input[type=number], .Select-value-label,
div[data-dash-is-loading] { color: #1e293b !important; }

/* Date picker — texte date affiché */
input.DateInput_input { color: #1e293b !important; font-weight: 600 !important; }
.DateInput_input { color: #1e293b !important; }
#ws-date input, #admin-ws-debut input, #admin-ws-fin input { color: #1e293b !important; }

/* Forcer tous les placeholders et valeurs des dropdowns temps */
.VirtualizedSelectOption, .Select-option, .Select-value-label {
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   THÈME SOMBRE — composants natifs Dash + classes partagées
   Les blocs ci-dessus forcent des couleurs claires en dur (avec
   !important) sur des composants tiers (react-dates, react-select,
   rc-slider) et des classes génériques (.rpe-card, .kpi-card,
   .score-card, .ws-section) réutilisées par PLUSIEURS modules.
   Un seul override ici (body.theme-dark ...) profite donc à tous ces
   modules d'un coup, sans avoir à toucher chaque fichier .py un par un.
════════════════════════════════════════════ */

/* Datepicker (react-dates) */
body.theme-dark .DateInput_input,
body.theme-dark .DateInput_input__focused,
body.theme-dark .SingleDatePickerInput,
body.theme-dark .SingleDatePicker input,
body.theme-dark input.DateInput_input {
    color: var(--ink) !important;
    background: var(--card) !important;
}
body.theme-dark .DateInput,
body.theme-dark .SingleDatePickerInput__withBorder {
    background: var(--card) !important;
    border-color: var(--stone-line) !important;
}
body.theme-dark .DateRangePickerInput, body.theme-dark .SingleDatePickerInput {
    border-color: var(--stone-line) !important;
}

/* Dropdowns — Dash 4.x (nouveau composant Radix UI, classes "dash-dropdown-*")
   Les anciennes classes react-select (.Select-control, .VirtualizedSelectOption...)
   ci-dessus ne correspondent plus à rien dans cette version de Dash —
   confirmé via DevTools le 26/08/2026 (aria-controls="radix-:rX:" +
   dash-dropdown-grid-container/dash-dropdown-trigger). On garde les
   anciennes règles au cas où un module utiliserait encore l'ancien
   composant, et on ajoute les vraies classes actuelles ci-dessous,
   avec un sélecteur large [class*="dash-dropdown"] pour couvrir le menu
   ouvert sans avoir à lister chaque classe interne une par une. */
body.theme-dark .Select-control,
body.theme-dark .Select-menu-outer,
body.theme-dark .VirtualizedSelectOption,
body.theme-dark .Select-option,
body.theme-dark .Select-value-label,
body.theme-dark [class*="dash-dropdown"] {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-color: var(--stone-line) !important;
}
body.theme-dark .time-scroller {
    background: var(--bg-soft);
    border-color: var(--stone-line);
}
body.theme-dark .time-scroller-sep { color: var(--ink); }
body.theme-dark .time-scroller-label { color: var(--stone); }

/* Champs texte/nombre génériques */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .dcc-input,
body.theme-dark .dcc-textarea,
body.theme-dark input[type="number"],
body.theme-dark .rpe-input-num,
body.theme-dark .rpe-number-input {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-color: var(--stone-line) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder { color: var(--stone) !important; }

/* Datepicker — Dash 4.x (nouveau composant, classes "dash-datepicker-*")
   Même situation que le dropdown : l'ancien react-dates (.DateInput_input,
   .SingleDatePickerInput...) plus haut ne correspond plus à rien.
   Confirmé via DevTools le 26/08/2026 : #xxx-wrapper.dash-datepicker-
   input-wrapper (le déclencheur) + fichier interne datepickers.css.
   Le calendrier ouvert (grille des jours) est un popover à part dont on
   n'a pas confirmé toutes les classes internes — [class*="dash-datepicker"]
   couvre le conteneur et tout ce qui partage ce préfixe, mais les cellules
   de jours individuelles pourraient rester claires si elles utilisent des
   classes génériques sans ce préfixe (à vérifier si ça reste visible). */
body.theme-dark .dash-datepicker,
body.theme-dark .dash-datepicker-input-wrapper,
body.theme-dark [class*="dash-datepicker"] {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-color: var(--stone-line) !important;
}

/* Slider RPE — Dash 4.x (nouveau composant, classes "dash-slider-*")
   Piste/curseur (dash-slider-track/root) déjà lisibles en sombre (violet
   sur fond sombre) : on ne touche QUE les graduations (1,2,3...10) pour
   ne pas abîmer le rendu déjà correct de la piste/du curseur. */
body.theme-dark [class*="dash-slider-mark"] {
    color: var(--ink) !important;
}

/* Boutons filtre rapide RPE Visualisation (Cette semaine / Semaine
   dernière / Ce mois) — .btn-period, deux occurrences dans styles.css */
body.theme-dark .btn-period {
    background: var(--bg-soft) !important;
    border-color: var(--stone-line) !important;
    color: var(--ink) !important;
}
body.theme-dark .btn-period:hover { background: var(--stone-line) !important; }

/* Marks / badges du slider RPE */
body.theme-dark .rc-slider-mark-text,
body.theme-dark .rc-slider-mark-text-active { color: var(--ink) !important; }
body.theme-dark .slider-score-badge { color: var(--ink) !important; }

/* Cartes/sections génériques partagées par plusieurs modules */
body.theme-dark .rpe-card,
body.theme-dark .kpi-card,
body.theme-dark .score-card,
body.theme-dark .ws-section {
    background: var(--card);
}
body.theme-dark .rpe-card-title,
body.theme-dark .ws-section-title,
body.theme-dark .ws-section h4 {
    color: var(--ink) !important;
}
body.theme-dark .rpe-field-label, body.theme-dark .ws-time-label {
    color: var(--ink) !important;
}

/* Couleur de texte "de base" — plusieurs conteneurs comptent sur
   l'héritage depuis body/.rpe-card/etc. plutôt qu'une couleur explicite
   sur chaque enfant ; sans ce catch-all ils resteraient invisibles
   (texte sombre hérité sur fond sombre). */
body.theme-dark,
body.theme-dark .page-body,
body.theme-dark .ws-section,
body.theme-dark .rpe-card,
body.theme-dark .stat-card,
body.theme-dark .kpi-card,
body.theme-dark .score-card,
body.theme-dark .player-overview-card,
body.theme-dark .week-selector {
    color: var(--ink);
}

/* Score wellness labels */
.score-card > div:last-child > div { font-weight: 600 !important; }

/* Section titles */
.ws-section h4, .ws-section-title { color: #1e293b !important; }

/* Slider value box */
.dcc-slider .rc-slider + div,
.js-plotly-plot { color: #1e293b !important; }

/* Force tout texte visible dans ws-section */
.ws-section { color: #1e293b; }
.ws-section * { color: inherit; }
.ws-step-label { color: inherit !important; font-weight: 700 !important; }
.ws-step-sublabel { opacity: 0.75; }

/* ════════════════════════════════════════════
   MODULE RPE
════════════════════════════════════════════ */
.rpe-card { background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:16px; }
.rpe-card-title { font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#1e293b;margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.rpe-field-label { font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px; }
.rpe-number-input { width:80px;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;color:#1e293b;text-align:center;outline:none; }
.rpe-number-input:focus { border-color:#4D0B2B; }

/* Table header */
.rpe-table-header { display:grid;grid-template-columns:220px 80px 1fr 120px 130px;gap:10px;padding:12px 16px;background:#1e293b;border-radius:10px 10px 0 0;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.8px; }
.rpe-table-row { display:grid;grid-template-columns:220px 80px 1fr 120px 130px;gap:10px;padding:12px 16px;align-items:center;border-bottom:1px solid #f0f2f7; }
.rpe-col-j { } .rpe-col-p { } .rpe-col-r { } .rpe-col-d { } .rpe-col-c { }

.rpe-charge-badge { padding:6px 14px;border-radius:20px;font-weight:700;font-size:14px;white-space:nowrap; }
.rpe-checkbox .form-check-input { width:20px;height:20px;cursor:pointer;accent-color:#4D0B2B; }
.rpe-slider { margin:0 !important; }

/* Tabs RPE */
.rpe-tab { padding:10px 20px;font-weight:600;color:#64748b;border:none;background:transparent;cursor:pointer; }
.rpe-tab-active { color:#4D0B2B;border-bottom:3px solid #4D0B2B !important; }

/* Boutons période */
.btn-period { padding:7px 14px;background:#f4f6fb;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;font-weight:600;color:#1e293b;cursor:pointer;font-family:'Barlow',sans-serif; }
.btn-period:hover { background:#e2e8f0; }
.btn-apply-all { padding:9px 18px;background:transparent;border:2px solid #4D0B2B;color:#4D0B2B;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif;transition:all 0.15s; }
.btn-apply-all:hover { background:#4D0B2B;color:#fff; }

@media (max-width:768px) {
  .rpe-table-header,.rpe-table-row { grid-template-columns:1fr 60px 1fr 80px 100px; }
}

/* ════ MODULE RPE ════ */
.rpe-tabs-header {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e8eaf0;
    padding-bottom: 0;
}
.rpe-tab {
    padding: 10px 24px;
    border: none;
    background: none;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.rpe-tab.active { color: #4D0B2B; border-bottom-color: #4D0B2B; }
.rpe-tab:hover  { color: #4D0B2B; }

.rpe-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.rpe-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}
.rpe-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.rpe-input-num {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #1e293b;
    font-family: 'Barlow', sans-serif;
}
.rpe-slider { margin: 6px 0 !important; }
.btn-valider-rpe {
    padding: 14px 50px;
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    box-shadow: 0 4px 15px rgba(77,11,43,0.3);
    transition: background 0.2s;
}
.btn-valider-rpe:hover { background: #6B1440; }
.btn-period {
    padding: 7px 16px;
    background: #f4f6fb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #1e293b;
    font-family: 'Barlow', sans-serif;
    align-self: flex-end;
}

/* ════ FIX GLOBAL TEXTE NOIR PAR DÉFAUT ════ */
body, .page-body, .ws-section, .rpe-card,
.stat-card, .kpi-card, .score-card,
.player-overview-card, .week-selector {
    color: #1e293b;
}

/* Inputs, dropdowns, datepickers */
input, select, textarea,
.Select-value-label, .Select-option,
.DateInput_input,
.dash-datepicker-container input,
.dcc-input, .dcc-textarea {
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* Placeholders plus visibles */
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }

/* Labels */
.rpe-field-label, .ws-time-label,
.ws-section-title, .rpe-card-title { color: #1e293b !important; }

/* Dropdown Dash options */
.VirtualizedSelectOption { color: #1e293b !important; }
.Select-control { color: #1e293b !important; }

/* Slider marks */
.rc-slider-mark-text,
.rc-slider-mark-text-active { color: #334155 !important; font-weight: 600 !important; }

/* Dash datepicker input spécifique */
div.dash-datepicker input,
div.dash-datepicker-container input { color: #1e293b !important; font-weight: 600 !important; }


/* ════════════════════════════════════════════
   MODULE DOCUMENTS
════════════════════════════════════════════ */

/* ── Page wrapper ── */
.docs-page {
    padding: 30px;
    background: #f4f6fb;
    min-height: 100vh;
}

/* ── Header ── */
.docs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.docs-page-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0d1526;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Boutons header ── */
.btn-new-folder {
    background: #fff;
    color: #4D0B2B;
    border: 2px solid #4D0B2B;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
    margin-right: 10px;
}
.btn-new-folder:hover { background: #4D0B2B; color: #fff; }

.btn-add-doc {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.btn-add-doc:hover { background: #6B1440; }

/* ── Onglets ── */
.docs-tab-btn {
    padding: 9px 20px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
}
.docs-tab-btn:hover {
    border-color: #4D0B2B;
    color: #4D0B2B;
}
.docs-tab-btn.active,
.docs-tab-btn[data-active="true"] {
    border-color: #4D0B2B;
    background: #4D0B2B;
    color: #fff;
}

/* ── Breadcrumb ── */
.docs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
}
.docs-breadcrumb a,
.docs-breadcrumb button {
    color: #4D0B2B;
    font-weight: 700;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Barlow', sans-serif;
    padding: 0;
}
.docs-breadcrumb a:hover,
.docs-breadcrumb button:hover { text-decoration: underline; }
.docs-breadcrumb-sep { color: #cbd5e1; font-size: 12px; }

/* ── Grille dossiers ── */
.docs-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Carte dossier */
.docs-folder-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    cursor: pointer;
}
.docs-folder-card:hover {
    box-shadow: 0 8px 24px rgba(77,11,43,0.12);
    border-color: #4D0B2B;
    transform: translateY(-2px);
}
.docs-folder-card:hover .docs-folder-delete {
    opacity: 1;
}

/* Zone cliquable (icône + nom) */
.docs-folder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px;
    gap: 8px;
}
.docs-folder-icon { font-size: 44px; line-height: 1; }
.docs-folder-name {
    font-weight: 700;
    font-size: 13px;
    color: #0d1526;
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
}
.docs-folder-count {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

/* Bouton supprimer dossier (visible au hover) */
.docs-folder-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fef2f2;
    border: none;
    color: #e53935;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.docs-folder-delete:hover { background: #e53935; color: #fff; }

/* ── Grille documents (dans un dossier) ── */
.docs-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

/* Carte document */
.docs-file-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.docs-file-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
    border-color: #e2e8f0;
}
.docs-file-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.docs-file-icon { font-size: 30px; flex-shrink: 0; }
.docs-file-name {
    font-weight: 700;
    font-size: 14px;
    color: #0d1526;
    margin-bottom: 3px;
    word-break: break-word;
}
.docs-file-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.docs-file-desc {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}
.docs-file-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-doc-view {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.btn-doc-view:hover { background: #6B1440; }
.btn-doc-delete {
    background: #fef2f2;
    color: #e53935;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-doc-delete:hover { background: #e53935; color: #fff; border-color: #e53935; }

/* Carte document joueuse (lecture seule) */
.docs-file-card-joueuse {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s;
}
.docs-file-card-joueuse:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
.btn-doc-download {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.btn-doc-download:hover { background: #6B1440; }

/* ── État vide ── */
.docs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 20px;
    color: #94a3b8;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    border: 2px dashed #e2e8f0;
}
.docs-empty-icon { font-size: 56px; opacity: 0.3; margin-bottom: 14px; }
.docs-empty-text { font-size: 15px; font-weight: 600; color: #94a3b8; }
.docs-empty-sub { font-size: 13px; color: #cbd5e1; margin-top: 4px; }

/* ── Modal ── */
.docs-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.docs-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.2);
}
.docs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}
.docs-modal-title {
    font-size: 17px;
    font-weight: 800;
    color: #0d1526;
}
.docs-modal-close {
    background: #f1f5f9;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.docs-modal-close:hover { background: #e2e8f0; }
.docs-modal-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.docs-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Barlow', sans-serif;
    color: #0d1526;
    margin-bottom: 16px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.docs-modal-input:focus { border-color: #4D0B2B; outline: none; }
.docs-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.btn-modal-cancel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.btn-modal-cancel:hover { background: #f1f5f9; }
.btn-modal-confirm {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.btn-modal-confirm:hover { background: #6B1440; }

/* ── Responsive docs ── */
@media (max-width: 768px) {
    .docs-folder-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
    .docs-files-grid  { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════
   MODULE CENTRE MÉDICAL
════════════════════════════════════════════ */

/* ── Roster joueuses ── */
.cr-player-row {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    transition: box-shadow 0.15s;
}
.cr-player-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.09); }

.cr-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4D0B2B, #8B2E52);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.cr-avatar-lg { width: 52px; height: 52px; font-size: 18px; }

.cr-player-name {
    font-weight: 700;
    font-size: 15px;
    color: #0d1526;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cr-player-meta { font-size: 12px; color: #8892a4; margin-top: 3px; }

/* ── Badges statut ── */
.cr-badge {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-block;
}
.cr-badge-apte    { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.cr-badge-reserve { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.cr-badge-inapte  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.cr-badge-none    { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }

/* ── Boutons actions CR ── */
.cr-btn-new {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
    white-space: nowrap;
}
.cr-btn-new:hover { background: #6B1440; }

.cr-btn-history {
    background: #f1f5f9;
    color: #334155;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
    white-space: nowrap;
    margin-right: 8px;
}
.cr-btn-history:hover { background: #e2e8f0; }

.cr-btn-back {
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.cr-btn-back:hover { background: #f1f5f9; }

.cr-btn-save {
    background: #4D0B2B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
    margin-right: 12px;
}
.cr-btn-save:hover { background: #6B1440; }

/* ── Sections formulaire CR ── */
.cr-section {
    background: #fff;
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
}
.cr-section-title {
    font-size: 14px;
    font-weight: 800;
    color: #0d1526;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cr-section-sub {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

/* ── Historique CRs ── */
.cr-history-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid #4D0B2B;
    border-top: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.cr-history-date  { font-weight: 700; font-size: 14px; color: #0d1526; margin-right: 10px; }
.cr-history-type  { font-size: 13px; color: #64748b; margin-right: 10px; }
.cr-history-field { margin-bottom: 6px; font-size: 13px; }

/* ── Body map container ── */
.cr-bm-svg-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bm-tag-hint { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.cr-bm-tags  {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    min-height: 32px;
}
.btn-no-pain {
    background: #fef2f2;
    color: #e53935;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
    margin-top: 8px;
}
.btn-no-pain:hover { background: #e53935; color: #fff; }

/* ── Modal body map blessure ── */
.bm-modal-box {
    background: #0d1526;
    border-radius: 16px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.bm-modal-sub { color: #8892a4; font-size: 13px; margin-bottom: 14px; }
.bm-pain-opts { display: flex; flex-direction: column; gap: 8px; }
.bm-pain-btn {
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: #0d1526;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    transition: filter 0.15s;
}
.bm-pain-btn:hover { filter: brightness(0.95); }
.bm-pain-ico { font-size: 20px; flex-shrink: 0; }
.bm-btn-cancel {
    background: #1e293b;
    color: #8892a4;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
    font-family: 'Barlow', sans-serif;
    transition: background 0.15s;
}
.bm-btn-cancel:hover { background: #334155; }

/* Couleurs boutons blessure */
.bm-pain-btn.p1 { background: #f0fdf4; border: 2px solid #22c55e; }
.bm-pain-btn.p2 { background: #fff7ed; border: 2px solid #f97316; }
.bm-pain-btn.p3 { background: #fef2f2; border: 2px solid #e53935; }
.bm-pain-btn.p4 { background: #eff6ff; border: 2px solid #3b82f6; }
.bm-pain-btn.p5 { background: #f5f3ff; border: 2px solid #7c3aed; }
.bm-pain-btn.p6 { background: #fffbeb; border: 2px solid #f59e0b; }

/* ── En-tête joueuse formulaire ── */
.cr-form-player-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
}

/* ── PDF upload zone ── */
.cr-upload-zone {
    border: 2px dashed #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    background: #fafafa;
    transition: border-color 0.15s;
}
.cr-upload-zone:hover { border-color: #4D0B2B; }
.cr-pdf-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0d1526;
    padding: 4px 0;
}

/* ── Responsive médical ── */
@media (max-width: 768px) {
    .cr-player-row { flex-wrap: wrap; gap: 10px; }
    .cr-section     { padding: 16px; }
    .cr-btn-new, .cr-btn-history { font-size: 12px; padding: 6px 10px; }
}

/* ════════════════════════════════════════════
   PLANIFICATION : Colonne sticky gauche
   Force le background opaque au-dessus des dropdowns
════════════════════════════════════════════ */
.planif-sticky-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 50 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-clip: padding-box !important;
    box-shadow: 3px 0 8px rgba(0,0,0,0.10) !important;
    isolation: isolate;
}

/* Coin supérieur gauche (intersection sticky top + sticky left) */
.planif-sticky-corner {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Ensure dropdowns don't escape their cells */
.planif-grid-wrapper .Select,
.planif-grid-wrapper .Select__control,
.planif-grid-wrapper [class*="container"],
.planif-grid-wrapper [class*="control"] {
    position: relative;
    z-index: 0 !important;
}

/* Keep dropdown MENUS visible */
.planif-grid-wrapper .Select__menu,
.planif-grid-wrapper [class*="menu"] {
    z-index: 9999 !important;
}

/* ════════════════════════════════════════════
   RESPONSIVE ADDITIONS — Viziball v2
════════════════════════════════════════════ */

/* ── Toutes les tables : scroll horizontal sur mobile ── */
@media (max-width: 768px) {
    .page-body table,
    .page-body [style*="overflow"] { overflow-x: auto; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── PROFIL JOUEUSE ── */
@media (max-width: 900px) {
    /* Stats + RPE : empilés verticalement */
    #profil-stats-card { flex: 1 1 100% !important; }
    #profil-rpe-card   { flex: 1 1 100% !important; }
}

@media (max-width: 768px) {
    /* Navigation semaine : wrap sur 2 lignes */
    #profil-label-semaine { min-width: unset !important; font-size: 13px !important; }

    /* Agenda : scroll horizontal plutôt que 7 colonnes minuscules */
    #profil-agenda > div > div:last-child {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    #profil-agenda > div > div:last-child > div {
        min-width: 90px;
    }

    /* Vignette joueuse : cachée sur petit mobile (déjà dans header) */
    #profil-agenda + div { display: none; }
}

/* ── VUE D'ENSEMBLE ADMIN ── */
@media (max-width: 768px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-value { font-size: 24px; }
    .week-selector { width: 100%; }
}
@media (max-width: 480px) {
    .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-card { padding: 14px 10px; }
}

/* ── RÉCAP PRÉPA ── */
@media (max-width: 768px) {
    /* KPIs récap : 2 par ligne */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Tableau joueuses : scroll */
    div[style*="overflowX"] { overflow-x: auto; }
}

/* ── WELLNESS / RPE : sliders et grilles ── */
@media (max-width: 768px) {
    .ws-layout {
        grid-template-columns: 1fr !important;
    }
    .ws-score-col { position: static !important; }
}

/* ── MÉDICAL : body map + formulaire ── */
@media (max-width: 768px) {
    #medical-bm-svg-container {
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Champs date/type/auteur en colonne */
    div[style*="display: flex"][style*="flexWrap: wrap"] > div[style*="flex: 1"] {
        flex: 1 1 100% !important;
    }
}

/* ── CALENDRIER : toolbar responsive ── */
@media (max-width: 768px) {
    .cal-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .cal-toolbar-right { flex-wrap: wrap; gap: 4px; }
    .cal-toolbar-left  { flex-wrap: wrap; justify-content: center; }
    .cal-title { font-size: 14px !important; min-width: unset !important; }
    /* Vue semaine trop large : forcer vue jour */
    .fc .fc-col-header-cell-cushion { font-size: 11px; padding: 4px 2px; }
    .fc .fc-timegrid-slot-label { font-size: 10px; }
}

/* ── PLANIFICATION : scroll horizontal ── */
.planif-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── HEADER : user-info compact sur tablette ── */
@media (max-width: 1024px) {
    .user-name { font-size: 12px; }
    .main-header-title { font-size: 15px; }
}

/* ── SIDEBAR : fermeture auto au clic nav sur mobile ── */
@media (max-width: 768px) {
    .nav-item { font-size: 15px; padding: 11px 16px; }
}

/* ── LOGIN : responsive parfait ── */
@media (max-width: 480px) {
    .login-card { padding: 24px 18px 20px; border-radius: 12px; }
    .login-logo { height: 52px; }
}

/* ── SÉANCES / BIBLIOTHÈQUE / DATA-TESTS : grilles ── */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    div[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── PLAYER CARDS / SCOUTING ── */
@media (max-width: 768px) {
    .player-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   LOGIN — texte visible Safari iOS (backup login_fix.css)
════════════════════════════════════════════ */
.login-input,
#login-id,
#login-mdp {
    color: white !important;
    caret-color: white !important;
    -webkit-text-fill-color: white !important;
}
.login-input::placeholder,
#login-id::placeholder,
#login-mdp::placeholder {
    color: rgba(255,255,255,0.4) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
}
.login-input:-webkit-autofill,
#login-id:-webkit-autofill,
#login-mdp:-webkit-autofill {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #1a2540 inset !important;
}

/* ════════════════════════════════════════════
   WELLNESS — responsive mobile
════════════════════════════════════════════ */

/* Slider : forcer dans le container */
.ws-slider .rc-slider,
.ws-section .rc-slider {
    max-width: 100%;
    box-sizing: border-box;
}
.ws-section {
    overflow: hidden;
}

/* Steps : 3 colonnes sur mobile, 5 sur desktop */
.ws-steps-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .ws-steps-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    /* 5ème card centré seul */
    .ws-steps-row > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    /* Score card sous le formulaire */
    .ws-layout {
        grid-template-columns: 1fr !important;
    }
    .ws-score-col {
        position: static !important;
        order: -1; /* affiche le score en premier */
    }

    /* Heures sommeil : COUCHER + LEVER en colonne */
    .ws-section div[style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    /* Slider marks plus lisibles */
    .ws-slider .rc-slider-mark-text {
        font-size: 10px !important;
    }
}

@media (max-width: 768px) {
    .ws-steps-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .ws-steps-row > :last-child:nth-child(odd) {
        grid-column: unset;
        max-width: unset;
        margin: 0;
    }
    .ws-layout {
        grid-template-columns: 1fr !important;
    }
    .ws-score-col { position: static !important; }
}

/* Step card style */
.ws-step {
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 2px solid #e8eaf0;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 0;
}
.ws-step-icon    { font-size: 22px; margin-bottom: 4px; }
.ws-step-label   { font-size: 12px; font-weight: 600; line-height: 1.2; }
.ws-step-sublabel{ font-size: 10px; color: #8892a4; margin-top: 2px; }
.ws-section-title{ font-size: 12px; font-weight: 700; letter-spacing: 1px;
                   text-transform: uppercase; color: #0d1526;
                   margin-bottom: 10px; }

/* ════════════════════════════════════════════
   WELLNESS MOBILE — fix définitif (force !important)
════════════════════════════════════════════ */

/* Desktop : 5 colonnes */
.ws-steps-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

/* Tablet ≤768 : 3 colonnes */
@media (max-width: 768px) {
    .ws-steps-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile ≤480 : 2 colonnes */
@media (max-width: 480px) {
    .ws-steps-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Slider : forcer dans le conteneur */
    .ws-section {
        overflow-x: hidden !important;
        position: relative !important;
    }
    .ws-section .rc-slider {
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        box-sizing: border-box !important;
    }
    /* Score card au dessus sur mobile */
    .ws-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .ws-score-col {
        position: static !important;
        order: -1 !important;
        margin-bottom: 16px !important;
    }
    .ws-form-col { order: 1 !important; }
}

/* ── Profil agenda : scroll horizontal ── */
#profil-agenda .fc-ev-inner,
#profil-agenda > div > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── Admin : dropdowns RPE minutes ── */
.Select-menu-outer,
.Select__menu,
[class*="__menu"] {
    overflow: visible !important;
    z-index: 9999 !important;
}
.rc-slider-mark {
    overflow: visible !important;
}

/* ── Slider marks : pas de débordement ── */
@media (max-width: 600px) {
    .rc-slider-mark-text:last-child {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
    }
}

/* ════════════════════════════════════════════
   PROFIL — VUE JOUR MOBILE / VUE SEMAINE DESKTOP
════════════════════════════════════════════ */

/* Desktop : semaine visible, jour caché */
.profil-nav-day       { display: none !important; }
.profil-agenda-day-view { display: none !important; }
.profil-nav-week      { display: flex !important; }
.profil-agenda-week   { display: block !important; }

/* Mobile ≤ 640px : jour visible, semaine cachée */
@media (max-width: 640px) {
    .profil-nav-day         { display: block !important; }
    .profil-agenda-day-view { display: block !important; }
    .profil-nav-week        { display: none !important; }
    .profil-agenda-week     { display: none !important; }

    /* Padding réduit sur mobile */
    #profil-agenda,
    #profil-agenda-day { padding: 0; }
}

/* ════════════════════════════════════════════
   WELLNESS — 1 carte par ligne sur mobile
════════════════════════════════════════════ */

/* Force le reset complet sur mobile */
@media (max-width: 480px) {

    /* 1 carte par ligne — pleine largeur */
    .ws-steps-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .ws-step {
        width: 100% !important;
        min-height: 64px !important;
        padding: 14px 18px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
        border-radius: 14px !important;
    }
    .ws-step-icon    { font-size: 28px !important; flex-shrink: 0 !important; }
    .ws-step-label   { font-size: 16px !important; font-weight: 700 !important; }
    .ws-step-sublabel{ font-size: 12px !important; }

    /* Slider : contenu dans le container */
    .ws-section {
        overflow-x: hidden !important;
        padding: 16px !important;
    }
    .ws-section .rc-slider {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .rc-slider-mark {
        display: none !important;
    }
    /* Remplace marks par le chiffre dans le box */
    .ws-section-title {
        font-size: 13px !important;
    }

    /* COUCHER + LEVER : côte à côte mais dropdowns compacts */
    .ws-section div[style*="display:flex"],
    .ws-section div[style*="display: flex"] {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    /* Dropdowns heures/minutes plus petits */
    .time-scroller-label { font-size: 10px !important; }
    #ws-coucher-h, #ws-coucher-m,
    #ws-lever-h, #ws-lever-m {
        min-width: 56px !important;
        font-size: 13px !important;
    }

    /* Score card full width en haut */
    .ws-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .ws-score-col {
        position: static !important;
        order: -1 !important;
        width: 100% !important;
    }
    .score-card {
        text-align: center !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }
    .score-card-value {
        font-size: 48px !important;
    }
}

/* ════════════════════════════════════════════
   SIDEBAR — position fixed sur mobile (corrige la bande noire)
════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease !important;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .app-container {
        width: 100% !important;
    }
    /* Réduire le padding de la page sur mobile */
    .page-body {
        padding: 12px !important;
    }
}

/* ════════════════════════════════════════════
   CALENDRIER — desktop vs mobile view
════════════════════════════════════════════ */
/* Desktop/tablet : FullCalendar visible, vue mobile cachée */
.cal-fc-desktop  { display: block; }
#cal-mobile-view { display: none !important; }

/* Mobile ≤ 600px : vue mobile visible, FullCalendar caché */
@media (max-width: 600px) {
    .cal-fc-desktop  { display: none !important; }
    #cal-mobile-view { display: block !important; }
    /* Toolbar calendrier : colonnes sur mobile */
    .cal-toolbar { flex-direction: column !important; align-items: stretch !important; }
    .cal-toolbar-left, .cal-toolbar-right {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .cal-title { font-size: 15px !important; min-width: unset !important; text-align: center; }
}

/* ════════════════════════════════════════════
   WELLNESS — fix bande noire (overflow horizontal)
   Breakpoint 600px pour couvrir tous les iPhones
════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Conteneur principal : jamais de scroll horizontal */
    #wellness-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* Layout 2 colonnes → 1 colonne */
    .ws-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    .ws-form-col {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .ws-score-col {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        order: -1 !important;
    }
    /* Chaque section : contenue dans la largeur */
    .ws-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Slider : forcer à 100% */
    .ws-section .rc-slider,
    .ws-section .rc-slider-rail,
    .ws-section .rc-slider-track {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ════════════════════════════════════════════
   WELLNESS — COUCHER/LEVER dropdowns compacts
════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Container COUCHER + LEVER côte à côte sans overflow */
    .ws-section div[style*="display:flex"],
    .ws-section div[style*="display: flex"] {
        gap: 6px !important;
    }
    /* Chaque bloc COUCHER / LEVER prend 50% */
    .ws-section div[style*="flex:\"1\""],
    .ws-section div[style*="flex: 1"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    /* Dropdowns heure/min : taille fixe petite */
    #ws-coucher-h, #ws-coucher-m,
    #ws-lever-h,   #ws-lever-m {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 13px !important;
    }
    /* Label time scroller compact */
    .time-scroller-label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    /* Séparateur ":" */
    .time-scroller-sep {
        font-size: 16px !important;
        padding: 0 2px !important;
    }
}

/* ════════════════════════════════════════════
   FIXES MOBILE v1.3
   ════════════════════════════════════════════ */

/* ── FIX 1 : LOGIN — inputs lisibles sur iOS ──────────────────────
   Problème A : font-size < 16px → iOS zoome sur le champ au focus
   Problème B : color CSS ignoré par WebKit sur champ password
                → -webkit-text-fill-color obligatoire
   Problème C : autofill iOS met un fond jaune, texte disparaît   */
@media (max-width: 768px) {
    .login-card {
        padding: 24px 18px 20px;
        max-width: calc(100vw - 32px);
    }
    .login-input {
        font-size: 16px !important;
        -webkit-text-fill-color: #e8eaf0 !important;
        color: #e8eaf0 !important;
        background: rgba(255,255,255,0.12) !important;
        caret-color: #e8eaf0;
    }
    .login-input::placeholder {
        -webkit-text-fill-color: #6b7280 !important;
        opacity: 1 !important;
    }
    /* Autofill iOS — empêche le fond jaune, garde le dark theme */
    .login-input:-webkit-autofill,
    .login-input:-webkit-autofill:hover,
    .login-input:-webkit-autofill:focus {
        -webkit-text-fill-color: #e8eaf0 !important;
        -webkit-box-shadow: 0 0 0 30px #3A1526 inset !important;
        caret-color: #e8eaf0;
        transition: background-color 9999s ease-in-out 0s;
    }
}

/* ── FIX 2 : SIDEBAR — bouton Déconnexion toujours visible ────────
   Problème : 100vh sur iOS inclut la barre d'adresse du navigateur
   → le footer de la sidebar passe sous la barre du bas et disparaît.
   Solution : 100dvh (viewport dynamique, sans les barres browser) +
              footer sticky + safe-area-inset pour la home bar iOS   */
@media (max-width: 768px) {
    .sidebar {
        height: 100dvh !important;               /* Chrome/Safari modernes  */
        height: -webkit-fill-available !important; /* iOS Safari < 15.4     */
    }
    .sidebar-footer {
        position: sticky;
        bottom: 0;
        background: var(--bordeaux-side);
        z-index: 2;
        /* Espace sous le bouton pour éviter la home bar iOS */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255,255,255,0.08);
    }
}

/* ── FIX 3 : ZOOM — empêche l'overflow horizontal ─────────────────
   Certains composants (stats, graphes) dépassent 100vw sur iPhone
   et forcent un dézoom automatique.                                 */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .page-body {
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* ── FIX COMPLÉMENTAIRE LOGIN — dots password plus visibles sur iOS ──
   Le champ password iOS utilise son propre rendu des "•" dots.
   On augmente le contraste fond/texte et on force la couleur
   même sur les champs remplis par le gestionnaire de mdp iOS.    */
@media (max-width: 768px) {
    .login-input[type="password"] {
        background: rgba(255,255,255,0.18) !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        letter-spacing: 2px;
    }
    /* Sélection de texte dans les champs — fond bleu Viziball */
    .login-input::selection {
        background: rgba(77, 11, 43, 0.5);
        color: #ffffff;
    }
    .login-input::-webkit-selection {
        background: rgba(77, 11, 43, 0.5);
        color: #ffffff;
    }
}