*{margin:0;padding:0;box-sizing:border-box}
body{background:#f4f7fc;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:#333;line-height:1.6;padding-bottom:40px}
a{color:#0f4c5f;text-decoration:none}a:hover{text-decoration:underline}
main{max-width:1200px;margin:20px auto;padding:0 15px}
.site-header{background:#0f4c5f;color:white;padding:10px 20px;display:flex;flex-direction:column;gap:10px}
.header-top-row{text-align:center}.site-title{font-size:1.5rem;margin:0}
.header-bottom-row{display:flex;justify-content:space-between;align-items:center}
.header-left,.header-center,.header-right{position:relative}
.icon-btn{background:rgba(255,255,255,0.15);border:none;color:white;font-size:1.5rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.icon-btn:hover{background:rgba(255,255,255,0.3)}
.dropdown-menu{display:none;position:absolute;top:50px;background:white;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,0.2);min-width:200px;z-index:1000;overflow:hidden}
.dropdown-menu.show{display:block}.header-left .dropdown-menu{left:0}.header-center .dropdown-menu{left:50%;transform:translateX(-50%)}.header-right .dropdown-menu{right:0}
.dropdown-menu a,.dropdown-menu .dropdown-header{display:block;padding:12px 20px;color:#333;text-decoration:none;font-size:1rem;transition:background 0.2s}
.dropdown-menu a:hover{background:#f0f4f8}.dropdown-header{font-weight:bold;color:#0f4c5f;border-bottom:1px solid #eee}
.dropdown-item{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background 0.2s;font-size:1rem;color:#333}
.dropdown-item:hover{background:#f0f4f8}.dropdown-item input[type="radio"]{margin-right:10px}
input[type="text"],input[type="password"],input[type="number"],input[type="url"],input[type="email"],textarea,select{padding:12px;border-radius:30px;border:1px solid #ccc;font-size:1rem;box-sizing:border-box;font-family:inherit;transition:border-color 0.2s;outline:none;background:#fff}
input:focus,textarea:focus,select:focus{border-color:#e67e22;box-shadow:0 0 0 2px rgba(230,126,34,0.2)}textarea{border-radius:20px;resize:vertical}
table input,table textarea,table select{padding:6px 10px;border-radius:15px;font-size:0.9rem}table textarea{border-radius:10px}
.form-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.form-inline input,.form-inline select{flex:1 1 auto;min-width:150px}
button[type="submit"],button.btn-admin,button.btn-valider,button.btn-rejeter,button.envoyer,button.btn-pdf,a.btn-pdf,button.btn-danger,a.btn-danger,button.btn-success{color:white;border:none;padding:10px 20px;border-radius:40px;font-weight:bold;cursor:pointer;font-size:1rem;text-decoration:none;display:inline-block;transition:background 0.2s,transform 0.1s}
button[type="submit"],button.btn-admin,button.btn-valider,button.btn-rejeter,button.envoyer{background-color:#e67e22}button[type="submit"]:hover,button.btn-admin:hover,button.btn-valider:hover,button.envoyer:hover{background-color:#b45f1b}
button.btn-danger,a.btn-danger{background-color:#c0392b}button.btn-danger:hover,a.btn-danger:hover{background-color:#a93226}
button.btn-success{background-color:#27ae60}button.btn-success:hover{background-color:#219a52}
.btn-admin{display:inline-block;background:#0f4c5f;color:white;padding:8px 16px;border-radius:25px;font-size:0.9rem}.btn-admin:hover{background:#0a3a4a;text-decoration:none}
a.btn-pdf{background-color:#0f4c5f}a.btn-pdf:hover{background-color:#0a3a4a}a.btn-pdf.btn-continue{background-color:#c0392b}a.btn-pdf.btn-continue:hover{background-color:#a93226}
.btn-pdf.disabled{background:#ccc;cursor:not-allowed;color:#666;border-radius:40px;padding:10px 20px;display:inline-block}
.btn-sm{padding:4px 10px;font-size:0.85rem}.btn-icon{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:4px;transition:transform 0.1s}.btn-icon:hover{transform:scale(1.2)}
.floating-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;border-radius:50%;background:#e67e22;color:white;border:none;font-size:2rem;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.2);z-index:999;display:flex;align-items:center;justify-content:center}
.floating-btn-secondary{bottom:30px;right:100px;width:50px;height:50px;font-size:1.5rem;background:#0f4c5f}
.message{background:#e0f2e9;padding:10px;border-radius:10px;margin-bottom:15px}.message-error{background:#ffe6e6;color:#c0392b;padding:10px;border-radius:10px;margin-bottom:15px}.message-success{background:#e0f2e9;color:#27ae60;padding:10px;border-radius:10px;margin-bottom:15px}
#toast-container{position:fixed;bottom:30px;right:30px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{padding:14px 20px;border-radius:30px;color:#fff;font-weight:500;box-shadow:0 8px 20px rgba(0,0,0,0.2);opacity:0;transform:translateY(20px);animation:slideIn 0.3s forwards;max-width:400px;cursor:default}
.toast.success{background:#27ae60}.toast.error{background:#c0392b}.toast.info{background:#0f4c5f}
.toast.removing{animation:slideOut 0.3s forwards}@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}
.table{width:100%;border-collapse:collapse;margin-top:15px;background:white;border-radius:10px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,0.05)}.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}.table th{background:#f0f4f8;color:#0f4c5f;font-weight:bold}
.sequence{margin-bottom:15px;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.05)}.sequence-header{background:#f0f4f8;padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.sequence-header:hover{background:#e0e9f0}
.sequence-block{background:#fff;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,0.05);margin-bottom:15px;border:1px solid #e0e0e0;overflow:hidden}.sequence-header-clickable{background:#f0f4f8;padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.sequence-header-clickable:hover{background:#e0e9f0}
.sequence-content{padding:15px;display:block;background:#fafbfc}.sequence-content.collapsed{display:none}.sequence-title{display:flex;align-items:center;gap:10px;flex:1}.sequence-stats{font-size:0.9rem;color:#888;margin-left:auto}
.toggle-icon,.toggle-icon-sub{font-size:1.2rem;transition:transform 0.2s}.ressources{display:flex;flex-direction:column;gap:10px;background:transparent}
.carte-ressource{background:#f4f7fc;padding:15px;border-radius:10px;border:1px solid #dce3ec;box-shadow:0 1px 3px rgba(0,0,0,0.03);transition:box-shadow 0.2s}.carte-ressource:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.sub-header{background:#f5f7fa;padding:8px 15px;border-radius:8px;margin-top:5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.sub-content{padding:10px 0 10px 15px}.sub-content.collapsed{display:none}
.quiz-container{max-width:800px;margin:0 auto;background:white;padding:20px;border-radius:20px;box-shadow:0 5px 15px rgba(0,0,0,0.1)}.quiz-question{margin-bottom:20px;padding:15px;background:#fafafa;border-radius:10px}.quiz-question.correct{border-left:4px solid #27ae60}.quiz-question.incorrect{border-left:4px solid #e74c3c}
.options label{display:block;margin:5px 0}.chrono{font-size:1.5rem;font-weight:bold;color:#e67e22;margin-bottom:20px}.correct-badge{color:#27ae60}.incorrect-badge{color:#e74c3c}
.top5{background:#f0f4f8;border:1px solid #d0d9e0;border-radius:12px;padding:12px 15px;margin-top:15px;box-shadow:0 2px 4px rgba(0,0,0,0.05)}.top5 strong{display:block;margin-bottom:8px;font-size:1rem;color:#0f4c5f}.top5 ul{list-style:none;padding:0;margin:0 0 10px 0}.top5 ul li{padding:4px 0;border-bottom:1px dotted #ccc;font-size:0.95rem}.top5 .info{color:#888;font-style:italic}.top5 .historique-link{display:inline-block;font-size:0.85rem;margin-top:5px;color:#0f4c5f;text-decoration:underline}
.chat-container{max-width:900px;margin:0 auto;background:white;border-radius:20px;padding:16px;box-shadow:0 5px 15px rgba(0,0,0,0.1)}.chat-messages{height:50vh;min-height:300px;overflow-y:auto;background:#fef9e8;border-radius:15px;padding:12px;margin-bottom:20px}
.admin-menu{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:30px}.stat-item{background:white;padding:20px;border-radius:15px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05)}.stat-number{font-size:2rem;font-weight:bold;color:#0f4c5f}.stat-card{background:white;border-radius:15px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.resource-group{margin-bottom:20px}.resource-item{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;background:#fff;border:1px solid #eee;border-radius:10px;margin-bottom:5px;transition:box-shadow 0.2s}.resource-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)}.resource-title{font-weight:bold;margin-right:10px}.resource-url{color:#888;font-size:0.9rem;word-break:break-all}.quiz-info{flex:1}.quiz-desc{color:#666;font-size:0.9rem}.actions{display:flex;gap:5px;white-space:nowrap}.sequence-header-actions{display:flex;align-items:center;gap:8px}.sortable-container{min-height:20px}
.niveau-badge{display:inline-block;background:#e8f5e9;color:#27ae60;padding:2px 8px;border-radius:12px;font-size:0.8rem;font-weight:bold;margin-left:8px}.matiere-badge{display:inline-block;background:#ede7f6;color:#5e35b1;padding:2px 8px;border-radius:12px;font-size:0.8rem;font-weight:bold;margin-left:8px}.matiere-heading{font-size:1.4rem;color:#0f4c5f;margin:25px 0 15px 0;border-bottom:2px solid #e0e0e0;padding-bottom:5px}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;margin-bottom:10px}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;border:none}.video-link{display:inline-block;margin-top:5px;font-size:0.9rem;color:#e67e22}
.auth-container{max-width:400px;margin:50px auto;background:white;border-radius:30px;padding:30px;box-shadow:0 10px 25px rgba(0,0,0,0.1);text-align:center}.auth-container h1{color:#0f4c5f;margin-bottom:20px}.auth-form .form-group{margin-bottom:15px;text-align:left}.auth-form label{display:block;color:#0f4c5f;font-weight:bold;margin-bottom:5px;font-size:0.9rem}.auth-form input{width:100%}
a.btn-pdf.btn-success{background-color:#27ae60!important;color:white!important}a.btn-pdf.btn-success:hover{background-color:#219a52!important}
.element-card{background:#ffffff;border-radius:15px;padding:15px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #e0e4e8}
@media(max-width:600px){.form-inline{flex-direction:column}.stat-grid{grid-template-columns:1fr 1fr}.header-center .dropdown-menu{left:0;transform:none}}

/* Styles pour le menu utilisateur */
.dropdown-user-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
    color: #0f4c5f;
}
.dropdown-user-section .user-icon {
    font-size: 1.5rem;
}
.dropdown-user-section strong {
    color: #0f4c5f;
    font-weight: 600;
}
.dropdown-user-section span {
    color: #555;
}
.dropdown-menu hr {
    margin: 5px 0;
    border: none;
    border-top: 1px solid #eee;
}

/* Styles pour les liens avec les mêmes classes que les boutons */
a.btn-success {
    background-color: #27ae60 !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s, transform 0.1s;
}
a.btn-success:hover {
    background-color: #219a52 !important;
}
a.btn-start {
    background-color: #2980b9 !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s, transform 0.1s;
}
a.btn-start:hover {
    background-color: #1c5980 !important;
}
a.btn-danger {
    background-color: #c0392b !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s, transform 0.1s;
}
a.btn-danger:hover {
    background-color: #a93226 !important;
}

/* Messagerie */
/* Messagerie */
.messagerie-container {
    display: flex;
    gap: 10px;
    min-height: 500px;
    align-items: stretch;
}
.messagerie-sidebar {
    width: 250px;
    min-width: 200px;
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.messagerie-content {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.divider {
    width: 8px;
    cursor: col-resize;
    background: #e0e0e0;
    border-radius: 4px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.divider:hover, .divider.active {
    background: #0f4c5f;
}

/* Messagerie */

/* Messagerie */
.messagerie-container {
    display: flex;
    gap: 0;
    min-height: 500px;
    align-items: stretch;
    background: #f4f7fc;
    padding: 15px;
    border-radius: 15px;
}
.messagerie-sidebar {
    width: 260px;
    min-width: 200px;
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-shrink: 0;
    overflow: auto;
}
.messagerie-sidebar h3 {
    font-size: 1.1rem;
    color: #0f4c5f;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.account-list, .folder-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}
.account-list li, .folder-list li {
    margin-bottom: 5px;
}
.account-list a, .folder-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s;
}
.account-list a:hover, .folder-list a:hover {
    background: #f0f4f8;
}
.account-list a.active, .folder-list a.active {
    background: #e6f0ff;
    color: #0f4c5f;
    font-weight: bold;
}
.messagerie-content {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-left: 15px;
    min-width: 0;
}
.divider {
    width: 6px;
    cursor: col-resize;
    background: #d0d9e0;
    border-radius: 3px;
    transition: background 0.2s;
    flex-shrink: 0;
    margin: 0 5px;
}
.divider:hover, .divider.active {
    background: #0f4c5f;
}

/* Tableau des messages */
.messagerie-content table {
    width: 100%;
    border-collapse: collapse;
}
.messagerie-content table th {
    text-align: left;
    padding: 10px;
    background: #f8f9fa;
    color: #0f4c5f;
    border-bottom: 1px solid #dee2e6;
}
.messagerie-content table td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.messagerie-content table tr:hover td {
    background: #f8f9fa;
}

/* Sous-menus accordéon */
.dropdown-submenu { display: none; }
.dropdown-submenu.show { display: block; }
.dropdown-header-acc { cursor: pointer; user-select: none; }
.dropdown-header-acc::after { content: ' ▶'; font-size: 0.7rem; }
.dropdown-header-acc.open::after { content: ' ▼'; }

/* --- Boutons standardisés (convention doc/specifications.md §10) --- */
.btn-modifier,
.btn-dashboard,
.btn-danger,
.btn-start,
.btn-continue,
.btn-redo,
.btn-valider,
.btn-save-quit,
.btn-abandon {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.4;
    transition: background 0.2s, transform 0.1s;
    color: #fff;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-modifier { background-color: #2980b9; }
.btn-modifier:hover { background-color: #1c5980; }
.btn-dashboard { background-color: #2980b9; }
.btn-dashboard:hover { background-color: #1c5980; }
.btn-danger { background-color: #c0392b; }
.btn-danger:hover { background-color: #a93226; }
.btn-start { background-color: #2980b9; }
.btn-start:hover { background-color: #1c5980; }
.btn-continue { background-color: #c0392b; }
.btn-continue:hover { background-color: #a93226; }
.btn-redo { background-color: #27ae60; }
.btn-redo:hover { background-color: #219a52; }
.btn-valider {
    background-color: #aed6f1;
    color: #1a5276;
    border-color: #2980b9;
}
.btn-valider:hover { background-color: #85c1e9; }
.btn-save-quit {
    background-color: #f9e79f;
    color: #7d6608;
    border-color: #f1c40f;
}
.btn-save-quit:hover { background-color: #f7dc6f; }
.btn-abandon {
    background-color: #f5cba7;
    color: #935116;
    border-color: #e67e22;
}
.btn-abandon:hover { background-color: #f0b27a; }

/* Pour les boutons icônes (✏️, 🗑️) on garde la police emoji normale */
.btn-modifier,
.btn-danger {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Barre d'actions de masse */
#bulk-actions-bar {
    display: none;
    background: #e8f0fe;
    border: 1px solid #b8d0e0;
    border-radius: 12px;
    padding: 10px 15px;
    margin-bottom: 15px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#bulk-actions-bar.show {
    display: flex;
}
#bulk-count {
    font-weight: bold;
    color: #0f4c5f;
}
#bulk-actions-bar button {
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #c0392b;
    font-size: 0.9rem;
}
#bulk-actions-bar button:hover {
    background-color: #a93226;
}
/* Cases à cocher dans tableau */
.table th input[type="checkbox"],
.table td input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ---------- Harmonisation des titres de page ---------- */
.page-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f4c5f;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e0e0e0;
}

/* ---------- Barre d'administration uniforme ---------- */
.admin-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 20px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.admin-menu .btn-admin,
.admin-menu .btn-dashboard,
.admin-menu .btn-modifier,
.admin-menu .btn-danger,
.admin-menu .btn-start,
.admin-menu .btn-continue,
.admin-menu .btn-redo {
    font-size: 0.9rem;
    padding: 6px 14px;
}

/* ---------- Espacement standard pour les blocs de contenu ---------- */
.content-block {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ---------- Modales génériques ---------- */
.modal-overlay { transition: opacity 0.2s ease; }
.modal-container {
    animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-close {
    font-size: 1.5rem; cursor: pointer; line-height: 1; color: #888; transition: color 0.2s;
}
.modal-close:hover { color: #333; }