:root{--bg-dark:#0f172a;--bg-card:#1e293b;--bg-sidebar:#0b1120;--text-main:#f8fafc;--text-muted:#94a3b8;--accent-gold:#f59e0b;--accent-blue:#3b82f6;--border:#334155;--danger:#ef4444}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{display:flex;height:100vh;overflow:hidden;color:var(--text-main);background:linear-gradient(-45deg,#0f172a,#1e293b,#0b1120,#172554);background-size:400% 400%;animation:gradientBG 15s ease infinite}
@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.mt-2{margin-top:8px}.mt-3{margin-top:15px}.mb-3{margin-bottom:15px}.block{display:block}.text-center{text-align:center}.font-bold{font-weight:bold}
.sidebar{width:250px;background:var(--bg-sidebar);padding:25px;border-right:1px solid var(--border);flex-shrink:0;transition:width .3s ease;position:relative;z-index:50;overflow:visible}
.sidebar.collapsed{width:80px;padding:25px 10px}
.sidebar.collapsed .sidebar-text{display:none}
.sidebar.collapsed .logo{justify-content:center;font-size:1.5rem}
.sidebar.collapsed .nav-btn{justify-content:center}
.sidebar.collapsed .nav-btn i{margin:0;font-size:1.2rem}
.toggle-sidebar-btn{position:absolute;top:30px;right:-15px;width:30px;height:30px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;transition:.2s}
.toggle-sidebar-btn:hover{background:var(--accent-gold);color:black;border-color:var(--accent-gold)}
.logo{font-weight:900;color:var(--accent-gold);margin-bottom:40px;display:flex;gap:10px;font-size:1.2rem;align-items:center}
.nav-btn{display:flex;align-items:center;gap:12px;padding:12px;color:var(--text-muted);text-decoration:none;border-radius:8px;margin-bottom:5px;transition:.2s;cursor:pointer;white-space:nowrap}
.nav-btn.active,.nav-btn:hover{background:rgba(59,130,246,0.1);color:white}
.nav-btn.active{border-left:3px solid var(--accent-gold)}
.content{flex:1;padding:40px;overflow-y:auto;position:relative}
header{display:flex;justify-content:space-between;margin-bottom:30px;align-items:center}
.header-title-group{display:flex;align-items:center;gap:15px}
.clickable-header{cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s ease}
.clickable-header:hover{color:var(--accent-gold);transform:translateX(5px)}
.card{background:rgba(30,41,59,0.8);backdrop-filter:blur(10px);padding:25px;border-radius:16px;border:1px solid var(--border);margin-bottom:20px}
.dashboard-grid{display:grid;grid-template-columns:1.2fr 1.2fr;gap:25px}
.event-card-container{padding:25px 25px 15px}
.agenda-list{display:flex;flex-direction:column;gap:15px;margin-top:15px}
.agenda-item{display:flex;gap:15px;align-items:center;background:rgba(0,0,0,0.15);border:1px solid var(--border);border-radius:12px;padding:12px;transition:.2s;position:relative}
.agenda-item:hover{border-color:var(--accent-gold);transform:translateX(3px);background:rgba(245,158,11,0.05)}
.agenda-date{display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:8px;min-width:65px;height:65px;flex-shrink:0;padding:5px}
.agenda-date .day{font-size:1.3rem;font-weight:900;color:var(--accent-gold);line-height:1}
.agenda-date .month{font-size:.65rem;text-transform:uppercase;font-weight:700;letter-spacing:1px;margin-top:3px}
.agenda-details{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}
.agenda-details h4{font-size:1rem;margin:3px 0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:40px}
.time-text{font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.agenda-actions{display:flex;gap:8px;position:absolute;right:12px;top:12px;opacity:0;transition:.2s}
.agenda-item:hover .agenda-actions{opacity:1}
.btn-mini-action{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:4px;transition:.2s}
.btn-mini-action:hover{color:white;transform:scale(1.2)}
.btn-mini-action.edit:hover{color:var(--accent-blue)}
.btn-mini-action.delete:hover{color:var(--danger)}
.type-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;padding:3px 6px;border-radius:4px;display:inline-block;width:max-content}
.tag-scrim{background:#451a03;color:#fb923c}
.tag-flex{background:#1e3a8a;color:#60a5fa}
.tag-entrainement{background:#064e3b;color:#34d399}
.tag-reunion{background:#4c1d95;color:#a78bfa}
.card-roster-mini{margin-bottom:25px}
.mini-category-title{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:10px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.mini-member{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03);padding:8px;border-radius:8px}
.border-staff-mini{border-left:2px solid var(--accent-gold)}
.avatar-xs{width:34px;height:34px;border-radius:6px;object-fit:cover}
.p-name{display:block;font-weight:bold;font-size:.85rem}
.p-sub{font-size:.7rem;color:var(--text-muted);text-transform:capitalize}
.stats-row{display:flex;gap:15px}
.stat-item{flex:1;text-align:center;padding:15px;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid var(--border)}
.stat-item .v{display:block;font-size:1.3rem;font-weight:800;color:var(--accent-gold)}
.stat-item .l{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th,.data-table td{padding:12px 15px;border-bottom:1px solid var(--border)}
.data-table th{color:var(--text-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:1px}
.data-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.roster-category-title{font-size:.8rem;color:var(--text-muted);letter-spacing:2px;margin:20px 0 15px 5px;text-transform:uppercase;font-weight:800}
.roster-list{display:flex;flex-direction:column;gap:12px}
.member-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 25px;display:flex;align-items:center;justify-content:space-between;transition:.2s}
.member-bar:hover{border-color:var(--accent-blue);transform:translateX(5px)}
.staff-highlight{border-left:4px solid var(--accent-gold);background:rgba(245,158,11,0.02)}
.member-main{display:flex;align-items:center;gap:15px;flex:1.2}
.member-img{width:55px;height:55px;border-radius:10px;object-fit:cover;border:2px solid var(--border)}
.member-pseudo{font-size:1.1rem;font-weight:800}
.member-badges{display:flex;gap:8px;margin-top:4px}
.badge-role{padding:3px 10px;border-radius:4px;font-size:.65rem;font-weight:800;text-transform:uppercase;background:#334155;color:white;display:inline-block}
.badge-role.top{background:#450a0a;color:#f87171}
.badge-role.jungle,.badge-role.jgl{background:#064e3b;color:#34d399}
.badge-role.mid{background:#4c1d95;color:#a78bfa}
.badge-role.adc,.badge-role.bot{background:#1e3a8a;color:#60a5fa}
.badge-role.supp,.badge-role.support{background:#713f12;color:#fbbf24}
.badge-role.staff{background:transparent;border:1px solid var(--accent-gold);color:var(--accent-gold)}
.badge-rank{padding:3px 10px;border-radius:4px;font-size:.65rem;font-weight:700;border:1px solid rgba(59,130,246,0.3);color:var(--accent-blue)}
.member-champs{display:flex;gap:6px;flex:1;justify-content:center}
.champ-circle{width:35px;height:35px;border-radius:50%;border:2px solid var(--border);transition:.2s}
.champ-circle:hover{transform:scale(1.2);border-color:var(--accent-gold);z-index:2}
.member-actions{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end}
.btn-opgg{background:#2563eb;color:white;text-decoration:none;padding:6px 14px;border-radius:6px;font-size:.75rem;font-weight:800;transition:.2s}
.btn-opgg:hover{background:#1d4ed8}
.btn-icon{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:5px;transition:.2s}
.text-danger{color:var(--danger)}
.text-blue{color:var(--accent-blue)}
.text-gold{color:var(--accent-gold)}
.btn-icon:hover{transform:scale(1.15);filter:brightness(1.2)}
.form-sort{display:flex;flex-direction:column;margin-left:10px}
.btn-sort{color:var(--text-muted);padding:0;font-size:.8rem}
.btn-sort:hover{color:var(--text-main);transform:scale(1.2)}
.actions-divider{width:1px;height:30px;background:var(--border);margin:0 5px}
.cinematic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:25px;margin-top:20px}
.cinematic-card{background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.4)}
.cinematic-card:hover{transform:translateY(-5px);border-color:var(--accent-gold);box-shadow:0 12px 25px rgba(245,158,11,0.2)}
.cinematic-card video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.btn-primary{background:var(--accent-gold);color:black;border:none;padding:10px 20px;border-radius:8px;font-weight:bold;cursor:pointer;transition:.2s}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;backdrop-filter:blur(4px)}
.modal-content{background:var(--bg-card);width:420px;margin:80px auto;padding:30px;border-radius:16px;border:1px solid var(--border);position:relative}
input:not([type="checkbox"]),select,textarea{width:100%;padding:12px;margin:10px 0;background:#000;border:1px solid var(--border);color:white;border-radius:8px;resize:vertical}
.close{position:absolute;right:20px;top:15px;cursor:pointer;font-size:1.5rem;color:var(--text-muted)}
.page-section{display:none}
.page-section.active{display:block;animation:fadeIn .4s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.roster-mini-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mini-list{display:flex;flex-direction:column;gap:8px}
.mini-member{width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.stats-row.big .stat-item{padding:20px}
.stats-row.big .stat-item .v{font-size:2rem}
.champ-tiers{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.champ-tiers .champ-circle{width:30px;height:30px}
.data-table .btn-icon{padding:5px;font-size:.9rem}
.modal-content select,.modal-content input[type="text"],.modal-content textarea{margin-bottom:10px}
.stat-input{width:70px;padding:5px;margin:5px auto;display:block;background:#000;border:1px solid var(--border);color:white;border-radius:4px;text-align:center}
.stat-input-small{width:60px;padding:4px;background:#000;border:1px solid var(--border);color:white;border-radius:4px;text-align:center}
.champ-pool-layout{display:flex;gap:20px}
.champ-library{flex:0 0 250px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:15px;max-height:80vh;overflow-y:auto}
.champ-library h3{color:var(--accent-gold);margin-bottom:10px}
.search-input{width:100%;padding:8px;margin-bottom:10px;background:rgba(0,0,0,0.3);border:1px solid var(--border);color:white;border-radius:4px}
.library-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;}
.library-champ{display:flex;align-items:center;gap:8px;padding:5px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:4px;cursor:grab;transition:.2s}
.library-champ:hover{background:rgba(245,158,11,0.1);border-color:var(--accent-gold)}
.library-champ .champ-circle{width:15px!important;height:15px!important }
.tier-lists{flex:1}
.player-tier-row{background:rgba(0,0,0,0.2);border-radius:8px;padding:15px;margin-bottom:20px;border:1px solid var(--border)}
.player-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.player-header .avatar-sm{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-gold)}
.player-header h3{color:var(--accent-gold);margin:0}
.tier-columns{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
.tier-category{flex:0 0 180px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:6px;padding:10px}
.tier-header{font-weight:bold;text-align:center;padding:5px;background:var(--accent-blue);color:white;border-radius:4px;margin-bottom:10px}
.sortable-list{min-height:100px;list-style:none;padding:0;margin:0}
.champ-item{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.3);padding:5px 8px;margin-bottom:5px;border-radius:4px;cursor:grab;border:1px solid var(--border);transition:.2s}
.champ-item:hover{background:rgba(245,158,11,0.1);border-color:var(--accent-gold)}
.champ-item .champ-circle{width:30px;height:30px}
.availability-grid{display:grid;grid-template-columns:150px repeat(21,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:15px}
.grid-header,.grid-subheader,.grid-row{display:contents}
.grid-header>div,.grid-subheader>div{background:rgba(0,0,0,0.3);color:var(--text-muted);font-weight:bold;text-align:center;padding:8px 2px;font-size:.7rem;text-transform:uppercase}
.grid-header .member-name{grid-column:span 1}
.grid-subheader .member-name{grid-column:span 1}
.day-col{grid-column:span 3}
.period-col{background:rgba(0,0,0,0.2)}
.grid-row>div{background:rgba(255,255,255,0.02);padding:4px;display:flex;align-items:center;justify-content:center}
.grid-row .member-name{justify-content:flex-start;padding:8px;gap:8px;background:rgba(0,0,0,0.2)}
.period-check{position:relative}
.period-check input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.period-check .check-label{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:8px 0;border-radius:4px;cursor:pointer;background:rgba(0,0,0,0.1);transition:.2s;font-size:1.2rem}
.period-check .check-label.morning:hover{background:#fbbf24;color:black}
.period-check .check-label.afternoon:hover{background:#f59e0b;color:black}
.period-check .check-label.evening:hover{background:#2563eb;color:white}
.period-check input:checked+.check-label{background:var(--accent-gold);color:black;box-shadow:0 0 5px var(--accent-gold)}
.period-check input:checked+.check-label.morning{background:#fbbf24}
.period-check input:checked+.check-label.afternoon{background:#f59e0b}
.period-check input:checked+.check-label.evening{background:#2563eb}
.stats-summary{margin-bottom:20px}
.big-stats{display:flex;justify-content:space-around;margin-top:15px;flex-wrap:wrap;gap:15px}
.stat-block{text-align:center;background:rgba(0,0,0,0.2);padding:15px 20px;border-radius:8px;border:1px solid var(--border);min-width:120px}
.stat-block .value{display:block;font-size:2rem;font-weight:bold;color:var(--accent-gold)}
.stat-block .label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.text-green{color:#10b981;font-weight:bold}
.text-danger{color:#ef4444;font-weight:bold}
.badge{background:var(--accent-blue);color:white;padding:2px 6px;border-radius:4px;font-size:.7rem;margin-right:4px;white-space:nowrap}
.cinematic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:15px}
.cinematic-card{background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.cinematic-card video{width:100%;display:block;aspect-ratio:16/9}
.tier-table{flex:1;overflow-x:auto}
.table-wrapper{max-width:100%;overflow-x:auto}
.champ-pool-table{width:100%;border-collapse:collapse;background:rgba(0,0,0,0.2);border:1px solid var(--border)}
.champ-pool-table th,.champ-pool-table td{border:1px solid var(--border);padding:10px;vertical-align:top}
.champ-pool-table th{background:rgba(0,0,0,0.3);color:var(--accent-gold);text-align:center}
.champ-pool-table .player-header{display:flex;flex-direction:column;align-items:center;gap:5px}
.champ-pool-table .avatar-sm{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-gold)}
.champ-pool-table .category-label{font-weight:bold;color:var(--accent-blue);text-align:center;background:rgba(0,0,0,0.2)}
.champ-pool-table .sortable-list{min-height:60px;list-style:none;padding:0;margin:0}
.champ-pool-table .champ-item{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.05);padding:4px;margin-bottom:4px;border-radius:4px;cursor:grab;border:1px solid var(--border)}
.champ-pool-table .champ-item .champ-circle{width:30px;height:30px}
.staff-badge{display:inline-block;background:#ef4444;color:white;font-size:.6rem;padding:2px 6px;border-radius:4px;margin-left:5px;vertical-align:middle}
.champ-item{position:relative}
.remove-champ{position:absolute;right:2px;top:2px;color:var(--text-muted);font-size:.8rem;cursor:pointer;opacity:0;transition:opacity .2s}
.champ-item:hover .remove-champ{opacity:1}
.remove-champ:hover{color:var(--danger)}
.vod-card{background:var(--bg-card)}
.vod-info{padding:10px;border-top:1px solid var(--border)}
.vod-date{font-size:.8rem;color:var(--accent-gold);margin-bottom:5px}
.vod-notes{font-size:.8rem;color:var(--text-main);margin-bottom:5px;max-height:60px;overflow-y:auto}
.vod-actions{display:flex;gap:8px;justify-content:flex-end}
.flash-message{padding:12px 20px;margin-bottom:20px;border-radius:8px;font-weight:bold;animation:fadeOut 5s forwards}
.flash-message.success{background:#10b981;color:white}
.flash-message.error{background:#ef4444;color:white}
@keyframes fadeOut{0%{opacity:1}70%{opacity:1}100%{opacity:0;display:none}}
.btn-mini-action.done{color:#10b981}
.btn-mini-action.done:hover{color:#059669;transform:scale(1.2)}
.login-page{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:linear-gradient(-45deg,#0f172a,#1e293b,#0b1120,#172554);background-size:400% 400%;animation:gradientBG 15s ease infinite}
.login-container{background:rgba(30,41,59,0.9);backdrop-filter:blur(10px);padding:40px;border-radius:16px;border:1px solid var(--border);width:100%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.login-container h1{color:var(--accent-gold);margin-bottom:30px;text-align:center}
.login-container form{display:flex;flex-direction:column}
.login-container input{margin-bottom:15px;padding:12px;background:rgba(0,0,0,0.3);border:1px solid var(--border);color:white;border-radius:6px}
.login-container input:focus{outline:none;border-color:var(--accent-gold)}
.login-container .btn-primary{width:100%;margin-top:10px}
.login-container p{text-align:center;margin-top:20px}
.login-container p a{color:var(--accent-blue);text-decoration:none}
.login-container p a:hover{text-decoration:underline}
.alert{padding:10px;border-radius:6px;margin-bottom:20px;text-align:center}
.alert.error{background:rgba(239,68,68,0.2);border:1px solid #ef4444;color:#ef4444}
.alert.success{background:rgba(16,185,129,0.2);border:1px solid #10b981;color:#10b981}
.library-champ .champ-item{transform: scale(0.5);}
/* Forcer la taille des champions dans la bibliothèque */
.library-champ .champ-circle {
    width: 25px !important;
    height: 25px !important;
}
/* Ajustement pour les graphiques */
.charts-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.charts-row .card {
    flex: 1;
    min-width: 300px;
}
/* Ajustement de la taille des graphiques dans les pages stats */
.charts-row .card canvas {
    max-height: 250px;
    width: auto;
}
.stats-summary .card canvas {
    max-height: 200px;
}

/* ================== RESPONSIVE (MOBILE) ================== */
@media (max-width: 768px) {
    body {
        flex-direction: column;
        height: auto;
        overflow: auto;
    }
    .sidebar {
        width: 100%;
        padding: 15px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .sidebar.collapsed {
        width: 100%;
        padding: 15px;
    }
    .toggle-sidebar-btn {
        display: none;
    }
    .sidebar .nav-btn {
        display: inline-block;
        margin: 5px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    .content {
        padding: 20px;
        overflow: visible;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .availability-grid {
        display: block;
        overflow-x: auto;
    }
    .grid-header, .grid-subheader, .grid-row {
        display: table-row;
    }
    .grid-header > div, .grid-subheader > div, .grid-row > div {
        display: table-cell;
        padding: 8px;
    }
    .agenda-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .agenda-date {
        margin-bottom: 10px;
    }
    .agenda-actions {
        position: static;
        opacity: 1;
        margin-top: 10px;
        justify-content: flex-end;
        width: 100%;
    }
    .member-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .member-champs {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .member-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .cinematic-grid {
        grid-template-columns: 1fr;
    }
    .modal-content {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }
    .stats-summary .big-stats {
        flex-wrap: wrap;
    }
    .stat-block {
        flex: 0 0 calc(33% - 10px);
    }
}
/* Défilement horizontal */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pour que la grille des disponibilités ne soit pas coupée sur mobile */
.availability-grid {
    min-width: 800px;
}

/* Optionnel : éviter le retour à la ligne dans les tableaux sur mobile */
@media (max-width: 768px) {
    .data-table th, .data-table td {
        white-space: nowrap;
    }
}
/* Défilement horizontal */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pour que la grille des disponibilités ne soit pas coupée sur mobile */
.availability-grid {
    min-width: 800px;
}

/* Responsive général */
@media (max-width: 768px) {
    .data-table th, .data-table td {
        white-space: nowrap;
    }
    .availability-grid {
        min-width: 800px;
    }
    .table-responsive {
        overflow-x: auto;
    }
}

/* Surlignage des colonnes communes */
.common-header {
    background: rgba(16, 185, 129, 0.3);
    font-weight: bold;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #10b981;
}
.period-check.common-slot {
    background-color: rgba(16, 185, 129, 0.2);
    border-radius: 4px;
    box-shadow: 0 0 0 1px #10b981;
}
/* Défilement horizontal pour tous les tableaux */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Pour la grille des disponibilités, forcer une largeur suffisante */
.availability-grid {
    min-width: 100%;
    width: max-content;
}

/* Sur mobile, éviter que les cellules ne se réduisent trop */
@media (max-width: 768px) {
    .availability-grid {
        min-width: 1200px; /* ou plus selon le nombre de colonnes */
    }
    .data-table {
        min-width: 800px;
    }
    .champ-pool-table {
        min-width: 800px;
    }
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.availability-grid {
    min-width: 800px;
}
@media (max-width: 768px) {
    .data-table th, .data-table td {
        white-space: nowrap;
    }
}