/* ========================================
   OCYTOMILK - Administration
   Styles globaux du back-office
   Fichier centralisé - NE PAS DUPLIQUER
   ======================================== */

/* ========================================
   PAGE DE CONNEXION
   ======================================== */
body.login-page {
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Abel', sans-serif;
}

body.login-page .login-container {
    width: 100%;
    max-width: 420px;
}

body.login-page .login-header {
    text-align: center;
    color: white;
    margin-bottom: 30px;
}

body.login-page .login-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    font-family: 'Abel', sans-serif;
}

body.login-page .login-header p {
    opacity: 0.9;
    font-size: 1.1em;
}

body.login-page .login-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

body.login-page .presta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 15px;
    font-family: 'Abel', sans-serif;
}

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

body.login-page .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #2c3e50;
    font-family: 'Abel', sans-serif;
}

body.login-page .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Abel', sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

body.login-page .form-group input:focus {
    outline: none;
    border-color: #667eea;
}

body.login-page .login-card .btn {
    display: block;
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Abel', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    box-sizing: border-box;
}

body.login-page .login-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

body.login-page .login-card .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.login-page .error-message {
    background: #fee;
    color: #c00;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Abel', sans-serif;
}

body.login-page .blocked-message {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

body.login-page .blocked-message h3 {
    margin: 0 0 10px 0;
    font-family: 'Abel', sans-serif;
}

body.login-page .blocked-message p {
    margin: 0;
    opacity: 0.9;
}

body.login-page .countdown {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f7fa;
    display: flex;
    min-height: 100vh;
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar {
    width: 260px;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.sidebar-header {
    padding: 25px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

.sidebar-header p {
    font-size: 13px;
    opacity: 0.8;
}

.sidebar-menu {
    padding: 20px 0;
}

.menu-section {
    margin-bottom: 25px;
}

.menu-section-title {
    padding: 10px 20px;
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 600;
    letter-spacing: 1px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
    font-size: 15px;
}

.menu-item .material-symbols-outlined {
    font-size: 22px;
}

.menu-item:hover,
.menu-item.active {
    background: rgba(255,255,255,0.1);
    border-left-color: #3498db;
    padding-left: 25px;
}

.menu-item i {
    margin-right: 10px;
    width: 20px;
    display: inline-block;
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.main-content {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ========================================
   TOP BAR
   ======================================== */
.top-bar {
    background: white;
    padding: 20px 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar h1 {
    color: #2c3e50;
    font-size: 24px;
}

.admin-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.admin-name {
    font-weight: 600;
    color: #2c3e50;
}

.admin-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.admin-profile-link:hover {
    background-color: rgba(102, 126, 234, 0.1);
    text-decoration: none;
}

.admin-profile-link:hover .admin-name {
    color: #667eea;
}

.btn-logout {
    padding: 8px 20px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-logout:hover {
    background: #c0392b;
}

.btn-help {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f8c8d;
    text-decoration: none;
    transition: all 0.3s;
    background: transparent;
}

.btn-help:hover {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}

.btn-help .material-symbols-outlined {
    font-size: 22px;
}

/* ========================================
   MODALE AIDE
   ======================================== */
.aide-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.aide-modal-overlay.active {
    display: flex;
}

.aide-modal {
    background: white;
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.aide-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

.aide-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aide-modal-header h3 .material-symbols-outlined {
    font-size: 22px;
    color: #667eea;
}

.aide-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aide-modal-btn-external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: none;
    color: #7f8c8d;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.aide-modal-btn-external:hover {
    background: #e9ecef;
    color: #667eea;
}

.aide-modal-btn-external .material-symbols-outlined {
    font-size: 20px;
}

.aide-modal-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: none;
    font-size: 24px;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.aide-modal-btn-close:hover {
    background: #e9ecef;
    color: #e74c3c;
}

.aide-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 30px;
}

.aide-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 0;
    color: #7f8c8d;
    font-size: 15px;
}

@keyframes aide-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.aide-spin {
    animation: aide-spin 1s linear infinite;
}

/* ========================================
   CONTENT AREA
   ======================================== */
.content {
    padding: 30px;
    flex: 1;
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 25px;
}

.card-title {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title .material-symbols-outlined {
    font-size: 24px;
    color: #667eea;
}

.card-title.mb-0 {
    margin-bottom: 0;
}

/* ========================================
   BUTTONS - BASE
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

.btn-success:hover {
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-danger:hover {
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
}

.btn-warning:hover {
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.btn-info:hover {
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-sm,
.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

/* ========================================
   BOUTONS D'ACTIONS POUR LES TABLEAUX
   ======================================== */
.actions-cell {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-icon-small {
    width: 28px;
    height: 28px;
    background: #f8f9fa;
    color: #666;
    border: 1px solid #ddd;
}

.btn-icon-small:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.btn-icon-small .material-symbols-outlined {
    font-size: 16px;
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
}

.btn-icon-edit {
    background: #e8f4fd;
    color: #2196F3;
}

.btn-icon-edit:hover {
    background: #2196F3;
    color: white;
}

.btn-icon-view {
    background: #e0f7fa;
    color: #17a2b8;
}

.btn-icon-view:hover {
    background: #17a2b8;
    color: white;
}

.btn-icon-toggle {
    background: #e8f5e9;
    color: #4CAF50;
}

.btn-icon-toggle:hover {
    background: #4CAF50;
    color: white;
}

.btn-icon-toggle.inactive {
    background: #fff3e0;
    color: #ff9800;
}

.btn-icon-toggle.inactive:hover {
    background: #ff9800;
    color: white;
}

.btn-icon-delete {
    background: #ffebee;
    color: #f44336;
}

.btn-icon-delete:hover {
    background: #f44336;
    color: white;
}

.btn-icon-success {
    background: #e8f5e9;
    color: #4CAF50;
}

.btn-icon-success:hover {
    background: #4CAF50;
    color: white;
}

.btn-icon-warning {
    background: #fff3e0;
    color: #ff9800;
}

.btn-icon-warning:hover {
    background: #ff9800;
    color: white;
}

.btn-icon-info {
    background: #e3f2fd;
    color: #2196F3;
}

.btn-icon-info:hover {
    background: #2196F3;
    color: white;
}

.btn-icon-download {
    background: #e8f5e9;
    color: #27ae60;
}

.btn-icon-download:hover {
    background: #27ae60;
    color: white;
}

.btn-icon-email {
    background: #f3e5f5;
    color: #9c27b0;
}

.btn-icon-email:hover {
    background: #9c27b0;
    color: white;
}

.btn-icon-program {
    background: #fce4ec;
    color: #e84393;
}

.btn-icon-program:hover {
    background: #e84393;
    color: white;
}

.btn-icon-recap {
    background: #e0f7fa;
    color: #00acc1;
}

.btn-icon-recap:hover {
    background: #00acc1;
    color: white;
}

.btn-icon-primary {
    background: #e8eaf6;
    color: #667eea;
}

.btn-icon-primary:hover {
    background: #667eea;
    color: white;
}

/* Boutons paiement avec texte (pastel) */
.btn-paiement-acompte {
    background: #fff3e0;
    color: #e67e22;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-paiement-acompte:hover {
    background: #e67e22;
    color: white;
}

.btn-paiement-acompte .material-symbols-outlined {
    font-size: 18px;
}

.btn-paiement-solde {
    background: #ffebee;
    color: #e74c3c;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-paiement-solde:hover {
    background: #e74c3c;
    color: white;
}

.btn-paiement-solde .material-symbols-outlined {
    font-size: 18px;
}

.btn-paiement-complement {
    background: #f3e5f5;
    color: #8e44ad;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-paiement-complement:hover {
    background: #8e44ad;
    color: white;
}

.btn-paiement-complement .material-symbols-outlined {
    font-size: 18px;
}

.btn-icon-secondary {
    background: #eceff1;
    color: #607d8b;
}

.btn-icon-secondary:hover {
    background: #607d8b;
    color: white;
}

.btn-icon-reservations {
    background: #fff8e1;
    color: #ff8f00;
}

.btn-icon-reservations:hover {
    background: #ff8f00;
    color: white;
}

/* Bouton document */
.btn-doc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-doc:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-1px);
}

.btn-doc .material-symbols-outlined {
    font-size: 16px;
}

.btn-doc-view {
    background: #3498db;
    color: white;
}

.btn-doc-view:hover {
    background: #2980b9;
}

.btn-doc-delete {
    background: #e74c3c;
    color: white;
}

.btn-doc-delete:hover {
    background: #c0392b;
}

.btn-doc-upload {
    background: #27ae60;
    color: white;
}

.btn-doc-upload:hover {
    background: #219a52;
}

/* ========================================
   TABLES
   ======================================== */
.table {
    width: 100%;
    border-collapse: collapse;
}

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

.table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
}

.table tr:hover {
    background: #f8f9fa;
}

/* Drag & Drop tables */
.drag-handle {
    cursor: grab;
    color: #999;
    padding: 5px;
}

.drag-handle:hover {
    color: #333;
}

/* Tables triables - border-collapse separate pour le drag & drop */
#sortable-table {
    border-collapse: separate;
    border-spacing: 0;
}

tr.sortable-ghost {
    opacity: 0.5;
}

tr.sortable-ghost td {
    border: 2px dashed #667eea;
    border-left: none;
    border-right: none;
}

tr.sortable-ghost td:first-child {
    border-left: 2px dashed #667eea;
    border-radius: 6px 0 0 6px;
}

tr.sortable-ghost td:last-child {
    border-right: 2px dashed #667eea;
    border-radius: 0 6px 6px 0;
}

tr.sortable-chosen {
    background-color: #f8f9fa !important;
}

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

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group .help-text {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 4px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

select.form-control {
    padding: 12px 15px;
    font-size: 15px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ========================================
   FILTRES (select de filtrage)
   ======================================== */
.filters-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* Légende des listes (sessions, réservations) */
.list-legend {
    padding: 15px 0;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 14px;
    margin: 0;
}

.filter-select {
    padding: 12px 35px 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    background-color: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-select:hover {
    border-color: #667eea;
}

.filter-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Filtre actif (non par défaut) */
.filter-select.filter-active,
.form-control.filter-active {
    border-color: #e74c3c;
    font-weight: 600;
    color: #c0392b;
    background-color: #fff5f5;
}

.filter-select.filter-active:hover,
.form-control.filter-active:hover {
    border-color: #c0392b;
}

/* Bouton de réinitialisation des filtres */
.filters-paiements-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.filters-paiements-line {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filters-paiements-line .filter-expand {
    flex: 1 1 0;
    min-width: 0;
}

.btn-reset-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #fff5f5;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-reset-filters:hover {
    background: #e74c3c;
    color: white;
}

.btn-reset-filters .material-symbols-outlined {
    font-size: 18px;
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Marge supplémentaire pour la section options tarifaires */
#options-tarifaires {
    margin-top: 30px;
}

/* Drag and drop pour formules et chambres (hors tableaux) */
.person-item .drag-handle,
.formule-card .drag-handle,
.fe-drag-handle {
    cursor: grab;
    color: #999;
    padding: 5px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
}

.drag-handle:hover {
    color: #333;
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.5;
    border: 2px dashed #667eea;
}

.sortable-chosen {
    background: #f8f9fa;
}

.formule-card,
.chambre-card {
    transition: transform 0.15s ease;
}

.section-title {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #667eea;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

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

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

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

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

.alert-info-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
    font-size: 14px;
}

/* ========================================
   BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Barre de remplissage sessions ---- */
.session-fill-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 80px;
}
.session-fill-bar .session-fill-ratio {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    line-height: 1;
}
.session-fill-bar .session-fill-track {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}
.session-fill-bar .session-fill-progress {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.session-fill-bar .session-fill-progress.fill-success { background: #28a745; }
.session-fill-bar .session-fill-progress.fill-warning { background: #ffc107; }
.session-fill-bar .session-fill-progress.fill-danger  { background: #dc3545; }

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-danger {
    background: #f8d7da;
    color: #721c24;
}

.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-info2 {
    background: #999999;
    color: #FFFFFF;
}

/* ========================================
   STATISTIQUES - CARDS
   ======================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

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

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

.stat-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffffff;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.green {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

.stat-icon.orange {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.stat-icon.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.stat-icon.purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.stat-info h3 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.stat-info p {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

.stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #667eea;
    white-space: nowrap;
}

.stat-label {
    color: #7f8c8d;
    font-size: 14px;
}

.stat-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-box.ca { border-left: 4px solid #28a745; }
.stat-box.formateurs { border-left: 4px solid #17a2b8; }
.stat-box.stagiaires { border-left: 4px solid #ffc107; }
.stat-box.heures { border-left: 4px solid #dc3545; }

/* ========================================
   DASHBOARD
   ======================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.list-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

/* List-item cliquable (lien) */
a.list-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.list-item-title {
    font-weight: 600;
    color: #2c3e50;
}

.list-item-subtitle {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 5px;
}

/* ========================================
   SESSIONS - BANDEAUX PÉRIODES
   ======================================== */
.formation-header:hover {
    opacity: 0.95;
}

.toggle-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.toggle-icon-periode {
    font-size: 10px;
    margin-right: 8px;
}

.periode-header:hover {
    opacity: 0.9;
}

.periode-bandeau {
    padding: 8px 15px !important;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: left !important;
}

.periode-a-venir {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
}

.periode-en-cours {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
}

.periode-passees {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.periode-separator td {
    border: none !important;
}

/* ========================================
   PARAMETRES
   ======================================== */
.parametres-container {
    display: flex;
    gap: 30px;
}

.parametres-nav {
    width: 220px;
    flex-shrink: 0;
}

.parametres-content {
    flex: 1;
}

.nav-list {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    text-decoration: none;
    color: #2c3e50;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.nav-item:hover {
    background: #f8f9fa;
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left-color: #667eea;
    color: #667eea;
}

.nav-item .nav-icon {
    font-size: 20px;
}

.param-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.param-card h2 {
    margin: 0 0 5px 0;
    color: #667eea;
    font-size: 1.3em;
}

.param-card .description {
    color: #7f8c8d;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Documents */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.document-card {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s;
}

.document-card.has-document {
    border-style: solid;
    border-color: #27ae60;
    background: #f0fff4;
}

.document-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.document-card-header .icon {
    font-size: 28px;
}

.document-card-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1em;
}

.document-card-description {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 15px;
}

.document-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}

.document-status.uploaded {
    background: #d4edda;
    color: #155724;
}

.document-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.upload-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
}

.upload-form input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: white;
}

.upload-form .btn-upload-submit {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.upload-form .btn-upload-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.file-info {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* ========================================
   BPF (Bilan Pédagogique et Financier)
   ======================================== */
.bpf-container {
    display: flex;
    gap: 30px;
}

.bpf-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.bpf-content {
    flex: 1;
}

.periode-list {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.periode-list h3 {
    background: #667eea;
    color: white;
    padding: 15px 20px;
    margin: 0;
    font-size: 16px;
}

.periode-item {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    color: #333;
    text-decoration: none;
    transition: background 0.2s;
}

.periode-item:hover {
    background: #f8f9fa;
}

.periode-item.active {
    background: #e8f0fe;
    border-left: 4px solid #667eea;
}

.periode-item .annee {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

.periode-item .dates {
    font-size: 13px;
    color: #666;
    margin-top: 3px;
}

.bpf-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 25px;
    margin-bottom: 25px;
}

.bpf-card h2 {
    color: #667eea;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bpf-card h2 .material-symbols-outlined {
    color: #667eea;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.bpf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.bpf-table th {
    background: #667eea;
    color: white;
    padding: 12px 15px;
    font-weight: 600;
}

.bpf-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.bpf-table tr:hover {
    background: #f8f9fa;
}

.bpf-table tfoot td {
    background: #f8f9fa;
    font-weight: 700;
    border-top: 2px solid #667eea;
}

.bpf-table th.number,
.bpf-table td.number {
    text-align: right;
    white-space: nowrap;
}

.section-cerfa {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.section-cerfa h4 {
    color: #856404;
    margin: 0 0 15px 0;
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ffc107;
}

.section-cerfa .ligne {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ffc107;
}

.section-cerfa .ligne:last-child {
    border-bottom: none;
}

.section-cerfa .ligne-label {
    color: #856404;
}

.section-cerfa .ligne-value {
    font-weight: 600;
    color: #856404;
}

/* ========================================
   QUESTIONNAIRES / EVALUATIONS - EDIT
   ======================================== */
.formation-selector {
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.formation-selector label {
    font-weight: 600;
    color: #333;
}

.formation-selector select {
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    min-width: 350px;
    cursor: pointer;
}

.formation-info-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.formation-info-bar h2 {
    margin: 0;
    font-size: 1.3rem;
}

.formation-stats {
    display: flex;
    gap: 25px;
}

.formation-stat {
    text-align: center;
}

.formation-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
}

.formation-stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

.section-card {
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #667eea;
}

.section-card.questionnaire {
    border-left-color: #c9365c;
}

.section-card.inactive {
    opacity: 0.6;
    border-left-color: #999;
}

.section-card.inactive .section-header {
    background: #e9ecef;
}

.section-header {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.section-header:hover {
    background: #e9ecef;
}

.section-header .drag-handle {
    cursor: grab;
    color: #999;
    margin-right: 10px;
    flex-shrink: 0;
}

.section-header .section-title {
    flex-grow: 1;
    min-width: 200px;
    max-width: 400px;
    margin: 0;
    padding: 0;
    border: none;
}

.section-header .section-title input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #667eea;
    background: transparent;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
    text-align: left;
}

.section-header .section-title input:focus {
    outline: none;
    border-bottom-color: #764ba2;
    background: rgba(102, 126, 234, 0.05);
}

.section-badge {
    background: #667eea;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 10px;
}

.section-badge.questionnaire {
    background: #c9365c;
}

.section-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.section-actions .btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecf0f1;
    color: #7f8c8d;
    transition: all 0.2s;
}

.section-actions .btn-icon:hover {
    background: #7f8c8d;
    color: white;
}

.section-actions .btn-icon.delete {
    background: #ffebee;
    color: #e74c3c;
}

.section-actions .btn-icon.delete:hover {
    background: #e74c3c;
    color: white;
}

.question-actions .btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecf0f1;
    color: #7f8c8d;
    transition: all 0.2s;
}

.question-actions .btn-icon:hover {
    background: #7f8c8d;
    color: white;
}

.question-actions .btn-icon.delete {
    background: #ffebee;
    color: #e74c3c;
}

.question-actions .btn-icon.delete:hover {
    background: #e74c3c;
    color: white;
}

.section-content {
    padding: 15px 20px;
    display: none;
}

.section-content.open {
    display: block;
}

.question-row {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
    gap: 10px;
}

.question-row:hover {
    background: #e9ecef;
}

.question-row.inactive {
    opacity: 0.5;
    background: #f0f0f0 !important;
}

.question-row .drag-handle {
    cursor: grab;
    color: #999;
}

.question-text {
    flex-grow: 1;
    min-width: 200px;
}

.question-text input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #667eea;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 14px;
    text-align: left;
    background: transparent;
}

.question-text input:focus {
    border-bottom-color: #764ba2;
    outline: none;
    background: rgba(102, 126, 234, 0.05);
}

.question-type {
    width: 180px;
}

.question-type select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.question-obligatoire {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.question-actions {
    display: flex;
    gap: 5px;
}

.btn-add-question {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
}

.btn-add-question:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f0f4ff;
}

.btn-add-section {
    background: white;
    border: 2px dashed #667eea;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    color: #667eea;
    width: 100%;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-add-section:hover {
    background: #f0f4ff;
}

.type-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e9ecef;
    color: #666;
}

.type-badge.satisfaction { background: #d4edda; color: #155724; }
.type-badge.note_10 { background: #cce5ff; color: #004085; }
.type-badge.texte_libre { background: #fff3cd; color: #856404; }
.type-badge.texte_conditionnel { background: #f8d7da; color: #721c24; }

/* ========================================
   QUESTIONNAIRES / EVALUATIONS - STATS
   ======================================== */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.filter-bar {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-bar .form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

.filter-bar label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
}

.filter-bar select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

.satisfaction-table {
    width: 100%;
    border-collapse: collapse;
}

.satisfaction-table th,
.satisfaction-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.satisfaction-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.satisfaction-bar {
    display: flex;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
}

.satisfaction-bar .bar-segment {
    height: 100%;
    transition: width 0.3s;
}

.satisfaction-bar .tres-satisfaisant { background: #28a745; }
.satisfaction-bar .satisfaisant { background: #17a2b8; }
.satisfaction-bar .insuffisant { background: #ffc107; }
.satisfaction-bar .tres-insuffisant { background: #dc3545; }

.legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.comment-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.comment-card .comment-author {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.comment-card .comment-question {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.comment-card .comment-text {
    font-style: italic;
    color: #333;
}

.note-distribution {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    height: 150px;
    padding: 20px;
}

.note-bar {
    width: 40px;
    background: linear-gradient(to top, #c9365c, #e84393);
    border-radius: 4px 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: white;
    font-weight: 600;
    padding-bottom: 5px;
    position: relative;
}

.note-bar .note-label {
    position: absolute;
    bottom: -25px;
    color: #333;
}

.note-bar .note-count {
    font-size: 0.9rem;
}

/* ========================================
   FORMATIONS - EDIT
   ======================================== */
.image-preview {
    max-width: 300px;
    max-height: 300px;
    border-radius: 10px;
    margin-top: 10px;
}

.image-container {
    position: relative;
    display: inline-block;
}

.delete-image-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.person-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.person-info {
    flex: 1;
}

.person-name {
    font-weight: 600;
    color: #2c3e50;
}

.person-profession {
    font-size: 13px;
    color: #7f8c8d;
}

.calculated-info {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #27ae60;
    margin-top: 15px;
}

.calculated-info strong {
    color: #27ae60;
}

.info-box {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #27ae60;
}

/* ========================================
   PARRAINAGE
   ======================================== */
.config-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

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

.parrainages-table th {
    background: #667eea;
    color: white;
    padding: 15px;
}

.parrainages-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.parrainages-table tr:hover {
    background: #f8f9fa;
}

.parrainage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.parrainage-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
}

.parrainage-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parrainage-toggle-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.parrainage-toggle-desc {
    font-size: 13px;
    color: #777;
}

@media (max-width: 900px) {
    .parrainage-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MODALS
   ======================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-content h3 {
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
}

/* ========================================
   NOTIFICATIONS
   ======================================== */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

.notification.success { background: #28a745; }
.notification.error { background: #dc3545; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state .material-symbols-outlined {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 15px;
    display: block;
}

.empty-state h3 {
    color: #333;
    margin: 0 0 10px 0;
}

.empty-state p {
    margin: 0;
}

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

.no-data .material-symbols-outlined {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 15px;
}

/* ========================================
   MATERIAL ICONS
   ======================================== */
.material-symbols-outlined {
    vertical-align: middle;
}

.btn .material-symbols-outlined {
    font-size: 18px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 968px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .bpf-container {
        flex-direction: column;
    }
    
    .bpf-sidebar {
        width: 100%;
    }
    
    .parametres-container {
        flex-direction: column;
    }
    
    .parametres-nav {
        width: 100%;
    }
    
    .documents-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid,
    .stats-grid-3,
    .stats-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .filter-bar {
        flex-direction: column;
    }
    
    .formation-selector {
        flex-direction: column;
    }
    
    .formation-selector select {
        min-width: 100%;
    }
    
    .formation-info-bar {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* =====================================================
   STYLES POUR LA PAGE MODÈLES EMAILS
   ===================================================== */
.email-templates-container {
    max-width: 1200px;
}

.intro-text {
    color: #7f8c8d;
    margin-bottom: 25px;
    font-size: 15px;
}

.status-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
}

.status-badge.inactive {
    background: #fff3cd;
    color: #856404;
}

/* Éditeur de template */
.editor-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.editor-header h2 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-back {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: background 0.2s;
}

.btn-back:hover {
    background: rgba(255,255,255,0.3);
}

.editor-body {
    padding: 25px;
}

.variables-help {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.variables-help h4 {
    margin: 0 0 12px 0;
    color: #0c5460;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variable-tag {
    background: white;
    border: 1px solid #b8daff;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: #0c5460;
    cursor: pointer;
    transition: all 0.2s;
}

.variable-tag:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.help-text {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 5px;
}

.editor-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.btn-save {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.btn-test {
    background: #6c757d;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

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

/* Modal test email */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 10px;
    padding: 25px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-content h3 {
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CKEditor customization - Ressembler au rendu email */
.ck-editor__editable {
    min-height: 300px;
    max-width: 600px !important;
    margin: 0 auto !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.6 !important;
    color: #333 !important;
    padding: 25px !important;
    background: white !important;
}

/* Styles spécifiques pour l'éditeur d'en-tête */
.editor-header-mode .ck-editor__editable {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    text-align: center !important;
    min-height: 120px;
}

.editor-header-mode .ck-editor__editable h1,
.editor-header-mode .ck-editor__editable h2,
.editor-header-mode .ck-editor__editable h3,
.editor-header-mode .ck-editor__editable p {
    color: white !important;
    text-align: center !important;
}

/* Styles spécifiques pour l'éditeur de pied de page */
.editor-footer-mode .ck-editor__editable {
    background: #f8f9fa !important;
    color: #7f8c8d !important;
    text-align: center !important;
    font-size: 13px !important;
    min-height: 100px;
}

.editor-footer-mode .ck-editor__editable p {
    color: #7f8c8d !important;
    text-align: center !important;
}

.editor-footer-mode .ck-editor__editable a {
    color: #667eea !important;
}

/* Styles pour les éléments dans l'éditeur normal */
.ck-editor__editable h2 {
    color: #2c3e50 !important;
    font-size: 20px !important;
    margin-bottom: 15px !important;
}

.ck-editor__editable h3 {
    color: #667eea !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.ck-editor__editable p {
    margin-bottom: 12px !important;
}

.ck-editor__editable table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    background: #f8f9fa !important;
    border-radius: 5px !important;
}

.ck-editor__editable table td,
.ck-editor__editable table th {
    padding: 10px 12px !important;
    border-bottom: 1px solid #eee !important;
    text-align: left !important;
}

.ck-editor__editable table td:first-child,
.ck-editor__editable table th:first-child {
    font-weight: 600 !important;
    width: 40% !important;
    color: #555 !important;
}

.ck-editor__editable a {
    color: #667eea !important;
}

.ck-editor__editable ul,
.ck-editor__editable ol {
    padding-left: 25px !important;
    margin: 15px 0 !important;
}

.ck-editor__editable li {
    margin-bottom: 8px !important;
}

/* Container de l'éditeur avec fond email */
.ck.ck-editor__main {
    background: #f4f4f4 !important;
    padding: 20px !important;
    border-radius: 0 0 8px 8px !important;
}

.ck.ck-editor {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.ck.ck-toolbar {
    background: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
    padding: 8px !important;
}

/* Panel preview live - largeur fixe 600px */
.live-preview-panel {
    width: 100%;
    margin: 20px auto 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.live-preview-header {
    background: #f8f9fa;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-preview-header h4 {
    margin: 0;
    font-size: 14px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #27ae60;
    margin-left: auto;
    font-weight: normal;
}

.live-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #27ae60;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.live-preview-content {
    padding: 15px;
    background: #f4f4f4;
}

.live-preview-email {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.live-preview-email-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
}

.live-preview-email-header h1 {
    margin: 0;
    font-size: 24px;
    color: white;
}

.live-preview-email-body {
    padding: 25px;
    color: #333;
    line-height: 1.6;
}

.live-preview-email-body .info-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
    border-left: 4px solid #667eea;
}

.live-preview-email-body .button {
    display: inline-block;
    background: #667eea;
    color: white !important;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 13px;
}

.live-preview-email-body table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
}

.live-preview-email-body table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.live-preview-email-body table td:first-child {
    font-weight: 600;
    width: 40%;
    color: #555;
}

.live-preview-email-footer {
    background: #f8f9fa;
    padding: 20px;
    color: #7f8c8d;
    font-size: 12px;
}

.live-preview-email-footer a {
    color: #667eea;
}

/* Message aperçu partiel */
.preview-partial-message {
    padding: 15px;
    color: #999;
    text-align: center;
    font-style: italic;
    font-size: 12px;
    background: white;
}

/* Section email de test */
.test-email-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.test-email-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 16px;
}

.test-email-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.test-email-form input[type="email"] {
    flex: 1;
    max-width: 300px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.test-email-form input[type="email"]:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Tableau des modèles d'emails */
.email-templates-table {
    width: 100%;
    border-collapse: collapse;
}

.email-templates-table th,
.email-templates-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.email-templates-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.email-templates-table tr:hover {
    background: #f8f9fa;
}

.email-templates-table .template-name {
    font-weight: 600;
    color: #2c3e50;
    display: block;
    margin-bottom: 3px;
}

.email-templates-table .template-description {
    font-size: 13px;
    color: #7f8c8d;
}

.email-templates-table .template-key {
    font-family: monospace;
    font-size: 11px;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    color: #666;
}

.email-templates-table .col-actions {
    width: 200px;
    text-align: left;
}

.email-templates-table .actions-cell {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

/* Bouton annuler */
.btn-cancel {
    background: #6c757d;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

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

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
}

.empty-state .material-symbols-outlined {
    font-size: 64px;
    display: block;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Configuration globale (header/footer) */
.global-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.global-template-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.2s;
}

.global-template-card:hover {
    background: #f0f2f5;
}

.global-template-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.global-template-icon .material-symbols-outlined {
    font-size: 24px;
}

.global-template-info {
    flex: 1;
}

.global-template-info h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
    color: #2c3e50;
}

.global-template-info p {
    margin: 0;
    font-size: 13px;
    color: #7f8c8d;
}

.btn-edit-global {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-edit-global:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}

/* Mobile */
@media (max-width: 768px) {
    .editor-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .editor-actions {
        flex-direction: column;
    }
    
    .editor-actions button,
    .editor-actions a,
    .editor-actions .btn-save {
        width: 100%;
        justify-content: center;
    }
    
    .email-templates-table th,
    .email-templates-table td {
        padding: 10px;
    }
    
    .email-templates-table .col-actions {
        width: auto;
    }
    
    .global-templates-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== FIN EMAIL TEMPLATES ===== */

/* ========================================
   EMAIL STYLES EDITOR (parametres.php)
   ======================================== */
.email-preview-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

.email-preview-frame {
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.color-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

@media (max-width: 1200px) {
    .color-settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .color-settings-grid {
        grid-template-columns: 1fr;
    }
}

.color-setting-group {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.color-setting-group-wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .color-setting-group-wide {
        grid-column: span 1;
    }
}

.color-setting-group h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.color-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.color-row:last-child {
    border-bottom: none;
}

.color-row label {
    font-size: 14px;
    color: #555;
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-input-wrapper input[type="color"] {
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}

.color-input-wrapper input[type="color"]:hover {
    border-color: #667eea;
}

.color-hex-input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    text-transform: uppercase;
}

.color-hex-input:focus {
    outline: none;
    border-color: #667eea;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
}

.form-actions-bar {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.btn-icon-payment {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.btn-icon-payment:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
/* ========================================
   MODAL ÉDITION RÉSERVATION
   ======================================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalSlideIn 0.3s ease;
    padding: 0;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h2 .material-symbols-outlined {
    color: #3b82f6;
}

.close-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: none;
    font-size: 24px;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.close-modal:hover {
    background: #e9ecef;
    color: #e74c3c;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

/* Info Block dans la modale */
.info-block {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    border-left: 4px solid #3b82f6;
}

.info-block .info-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #1e40af;
}

.info-block .info-price {
    font-weight: 600;
    color: #059669;
}

/* Payment Sections (fieldsets) */
.payment-section,
.payment-fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fafafa;
    margin: 0 0 20px 0;
}

.payment-section legend,
.payment-fieldset legend {
    font-weight: 600;
    padding: 0 12px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    background: #fafafa;
}

.payment-section legend .material-symbols-outlined,
.payment-fieldset legend .material-symbols-outlined {
    color: #3b82f6;
}

.payment-section legend .amount,
.payment-fieldset legend .amount {
    color: #059669;
    font-weight: 700;
}

/* Form Elements dans la modale */
.modal-body .form-row {
    display: flex;
    gap: 16px;
}

.modal-body .form-group {
    margin-bottom: 16px;
}

.modal-body .form-group.flex-1 {
    flex: 1;
}

.modal-body .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

/* Section divider */
.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 16px 0;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Boutons de la modale */
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

.modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #2980b9 0%, #1f6dad 100%);
    box-shadow: 0 4px 12px rgba(52,152,219,0.3);
}

.modal-footer.justify-end {
    justify-content: flex-end;
}

/* Tailles de modal */
.modal-content.modal-sm {
    max-width: 450px;
}

.modal-content.modal-md {
    max-width: 600px;
}

.modal-content.modal-lg {
    max-width: 800px;
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.radio-label:hover {
    background: #f3f4f6;
}

.radio-label input[type="radio"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.radio-label .material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
}

/* ========================================
   CUSTOM SELECT (Modes de paiement)
   ======================================== */
.custom-select {
    position: relative;
    user-select: none;
}

.select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

.select-trigger:hover {
    border-color: #3b82f6;
}

.custom-select.open .select-trigger {
    border-color: #3b82f6;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.select-trigger > .material-symbols-outlined.arrow {
    transition: transform 0.2s;
    color: #9ca3af;
    font-size: 1.2rem;
}

.custom-select.open .select-trigger > .material-symbols-outlined.arrow {
    transform: rotate(180deg);
}

.select-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
}

.select-text.placeholder {
    color: #9ca3af;
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #3b82f6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 50;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-height: 250px;
    overflow-y: auto;
}

.custom-select.open .select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.select-option:hover {
    background: #f0f7ff;
}

.select-option.selected {
    background: #dbeafe;
    font-weight: 500;
}

.select-option:last-child {
    border-radius: 0 0 6px 6px;
}

.select-option .material-symbols-outlined {
    font-size: 1.3rem;
}

/* Couleurs des icônes des modes de paiement */
.icon-pending { color: #9ca3af; }
.icon-stripe { color: #635bff; }
.icon-virement { color: #0ea5e9; }
.icon-cheque { color: #8b5cf6; }
.icon-especes { color: #f59e0b; }
.icon-attente { color: #f59e0b; }
.icon-confirmee { color: #10b981; }
.icon-annulee { color: #ef4444; }

/* =====================================================
   PAGE MOT DE PASSE ADMIN
   ===================================================== */

.password-container {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.password-container h2 {
    margin-top: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-container h2 .material-symbols-outlined {
    color: #667eea;
}

.password-container .form-group label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.password-container .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.password-container .form-group input:focus {
    outline: none;
    border-color: #667eea;
}

.account-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.account-info p {
    margin: 5px 0;
    color: #666;
}

.account-info strong {
    color: #333;
}

.btn-generate {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.success-box {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #28a745;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
}

.success-box h3 {
    color: #155724;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.success-box h3 .material-symbols-outlined {
    color: #28a745;
}

.new-password-display {
    background: #fff;
    border: 2px dashed #28a745;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.new-password-display .password {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    letter-spacing: 2px;
    user-select: all;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    display: inline-block;
}

.copy-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.copy-btn:hover {
    background: #218838;
}

.warning-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    color: #856404;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-box .material-symbols-outlined {
    color: #ffc107;
    flex-shrink: 0;
}

.error-box {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    color: #721c24;
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #667eea;
    text-decoration: none !important;
    margin-top: 20px;
}

.back-link:hover {
    color: #764ba2;
    text-decoration: none !important;
}

/* ========================================
   PAGE DE CONNEXION - OVERRIDES FINAUX
   ======================================== */
body.login-page,
body.login-page *:not(.material-symbols-outlined) {
    font-family: 'Abel', sans-serif !important;
}

body.login-page .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

body.login-page .login-card form .btn,
body.login-page .login-card button.btn,
body.login-page .login-card button[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Abel', sans-serif !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.login-page .login-card form .btn:hover,
body.login-page .login-card button.btn:hover,
body.login-page .login-card button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4) !important;
}

/* ========================================
   LIEN MOT DE PASSE OUBLIE (CONNEXION)
   ======================================== */
.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.forgot-password-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* ========================================
   PAGE MOT DE PASSE OUBLIE
   ======================================== */
body.forgot-password-page {
    font-family: 'Abel', 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.forgot-password-page .container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 420px;
}

body.forgot-password-page .logo {
    text-align: center;
    margin-bottom: 30px;
}

body.forgot-password-page .logo h1 {
    font-size: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.forgot-password-page .logo p {
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 5px;
}

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: all 0.3s;
}

.step-dot.active {
    background: #667eea;
    transform: scale(1.2);
}

.step-dot.done {
    background: #27ae60;
}

body.forgot-password-page h2 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    font-size: 22px;
}

body.forgot-password-page .subtitle {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.5;
}

body.forgot-password-page .form-group {
    margin-bottom: 20px;
}

body.forgot-password-page .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

body.forgot-password-page .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
}

body.forgot-password-page .form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.code-input {
    font-size: 28px !important;
    text-align: center;
    letter-spacing: 8px;
    font-family: monospace;
}

body.forgot-password-page .btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Abel', sans-serif;
}

body.forgot-password-page .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

body.forgot-password-page .btn-secondary {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    font-family: 'Abel', sans-serif;
}

body.forgot-password-page .btn-secondary:hover {
    background: #f0f4ff;
}

.message {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

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

.message-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.message .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

body.forgot-password-page .back-link {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
}

body.forgot-password-page .back-link:hover {
    color: #764ba2;
}

.icon-main {
    font-size: 48px;
    color: #667eea;
    text-align: center;
    display: block;
    margin-bottom: 15px;
}

.phone-display {
    background: #f0f4ff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.phone-display .material-symbols-outlined {
    font-size: 24px;
    color: #667eea;
    vertical-align: middle;
}

.phone-display span {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-left: 10px;
}

.timer {
    text-align: center;
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 15px;
}

.timer strong {
    color: #e74c3c;
}

.success-icon {
    font-size: 64px;
    color: #27ae60;
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

/* ========================================
   PAGE CONTRATS CONFIG - ONGLETS
   ======================================== */
.contrats-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.contrat-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    text-decoration: none;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    font-weight: 500;
}

.contrat-tab:hover {
    color: #667eea;
    background: #f8f9fa;
}

.contrat-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: white;
}

.contrat-tab .material-symbols-outlined {
    font-size: 22px;
}

/* Cartes configuration */
.config-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.config-card h3 {
    margin: 0 0 20px 0;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    padding-bottom: 15px;
    border-bottom: 3px solid #667eea;
}

.config-card h3 .material-symbols-outlined {
    color: #667eea;
}

/* Grille coordonnées bancaires */
.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* Textes éditables */
.text-editor-group {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.text-editor-group.virement {
    border-left-color: #3498db;
}

.text-editor-group.cheque {
    border-left-color: #27ae60;
}

.text-editor-group.formation {
    border-left-color: #f39c12;
}

.text-editor-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.text-editor-group textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Abel', sans-serif;
    font-size: 14px;
    resize: vertical;
}

.text-editor-group textarea:focus {
    border-color: #667eea;
    outline: none;
}

.text-editor-group small {
    display: block;
    margin-top: 8px;
    color: #7f8c8d;
    font-size: 12px;
}

/* Variables disponibles */
.variables-box {
    background: #e8f4f8;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.variables-box h4 {
    font-size: 13px;
    color: #0c5460;
    margin: 0 0 10px 0;
}

.variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variable-tag {
    background: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: #495057;
    border: 1px solid #bee5eb;
}

/* Texte légal */
.legal-textarea {
    min-height: 250px !important;
}

/* ========================================
   PAGE CONTRATS PRESTATION
   ======================================== */
.contrats-prestation .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.contrats-prestation .stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.contrats-prestation .stat-card.success {
    border-left: 4px solid #27ae60;
}

.contrats-prestation .stat-card.warning {
    border-left: 4px solid #f39c12;
}

.contrats-prestation .stat-number {
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: #2c3e50;
}

.contrats-prestation .stat-label {
    color: #7f8c8d;
    font-size: 0.9em;
}

.filters-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.filters-form {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
}

.filter-group select {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Abel', sans-serif;
    min-width: 150px;
}

.filter-group select:focus {
    border-color: #667eea;
    outline: none;
}

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

.contrats-table th {
    background: #f8f9fa;
    padding: 15px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e9ecef;
}

.contrats-table td {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.contrats-table tr:hover {
    background: #f8f9fa;
}

.contrat-info-cell strong {
    display: block;
    color: #333;
}

.contrat-info-cell small {
    color: #7f8c8d;
}

/* ========================================
   PAGE MODELES EMAILS - ONGLETS
   ======================================== */
.email-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0;
}

.email-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.email-tab:hover {
    color: #495057;
    background: #f8f9fa;
}

.email-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: transparent;
}

.email-tab .material-symbols-outlined {
    font-size: 20px;
}

/* ========================================
   PAGE PARAMETRES - CRONS
   ======================================== */
.cron-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.cron-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.cron-card.active {
    border-color: #27ae60;
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
}

.cron-card.inactive {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    opacity: 0.8;
}

.cron-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.cron-icon {
    font-size: 32px;
    color: #667eea;
    padding: 10px;
    border-radius: 10px;
}

.cron-card.inactive .cron-icon {
    color: #999;
}

.cron-title {
    flex: 1;
}

.cron-title h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
    border-bottom: none;
    padding-bottom: 0;
}

.cron-frequence {
    font-size: 12px;
    color: #7f8c8d;
}

.cron-description {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.cron-status {
    text-align: right;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ========================================
   PAGE PARAMETRES - SMS
   ======================================== */
.sms-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.sms-logo {
    font-size: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px;
    border-radius: 15px;
}

.sms-title-block h2 {
    margin: 0 0 5px 0;
    color: #333;
}

.sms-title-block .description {
    margin: 0;
    color: #7f8c8d;
}

.sms-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
}

.sms-status.active {
    background: #d4edda;
    color: #155724;
}

.sms-status.inactive {
    background: #f8f9fa;
    color: #6c757d;
}

.status-icon {
    font-size: 18px;
}

.sms-toggle-section {
    margin-bottom: 30px;
}

.toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s;
}

.toggle-card.enabled {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
}

.toggle-card.disabled {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
}

.toggle-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-emoji {
    font-size: 32px;
}

.toggle-info strong {
    display: block;
    font-size: 16px;
    color: #333;
}

.toggle-info p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #666;
}

.switch-toggle {
    position: relative;
    width: 60px;
    height: 32px;
    cursor: pointer;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-toggle .switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 32px;
    transition: 0.3s;
}

.switch-toggle .switch-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.switch-toggle input:checked + .switch-slider {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(28px);
}

.switch-toggle input:disabled + .switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.alert-warning-sms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px 15px;
    background: #fff3cd;
    border-radius: 8px;
    color: #856404;
    font-size: 14px;
}

.sms-how-it-works {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.sms-how-it-works h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.sms-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.sms-step {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.step-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.step-content strong {
    display: block;
    color: #333;
    margin-bottom: 4px;
}

.step-content p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.sms-test-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sms-test-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.test-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.test-form .form-group {
    flex: 1;
    min-width: 200px;
}

.test-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.test-form input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
}

.test-form input:focus {
    border-color: #667eea;
    outline: none;
}

.test-result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: none;
}

.test-result.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.test-result.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}/* ============================================================
   PATCH CSS - À AJOUTER À style_admin.css
   Styles manquants pour contrats_config.php et parametres.php
   ============================================================ */

/* ===========================================
   CARTES PLIABLES (collapsible)
   Utilisées dans contrats_config.php
   =========================================== */

.collapsible-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    background: #f8f9fa;
    transition: background 0.2s;
}

.collapsible-header:hover {
    background: #e9ecef;
}

.collapsible-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #333;
}

.collapsible-header h3 .material-symbols-outlined {
    color: #667eea;
}

.collapsible-header .toggle-icon {
    color: #666;
    transition: transform 0.3s;
}

.collapsible-header.collapsed .toggle-icon {
    transform: rotate(0deg);
}

.collapsible-header:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    padding: 25px;
    border-top: 1px solid #eee;
}

.collapsible-content.hidden {
    display: none;
}

/* ===========================================
   CONDITIONS D'ANNULATION (Article 8)
   Utilisées dans contrats_config.php
   =========================================== */

.conditions-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 1200px) {
    .conditions-container {
        grid-template-columns: 1fr;
    }
}

.conditions-list {
    margin-top: 30px;
}

.conditions-list h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #333;
}

.condition-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #667eea;
    transition: all 0.2s;
}

.condition-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.condition-card.inactive {
    opacity: 0.6;
    border-left-color: #999;
}

.condition-card.specific {
    border-left-color: #f39c12;
}

.condition-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.condition-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.condition-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.condition-dates {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.condition-seuils {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.condition-actions {
    display: flex;
    gap: 8px;
}

/* Badges pour conditions */
.badge-sm {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}

.badge-active {
    background: #d4edda;
    color: #155724;
}

.badge-inactive {
    background: #f8d7da;
    color: #721c24;
}

.badge-count {
    background: #e3f2fd;
    color: #1565c0;
}

.badge-formation {
    background: #fff3cd;
    color: #856404;
}

/* Aperçu seuils */
.apercu-seuils {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.apercu-seuils h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.percent-100 { color: #10b981; font-weight: 600; }
.percent-50 { color: #f59e0b; font-weight: 600; }
.percent-0 { color: #ef4444; font-weight: 600; }

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.dot-100 { background: #10b981; }
.dot-50 { background: #f59e0b; }

/* ===========================================
   SMS - Styles complémentaires
   Utilisées dans parametres.php
   =========================================== */

.sms-config-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sms-config-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #667eea;
}

.sms-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .sms-form .form-row {
        grid-template-columns: 1fr;
    }
}

.sms-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.sms-form .help-text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* OVH Info Box */
.ovh-info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #000e9c 0%, #00185e 100%);
    border-radius: 10px;
    margin-bottom: 25px;
}

.ovh-logo {
    font-size: 24px;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    color: #000e9c;
    font-weight: bold;
}

.ovh-text {
    color: white;
}

.ovh-text p {
    margin: 0 0 5px 0;
    font-size: 14px;
}

.ovh-link {
    color: #7dd3fc;
    text-decoration: none;
    font-weight: 500;
}

.ovh-link:hover {
    color: #bae6fd;
    text-decoration: underline;
}

/* Password input with toggle */
.password-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-group input {
    flex: 1;
    padding-right: 45px;
}

.btn-show-password {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-show-password:hover {
    opacity: 1;
}

/* Boutons SMS */
.btn-save-sms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-save-sms:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-test-sms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f8f9fa;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-test-sms:hover {
    background: #e9ecef;
    border-color: #667eea;
}

/* Steps grid (Comment ça marche) */
.steps-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    min-width: 120px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.step-item .step-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.step-item .step-emoji {
    font-size: 24px;
}

.step-item .step-text {
    font-size: 13px;
    color: #555;
    text-align: center;
}

.step-arrow {
    font-size: 20px;
    color: #ccc;
}

/* Info cards SMS */
.info-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

.info-card h4 {
    margin: 0 0 15px 0;
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-card .info-content p {
    margin: 8px 0;
    font-size: 14px;
    color: #555;
}

/* ===========================================
   UNIVERS EDIT - Styles spécifiques
   =========================================== */

/* Univers selector pills */
.univers-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.univers-btn {
    padding: 8px 16px;
    border: 2px solid var(--univers-color, #667eea);
    border-radius: 20px;
    text-decoration: none;
    color: var(--univers-color, #667eea);
    transition: all 0.3s;
    font-weight: 500;
}

.univers-btn.active,
.univers-btn:hover {
    background: var(--univers-color, #667eea);
    color: white;
}

/* Color preview bar */
.color-preview-bar {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.color-preview-bar h2 {
    font-family: inherit;
    margin: 0;
}

/* Form grid 2 colonnes */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Color picker visual */
.color-picker-visual {
    width: 40px;
    height: 30px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}

/* Badge hérité (emails) */
.inherited-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 50%;
    font-size: 12px;
    cursor: help;
}

/* Bouton reset couleur */
.btn-reset-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ffebee;
    color: #c62828;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset-color:hover {
    background: #c62828;
    color: white;
}

/* Font preview */
.font-preview {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--univers-color, #667eea);
}

.font-preview-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.font-preview-text {
    font-size: 14px;
    color: #666;
}

/* Logo cards */
.logo-card {
    text-align: center;
}

.logo-card h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.logo-preview {
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-preview.light-bg {
    background-color: #fff;
    background-image: 
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.logo-preview.favicon {
    width: 100px;
    height: 100px;
}

.logo-preview .logo-container {
    display: contents;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.logo-preview .logo-container svg {
    display: block;
}

.logo-preview.favicon .logo-container {
    display: content;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.logo-preview.favicon .logo-container svg {
    display: block;
}

.logo-preview.empty {
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-preview img {
    max-width: 160px;
    max-height: 160px;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* Upload forms */
.file-input {
    display: none;
}

.upload-form {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.inline-form {
    margin-top: 10px;
}

/* Email preview */
.email-preview-section {
    margin-bottom: 30px;
}

.email-preview-frame {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
}

/* ===========================================
   GRILLES - Mise à jour du responsive
   =========================================== */

/* Logos grid avec 3 colonnes */
.logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .logos-grid {
        grid-template-columns: 1fr;
    }
}

/* Stats grid 4 colonnes */
.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 1200px) {
    .stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   ADMIN CARDS - Utilisées dans univers_edit.php
   =========================================== */

.admin-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.admin-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.admin-card-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: 16px;
}

.admin-card-header h3 .material-symbols-outlined {
    color: #667eea;
}

.admin-card-body {
    padding: 20px;
}

/* ===========================================
   SEUILS DE REMBOURSEMENT (Article 8)
   =========================================== */

.seuils-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.seuil-card {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.seuil-card label {
    font-weight: 600;
    margin-right: auto;
}

.seuil-card input {
    width: 70px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}

.seuil-100 {
    border-left: 4px solid #10b981;
}

.seuil-50 {
    border-left: 4px solid #f59e0b;
}

.seuil-0 {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

/* Aperçu dans le contrat */
.preview-box {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.preview-box h4 {
    margin: 0 0 15px 0;
    color: #92400e;
    font-size: 14px;
}

.preview-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}

.preview-item:last-child {
    border-bottom: none;
}

/* ===========================================
   PAGE HEADER SIMPLE (avec bouton retour)
   =========================================== */

.page-header-simple {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.page-header-simple h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8f9fa;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-back:hover {
    background: #e9ecef;
    color: #333;
}

.btn-back .material-symbols-outlined {
    font-size: 18px;
}

/* ===========================================
   PAGE RÉGULARISATIONS
   =========================================== */

/* Titres colorés */
.card-title.text-orange {
    color: #e67e22;
    border-bottom-color: #e67e22;
}

.card-title.text-green {
    color: #27ae60;
    border-bottom-color: #27ae60;
}

/* Empty state text */
.empty-state-text {
    text-align: center;
    color: #7f8c8d;
    padding: 40px;
}

/* Margin bottom utilitaire */
.mb-20 {
    margin-bottom: 20px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

/* Card header flex (titre + filtres) */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
    flex-wrap: wrap;
    gap: 15px;
}

.card-header-flex .card-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Sous-titre gris */
.subtitle-muted {
    color: #7f8c8d;
    margin-bottom: 20px;
}

/* Cellules montants */
.montant-cell {
    text-align: right;
    white-space: nowrap;
}

.montant-paye {
    text-align: right;
    color: #27ae60;
    white-space: nowrap;
}

.montant-paye strong {
    font-weight: bold;
}

.montant-reste {
    text-align: right;
    white-space: nowrap;
}

.montant-reste strong {
    color: #e74c3c;
    font-size: 1.1em;
}

.text-danger-bold {
    color: #e74c3c;
    font-weight: bold;
}

/* Footer tableau régularisations */
.table tfoot .tfoot-total {
    font-weight: bold;
    background: #f8f9fa;
}

.table tfoot .tfoot-montant {
    text-align: right;
    color: #e74c3c;
    font-size: 1.2em;
}

/* Info box modal */
.info-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-box p {
    margin: 5px 0;
}

/* Form row flex */
.form-row-flex {
    display: flex;
    gap: 15px;
}

.form-row-flex .form-group {
    flex: 1;
}

/* Modal medium */
.modal-content.modal-md {
    max-width: 500px;
}

.modal-content.modal-lg {
    max-width: 600px;
}

/* Bouton Stripe */
.btn-stripe {
    background: linear-gradient(135deg, #635bff 0%, #7a73ff 100%);
    color: white;
    border: none;
}

.btn-stripe:hover {
    background: linear-gradient(135deg, #5851ea 0%, #6b64f0 100%);
    box-shadow: 0 5px 15px rgba(99, 91, 255, 0.4);
}

/* Input group avec suffix */
.input-group {
    display: flex;
    align-items: center;
}

.input-group .form-control {
    border-radius: 8px 0 0 8px;
}

.input-suffix {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-left: none;
    padding: 8px 15px;
    border-radius: 0 8px 8px 0;
    color: #666;
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: normal !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Success message */
.success-message {
    text-align: center;
    padding: 20px;
    color: #27ae60;
}

.success-message .material-symbols-outlined {
    font-size: 48px;
}

.success-message h4 {
    margin: 10px 0 0 0;
}

/* Link copy container */
.link-copy-container {
    display: flex;
    gap: 5px;
}

.link-copy-container .form-control {
    flex: 1;
    font-family: monospace;
    font-size: 0.85em;
}

/* Bouton copier */
.btn-copy {
    padding: 8px 12px;
}

.btn-copy.copied {
    background: #27ae60;
    color: white;
}

/* Email status */
.email-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
}

.email-status.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.email-status.error {
    background: #ffebee;
    color: #c62828;
}

/* Loading spinner */
.loading-spinner {
    text-align: center;
    padding: 40px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #635bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error message box */
.error-message-box {
    background: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* ===========================================
   CODES PROMO
   =========================================== */

.badge-code {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-family: monospace;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.badge-code:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 9999;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: slideInRight 0.3s ease;
}

.toast-success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
}

.toast-error {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===========================================
   UTILITAIRES SUPPLÉMENTAIRES
   =========================================== */

.nowrap {
    white-space: nowrap !important;
}

.text-muted {
    color: #7f8c8d !important;
}

/* ===========================================
   PAGE PARAMÈTRES ONGLETS
   =========================================== */

.page-header-with-back {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.page-header-with-back h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.onglets-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

@media (max-width: 900px) {
    .onglets-container {
        grid-template-columns: 1fr;
    }
}

.onglets-list {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
}

.onglets-list h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

.onglet-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.onglet-item:hover {
    background: #e9ecef;
}

.onglet-item.dragging {
    opacity: 0.5;
    border: 2px dashed #667eea;
}

.onglet-item.inactive {
    opacity: 0.5;
    background: #fff;
}

.onglet-drag-handle {
    color: #aaa;
    cursor: grab;
}

.onglet-icon {
    width: 40px;
    height: 40px;
    background: #667eea;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onglet-item.inactive .onglet-icon {
    background: #ccc;
}

.onglet-info {
    flex: 1;
}

.onglet-titre {
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.onglet-description {
    font-size: 13px;
    color: #666;
}

.onglet-cle {
    font-size: 11px;
    color: #999;
    font-family: monospace;
}

.onglet-actions {
    display: flex;
    gap: 8px;
}

.onglet-actions .btn-sm {
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onglet-actions .btn-edit {
    background: #e3f2fd;
    color: #1976d2;
}

.onglet-actions .btn-toggle {
    background: #fff3e0;
    color: #f57c00;
}

.onglet-actions .btn-toggle.is-active {
    background: #e8f5e9;
    color: #388e3c;
}

/* Formulaire d'édition */
.edit-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
    position: sticky;
    top: 20px;
}

.edit-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

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

.edit-panel .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.edit-panel .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.edit-panel .form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Sélecteur d'icône */
.icon-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-preview {
    width: 50px;
    height: 50px;
    background: #667eea;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.icon-input-group {
    flex: 1;
}

.icon-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.icon-suggestion {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-suggestion:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.icon-suggestion.selected {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Checkbox toggle */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #667eea;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.btn-save-edit {
    width: 100%;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-save-edit:hover {
    background: #5a6fd6;
}

.no-edit-message {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.no-edit-message .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ddd;
}

/* Info box bleu (paramètres) */
.info-box-blue {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1565c0;
}

.info-box-blue .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

/* ===========================================
   CONTENT CARD (alternative à .card)
   =========================================== */

.content-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.content-card .card-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.content-card .card-header h2 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===========================================
   DATA TABLE (alternative à .table)
   =========================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

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

.data-table th {
    background: #f8f9fa;
    font-weight: 600;
    text-align: center;
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

/* ===========================================
   PAGE UNIVERS (liste)
   =========================================== */

/* Grille des univers */
.univers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Carte univers */
.univers-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.univers-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.univers-card-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 25px;
}

/* Section logo */
.univers-logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.univers-logo {
    max-width: 180px;
    max-height: 100px;
}

.univers-logo svg {
    width: 100%;
    height: auto;
    max-height: 100px;
}

.univers-logo-placeholder {
    color: #aaa;
    font-size: 14px;
    font-style: italic;
}

/* Stats */
.univers-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.univers-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.univers-stat .material-symbols-outlined {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stat-color, #667eea);
    color: white;
    border-radius: 8px;
    font-size: 20px;
}

.univers-stat .stat-info {
    display: flex;
    flex-direction: column;
}

.univers-stat .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.univers-stat .stat-label {
    font-size: 12px;
    color: #888;
}

/* Footer de la carte */
.univers-card-footer {
    padding: 20px 25px;
    border-top: 1px solid #f0f0f0;
    position: relative;
}

.univers-name {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.univers-description {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.univers-description.text-muted {
    color: #bbb;
    font-style: italic;
}

.univers-badge-inactive {
    position: absolute;
    top: 20px;
    right: 25px;
    padding: 4px 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}

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

@media (max-width: 600px) {
    .univers-card-content {
        grid-template-columns: 1fr;
    }
    
    .univers-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .univers-stat {
        flex: 1;
        min-width: 120px;
    }
}

/* ===========================================
   PAGES VIEW (formateur_view, intervenant_view)
   =========================================== */

.view-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.view-header {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.view-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #667eea;
}

.view-photo-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 48px;
    font-weight: bold;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.info-box-view {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.info-box-view.success { border-left-color: #27ae60; }
.info-box-view.warning { border-left-color: #f39c12; }
.info-box-view.danger { border-left-color: #e74c3c; }
.info-box-view.info { border-left-color: #3498db; }

.info-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.info-value {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.info-value small {
    font-size: 14px;
    color: #7f8c8d;
    font-weight: normal;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #667eea;
    font-size: 24px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #667eea;
}

.section-title .material-symbols-outlined {
    color: #667eea;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
}

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

.stats-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.stats-table tr:hover {
    background: #f8f9fa;
}

.stats-table .text-success { color: #27ae60; }
.stats-table .text-danger { color: #e74c3c; }
.stats-table .text-muted { color: #7f8c8d; }

.session-card {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 4px solid #27ae60;
}

.session-card.past {
    opacity: 0.7;
    border-left-color: #95a5a6;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
}

.contact-item .material-symbols-outlined {
    color: #667eea;
}

.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-actif { background: #d4edda; color: #155724; }
.badge-inactif { background: #f8d7da; color: #721c24; }

/* Éléments supplémentaires pour formation_view */
.view-image {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
}

.person-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.person-card {
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.person-name {
    font-weight: 600;
    color: #2c3e50;
}

.person-profession {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 3px;
}

.session-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.session-dates .material-symbols-outlined {
    color: #667eea;
    font-size: 20px;
}

/* ===========================================
   PAGE ENVOYER EMAILS APPRENANTS
   =========================================== */

.filters-bar {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.filters-bar .form-group {
    margin: 0;
}

.filters-bar label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    display: block;
}

.filters-bar select {
    min-width: 180px;
}

.apprenants-table {
    width: 100%;
    border-collapse: collapse;
}

.apprenants-table th,
.apprenants-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.apprenants-table th {
    background: #f8f9fa;
    font-weight: 600;
}

.apprenants-table tr:hover {
    background: #f8f9fa;
}

.checkbox-cell {
    width: 40px;
    text-align: center;
}

.btn-select-all {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

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

.resultats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.resultats-table th,
.resultats-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.resultats-table .success { color: #28a745; }
.resultats-table .error { color: #dc3545; }
.resultats-table .simule { color: #17a2b8; }

.warning-box {
    background: #fff3cd;
    border-left: 4px solid #f39c12;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
}

.info-box-cyan {
    background: #d1ecf1;
    border-left: 4px solid #17a2b8;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
}

.actions-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    flex-wrap: wrap;
}

.count-selected {
    font-weight: 600;
    color: #FF3366;
}

.email-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.email-choice label {
    font-weight: 500;
    white-space: nowrap;
}

.email-choice select {
    min-width: 250px;
}

.no-results {
    text-align: center;
    padding: 40px;
    color: #666;
}

.custom-email-zone {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.custom-email-zone .form-group {
    margin-bottom: 15px;
}

.custom-email-zone label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.custom-email-zone input,
.custom-email-zone textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.custom-email-zone textarea {
    font-family: monospace;
    resize: vertical;
}

.custom-email-zone .text-muted {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    display: block;
}

/* ===========================================
   CLASSES UTILITAIRES - ALIGNEMENT TEXTE
   =========================================== */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* ===========================================
   MODALE DEPLACEMENT DE SESSION
   =========================================== */
.sessions-list-move {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.session-option-move {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.session-option-move:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.session-option-move input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

.session-option-move input[type="radio"]:checked + .session-option-content-move {
    color: #667eea;
}

.session-option-move:has(input:checked) {
    border-color: #667eea;
    background: #f0f4ff;
}

.session-option-content-move {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-option-content-move strong {
    font-size: 14px;
}

.places-dispo-move {
    font-size: 12px;
    color: #27ae60;
    font-weight: 500;
}

.alert-box.warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
}

/* ===========================================
   PAGE FRAIS DE PAIEMENT
   =========================================== */
.tabs-nav {
    display: flex;
    gap: 5px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}

.tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    text-decoration: none;
    color: #666;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    background: #f8f9fa;
}

.tab-link:hover {
    background: #e9ecef;
    color: #333;
}

.tab-link.active {
    background: white;
    color: #333;
    border-color: #e0e0e0;
    font-weight: 600;
}

.tab-link .material-symbols-outlined {
    font-size: 20px;
}

.tab-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.tab-link.active .tab-count {
    background: rgba(0,0,0,0.08);
}

.tab-link.active.tab-cb { border-top: 3px solid #9b59b6; }
.tab-link.active.tab-virement { border-top: 3px solid #3498db; }
.tab-link.active.tab-cheque { border-top: 3px solid #f39c12; }
.tab-link.active.tab-especes { border-top: 3px solid #27ae60; }
.tab-link.active.tab-config { border-top: 3px solid #667eea; }

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 1200px) {
    .config-grid { grid-template-columns: 1fr; }
}

.payment-method-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #667eea;
}

.payment-method-card.cb { border-left-color: #9b59b6; }
.payment-method-card.virement { border-left-color: #3498db; }
.payment-method-card.cheque { border-left-color: #f39c12; }
.payment-method-card.especes { border-left-color: #27ae60; }

.payment-method-card h4 {
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-method-card.cb h4 { color: #9b59b6; }
.payment-method-card.virement h4 { color: #3498db; }
.payment-method-card.cheque h4 { color: #f39c12; }
.payment-method-card.especes h4 { color: #27ae60; }

.frais-inputs {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.frais-inputs .form-group {
    flex: 1;
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.checkbox-label input { width: 18px; height: 18px; }

.stripe-option {
    background: #fff3cd;
    padding: 12px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #ffc107;
}

.stripe-option small {
    display: block;
    margin-left: 26px;
    color: #856404;
    font-size: 12px;
}

.frais-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.frais-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 20px;
}

.frais-card.inactive {
    opacity: 0.6;
    border-left: 4px solid #e74c3c;
}

.frais-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.frais-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.frais-dates {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

.frais-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .frais-details { grid-template-columns: repeat(2, 1fr); }
}

.frais-detail-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.frais-detail-item .label {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

.frais-detail-item .value {
    font-size: 14px;
    font-weight: 600;
}

.frais-detail-item.cb .value { color: #9b59b6; }
.frais-detail-item.virement .value { color: #3498db; }
.frais-detail-item.cheque .value { color: #f39c12; }
.frais-detail-item.especes .value { color: #27ae60; }

.frais-card-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.badge-active { background: #27ae60; color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; }
.badge-inactive { background: #e74c3c; color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; }
.badge-deduit { background: #3498db; color: white; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-left: 5px; }

/* ===========================================
   PAGE SESSION VIEW & VUES DÉTAILLÉES
   =========================================== */
.view-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

@media (max-width: 1024px) {
    .view-grid {
        grid-template-columns: 1fr;
    }
}

.info-grid {
    display: grid;
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.info-value {
    font-size: 15px;
    color: #2c3e50;
}

.info-value a {
    color: #667eea;
    text-decoration: none;
}

.info-value a:hover {
    text-decoration: underline;
}

/* Équipe pédagogique */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.team-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.team-card.intervenant {
    border-left-color: #e67e22;
}

.team-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
    overflow: hidden;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-name a {
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
}

.team-name a:hover {
    color: #667eea;
}

.team-role {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
}

.team-profession {
    font-size: 13px;
    color: #555;
    margin-top: 3px;
}

.team-frais {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #e67e22;
    margin-top: 8px;
}

.team-frais .material-symbols-outlined {
    font-size: 16px;
}

/* Actions rapides sidebar */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #2c3e50;
    text-decoration: none;
    transition: all 0.2s;
}

.quick-action-btn:hover {
    background: #667eea;
    color: white;
}

.quick-action-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Frais résumé sidebar */
.frais-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
}

.frais-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ddd;
}

.frais-row:last-child {
    border-bottom: none;
}

.frais-row.total {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #ddd;
    border-bottom: none;
    font-size: 1.1em;
}

.frais-repartition {
    margin-top: 10px;
}

.frais-person {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dotted #eee;
}

.frais-person:last-child {
    border-bottom: none;
}

/* Stats mini sidebar */
.stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}

.stat-mini-item {
    padding: 15px 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-mini-value {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

.stat-mini-label {
    display: block;
    font-size: 11px;
    color: #7f8c8d;
    text-transform: uppercase;
}

/* ===========================================
   PAGE RÉPARTITION DES FRAIS
   =========================================== */
.repartition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.repartition-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.repartition-card.prestataire-externe {
    border-left: 4px solid #e67e22;
}

.repartition-card.prestataire-interne {
    border-left: 4px solid #667eea;
}

.repartition-header {
    background: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.repartition-type {
    display: block;
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.repartition-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.repartition-details {
    padding: 15px;
}

.repartition-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.repartition-row:last-child {
    border-bottom: none;
}

.repartition-row.total {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #eee;
    border-bottom: none;
}

.repartition-row .label {
    color: #7f8c8d;
}

.repartition-row .value {
    font-weight: 600;
    color: #2c3e50;
}

.repartition-row.total .value {
    font-size: 1.2em;
    color: #e74c3c;
}

/* ===========================================
   FIX DASHBOARD STATS (STAT-CARDS SUR FOND COLORÉ)
   =========================================== */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-stats .stat-card {
    color: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dashboard-stats .stat-card .stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-stats .stat-card .stat-icon .material-symbols-outlined {
    font-size: 28px;
    color: white;
}

.dashboard-stats .stat-card .stat-content {
    flex: 1;
}

.dashboard-stats .stat-card .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: white !important;
    margin-bottom: 2px;
}

.dashboard-stats .stat-card .stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================================
   BADGES MODE DE PAIEMENT
   =========================================== */
.badge-paiement-carte,
.badge-paiement-virement,
.badge-paiement-cheque,
.badge-paiement-especes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge-paiement-carte .material-symbols-outlined,
.badge-paiement-virement .material-symbols-outlined,
.badge-paiement-cheque .material-symbols-outlined,
.badge-paiement-especes .material-symbols-outlined {
    font-size: 16px;
}

.badge-paiement-carte {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

.badge-paiement-virement {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.badge-paiement-cheque {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.badge-paiement-especes {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

/* ===========================================
   PAGE SESSION VIEW - STYLES SPÉCIFIQUES
   =========================================== */

/* Encadré info par défaut (gris) - Style session_edit */
.default-info-box {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}

.default-info-box.formateur {
    background: #f3f2f4;
    border-left: 4px solid #2196f3;
    margin-bottom: 20px;
}

.default-info-box.intervenant {
    background: #f0f0f0;
    border-left: 4px solid #9c27b0;
    margin-bottom: 20px;
}

.default-info-box .material-symbols-outlined {
    color: #667eea;
    font-size: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

.default-info-box strong {
    color: #2c3e50;
}

/* Badges noms pour formateurs/intervenants */
.badge-name {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
    margin-bottom: 5px;
}

.badge-formateur {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.badge-intervenant {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

/* Grille de stats pour session_view */
.stats-grid-session {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.stat-box-session {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

.stat-icon-mini {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-mini.blue { background: #3498db; }
.stat-icon-mini.red { background: #e74c3c; }
.stat-icon-mini.orange { background: #f39c12; }
.stat-icon-mini.green { background: #27ae60; }
.stat-icon-mini.purple { background: #8b5cf6; }
.stat-icon-mini.gray { background: #6b7280; }

.stat-icon-mini .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.stat-value-session {
    font-size: 22px;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1.2;
}

.stat-label-session {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   SESSION VIEW - Styles spécifiques
   ======================================== */

/* Boîte de section avec fond gris */
.section-header-box {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.section-header-box.mb-15 {
    margin-bottom: 15px;
}

/* Alerte info jaune */
.alert-warning-light {
    background: #fff3cd;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Légende des réservations */
.reservations-legend {
    background: #f8f9fa;
    padding: 8px 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

/* Badges pour formateurs/intervenants */
.person-badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
}

.person-badge-formateur {
    background: #e3f2fd;
}

.person-badge-intervenant {
    background: #f3e5f5;
}

/* Liste de badges */
.badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Cellules de paiement */
.payment-cell {
    white-space: nowrap;
    text-align: center;
}

.payment-amount-paid {
    color: #27ae60;
    font-weight: bold;
}

.payment-amount-unpaid {
    color: #721c24;
    font-weight: bold;
}

.payment-amount-pending {
    color: #e74c3c;
    font-weight: bold;
}

.payment-date {
    color: #7f8c8d;
}

.payment-icon {
    font-size: 14px;
    vertical-align: middle;
}

.stripe-fees {
    color: #e74c3c;
}

/* Texte utilitaires */
.text-muted {
    color: #7f8c8d;
}

.text-success {
    color: #27ae60;
}

.text-danger {
    color: #e74c3c;
}

.text-italic {
    font-style: italic;
}

/* Sous-valeur dans info-box */
.info-subvalue {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Message vide centré */
.empty-message {
    text-align: center;
    color: #7f8c8d;
    padding: 40px;
}

/* Boutons d'actions en haut de page */
.page-actions {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

/* Actions en bas de section */
.section-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Adresse pre-formatée */
.address-content {
    line-height: 1.8;
    white-space: pre-wrap;
    margin-top: 15px;
}

/* ===========================================
   PAGE RÉPARTITION DES FRAIS
   =========================================== */

/* En-tête de session */
.session-header-title {
    color: #2c3e50;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.session-header-info {
    border-left: 4px solid #27ae60;
    padding: 15px 15px 15px 20px;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

.session-header-info .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
}

.session-header-info .info-row:not(:last-child) {
    margin-bottom: 8px;
}

.session-header-info .info-row .material-symbols-outlined.green {
    color: #27ae60;
}

/* Grille répartition 3 colonnes */
.repartition-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ===========================================
   TABLEAU PAIEMENTS - CLASSES UTILITAIRES
   =========================================== */

/* Cellules tableau */
.td-nowrap {
    white-space: nowrap !important;
}

.td-center {
    text-align: center;
}

.td-right {
    text-align: right;
}

.td-left {
    text-align: left;
}

/* Montants colorés */
.montant-success {
    color: #27ae60;
}

.montant-success strong {
    color: #27ae60;
}

.montant-danger {
    color: #e74c3c;
}

.montant-danger strong {
    color: #e74c3c;
}

.montant-error {
    color: #721c24;
}

.montant-error strong {
    color: #721c24;
}

.montant-muted {
    color: #7f8c8d;
}

/* Frais et Net dans tableau */
.td-frais {
    white-space: nowrap;
    color: #e74c3c;
    font-weight: bold;
}

.td-net {
    white-space: nowrap;
    color: #27ae60;
    font-weight: bold;
}

/* Icône dans badge */
.badge .material-symbols-outlined {
    font-size: 14px;
    vertical-align: middle;
}

/* Badge interne petit */
.badge-small {
    font-size: 10px;
}

/* Table sans marge */
.table-no-margin {
    margin: 0;
}

/* Overflow horizontal */
.table-scroll {
    overflow-x: auto;
}

/* Tarif différent (barré ou alternatif) */
.tarif-different {
    color: #e74c3c;
    font-weight: bold;
}

/* ===========================================
   CLASSES UTILITAIRES - MARGINS & SPACING
   =========================================== */

.mt-5 { margin-top: 5px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mr-10 { margin-right: 10px; }
.mb-15 { margin-bottom: 15px; }

/* ===========================================
   CLASSES UTILITAIRES - DISPLAY & FLEX
   =========================================== */

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-flex-center { 
    display: flex; 
    align-items: center; 
}
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.flex-gap-10 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flex-gap-15 {
    display: flex;
    gap: 15px;
}

/* ===========================================
   CLASSES UTILITAIRES - TEXTE
   =========================================== */

.text-muted {
    color: #7f8c8d;
}

.text-small {
    font-size: 13px;
}

.text-large {
    font-size: 1.2em;
}

.help-text {
    color: #7f8c8d;
    font-size: 13px;
}

.help-block {
    color: #7f8c8d;
    margin-top: 8px;
    display: block;
}

.icon-inline {
    font-size: 16px;
    vertical-align: middle;
}

/* ===========================================
   CLASSES UTILITAIRES - INPUTS
   =========================================== */

.input-small {
    max-width: 150px;
}

.checkbox-large {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.label-flex {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* ===========================================
   CLASSES UTILITAIRES - POURCENTAGE INPUT
   =========================================== */

.percent-symbol {
    font-size: 1.2em;
    font-weight: bold;
}

/* ===========================================
   PAGE FRAIS DE PAIEMENT
   =========================================== */

/* Stats grid avec marge */
.stats-grid-mb {
    margin-bottom: 25px;
}

/* État vide */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #888;
}

.empty-state .material-symbols-outlined {
    font-size: 48px;
    color: #ddd;
}

.empty-state p {
    margin-top: 15px;
}

/* Groupe de formation */
.formation-group {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.formation-header {
    color: white;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.formation-header-title {
    font-size: 16px;
    font-weight: bold;
}

.formation-header-subtitle {
    font-size: 13px;
    opacity: 0.9;
}

.formation-header-stats {
    display: flex;
    align-items: center;
    gap: 15px;
}

.formation-header-net {
    font-size: 14px;
}

.formation-header-net .label {
    opacity: 0.8;
}

/* Résumé formation */
.formation-summary {
    background: #f8f9fa;
    padding: 8px 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

/* Contenu formation (visible par défaut) */
.formation-content {
    display: block;
}

/* Légende stats dans formation */
.formation-legend {
    background: #f8f9fa;
    padding: 8px 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

/* Formation content collapsed */
.formation-content.collapsed {
    display: none;
}

/* Badge avec marge gauche */
.badge-ml {
    margin-left: 10px;
}

/* Sous-titre avec indentation */
.subtitle-indent {
    margin-left: 30px;
}

/* Header Formation - Violet */
.formation-header.bg-formation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Header Session - Bleu */
.formation-header.bg-session,
.session-header.bg-session {
    background: #3498db;
}

/* Header Session Passée - Gris */
.formation-header.bg-session-passed,
.session-header.bg-session-passed {
    background: #95a5a6;
}

/* Sous-groupe Session */
.session-subgroup {
    margin: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.session-header {
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.session-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.session-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.session-content {
    display: block;
}

/* Badge passée translucide */
.badge-passed {
    background: rgba(255,255,255,0.3);
    margin-left: 10px;
}

/* Toggle icon dans les headers */
.toggle-icon {
    vertical-align: middle;
    margin-right: 10px;
    font-size: 20px;
    transition: transform 0.2s;
}

/* Stats dans les headers */
.header-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

/* Total général */
.total-general {
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-general-label {
    font-size: 16px;
    font-weight: bold;
}

.total-general-values {
    display: flex;
    gap: 30px;
    font-size: 15px;
}

.total-general-values .opacity-80 {
    opacity: 0.8;
}

/* Section configuration */
.config-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
}

.config-section-title {
    margin: 0 0 20px 0;
    color: #2c3e50;
}

.config-section-title .material-symbols-outlined {
    vertical-align: middle;
}

/* Form row horizontal */
.form-row-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.form-row-flex .form-group {
    flex: 1;
}

/* Séparateur */
.hr-section {
    margin: 25px 0;
}

/* Boutons alignés à droite */
.buttons-right {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Badge dynamique (couleur en attribut style) */
.badge-dynamic {
    color: white;
}

/* Info warning box */
.info-warning-box {
    font-size: 12px;
    color: #856404;
    background: #fff3cd;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.info-warning-box .material-symbols-outlined {
    font-size: 14px;
    vertical-align: middle;
}

/* Formulaire inline */
.form-inline {
    display: inline;
}

/* Bouton danger */
.btn-danger-custom {
    background: #e74c3c;
}

/* Icône dans date */
.icon-inline {
    font-size: 14px;
    vertical-align: middle;
}

/* Hint sous input */
.input-hint {
    color: #888;
}

/* ===========================================
   CLASSES UTILITAIRES SUPPLÉMENTAIRES
   =========================================== */

/* Margins */
.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

/* Texte muted */
.text-muted {
    color: #7f8c8d;
}

.text-muted-sm {
    color: #7f8c8d;
    font-size: 13px;
}

/* Hidden */
.hidden {
    display: none;
}

/* Flex center avec gap */
.flex-center-gap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flex-gap-15 {
    display: flex;
    gap: 15px;
}

/* Input avec max-width */
.input-small {
    max-width: 150px;
}

/* Pourcentage symbole */
.percent-symbol {
    font-size: 1.2em;
    font-weight: bold;
}

/* Checkbox grande */
.checkbox-large {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

/* Label flex avec cursor */
.label-flex-pointer {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Bloc info small */
.info-block {
    color: #7f8c8d;
    margin-top: 8px;
    display: block;
}

.info-block .material-symbols-outlined {
    font-size: 16px;
    vertical-align: middle;
}

/* ===========================================
   PAGE SESSION VIEW - STYLES SPECIFIQUES
   =========================================== */

/* En-tête session */
.session-title {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 15px;
}

.session-formation-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #667eea;
    margin-bottom: 5px;
}

.session-formation-link span {
    font-size: 15px;
}

.session-id-display {
    color: #7f8c8d;
}

.session-id-display .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
}

/* Sous-info dans info-box */
.info-subtext {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Box background grise */
.box-grey {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.box-grey-sm {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Box warning jaune */
.box-warning {
    background: #fff3cd;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Tags/Pills */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.tag-pill {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
}

.tag-pill-blue {
    background: #e3f2fd;
}

.tag-pill-purple {
    background: #f3e5f5;
}

/* Adresse pre-wrap */
.address-display {
    line-height: 1.8;
    white-space: pre-wrap;
    margin-top: 15px;
}

/* Message vide avec style */
.empty-state {
    text-align: center;
    color: #7f8c8d;
    padding: 40px;
}

.empty-state-italic {
    color: #7f8c8d;
    font-style: italic;
}

/* Stats header bar */
.stats-bar {
    background: #f8f9fa;
    padding: 8px 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

/* Badge margin left */
.badge-ml {
    margin-left: 10px;
}

/* Bouton inline-block margin-top */
.btn-inline-mt {
    margin-top: 15px;
    display: inline-block;
}

/* Info value plus grande */
.info-value-lg {
    font-size: 16px;
}

/* Bordures colorées pour info-box */
.info-box-green {
    border-left-color: #27ae60;
}

.info-box-orange {
    border-left-color: #f39c12;
}

.info-box-purple {
    border-left-color: #764ba2;
}

/* Person card variante purple */
.person-card-purple {
    border-left-color: #764ba2;
}

/* Flex utilities */
.flex-1 {
    flex: 1;
}

/* Display inline */
.d-inline {
    display: inline;
}

/* Bouton désactivé */
.btn-disabled {
    cursor: default;
    opacity: 0.7;
}

/* ============================================================================
   OPTIONS TARIFAIRES
   Hébergement, repas, transport, covoiturage
   ============================================================================ */

/* Grille de checkboxes visuelles */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.checkbox-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.checkbox-card:hover {
    border-color: #2196f3;
    background: #f0f7ff;
}

.checkbox-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-card input[type="checkbox"]:checked + .checkbox-icon {
    color: #2196f3;
}

.checkbox-card input[type="checkbox"]:checked ~ .checkbox-label {
    color: #2196f3;
    font-weight: 600;
}

.checkbox-card:has(input:checked) {
    border-color: #2196f3;
    background: #e3f2fd;
}

.checkbox-icon {
    font-size: 32px;
    color: #9e9e9e;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.checkbox-label {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.checkbox-desc {
    font-size: 12px;
    color: #999;
}

/* Boxes de configuration jour */
.config-day-box {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
}

.config-day-box h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.config-day-box h5 .material-symbols-outlined {
    font-size: 20px;
    color: #2196f3;
}

.config-day-box .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.config-day-box .checkbox-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

.config-day-box .checkbox-list label:hover {
    color: #333;
}

/* Groupes de tarifs */
.tarif-group {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
}

.tarif-group h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.tarif-group h5 .material-symbols-outlined {
    font-size: 20px;
    color: #2196f3;
}

.tarif-group .form-group {
    margin-bottom: 12px;
}

.tarif-group .form-group:last-child {
    margin-bottom: 0;
}

.tarif-group label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
    display: block;
}

/* Liste des formules */
.formules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.formule-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px 20px;
    transition: all 0.2s ease;
}

.formule-card:hover {
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.formule-card.formule-inactive {
    opacity: 0.6;
    background: #f5f5f5;
}

.formule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.formule-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.formule-info strong {
    font-size: 15px;
    color: #333;
}

.formule-prix {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.formule-actions {
    display: flex;
    gap: 5px;
}

.formule-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.formule-includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.include-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
}

.include-tag .material-symbols-outlined {
    font-size: 16px;
}

/* Input group pour les prix */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #495057;
}

/* Badge pour formules inactives */
.badge-secondary {
    background: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* Responsive Options Tarifaires */
@media (max-width: 768px) {
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .formule-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .formule-actions {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-card {
        flex-direction: row;
        text-align: left;
        gap: 15px;
    }
    
    .checkbox-icon {
        margin-bottom: 0;
    }
}

/* Options de surcharge (session) */
.override-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.override-option:hover {
    border-color: #ff9800;
    background: #fff8e1;
}

.override-option input[type="checkbox"]:first-of-type:checked ~ span {
    color: #ff9800;
    font-weight: 600;
}

.override-option input[type="checkbox"]:last-of-type {
    margin-left: auto;
}

.override-option input[type="checkbox"]:disabled {
    opacity: 0.4;
}

/* ============================================================
   ENVIRONNEMENTS - Configuration du site
   ============================================================ */

/* Mode actuel (TEST/PROD) */
.env-mode-card {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.env-mode-card.test {
    border-left: 4px solid #f39c12;
}

.env-mode-card.prod {
    border-left: 4px solid #27ae60;
}

.env-mode-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.env-mode-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.env-mode-icon.test {
    background: #f39c12;
}

.env-mode-icon.prod {
    background: #27ae60;
}

.env-mode-icon .material-symbols-outlined {
    color: white;
    font-size: 32px;
}

.env-mode-title {
    margin: 0;
    font-size: 24px;
}

.env-mode-title.test {
    color: #f39c12;
}

.env-mode-title.prod {
    color: #27ae60;
}

.env-mode-subtitle {
    margin: 5px 0 0 0;
    color: #666;
}

.env-mode-behaviors {
    border-radius: 8px;
    padding: 15px;
}

.env-mode-behaviors.test {
    background: #fff3cd;
}

.env-mode-behaviors.prod {
    background: #d4edda;
}

.env-mode-behaviors h4 {
    margin: 0 0 10px 0;
    color: #333;
}

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

/* Liste des environnements */
.env-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.env-list-header h2 {
    margin: 0;
}

.env-list-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.env-empty {
    text-align: center;
    color: #7f8c8d;
    padding: 30px;
}

.env-empty .material-symbols-outlined {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}

.env-table-wrapper {
    overflow-x: auto;
}

.env-row-current {
    background: #d4edda;
}

.env-priority-cell {
    text-align: center;
    font-weight: bold;
}

.env-pattern-code {
    font-size: 11px;
}

.env-db-cell {
    font-size: 12px;
}

.env-badge-current {
    margin-left: 5px;
    font-size: 10px;
}

.env-badge-current .material-symbols-outlined {
    font-size: 12px;
    vertical-align: middle;
}

/* Bouton dupliquer */
.btn-icon-duplicate {
    background: #6c757d;
    color: white;
}

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

/* Formulaire environnement */
.env-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.env-form-checkboxes {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 25px;
}

.env-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.env-form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.required-mark {
    color: red;
}

/* Aide patterns URL */
.env-help-card {
    background: #f8f9fa;
}

.env-help-card h3 {
    margin-top: 0;
}

.env-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    font-size: 13px;
}

.env-help-note {
    margin: 15px 0 0 0;
    color: #666;
    font-size: 12px;
}

/* Modale Import */
.env-import-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.env-import-modal.show {
    display: flex;
}

.env-import-content {
    background: white;
    border-radius: 12px;
    padding: 25px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

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

.env-import-header h3 {
    margin: 0;
}

.env-import-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.env-import-close:hover {
    color: #333;
}

.env-import-separator {
    text-align: center;
    margin: 15px 0;
    color: #999;
}

.env-import-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.env-code-example {
    display: block;
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    white-space: pre-wrap;
    font-size: 11px;
}

.env-danger-label {
    color: #dc3545;
}

/* Code inline */
code.inline-code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Champs th largeurs fixes */
.th-priority {
    width: 40px;
}

.th-actions-lg {
    width: 160px;
}

/* ============================================================
   NAVIGATION ALPHABÉTIQUE
   ============================================================ */

.alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 15px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    justify-content: center;
}

.alphabet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #495057;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.alphabet-btn:hover:not(.disabled):not(.active) {
    background: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}

.alphabet-btn.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
    font-weight: 600;
}

.alphabet-btn.disabled {
    color: #ccc;
    background: #f8f9fa;
    border-color: #eee;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive - boutons plus petits sur mobile */
@media (max-width: 768px) {
    .alphabet-nav {
        gap: 3px;
        padding: 8px;
    }
    
    .alphabet-btn {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
        padding: 0 6px;
    }
}

/* ============================================
   PAIEMENTS DETAIL - Info cards et tableau
   ============================================ */

.stat-info h3 {
    white-space: nowrap;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.info-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.info-card .card-title {
    margin: 0 0 15px 0;
    font-size: 20px;
}
.info-card p {
    margin: 8px 0;
    color: #4a5568;
}
.info-card strong {
    color: #2d3748;
}

.table-paiements {
    width: 100%;
    border-collapse: collapse;
}
.table-paiements th {
    background: #f8fafc;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}
.table-paiements td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.table-paiements tr:last-child td {
    border-bottom: none;
}
.table-paiements tr:hover {
    background: #f8fafc;
}

.mode-paiement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    font-size: 0.85rem;
}
.mode-paiement .material-symbols-outlined {
    font-size: 18px;
}
.mode-paiement.icon-virement { background: #e0f2fe; color: #0369a1; }
.mode-paiement.icon-cheque { background: #fef3c7; color: #b45309; }
.mode-paiement.icon-especes { background: #d1fae5; color: #047857; }
.mode-paiement.icon-stripe { background: #ede9fe; color: #7c3aed; }

.badge-type {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-type.badge-info { background: #dbeafe; color: #1e40af; }
.badge-type.badge-primary { background: #e9d5ff; color: #6b21a8; }
.badge-type.badge-warning { background: #fef3c7; color: #b45309; }

.stripe-ref {
    font-family: monospace;
    font-size: 0.75rem;
    color: #718096;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.notes-cell {
    max-width: 200px;
    font-size: 0.85rem;
    color: #718096;
}

.admin-cell {
    font-size: 0.85rem;
    color: #718096;
}

.no-paiements {
    padding: 40px;
    text-align: center;
    color: #718096;
}
.no-paiements .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 10px;
}

/* ========================================
   PAGES JOURNAUX (emails_logs, cron_logs)
   ======================================== */

/* Header de carte avec titre + bouton aligné */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

.card-header-flex .card-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.card-header-flex form {
    margin: 0;
}

/* État vide */
.logs-empty {
    padding: 40px;
    text-align: center;
    color: #666;
}

.logs-empty .material-symbols-outlined {
    font-size: 48px;
    opacity: 0.3;
    display: block;
    margin-bottom: 10px;
}

.logs-empty p {
    margin: 5px 0;
}

.logs-empty .logs-empty-hint {
    font-size: 0.9rem;
    color: #999;
}

/* Tableau responsive */
.table-responsive {
    overflow-x: auto;
}

/* Cellules de tableau spécifiques */
.cell-date {
    vertical-align: middle;
}

.cell-date-time {
    color: #888;
    font-size: 0.85rem;
}

.cell-nowrap {
    white-space: nowrap;
}

.cell-source {
    font-size: 12px;
    color: #7f8c8d;
}

.cell-error {
    font-size: 12px;
    color: #dc3545;
}

.cell-center {
    text-align: center;
}

/* Ligne de sujet email */
.row-subject {
    background: #f8f9fa;
}

.row-subject td {
    padding: 8px 15px;
    border-top: none;
}

.row-subject .subject-text {
    color: #555;
}

/* Ligne de détails CRON */
.row-details {
    display: none;
}

.row-details td {
    background: #f8f9fa;
    padding: 15px;
}

.row-details pre {
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-top: 8px;
    max-height: 300px;
    overflow: auto;
    font-size: 0.85rem;
}

.row-details .error-title {
    color: #dc3545;
}

.row-details .error-pre {
    color: #dc3545;
}

/* Badge compteur actions */
.badge-actions {
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.badge-actions-zero {
    background: #999999;
    color: #FFFFFF;
}

/* Icône email envoyé */
.icon-email-sent {
    color: #28a745;
}

/* Message d'erreur inline */
.error-inline {
    color: #dc3545;
}

.error-inline .material-symbols-outlined {
    font-size: 14px;
    vertical-align: middle;
}

/* Alerte table non installée */
.alert-warning-box {
    border-left: 4px solid #ffc107;
    margin-bottom: 20px;
}

.alert-warning-box .alert-content {
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.alert-warning-box .alert-icon {
    font-size: 48px;
    color: #ffc107;
}

.alert-warning-box h3 {
    margin: 0 0 10px 0;
    color: #856404;
}

.alert-warning-box p {
    margin: 0;
    color: #666;
}

.alert-warning-box p + p {
    margin-top: 10px;
}

/* Compteur de résultats */
.logs-count {
    color: #7f8c8d;
    font-size: 13px;
    margin-top: 10px;
}

/* Largeurs de colonnes */
.th-date { width: 100px; }
.th-source { width: 120px; }
.th-statut { width: 80px; }
.th-actions { width: 80px; }
.th-email { width: 50px; }
.th-details { width: 60px; }

/* Champ de recherche dans les filtres */
.filter-search {
    min-width: 200px;
}

/* Section détails */
.details-section {
    margin-bottom: 15px;
}

/* ============================================================
   PAGES JOURNAUX (journal_emails_envoyes.php, journal_taches_planifiees.php)
   ============================================================ */

/* Conteneur bouton en bas de page */
.btn-bottom-container {
    text-align: right;
    margin-top: 20px;
}

/* Formulaire inline */
.form-inline {
    display: inline;
}

/* Texte de résumé sous le statut (legacy) */
.summary-text {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* Erreur sous le statut */
.cell-error-inline {
    margin-top: 5px;
}

/* Erreur inline avec margin */
.error-inline-margin {
    margin-top: 3px;
}

/* -----------------------------------------------
   BADGES STATUT — journal_taches_planifiees.php
   ----------------------------------------------- */

/* Cellule statut : centrage vertical + horizontal */
.cell-statut {
    text-align: center;
    vertical-align: middle;
}

/* Wrapper flex pour centrer le badge */
.cron-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Badge de base */
.cron-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 280px;
    white-space: normal;
    word-break: break-word;
}

.cron-status-badge .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
}

/* Couleurs par statut */
.cron-status-success  { background: #d4edda; color: #1e7e34; }
.cron-status-error    { background: #f8d7da; color: #c0392b; }
.cron-status-warning  { background: #fff3cd; color: #856404; }
.cron-status-running  { background: #cce5ff; color: #004085; }
.cron-status-skipped  { background: #e9ecef; color: #6c757d; }

/* ===========================================
   DROPDOWN ACTIONS MENU - Sessions/Reservations
   =========================================== */

.actions-dropdown {
    position: relative;
    display: inline-block;
}

.btn-icon-menu {
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    height: 24px !important;
    min-height: 24px !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
}

.btn-icon-menu:hover {
    background: #e0e0e0 !important;
}

.btn-icon-menu .material-symbols-outlined {
    font-size: 18px !important;
}

.actions-dropdown-menu {
    display: none;
    position: fixed;
    min-width: 220px;
    max-width: 280px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    padding: 8px 0;
    max-height: 400px;
    overflow-y: auto;
}

.actions-dropdown.open .actions-dropdown-menu {
    display: block;
}

.dropdown-category {
    padding: 0;
}

.dropdown-category:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.dropdown-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.dropdown-category-header .material-symbols-outlined {
    font-size: 14px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px 8px 20px;
    border: none;
    background: none;
    color: #333;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    box-sizing: border-box;
}

.dropdown-item:hover {
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
}

.dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: #666;
    flex-shrink: 0;
}

.dropdown-item-danger {
    color: #dc3545;
}

.dropdown-item-danger .material-symbols-outlined {
    color: #dc3545;
}

.dropdown-item-danger:hover {
    background: #fff5f5;
    color: #dc3545;
}
/* ============================================================
   LISTE D'ATTENTE - ADMIN (liste_attente.php)
   ============================================================ */

/* Filtres */
.la-filtres-section {
    margin-bottom: 20px;
}

/* Rang circle */
.la-rang-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    font-weight: 700;
    font-size: 13px;
}

.la-rang-prioritaire {
    background: #fef3c7;
    color: #92400e;
}

.la-report-auto {
    color: #6366f1;
    font-size: 11px;
}

.la-expiration {
    font-size: 11px;
    color: #d97706;
}

/* Badge count */
.la-badge-count {
    margin-left: 10px;
}

/* Badges statut */
.la-badge-admin {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.la-en_attente { background: #dbeafe; color: #1d4ed8; }
.la-notifie { background: #fef3c7; color: #92400e; }
.la-accepte { background: #d1fae5; color: #065f46; }
.la-expire { background: #f3f4f6; color: #6b7280; }
.la-desiste { background: #fee2e2; color: #991b1b; }

/* Boutons mini actions */
.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.15s;
    padding: 0;
}

.btn-mini .material-symbols-outlined {
    font-size: 16px;
}

.btn-mini-success { background: #d1fae5; color: #059669; }
.btn-mini-success:hover { background: #059669; color: white; }
.btn-mini-info { background: #dbeafe; color: #2563eb; }
.btn-mini-info:hover { background: #2563eb; color: white; }
.btn-mini-danger { background: #fee2e2; color: #dc2626; }
.btn-mini-danger:hover { background: #dc2626; color: white; }

/* Modal historique */
.la-modal-historique {
    max-width: 550px;
}

.la-historique-content {
    padding: 20px;
}

.la-historique-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.la-historique-item {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.la-historique-date {
    color: #64748b;
    font-size: 12px;
}

.la-historique-canal {
    color: #6366f1;
}

.la-historique-details {
    color: #64748b;
}

.la-historique-auteur {
    float: right;
    font-size: 11px;
    color: #9ca3af;
}

.la-error {
    color: red;
}

.la-historique-fiche {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.la-fiche-line {
    padding: 4px 0;
    font-size: 13px;
    display: flex;
    gap: 8px;
}

.la-fiche-label {
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.la-fiche-value {
    color: #1e293b;
    font-weight: 600;
}

.la-historique-subtitle {
    font-size: 14px;
    color: #475569;
    margin: 10px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.la-historique-subtitle .material-symbols-outlined {
    font-size: 18px;
}

/* Stat cards (si pas déjà dans style_admin.css) */
.stat-card-mini {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    border: 2px solid #f1f5f9;
    transition: all 0.2s;
}

.stat-card-mini:hover,
.stat-card-mini.stat-active {
    border-color: #6366f1;
}

.stat-card-mini a {
    text-decoration: none;
    color: inherit;
}

.stat-card-mini .stat-number {
    font-size: 1.8em;
    font-weight: 700;
}

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

@media (max-width: 480px) {
    .la-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ligne titre + titre court (formations) */
.form-row-titre {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.form-row-titre .form-group {
    margin-bottom: 0;
}

.form-row-titre .form-group-titre {
    flex: 1;
}

.form-row-titre .form-group-titre-court {
    width: 150px;
}

/* ===========================================
   OneSync - Bloc Synchronisation
   =========================================== */
.sync-groups {
    display: flex;
    gap: 40px;
}

.sync-group {
    flex: 1;
}

.sync-group-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-cards {
    display: flex;
    gap: 15px;
}

.sync-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}

.stat-icon.sky-blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-save-config {
    margin-bottom: 20px;
}

.config-field {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 15px;
}

.config-field + .config-field {
    margin-top: 10px;
}

.config-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

.config-field .value {
    font-size: 14px;
    color: #333;
}

.config-readonly {
    background: #f8f9fa;
}

.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.mode-badge-text {
    color: #666;
}

.config-separator {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.checkbox-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
}

.checkbox-option-input {
    width: 18px;
    height: 18px;
}

.checkbox-option-text {
    font-size: 14px;
}

.checkbox-option-hint {
    margin-top: 5px;
    margin-left: 28px;
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    gap: 15px;
}

.toggle-option-text span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.toggle-option-text .form-hint {
    margin-top: 4px;
}

/* Toggle paramètres (formateur/intervenant edit) */
.param-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.param-toggle-text {
    flex: 1;
}

.param-toggle-text .param-toggle-label {
    font-weight: 600;
    color: #333;
}

.param-toggle-text .param-toggle-hint {
    margin-top: 4px;
    color: #888;
    font-size: 0.85em;
}

.prefixe-input {
    text-align: center;
    font-size: 18px;
}

.aide-link {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-small {
    width: 80px;
    text-align: center;
}

.section-separator {
    margin-top: 25px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===========================================
   OneSync - Connexion & Aide
   =========================================== */
.connexion-hint {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.7;
    text-transform: none;
}

.aide-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.aide-text + .aide-text {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .sync-groups {
        flex-direction: column;
        gap: 20px;
    }
    
    .sync-cards {
        flex-direction: column;
    }
}

/* ===========================================
   CardDAV - Section connexion
   =========================================== */
.connexion-panel {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    color: white;
}

.connexion-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.connexion-panel h2 .material-symbols-outlined {
    color: white;
}

.connexion-panel .card-title {
    color: white;
    border-bottom-color: white;
}

.connexion-panel-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 25px;
    align-items: start;
}

.connexion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.connexion-field {
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 12px 15px;
}

.connexion-field.full-width {
    grid-column: 1 / -1;
}

.connexion-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 5px;
}

.connexion-field .value {
    font-family: monospace;
    font-size: 14px;
    word-break: break-all;
}

.password-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-wrapper .value {
    flex: 1;
}

.btn-toggle-password {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

.btn-toggle-password:hover {
    background: rgba(255,255,255,0.3);
}

.connexion-download-form {
    display: flex;
    height: 100%;
}

.btn-download-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 12px;
    padding: 30px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
    line-height: 1.4;
}

.btn-download-profile .material-symbols-outlined {
    font-size: 48px;
}

.btn-download-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.config-url-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 20px;
}

.config-url-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

@media (max-width: 600px) {
    .connexion-panel-layout {
        grid-template-columns: 1fr;
    }
    
    .connexion-grid {
        grid-template-columns: 1fr;
    }
    
    .connexion-field.full-width {
        grid-column: auto;
    }
}

/* ================================================
   CARNET D'ADRESSES (CardDAV)
   ================================================ */
.carddav-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
}

.carddav-container .options-panel:first-child {
    margin-top: 0;
}

.stats-panel + .options-panel {
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .carddav-container {
        grid-template-columns: 1fr;
    }
}

.config-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 20px;
}

.config-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

.config-panel h3 {
    margin: 25px 0 15px 0;
    font-size: 15px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.config-panel h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.info-box {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1565c0;
}

.info-box .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Liste ordonnée des groupes */
.groupe-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.groupe-item:hover {
    background: #e9ecef;
}

.groupe-item.dragging {
    opacity: 0.5;
    border: 2px dashed #667eea;
}

.groupe-item.disabled {
    opacity: 0.4;
    background: #fff;
}

.groupe-drag-handle {
    color: #aaa;
    cursor: grab;
}

.groupe-icon {
    width: 40px;
    height: 40px;
    background: #667eea;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.groupe-item.disabled .groupe-icon {
    background: #ccc;
}

.groupe-info {
    flex: 1;
}

.groupe-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.groupe-description {
    font-size: 13px;
    color: #666;
}

.groupe-exemple {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin-top: 3px;
}

.groupe-toggle {
    display: flex;
    align-items: center;
}

/* Stats panel */
.stats-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 20px;
}

.stats-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

.stat-label {
    font-size: 13px;
    color: #666;
}

/* Options panel */
.options-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.options-panel h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #667eea;
}

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

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-hint {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* Préfixes grid */
.prefixes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.prefix-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
}

.prefix-item label {
    flex: 1;
    font-size: 13px;
    color: #555;
}

.prefix-item input {
    width: 50px;
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.prefix-item input:focus {
    outline: none;
    border-color: #667eea;
}

.prefix-item-vertical {
    padding: 12px;
    border-radius: 8px;
}

.prefix-item-vertical .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.prefix-item-vertical input {
    width: 100%;
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.prefix-item-vertical input:focus {
    outline: none;
    border-color: #667eea;
}

.prefix-item-vertical .form-hint {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

/* Toggle switch */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #667eea;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.carddav-container .btn-save {
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.carddav-container .btn-save:hover {
    background: #5a6fd6;
}

/* URL CardDAV */
.url-box {
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 12px 15px;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
    margin-bottom: 10px;
}

/* ==================== Modèles Emails ==================== */
/* ==================== Layout principal ==================== */
.me-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.me-page-header h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.me-main-container {
    display: flex;
    gap: 30px;
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

@media (max-width: 900px) {
    .me-main-container { flex-direction: column; }
    .me-nav { width: 100% !important; }
    .me-nav .nav-list { display: flex; flex-wrap: wrap; }
    .me-nav .nav-item { flex: 1; min-width: 140px; justify-content: center; border-left: none; border-bottom: 3px solid transparent; }
    .me-nav .nav-item.active { border-bottom-color: #667eea; border-left-color: transparent; }
}

/* ==================== Nav verticale ==================== */
.me-nav {
    width: 220px;
    flex-shrink: 0;
}

.me-nav .nav-list {
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

.me-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    text-decoration: none;
    color: #2c3e50;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.me-nav .nav-item:hover {
    background: #eef0f2;
}

.me-nav .nav-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left-color: #667eea;
    color: #667eea;
    font-weight: 600;
}

.me-nav .nav-item .nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    font-size: 18px;
}

.me-nav .nav-item .nav-count {
    margin-left: auto;
    background: #e0e0e0;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
}

.me-nav .nav-item.active .nav-count {
    background: #667eea;
    color: white;
}

.me-nav .nav-separator {
    border-top: 1px solid #e0e0e0;
    margin: 12px 0;
}

.me-nav .nav-global {
    padding: 10px 16px;
    font-size: 12px;
}

.me-nav .nav-global a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #888;
    padding: 6px 0;
    transition: color 0.2s;
}

.me-nav .nav-global a:hover {
    color: #667eea;
}

.me-nav .nav-config {
    border-top: 1px solid #e0e0e0;
    margin-top: 12px;
    padding-top: 12px;
}

.me-nav .nav-config a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: #888;
    font-size: 12px;
    transition: color 0.2s;
}

.me-nav .nav-config a:hover {
    color: #667eea;
}

/* ==================== Contenu droite ==================== */
.me-content {
    flex: 1;
    min-width: 0;
}

.me-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.me-content-header h3 {
    margin: 0;
}

.me-content-header h3 .group-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.me-content-header h3 .group-icon .material-symbols-outlined {
    color: white;
}

/* ==================== Liste templates ==================== */
.me-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.me-tpl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.me-tpl-row:hover {
    border-color: #667eea;
    background: #fafbff;
}

.me-tpl-row.inactive {
    opacity: 0.5;
}

.me-tpl-info {
    flex: 1;
    min-width: 0;
}

.me-tpl-nom {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.me-tpl-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #999;
}

.me-tpl-cle {
    font-family: monospace;
    background: #eee;
    padding: 1px 6px;
    border-radius: 3px;
}

.me-tpl-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.me-tpl-status.active {
    background: #e8f5e9;
    color: #388e3c;
}

.me-tpl-status.inactive {
    background: #fce4ec;
    color: #c62828;
}

.me-tpl-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.me-tpl-actions .btn-sm {
    padding: 6px 8px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
}

.me-tpl-actions .btn-sm .material-symbols-outlined {
    font-size: 18px;
}

.me-tpl-actions .btn-edit {
    background: #e3f2fd;
    color: #1976d2;
}

.me-tpl-actions .btn-edit:hover {
    background: #bbdefb;
}

.me-tpl-actions .btn-toggle {
    background: #e8f5e9;
    color: #388e3c;
}

.me-tpl-actions .btn-toggle.off {
    background: #fff3e0;
    color: #f57c00;
}

.me-tpl-actions .btn-delete {
    background: #fce4ec;
    color: #c62828;
}

.me-tpl-actions .btn-delete:hover {
    background: #f8bbd0;
}

.me-empty {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
}

.me-empty .material-symbols-outlined {
    font-size: 48px;
    color: #ddd;
    display: block;
    margin-bottom: 12px;
}

/* ==================== Modal ==================== */
.me-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.me-modal-overlay.visible {
    display: flex;
}

.me-modal {
    background: white;
    border-radius: 12px;
    padding: 25px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.me-modal h3 {
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
}

.me-modal .form-group {
    margin-bottom: 15px;
}

.me-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
    color: #555;
}

.me-modal .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.me-modal .form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.me-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.me-modal-actions .btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ========================================
   CODE PROMO - Section réservation détail
   ======================================== */
.cp-section {
    margin-top: 20px;
}
.cp-section-title {
    margin-bottom: 15px;
    color: #2c3e50;
}
.cp-section-title .material-symbols-outlined {
    vertical-align: middle;
}

/* Code appliqué */
.cp-applied-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #ecfdf5;
    border-radius: 8px;
    border: 1px solid #a7f3d0;
}
.cp-applied-icon {
    color: #059669;
}
.cp-applied-info {
    flex: 1;
}
.cp-applied-code {
    color: #065f46;
}
.cp-applied-amount {
    color: #059669;
    font-weight: 600;
    margin-left: 8px;
}
.cp-applied-detail {
    color: #6b7280;
    font-size: 12px;
    margin-left: 8px;
}
.cp-applied-form {
    margin: 0;
}
.cp-btn-retirer {
    padding: 6px 14px;
    font-size: 13px;
}
.cp-btn-retirer .material-symbols-outlined {
    font-size: 16px;
    vertical-align: middle;
}

/* Codes disponibles */
.cp-dispo-wrapper {
    margin-bottom: 12px;
}
.cp-dispo-label {
    color: #6b7280;
}
.cp-dispo-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.cp-dispo-form {
    display: inline;
    margin: 0;
}
.cp-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}
.cp-tag:hover {
    transform: scale(1.05);
}
.cp-tag-lock {
    font-size: 14px;
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.8;
    color: inherit;
}
.cp-empty {
    color: #9ca3af;
    font-size: 13px;
}

/* ========================================
   FORMATION EDIT - Navigation latérale
   ======================================== */
.fe-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.fe-nav {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.fe-nav-list {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.fe-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    text-decoration: none;
    color: #2c3e50;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    white-space: normal;
}

.fe-nav-item:hover {
    background: #f8f9fa;
}

.fe-nav-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left-color: #667eea;
    color: #667eea;
}

.fe-nav-item .material-symbols-outlined {
    font-size: 24px;
    flex-shrink: 0;
}

.bpf-nav-annee {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.bpf-nav-dates {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
    line-height: 1.3;
}

.fe-nav-item.active .bpf-nav-dates {
    color: #667eea;
}

.fe-content {
    flex: 1;
    min-width: 0;
    padding-bottom: 70vh;
}

.fe-content .form-section[id] {
    scroll-margin-top: 25px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 25px;
}

.fe-form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 25px;
}

/* ========================================
   ALERTES / BLOCS INFO - Formation & Session edit
   ======================================== */
.fe-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #9ca3af;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fe-alert > .material-symbols-outlined {
    color: #2196f3;
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 1px;
}

.fe-alert p {
    margin: 0;
    color: #2c3e50;
}

.fe-alert a {
    text-decoration: underline;
}

/* Info (bleu) */
.fe-alert-info {
    background: #e3f2fd;
    border-left-color: #2196f3;
}

.fe-alert-info a {
    color: #2196f3;
}

/* Succès (vert) */
.fe-alert-success {
    background: #e8f5e9;
    border-left-color: #4caf50;
}

/* Astuce (bleu clair) */
.fe-alert-tip {
    background: #e3f2fd;
    border-left-color: #2196f3;
}

/* Avertissement (orange) */
.fe-alert-warning {
    background: #fff3e0;
    border-left-color: #ff9800;
}

/* Warning jaune */
.fe-alert-caution {
    background: #fff3cd;
    border-left-color: #f39c12;
}

/* Note (violet) */
.fe-alert-note {
    background: #f3e5f5;
    border-left-color: #9c27b0;
}

.fe-alert-note a {
    color: #9c27b0;
}


/* ========================================
   CLASSES UTILITAIRES - Formation & Session edit
   ======================================== */

/* Textes secondaires */
.fe-text-muted { color: #7f8c8d; }
.fe-text-small { font-size: 13px; color: #7f8c8d; }
.fe-text-hint { color: #666; font-size: 12px; display: block; margin-top: 5px; }
.fe-text-center { text-align: center; }
.fe-text-danger { color: #e74c3c; }
.fe-text-danger a { color: #e74c3c; text-decoration: underline; }

/* Sous-titres de section (h4 dans les blocs) */
.fe-sub-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 15px;
}

/* Blocs séparés par bordure */
.fe-block {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

/* Boutons d'action form */
.fe-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 25px;
}

/* État vide */
.fe-empty-state {
    padding: 20px;
    text-align: center;
    color: #999;
    background: #f9f9f9;
    border-radius: 8px;
}

.fe-empty-icon {
    font-size: 48px;
}

/* Modals */
.fe-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.fe-modal-box {
    background: white;
    border-radius: 10px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.fe-modal-box.large {
    max-width: 600px;
}

.fe-modal-title {
    margin-bottom: 20px;
    color: #2c3e50;
}

/* Drag handle */
.fe-drag-handle {
    cursor: grab;
    padding: 0 10px;
}

.fe-drag-handle .material-symbols-outlined {
    color: #999;
}

/* Personne item contenu */
.fe-person-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.fe-person-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.fe-person-avatar-placeholder {
    width: 50px;
    height: 50px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.fe-person-actions {
    display: flex;
    gap: 5px;
}

/* Grilles */
.fe-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

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

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

/* Stat values */
.fe-stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

.fe-stat-label {
    font-size: 13px;
    color: #7f8c8d;
}

/* Input max-width */
.fe-input-small { max-width: 150px; }
.fe-input-xs { width: 80px; }
.fe-input-sm { width: 120px; }
.fe-input-medium { max-width: 350px; }

/* Form inline hidden */
.fe-form-inline { display: inline; }
.fe-hidden { display: none; }

/* Spacing contextuel */
.fe-image-actions {
    margin-top: 15px;
}

.fe-image-actions .fe-text-small {
    margin-top: 10px;
}

.fe-image-upload {
    margin-top: 15px;
}

.calculated-info + .form-row {
    margin-top: 20px;
}

.fe-form-separator {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.fe-form-separator-dashed {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
}

.fe-content .form-section + .form-section {
    margin-top: 25px;
}

/* Messages "aucun élément" */
.fe-no-items {
    color: #e74c3c;
    margin-top: 15px;
}

.fe-no-items a {
    color: #e74c3c;
    text-decoration: underline;
}

/* Bloc paramètres avancés */
.fe-params-block {
    margin-bottom: 20px;
}

/* Hint indenté (alignement checkbox) */
.fe-text-hint-indented {
    color: #666;
    font-size: 12px;
    display: block;
    margin-top: 5px;
    margin-left: 26px;
}

/* Section séparateur épais */
.fe-section-separator {
    margin-top: 30px;
    border-top: 2px solid #e0e0e0;
    padding-top: 30px;
}

/* Intro hint (texte d'aide avant un formulaire) */
.fe-intro-hint {
    color: #7f8c8d;
    margin-bottom: 20px;
}

/* Activation box - description sous le label */
.fe-activation-description {
    color: #7f8c8d;
    display: block;
    margin-bottom: 15px;
}

/* Bouton reset à côté du bouton d'ajout */
.btn-reset {
    margin-left: 10px;
}

/* Note sous les tarifs */
.fe-tarif-note {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 15px;
}

/* Include tags espacement */
.include-tag + .include-tag {
    margin-left: 5px;
}

/* Intro formules */
.fe-formules-intro {
    margin-bottom: 10px;
}

/* Top bar (page header with buttons) */
.fe-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}

/* Bouton programme (rose) */
.fe-btn-programme {
    background: linear-gradient(135deg, #e84393 0%, #c73178 100%);
}

/* Stat icon colors */
.fe-stat-icon-blue { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); }
.fe-stat-icon-green { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); }
.fe-stat-icon-orange { background: linear-gradient(135deg, #f39c12 0%, #d68910 100%); }

.fe-stat-links {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fe-stat-links .btn,
.fe-stat-links-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Icon color helpers */
.fe-icon-blue { color: #2196f3; }
.fe-icon-purple { color: #6366f1; }
.fe-icon-inline { font-size: 16px; vertical-align: middle; }

/* Color picker group */
.fe-color-group {
    flex: 0 0 auto;
    width: auto;
}

.fe-color-input {
    width: 44px;
    height: 44px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: none;
}

/* Activation boxes */
.fe-activation-box {
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.fe-activation-box.success {
    background: #e8f5e9;
    border: 2px solid #4caf50;
}

.fe-activation-box.neutral {
    background: #f8f9fa;
}

.fe-activation-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.fe-activation-text {
    font-weight: 500;
    font-size: 16px;
}

.fe-activation-hint {
    display: block;
    margin-top: 10px;
    margin-left: 30px;
    color: #7f8c8d;
}

.fe-activation-hint.success {
    color: #2e7d32;
}

.fe-checkbox-big {
    width: 20px;
    height: 20px;
}

/* Checkbox inline label */
.fe-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* Flex rows */
.fe-flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.fe-flex-row-tight {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fe-flex-item {
    flex: 1;
    min-width: 200px;
}

.fe-flex-fixed-180 { flex: 0 0 180px; }
.fe-flex-fixed-200 { flex: 0 0 200px; }

/* Person card (session formateurs/intervenants) */
.fe-person-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.fe-person-name {
    font-weight: 600;
    color: #2c3e50;
}

.fe-person-avatar-placeholder.intervenant {
    background: #764ba2;
}

/* Intervenant text color */
.fe-text-intervenant {
    font-size: 12px;
    color: #9c27b0;
}

/* Tarif border */
.fe-tarif-border {
    border-left-color: #f39c12;
}

/* Block last (no bottom border) */
.fe-block-last {
    margin-bottom: 25px;
}

/* Toggles last (no bottom border) */
.fe-toggles-last {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Select padded */
.fe-select-padded {
    padding: 10px;
}

/* Alert sub-elements */
.fe-alert-title {
    color: #2c3e50;
    margin-bottom: 10px;
}

.fe-alert-text {
    line-height: 1.6;
}

/* Heritage box (formateurs/intervenants par défaut) */
.fe-heritage-box {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Warning inline */
.fe-warning-inline {
    background: #fff3cd;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Tarif area (session options tarifs) */
.fe-tarif-area {
    margin-bottom: 25px;
    padding: 20px;
    background: #fafafa;
    border-radius: 10px;
}

/* Option box (affichage documents) */
.fe-option-box {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.fe-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Tag variants */
.fe-tag-success {
    background: #c8e6c9;
}

.fe-tag-pill {
    display: inline-block;
    background: #e3f2fd;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
}

.fe-tag-pill.purple {
    background: #f3e5f5;
}

/* Badge session */
.fe-badge-session {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 5px;
}

/* Badge count (notification) */
.fe-badge-count {
    background: #f39c12;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Marges boutons d'ajout dans les sections */
.fe-content .btn-success.btn-small,
.fe-content .btn-secondary.btn-small {
    margin-top: 15px;
}

.fe-content .btn-add {
    margin-top: 15px;
}

.fe-content .btn-warning.btn-small {
    margin-top: 25px;
}

/* Responsive : nav horizontale sur petit écran */
@media (max-width: 1100px) {
    .fe-container {
        flex-direction: column;
        gap: 15px;
    }
    .fe-nav {
        width: 100%;
        position: static;
    }
    .fe-nav-list {
        display: flex;
        flex-wrap: wrap;
    }
    .fe-nav-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 14px;
        font-size: 12px;
    }
    .fe-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: #667eea;
    }
    .fe-toggles-row.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fe-toggles-row.cols-4,
    .fe-toggles-row.cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   TOGGLES iOS - Formation edit
   ======================================== */
.fe-toggles-row {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
}

.fe-toggles-row.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.fe-toggles-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.fe-toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1.5px solid #e5e7eb;
    transition: all 0.2s;
}

.fe-toggle-item:hover {
    background: #f0f1f3;
    border-color: #d1d5db;
}

.fe-toggle-icon {
    font-size: 22px;
    color: #9ca3af;
    transition: color 0.3s;
}

.fe-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    flex: 1;
}

/* Checkbox cachée */
.fe-toggle-input {
    display: none;
}

/* Switch iOS */
.fe-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    transition: background 0.3s;
    flex-shrink: 0;
}

.fe-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

/* État actif */
.fe-toggle-input:checked ~ .fe-toggle-switch {
    background: #34d399;
}

.fe-toggle-input:checked ~ .fe-toggle-switch::after {
    transform: translateX(20px);
}

.fe-toggle-item:has(.fe-toggle-input:checked) .fe-toggle-icon {
    color: #059669;
}

.fe-toggle-item:has(.fe-toggle-input:checked) {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Contenu masquable */
.fe-toggle-content {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, border-color 0.3s ease;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.fe-toggle-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
}

/* ========================================
   CENTRE D'AIDE
   ======================================== */
.aide-container {
    max-width: 900px;
    margin: 0 auto;
}

.aide-header {
    margin-bottom: 30px;
}

.aide-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
    margin-bottom: 8px;
}

.aide-header p {
    color: #7f8c8d;
    font-size: 15px;
}

.aide-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #7f8c8d;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.aide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.aide-section-title {
    grid-column: 1 / -1;
}

.aide-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.aide-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.aide-card-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.aide-card-icon {
    font-size: 32px;
    color: #667eea;
    flex-shrink: 0;
}

.aide-card-content h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.aide-card-content p {
    margin: 0;
    font-size: 13px;
    color: #7f8c8d;
}

.aide-badge-soon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f39c12;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Page d'aide individuelle */
.aide-page {
    max-width: 950px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #2c3e50;
}

.aide-page h1 {
    font-size: 26px;
    font-weight: 700;
    color: #4A3F8F;
    margin: 40px 0 16px 0;
}

.aide-page h2 {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 32px 0 14px 0;
    border-bottom: 2px solid #4A3F8F;
    padding-bottom: 8px;
}

.aide-page h3 {
    font-size: 16px;
    font-weight: 600;
    color: #4A3F8F;
    margin: 24px 0 10px 0;
}

/* Indentation hiérarchique : chaque .indent ajoute 40px */
.aide-page .indent {
    padding-left: 40px;
}

/* Largeur des tableaux et images dans les indents */
.aide-page .indent table {
    width: 100%;
}

.aide-page .indent img.screenshot {
    max-width: 100%;
}
.aide-page .indent img.screenshot-md { max-width: 78%; }
.aide-page .indent img.screenshot-sm { max-width: 38%; }

/* Éléments sans indentation */
.aide-page > .aide-breadcrumb {
    margin-left: 0;
}

.aide-page ul,
.aide-page ol {
    margin: 10px 0;
    padding-left: 28px;
}

.aide-page li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.aide-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}

.aide-page thead th {
    background: #4A3F8F;
    color: white;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border: 1px solid #4A3F8F;
}

.aide-page tbody td {
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

.aide-page tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.aide-page .col-icon {
    text-align: center;
    width: 60px;
}

.aide-page .col-action {
    font-weight: 600;
    width: 180px;
}

.aide-page .mi-green  { color: #4CAF50; }
.aide-page .mi-blue   { color: #2196F3; }
.aide-page .mi-cyan   { color: #17a2b8; }
.aide-page .mi-red    { color: #f44336; }
.aide-page .mi-orange { color: #F39C12; }
.aide-page .mi-gray   { color: #7f8c8d; }
.aide-page .mi-pink   { color: #e84393; }
.aide-page .mi-purple { color: #9c27b0; }
.aide-page .mi-indigo { color: #667eea; }
.aide-page .mi-teal   { color: #00acc1; }

/* Icônes d'actions avec fond coloré (colonnes tableaux) */
.aide-page .col-icon .mi-green  { background: #e8f5e9; color: #4CAF50; }
.aide-page .col-icon .mi-blue   { background: #e8f4fd; color: #2196F3; }
.aide-page .col-icon .mi-cyan   { background: #e0f7fa; color: #17a2b8; }
.aide-page .col-icon .mi-red    { background: #ffebee; color: #f44336; }
.aide-page .col-icon .mi-orange { background: #fff3e0; color: #ff9800; }
.aide-page .col-icon .mi-gray   { background: #f0f0f0; color: #7f8c8d; }
.aide-page .col-icon .mi-pink   { background: #fce4ec; color: #e84393; }
.aide-page .col-icon .mi-purple { background: #f3e5f5; color: #9c27b0; }
.aide-page .col-icon .mi-indigo { background: #e8eaf6; color: #667eea; }
.aide-page .col-icon .mi-teal   { background: #e0f7fa; color: #00acc1; }

.aide-page .col-icon .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 20px;
}

.aide-page .mi-inline {
    font-size: 18px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
}

/* Fonds colorés pour les icônes inline dans le texte */
.aide-page .mi-inline.mi-green  { background: #e8f5e9; }
.aide-page .mi-inline.mi-blue   { background: #e8f4fd; }
.aide-page .mi-inline.mi-cyan   { background: #e0f7fa; }
.aide-page .mi-inline.mi-red    { background: #ffebee; }
.aide-page .mi-inline.mi-orange { background: #fff3e0; }
.aide-page .mi-inline.mi-gray   { background: #f0f0f0; }
.aide-page .mi-inline.mi-pink   { background: #fce4ec; }
.aide-page .mi-inline.mi-purple { background: #f3e5f5; }
.aide-page .mi-inline.mi-indigo { background: #e8eaf6; }
.aide-page .mi-inline.mi-teal   { background: #e0f7fa; }

.aide-page .menu-path {
    background: #EEF0F7;
    padding: 8px 14px;
    border-radius: 6px;
    margin: 32px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aide-page .menu-path .material-symbols-outlined {
    font-size: 18px;
    color: #7f8c8d;
}

.aide-page .menu-path .path-label {
    color: #7f8c8d;
}

.aide-page .menu-path .path-value {
    font-weight: 600;
    color: #4A3F8F;
}

/* ---- Table des matières (TOC) ---- */
.aide-toc {
    background: #f8f9ff;
    border: 1px solid #e0e4f0;
    border-left: 4px solid #4A3F8F;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0 28px 0;
    font-size: 0.875rem;
}
.aide-toc-title {
    font-weight: 700;
    color: #4A3F8F;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aide-toc ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
    columns: 3;
    column-gap: 32px;
}
.aide-toc > ol > li {
    break-inside: avoid;
}
.aide-toc > ol > li > ol {
    columns: 1;
    padding-left: 8px;
}
.aide-toc > ol > li {
    margin: 5px 0 2px 0;
    counter-increment: toc-h2;
}
.aide-toc > ol > li > a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
}
.aide-toc > ol > li > a:hover {
    color: #4A3F8F;
    text-decoration: underline;
}
.aide-toc ol ol {
    padding-left: 16px;
    margin: 3px 0 4px 0;
    counter-reset: toc-h3;
    list-style: none;
}
.aide-toc ol ol li {
    margin: 2px 0;
    color: #6b7280;
    font-size: 0.83rem;
}
.aide-toc ol ol li::before {
    content: '–';
    margin-right: 5px;
    color: #a0aec0;
}
.aide-toc ol ol li a {
    color: #555e6d;
    text-decoration: none;
}
.aide-toc ol ol li a:hover {
    color: #4A3F8F;
    text-decoration: underline;
}

.aide-page h2[id],
.aide-page h3[id] {
    scroll-margin-top: 20px;
}

.aide-toc-back { display: inline-flex; }
.aide-toc-num {
    color: #4A3F8F;
    font-weight: 700;
    margin-right: 4px;
    font-size: 0.9em;
}
.aide-toc-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #9ca3af;
    text-decoration: none;
    margin-left: 10px;
    vertical-align: middle;
}
.aide-toc-back:hover { color: #4A3F8F; }

.aide-page .note {
    border-left: 5px solid #3498DB;
    padding: 10px 14px;
    margin: 14px 0;
    font-size: 14px;
    font-style: italic;
    color: #2c3e50;
    background: #f0f7ff;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aide-page .note .material-symbols-outlined {
    color: #3498DB;
    font-size: 20px;
    flex-shrink: 0;
}

.aide-page .warning {
    border-left: 5px solid #F39C12;
    padding: 10px 14px;
    margin: 14px 0;
    font-size: 14px;
    font-style: italic;
    color: #2c3e50;
    background: #fff9f0;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aide-page .warning .material-symbols-outlined {
    color: #F39C12;
    font-size: 20px;
    flex-shrink: 0;
}

.aide-page .screenshot {
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin: 16px 16px 16px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    vertical-align: top;
}

/* Screenshots proportionnels (ratio basé sur capture pleine page 1684px) */
.aide-page .screenshot-md { max-width: 78%; }  /* Cartes, sections partielles ~1314px */
.aide-page .screenshot-sm { max-width: 38%; }  /* Modales ~550-640px */

.aide-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.aide-breadcrumb a {
    color: #667eea;
    text-decoration: none;
}

.aide-breadcrumb a:hover {
    text-decoration: underline;
}

.aide-breadcrumb .separator {
    color: #7f8c8d;
}

/* Boutons inline dans la documentation */
.aide-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    vertical-align: middle;
    white-space: nowrap;
}

.aide-btn .material-symbols-outlined {
    font-size: 16px;
}

.aide-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.aide-btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

.aide-btn-save {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

.aide-btn-secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

.aide-btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.aide-btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.aide-btn-reset {
    background: #fff5f5;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.aide-btn-reset .material-symbols-outlined {
    color: #e74c3c;
}


/* Bouton "..." (menu déroulant des actions) */
.aide-btn-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #666;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    vertical-align: middle;
    pointer-events: none;
    line-height: 1;
}

/* Action dans le menu "..." (non-rapide, dans le menu déroulant) */
.aide-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    vertical-align: middle;
    white-space: nowrap;
    pointer-events: none;
}

.aide-menu-item .material-symbols-outlined {
    font-size: 17px;
    color: #888;
    font-variation-settings: 'wght' 300;
}

/* ===== Bouton flottant PDF ===== */
.aide-fab-pdf {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #4A3F8F;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(74, 63, 143, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.aide-fab-pdf:hover {
    background: #3a3175;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(74, 63, 143, 0.45);
}
.aide-fab-pdf .material-symbols-outlined {
    font-size: 26px;
}

/* ===== Print / Export PDF ===== */
@media print {
    /* Masquer tout sauf le contenu aide */
    .sidebar,
    .top-bar,
    .aide-fab-pdf,
    .aide-breadcrumb,
    .menu-path,
    .aide-modal-overlay,
    .alert {
        display: none !important;
    }

    body {
        margin: 0;
        padding: 0;
        background: white;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .content {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .aide-page {
        font-size: 13px;
        line-height: 1.6;
        color: #000;
        max-width: 100%;
    }

    .aide-page h1 {
        font-size: 22px;
        color: #000;
        margin-bottom: 8px;
        border-bottom: 2px solid #4A3F8F;
        padding-bottom: 6px;
    }

    .aide-page h2 {
        font-size: 17px;
        color: #333;
        margin: 20px 0 8px 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
        page-break-after: avoid;
    }

    .aide-page h3 {
        font-size: 14px;
        color: #444;
        margin: 14px 0 6px 0;
        page-break-after: avoid;
    }

    .aide-page .indent {
        padding-left: 20px;
    }

    .aide-page table {
        width: 100%;
        border-collapse: collapse;
        margin: 8px 0;
        page-break-inside: avoid;
    }

    .aide-page table th,
    .aide-page table td {
        border: 1px solid #ccc;
        padding: 5px 8px;
        font-size: 12px;
    }

    .aide-page table th {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .aide-page .screenshot {
        max-width: 100%;
        border: 1px solid #ddd;
        page-break-inside: avoid;
        margin: 8px 0;
    }

    .aide-page .note {
        border: 1px solid #ccc;
        padding: 8px 12px;
        page-break-inside: avoid;
        background: #fffde7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .aide-page .aide-btn,
    .aide-page .aide-btn-save,
    .aide-page .aide-btn-secondary {
        border: 1px solid #999;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 11px;
    }

    /* En-tête de page avec titre */
    .aide-page::before {
        content: "OCYTOMILK — Centre d'aide";
        display: block;
        font-size: 10px;
        color: #999;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }
}

/* ==================== ONGLETS AIDE (guide / tutoriels) ====================

/* Barre d'onglets */
.aide-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0 0 0;
    border-bottom: 2px solid #e0e0e0;
}

.aide-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s;
}

.aide-tab-btn .material-symbols-outlined {
    font-size: 18px;
}

.aide-tab-btn:hover {
    color: #4A3F8F;
    background: #f5f4ff;
}

.aide-tab-btn.active {
    color: #4A3F8F;
    font-weight: 600;
    border-bottom-color: #4A3F8F;
    background: #f5f4ff;
}

/* Panneaux de contenu */
.aide-tab-content {
    display: none;
}

.aide-tab-content.active {
    display: block;
    padding-top: 24px;
}

/* Panneau tutoriels — liste de cards */
.tuto-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.tuto-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.tuto-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #5a6fd6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tuto-card-icon .material-symbols-outlined {
    font-size: 22px;
    color: #fff;
}

.tuto-card-info {
    flex: 1;
}

.tuto-card-info strong {
    display: block;
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 3px;
}

.tuto-card-info span {
    font-size: 12px;
    color: #888;
}

.tuto-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.tuto-card-btn .material-symbols-outlined {
    font-size: 16px;
}

.tuto-card-btn:hover {
    background: #218838;
}

/* Message "aucun tutoriel" */
.tuto-empty {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
}

.tuto-empty .material-symbols-outlined {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}

.tuto-empty p {
    margin: 0;
    font-size: 14px;
}

/* ==================== BADGES CONTRAT ==================== */
.badge-contrat-ok {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.badge-contrat-ok .material-symbols-outlined {
    font-size: 14px;
}

.badge-contrat-non {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.badge-contrat-non .material-symbols-outlined {
    font-size: 14px;
}