@import url("https://use.typekit.net/flr4sxl.css");

/* ================================= */
/* VARIABLES CSS */
/* ================================= */
:root {
  --main-bg-color: #0e2f59;
  --secondary-bg-color: #f5e100;
  --primary-color: #4caf50;
  --disable-bg-color: #e2e2e2;
  --complete-bg-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-gray: #f8f9fa;
  --border-color: #dee2e6;
  --text-color: #333;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  --background-dark: #1a1a1a;
  --border-radius: 18px;
  --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  --transition: all 0.3s ease;
}

/* ================================= */
/* RESET ET STYLES DE BASE */
/* ================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "neulis-sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fbfbfb;
    margin-top: 0px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 32px;
}

/* ================================= */
/* HEADER ET NAVIGATION */
/* ================================= */
.header {
    background: var(--main-bg-color);
    color: white;
    padding: 1rem 0;
    box-shadow: var(--box-shadow);
    display: flow-root;
    margin-bottom: 35px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

header h1 {
    float: left;
    margin: 0;
    text-align: left;
}

header img {
    float: left;
    margin-right: 20px;
    max-height: 50px;
}

header a {
    text-decoration: none;
    color: white;
}

header a:visited {
    color: white;
}

.mobile-close-btn {
    display: none;
}

/* Navigation */
nav {
    float: right;
    display: flex;
    gap: 15px;
    align-items: center;
    top: 3px;
    position: relative;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

nav a:hover {
    background: rgba(255,255,255,0.1);
}

nav .admin-link {
    background: #7289da;
}

nav .admin-link:hover {
    background: #5b6eae;
}

/* Menu utilisateur déroulant */
.nav-user-menu {
    position: relative;
    display: inline-block;
}

.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.nav-user-trigger:hover {
    background-color: #061529;
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: var(--transition);
}

.nav-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    min-width: 180px;
    padding: 10px 0;
    display: none;
    z-index: 1001;
}

.nav-user-menu:hover .nav-user-dropdown {
    display: block;
}

.nav-user-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-color) !important;
    transition: var(--transition);
    white-space: nowrap;
}

.dropdown-link:hover {
    background-color: var(--light-gray);
}

.logout {
    color: var(--danger-color) !important;
}

.admin-link {
    background-color: #7289da;
    color: white !important;
    margin: 5px 10px;
    border-radius: var(--border-radius);
    text-align: center;
}

.admin-link:hover {
    background-color: #5b6eae;
}

/* ================================= */
/* BOUTONS */
/* ================================= */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-primary {
    background: var(--main-bg-color);
    color: white;
}

.btn-primary:hover {
    background: #5b6eae;
}

.btn-secondary {
    background: var(--text-muted);
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

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

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

.btn-warning {
    background: var(--warning-color);
    color: var(--text-color);
}

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

.btn-disable {
    background: var(--disable-bg-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn i {
    margin-right: 8px;
}

.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================================= */
/* PAGES ET GRILLES */
/* ================================= */
.pages-grid, .pages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.page-card, .page-preview {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.page-card:hover, .page-card-link:hover .page-preview {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.page-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.page-title {
    color: var(--text-color);
    margin: 0 0 15px 0;
    font-size: 1.4em;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-card-link:hover .page-title {
    color: var(--main-bg-color);
}

.page-excerpt {
    color: var(--text-muted);
    margin: 15px 0;
    line-height: 1.6;
}

.page-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: var(--text-muted);
}

/* Page thumbnail */
.page-thumbnail {
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
}

.page-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 180px; /* Hauteur minimale pour desktop */
}

/* Indicateurs visuels */
.scheduled-indicator {
    color: var(--warning-color);
    font-size: 1.1em;
    flex-shrink: 0;
}

.scheduled-message {
    font-style: italic;
    color: var(--text-muted);
    margin: 5px 0;
}

/* ================================= */
/* PAGE DÉTAILLÉE */
/* ================================= */
.container-page {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 28px;
}

.page-detail {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 0;
}

.page-fixed {
    position: sticky;
    top: 140px;
    height: fit-content;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px;
    margin-bottom: 20px;
}

.page-content {
    line-height: 1.8;
}

.page-content h1, .page-content h2, .page-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--main-bg-color);
}

.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child {
    margin-top: 0;
}

/* ================================= */
/* EXERCICES ET RESSOURCES */
/* ================================= */
.exercise-section, .resource-section {
    background: white;
    margin-bottom: 25px;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.exercise-header, .resource-header {
    margin-bottom: 15px;
}

.exercise-title, .resource-title {
    color: var(--main-bg-color);
    margin-bottom: 10px;
}

.exercise-content, .resource-content {
    line-height: 1.7;
}

.exercise-locked, .resource-locked {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

.exercise-locked i, .resource-locked i {
    margin-right: 8px;
    color: var(--warning-color);
}

/* ================================= */
/* FORMULAIRES */
/* ================================= */
.form-group {
    margin-bottom: 20px;
}

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

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 14px;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--main-bg-color);
    box-shadow: 0 0 0 3px rgba(14, 47, 89, 0.1);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* ================================= */
/* GRILLES ET COLONNES */
/* ================================= */
.grid-container {
    display: grid;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

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

.grid-column {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
}

/* ================================= */
/* VIDÉOS */
/* ================================= */
.video-container, .youtube-video-container {
    max-width: 100%;
    margin: 20px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ================================= */
/* MESSAGES ET ALERTES */
/* ================================= */
.welcome {
    text-align: center;
    padding: 50px 20px;
    background: white;
    border-radius: var(--border-radius);
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.welcome h2 {
    margin-bottom: 20px;
    color: var(--main-bg-color);
}

.welcome p {
    margin: 20px 0;
    color: var(--text-muted);
}

.alert {
    padding: 15px;
    margin: 15px 0;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.alert-error, .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* ================================= */
/* ADMIN TOOLBAR */
/* ================================= */
.admin-toolbar {
    /* position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning-color); */
    color: var(--text-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
}

.admin-toolbar select {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
}

.impersonation-status {
    font-weight: bold;
}

/* ================================= */
/* TABLES ADMIN */
/* ================================= */
.admin-container {
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin: 20px 0;
}

.admin-table-container {
    overflow-x: auto;
    margin: 20px 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

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

.admin-table th {
    background-color: var(--light-gray);
    font-weight: 600;
    color: var(--main-bg-color);
}

.admin-table tr:hover {
    background-color: var(--light-gray);
}

/* ================================= */
/* RESPONSIVE DESIGN */
/* ================================= */

/* Tablettes (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        max-width: 95%;
        padding: 0 15px!important;
    }
    
    .container-page {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .page-fixed {
        position: static;
        order: -1;
    }
    
    .admin-toolbar {
        padding: 8px 15px;
        gap: 10px;
    }
    
    .admin-toolbar select {
        max-width: 200px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== BOUTON FLOTTANT - MASQUÉ PAR DÉFAUT ===== */
/* Bouton flottant et modal - cachés sur desktop */
.floating-action-btn,
.floating-modal {
    display: none;
}

/* Mobiles (jusqu'à 768px) */
@media (max-width: 768px) {
    body {
        margin-top: 80px;
        font-size: 14px;
        overflow-x: hidden !important;
    }
    
    .container {
        padding: 0 !important;
        margin-bottom: 20px;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Header responsive */
    .header {
        padding: 0.5rem 0;
    }
    
    .header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }
    
    header h1 {
        float: left; 
        font-size: 1.2rem;
        text-align: left;
    }
    
    header img {
        float: none;
        margin-right: 10px;
        max-height: 40px;
    }
    
    nav {
        float: none;
        margin-top: 0;
    }
    
    /* Admin toolbar MASQUÉ sur mobile */
    .admin-toolbar {
        display: none !important;
    }
    
    /* Pages grid responsive - sans marge pour admin toolbar */
    .pages-grid, .pages {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px; /* Réduit car pas d'admin toolbar */
    }
    
    /* Style carte mobile - FORCER le layout vertical */
    .page-card, .page-preview {
        margin-bottom: 15px;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
        /* Annuler le grid du desktop */
        grid-template-columns: none !important;
        column-gap: 0 !important;
    }
    
    /* Image en pleine largeur sur mobile - TOUJOURS EN PREMIER */
    .page-thumbnail {
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        order: -1 !important; /* Force l'image en premier même si elle est après dans le HTML */
    }
    
    .page-thumbnail img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* TOUT le contenu texte va en dessous */
    .page-title,
    .page-excerpt, 
    .page-meta,
    .page-date,
    .scheduled-message,
    .admin-info {
        padding-left: 15px !important;
        padding-right: 15px !important;
        order: 1 !important; /* Tout le texte après l'image */
    }
    
    /* Premier élément texte avec padding-top */
    .page-title {
        padding-top: 15px !important;
        font-size: 1.2rem !important;
        margin: 0 0 10px 0 !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    
    /* Dernier élément texte avec padding-bottom */
    .page-meta {
        padding-bottom: 15px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
        margin-top: 15px !important;
        padding-top: 25px !important; /* 15px du contenu + 10px extra */
        border-top: 1px solid var(--border-color) !important;
        font-size: 0.8rem !important;
    }
    
    /* Texte d'aperçu responsive */
    .page-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
        color: var(--text-muted) !important;
    }
    
    .page-meta span {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    /* Container page mobile - Optimisé */
    .container-page {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Page detail mobile - Style carte */
    .page-detail {
        padding: 20px 15px;
        margin: 0 0 20px 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Page fixed - MASQUÉ sur mobile et remplacé par bouton flottant */
    .page-fixed {
        display: none !important;
    }
    
    /* Bouton flottant en bas à gauche - MOBILE SEULEMENT */
    .mobile-info-btn {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        width: 60px !important;
        height: 60px !important;
        background: var(--main-bg-color) !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 24px !important;
        transition: var(--transition) !important;
    }
    
    /* Nouveau bouton flottant moderne */
    .floating-action-btn {
        position: fixed;
        bottom: 30px;
        left: 30px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--primary-color), #66bb6a);
        border-radius: 50%;
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        border: none;
        cursor: pointer;
        z-index: 1050;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
    }
    
    .floating-action-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5);
    }
    
    .floating-action-btn:active {
        transform: scale(0.95);
    }
    
    .floating-action-btn svg {
        width: 24px;
        height: 24px;
        stroke-width: 2;
    }
    
    .mobile-info-btn:hover {
        background: #5b6eae !important;
        transform: scale(1.1) !important;
    }
    
    .mobile-info-btn:active {
        transform: scale(0.95) !important;
    }
    
    /* Modal plein écran - MOBILE */
    .mobile-info-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.9) !important;
        z-index: 9999 !important;
        display: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-info-modal.active {
        display: block !important;
    }
    
    /* Modal moderne pour le bouton flottant */
    .floating-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.85);
        z-index: 1060;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }
    
    .floating-modal.active {
        opacity: 1;
        visibility: visible;
    }
    
    .modal-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--background-dark);
        border-radius: 20px 20px 0 0;
        padding: 1.5rem;
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .floating-modal.active .modal-content {
        transform: translateY(0);
    }
    
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal-header h3 {
        margin: 0;
        color: var(--text-light);
        font-size: 1.3rem;
        font-weight: 600;
    }
    
    .modal-close {
        background: none;
        border: none;
        color: var(--text-light);
        font-size: 2rem;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .modal-close:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(90deg);
    }
    
    .modal-body {
        padding: 0;
    }
    
    /* Contenu du modal */
    .mobile-info-content {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Header du modal */
    .mobile-info-header {
        background: var(--main-bg-color) !important;
        color: white !important;
        padding: 15px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .mobile-info-header h2 {
        margin: 0 !important;
        font-size: 1.2rem !important;
    }
    
    .mobile-info-close {
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 28px !important;
        cursor: pointer !important;
        padding: 5px !important;
        line-height: 1 !important;
    }
    
    /* Body du modal */
    .mobile-info-body {
        padding: 20px !important;
        flex-grow: 1 !important;
    }
    
    /* Sections dans le modal */
    .mobile-info-section {
        margin-bottom: 30px !important;
        padding-bottom: 30px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .mobile-info-section:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .mobile-info-section h3 {
        color: var(--main-bg-color) !important;
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid var(--main-bg-color) !important;
    }
    
    .mobile-info-section ul {
        list-style: none !important;
        padding: 0 !important;
    }
    
    .mobile-info-section li {
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--light-gray) !important;
    }
    
    .mobile-info-section li:last-child {
        border-bottom: none !important;
    }
    
    .mobile-info-section a {
        color: var(--main-bg-color) !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }
    
    .mobile-info-section a:hover {
        text-decoration: underline !important;
    }
    
    /* Zoom meeting dans le modal */
    .zoom-meeting-info {
        background: var(--light-gray) !important;
        padding: 15px !important;
        border-radius: var(--border-radius) !important;
        margin: 15px 0 !important;
    }
    
    .zoom-meeting-info p {
        margin: 5px 0 !important;
        font-size: 14px !important;
    }
    
    .zoom-meeting-info strong {
        color: var(--main-bg-color) !important;
    }
    
    .zoom-meeting-info .btn {
        margin-top: 10px !important;
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* Page header mobile */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .page-header h1 {
        font-size: 1.5rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Page content mobile - Typographie optimisée */
    .page-content {
        line-height: 1.6 !important;
        font-size: 15px !important;
    }
    
    .page-content h1 {
        font-size: 1.5rem !important;
        margin-top: 1.5em !important;
        margin-bottom: 0.8em !important;
        line-height: 1.3 !important;
    }
    
    .page-content h2 {
        font-size: 1.3rem !important;
        margin-top: 1.3em !important;
        margin-bottom: 0.7em !important;
        line-height: 1.3 !important;
    }
    
    .page-content h3 {
        font-size: 1.2rem !important;
        margin-top: 1.2em !important;
        margin-bottom: 0.6em !important;
        line-height: 1.3 !important;
    }
    
    .page-content h1:first-child,
    .page-content h2:first-child,
    .page-content h3:first-child {
        margin-top: 0 !important;
    }
    
    /* Paragraphes et listes */
    .page-content p {
        margin-bottom: 1em !important;
        line-height: 1.6 !important;
    }
    
    .page-content ul, .page-content ol {
        padding-left: 20px !important;
        margin-bottom: 1em !important;
    }
    
    .page-content li {
        margin-bottom: 0.5em !important;
        line-height: 1.5 !important;
    }
    
    /* Images dans le contenu */
    .page-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: var(--border-radius) !important;
        margin: 15px 0 !important;
    }
    
    /* Tableaux responsive */
    .page-content table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
    
    .page-content table th,
    .page-content table td {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    /* Boutons responsive */
    .btn {
        padding: 10px 15px;
        font-size: 14px;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Formulaires responsive */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Évite le zoom sur iOS */
        padding: 12px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    /* Admin container responsive - sans marge pour admin toolbar */
    .admin-container {
        padding: 10px;
        margin-top: 20px; /* Réduit car pas d'admin toolbar */
    }
    
    /* Tables responsive */
    .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        min-width: 600px;
        font-size: 12px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    /* Grilles responsive */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-container {
        gap: 15px;
    }
    
    .grid-column {
        padding: 15px;
    }
    
    /* Exercices et ressources responsive - DANS LE CADRE */
    .exercise-section, .resource-section {
        margin: 0 0 20px 0 !important;
        padding: 20px 15px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        border-bottom: 1px solid var(--border-color) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .exercise-header, .resource-header {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid var(--main-bg-color) !important;
    }
    
    .exercise-title, .resource-title {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
        color: var(--main-bg-color) !important;
        line-height: 1.3 !important;
    }
    
    .exercise-content, .resource-content {
        line-height: 1.6 !important;
        font-size: 15px !important;
    }
    
    .exercise-content h1, .exercise-content h2, .exercise-content h3,
    .resource-content h1, .resource-content h2, .resource-content h3 {
        font-size: 1.2rem !important;
        margin-top: 1.5em !important;
        margin-bottom: 0.8em !important;
        color: var(--main-bg-color) !important;
    }
    
    .exercise-content h1:first-child, .exercise-content h2:first-child, .exercise-content h3:first-child,
    .resource-content h1:first-child, .resource-content h2:first-child, .resource-content h3:first-child {
        margin-top: 0 !important;
    }
    
    .exercise-content p, .resource-content p {
        margin-bottom: 1em !important;
        line-height: 1.6 !important;
    }
    
    .exercise-content ul, .exercise-content ol,
    .resource-content ul, .resource-content ol {
        padding-left: 20px !important;
        margin-bottom: 1em !important;
    }
    
    .exercise-content li, .resource-content li {
        margin-bottom: 0.5em !important;
        line-height: 1.5 !important;
    }
    
    /* Messages de verrouillage */
    .exercise-locked, .resource-locked {
        text-align: center !important;
        padding: 25px 15px !important;
        color: var(--text-muted) !important;
        font-style: italic !important;
        background: var(--light-gray) !important;
        border-radius: var(--border-radius) !important;
        margin: 15px 0 !important;
    }
    
    .exercise-locked i, .resource-locked i {
        display: block !important;
        font-size: 2rem !important;
        margin-bottom: 10px !important;
        color: var(--warning-color) !important;
    }
    
    /* Vidéos responsive - DANS LE CADRE */
    .video-container, .youtube-video-container {
        margin: 20px 0 !important;
        /* border-radius: 0 !important; */
        overflow: hidden !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .video-wrapper {
        position: relative !important;
        padding-bottom: 56.25% !important; /* Ratio 16:9 */
        height: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    .video-wrapper iframe,
    .video-wrapper video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
    
    /* Footer de page responsive - DANS LE CADRE */
    .page-footer {
        margin: 30px 0 20px 0 !important;
        padding: 20px 15px !important;
        background: var(--light-gray) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
        border-top: 1px solid var(--border-color) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .page-footer .btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        margin: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Messages et alertes mobile - DANS LE CADRE */
    .welcome {
        margin: 0 0 10px 0 !important;
        padding: 30px 20px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .welcome h2 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    .welcome p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin: 15px 0 !important;
    }
    
    .alert {
        margin: 0 0 10px 0 !important;
        padding: 15px !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        line-height: 1.5 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Navigation breadcrumb mobile */
    .breadcrumb {
        margin: 10px !important;
        padding: 10px 15px !important;
        background: white !important;
        border-radius: var(--border-radius) !important;
        font-size: 14px !important;
    }
    
    .breadcrumb a {
        word-break: break-word !important;
    }
    
    /* Navigation mobile - Ajoutée */
    .nav-user-menu {
        position: relative !important;
    }
    
    .nav-user-trigger {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
    
    .nav-user-dropdown {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        border-radius: 0 !important;
        min-width: auto !important;
        padding: 0 !important;
        z-index: 9999 !important;
    }
    
    .dropdown-link {
        padding: 15px 20px !important;
        border-bottom: 1px solid var(--border-color) !important;
        font-size: 16px !important;
        display: block !important;
    }
    
    .dropdown-link:last-child {
        border-bottom: none !important;
    }
}

/* Très petits mobiles (jusqu'à 480px) */
@media (max-width: 480px) {
    body {
        margin-top: 70px;
        font-size: 13px;
    }
    
    .container {
        padding: 0 8px!important;
    }
    
    .header {
        padding: 0.3rem 0;
    }
    
    header h1 {
        font-size: 1rem;
        text-align: left;
    }
    
    header img {
        max-height: 35px;
        margin-right: 8px;
    }
    
    /* Admin toolbar MASQUÉ sur très petits mobiles aussi */
    .admin-toolbar {
        display: none !important;
    }
    
    .pages-grid, .pages {
        margin-top: 15px; /* Pas d'admin toolbar */
    }
    
    .admin-container {
        margin-top: 15px; /* Pas d'admin toolbar */
        padding: 8px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px;
    }
    
    .admin-table {
        font-size: 11px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 6px 4px;
    }
    
    .page-detail {
        padding: 10px;
    }
    
    .exercise-section, .resource-section {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .page-title {
        font-size: 1rem;
    }
}

/* Mode paysage mobile */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        margin-top: 60px;
    }
    
    .header {
        padding: 0.3rem 0;
    }
    
    /* Admin toolbar MASQUÉ aussi en mode paysage */
    .admin-toolbar {
        display: none !important;
    }
    
    .pages-grid, .pages {
        margin-top: 20px; /* Pas d'admin toolbar */
    }
    
    .admin-container {
        margin-top: 20px; /* Pas d'admin toolbar */
    }
}

/* ================================= */
/* BOUTON MOBILE INFO - MASQUÉ SUR DESKTOP */
/* ================================= */
.mobile-info-btn,
.mobile-info-modal {
    display: none;
}

/* ================================= */
/* UTILITAIRES */
/* ================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* ================================= */
/* STYLES SPÉCIFIQUES NON RESPONSIVE */
/* ================================= */
.top {
    color: var(--main-bg-color) !important;
    margin-left: -18px !important;
    padding-bottom: 8px !important;
    display: block;
    font-weight: 500;
}

.admin-info {
    display: block;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Bulk operations */
.bulk-actions {
    margin: 20px 0;
    padding: 15px;
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.bulk-selected-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    max-width: 300px;
}

.bulk-multiselect {
    min-width: 250px;
}

.bulk-dropdown-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px!important;
    margin-bottom: 32px;
}

.header {
    background: #0e2f59;
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flow-root!important;
    margin-bottom: 35px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

header h1 {
    float: left;
    text-align: left;
}

header img {
    float: left;
    margin-right: 20px;
}

header a {
text-decoration: none;
}

header a:visited {
color: white;
}

/* === Styles pour le menu utilisateur déroulant === */
.nav-toggle {
    display: none;
}

.nav-user-menu {
    position: relative;
    display: inline-block;
}

.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.nav-user-trigger:hover {
    background-color: #061529;
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

/* Dropdown menu */
.nav-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    min-width: 180px;
    padding: 10px 0;
    display: none;
    z-index: 1001;
}

/* Afficher le dropdown au survol */
.nav-user-menu:hover .nav-user-dropdown {
    display: block;
}

/* Rotation de la flèche au survol */
.nav-user-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333!important;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.logout {
    color: red!important;
}

.dropdown-link:hover {
    background-color: #f5f5f5;
}

.admin-link {
    background-color: #7289da;
    color: white !important;
    margin: 5px 10px;
    border-radius: 4px;
    text-align: center;
}

.admin-link:hover {
    background-color: #5b6eae;
}

/* === Styles pour mobile === */
@media (max-width: 768px) {
    .header-container {
        position: relative;
    }

    .nav-toggle {
        display: flex;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 5px 5px rgba(0,0,0,0.1);
        flex-direction: column;
        padding: 15px;
        gap: 10px;
    }

    .header-nav.active {
        display: flex;
    }

    /* Sur mobile, le menu utilisateur devient vertical */
    .nav-user-menu {
        width: 100%;
    }

    .nav-user-trigger {
        justify-content: space-between;
        width: 100%;
    }

    .nav-user-dropdown {
        position: static;
        box-shadow: none;
        border-top: 1px solid #eee;
        border-radius: 0;
        display: none;
        margin-top: 10px;
    }

    /* Sur mobile, on utilise un clic plutôt qu'un hover */
    .nav-user-menu.active .nav-user-dropdown {
        display: block;
    }

    .nav-user-menu.active .dropdown-arrow {
        transform: rotate(180deg);
    }

    .dropdown-link {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .dropdown-link:last-child {
        border-bottom: none;
    }

    .admin-link {
        margin: 5px 0;
    }
}

nav {
    float: right;
    display: flex;
    gap: 15px;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background 0.3s;
}

nav a:hover {
    background: rgba(255,255,255,0.1);
}

nav .admin-link {
    background: #7289da;
}

nav .admin-link:hover {
    background: #5b6eae;
}

.top {
    color: var(--main-bg-color) !important;
    margin-left: -18px !important;
    padding-bottom: 8px !important;
    display: block;
    font-weight: 500;
}

.welcome {
    text-align: center;
    padding: 50px 0;
    background: white;
    border-radius: 10px;
    margin: 20px 0;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
}

.welcome p {
    margin: 20px 0px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
    font-weight: 500!important;
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none!important;
}

.btn-primary {
    background: var(--main-bg-color);
    color: white!important;
}

.btn-primary:hover {
    background: #5b6eae;
}

.btn-disable {
    background: var(--complete-bg-color);
    color: white;
}

.btn i {
    margin-right: 8px!important;
}

.pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.page-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.page-card:hover {
    transform: translateY(-5px);
}

.page-card h3 {
    color: #2c2f33;
    margin-bottom: 15px;
    border-bottom: 2px solid #7289da;
    padding-bottom: 10px;
}

/* === Styles corrigés pour le cadenas sur les pages programmées === */

/* Conteneur du titre pour gérer le layout */
.page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permet de passer à la ligne si le titre est très long */
    gap: 8px; /* Espace entre le cadenas et le texte */
    margin: 0 0 10px 0;
    color: #2c2f33;
    font-size: 1.5em;
    line-height: 1.2;
}

/* Style de l'indicateur de page programmée (cadenas) */
.scheduled-indicator {
    color: #ffc107; /* Jaune/orange */
    font-size: 1.1em;
    flex-shrink: 0; /* Empêche l'icône d'être réduite */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pour s'assurer que le texte du titre prend l'espace restant */
.page-title-text {
    flex-grow: 1;
}

/* Message pour les pages programmées */
.scheduled-message {
    font-style: italic;
    color: #6c757d; /* Gris */
    margin: 5px 0;
}

/* Style pour le message d'information aux admins */
.page-content .alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin: 20px 0;
}

.page-content .alert-info i {
    margin-right: 8px;
}

/* Style pour le message d'erreur sur la page détaillée */
.page-content .alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin: 20px 0;
}

.page-content .alert-warning i {
    margin-right: 8px;
}

.scheduled-indicator i {
    padding: 0px 0px;
    transform: scaleX(1.35);
}

.admin-info {
    display: block;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9em;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.btn-submit {
    background: #4CAF50;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn-submit:hover {
    background: #45a049;
}

.btn-danger {
    background: #f44336;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
}

.btn-danger:hover {
    background: #da190b;
}

.alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background: #2c2f33;
    color: white;
}

tr:hover {
    background: #f5f5f5;
}

/* Styles pour le contenu des pages */
.page-content {
    line-height: 1.6;
    color: #333;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin: 20px 0 10px 0;
    color: #2c2f33;
}

.page-content h1 { font-size: 2em; border-bottom: 3px solid #7289da; padding-bottom: 10px; }
.page-content h2 { font-size: 1.5em; font-weight: 600; /* border-bottom: 2px solid #7289da; */ padding-bottom: 0px; margin-top: 28px; }
.page-content h3 { font-size: 1.3em; }
.page-content h4 { font-size: 1.2em; }
.page-content h5 { font-size: 1.1em; }
.page-content h6 { font-size: 1em; font-weight: bold; }

.page-content p {
    margin: 15px 0;
    text-align: justify;
    color: grey;
}

.page-content a {
    color: #7289da;
    text-decoration: none;
}

.page-content a:hover {
    text-decoration: underline;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 15px 0;
}

.page-content ul,
.page-content ol {
    margin: 15px 0;
    padding-left: 30px;
}

.page-content li {
    margin: 5px 0;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.page-content th,
.page-content td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.page-content th {
    background: #2c2f33;
    color: white;
    font-weight: bold;
}

.page-content tr:nth-child(even) {
    background: #f9f9f9;
}

.page-content blockquote {
    border-left: 4px solid #7289da;
    margin: 15px 0;
    padding: 10px 20px;
    background: #f8f9fa;
    font-style: italic;
}

blockquote em {
    font-style: normal!important;
}

.page-content code {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.page-content pre {
    background: #2c2f33;
    color: white;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 15px 0;
}

.page-content hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 25px 0;
}

/* Conteneur pour la miniature */
.page-thumbnail {
    margin-bottom: 0px; /* Espace entre l'image et le texte */
    border-radius: 8px; /* Arrondit les coins de l'image */
    overflow: hidden; /* Masque les parties débordantes de l'image */
    flex-shrink: 0; /* Empêche l'image de rétrécir */
    width: 100%;
    height: auto;
}

/* Image miniature */
.page-thumbnail img {
    width: 100%; /* Prend toute la largeur du conteneur */
    height: auto; /* Hauteur automatique pour conserver les proportions */
    display: block; /* Empêche les espaces indésirables sous l'image */
    object-fit: cover; /* (Optionnel) Couvre le conteneur en conservant les proportions, utile si tu fixes une hauteur */
    /* Si tu veux une hauteur fixe, décommente les lignes ci-dessous et commente height: auto; */
    /*
    height: 200px; 
    object-fit: cover;
    */
}

/* Styles pour les colonnes */
.grid-container {
    display: grid;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-column {
    padding: 20px;
    border: 1px solid #f4f4f4;
    border-radius: 8px;
    background: transparent;
}

.grid-column h1,
.grid-column h2,
.grid-column h3,
.grid-column h4,
.grid-column h5,
.grid-column h6 {
    margin-top: 0;
}

.youtube-video-container  {
            max-width: 100%;
            height: auto!important;
            border-radius: 18px!important;
            aspect-ratio: 16 / 9;
        }

/* Responsive pour les colonnes */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-container {
        gap: 15px;
    }
    
    .grid-column {
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .pages-grid {
        grid-template-columns: 1fr;
    }
    
    nav {
        float: none;
        margin-top: 10px;
    }
    
    header {
        text-align: center;
    }
    
    header h1 {
        float: left;
        text-align: left;
    }
}

/* Styles pour la liste des pages */
.pages-list {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    align-items: stretch;
}

/* Lien qui englobe toute la carte */
.page-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    align-items: stretch;
}

.page-preview {
    background: white;
    padding: 25px;
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #7289da; */
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
}

.page-card-link:hover .page-preview {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-left-color: #5b6eae;
}

.page-title {
    color: #2c2f33;
    margin: 0 0 15px 0;
    font-size: 1.4em;
    font-weight: bold;
    transition: color 0.3s;
    font-weight: 600;
}

.page-card-link:hover .page-title {
    color: var(--main-bg-color);
}

.page-excerpt {
    color: #666;
    margin: 15px 0;
    line-height: 1.6;
}

.page-date {
    color: #999;
    font-style: italic;
}

/* Styles pour la page détaillée */
.page-detail {
    background: white;
    padding: 30px;
    border-radius: 10px;
    /* box-shadow: 0 2px 15px rgba(0,0,0,0.1); */
    margin: 0;
}

.page-fixed {
    position: fixed;
    height: fit-content;
    margin: auto;
    right: calc((100vw - 1200px) / 2 + 28px - 280px);
    width: calc((1200px - 30%) / 2 + 28px);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 28px;
}

.page-fixed h2 {
    margin-bottom: 18px;
}

.container-page {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 28px;
}

.page-header {
    border-bottom: 0px solid #eee;
    margin-bottom: 0px;
    display: flex !important;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 8px 0px;
}

.page-header h1 {
    color: #242424;
    margin: 0 0 10px 0;
    font-size: 2.2em;
    font-weight: 600;
}

.page-meta {
    color: #666;
}

.page-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Conteneur pour les infos Zoom */
.zoom-meeting-container {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}

.zoom-meeting-block {
    padding: 20px;
}

.zoom-meeting-block h2 {
    margin-bottom: 18px!important;
}

.zoom-details {
margin-bottom: 18px;

}
/* === Styles pour le Sommaire (Table of Contents - TOC) === */

/* Conteneur pour le sommaire */
.toc-container {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-toc {
/*     background-color: #f8f9fa;
    border: 1px solid #e9ecef; */
    border-radius: 0px;
    padding: 0px;
    margin-bottom: 0;
    font-size: 0.9rem;
    display: block!important;
    float: none!important;
}

.page-toc h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #495057;
}

#toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#toc-list li {
    margin-bottom: 8px;
    list-style: none;
    text-indent: -1em;
}

#toc-list a {
    text-decoration: none;
    color: var(--main-bg-color); /* Couleur de lien standard */
    transition: color 0.2s ease;
}

#toc-list a:hover,
#toc-list a:focus {
    color: #0056b3; /* Couleur de lien au survol */
    text-decoration: underline;
}

/* Pour que les puces soient incluses dans le flux du texte */
#toc-list ul,
#toc-list ol {
    list-style-position: inside!important;
    padding-left: 0!important;
}

/* Style pour les ancres (optionnel) */
/* Ajoute un peu d'espace en haut lorsqu'on clique sur une ancre */
.page-content h2[id],
.page-content h3[id],
.page-content h4[id],
.page-content h5[id],
.page-content h6[id],
*[id="replay"],
*[id="ressource"],
*[id="exercice"] {
    scroll-margin-top: 180px; /* Ajuste à la hauteur de ton header fixe */
}

/* === Styles pour le groupe de boutons spéciaux dans le sommaire === */

/* Conteneur du groupe de boutons */
.toc-item-group {
    margin-top: 15px; /* Espace avant le groupe */
    padding-top: 15px;
    border-top: 1px solid #dee2e6; /* Ligne de séparation optionnelle */
}

/* Conteneur flex pour aligner les boutons */
.toc-button-group {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si l'espace est insuffisant */
    gap: 10px; /* Espace entre les boutons */
    align-items: center; /* Alignement vertical */
}

/* Style de base pour les boutons groupés */
.toc-grouped-button {
    display: inline-flex; /* Permet d'aligner l'icône et le texte */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 12px; /* Padding plus petit pour les boutons */
    /* border-radius: 20px; /* Bordures arrondies */
    font-size: 0.85rem; /* Taille de police un peu plus petite */
    font-weight: normal; /* Pas de gras par défaut */
    transition: all 0.2s ease;
    border: 1px solid transparent; /* Bordure transparente par défaut pour éviter le saut */
    white-space: nowrap; /* Empêche le texte de se casser */
}

.toc-grouped-button:hover,
.toc-grouped-button:focus {
    text-decoration: none!important;
    transform: translateY(-2px); /* Léger effet de soulèvement */
}

.toc-grouped-button i {
    margin-right: 12px;
    font-size: 1rem;
    /* width: 100%; */
    margin-left: 32px;
}

/* Styles spécifiques pour chaque type de bouton */
.toc-grouped-button.toc-item-replay {
    background-color: var(--main-bg-color); /* Fond vert clair */
    color: var(--secondary-bg-color)!important; /* Texte vert */
}

.toc-grouped-button.toc-item-replay:hover,
.toc-grouped-button.toc-item-replay:focus {
    color: #fff!important; /* Texte vert foncé */
}

.toc-grouped-button.toc-item-ressource {
    background-color: var(--main-bg-color); /* Fond bleu clair */
    color: var(--secondary-bg-color)!important; /* Texte bleu */
}

.toc-grouped-button.toc-item-ressource:hover,
.toc-grouped-button.toc-item-ressource:focus {
    color: #fff!important; /* Texte bleu foncé */
}

.toc-grouped-button.toc-item-exercice {
    background-color: var(--main-bg-color); /* Fond jaune clair */
    color: var(--secondary-bg-color)!important; /* Texte jaune/orange */
}

.toc-grouped-button.toc-item-exercice:hover,
.toc-grouped-button.toc-item-exercice:focus {
    color: #fff!important; /* Texte jaune/orange foncé */
}

/* === Responsive === */
@media (max-width: 768px) {
    .toc-button-group {
        flex-direction: column; /* Boutons en colonne sur mobile */
        align-items: stretch; /* Boutons prennent toute la largeur */
        gap: 8px; /* Espace réduit */
    }

    .toc-grouped-button {
        justify-content: flex-start; /* Texte aligné à gauche */
        width: 100%; /* Boutons prennent toute la largeur */
        padding: 8px 15px; /* Padding ajusté */
    }
}

/* Responsive */
@media (max-width: 768px) {
    .page-detail {
        padding: 20px;
    }
    
    .page-header h1 {
        font-size: 1.8em;
    }
    
    .page-preview {
        padding: 20px;
    }
    
    .page-card-link {
        margin-bottom: 15px;
    }
}

/* Styles pour la sélection des rôles */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.role-checkbox {
    padding: 12px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-checkbox input[type="checkbox"] {
    transform: scale(1.3);
}

.role-checkbox label {
    margin: 0;
    cursor: pointer;
    font-weight: bold;
}

.role-managed {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

/* Responsive pour les rôles */
@media (max-width: 768px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }
    
    .role-checkbox {
        padding: 10px;
    }
}

/* Styles pour les checkboxes stylisés */
.roles-multiselect {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background: #fafafa;
}

.select-all-container {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.select-all-container label {
    font-weight: bold;
    cursor: pointer;
}

.roles-grid-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.role-checkbox-styled {
    position: relative;
}

.role-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.role-checkbox-label {
    display: block;
    padding: 12px 15px;
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.role-checkbox-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-color: #7289da;
}

.role-checkbox-input:checked + .role-checkbox-label {
    background: #e8f0fe;
    border-color: #7289da;
    box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
}

.role-name {
    display: block;
    margin-bottom: 3px;
}

.role-managed-badge {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .roles-grid-checkboxes {
        grid-template-columns: 1fr;
    }
}

/* Styles pour le multiselect personnalisé */
.custom-multiselect {
    position: relative;
    width: 100%;
}

/* Zone des rôles sélectionnés */
.selected-roles {
    min-height: 40px;
    padding: 8px;
    border: 2px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: white;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.selected-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 14px;
    border-left: 3px solid #7289da;
}

.remove-role {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #ff4757;
}

.remove-role:hover {
    color: #ff6b81;
}

/* Bouton dropdown */
.multiselect-dropdown-btn {
    width: 100%;
    padding: 12px 15px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    text-align: left;
}

.multiselect-dropdown-btn:hover {
    border-color: #7289da;
}

.dropdown-arrow {
    transition: transform 0.3s;
}

.multiselect-dropdown-btn:hover .dropdown-arrow {
    transform: translateY(2px);
}

/* Dropdown */
.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
    max-height: 300px;
    flex-direction: column;
}

.multiselect-dropdown.show {
    display: flex;
}

/* Recherche */
.dropdown-search {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.search-input:focus {
    outline: none;
    border-color: #7289da;
    box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
}

/* Actions */
.dropdown-actions {
    display: flex;
    gap: 5px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.btn-select-all,
.btn-deselect-all {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.btn-select-all:hover,
.btn-deselect-all:hover {
    background: #e9ecef;
    border-color: #7289da;
}

/* Options */
.dropdown-options {
    flex: 1;
    overflow-y: auto;
    max-height: 200px;
}

.dropdown-option {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f8f9fa;
}

.dropdown-option:hover {
    background: #f8f9fa;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.role-color-indicator {
    font-size: 18px;
}

.role-name {
    flex: 1;
}

.role-managed {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.no-roles {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* === Styles pour le Drag & Drop === */

/* Style de base pour les lignes du tableau */
.pages-table tbody tr {
    cursor: move; /* Change le curseur pour indiquer qu'on peut déplacer */
    transition: background-color 0.2s ease, opacity 0.2s ease;
    position: relative; /* Important pour le positionnement des bordures indicatrices */
}

/* Style au survol d'une ligne */
.pages-table tbody tr:hover {
    background-color: #f5f5f5; /* Fond au survol */
}

/* Style pendant le glissement de l'élément */
.pages-table tbody tr.dragging {
    opacity: 0.6; /* Rendre l'élément semi-transparent */
    background-color: #e3f2fd; /* Fond bleu clair pendant le drag */
}

/* Style indicateur visuel au-dessus de la ligne cible */
.drag-over-above {
    border-top: 2px solid #007bff !important; /* Ligne bleue en haut */
}

/* Style indicateur visuel en dessous de la ligne cible */
.drag-over-below {
    border-bottom: 2px solid #007bff !important; /* Ligne bleue en bas */
}

/* (Optionnel) Style pour un feedback visuel après sauvegarde réussie */
.pages-table.save-success {
    background-color: #d4edda; /* Fond vert très clair */
    transition: background-color 0.3s ease;
}

/* Pour s'assurer que les badges de rôle ne prennent pas toute la largeur */
.role-badge {
    display: inline-block;
    margin: 2px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Responsive */
@media (max-width: 768px) {
    .multiselect-dropdown {
        position: fixed;
        top: 50%;
        left: 5%;
        right: 5%;
        max-height: 70vh;
    }
    
    .dropdown-options {
        max-height: calc(70vh - 150px);
    }
}

/* Styles pour la toolbar de pages */
.pages-toolbar {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.toolbar-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

.filter-select,
.search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.filter-select:focus,
.search-input:focus {
    outline: none;
    border-color: #7289da;
    box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
}

.search-input {
    min-width: 200px;
}

/* Styles pour le tableau des pages */
.pages-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pages-table th,
.pages-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.pages-table th {
    background: #2c2f33;
    color: white;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.checkbox-header {
    width: 50px;
}

.pages-table th:first-child,
.pages-table td:first-child {
    padding-left: 20px;
}

.pages-table th:last-child,
.pages-table td:last-child {
    padding-right: 20px;
}

.page-row:hover {
    background: #f8f9fa;
}

.page-row:hover td {
    background: #f8f9fa;
}

/* Badges de rôles */
.role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    margin: 2px;
    border-left: 3px solid #7289da;
    background: #f8f9fa;
}

.role-badge.public {
    border-left: 3px solid #4CAF50;
    background: #e8f5e8;
    color: #2e7d32;
}

.role-badge.unknown {
    border-left: 3px solid #999;
    background: #f5f5f5;
    color: #666;
}

/* Boutons */
.btn-small {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #5a6268;
}

/* Checkbox header */
.checkbox-header {
    text-align: center;
}

#selectAllCheckbox {
    transform: scale(1.3);
    cursor: pointer;
}

.page-checkbox {
    transform: scale(1.2);
    cursor: pointer;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 50px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.empty-state p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .pages-toolbar {
        padding: 15px;
    }
    
    .toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bulk-actions {
        justify-content: center;
    }
    
    .toolbar-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        justify-content: space-between;
    }
    
    .filter-select,
    .search-input {
        flex: 1;
        min-width: 0;
    }
    
    .pages-table {
        font-size: 14px;
    }
    
    .pages-table th,
    .pages-table td {
        padding: 10px 8px;
    }
    
    .role-badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .pages-table th:not(:first-child):not(:last-child),
    .pages-table td:not(:first-child):not(:last-child) {
        display: none;
    }
    
    .pages-table th:first-child,
    .pages-table td:first-child,
    .pages-table th:last-child,
    .pages-table td:last-child {
        display: table-cell;
    }
    
    .search-input {
        min-width: 150px;
    }
}

/* Styles pour le sélecteur de rôles dans les actions de masse */
.roles-multiselect-small {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    min-width: 150px;
}

.roles-multiselect-small:focus {
    outline: none;
    border-color: #7289da;
    box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
}

.roles-multiselect-small option {
    padding: 4px;
}

.roles-multiselect-small option:checked {
    background: #7289da linear-gradient(0deg, #7289da 0%, #7289da 100%);
    color: white;
}

/* Amélioration de l'affichage des actions de masse */
.bulk-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 768px) {
    .bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .roles-multiselect-small {
        min-width: auto;
    }
}

/* Styles pour le multiselect dans les actions de masse */
.bulk-multiselect {
    position: relative;
    min-width: 200px;
}

.bulk-dropdown-btn {
    width: 100%;
    min-width: 200px;
    padding: 8px 12px;
    font-size: 14px;
}

.bulk-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 300px;
}

#visibilitySelector {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .bulk-multiselect {
        min-width: 150px;
    }
    
    .bulk-dropdown-btn {
        min-width: 150px;
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Styles pour l'affichage des rôles sélectionnés dans les actions de masse */
.bulk-selected-roles {
    min-height: 35px;
    padding: 5px;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: white;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    max-width: 300px;
}

.bulk-multiselect {
    min-width: 250px;
}

.bulk-dropdown-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .bulk-selected-roles {
        max-width: 200px;
        min-height: 30px;
    }
    
    .bulk-multiselect {
        min-width: 200px;
    }
}

/* ================================= */
/* RESPONSIVE DESIGN COMPLET */
/* ================================= */

/* Tablettes (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        max-width: 95%;
        padding: 0 15px!important;
    }
    
    /* Admin toolbar responsive */
    .admin-toolbar {
        padding: 8px 15px !important;
        gap: 10px !important;
    }
    
    .admin-toolbar select {
        max-width: 200px;
    }
    
    /* Formulaires admin */
    .admin-container {
        padding: 15px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Tables admin */
    .admin-table {
        font-size: 14px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px;
    }
}

/* Mobiles (jusqu'à 768px) */
@media (max-width: 768px) {
    body {
        margin-top: 80px;
        font-size: 14px;
    }
    
    .container {
        max-width: 100%;
        padding: 0 10px!important;
        margin-bottom: 8px;
        margin-top: 8px;
    }
    
    /* Header responsive */
    .header {
        padding: 0.5rem 0;
        position: fixed;
        top: 0;
    }
    
    .header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    header h1 {
        float: left; 
        font-size: 1.2rem;
        margin: 0;
        text-align: left;
    }
    
    header img {
        float: left;
        margin-right: 10px;
        max-height: 40px;
    }
    
    /* Navigation responsive */
    .nav-user-menu {
        position: relative;
    }
    
    .nav-user-trigger {
        padding: 6px 10px;
        font-size: 14px;
    }
    
    /* Admin toolbar mobile */
    .admin-toolbar {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 10px 15px !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        z-index: 998 !important;
    }
    
    .admin-toolbar select,
    .admin-toolbar .impersonation-status {
        width: 100%;
        font-size: 14px;
    }

    #impersonation-bar {
        display: none!important;
    }

    
    /* Pages grid responsive */
    .pages {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 120px; /* Espace pour admin toolbar mobile */
    }
    
    .page-card {
        margin-bottom: 15px;
    }
    
    .page-card h3 {
        font-size: 1.1rem;
    }
    
    .page-card p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .page-meta {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    .page-meta span {
        font-size: 0.8rem;
    }
    
    /* Boutons responsive */
    .btn {
        padding: 10px 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Formulaires responsive */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Évite le zoom sur iOS */
        padding: 12px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Admin container responsive */
    .admin-container {
        padding: 10px;
        margin-top: 120px;
    }
    
    /* Tables responsive */
    .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        min-width: 600px;
        font-size: 12px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 6px 4px;
        white-space: nowrap;
    }
    
    /* Page detail responsive */
    .page-detail {
        padding: 15px;
    }
    
    .page-detail h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .page-content {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Exercices et ressources responsive */
    .exercise-section,
    .resource-section {
        margin-bottom: 20px;
        padding: 15px;
    }
    
    .exercise-header h2,
    .resource-header h2 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    /* Vidéos responsive */
    .video-container {
        margin: 15px 0;
    }
    
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    
    .video-wrapper iframe,
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /* Messages et alertes */
    .alert {
        padding: 10px;
        margin: 10px 0;
        font-size: 14px;
    }
    
    .welcome {
        padding: 20px 15px;
        text-align: center;
    }
    
    .welcome h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    /* Footer responsive */
    .page-footer {
        margin-top: 30px;
        padding: 15px 0;
    }
    
    /* Upload de fichiers */
    .file-upload-area {
        padding: 20px 10px;
    }
    
    .upload-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Dropdown multiselect */
    .multiselect-container {
        position: relative;
    }
    
    .multiselect-dropdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 60vh;
        width: 90vw;
        max-width: 400px;
        z-index: 9999;
    }
    
    /* Zoom meeting responsive */
    .zoom-section {
        padding: 15px;
    }
    
    .zoom-section h3 {
        font-size: 1.1rem;
    }
}

/* Très petits mobiles (jusqu'à 480px) */
@media (max-width: 480px) {
    body {
        margin-top: 92px;
        font-size: 13px;
    }
    
    .container {
        padding: 0 18px!important;
    }
    
    .header {
        padding: 0.3rem 0;
    }
    
    header h1 {
        font-size: revert;
    }
    
    header img {
        max-height: 35px;
        margin-right: 8px;
    }
    
    /* Admin toolbar très petit écran */
    .admin-toolbar {
        top: 55px !important;
        padding: 8px 10px !important;
        font-size: 12px;
    }
    
    .pages {
        margin-top: 140px;
    }
    
    .admin-container {
        margin-top: 140px;
        padding: 8px;
    }
    
    /* Boutons plus petits */
    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Formulaires plus compacts */
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px;
        font-size: 16px;
    }
    
    /* Tables très compactes */
    .admin-table {
        font-size: 11px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 4px 2px;
    }
    
    /* Page detail compact */
    .page-detail {
        padding: 10px;
    }
    
    .page-detail h1 {
        font-size: 1.3rem;
    }
    
    .exercise-section,
    .resource-section {
        padding: 10px;
        margin-bottom: 15px;
    }
}

/* Mode paysage mobile */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        margin-top: 60px;
    }
    
    .header {
        padding: 0.3rem 0;
    }
    
    .admin-toolbar {
        top: 50px !important;
        flex-direction: row !important;
        padding: 5px 15px !important;
    }
    
    .admin-toolbar select {
        width: auto;
        min-width: 120px;
    }
    
    .pages {
        margin-top: 100px;
    }
    
    .admin-container {
        margin-top: 100px;
    }
}

/* ===== STYLES POUR LE CONTENU DU MODAL FLOTTANT ===== */

/* Styles pour le contenu du modal */
.modal-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-section h4 {
    margin: 0 0 1rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zoom-info {
    padding: 0.5rem 0;
}

.zoom-meeting-info {
    padding: 0.5rem 0;
}

.zoom-status-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    text-align: center;
}

.zoom-status-badge.status-finished {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.zoom-status-badge.status-active {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.zoom-time {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0.25rem 0;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.zoom-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white !important;
    text-decoration: none !important;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0.25rem 0;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.zoom-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
    background: linear-gradient(135deg, #1565c0, #1976d2);
}

.page-sections-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-sections-list li {
    margin-bottom: 0.5rem;
}

.section-link {
    display: block;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light) !important;
    text-decoration: none !important;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.section-link:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.section-link:active {
    transform: translateX(2px);
}

/* Animation pour le survol des sections */
.section-highlight {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5) !important;
    transition: box-shadow 0.3s ease;
}

/* Ajustements pour le bouton flottant en mode paysage */
@media (max-width: 768px) and (orientation: landscape) {
    .floating-action-btn {
        width: 50px;
        height: 50px;
    }
    
    .modal-content {
        height: 90vh;
    }
}

/* Styles pour les très petits écrans */
@media (max-width: 480px) {
    .floating-action-btn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }
    
    .modal-content {
        padding: 1rem;
        height: 95vh;
        border-radius: 15px 15px 0 0;
    }
    
    .modal-header h3 {
        font-size: 1.2rem;
    }
    
    .modal-section {
        padding: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .zoom-link {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .section-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* ================================= */
/* MAIN CONTENT LAYOUT - CLASSE UNIQUE POUR TOUTES LES PAGES */
/* ================================= */
.main-content {
    margin-left: 280px;
    margin-top: 81px;
    padding: 20px;
    min-height: calc(100vh - 81px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .main-content {
        margin-left: 200px;
    }
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        margin-top: 60px;
        padding: 20px;
        min-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 15px;
    }
}

/* Masquer le header blanc sur la page d'accueil desktop quand connecté */
@media (min-width: 769px) {
    body.homepage .main-header {
        display: none !important;
    }

    body.homepage .main-content {
        margin-top: 0 !important;
    }
}