/* ========================================
   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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

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

/* Sur mot_de_passe_oublie.php, neutraliser le fond violet hérité */
body.login-page.forgot-password-page {
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
}

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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body.forgot-password-page .container,
body.forgot-password-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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-logo {
    width: 50%;
    max-width: 260px;
    display: block;
    margin: 0 auto 30px;
}

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: 'Segoe UI', Tahoma, Geneva, Verdana, 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

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

body.forgot-password-page .container .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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
    box-sizing: border-box;
}

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

body.forgot-password-page .container .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: 'Segoe UI', Tahoma, Geneva, Verdana, 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: 'Segoe UI', Tahoma, Geneva, Verdana, 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);
    /* z-index ajouté pour passer devant le contenu de page (qui contient
       des éléments avec z-index 50/100 — custom-selects, toggles, etc.).
       Reste sous les modales (1000+) et les toasts (9999+). */
    z-index: 900;
}

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

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

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

.sidebar-logo {
    width: 90%;
    max-width: 180px;
    display: block;
    margin: 0 auto;
}

.sidebar-header .presta-badge,
.sidebar-presta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    margin-top: 15px;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar-presta-badge .material-symbols-outlined {
    font-size: 18px;
}

.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;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.menu-section-title:hover {
    opacity: 0.9;
}

.menu-section-toggle {
    font-size: 18px !important;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Groupe replié : items masqués, chevron pointant vers la droite */
.menu-section.collapsed .menu-item {
    display: none;
}

.menu-section.collapsed .menu-section-toggle {
    transform: rotate(-90deg);
}

.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);
}

/* Boutons contour (fond transparent), couleur alignée sur les badges de
   statut correspondants — ex. correction manuelle de présence/absence
   dans la modale "Liste de présence" de l'émargement. */
.btn-outline-success {
    background: transparent;
    border: 1px solid #155724;
    color: #155724;
}

.btn-outline-success:hover {
    background: #d4edda;
    box-shadow: none;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #721c24;
    color: #721c24;
}

.btn-outline-danger:hover {
    background: #f8d7da;
    box-shadow: none;
}

.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;
}

/* Colonne compacte : ne prend que la place de son contenu (au lieu d'absorber l'espace résiduel) */
.col-narrow {
    width: 1%;
    white-space: nowrap;
}

/* Modale "Dupliquer la formation/session" — classes pour remplacer les inline styles */
.modal-content-md { max-width: 560px; }

.badge-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.badge-clickable:hover {
    filter: brightness(0.92);
}
.badge-clickable-icon {
    font-size: 14px !important;
}
.duplicate-source-text { margin-bottom: 18px; color: #6c757d; }
.duplicate-section-title { font-weight: 600; }
.duplicate-options-list { display: flex; flex-direction: column; gap: 6px; }
.duplicate-hint { color: #6c757d; }
.duplicate-offset-row { display: flex; align-items: center; gap: 10px; }
.form-control.duplicate-offset-input { width: 120px; }

.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;
}

/* Forcer le centrage de l'icône drag dans les TD de listings.
   Sélecteur td.X pour battre `.table td { text-align: left }`. */
td.drag-handle {
    text-align: center;
}

.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;
}

/* Filtre actif sur custom dropdowns (formation/session avec icônes).
   Le style rouge/rosé s'applique au trigger pour signaler que le filtre
   est actif, en cohérence avec les selects natifs ci-dessus.
   Le libellé sélectionné dans la liste ouverte hérite aussi de ces couleurs. */
.custom-select.filter-active .select-trigger {
    border-color: #e74c3c;
    background-color: #fff5f5;
}
.custom-select.filter-active .select-trigger:hover {
    border-color: #c0392b;
}
.custom-select.filter-active .select-trigger .select-text {
    color: #c0392b;
    font-weight: 500;
}
.custom-select.filter-active .select-options .select-option.selected {
    background-color: #fff5f5;
    color: #c0392b;
    font-weight: 500;
}

/* 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;
}

/* Variante 2/3 : utilisée à côté d'un .filter-expand classique (1/3) sur la
   même ligne — même flex-basis (0), ratio de grow 2:1. */
.filters-paiements-line .filter-expand-2x {
    flex: 2 1 0;
    min-width: 0;
}

/* Dans .filters-row (ex: regularisations), un filter-expand vise 50% de la
   ligne sans s'étirer au-delà. Garde une largeur cohérente avec les autres
   pages même quand il est seul sur sa ligne. */
.filters-row .filter-expand {
    flex: 0 1 50%;
    min-width: 0;
}

/* Variante 1/3 (apprenants.php) : scopée pour ne pas affecter les autres
   pages qui utilisent .filters-row .filter-expand en 50%. */
.filters-row-thirds .filter-expand {
    flex: 0 1 33.333%;
    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;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-info-box .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
}

/* ========================================
   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;
}

/* ========================================
   TABLEAU DE BORD — refonte (accueil admin)
   ======================================== */
.tb-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.tb-greeting {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
}

.tb-date {
    font-size: 13px;
    color: #7f8c8d;
    margin: 4px 0 0;
}

.tb-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.tb-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f8c8d;
    margin: 0;
}

/* Ligne "À traiter" (gauche) + filtre local par type de formation (droite).
   Découplée de .dashboard-grid (qui reste en 1fr 1fr ailleurs) car cette
   ligne a besoin de son propre comportement responsive : ici la 2e colonne
   ("À traiter") doit dominer sur ordinateur, ET la ligne doit s'empiler
   (filtre AU-DESSUS de "À traiter") dès la tablette — pas seulement au
   même point que .dashboard-grid. Le seuil de 968px est le même que celui
   qui fait basculer la sidebar en mode mobile (cf. plus bas dans ce
   fichier), pour que tout bascule "en même temps" au redimensionnement. */
.tb-atraiter-filtre-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 25px;
    margin-bottom: 25px;
    min-width: 0;
    max-width: 100%;
}

/* Comme pour .dashboard-grid > .card canvas (cf. plus haut) : sans ceci,
   un item de grille garde min-width: auto par défaut, donc la carte
   "À traiter" refuse de rétrécir sous la largeur de son propre contenu
   (ex: le texte des mini-cartes) une fois la ligne empilée sur 1 colonne
   (media query ci-dessous) — ce qui provoquait un débordement horizontal
   de toute la page en portrait mobile (la fenêtre y est plus étroite
   qu'en paysage, donc le contenu "trop large" y devient visible), alors
   qu'en paysage la fenêtre était encore assez large pour masquer le bug. */
.tb-atraiter-filtre-row > .card {
    min-width: 0;
}

@media (max-width: 968px) {
    .tb-atraiter-filtre-row {
        grid-template-columns: 1fr;
    }
    .tb-atraiter-filtre-row .tb-filtre-type {
        order: -1;
        margin-bottom: 15px;
    }
}

.tb-atraiter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    min-width: 0;
}

/* Seuil volontairement DIFFÉRENT (plus large) de celui de
   .tb-atraiter-filtre-row (968px) : tant que le filtre est à côté de
   "À traiter" (donc jusqu'à 968px), "À traiter" ne dispose déjà plus de
   toute la largeur de la page — 4 colonnes y deviennent trop étroites
   bien avant que la ligne ne s'empile, provoquant un retour à la ligne
   mot-par-mot dans les mini-cartes. 1300px passe donc à 2 colonnes plus
   tôt, indépendamment du moment où le filtre passe au-dessus. */
@media (max-width: 1300px) {
    .tb-atraiter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tb-atraiter-grid {
        grid-template-columns: 1fr;
    }
}

.tb-filtre-type {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   TABLEAU DE BORD — styles extraits des style="" inline
   (toutes les cartes filtrables : À traiter, Dernières réservations,
   Prochaines sessions, CA mensuel). Tout le CSS spécifique au tableau
   de bord doit vivre ici, jamais en inline dans les fichiers PHP.
   ============================================================ */

.tb-card-title-tight {
    margin: 0 0 10px;
}

.tb-atraiter-filtre-row > .card,
.tb-atraiter-filtre-row .tb-filtre-type {
    margin-bottom: 0;
}

.tb-chart-wrapper {
    position: relative;
    height: 180px;
    margin-top: 15px;
}

.tb-card-footer-link {
    text-align: center;
    margin-top: 15px;
}

/* --- Bloc "À traiter" (4 mini-cartes cliquables) --- */
.tb-atraiter-card {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

.tb-atraiter-card .material-symbols-outlined {
    font-size: 40px;
}

.tb-atraiter-card h3 {
    margin: 0;
    font-size: 22px;
}

.tb-atraiter-card p {
    margin: 2px 0 0;
    font-size: 13px;
}

.tb-atraiter-card--attente { background: #fdecea; }
.tb-atraiter-card--attente .material-symbols-outlined { color: #e74c3c; }
.tb-atraiter-card--attente h3, .tb-atraiter-card--attente p { color: #c0392b; }

.tb-atraiter-card--contrat { background: #eaf2fb; }
.tb-atraiter-card--contrat .material-symbols-outlined { color: #2980b9; }
.tb-atraiter-card--contrat h3, .tb-atraiter-card--contrat p { color: #21618c; }

.tb-atraiter-card--solde { background: #f4ecf7; }
.tb-atraiter-card--solde .material-symbols-outlined { color: #8e44ad; }
.tb-atraiter-card--solde h3, .tb-atraiter-card--solde p { color: #6c3483; }

.tb-atraiter-card--annulees { background: #fef5e7; }
.tb-atraiter-card--annulees .material-symbols-outlined { color: #d68910; }
.tb-atraiter-card--annulees h3, .tb-atraiter-card--annulees p { color: #b9770e; }

/* --- État vide générique (listes filtrables du tableau de bord) --- */
.tb-empty-state {
    color: #7f8c8d;
    text-align: center;
    padding: 20px;
}

/* --- Tableau "Dernières réservations" --- */
.tb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tb-table th {
    text-align: left;
    padding: 6px 8px;
    color: #7f8c8d;
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
}

.tb-table th.tb-table-th-center {
    text-align: center;
}

.tb-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.tb-table tr.tb-table-row-link {
    cursor: pointer;
}

.tb-table-icon-sm {
    font-size: 16px;
    vertical-align: middle;
}

.tb-table-cell-muted {
    color: #7f8c8d;
}

.tb-table-cell-dark {
    color: #2c3e50;
}

.tb-table-cell-nowrap {
    white-space: nowrap;
}

/* --- "Prochaines sessions" --- */
.tb-session-row {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.tb-session-main {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.tb-session-info {
    flex: 1;
    min-width: 0;
    color: #2c3e50;
}

/* --- Carte "CA mensuel" (infos textuelles) --- */
.tb-ca-montant {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: #2c3e50;
}

.tb-ca-evolution {
    font-size: 13px;
    margin: 4px 0 0;
}

.tb-ca-evolution--hausse { color: #27ae60; }
.tb-ca-evolution--baisse { color: #e74c3c; }

.tb-ca-sub {
    font-size: 13px;
    color: #7f8c8d;
    margin: 2px 0 0;
}

.tb-ca-restant {
    font-size: 13px;
    color: #7f8c8d;
    margin: 10px 0 0;
}

.tb-ca-restant strong {
    color: #2c3e50;
}

.tb-atraiter-grid a {
    transition: transform 0.15s, box-shadow 0.15s;
}

.tb-atraiter-grid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}


.period-pill-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.period-pill {
    padding: 5px 12px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: #ecf0f1;
    color: #7f8c8d;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.period-pill:hover {
    background: #dfe6e9;
}

.period-pill.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

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

/* Dans une carte (ex: tableau de bord, carte "Statistiques"), la marge
   basse de .stats-grid fait doublon avec le padding de .card. */
.card > .stats-grid {
    margin-bottom: 0;
}

.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: 22px;
    color: #2c3e50;
    margin-bottom: 5px;
}

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

.stat-info p.stat-sub {
    font-size: 12px;
    margin-top: 3px;
    color: #95a5a6;
}

.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;
}

/* Empêche les cartes de la grille (notamment celle contenant le graphique
   Chart.js "CA mensuel") de forcer leur colonne à rester à la largeur du
   contenu lors d'un redimensionnement de fenêtre : par défaut, un item de
   grille a min-width: auto, donc sa taille "intrinsèque" (ici, le <canvas>
   déjà rendu par Chart.js) empêche la colonne de rétrécir, ce qui pousse
   la carte voisine hors de la grille. min-width: 0 autorise la colonne à
   se réduire normalement, et le canvas (width: 100% ci-dessous) suit. */
.dashboard-grid > .card {
    min-width: 0;
}

.dashboard-grid > .card canvas {
    max-width: 100%;
}

.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;
}

/* Override ciblé pour les pages stats (questionnaire_stats / evaluation_stats) :
   le .section-header par défaut a "justify-content: space-between" pour pousser
   d'éventuels boutons à droite, mais dans les pages stats il n'y a que
   icône + titre → on les colle à gauche. */
.section-card .section-header {
    justify-content: flex-start;
    gap: 10px;
}

.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;
}

/* Groupement des 2 dropdowns formation/session côte à côte (50/50)
   sur une même ligne, pour éviter qu'ils soient empilés verticalement. */
.filter-bar .filter-selects-group {
    flex: 1 1 100%;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.filter-bar .filter-selects-group .form-group {
    flex: 1 1 0;
    min-width: 250px;
}

.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;
}

/* ========================================
   MODAL DOCUMENTS SESSION
   ======================================== */
.docs-bulk-block {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.docs-section-title {
    margin: 0 0 15px 0;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.docs-bulk-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.docs-status {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #666;
}

.docs-list {
    max-height: 300px;
    overflow-y: auto;
}

/* ========================================
   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%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        transition: transform 0.25s ease;
        z-index: 1001;
    }

    .mobile-sidebar-toggle {
        display: inline-flex !important;
    }
    
    .main-content {
        margin-left: 0;
        transition: transform 0.25s ease;
    }

    /* Effet "poussée" : le contenu se décale vers la droite de la largeur
       du menu au lieu de rester statique sous l'overlay (sidebar.mobile-open
       et .main-content sont frères dans le DOM, cf. entete.php). */
    .sidebar.mobile-open ~ .main-content {
        transform: translateX(260px);
    }
    
    .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;
    flex-wrap: wrap;
    gap: 10px;
}

.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;
}

/* Icônes plus visibles dans tous les custom-select (trigger, options, arrow) :
   graisse augmentée via l'axe variable 'wght' de Material Symbols. Règle
   large (descendant, toutes variantes .custom-select-*) pour éviter de
   dupliquer sur chacune des dizaines de classes spécifiques existantes. */
.custom-select .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.select-trigger {
    display: flex;
    justify-content: flex-start;     /* icône + texte collés à gauche */
    align-items: center;
    gap: 8px;                        /* espacement icône / texte */
    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;
    margin-left: auto;     /* pousse la flèche à droite, icône+texte restent à gauche */
}

.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; }

/* Custom select Formation et Sessions : icône du type de formation à gauche
   du libellé. Couleur portée par CSS variable --tf-color (passée en inline
   sur l'icône pour tenir compte du type de chaque formation/session). */
.custom-select-formation .select-trigger .select-icon,
.custom-select-formation .select-option .material-symbols-outlined:first-child,
.custom-select-session .select-trigger .select-icon,
.custom-select-session .select-option .material-symbols-outlined:first-child,
.custom-select-preview .select-trigger .select-icon,
.custom-select-preview .select-option .material-symbols-outlined:first-child {
    color: var(--tf-color, currentColor);
}

/* Quand le filtre est actif (.filter-active), l'icône du trigger passe en
   rouge pour rester cohérent avec la bordure et le texte rouges. La liste
   ouverte conserve les couleurs des types pour permettre l'identification. */
.custom-select.filter-active .select-trigger .select-icon {
    color: #c0392b;
}

/* =====================================================
   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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

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

body.forgot-password-page .container form .btn,
body.forgot-password-page .container button.btn,
body.forgot-password-page .container 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.forgot-password-page .container form .btn:hover,
body.forgot-password-page .container button.btn:hover,
body.forgot-password-page .container 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;
}

/* ========================================
   PAGE MOT DE PASSE OUBLIE
   ======================================== */
body.forgot-password-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 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,
body.forgot-password-page .login-card {
    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 h1-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,
body.login-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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.forgot-password-page .btn-submit:hover,
body.login-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: 'Segoe UI', Tahoma, Geneva, Verdana, 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.alerte-paiement {
    border-left-color: #e74c3c;
}

.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: 'Segoe UI', Tahoma, Geneva, Verdana, 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: 'Segoe UI', Tahoma, Geneva, Verdana, 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-features-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #5468a6;
    background: #eef1f8;
    border-left: 3px solid #5468a6;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.cron-features-info .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.5;
}

.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;
    gap: 10px;
    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;
}

/* ============================================================
   Gestion des versions d'articles de contrat (traçabilité légale,
   migration 65 — voir admin/_contrat_versions_core.php). La liste des
   versions réutilise .table/.badge/.btn-icon-* (mêmes classes que
   formations.php) : pas de CSS dédié nécessaire pour la liste elle-même.
   ============================================================ */
.cp-version-banner p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 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; }

/* ===========================================
   ARTICLES DE CONTRAT GÉNÉRIQUES (tous documents)
   Utilisées dans admin/_contrats_config_core.php (pages du groupe de menu
   CONTRATS : contrat_apprenant_config.php, contrat_prestataire_config.php,
   reglement_interieur_config.php)
   =========================================== */

/* Aperçu "façon PDF" — reprend les classes utilisées dans generer_contrat.php / generer_contrat_prestation.php */
.contrat-preview-wrap { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.contrat-preview-wrap.hidden { display: none; }
.contrat-preview-toolbar { background: #f5f5f5; padding: 8px 12px; font-size: 12px; color: #666; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 8px; }
/* Bouton "Voir le PDF" de la carte "Aperçu du contrat entier" — ouvre le PDF
   réellement généré (avec les données réelles sélectionnées ci-dessus) dans
   un nouvel onglet. Désactivé (grisé) tant qu'aucune sélection ne permet de
   le générer (voir cpUpdateVoirPdfButton() en JS). */
.cp-btn-voir-pdf {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.cp-btn-voir-pdf:hover { background: #f3f4f6; border-color: #9ca3af; }
.cp-btn-voir-pdf.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.contrat-preview { background: #ffffff; padding: 18px 20px; font-family: Georgia, 'Times New Roman', serif; }
.contrat-preview .cp-article { font-size: 15pt; color: #c9365c; margin: 10px 0; }
.contrat-preview .cp-sous-article { font-size: 12pt; color: #000000; margin: 8px 0 8px 20px; }
.contrat-preview .cp-texte { font-size: 10.5pt; text-align: justify; margin: 4px 0 4px 10px; line-height: 1.5; }
.contrat-preview .cp-texte.cp-sous { margin-left: 30px; }
.contrat-preview .cp-texte .label { text-decoration: underline; }
.contrat-preview .cp-texte .important { font-weight: bold; }
.contrat-preview .cp-texte .small { font-size: 8pt; }

/* Bouton "Vérifier les variables" + résultat de vérification */
.btn-verify-variables {
    background: #3498db; color: white; padding: 5px 14px; border: none; border-radius: 6px;
    cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.2s; margin-left: auto;
}
.btn-verify-variables:hover { background: #2980b9; }
.btn-verify-variables .material-symbols-outlined { font-size: 16px; }
.verify-result { margin-top: 15px; padding: 15px 20px; border-radius: 8px; font-size: 13px; }
.verify-result.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.verify-result.warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
.verify-result ul { margin: 8px 0 0 0; padding-left: 20px; }
.verify-result li { margin-bottom: 4px; }
.verify-result code { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

/* Mise en page à 2 colonnes : sommaire (TOC) + contenu */
.cp-layout { display: flex; align-items: flex-start; gap: 24px; }
/* Sommaire : même style que le menu latéral de parametres.php
   (.parametres-nav / .nav-list / .nav-item / .nav-icon) */
.cp-toc { width: 300px; flex-shrink: 0; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.cp-toc-list { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.cp-toc ul { list-style: none; margin: 0; padding: 0; }
.cp-toc-link {
    display: flex; align-items: center; gap: 12px; padding: 15px 20px;
    text-decoration: none; color: #2c3e50; border-left: 3px solid transparent;
    transition: all 0.2s; font-size: 13px; line-height: 1.3;
}
.cp-toc-link:hover { background: #f8f9fa; }
.cp-toc-link.cp-toc-active,
.cp-toc-link.cp-toc-section.cp-toc-active-parent {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left-color: #667eea;
    color: #667eea;
}
.cp-toc-link .cp-toc-section-icon, .cp-toc-link.cp-toc-section .material-symbols-outlined { font-size: 20px; }
.cp-toc-link.cp-toc-section { font-weight: 600; }
.cp-toc-articles-list .cp-toc-link { padding: 10px 20px 10px 34px; font-size: 12.5px; }
.cp-toc-articles-list li.cp-toc-sous .cp-toc-link { padding-left: 46px; }
.cp-toc-link.cp-toc-inactive { opacity: 0.5; font-style: italic; }
.cp-toc-numero { text-wrap: nowrap; }
.cp-toc-separator hr { border: none; border-top: 1px solid #eee; margin: 6px 20px; }
.cp-main { flex: 1; min-width: 0; }

/* Drag & drop des articles (réordonnancement), même principe que modeles_emails_config.php */
.article-group { position: relative; }
.article-group.cp-dragging { opacity: 0.5; outline: 2px dashed #667eea; border-radius: 6px; }
.sous-articles-list { position: relative; }
.cp-drag-handle { color: #aaa; cursor: grab; font-size: 20px !important; }
.cp-drag-handle:active { cursor: grabbing; }

/* Bloc "Références à d'autres articles" — même gabarit que .variables-help,
   teinte violette pour le distinguer du bloc bleu des variables */
.cp-refs-help { background: #f2eefc; border-color: #d7c8f7; padding-bottom: 0; }
.cp-refs-help h4 { color: #5b3e9e; }
.cp-refs-help .variable-tag { border-color: #d7c8f7; color: #5b3e9e; }
.cp-refs-help .variable-tag:hover { background: #764ba2; color: white; border-color: #764ba2; }
/* Replié par défaut (juste le titre) pour économiser de la place ; se déplie au clic */
.cp-refs-toggle { cursor: pointer; user-select: none; }
.cp-refs-toggle .cp-refs-chevron { margin-left: auto; transition: transform 0.2s; font-size: 20px !important; }
.cp-refs-help.cp-refs-expanded .cp-refs-chevron { transform: rotate(180deg); }
.cp-refs-help .variables-list { margin-top: 12px; margin-bottom: 12px; }

/* Bouton toggle actif/masqué d'un article — même gabarit que modeles_emails_config.php
   (.me-template-actions .btn-toggle-tpl / .is-active) : pastille douce plutôt qu'un
   bouton plein, icône toggle_on/toggle_off (un seul pictogramme qui bascule). Scopé à
   .cp-btn-toggle-article uniquement pour ne pas affecter le bouton "Supprimer" voisin
   (qui garde son style .btn.btn-sm.btn-danger habituel). */
.cp-article-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cp-article-actions .cp-btn-toggle-article {
    padding: 4px 6px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff3e0;
    color: #f57c00;
}
.cp-article-actions .cp-btn-toggle-article .material-symbols-outlined { font-size: 18px; }
.cp-article-actions .cp-btn-toggle-article.is-active { background: #e8f5e9; color: #388e3c; }

/* Indentation du sous-article (niveau 2), pilotée par l'attribut data-niveau
   déjà présent sur la carte (évite un style inline conditionnel en PHP) */
.collapsible-card[data-niveau="2"] { margin-left: 30px; }

/* Ligne cliquable "titre + poignée" à l'intérieur d'un .collapsible-header d'article */
.cp-article-toggle-row { cursor: pointer; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Zone d'encadrement de l'éditeur CKEditor (texte d'un article) */
.cp-editor-wrap { display: flex; justify-content: center; background-color: rgb(244, 244, 244); padding: 20px; border-radius: 8px; }

/* Éléments injectés dynamiquement par le JS de prévisualisation
   (cpResoudreReferences / cpVerifierVariables / renderFullContractPreview...) */
.cp-var-manquante { background: #fff3cd; padding: 0 3px; }
.cp-var-inconnue { background: #f8d7da; padding: 0 3px; }
.cp-preview-empty { color: #999; }
.cp-preview-hint { margin-top: 8px; font-size: 12px; color: #666; }

@media (max-width: 900px) {
    .cp-layout { display: block; }
    .cp-toc { position: static; width: auto; max-height: none; margin-bottom: 16px; }
}

/* ===========================================
   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;
}

/* Règlements prestataires — recap modal */
/* Séparateur vertical colonnes tableau */
.col-sep-right { border-right: 2px solid #e0e0e0 !important; }
.col-sep-left  { border-left:  2px solid #e0e0e0 !important; }
.tr-organisme  { background: #f0f7ff; border-top: 2px solid #e0e0e0; }

.modal-recap-chiffres {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    flex-wrap: nowrap;
}


/* ============================================================
   RÈGLEMENTS PRESTATAIRES
   ============================================================ */

/* Avatars ronds — petits (liste) */
.avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-sm-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #667eea;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Avatars ronds — moyens (détail) */
.avatar-md {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-md-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #667eea;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Conteneurs flex pour avatar + nom */
.avatar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.avatar-wrap-lg {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Légende compteurs sous le header formation */
.reg-legend-bar {
    background: #f8f9fa;
    padding: 8px 20px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

/* En-tête groupe formation (violet OCYTOMILK) */
.reg-formation-header {
    background: #4A3F8F;
    cursor: pointer;
}

/* Tableau scrollable */
.reg-table-wrap {
    overflow-x: auto;
}

/* Cellule actions (centré + nowrap) */
.td-actions {
    text-align: center;
    white-space: nowrap;
}

/* Ligne solde Charlotte */
.reg-solde-row {
    margin-top: 12px;
    display: flex;
    gap: 24px;
    align-items: center;
}

/* Note info dans la modale */
.reg-info-note {
    font-size: 13px;
    color: #666;
    background: #f0f4ff;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

/* Cellule prestataire (photo + infos) */
.reg-presta-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Champ masqué (contrôlé par JS) */
.field-hidden {
    display: none;
}

/* Stat icon couleurs spécifiques (complément de stat-icon-mini) */
.stat-icon-violet {
    background: #4A3F8F;
}



/* Badges état règlements (couleurs solides) */
.badge-reg-danger {
    background: #e74c3c;
    color: white;
}
.badge-reg-success {
    background: #27ae60;
    color: white;
}

/* Colonnes tableau règlements */
.td-date {
    white-space: nowrap;
    text-align: left;
}

/* État vide */
.empty-state-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}

/* 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;
}

/* ============================================================
   type_formation_edit : sélecteurs de couleur compacts avec
   presets sous le picker (pattern modeles_emails_groupe_edit).
   Préfixés .tfe-* pour ne pas entrer en conflit avec .color-row
   qui est déjà utilisée ailleurs (autre layout).
   ============================================================ */
.tfe-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tfe-color-preview-input {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.tfe-color-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.tfe-color-preset {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.tfe-color-preset:hover,
.tfe-color-preset.selected {
    border-color: #333;
    transform: scale(1.1);
}

/* 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;
}

.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 {
    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 !important;
}

.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; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mb-5 { margin-bottom: 5px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }

/* Paddings */
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.pt-5 { padding-top: 5px; }
.pr-10 { padding-right: 10px; }

/* ===========================================
   CLASSES UTILITAIRES - DISPLAY & FLEX
   =========================================== */

.d-none { display: none !important; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-flex-center { 
    display: flex; 
    align-items: center; 
}
.flex-wrap { flex-wrap: wrap; }
.gap-5 { gap: 5px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.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;
}
.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-group-inline label {
    display: inline-block;
    margin-bottom: 0;
    white-space: nowrap;
}

/* ===========================================
   CLASSES UTILITAIRES - TEXTE
   =========================================== */

.text-muted {
    color: #7f8c8d;
}

.text-small {
    font-size: 13px;
}

.text-large {
    font-size: 1.2em;
}

/* Font-size utilitaires (.fs-N = font-size: Npx) */
.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-28 { font-size: 28px; }

/* Largeurs / gap / marge utilitaires complémentaires (ex : admin/_contrats_config_core.php) */
.max-w-200 { max-width: 200px; }
.min-w-220 { min-width: 220px; }
.gap-14 { gap: 14px; }
.ml-25 { margin-left: 25px; }
.my-25 { margin: 25px 0; }
.mt-n6 { margin-top: -6px; }
.mt-6 { margin-top: 6px; }
.p-40 { padding: 40px; }
.fs-48 { font-size: 48px; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-help { color: #666; margin-bottom: 15px; }
/* Ces deux cartes ont pour dernier enfant un bloc qui porte lui-même un
   margin-bottom (.fe-alert / .form-group), ce qui s'ajoutait au padding-bottom
   du .config-card et créait un espace excessif en bas de carte. */
.config-card > .fe-alert:last-child { margin-bottom: 0; }
#contrat-preview-selecteur .form-group { margin-bottom: 0; }
.text-888 { color: #888; }
.text-ddd { color: #ddd; }
.text-heading { color: #2c3e50; }

.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;
}

/* Icône du type de formation affichée à gauche du titre dans l'en-tête de
   groupe formation (mode "Tous", incrément 2.3c). L'en-tête a un fond
   coloré (dégradé violet / couleur d'onglet), donc on hérite de currentColor
   plutôt que d'imposer la couleur du type — pour une bonne lisibilité sur
   fond sombre. */
.formation-header-type-icon {
    font-size: 22px;
    line-height: 1;
    margin-right: 8px;
    opacity: 0.95;
}

.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 !important;
}

/* 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-error-pre {
    font-size: 12px;
    color: #dc3545;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: inherit;
    max-width: 280px;
}

.cell-muted {
    color: #999;
}

.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: 80vh;
    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;
}

/* Note : la classe .me-content-header a été remplacée par .card-header-flex
   sur modeles_emails.php pour cohérence avec les autres pages
   (formateurs.php, formations.php, etc.). Les règles ci-dessous sont
   conservées pour rétro-compatibilité si d'autres pages les utilisaient,
   mais SANS padding-bottom ni border-bottom (qui doublonnaient le liseret
   du .card-header-flex). */
.me-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Rond coloré qui contient l'icône du groupe dans l'en-tête de la carte
   "Modèles d'emails". La couleur de fond est définie inline en PHP via
   $groupe_actif['couleur'] pour refléter le groupe sélectionné. */
.card-header-flex .card-title .group-icon,
.me-content-header .group-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-right: 8px;
}

.card-header-flex .card-title .group-icon .material-symbols-outlined,
.me-content-header .group-icon .material-symbols-outlined {
    color: white;
}

/* ==================== Liste templates ==================== */
/* ============================================================
   Liste des modèles d'emails — pattern table (cohérent avec
   les autres listings de l'admin : formations.php, sessions.php,
   apprenants.php). 5 colonnes : Type | Nom+Sujet | Clé | Statut | Actions
   ============================================================ */
.me-template-table {
    width: 100%;
    margin-top: 8px;
}

/* Ligne inactive : opacité réduite pour signaler l'état "désactivé" */
.me-template-table tr.me-tpl-inactive {
    opacity: 0.55;
}

/* Largeurs spécifiques des colonnes (le reste s'étire) */
.me-th-type    { width: 160px; }
.me-th-status  { width: 90px; }
.me-th-actions { width: 140px; }

/* Nom du modèle en gras, sujet en gris dessous */
.me-tpl-nom {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}
.me-tpl-sujet {
    color: #777;
    font-size: 13px;
}

/* Clé technique en monospace dans une "pastille" gris pâle */
.me-tpl-cle {
    font-family: 'Courier New', monospace;
    background: #eee;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
}

.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;
}

/* ═══════════════════════════════════════════════════════════════
   Guide Screenshots (screenshot_guide.php)
   ═══════════════════════════════════════════════════════════════ */
.sg-page { font-size: 14px; }
.sg-page .sg-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; }
.sg-page .sg-toc { background: white; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); columns: 4; column-gap: 24px; }
.sg-page .sg-toc-section { break-inside: avoid; margin-bottom: 12px; }
.sg-page .sg-toc-section h2 { font-size: .7rem; text-transform: uppercase; color: #999; letter-spacing: .05em; margin-bottom: 4px; }
.sg-page .sg-toc a { display: block; color: #4A3F8F; text-decoration: none; padding: 1px 0; font-size: .82rem; }
.sg-page .sg-toc a:hover { text-decoration: underline; }
.sg-page .sg-section-block { margin-bottom: 28px; }
.sg-page .sg-section-title { display: flex; align-items: center; gap: 10px; background: #4A3F8F; color: white; padding: 10px 16px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.sg-page .sg-section-title > .material-symbols-outlined { font-size: 2rem; }
.sg-page .sg-section-title .btn-refresh-section { margin-left: auto; background: rgba(255,255,255,.2); border: none; color: white; cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: .5rem; display: flex; align-items: center; gap: 4px; text-align: left; }
.sg-page .sg-section-title .btn-refresh-section:hover { background: rgba(255,255,255,.35); }
.sg-page .sg-section-title .btn-refresh-section .material-symbols-outlined { font-size: .9rem; padding-left: 8px; padding-right: 8px; }
.sg-page .sg-page-block { background: white; border: 1px solid #e9ecef; border-top: none; }
.sg-page .sg-page-block:last-child { border-radius: 0 0 10px 10px; }
.sg-page .sg-page-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; flex-wrap: wrap; }
.sg-page .sg-page-header > .material-symbols-outlined { font-size: 1.75rem; color: #4A3F8F; }
.sg-page .sg-page-header-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sg-page .sg-page-header-name { display: flex; align-items: center; gap: 6px; }
.sg-page .sg-page-header-name h3 { font-size: .9rem; font-weight: 600; margin: 0; white-space: nowrap; }
.sg-page .sg-page-file { font-size: .72rem; color: #aaa; font-family: monospace; }
.sg-page .sg-page-content { padding: 12px 16px; display: grid; grid-template-columns: .75fr 1fr; gap: 20px; }
.sg-page .sg-sub-block h4 { font-size: .7rem; text-transform: uppercase; color: #aaa; letter-spacing: .05em; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid #f0f0f0; }
.sg-page .sg-card-list { min-height: 32px; }
.sg-page .sg-card-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f8f8f8; font-size: .83rem; }
.sg-page .sg-card-item:last-child { border-bottom: none; }
.sg-page .sg-card-num { width: 20px; height: 20px; background: #4A3F8F; color: white; border-radius: 50%; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-page .sg-no-scan { color: #ccc; font-style: italic; font-size: .8rem; }
.sg-page .sg-scraped-at { font-size: .68rem; color: #bbb; margin-top: 4px; }
.sg-page .sg-action-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f8f8f8; font-size: .83rem; }
.sg-page .sg-action-item:last-child { border-bottom: none; }
.sg-page .sg-action-icon { width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-page .sg-action-icon .material-symbols-outlined { font-size: .85rem; }
.sg-page .sg-action-info { flex: 1; }
.sg-page .sg-action-label { font-weight: 500; line-height: 1.3; }
.sg-page .sg-action-dest { font-size: .7rem; color: #aaa; }
.sg-page .sg-badge-type { font-size: .65rem; padding: 1px 6px; border-radius: 8px; font-weight: 600; flex-shrink: 0; }
.sg-page .sg-badge-type .material-symbols-outlined { font-size: .75rem; vertical-align: middle; }
.sg-page .sg-badge-page { background: #e3f2fd; color: #1976d2; }
.sg-page .sg-badge-modale { background: #f3e5f5; color: #7b1fa2; }
.sg-page .sg-badge-quick { background: #fff3e0; color: #e65100; font-size: .62rem; padding: 1px 4px; border-radius: 6px; margin-left: 3px; }
.sg-page .btn-refresh { background: none; border: 1px solid #ddd; cursor: pointer; padding: 3px 8px; border-radius: 6px; font-size: .5rem; color: #666; display: flex; align-items: center; gap: 3px; transition: all .2s; text-align: left; }
.sg-page .btn-refresh:hover { border-color: #4A3F8F; color: #4A3F8F; }
.sg-page .btn-refresh.loading { opacity: .6; pointer-events: none; }
.sg-page .btn-refresh .material-symbols-outlined { font-size: .85rem; padding-left: 8px; padding-right: 8px; color: inherit; }
.sg-page .btn-capture-card { background: none; border: 1px solid #e0d7ff; color: #667eea; cursor: pointer; padding: 2px 6px; border-radius: 5px; display: flex; align-items: center; flex-shrink: 0; transition: all .2s; font-size: .5rem; text-align: left; }
.sg-page .btn-capture-card:hover { background: #f0ecff; }
.sg-page .btn-capture-card.done { border-color: #28a745; color: #28a745; }
.sg-page .btn-capture-card.error { border-color: #dc3545; color: #dc3545; }
.sg-page .btn-capture-card .material-symbols-outlined { font-size: .85rem; padding-left: 8px; padding-right: 8px; color: inherit; }
.sg-page .sg-header-h1 .material-symbols-outlined { font-size: 1.2rem; vertical-align: middle; }
.sg-page #btn-open-sim .material-symbols-outlined { font-size: 1rem; }
.sg-page .sg-limit-label { display: flex; align-items: center; gap: 3px; font-size: .75rem; color: #744210; background: #fff8f0; border: 1px solid #f6ad55; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.sg-page .sg-limit-label .material-symbols-outlined { font-size: .85rem; vertical-align: middle; }
.sg-page .sg-header-limit-input:focus { outline: 2px solid #ed8936; }
.sg-page .sg-page-record-selector { display: flex; align-items: center; gap: 5px; margin-left: 4px; }
.sg-page .sg-page-record-selector select { background: #fff8f0; border: 1px solid #f6ad55; border-radius: 4px; padding: 2px 5px; font-size: .75rem; cursor: pointer; color: #744210; max-width: 190px; }
.sg-page .sg-page-record-selector select:focus { outline: 2px solid #ed8936; border-color: #ed8936; }
.sg-page .sg-page-record-selector::before { content: '⚙'; font-size: .8rem; color: #ed8936; }
.sg-page .btn-sim .material-symbols-outlined { font-size: 1rem; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-page .spin { animation: sg-spin .8s linear infinite; display: inline-block; }
/* Centrage global des en-têtes de tableau */
th { text-align: center !important; }

/* repartition_frais_session - classes remplaçant les styles inline */
.funding-credit { font-size: 8px; font-weight: 700; margin-right: 2px; color: #c0392b; }
.funding-debit  { font-size: 8px; font-weight: 700; margin-right: 2px; }
.icon-chip      { font-size: 14px !important; vertical-align: middle; }

/* =====================================================================
 * OCYTOMILK - INCRÉMENT 1 : Types de formation
 * Consolidé le 30/04/2026 (incrément 1.0 + patches v1.1 et v1.2 fusionnés
 * et nettoyés des classes devenues inutiles).
 * ===================================================================== */

/* ----- Puces (icônes colorées de type) ----------------------------- */
/* Badge type de formation : la couleur du type est fournie en `color:` inline
   sur l'élément (points d'appel inchangés). On l'utilise via currentColor pour
   le dégradé de fond, et l'icône prend la couleur d'univers via
   -webkit-text-fill-color (supporté partout, y compris Firefox). */
.type-formation-puce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-color, currentColor) 0%, color-mix(in srgb, var(--tf-color, currentColor), #000 22%) 100%);
    vertical-align: middle;
}
.type-formation-puce .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    color: var(--tf-icone-colore, #FFFFFF);
    -webkit-text-fill-color: var(--tf-icone-colore, #FFFFFF);
}

.type-formation-puce-cell {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tf-color, currentColor) 0%, color-mix(in srgb, var(--tf-color, currentColor), #000 22%) 100%);
    -webkit-text-fill-color: var(--tf-icone-colore, #FFFFFF);
    vertical-align: middle;
}

/* ----- Toggle segmenté en haut à droite des filtres ---------------- */
.types-formation-toggle {
    display: inline-flex;
    align-items: stretch;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    padding: 3px;
    margin-left: auto;          /* poussé tout à droite de la ligne de filtres */
    gap: 0;
    position: relative;          /* nécessaire pour ::after et le bouton "unpin" */
}

/* Le bouton X "désépingler" est un petit cercle gris autonome qui dépasse à
   droite du toggle quand le filtre local est posé. Pas de "queue" derrière
   (testé en CSS, le stacking context ne se laisse pas dompter facilement
   dans cette page). C'est aussi plus minimaliste. */

/* Modificateur : filtre local NON posé (état neutre, suit le global passivement).
   Toggle visiblement atténué pour communiquer "présent mais inactif".
   Le segment marqué .active reste mis en surbrillance pour montrer le contexte
   global hérité. */
.types-formation-toggle.types-formation-toggle-unset {
    opacity: 0.5;
    filter: grayscale(0.4);
}
.types-formation-toggle.types-formation-toggle-unset:hover {
    opacity: 0.85;
    filter: none;
    transition: opacity 0.15s, filter 0.15s;
}

/* Modificateur : filtre local POSÉ (l'utilisateur a cliqué un segment).
   Bordure et fond rouges pour aligner avec le langage visuel des autres
   filtres actifs (boutons, selects en .filter-active, etc.).
   Le segment .active conserve son apparence violette/bleue par défaut
   (héritage du dégradé du toggle global). */
.types-formation-toggle.types-formation-toggle-pose {
    border-color: #e74c3c;
    background: #fff5f5;
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.18);
}

/* Modificateur : le toggle local diverge du contexte global de la sidebar.
   Indique à l'utilisateur qu'il filtre localement quelque chose de différent
   du contexte global (logique "Local prime"). Prime visuellement sur l'état
   "posé" (orange = alerte spécifique).
   La double classe (.pose.divergent) augmente la spécificité pour écraser
   les couleurs de .pose seul. */
.types-formation-toggle.types-formation-toggle-divergent,
.types-formation-toggle.types-formation-toggle-pose.types-formation-toggle-divergent {
    border-color: #f39c12;
    box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.2);
}

/* Bouton X "désépingler" : petit cercle gris posé sur la "queue" (::after du
   toggle). Visible uniquement quand le filtre local est posé. Au clic, retour
   à l'état neutre où le toggle local re-suit passivement le global. */
.types-formation-toggle-unpin {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-6px, -50%);  /* léger chevauchement pour suggérer l'attache */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #b8b8b8;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.types-formation-toggle-unpin .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}
.types-formation-toggle-unpin:hover {
    background: #e74c3c;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.35);
}
.types-formation-toggle-unpin:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

.types-formation-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    min-height: 30px;
    border-radius: 999px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    line-height: 1;
}

.types-formation-toggle-btn .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
    color: var(--tf-icone-blanc, #2C3E50);   /* inactif : icône couleur univers "sur fond blanc" */
}

.types-formation-toggle-btn.active .material-symbols-outlined {
    color: var(--tf-icone-colore, #FFFFFF);  /* actif : icône couleur univers "sur fond coloré" */
}

.types-formation-toggle-btn .toggle-libelle {
    font-size: 13px;
}

.types-formation-toggle-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.06);
    color: #2c3e50;
}

/* Segment actif : badge dégradé de la couleur du type (var --tf-color).
   Le segment "Tous" n'a pas de --tf-color → repli sur un dégradé neutre.
   En état "posé", la règle rouge ci-dessous (plus spécifique) prend le dessus. */
.types-formation-toggle-btn.active {
    background: linear-gradient(135deg, var(--tf-color, #5b6be0) 0%, color-mix(in srgb, var(--tf-color, #5b6be0), #000 22%) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Quand le toggle local est POSÉ, le segment actif passe en rouge pour
   refléter qu'on a posé un filtre local (cohérent avec la bordure et le fond
   rouges du toggle). En mode non posé, le segment actif conserve son dégradé
   violet/bleu (héritage du contexte global). */
.types-formation-toggle.types-formation-toggle-pose .types-formation-toggle-btn.active {
    background: #e74c3c;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.types-formation-toggle-btn:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* ----- Colonne unique "Types de formation" en début de tableau -----
   Sélecteurs avec tag (th./td.) pour battre la spécificité de
   `.table td { text-align: left }` qui est plus spécifique que
   `.td-types-formation-col` seul. */
th.th-types-formation-col {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

td.td-types-formation-col {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 8px;
}

.td-types-formation-col .type-formation-puce-cell {
    font-size: 22px;
    margin: 0 2px;
    vertical-align: middle;
}

/* ----- Cases à cocher des types (formateur_edit / intervenant_edit)  */
.types-formation-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.type-formation-check {
    cursor: pointer;
    margin: 0;
    display: inline-block;
}
.type-formation-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.type-formation-check-visuel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    color: #666;
    font-weight: 500;
    transition: all 0.15s;
    user-select: none;
}
.type-formation-check-visuel .material-symbols-outlined {
    font-size: 22px;
    color: #999;
    transition: color 0.15s;
}
.type-formation-check:hover .type-formation-check-visuel {
    background: #f0f0f0;
    border-color: #bbb;
}
.type-formation-check input[type="checkbox"]:checked + .type-formation-check-visuel {
    border-color: var(--tf-color, #667eea);
    background-color: var(--tf-color, #667eea);
    color: #fff;
}
.type-formation-check input[type="checkbox"]:checked + .type-formation-check-visuel .material-symbols-outlined {
    color: #fff;
}
.type-formation-check input[type="checkbox"]:focus-visible + .type-formation-check-visuel {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* Texte d'aide sous le titre de section */
.form-help-text {
    margin-top: -5px;
    margin-bottom: 15px;
    font-size: 13px;
}

/* ----- Modale de confirmation de décoche --------------------------- */
.modal-content-decoche-type {
    max-width: 600px;
    width: 600px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-content-decoche-type h3 {
    margin: 0 0 15px 0;
}
.modal-content-decoche-type h3 .material-symbols-outlined {
    color: #f39c12;
}
.modal-content-decoche-type p {
    margin: 10px 0;
    line-height: 1.5;
}
.modale-decoche-list {
    list-style: disc;
    margin: 12px 0;
    padding-left: 24px;
    max-height: 200px;
    overflow-y: auto;
}
.modale-decoche-list li {
    margin-bottom: 4px;
}
.modale-decoche-list a {
    color: #2980b9;
    text-decoration: none;
}
.modale-decoche-list a:hover {
    text-decoration: underline;
}
.modale-decoche-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* ----- Page d'édition d'un type de formation ----------------------- */
/* Ces classes sont conservées car utilisées par .couleur-hex-input (input hex) */
.couleur-hex-input {
    max-width: 120px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* ----- Listing types de formation : swatch + code tag -------------- */
.couleur-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    margin-right: 6px;
}
.couleur-hex {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #666;
    vertical-align: middle;
}
.code-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f4f4f4;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #555;
}

/* Cellule centrée pour icône / couleur sur listing types */
.col-icone, .col-couleur {
    text-align: center;
    vertical-align: middle;
}
.col-actions {
    text-align: right;
}

/* ----- Petits utilitaires ------------------------------------------ */
.empty-message {
    text-align: center;
    color: #7f8c8d;
    padding: 40px;
}
.mt-15-inline {
    margin-top: 15px;
    display: inline-block;
}
.table-overflow-x {
    overflow-x: auto;
}
.d-inline {
    display: inline;
}
.m-0 {
    margin: 0;
}
.toggle-switch.m-0 {
    margin: 0;
}

/* =====================================================================
 * FIN INCRÉMENT 1
 * ===================================================================== */

/* =====================================================================
 * OCYTOMILK - INCRÉMENT 2 : Toggle de contexte global dans la sidebar
 * Ajouté le 30/04/2026.
 * ===================================================================== */

/* ----- Toggle de contexte global dans la sidebar dark -------------- */
.sidebar-context-toggle {
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 3px;
    margin: 18px 12px 8px 12px;
    gap: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sidebar-context-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 4px 12px;
    min-height: 32px;
    border-radius: 999px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    line-height: 1;
    font-family: inherit;
}

.sidebar-context-toggle-btn .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
    color: var(--tf-icone-blanc, #2C3E50);   /* inactif : icône couleur univers "sur fond blanc" */
}

.sidebar-context-toggle-btn.active .material-symbols-outlined {
    color: var(--tf-icone-colore, #FFFFFF);  /* actif : icône couleur univers "sur fond coloré" */
}

.sidebar-context-toggle-btn .toggle-libelle {
    font-size: 13px;
}

.sidebar-context-toggle-btn:hover:not(.active):not(.loading) {
    background: rgba(0, 0, 0, 0.06);
    color: #2c3e50;
}

/* Segment actif : badge dégradé de la couleur du type (var --tf-color).
   Le segment "Tous" n'a pas de --tf-color → repli sur un dégradé neutre. */
.sidebar-context-toggle-btn.active {
    background: linear-gradient(135deg, var(--tf-color, #5b6be0) 0%, color-mix(in srgb, var(--tf-color, #5b6be0), #000 22%) 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* État "loading" pendant la requête AJAX */
.sidebar-context-toggle-btn.loading {
    opacity: 0.5;
    cursor: wait;
}

.sidebar-context-toggle-btn:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* ----- Indicateur de contexte dans les titres de pages ------------- */
.card-title-context {
    font-weight: 500;
    margin-left: 6px;
    font-size: 0.9em;
}

/* =====================================================================
 * FIN INCRÉMENT 2
 * ===================================================================== */

/* =====================================================================
 * OCYTOMILK - Badge "type de formation courant" à côté du titre de page
 * Ajout du 30/04/2026 (complément de l'incrément 2)
 * ===================================================================== */

.page-title-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Badge de contexte dans le titre de page — style INVERSÉ (plein) :
   fond dégradé de la couleur du type, icône + texte en blanc (univers).
   (Ancien style "contour" : fond clair + bordure/icône/texte à la couleur du type.) */
.page-title-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--tf-color, #5b6be0) 0%, color-mix(in srgb, var(--tf-color, #5b6be0), #000 22%) 100%);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tf-icone-colore, #FFFFFF);
    line-height: 1.2;
}

.page-title-type-badge .material-symbols-outlined {
    font-size: 20px;
    color: var(--tf-icone-colore, #FFFFFF);
    line-height: 1;
}

.page-title-type-libelle {
    color: var(--tf-icone-colore, #FFFFFF);
    font-weight: 600;
}

/* =====================================================================
 * FIN AJOUT BADGE TITRE
 * ===================================================================== */

/* ============================================================
   Affichage inline de la rémunération (formation_edit / session_edit)
   - hérité (icône family_history) ou surchargé (icône turn_sharp_left)
   ============================================================ */
.remu-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.remu-inline-icon {
    font-size: 18px !important;
    vertical-align: middle;
}
.remu-inline-inherited {
    color: #6c757d;
}
.remu-inline-override {
    color: #667eea;
    font-weight: 700;
}
/* Pictogramme "info" injecté en CSS pour signaler clairement le override
   (la rému écrase celle du profil du formateur). Utilise les ligatures
   Material Symbols Outlined. */
.remu-inline-override::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    content: 'info';
    color: #667eea;
}
.remu-inline-none {
    color: #999;
    font-style: italic;
}

/* ============================================================
   Custom-select formateur/intervenant (modales d'ajout dans
   formation_edit / session_edit) : icônes des types de
   formation rattachés à chaque personne, séparateurs de groupes
   (Compatibles / Autres / Déjà ajoutés).
   ============================================================ */
.custom-select-formateur .select-option-types,
.custom-select-intervenant .select-option-types {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.custom-select-formateur .select-option-types .material-symbols-outlined,
.custom-select-intervenant .select-option-types .material-symbols-outlined {
    color: var(--tf-color, #9ca3af);
    font-size: 1.2rem;
}
.custom-select-formateur .select-option-text,
.custom-select-intervenant .select-option-text {
    flex: 1;
}
/* Libellé de groupe ("Compatibles avec cette formation", "Autres formateurs", "Déjà ajoutés") */
.custom-select-formateur .select-option-group-label,
.custom-select-intervenant .select-option-group-label {
    padding: 8px 14px 4px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
}
/* Options non-compatibles : libellé en italique gris pour signaler visuellement */
.custom-select-formateur .select-option.non-compatible .select-option-text,
.custom-select-intervenant .select-option.non-compatible .select-option-text {
    color: #6b7280;
    font-style: italic;
}
/* Options déjà ajoutées : grisées et non cliquables visuellement */
.custom-select-formateur .select-option.deja-ajoute,
.custom-select-intervenant .select-option.deja-ajoute {
    opacity: 0.5;
    cursor: not-allowed;
}
.custom-select-formateur .select-option.deja-ajoute:hover,
.custom-select-intervenant .select-option.deja-ajoute:hover {
    background: transparent;
}

/* ============================================================
   Compat input[type="radio"] sur .type-formation-check
   (utilisé dans formation_edit.php pour la sélection unique
   du type de formation, en réutilisant le style "checkbox"
   de formateur_edit.php).
   ============================================================ */
.type-formation-check input[type="radio"] {
    /* Mêmes propriétés que pour les checkboxes */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.type-formation-check input[type="radio"]:checked + .type-formation-check-visuel {
    border-color: var(--tf-color);
    background-color: var(--tf-color);
    color: #fff;
}
.type-formation-check input[type="radio"]:checked + .type-formation-check-visuel .material-symbols-outlined {
    color: #fff;
}
.type-formation-check input[type="radio"]:focus-visible + .type-formation-check-visuel {
    outline: 2px solid var(--tf-color);
    outline-offset: 2px;
}

/* ============================================================
   Barèmes Masterclass : page baremes.php
   Structure : nav gauche (.parametres-nav) + contenu droite (.parametres-content)
   ============================================================ */

/* --- Items de nav (la moitié gauche) ---
   On garde le style générique .nav-item (hérité de parametres-nav) et on ajoute
   juste un sous-libellé pour distinguer "avec/sans replay". */
.baremes-nav .nav-item {
    align-items: center;
}
.bareme-nav-label {
    flex: 1;
    line-height: 1.3;
}
.bareme-nav-sublabel {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.bareme-nav-sublabel .material-symbols-outlined {
    font-size: 1rem;
}
.baremes-nav .nav-item.active .bareme-nav-sublabel {
    color: rgba(255,255,255,0.85);
}

/* --- Tableau des tranches (contenu droite) --- */
.baremes-table {
    margin-bottom: 24px;
}

/* --- Formulaire ajout tranche --- */
.form-row-baremes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.form-group-button {
    align-self: end;
}
.section-subtitle {
    margin-top: 28px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    color: #4b5563;
}

/* Cas spécial : le <form> est imbriqué dans un <tr>, déclaré comme contents
   pour ne pas casser la structure de tableau. */
.form-tranche-edit-inline {
    display: contents;
}
.form-tranche-delete-inline {
    display: inline;
    margin: 0;
}
.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.col-actions form {
    display: inline-block;
}

/* ============================================================
   Page baremes.php : menu vertical de gauche listant les 4 grilles
   (style inspiré de modeles_emails)
   ============================================================ */

/* Item menu : libellé multi-lignes (rôle + état replay) */
.baremes-nav .bareme-nav-label {
    flex: 1;
    min-width: 0;
}
.baremes-nav .bareme-nav-role {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}
.baremes-nav .bareme-nav-replay {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #6b7280;
}
.baremes-nav .bareme-nav-replay .material-symbols-outlined {
    font-size: 1rem;
}

/* État actif : même style que modeles_emails */
.baremes-nav .nav-item.active .bareme-nav-role,
.baremes-nav .nav-item.active .bareme-nav-replay {
    color: inherit;
}

/* Badge de comptage (nombre de tranches) */
.baremes-nav .nav-count-empty {
    background: #fee2e2;
    color: #b91c1c;
}

/* En-tête du panneau droit (titre + bouton modifier alignés) */
.bareme-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.bareme-card-head h2 {
    margin: 0;
}

/* ============================================================
   Barèmes (compléments) :
   - champs numériques sans flèches up/down, texte aligné à droite
   - € non gras
   - tag du type de formation (utilise --tf-color en var custom)
   - bouton ✎ pour modifier l'attribution sur le menu de gauche
   ============================================================ */

/* Champs numériques sans flèches dans bareme_edit */
.bareme-edit-meta + .description ~ .card .form-control[type="number"],
.form-tranche-edit-inline input[type="number"],
.form-tranche-add input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}
.form-tranche-edit-inline input[type="number"]::-webkit-outer-spin-button,
.form-tranche-edit-inline input[type="number"]::-webkit-inner-spin-button,
.form-tranche-add input[type="number"]::-webkit-outer-spin-button,
.form-tranche-add input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Symbole € : pas de gras, juste plus discret */
.percent-symbol {
    font-weight: normal;
    color: #6b7280;
}

/* Tag du type de formation (utilise --tf-color comme les autres composants types) */
.bareme-tag-type {
    background: var(--tf-color, #667eea);
    color: #fff;
}
.bareme-tag-type .material-symbols-outlined {
    color: #fff;
}

/* Wrapper pour superposer le bouton ✎ sur l'item du menu gauche */
.bareme-nav-item-wrapper {
    position: relative;
}
.bareme-nav-item-wrapper .nav-item {
    padding-right: 50px; /* place pour le bouton ✎ */
}
.btn-icon-edit-attribution {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}
.btn-icon-edit-attribution:hover {
    background: rgba(0,0,0,0.08);
    color: #2c3e50;
}
.btn-icon-edit-attribution .material-symbols-outlined {
    font-size: 1.1rem;
}

/* Sous-libellé "type de formation" dans le menu gauche */
.baremes-nav .bareme-nav-type {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.baremes-nav .nav-item.active .bareme-nav-type {
    color: rgba(255,255,255,0.85);
}

/* Bloc "+ Ajouter un barème" en haut du menu gauche */
.baremes-nav-actions {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.baremes-nav-actions .btn {
    width: 100%;
    justify-content: center;
}

/* Modale (style basique inspiré des autres modales du projet) */
#bareme-modal.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#bareme-modal .modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    overflow: hidden;
}
#bareme-modal .modal-header,
#bareme-modal .modal-footer {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#bareme-modal .modal-header {
    border-bottom: 1px solid #e5e7eb;
}
#bareme-modal .modal-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
#bareme-modal .modal-body {
    padding: 20px;
}
#bareme-modal .modal-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #6b7280;
}
#bareme-modal .toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* ============================================================
   Page baremes.php : arbre hiérarchique 3 niveaux
   1) type de formation (header)
   2) rôle (Principal / Partiel)
   3) leaf cliquable (Avec replay / Sans replay)
   ============================================================ */
.baremes-tree {
    padding: 0;
}

/* --- Niveau 1 : type de formation --- */
.bareme-tree-tf {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.bareme-tree-tf:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.bareme-tree-tf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    font-weight: 600;
    color: #2c3e50;
}
.bareme-tree-tf-header .material-symbols-outlined {
    color: var(--tf-color, #667eea);
    font-size: 1.3rem;
}
.bareme-tree-tf-label {
    flex: 1;
    min-width: 0;
}

/* --- Niveau 2 : rôle (Principal / Partiel) ---
   Pas de margin-left : le retrait se fait par padding-left sur le header,
   pour que les leafs (niveau 3) puissent s'étendre bord à bord. */
.bareme-tree-role-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 6px 30px; /* 30px = retrait visuel pour le 2e niveau */
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 500;
}
.bareme-tree-role-header .material-symbols-outlined {
    font-size: 1.15rem;
    color: #6b7280;
}
.bareme-tree-role-label {
    flex: 1;
    min-width: 0;
}

/* --- Niveau 3 : leaf cliquable ---
   La sélection s'étend du bord gauche au bord droit du menu (pas de margin/radius),
   le retrait visuel se fait uniquement par padding-left.
   Reprend le style standard `.nav-item.active` (gradient violet + bordure gauche). */
.bareme-tree-leaf {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 10px 50px; /* 50px = retrait visuel pour le 3e niveau */
    text-decoration: none;
    color: #374151;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-left-color 0.15s;
}
.bareme-tree-leaf:hover {
    background: #f8f9fa;
}
.bareme-tree-leaf.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;
}
.bareme-tree-leaf .material-symbols-outlined {
    font-size: 1.1rem;
}
.bareme-tree-leaf-label {
    flex: 1;
    min-width: 0;
}

/* Wrapper pour le bouton ✎ : pas de margin sur le wrapper non plus */
.baremes-tree .bareme-nav-item-wrapper {
    margin: 0;
}

/* Les anciens styles .bareme-nav-* (label/role/replay) ne sont plus utilisés
   mais on les laisse pour ne pas casser une éventuelle réutilisation ailleurs. */

/* ============================================================
   Corrections finales arbre barèmes
   - largeur nav à 270px (spécifique baremes)
   - retirer la puce des <li>/<ul>
   - fond grisé sur les en-têtes de type de formation
   ============================================================ */

/* Largeur du menu spécifique aux barèmes (override .parametres-nav qui est à 220px) */
.parametres-nav.baremes-nav {
    width: 270px;
}

/* Retirer la puce devant les <li> du menu */
.baremes-tree,
.baremes-tree li {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Fond grisé sur les en-têtes de type de formation pour bien marquer la séparation */
.bareme-tree-tf-header {
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
    margin: 0;
}
/* Le 1er en-tête n'a pas besoin de border-top (il colle au bouton "Ajouter") */
.bareme-tree-tf:first-child .bareme-tree-tf-header {
    border-top: none;
}
/* Plus besoin du border-bottom du <li> tf puisque le header en a déjà un */
.bareme-tree-tf {
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 0;
}

/* ============================================================
   Custom-select dans la modale d'ajout/édition de barème
   (réutilise les classes .custom-select / .select-trigger / .select-options
   du formation_edit, mais avec un look "input" classique)
   ============================================================ */
.custom-select-modal {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
}
.custom-select-modal .select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.custom-select-modal.open .select-trigger,
.custom-select-modal .select-trigger:hover {
    border-color: #667eea;
}
.custom-select-modal.open .select-trigger {
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.custom-select-modal .select-text {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-select-modal .select-text.placeholder {
    color: #9ca3af;
}
.custom-select-modal .arrow {
    color: #6b7280;
    transition: transform 0.15s;
}
.custom-select-modal.open .arrow {
    transform: rotate(180deg);
}

/* Liste des options */
.custom-select-modal .select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    display: none;
}
.custom-select-modal.open .select-options {
    display: block;
}

/* Une option */
.custom-select-modal .select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
}
.custom-select-modal .select-option:hover {
    background: #f3f4f6;
}
.custom-select-modal .select-option.selected {
    background: #ede9fe;
    color: #4f46e5;
    font-weight: 500;
}
.custom-select-modal .select-option-icon {
    display: inline-flex;
    align-items: center;
}
.custom-select-modal .select-option-icon .material-symbols-outlined {
    color: var(--tf-color, #6b7280);
    font-size: 1.2rem;
}
.custom-select-modal .select-option-text {
    flex: 1;
}

/* Quand une valeur est sélectionnée, l'icône dans le trigger garde sa couleur */
.custom-select-modal .select-text .select-option-icon .material-symbols-outlined {
    font-size: 1.2rem;
}

/* ============================================================
   Header de carte avec plusieurs boutons à droite (baremes.php)
   ============================================================ */
.card-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-inline-delete-bareme {
    margin: 0;
    display: inline-block;
}

/* ============================================================
   Checkboxes des rôles dans la modale d'ajout (création multi-rôles)
   - Spécificité > .form-group label (qui force display: block)
   ============================================================ */
.bareme-roles-checkboxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.bareme-roles-checkboxes .bareme-role-check {
    display: inline-block;
    width: auto;
    cursor: pointer;
    margin: 0;
}
.bareme-roles-checkboxes .bareme-role-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bareme-roles-checkboxes .bareme-role-check-visuel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    transition: all 0.15s;
    color: #4b5563;
    white-space: nowrap;
}
.bareme-roles-checkboxes .bareme-role-check-visuel .material-symbols-outlined {
    color: #6b7280;
}
.bareme-roles-checkboxes .bareme-role-check:hover .bareme-role-check-visuel {
    border-color: #667eea;
    background: #f0f7ff;
}
.bareme-roles-checkboxes .bareme-role-check input[type="checkbox"]:checked + .bareme-role-check-visuel {
    border-color: #667eea;
    background: #ede9fe;
    color: #4f46e5;
}
.bareme-roles-checkboxes .bareme-role-check input[type="checkbox"]:checked + .bareme-role-check-visuel .material-symbols-outlined {
    color: #4f46e5;
}

/* ============================================================
   Option grisée dans le custom-select (rôle déjà occupé en édition)
   ============================================================ */
.custom-select-modal .select-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.custom-select-modal .select-option.disabled:hover {
    background: transparent;
}

/* Petits ajustements baremes.php */
.bareme-tree-empty {
    padding: 20px;
}
.bareme-roles-help {
    margin-bottom: 8px;
}

/* bareme_edit.php : espacement entre cartes empilées et description compacte */
.card.card-stack {
    margin-top: 20px;
}
.bareme-edit-description {
    margin-top: 12px;
    margin-bottom: 0;
}

/* ============================================================
   Titre hiérarchique du panneau droit barèmes :
   3 lignes verticales avec indentation progressive
     🪙 Barème <Type formation>
        ❤ Principal
           ⏸ Sans replay
   Couleur, taille et graisse alignées sur le style .card-title.
   ============================================================ */
.bareme-card-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #667eea;
    font-size: 24px;
    font-weight: bold;
}
.bareme-card-heading-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bareme-card-heading-line .material-symbols-outlined {
    font-size: 24px;
    color: #667eea;
}
.bareme-card-heading-line strong {
    font-weight: inherit; /* éviter le bold renforcé du <strong> */
}
.bareme-card-heading-role {
    padding-left: 32px;
}
.bareme-card-heading-replay {
    padding-left: 64px;
}

/* ============================================================
   Tranches sous forme de cartes en grille 2 colonnes responsive
   - 2 colonnes >= 768px (tablette/desktop)
   - 1 colonne en mobile
   ============================================================ */
.bareme-tranches-grid {
    /* Affichage en 2 colonnes sur desktop, mais avec un ordre de lecture
       VERTICAL (top→bottom dans la 1ère colonne, puis 2ème colonne).
       On utilise CSS multi-column pour ce comportement (≠ CSS Grid). */
    column-count: 1;
    column-gap: 32px;
    margin-top: 12px;
}
@media (min-width: 768px) {
    .bareme-tranches-grid {
        column-count: 2;
    }
}
.bareme-tranches-grid > * {
    /* Empêche un élément (carte tranche) d'être coupé entre 2 colonnes */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.bareme-tranche-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid #e5e7eb;
}
.bareme-tranche-range {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-size: 0.95rem;
}
.bareme-tranche-min,
.bareme-tranche-max {
    font-weight: 600;
    color: #2c3e50;
}
.bareme-tranche-sep {
    color: #9ca3af;
}
.bareme-tranche-suffix {
    color: #6b7280;
    margin-left: 4px;
}
.bareme-tranche-amount {
    font-weight: 600;
    color: #2c3e50;
}

/* Quand le card-header-flex contient un titre hiérarchique multi-lignes,
   on aligne les boutons d'action en haut (flex-start) plutôt qu'au centre. */
.card-header-flex.card-header-flex-baremes {
    align-items: flex-start;
}

/* ============================================================
   bareme_edit.php : grille 2 colonnes responsive avec champs éditables
   - mêmes règles de séparation/typo que bareme-tranche-card en lecture
   - ajoute champs <input> compacts + boutons d'action
   ============================================================ */
.bareme-tranches-grid-edit {
    /* hérite des règles .bareme-tranches-grid (column-count, ordre vertical) */
}
.bareme-tranche-card-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid #e5e7eb;
}
.bareme-tranche-card-edit .form-tranche-edit-grid {
    display: contents; /* permet aux enfants directs d'être positionnés par le flex du parent */
}

/* Bloc "X → Y inscrits" éditable */
.bareme-tranche-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-size: 0.95rem;
}
.bareme-tranche-fields .bareme-tranche-sep {
    color: #9ca3af;
}
.bareme-tranche-fields .bareme-tranche-suffix {
    color: #6b7280;
    margin-left: 2px;
}

/* Bloc "X €" éditable */
.bareme-tranche-amount-edit {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.bareme-tranche-currency {
    font-weight: normal;
    color: #6b7280;
}

/* Champs numériques compacts, alignés à droite, sans flèches */
.bareme-tranche-input {
    width: 70px;
    padding: 6px 8px;
    text-align: right;
    font-weight: 600;
    color: #2c3e50;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-size: 0.95rem;
    -moz-appearance: textfield;
}
.bareme-tranche-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.15);
}
.bareme-tranche-input::-webkit-outer-spin-button,
.bareme-tranche-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bareme-tranche-input-amount {
    width: 90px;
}

/* Actions (✓ enregistrer + 🗑️ supprimer) */
.bareme-tranche-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-icon-save {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #059669;
    transition: background 0.15s;
}
.btn-icon-save:hover {
    background: rgba(5,150,105,0.1);
}
.bareme-tranche-actions .btn-icon-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #dc2626;
    transition: background 0.15s;
}
.bareme-tranche-actions .btn-icon-delete:hover {
    background: rgba(220,38,38,0.1);
}
.bareme-tranche-actions .material-symbols-outlined {
    font-size: 1.1rem;
}

/* Le formulaire de suppression à côté du form d'édition */
.form-tranche-delete-grid {
    margin: 0;
    display: inline-block;
}

/* ============================================================
   Récapitulatif des barèmes dans formateur_edit / intervenant_edit
   (visible quand le type de rémunération est 'principal' ou 'partiel')
   ============================================================ */
.bareme-recap-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f0f7ff;
    border: 1px solid #c7d8f5;
    border-radius: 6px;
    margin-bottom: 16px;
}
.bareme-recap-intro .material-symbols-outlined {
    color: #4f46e5;
    font-size: 1.4rem;
}
.bareme-recap-intro p {
    margin: 0;
    color: #374151;
    font-size: 0.92rem;
    line-height: 1.4;
}

.bareme-recap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px;
}
@media (min-width: 768px) {
    .bareme-recap-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bareme-recap-bloc {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}
.bareme-recap-bloc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #4f46e5;
}
.bareme-recap-bloc-title .material-symbols-outlined {
    font-size: 1.2rem;
}

.bareme-recap-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.bareme-recap-table th {
    text-align: left;
    padding: 6px 8px;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.85rem;
    border-bottom: 1px solid #e5e7eb;
}
.bareme-recap-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    color: #2c3e50;
}
.bareme-recap-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.bareme-recap-empty {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    font-style: italic;
}
.bareme-recap-empty a {
    color: #4f46e5;
    font-style: normal;
    text-decoration: underline;
}

.bareme-recap-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #4f46e5;
    text-decoration: none;
    margin-top: 4px;
}
.bareme-recap-link:hover {
    text-decoration: underline;
}
.bareme-recap-link .material-symbols-outlined {
    font-size: 1rem;
}

/* Badge du nombre de barèmes dans le custom-select de l'aperçu (intervenant_edit, formateur_edit) */
.custom-select-modal .select-option-count {
    margin-left: auto;
    font-size: 0.75rem;
}

/* ============================================================
   Empêcher le wrap des montants/nombres dans les cellules de tableaux
   (touche uniquement les <td> avec .text-right ou .text-center,
    pas les <p> ou autres éléments) - utile pour repartition_frais_session
    et toute autre table financière.
   ============================================================ */
td.text-right,
td.text-center {
    white-space: nowrap;
}

/* ============================================================
   Replay : bouton grisé "lock_clock" + bandeau d'info dans la carte
   ============================================================ */
.btn-icon.btn-icon-disabled {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
    opacity: 0.7;
}
.btn-icon.btn-icon-disabled:hover {
    background: #f3f4f6;
    color: #9ca3af;
}

.replay-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    color: #7c2d12;
    font-size: 0.92rem;
    line-height: 1.4;
}
.replay-banner .material-symbols-outlined {
    color: #c2410c;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.replay-banner strong {
    color: #7c2d12;
}


/* ============================================================
   Lien "Voir le barème" dans les blocs gris d'info de rémunération
   (formation_edit.php / session_edit.php).
   ============================================================ */
.lien-voir-bareme {
    color: #dc2626;
    text-decoration: none;
}
.lien-voir-bareme:hover {
    color: #b91c1c;
    text-decoration: underline;
}
.lien-voir-bareme .material-symbols-outlined {
    text-decoration: none;
    color: inherit;
}

/* Custom-select de type de rémunération : option vide (— Hériter / — Non défini)
   sans icône, mais on garde la place d'icône pour aligner le texte. */
.custom-select-remu-type .select-option-icon-empty {
    display: inline-block;
    width: 1.4em;
    margin-right: 4px;
}

/* ============================================================
   PATCH UI — pastilles type-formation + badge blanc en bandeau
   À ajouter à la fin de style_admin.css (ou à intégrer dans les
   sections correspondantes si vous préférez).
   
   Ce patch redéfinit (= override) les sélecteurs ciblés. Si vous
   l'ajoutez à la fin du fichier, la cascade CSS fait le reste.
   ============================================================ */

/* 1) Pastille VIOLETTE pour les icônes type-formation dans les colonnes
      des tableaux (formateurs.php, formations.php, intervenants.php).
      Override de la règle existante .td-types-formation-col .type-formation-puce-cell */
.td-types-formation-col .type-formation-puce-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 3px;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    /* Fond = dégradé de la couleur du type. Selon les pages, la couleur est
       fournie via --tf-color OU via color: inline → on gère les deux (repli currentColor). */
    background: linear-gradient(135deg, var(--tf-color, currentColor) 0%, color-mix(in srgb, var(--tf-color, currentColor), #000 22%) 100%);
    /* Icône blanche via -webkit-text-fill-color UNIQUEMENT : ne pas toucher à
       `color`, sinon on écrase le currentColor utilisé par le dégradé de fond
       (cas des pages qui passent la couleur via color: inline). */
    -webkit-text-fill-color: var(--tf-icone-colore, #FFFFFF);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* 2) Pastille INVERSÉE (fond blanc, icône en couleur du type) pour les
      icônes dans les bandeaux de regroupement (sessions.php, paiements.php,
      reservations.php). La couleur de l'icône vient du style inline du PHP. */
.type-formation-puce-cell.formation-header-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    /* Badge blanc → icône en couleur univers "sur fond blanc" (#2C3E50 par défaut),
       et non plus la couleur du type (qui rendait l'icône peu lisible / invisible). */
    color: var(--tf-icone-blanc, #2C3E50) !important;
    -webkit-text-fill-color: var(--tf-icone-blanc, #2C3E50);
}

/* 3) Padding vertical RÉDUIT (9px) quand la pastille type est présente,
      pour compenser la hauteur du rond (32px) et garder un bandeau compact.
      Sans pastille : padding par défaut conservé (15px). */
.formation-header.bg-formation:has(.formation-header-type),
.session-header.reg-formation-header:has(.formation-header-type) {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* 4) Override du padding de .session-header sur reglements_prestataires.php
      pour aligner sur le bandeau .formation-header (15px vertical) —
      cohérence visuelle inter-pages */
.session-header.reg-formation-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* ============================================================ */
/* Badge "interne" sur photo de formateur (workspace_premium)   */
/* Affiché pour les formateurs avec est_prestataire = 0          */
/* ============================================================ */
.photo-with-badge {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}
.photo-badge-interne {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 1;
    pointer-events: none;
}
.photo-badge-interne .material-symbols-outlined {
    font-size: 12px;
    color: #fff;
    line-height: 1;
}
/* Variante pour photo 36px (avatar-md dans repartition_frais_session) */
.photo-with-badge--sm .photo-badge-interne {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}
.photo-with-badge--sm .photo-badge-interne .material-symbols-outlined {
    font-size: 10px;
}
/* Variante pour photo 150px (vue détail formateur) */
.photo-with-badge--lg .photo-badge-interne {
    width: 36px;
    height: 36px;
    border-width: 3px;
    bottom: 6px;
    right: 6px;
}
.photo-with-badge--lg .photo-badge-interne .material-symbols-outlined {
    font-size: 22px;
}

/* ============================================================
   Message "Aucun X trouvé" affiché au-dessus/à la place d'une
   table de listing. Plus discret que .empty-state (60px),
   conçu comme remplacement direct du paragraphe inline qu'on
   trouvait sur apprenants/formations/formateurs/etc.
   ============================================================ */
.empty-table-message {
    text-align: center;
    color: #7f8c8d;
    padding: 40px;
}

/* Bloc "Aucun X" plus structuré (icône + texte) dans un listing.
   Variante de .empty-table-message avec padding latéral et icône.
   Couleur #95a5a6 conservée pour cohérence avec l'existant. */
.empty-table-block {
    text-align: center;
    padding: 40px 20px;
    color: #95a5a6;
}
.empty-table-block > .material-symbols-outlined {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}
.empty-table-block > p {
    margin: 0;
}

/* Paragraphes de description longue qui doivent préserver les retours
   à la ligne du texte saisi par l'utilisateur (biographie, descriptif,
   objectifs, prérequis, adresse...). */
.text-prewrap {
    line-height: 1.8;
    white-space: pre-wrap;
}

/* ============================================================
   FSS — Filter Status Select (custom-select avec badges
   sémantiques, ex: Actifs (3) / Inactifs (1) / Tous (4)).
   Voir includes/_filter_status_select.php
   ============================================================ */

/* Largeur compacte : le select prend la place de son contenu, sans
   s'étirer. Min-width pour éviter qu'il devienne trop étroit avec
   des labels courts ("Tous" seul). */
.fss-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
}

.fss-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.fss-badge-success { background: #d4edda; color: #185a2f; }
.fss-badge-danger  { background: #f8d7da; color: #721c24; }
.fss-badge-info    { background: #d1ecf1; color: #0c5460; }
.fss-badge-warning { background: #fff3cd; color: #856404; }
.fss-badge-neutral { background: #e9ecef; color: #495057; }

/* Les options du select FSS sont des <a> : on neutralise la déco lien */
.fss-select .select-option {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   Utilitaires complémentaires (ajout audit global)
   - alignements flex/text
   - couleurs sémantiques (cohérent avec les badges FSS et avec
     #667eea = brand OCYTOMILK)
   - vertical-align, cursor, font-weight
   ============================================================ */

/* Flex */
.align-center      { align-items: center; }
.justify-start     { justify-content: flex-start; }
.justify-between   { justify-content: space-between; }

/* Font-weight */
.fw-600            { font-weight: 600; }

/* Cursor */
.cursor-pointer    { cursor: pointer; }

/* Vertical-align (utile pour les <span class="material-symbols-outlined va-middle">) */
.va-middle         { vertical-align: middle; }

/* Couleurs textuelles */
.text-brand        { color: #667eea; }   /* violet OCYTOMILK */
.text-light        { color: #adb5bd; }   /* gris clair (plus pâle que text-muted) */
.text-warning      { color: #856404; }   /* cohérent avec .fss-badge-warning */
.text-info         { color: #0c5460; }   /* cohérent avec .fss-badge-info */

/* ============================================================
   Utilitaires complémentaires (audit Lot 5)
   ============================================================ */

/* Font-weight */
.fw-500            { font-weight: 500; }
.fw-700            { font-weight: 700; }

/* Margins manquantes */
.mb-14             { margin-bottom: 14px; }
.mb-16             { margin-bottom: 16px; }

/* Flex */
.flex-2            { flex: 2; }
.justify-end       { justify-content: flex-end; }

/* Gap */
.gap-12            { gap: 12px; }
.gap-16            { gap: 16px; }

/* Position */
.position-relative { position: relative; }


/* ============================================================
   Fonctionnalités paramétrables par type de formation
   (cartes à cocher dans type_formation_edit.php et formation_edit.php)
   ============================================================ */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 5px;
}

/* Carte d'une feature : zone cliquable avec icône + libellé + description */
.feature-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    margin: 0;
}
.feature-card:hover {
    border-color: #c5b3ff;
    background: #f5f0ff;
}
.feature-card.is-active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
}
.feature-card.is-active:hover {
    border-color: #5568d3;
}

/* La case à cocher est masquée visuellement — c'est la carte qui sert
   de zone cliquable. On garde l'input accessible pour le clavier
   (focus-visible géré par le navigateur). */
.feature-card-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Icône à gauche : grise par défaut, colorée violet quand active */
.feature-card-icon {
    font-size: 28px;
    color: #999;
    transition: color 0.15s ease;
}
.feature-card.is-active .feature-card-icon {
    color: #667eea;
}

/* Contenu textuel à droite */
.feature-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* permet au texte de wrapper proprement */
}
.feature-card-label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}
.feature-card-desc {
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.3;
}

/* Accessibilité : focus visible quand la case est focusée au clavier */
.feature-card-checkbox:focus-visible + .feature-card-icon {
    outline: 2px solid #667eea;
    outline-offset: 4px;
    border-radius: 4px;
}


/* ============================================================
   Feature cards en mode "override formation" (3 états)
   ============================================================
   Utilisées dans formation_edit.php pour surcharger la config
   des features définie au niveau du type. Clic → cycle :
     Hérite → Forcé ON → Forcé OFF → Hérite
   ============================================================ */

.feature-card-override {
    position: relative;
    padding-right: 80px; /* place pour le badge à droite */
}

/* Badge d'état dans le coin haut-droite */
.feature-card-state-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: #e9ecef;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* État "Hérite" : neutre, mais teinté selon le type (gris si type-disabled) */
.feature-card-override.is-state-inherit {
    border-color: #e0e0e0;
    background: #fafafa;
}
.feature-card-override.is-state-inherit .feature-card-icon {
    color: #999;
}
/* Si le type a désactivé cette feature → tout grisé en mode "Hérite" */
.feature-card-override.is-state-inherit.is-type-disabled {
    opacity: 0.55;
    background: #f5f5f5;
}
.feature-card-override.is-state-inherit.is-type-disabled .feature-card-icon {
    color: #bbb;
}

/* État "Forcé ON" : vert (= activé sans ambiguïté) */
.feature-card-override.is-state-on {
    border-color: #28a745;
    background: linear-gradient(135deg, #28a74515 0%, #1e7e3415 100%);
    opacity: 1;
}
.feature-card-override.is-state-on .feature-card-icon {
    color: #28a745;
}
.feature-card-override.is-state-on .feature-card-state-badge {
    background: #d4edda;
    color: #155724;
}

/* État "Forcé OFF" : rouge */
.feature-card-override.is-state-off {
    border-color: #dc3545;
    background: linear-gradient(135deg, #dc354515 0%, #c8231715 100%);
    opacity: 1;
}
.feature-card-override.is-state-off .feature-card-icon {
    color: #dc3545;
}
.feature-card-override.is-state-off .feature-card-state-badge {
    background: #f8d7da;
    color: #721c24;
}

/* Focus visible (accessibilité clavier) */
.feature-card-override:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}


/* ============================================================
   Identité visuelle — Types de formation / Fonctionnalités
   (carte dans le panel Signalétique permettant de personnaliser
   les libellés, descriptions et icônes des features)
   ============================================================ */

/* Aperçu compact : grille d'icônes alignées */
.features-meta-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px;
}
.features-meta-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 13px;
    color: #495057;
}
.features-meta-preview-item .material-symbols-outlined {
    font-size: 18px;
    color: #667eea;
}
.features-meta-preview-label {
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aide en haut du formulaire éditable */
.features-meta-help {
    margin: 0 0 16px 0;
    padding: 10px 14px;
    background: #e8f4fd;
    border-left: 4px solid #3498db;
    border-radius: 6px;
    font-size: 13px;
    color: #2c3e50;
}

/* Liste verticale des features (1 ligne par feature) */
.features-meta-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Une ligne : preview à gauche + champs à droite */
.features-meta-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.features-meta-row-icon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.features-meta-row-icon-preview .material-symbols-outlined {
    font-size: 32px;
    color: #667eea;
}
.features-meta-code {
    font-size: 11px;
    color: #999;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Champs : 2 colonnes (libellé / icône) + description sur toute la largeur */
.features-meta-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.features-meta-field-full {
    grid-column: 1 / -1;
}
.features-meta-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}
.features-meta-field label small {
    display: block;
    font-weight: 400;
    color: #888;
    font-size: 11px;
    margin-top: 2px;
}
.features-meta-field label small em {
    color: #667eea;
    font-style: normal;
}
.features-meta-field input[type="text"],
.features-meta-field textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
}
.features-meta-field textarea {
    resize: vertical;
    min-height: 32px;
}

/* Responsive : 1 colonne sous 700px */
@media (max-width: 700px) {
    .features-meta-row {
        grid-template-columns: 1fr;
    }
    .features-meta-row-fields {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Feature cards override (formation_edit.php) — REFONTE LISIBILITÉ
   ============================================================
   Logique : l'apparence "active" (violet) ou "inactive" (gris)
   est pilotée par l'état EFFECTIF de la feature (.is-effectively-active
   / .is-effectively-inactive), indépendamment de l'origine. Le badge
   en haut à droite indique l'origine (Hérite / Forcé ON / Forcé OFF)
   avec un petit code couleur pour signaler une intention explicite.
   ============================================================ */

/* Reset des règles précédentes basées uniquement sur is-state-* */
.feature-card-override.is-state-inherit,
.feature-card-override.is-state-on,
.feature-card-override.is-state-off {
    /* Neutralise les anciennes règles → l'apparence est désormais
       gérée par is-effectively-active / is-effectively-inactive */
    background: inherit;
    border-color: inherit;
    opacity: 1;
}
.feature-card-override.is-state-inherit.is-type-disabled {
    /* Plus utilisée pour griser : conservé pour compat éventuelle */
    opacity: 1;
}

/* ÉTAT EFFECTIF : ACTIVE (violet, comme dans type_formation_edit) */
.feature-card-override.is-effectively-active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
}
.feature-card-override.is-effectively-active .feature-card-icon {
    color: #667eea;
}
.feature-card-override.is-effectively-active .feature-card-label {
    color: #2c3e50;
}

/* ÉTAT EFFECTIF : INACTIVE (neutre, légèrement grisée) */
.feature-card-override.is-effectively-inactive {
    border-color: #e0e0e0;
    background: #fafafa;
}
.feature-card-override.is-effectively-inactive .feature-card-icon {
    color: #b0b0b0;
}
.feature-card-override.is-effectively-inactive .feature-card-label {
    color: #6c757d;
}
.feature-card-override.is-effectively-inactive .feature-card-desc {
    color: #999;
}

/* BADGES par origine (forcer une couleur stable du badge même avec les
   sélecteurs plus spécifiques ci-dessus) */
/* Hérite : badge neutre */
.feature-card-override.is-state-inherit .feature-card-state-badge {
    background: #e9ecef;
    color: #6c757d;
}
/* Forcé ON : badge vert (signale une intention explicite d'activation) */
.feature-card-override.is-state-on .feature-card-state-badge {
    background: #d4edda;
    color: #155724;
}
/* Forcé OFF : badge rouge (signale une intention explicite de désactivation) */
.feature-card-override.is-state-off .feature-card-state-badge {
    background: #f8d7da;
    color: #721c24;
}

/* Liseré coloré subtil sur les cartes forcées (pas seulement le badge) */
.feature-card-override.is-state-on.is-effectively-active {
    box-shadow: inset 0 0 0 1px #28a74540;
}
.feature-card-override.is-state-off.is-effectively-inactive {
    box-shadow: inset 0 0 0 1px #dc354540;
}

/* Hover plus marqué (toutes cartes) */
.feature-card-override:hover {
    border-color: #c5b3ff;
}
.feature-card-override.is-effectively-active:hover {
    border-color: #5568d3;
}


/* ============================================================
   Modèles d'emails — Compléments visuels
   (modeles_emails.php / modeles_emails_config.php / modeles_emails_edit.php)
   Note : le filtre par type utilise _types_formation_toformation_toggle.php
   Note : les boutons radio type utilisent le pattern .types-formation-checkboxes
          partagé avec formation_edit.php.
   ============================================================ */

/* Cellule "Type de formation" d'une ligne de table : centre les pastilles
   et permet plusieurs côte à côte (multi-types). Le style de la pastille
   elle-même réplique celui de .td-types-formation-col utilisé sur
   formations.php, formateurs.php, etc. : rond violet avec icône blanche. */
.me-tpl-type-col {
    white-space: nowrap;
}
.me-tpl-type-col .type-formation-puce-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 2px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    background: linear-gradient(135deg, var(--tf-color, currentColor) 0%, color-mix(in srgb, var(--tf-color, currentColor), #000 22%) 100%);
    -webkit-text-fill-color: var(--tf-icone-colore, #FFFFFF);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    vertical-align: middle;
}

/* Indicateur "Pas de fallback" : petit badge rouge dans la zone meta */
.me-tpl-no-fallback {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fee;
    color: #c0392b;
    border: 1px solid #f5b7b1;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.me-tpl-no-fallback .material-symbols-outlined {
    font-size: 14px;
}

/* Toggle label dans les modales et le formulaire (case fallback_global) */
.me-modal-toggle-label,
.me-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #2c3e50;
    user-select: none;
}
.me-modal-toggle-label input[type="checkbox"],
.me-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Petit help text sous les champs (édition email) */
.me-field-help {
    display: block;
    margin-top: 4px;
    color: #6c757d;
    font-size: 12px;
    line-height: 1.4;
}

/* Bloc "Type de formation associé" en mode édition d'email :
   reprend le pattern .form-section avec un léger fond gris pour
   le distinguer des sections sujet/contenu. */
.me-type-block {
    background: #f8f9fa;
}

/* Séparateur visuel entre les radios et le toggle fallback dans le bloc */
.me-fallback-toggle-wrap {
    padding-top: 12px;
    border-top: 1px dashed #ddd;
}

/* ============================================================
   FIX : titre du modèle d'email dans .editor-header (fond violet)
   ============================================================
   .editor-header a un fond gradient violet et color:white, mais
   .section-title impose color:#667eea avec un border-bottom violet,
   ce qui rend le titre illisible sur ce fond. On force le blanc
   et on retire le border-bottom dans ce contexte spécifique.
   ============================================================ */
.editor-header h2.section-title {
    color: #fff;
    border-bottom: none;
    padding-bottom: 0;
}


/* ============================================================================
   PATCH CSS — Classes manquantes (audit du 18/05/2026)
   
   Ce fichier ajoute les classes utilisées dans les pages PHP mais non définies
   en CSS. Styles inférés depuis le contexte HTML et la convention de nommage.
   
   À AJOUTER À LA FIN DE admin/style_admin.css (ou inclus séparément).
   
   Les classes sont regroupées par famille fonctionnelle pour faciliter
   la personnalisation.
   ============================================================================ */

/* ============================================================
   HISTORY - Tableaux d'historique (parrainages, etc.)
   ============================================================ */
.history-table-container {
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.history-table-header {
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}
.history-th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.history-th-right {
    text-align: right;
}
.history-tr {
    border-bottom: 1px solid #f0f0f0;
}
.history-tr:hover {
    background: #fafbfc;
}
.history-td {
    padding: 12px 14px;
    color: #34495e;
}
.history-td-amount {
    text-align: right;
    font-weight: 600;
    color: #27ae60;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   PARRAINAGES - Cartes / Tableaux d'info
   ============================================================ */
.parrain-header-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.parrain-header-box-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
}
.parrain-info-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.parrain-info-table {
    width: 100%;
    border-collapse: collapse;
}
.parrain-td-label {
    padding: 6px 12px 6px 0;
    color: #7f8c8d;
    font-size: 13px;
    width: 1%;
    white-space: nowrap;
}
.parrain-td-value {
    padding: 6px 0;
    color: #2c3e50;
    font-weight: 500;
}

.parrainage-stat-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}
.parrainage-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
    margin: 0;
}
.parrainage-stat-label {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 4px;
}
.parrainage-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.code-large {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    background: white;
    padding: 10px 18px;
    border-radius: 8px;
    border: 2px dashed #667eea;
    display: inline-block;
    letter-spacing: 2px;
}
.code-highlight {
    background: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.code-parrain {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    color: #667eea;
}
.code-parrain-value {
    font-size: 16px;
}

.no-parrain-box {
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}


/* ============================================================
   TARIFS / PRIX / RÉDUCTIONS
   ============================================================ */
.tarifs-row,
.tarif-line,
.tarif-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
}
.tarif-label {
    color: #7f8c8d;
    font-size: 14px;
}
.tarif-value {
    font-weight: 600;
    color: #2c3e50;
    font-variant-numeric: tabular-nums;
}
.tarifs-no-reduction {
    color: #2c3e50;
    font-weight: 600;
}
.tarifs-with-reduction {
    /* prix barré + nouveau prix */
    color: #27ae60;
    font-weight: 600;
}
.tarifs-with-reduction .original {
    text-decoration: line-through;
    color: #95a5a6;
    font-weight: 400;
    margin-right: 6px;
}

.price-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.price-label-spaced {
    margin-bottom: 4px;
}
.price-amount-multiline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.price-separator {
    color: #bdc3c7;
    margin: 0 6px;
}

.reduction-card {
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 10px 0;
}
.reduction-header {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}
.reduction-amount {
    font-size: 18px;
    font-weight: 700;
    color: #27ae60;
}

.remise {
    color: #27ae60;
    font-weight: 600;
}


/* ============================================================
   SESSIONS / RÉSERVATIONS / FORMATIONS
   ============================================================ */
.session-date-text {
    font-size: 14px;
    color: #2c3e50;
}
.session-hours-mini {
    font-size: 12px;
    color: #7f8c8d;
}
.session-passed-icon {
    color: #95a5a6;
    font-size: 18px;
}
.session-passed-text,
.session-passed-title {
    color: #95a5a6;
}
.session-passed-title {
    font-weight: 600;
}

.sessions-empty {
    text-align: center;
    padding: 40px 20px;
    color: #7f8c8d;
}
.sessions-empty-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.sessions-empty-text {
    font-size: 14px;
}

.reservations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.formation-header-count {
    font-size: 13px;
    color: #7f8c8d;
    margin-left: 8px;
}


/* ============================================================
   MODÈLES EMAILS (préfixe me-*)
   ============================================================ */
.me-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.me-tpl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.15s;
}
.me-tpl-row:hover {
    border-color: #667eea;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1);
}
.me-tpl-info {
    flex: 1;
    min-width: 0;
}
.me-tpl-meta {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 2px;
}


/* ============================================================
   BOUTONS SPÉCIFIQUES
   ============================================================ */
.btn-capture,
.btn-capture-modal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.btn-capture:hover,
.btn-capture-modal:hover {
    background: #5568d3;
}
.btn-capture-modal {
    background: #2c3e50;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #2c3e50;
    cursor: pointer;
    font-size: 13px;
}
.btn-filter:hover {
    border-color: #667eea;
    color: #667eea;
}

.btn-reservation-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.btn-reservation-link:hover {
    text-decoration: underline;
}

.btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #2c3e50;
    cursor: pointer;
    font-size: 12px;
}
.btn-preview:hover {
    background: #e9ecef;
}

.btn-action-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.15s;
}
.btn-action-detail:hover {
    background: #667eea;
    border-color: #667eea;
    color: white;
}


/* ============================================================
   ALERTES (alert-box-*)
   ============================================================ */
.alert-box-flex {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff8e1;
    border-left: 4px solid #f39c12;
}
.alert-box-icon {
    color: #f39c12;
    font-size: 22px;
    flex-shrink: 0;
}
.alert-box-text {
    flex: 1;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.5;
}

.status-text {
    font-weight: 500;
}
.status-success {
    color: #27ae60;
}
.status-warning {
    color: #f39c12;
}


/* ============================================================
   INPUTS / HELPERS DE FORMULAIRES
   ============================================================ */
.form-text {
    display: block;
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 4px;
    line-height: 1.4;
}
.form-text.text-muted {
    color: #95a5a6;
}
.form-help {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 6px;
    line-height: 1.4;
}

.note-info {
    background: #e3f2fd;
    border-left: 3px solid #3498db;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: #2c3e50;
    margin: 10px 0;
}

.label-emoji {
    font-size: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.input-heure {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.filter-date {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
}

.invitation-form {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
}

.fe-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.question-preview {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
}


/* ============================================================
   EMPTY STATES (états vides)
   ============================================================ */
.empty-state-large {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
}
.empty-state-icon-large {
    font-size: 64px;
    color: #bdc3c7;
    margin-bottom: 16px;
}


/* ============================================================
   AVATARS / PHOTOS / FORMATRICES
   ============================================================ */
.avatar-preview,
.avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #ecf0f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.avatar-placeholder {
    color: #95a5a6;
    font-size: 22px;
}
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.formatrice-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.formatrice-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.formatrice-name {
    font-weight: 600;
    color: #2c3e50;
}
.formatrice-title {
    font-size: 12px;
    color: #7f8c8d;
}


/* ============================================================
   PARTAGE SOCIAL (share-*)
   ============================================================ */
.share-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.15s;
}
.share-btn:hover {
    opacity: 0.9;
}
.share-btn-copy {
    background: #7f8c8d;
}
.share-btn-email {
    background: #3498db;
}
.share-btn-whatsapp {
    background: #25d366;
}
.share-btn-fb {
    background: #1877f2;
}


/* ============================================================
   CODES PROMO (coupon-*)
   ============================================================ */
.coupon-card {
    background: white;
    border: 1px dashed #667eea;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}
.coupon-badge-usage,
.coupon-badge-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.coupon-badge-usage {
    background: #e3f2fd;
    color: #1976d2;
}
.coupon-badge-status {
    background: #e8f5e9;
    color: #2e7d32;
}
.coupon-copy-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #2c3e50;
}
.coupon-copy-btn:hover {
    background: #f0f0f0;
}


/* ============================================================
   OPTIONS RÉSERVÉES (hébergement, repas, transport, etc.)
   ============================================================ */
.option-reservee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.option-reservee-item:last-child {
    border-bottom: none;
}
.option-reservee-icon {
    color: #667eea;
    font-size: 20px;
}
.option-reservee-info {
    flex: 1;
    min-width: 0;
}
.option-reservee-detail {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 2px;
}
.option-reservee-prix {
    font-weight: 600;
    color: #2c3e50;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   DOCUMENTS / LIENS DE TÉLÉCHARGEMENT
   ============================================================ */
.reservation-documents {
    margin-top: 10px;
}
.documents-label {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.documents-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f0f4ff;
    color: #667eea;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}
.doc-link:hover {
    background: #e0e9ff;
}
.link-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #7f8c8d;
    text-decoration: none;
    font-size: 13px;
}
.link-back:hover {
    color: #667eea;
}
.link-primary {
    color: #667eea;
    text-decoration: none;
}
.link-primary:hover {
    text-decoration: underline;
}
.link-preview-interactive {
    color: #667eea;
    cursor: pointer;
    text-decoration: underline dotted;
}


/* ============================================================
   PAGE HEADER / STRUCTURE ADMIN
   ============================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}
.admin-content {
    padding: 20px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
}


/* ============================================================
   HTML EDITOR / PREVIEW
   ============================================================ */
.html-editor-container {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}
.html-editor {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: none;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    resize: vertical;
}
.html-preview {
    padding: 14px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
}


/* ============================================================
   BARÈME / RÉMUNÉRATION
   ============================================================ */
.bareme-card-heading-tf {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    margin: 0 0 8px 0;
}
.bareme-tree-role {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}

.info-remu-default {
    display: block;
    background: #f8f9fa;
    border-left: 3px solid #667eea;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #2c3e50;
    margin-top: 6px;
    margin-bottom: 20px;
}

.info-remu-default-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.info-remu-default .material-symbols-outlined {
    line-height: 1;
    margin-top: 1px;
}


/* ============================================================
   SIGNATURES
   ============================================================ */
.signature-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
/* Annule les margins parasites hérités de
   .fe-content .btn-secondary.btn-small { margin-top: 15px }
   qui désalignent les boutons dans le container flex. */
.signature-actions .btn {
    margin: 0;
}


/* ============================================================
   ICÔNES UTILITAIRES (taille / couleur)
   ============================================================ */
.icon-sm {
    font-size: 16px !important;
}
.icon-gray {
    color: #95a5a6;
}
.icon-green {
    color: #27ae60;
}
.info-icon {
    color: #3498db;
    font-size: 16px;
    cursor: help;
}


/* ============================================================
   CELLULES / LIGNES DIVERSES
   ============================================================ */
.info-cell {
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 13px;
}
.la-meta-cell {
    /* Liste d'attente : cellule de métadonnées */
    font-size: 12px;
    color: #7f8c8d;
}


/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
    position: relative;
    padding-left: 24px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}
.timeline-item {
    position: relative;
    padding-bottom: 16px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #667eea;
    border: 2px solid white;
}
.timeline-date {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 4px;
}


/* ============================================================
   DIVERS (variables, stripe, etc.)
   ============================================================ */
.variables {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #7f8c8d;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
}
.variables code {
    color: #667eea;
    font-weight: 500;
}
.stripe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #635bff;
    font-weight: 500;
}

.payment-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.type-formation-check-libelle {
    /* Libellé d'une checkbox de type de formation.
       Pas de couleur définie ici : la couleur est héritée du parent
       .type-formation-check-visuel (qui passe en blanc quand coché).
       Pas de margin-left : le parent a déjà gap: 8px. */
    font-size: 14px;
}

.tab-btn {
    padding: 8px 14px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #2c3e50;
    transition: all 0.15s;
}
.tab-btn.active,
.tab-btn:hover {
    background: #667eea;
    border-color: #667eea;
    color: white;
}


/* ============================================================
   MICRO-UTILITAIRES (espacement, dimensions)
   ============================================================ */
.overflow-x-auto { overflow-x: auto; }

.mw-200 { max-width: 200px; }

.ml-14 { margin-left: 14px; }
.ml-24 { margin-left: 24px; }


/* ============================================================
   COMPLÉMENT - Classes additionnelles (38)
   Inférées depuis le contexte HTML, à ajuster selon le design final.
   ============================================================ */

/* ----- Checkbox de confirmation (case à cocher visible avec libellé) ----- */
.checkbox-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
    margin: 10px 0;
}
.checkbox-text {
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.4;
}
.checkmark {
    color: #27ae60;
    font-weight: 700;
}

/* ----- Colonnes spécifiques de tableau (types de formation) ----- */
.col-deroule,
.col-objectifs {
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
}

/* ----- Notes / warnings ----- */
.note-warning {
    background: #fff3cd;
    border-left: 3px solid #f39c12;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: #2c3e50;
    margin: 10px 0;
}

/* ----- Carte programme pédagogique ----- */
.programme-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

/* ----- Actions dans une cellule de tableau ----- */
.cell-actions {
    text-align: right;
    white-space: nowrap;
}

/* ----- Wrappers / Containers ----- */
.container-admin {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}
.content-wrapper {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* ----- Selects spécifiques (cron, doc) ----- */
.cron-delai-select,
.doc-quand-select {
    display: inline-block;
    margin-top: 6px;
}

/* ----- Utilitaires Tailwind-like manquants ----- */
.d-inline-flex {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.w-full {
    width: 100%;
}

/* ----- Bloc de contrôles lisere par niveau de titre ----- */
.h1-lisere-controls,
.h2-lisere-controls,
.h3-lisere-controls,
.h4-lisere-controls,
.h5-lisere-controls,
.h6-lisere-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 0;
}

/* ----- Echecs / erreurs ----- */
.echec-content {
    background: #fef2f2;
    border-left: 3px solid #e74c3c;
    padding: 12px 14px;
    border-radius: 4px;
    color: #2c3e50;
}
.invalid-link-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 16px;
    color: #856404;
    text-align: center;
}
.pdf-error {
    color: #e74c3c;
    background: #fef2f2;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}

/* ----- Email preview global ----- */
.email-preview-global {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ----- Légende des types de formation ----- */
.types-formation-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
}
.legende-label {
    font-size: 12px;
    color: #7f8c8d;
}

/* ----- Modèles emails : input groupe ----- */
.meg-group-type-input {
    flex: 1;
}

/* ----- Modal de récapitulatif ----- */
.modal-recap-block {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
}

/* ----- Page parrainage (continuité avec parrain-*) ----- */
.parrainage-container {
    max-width: 800px;
    margin: 0 auto;
}
.parrainage-info-card {
    background: #f0f4ff;
    border-radius: 8px;
    padding: 16px;
    color: #2c3e50;
    line-height: 1.5;
}

/* ----- Page mot de passe oublié ----- */
.password-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 16px 0;
    text-align: center;
}
.password-icon-inline {
    color: #667eea;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

/* ----- Prix mini de session (résumé compact) ----- */
.session-price-mini {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 2px;
}

/* ----- Boutons de partage (container) ----- */
.share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

/* ----- Cartes d'info SMS (vérification SMS) ----- */
.sms-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

/* ----- Tableau de statut des paiements ----- */
.statut-paiements {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.statut-paiements th,
.statut-paiements td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* ----- Texte de succès en gros ----- */
.text-success-large {
    color: #27ae60;
    font-size: 20px;
    font-weight: 700;
}

/* =====================================================================
   SESSION_EDIT.PHP — Formateurs / intervenants par session
   Nouvelle architecture « héritage + ajout + exclusion + override »
   Voir : www/functions_formations.php :: get_formateurs_session()
   ===================================================================== */

/* --- Badge d'origine (placé à côté du nom) --- */
.fe-badge-origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1.4;
}

.fe-badge-origin .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

.fe-badge-heritage {
    background: #e8f5e9;
    color: #2e7d32;
}

.fe-badge-specifique {
    background: #fff3e0;
    color: #e65100;
}

.fe-badge-excluded {
    background: #ffebee;
    color: #c62828;
}

/* --- Badge "rémunération surchargée pour cette session" --- */
.fe-badge-override-remu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
    background: #fff8e1;
    color: #f57c00;
    border: 1px dashed #ffb74d;
}

.fe-badge-override-remu .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

/* --- États visuels de la carte personne dans la liste session --- */
.fe-person-card.is-heritage {
    border-left: 4px solid #66bb6a;
}

.fe-person-card.is-specifique {
    border-left: 4px solid #ffa726;
}

.fe-person-card.has-override {
    background: #fffde7;
}

.fe-person-card.is-excluded {
    border-left: 4px solid #ef5350;
}

/* --- Section repliable "exclus de cette session" --- */
.fe-exclus-block {
    margin: 15px 0;
    border: 1px dashed #ef9a9a;
    border-radius: 8px;
    background: #fff5f5;
}

.fe-exclus-summary {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    color: #c62828;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    user-select: none;
}

.fe-exclus-summary::-webkit-details-marker {
    display: none;
}

.fe-exclus-summary::before {
    content: "▶";
    font-size: 10px;
    transition: transform 0.2s;
}

.fe-exclus-block[open] > .fe-exclus-summary::before {
    transform: rotate(90deg);
}

.fe-exclus-summary .material-symbols-outlined {
    font-size: 18px;
}

.fe-exclus-count {
    margin-left: auto;
    background: #c62828;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
}

.fe-exclus-list {
    padding: 10px 15px 15px 15px;
}

.fe-exclus-list .fe-person-card {
    margin-bottom: 8px;
}

.fe-exclus-list .fe-person-card:last-child {
    margin-bottom: 0;
}

/* --- Section repliable "Dates d'intervention" (modale Modifier le formateur) ---
   Même pattern natif <details>/<summary> que .fe-exclus-block, mais en
   thème neutre (violet #667eea, couleur des autres accents de la modale)
   plutôt que rouge/warning. */
.fe-dates-block {
    margin: 0 0 20px;
    border: 1px dashed #b3bdf0;
    border-radius: 8px;
    background: #f4f6fd;
}

.fe-dates-summary {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    color: #667eea;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    user-select: none;
}

.fe-dates-summary::-webkit-details-marker {
    display: none;
}

.fe-dates-summary::before {
    content: "▶";
    font-size: 10px;
    transition: transform 0.2s;
}

.fe-dates-block[open] > .fe-dates-summary::before {
    transform: rotate(90deg);
}

.fe-dates-summary .material-symbols-outlined {
    font-size: 18px;
}

.fe-dates-content {
    padding: 5px 15px 15px;
}

.fe-dates-content .form-row {
    margin-bottom: 0;
}

/* --- Zone des boutons globaux d'une section (Ajouter + Réinitialiser) --- */
.fe-section-actions {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* --- Modale d'ajout : option "à restaurer" (défaut exclu) --- */
.custom-select .select-option.a-restaurer {
    background: #fff5f5;
    color: #c62828;
    font-style: italic;
}

.custom-select .select-option.a-restaurer:hover {
    background: #ffebee;
}

/* --- Empty state pour la section formateurs/intervenants --- */
#section-formateurs .fe-empty-state,
#section-intervenants .fe-empty-state {
    padding: 15px;
    background: #fafafa;
    border-radius: 8px;
    color: #757575;
    text-align: center;
    font-style: italic;
    margin: 10px 0;
}

/* =====================================================================
   PARAMETRES.PHP — Classes pour le nettoyage Lot 5
   ===================================================================== */

/* Encryption status (sécurité des mots de passe) */
.param-encryption-ok {
    margin: 0;
    color: #27ae60;
}
.param-encryption-ko {
    margin: 0;
    color: #e74c3c;
}

/* Stripe : indicateur de mode (PRODUCTION / TEST) */
.stripe-mode-indicator {
    margin: 15px 0;
    padding: 12px 15px;
    border-radius: 8px;
    display: inline-block;
}
.stripe-mode-live {
    background: #d4edda;
    color: #155724;
}
.stripe-mode-test {
    background: #fff3cd;
    color: #856404;
}

/* Cron replay : champ "Délai d'envoi" */
.cron-delai-label {
    font-size: 13px;
    color: #666;
    display: block;
    margin-bottom: 4px;
}
.cron-delai-input {
    max-width: 260px;
}

/* Paramètre booléen : libellé Activé / Désactivé */
.param-boolean-on {
    font-weight: 600;
    color: #155724;
}
.param-boolean-off {
    font-weight: 600;
    color: #721c24;
}

/* =====================================================================
   Helper _select_icon.php : custom-select avec icônes Material Symbols
   Sélecteur générique réutilisable (statut session, override liste
   d'attente, etc.). Reprend les conventions de .custom-select-modal.
   ===================================================================== */
.custom-select-icon .select-option-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}
.custom-select-icon .select-option-icon .material-symbols-outlined {
    font-size: 1.2rem;
}
.custom-select-icon .select-option-text {
    flex: 1;
}
.custom-select-icon .select-text .select-option-icon .material-symbols-outlined {
    font-size: 1.2rem;
    vertical-align: middle;
}
/* Option sans icône : on garde la place pour aligner le texte
   sur les autres options qui en ont une. */
.custom-select-icon .select-option-icon-empty {
    display: inline-block;
    width: 1.4em;
    margin-right: 6px;
}

/* Tones (couleur de l'icône) — paramétrable depuis le helper PHP via
   la clé 'tone' de chaque option : success | warning | danger | neutral | info */
.custom-select-icon .select-option-icon--success .material-symbols-outlined {
    color: #2e7d32;
}
.custom-select-icon .select-option-icon--warning .material-symbols-outlined {
    color: #f57c00;
}
.custom-select-icon .select-option-icon--danger .material-symbols-outlined {
    color: #c62828;
}
.custom-select-icon .select-option-icon--neutral .material-symbols-outlined {
    color: #757575;
}
.custom-select-icon .select-option-icon--info .material-symbols-outlined {
    color: #1976d2;
}

/* =====================================================================
   SESSION_VIEW.PHP — cards formateurs/intervenants
   Variantes de couleur du liseré selon l'origine (héritage + ajout +
   exclusion). Réutilise les badges .fe-badge-* définis pour session_edit.
   ===================================================================== */
.person-card.is-heritage {
    border-left-color: #66bb6a;
}
.person-card.is-specifique {
    border-left-color: #ffa726;
}
.person-card.is-excluded {
    border-left-color: #ef5350;
}

/* ===== Badges cliquables visio/replay (colonne Lieu sessions) ===== */
/* Badge avec lien actif : curseur main + léger feedback au survol */
.badge-link {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}
.badge-link:hover {
    opacity: 0.85;
}
/* Badge sans lien : non cliquable, légèrement atténué */
.badge-link-off {
    cursor: default;
    opacity: 0.6;
}

/* Largeur de modale réutilisable */
.mw-500 {
    max-width: 500px;
}

/* ─── Mode "prestataire_view" de _table_include.php ──────────────────
   Header coloré violet des groupes de formation (formateur_view /
   intervenant_view). La couleur est statique car identique pour tous
   les groupes, contrairement à l'icône type formation dont la couleur
   est dynamique (cf. style="color: ..." inline sur span.formation-header-type). */
.pv-header {
    background: #667eea;
    cursor: pointer;
}

/* Couleur sombre des titres h2 (#2c3e50) — utilisée notamment sur les
   pages formateur_view / intervenant_view. */
.text-heading { color: #2c3e50; }

/* Variante violette plus foncée du violet OCYTOMILK, utilisée pour les
   sous-titres intervenants (les formateurs utilisent .text-brand = #667eea). */
.text-brand-2 { color: #764ba2; }

/* Ligne "Don reversé" dans la carte Rémunérations estimées de
   reglement_prestataire_detail.php — style cohérent avec .tr-organisme */
.tr-don { background: #f0fff4; border-top: 2px solid #e0e0e0; }

/* Colonne drag & drop sur types_formation.php (réordonnancement SortableJS,
   même principe que la galerie de visuels). */
.col-drag {
    width: 32px;
}
.type-formation-drag {
    cursor: move;
    color: #999;
    font-size: 20px;
}
#typesFormationBody tr.sortable-ghost {
    opacity: 0.4;
}

/* Ghost class drag & drop sur dons.php (structures de don) — même pattern
   que types_formation.php, classes .col-drag / .type-formation-drag déjà
   définies plus haut et réutilisées ici. */
#structuresDonsBody tr.sortable-ghost {
    opacity: 0.4;
}

.badge-upcoming {
    background: rgba(255,255,255,0.3);
    margin-left: 10px;
}

.session-periode-separator td {
    background: #eef1f7;
    padding: 8px 16px;
    font-weight: 600;
    border-top: 2px solid #d8dee8;
}

.session-periode-separator.bg-session-passed-row td {
    background: #e8e8e8;
    color: #777;
}

/* Encadré jaune d'avertissement, usage générique (cf. .ae-warning-banner
   dans apprenant_edit.php, rendu global ici pour réutilisation) */
.warning-banner-inline {
    background: #fff3cd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #f39c12;
}

.warning-banner-inline.warning-banner-danger {
    background: #f8d7da;
    border-left-color: #dc3545;
}

.hidden-real-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.me-destinataire-buttons {
    display: flex;
    gap: 8px;
}

.me-dest-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s;
}

.me-dest-btn:hover {
    border-color: #667eea;
}

.me-dest-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

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

/* ============================================================
   Liens d'un formateur (page "Qui sommes-nous ?")
   ============================================================ */
.lien-row {
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.lien-row-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lien-row-icon {
    color: #667eea;
    flex-shrink: 0;
}

.lien-row-nom {
    font-weight: 600;
    color: #2c3e50;
    flex-shrink: 0;
}

.lien-row-url {
    color: #6c757d;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.lien-row-edit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lien-row-edit .lien-type-select {
    flex: 0 0 160px;
}

.lien-row-edit .lien-nom-input {
    flex: 0 0 180px;
}

.lien-row-edit .lien-url-input {
    flex: 1;
}

/* Aperçu rectangulaire (sans masque circulaire) pour la photo de
   présentation "Qui sommes-nous ?", affichée en entier sur le site public. */
.photo-presentation-preview-img {
    max-width: 240px;
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: contain;
}

/* Carte podcast (avec pochette + description) dans la liste de liens */
.lien-row-display-podcast {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.lien-podcast-cover {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.lien-podcast-texte {
    flex: 1;
}

.lien-podcast-texte strong {
    display: block;
    margin-bottom: 4px;
    color: #2c3e50;
}

.lien-podcast-texte p {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

.lien-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.lien-row-edit-principale {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lien-row-edit-podcast {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e1e5ea;
}

/* Cartes de fonctionnalités avec surcharge (session_edit.php) */
.feature-card-session {
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 12px 14px;
}

.feature-card-session-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.feature-card-session-header .material-symbols-outlined {
    color: #667eea;
}

.feature-card-session-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.feature-card-session-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Pilules de filtre par type de formation (session_edit.php, création) */
.type-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.type-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #e1e5ea;
    border-radius: 999px;
    background: #fff;
    color: #5a6472;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.type-filter-pill .material-symbols-outlined {
    font-size: 18px;
}

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

.type-filter-pill.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

/* ===== Badges cliquables visio/replay (sessions.php, session_view.php) ===== */
/* Unifiés sous une seule classe .badge-media (au lieu de badge-info pour
   Visio et badge-secondary pour Replay) : même palette pour les 2 types
   (l'icône videocam/smart_display suffit à les distinguer), même
   padding/font-size/border-radius pour garantir une hauteur identique —
   alignée sur le même traitement fait côté site public (www/style.css). */
.badge-media {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #ff3366;
}
/* Lien actif (session en cours/à venir avec lien renseigné) : blanc sur rouge, liseret noir */
.badge-media.badge-link {
    background: #ff3366;
    color: #ffffff;
    border-color: #000000;
}
/* Pas de lien / session passée : noir sur rose pâle, liseret rouge (hérité
   de .badge-media), opacité pleine (ne pas cumuler avec l'opacité 0.6 par
   défaut de .badge-link-off qui délaverait encore plus les couleurs) */
.badge-media.badge-link-off {
    background: #fbdce1;
    color: #000000;
    opacity: 1;
}
.badge-media .material-symbols-outlined {
    color: inherit;
}

/* Vignette visuel structure de don (dons.php) — volontairement sans coin
   arrondi, contrairement aux autres miniatures de l'admin. */
.don-visuel-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* ============================================================
   Vue "Tous" du questionnaire de satisfaction (questionnaire_edit.php)
   Liste d'aperçu par type, avec lien pour ouvrir l'éditeur de chacun.
   ============================================================ */
.questionnaires-liste-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.questionnaire-type-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.questionnaire-type-card:hover {
    border-color: var(--tf-color, #667eea);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.questionnaire-type-card > .material-symbols-outlined:first-child {
    font-size: 28px;
    color: var(--tf-color, #667eea);
}

.questionnaire-type-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.questionnaire-type-card-info strong {
    font-size: 15px;
    color: #1e293b;
}

.questionnaire-type-card-info span {
    font-size: 13px;
    color: #64748b;
}

.questionnaire-type-card > .material-symbols-outlined:last-child {
    color: #94a3b8;
}

/* ==================== identite_menu_config.php ==================== */
.imc-group { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px; background: #fff; overflow: hidden; }
.imc-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px 8px 0 0; flex-wrap: nowrap; }
.imc-group-header .imc-drag { cursor: grab; color: #999; }
.imc-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.imc-group.inactive .imc-group-title { opacity: 0.5; text-decoration: line-through; }
.imc-subitems { padding: 8px 15px 12px 45px; }
.imc-subitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; flex-wrap: nowrap; }
.imc-subitem:hover { background: #f5f5f5; }
.imc-subitem .imc-drag { cursor: grab; color: #bbb; }
.imc-subitem.inactive { opacity: 0.5; }
.imc-subitem.inactive .imc-sub-titre { text-decoration: line-through; }
.imc-sub-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.imc-sub-cle { font-size: 11px; color: #999; font-family: monospace; }
.imc-add-sub { margin-top: 6px; }
.imc-action-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    padding: 0;
}
.imc-action-btn .material-symbols-outlined { font-size: 18px; }
.imc-action-btn:hover { background: #e9ecef; color: #333; }
.imc-action-btn.imc-action-danger:hover { background: #fdecea; color: #dc3545; }

/* Bouton de fermeture générique pour .modal-header (utilisé par plusieurs
   modales du système .modal-overlay, jusqu'ici sans style dédié). */
.modal-header .modal-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    padding: 0;
}
.modal-header .modal-close:hover { background: rgba(0,0,0,0.08); color: #333; }
.modal-header .modal-close .material-symbols-outlined { font-size: 20px; }

/* ==================== parametres.php > Notifications push ==================== */
.alert-success-box {
    background: #d4edda;
    border-left: 4px solid #155724;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-success-box .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
}

.param-mt-15 { margin-top: 15px; }
.param-mt-10 { margin-top: 10px; }

/* --- Composants partagés parametres.php / modeles_notifications_edit.php --- */
.param-tag-code { background: #e9ecef; padding: 3px 8px; border-radius: 4px; margin-top: 5px; display: inline-block; }
.param-badge-mini { margin-left: 8px; font-size: 10px; }
.param-info-box { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.param-mb-15 { margin-bottom: 15px; }
.push-preview-box {
    margin-top: 10px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.push-preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
    background: #fff;
}
.push-preview-text { min-width: 0; }
.push-preview-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.push-preview-body  { font-size: 13px; color: #ddd; white-space: pre-wrap; }

/* ==================== Menu mobile (hamburger) admin ==================== */
.mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 10px;
}
.mobile-sidebar-toggle:hover { background: #f0f0f0; }
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.mobile-sidebar-overlay.active { display: block; }

/* Harmonisation modeles_notifications_edit.php avec le style
   editor-card/editor-header/editor-body de modeles_emails_edit.php :
   .description était jusqu'ici scopée à .param-card, on l'étend ici
   à .editor-body pour conserver son apparence dans ce nouveau contexte. */
.editor-body .description {
    color: #7f8c8d;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Harmonisation hauteur des boutons "Activer sur cet appareil" / "Réinitialiser"
   (parametres.php > Notifications push) : .btn-save et .btn/.btn-secondary ont
   des paddings/font-size différents ailleurs dans l'app, on aligne les deux
   ici uniquement, sans toucher aux styles globaux utilisés partout ailleurs. */
.push-activate-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.push-activate-actions .btn-save,
.push-activate-actions .btn {
    padding: 12px 30px;
    font-size: 15px;
    border-radius: 8px;
}

/* Badge de comptage réutilisable (pastille violette), même style que
   .me-group-count dans modeles_emails_config.php ("Réservations 5") —
   centralisé ici pour pouvoir être utilisé sur d'autres pages. */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

/* parametres.php > Notifications push : "Appareils abonnés" utilise
   .section-title (comme les autres titres de section de la page, ex.
   tab=pages) plutôt qu'un simple h4 ; on ajoute le flex pour un alignement
   vertical propre du badge de comptage à côté du titre. */
.param-section-divider-large {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.param-section-divider-large h3.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.param-section-divider-large h3.section-title .count-badge {
    margin-left: 0;
}

/* ── Dropdown utilisateur du topbar (porté de BC ACADEMY), remplace
   l'ancien .admin-profile-link simple par un bouton + menu déroulant
   (Gérer mon compte / Déconnexion) ── */
.topbar-user-wrap { position: relative; }
.topbar-user {
    display: flex; align-items: center; gap: 8px;
    background: none; border: 1px solid transparent; cursor: pointer;
    padding: 5px 10px 5px 5px; border-radius: 24px;
    transition: background .15s, border-color .15s;
}
.topbar-user:hover { background: rgba(102, 126, 234, 0.1); border-color: #e0e4f8; }
.topbar-user.user-menu-open { background: #e8ecff; border-color: #c7d0f8; }
.topbar-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; font-size: 14px; flex-shrink: 0;
}
.topbar-avatar-img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; display: block;
}
.topbar-name { font-weight: 600; color: #2c3e50; white-space: nowrap; }
.topbar-chevron {
    font-size: 18px; color: #9ca3af;
    transition: transform .2s;
}
.topbar-user.user-menu-open .topbar-chevron { transform: rotate(180deg); }
.topbar-user-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 200px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    z-index: 9999; padding: 4px 0;
}
.topbar-user-menu[hidden] { display: none; }
.topbar-user-menu::before {
    content: '';
    position: absolute; top: -5px; right: 16px;
    width: 10px; height: 10px;
    background: #fff; border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;
    transform: rotate(45deg);
}
.dropdown-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 16px; border: none; background: none;
    color: #374151; font-size: 14px; text-align: left; cursor: pointer;
    transition: background .12s; text-decoration: none; box-sizing: border-box;
}
.dropdown-item:hover { background: #f5f7ff; color: #374151; text-decoration: none; }
.dropdown-item .material-symbols-outlined { font-size: 18px; color: #9ca3af; flex-shrink: 0; }
.dropdown-item-danger { color: #dc3545; }
.dropdown-item-danger .material-symbols-outlined { color: #dc3545; }
.dropdown-item-danger:hover { background: #fff5f5; }
.dropdown-separator { height: 1px; background: #f3f4f6; margin: 4px 0; }

/* ── Gestion des utilisateurs (utilisateurs.php / utilisateur_edit.php),
   porté de BC ACADEMY. Grille de permissions par section (aucun/lecture/
   écriture), badges de rôle, liste condensée des permissions accordées. ── */
.perm-grid {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px;
    gap: 0;
    font-size: 13px;
    margin-bottom: 15px;
}
.perm-grid-hdr { display: contents; }
.perm-grid-hdr > div {
    padding: 8px 4px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #e8e8e8;
    color: #888;
}
.perm-grid-hdr .perm-hdr-icon { font-size: 22px; vertical-align: middle; }
.perm-grid-hdr > div:first-child { text-align: left; font-size: 13px; }
.perm-row { display: contents; }
.perm-row > div {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.perm-row > div:first-child { justify-content: flex-start; font-weight: 500; color: #333; gap: 8px; }
.perm-row .perm-icon { font-size: 18px; color: #9ca3af; flex-shrink: 0; }
.perm-dash { color: #ccc; font-size: 16px; }
.perm-hdr-none  { color: #e53e3e; }
.perm-hdr-read  { color: #3182ce; }
.perm-hdr-write { color: #27ae60; }
.perm-choice { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.perm-choice input[type=radio] { display: none; }
.perm-choice-icon {
    font-size: 22px;
    color: #d1d5db;
    transition: color .2s, transform .15s;
    border-radius: 6px;
    padding: 4px;
}
.perm-choice:hover .perm-choice-icon { color: #9ca3af; transform: scale(1.1); }
[data-perm-col="none"]  .perm-choice input:checked + .perm-choice-icon { color: #e53e3e; }
[data-perm-col="read"]  .perm-choice input:checked + .perm-choice-icon { color: #3182ce; }
[data-perm-col="write"] .perm-choice input:checked + .perm-choice-icon { color: #27ae60; }
.perm-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.perm-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #888; }
.perm-legend-item .material-symbols-outlined { font-size: 16px; }
.perm-legend-none  .material-symbols-outlined, .perm-legend-none  strong { color: #e53e3e; }
.perm-legend-read  .material-symbols-outlined, .perm-legend-read  strong { color: #3182ce; }
.perm-legend-write .material-symbols-outlined, .perm-legend-write strong { color: #27ae60; }

.perm-list { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.perm-list-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.perm-list-icon { font-size: 15px; }
.perm-list-label { font-weight: 500; }

/* ── Step wizard + mise en page centrée (changer_mot_de_passe.php,
   utilisateur_edit.php et reset_utilisateur.php en mode création/SMS),
   porté tel quel de BC ACADEMY pour un rendu identique. ── */
.chg-pwd-wrap { max-width: 400px; margin: 0 auto; }
/* Assistant "Nouvel utilisateur" : plus large que la page mot de passe
   (formulaire 2 colonnes + tableau Rôle & Permissions). */
.chg-pwd-wrap.chg-pwd-wrap--user { max-width: 720px; }

.step-wizard {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 28px;
}
.step-wizard--card {
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.step-wizard-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 90px;
}
.step-wizard-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #9ca3af;
    transition: background .3s, border-color .3s, color .3s;
}
.step-wizard-item.active .step-wizard-circle {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(102,126,234,.15);
}
.step-wizard-item.done .step-wizard-circle {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}
.step-wizard-label {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    white-space: nowrap;
    letter-spacing: .02em;
}
.step-wizard-item.active .step-wizard-label { color: #667eea; font-weight: 600; }
.step-wizard-item.done   .step-wizard-label { color: #10b981; font-weight: 600; }
.step-wizard-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin-top: 16px;
    min-width: 32px;
    max-width: 80px;
    transition: background .3s;
}
.step-wizard-connector.done { background: #10b981; }
.step-wizard-check { font-size: 15px; }

/* Icône + titre + sous-titre centrés (étapes du wizard) */
.mdp-step-icon { text-align: center; margin-bottom: 12px; }
.mdp-step-icon .material-symbols-outlined { font-size: 48px; color: #667eea; }
.mdp-step-icon--success .material-symbols-outlined { color: #10b981; }
.mdp-title { text-align: center; font-size: 20px; font-weight: 600; color: #1f2937; margin: 0 0 8px; }
.mdp-subtitle { text-align: left; font-size: 14px; color: #6b7280; margin: 0 0 24px; line-height: 1.5; }
.mdp-form { margin: 0; }

/* Bouton principal / secondaire pleine largeur du wizard */
.btn-mdp-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity .15s;
    box-sizing: border-box;
    text-decoration: none;
}
.btn-mdp-submit:hover { opacity: .9; color: #fff; text-decoration: none; }
.btn-mdp-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    box-sizing: border-box;
}
.btn-mdp-secondary:hover { background: #e9eaf0; }
.btn-mdp-secondary--sm { width: auto; padding: 8px 16px; }

.chg-intro { font-size: 14px; color: #6b7280; margin: 0 0 12px; line-height: 1.6; }
.chg-field-code { max-width: 260px; margin: 0 auto; }
.chg-btn-row { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.chg-resend { margin-bottom: 20px; }
.chg-done { padding: 8px 0; }
.chg-done__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chg-done__icon { font-size: 36px; color: #10b981; flex-shrink: 0; }
.chg-done__title { margin: 0; font-size: 20px; color: #1f2937; font-weight: 600; }
.chg-done__email { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.chg-done__password { background: #f8f9ff; border: 2px dashed #667eea; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; text-align: center; }
.chg-done__password-label { font-size: 13px; color: #6b7280; margin: 0 0 8px; }
.chg-done__password-value { font-family: monospace; font-size: 22px; font-weight: 700; color: #1f2937; letter-spacing: 3px; margin-bottom: 12px; }
.chg-done__copy { margin-top: 0; }
.chg-done__note { font-size: 13px; color: #9ca3af; margin: 0 0 20px; }
.mdp-back-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color .15s;
}
.mdp-back-link:hover { color: #667eea; }

/* ── Compléments portés de BC ACADEMY pour changer_mot_de_passe.php
   (classes manquantes : messages, champ code, formulaire, timer) ── */
.card-body { padding: 0; }
.card-body--p20 { padding: 20px; }

.admin-form-group { margin-bottom: 18px; }
.admin-form-group label { display: block; font-weight: 600; color: #555; margin-bottom: 6px; letter-spacing: .01em; }
.admin-form-group input[type=text],
.admin-form-group input[type=email],
.admin-form-group input[type=password],
.admin-form-group input[type=tel],
.admin-form-group input[type=file] {
    width: 100%; box-sizing: border-box; border: 0.5px solid #e0e0e0; border-radius: 8px;
    padding: 9px 12px; font-size: 15px; outline: none;
    transition: border-color .15s; background-color: #fff;
}
.admin-form-group input:focus { border-color: #667eea; }

.mdp-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.4;
}
.mdp-msg .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.mdp-msg--success { background: #ecfdf5; color: #065f46; border: .5px solid #a7f3d0; }
.mdp-msg--error   { background: #fff0f0; color: #a00;    border: .5px solid #fca5a5; }
.mdp-msg--warning { background: #fffbeb; color: #78350f; border: .5px solid #fde68a; }

.mdp-code-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 10px;
    padding: 14px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color .2s;
    color: #1f2937;
}
.mdp-code-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.12); }

.mdp-timer {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin: 12px 0 0;
}

/* ── Compléments portés de BC ACADEMY pour utilisateur_edit.php /
   utilisateurs.php (cartes, badges, toggle, utilitaires d'espacement) ── */
.flash { padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.flash-success { background: #f0faf4; color: #2d6a4f; border: 0.5px solid #b7e4c7; }
.flash-error { background: #fff0f0; color: #a00; border: 0.5px solid #fca5a5; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.card--mb16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.label-hint { color: #bbb; font-weight: 400; }
.field-hint { font-size: 11px; color: #9ca3af; margin-bottom: 16px; }
.field-hint--mt { margin-top: 6px; }
.toggle-label-text { font-size: 13px; color: #555; }
.mdp-subtitle--note { font-size: 12px; color: #9ca3af; }
.req-star { color: #e53e3e; }
.ue-toggle-switch { position: relative; width: 44px; height: 24px; border-radius: 12px; transition: background .3s; flex-shrink: 0; display: inline-block; }
.ue-toggle-knob { position: absolute; top: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .3s; display: block; }
.ue-toggle-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin-top: 4px; }

.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-form-row--3col { grid-template-columns: 1fr 1fr 1fr; }
.admin-form-group--role { max-width: 320px; margin-bottom: 20px; }

.admin-form-group select {
    width: 100%; box-sizing: border-box; border: 0.5px solid #e0e0e0; border-radius: 8px;
    padding: 9px 12px; font-size: 14px; outline: none;
    appearance: none;
    padding-right: 32px;
    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 10px center;
    background-color: #fff;
    transition: border-color .15s;
}
.admin-form-group select:focus { border-color: #667eea; }

/* Aperçu des boutons de vote masterclass (identite_visuelle.php > Signalétique) */
.vote-preview-btn-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.vote-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.vote-preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.field-group-preview {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}


/* ============================================================
   Normalisation visuelle nom/prénom (22/07/2026) — retour visuel
   immédiat pendant la saisie, la vraie transformation de la valeur se
   fait en JS au blur (cf. script en bas de page) + normalisation
   serveur systématique à l'enregistrement (normaliser_nom/normaliser_prenom,
   functions_normalisation.php). Purement cosmétique ici : ne change pas
   la valeur, juste l'affichage pendant que la personne tape.
   ============================================================ */
input[name="nom"] {
    text-transform: uppercase;
}
input[name="prenom"] {
    text-transform: capitalize;
}

/* Fonctionnalités : tri drag-and-drop + toggle édition (23/07/2026) */
.feature-card-config {
    display: flex;
    align-items: center;
    gap: 6px;
}
.feature-drag-handle {
    cursor: grab;
    color: #ccc;
    font-size: 20px;
    flex-shrink: 0;
}
.feature-drag-handle:hover {
    color: #667eea;
}
.feature-drag-handle:active {
    cursor: grabbing;
}
.feature-card-config .feature-card-inner {
    flex: 1;
    min-width: 0;
}
.feature-edit-collapsed .stat-card-fields {
    display: none;
}
.feature-card-ghost {
    opacity: 0.4;
}

/* Titre de groupe dans la grille des fonctionnalités */
.features-group-title {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    padding: 8px 0 2px;
    margin-top: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.features-group-title:first-child {
    margin-top: 0;
}

/* Titre de groupe dans la grille des crons (parametres.php) */
.cron-group-title {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    padding: 8px 0 2px;
    margin-top: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.cron-group-title:first-child {
    margin-top: 0;
}

/* ============================================================
   LISTE DES FORMATIONS — arborescence parent / enfant
   Poignée de tri, chevron de dépliage, bloc "identité" fusionné
   (poignée + type + visuel + titre) et retrait des formations
   enfants. Centralise les styles auparavant en ligne dans
   admin/formations.php. Seules restent en ligne les valeurs
   dynamiques : --tf-color (couleur du type) et --fmt-indent
   (retrait selon la profondeur).
   ============================================================ */

/* Colonne poignée de l'en-tête : largeur minimale, collée à droite.
   Sélecteur .table th.X pour battre la spécificité de `.table th`. */
.table th.th-fmt-handle {
    padding-left: 15px;
    padding-right: 0;
    width: 1px;
}

/* Cellule "identité" fusionnée (colspan). Le retrait des enfants est
   piloté par --fmt-indent (défini en ligne ; 15px par défaut = racine).
   Sélecteur .table td.X : INDISPENSABLE pour battre `.table td { padding }`,
   sinon le padding par défaut du tableau écrase le retrait des enfants. */
.table td.fmt-identity-cell {
    padding-left: var(--fmt-indent, 15px);
}
.fmt-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Poignée de glisser-déposer + chevron, empilés verticalement */
.fmt-handle-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.fmt-drag-handle {
    cursor: grab;
    color: #c0c4cc;
    font-size: 20px;
}

/* Bouton chevron (dépliage / repliage) */
.fmt-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    color: #667eea;
    flex: 0 0 auto;
}
/* Chevron : vers le bas quand la branche est dépliée (défaut),
   vers la droite quand elle est repliée (.fmt-collapsed sur le <tr>). */
.fmt-chevron {
    font-size: 20px;
    transition: transform .15s;
    transform: rotate(90deg);
}
tr.fmt-collapsed .fmt-chevron {
    transform: rotate(0deg);
}

/* Puce du type de formation dans le bloc identité : ne pas la compresser */
.fmt-identity .type-formation-puce-cell {
    flex: 0 0 auto;
}

/* Visuel de la formation (image ou vignette de remplacement) */
.fmt-visuel {
    flex: 0 0 auto;
}
.formation-visuel-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: block;
}
.formation-visuel-placeholder {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Titre : autorise le retour à la ligne dans le conteneur flex */
.fmt-titre {
    min-width: 0;
}

/* Utilitaire : <form> transparent pour la mise en page (display:contents),
   utilisé pour les formulaires d'action imbriqués dans les menus/listes. */
.d-contents {
    display: contents;
}

/* ============================================================
   ÉDITION D'UNE FORMATION (formation_edit.php)
   Extraction des styles auparavant en ligne. Les puces de type
   (--tf-color) restent en ligne : valeur dynamique par type.
   ============================================================ */

/* Utilitaire générique : pousse l'élément à droite dans un conteneur flex */
.ml-auto {
    margin-left: auto;
}

/* Pastille d'état de la formation (en-tête) : dégradé actif / inactif */
.stat-icon-actif {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}
.stat-icon-inactif {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* Compteur clair (badge blanc) affiché dans le bouton "Voir les sessions" */
.badge-compteur-clair {
    background: #fff;
    color: #7f8c8d;
    font-weight: 700;
}

/* Paramètres de la formation : les 3 toggles répartis sur 3 colonnes,
   contenu calé en haut. align-items:start évite que les indications de
   longueurs différentes recentrent verticalement les toggles.
   Le sélecteur .param-toggles-cols .param-toggle (spécificité 0,2,0) bat
   le align-items:center de .param-toggle pour caler l'interrupteur en haut. */
.param-toggles-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}
.param-toggles-cols .param-toggle {
    align-items: flex-start;
}
/* "Formation active" toujours épinglé à la 3e (dernière) colonne, même quand
   les blocs parrainage/zoom sont masqués par leur fonctionnalité. */
.param-toggles-cols .param-toggle-last {
    grid-column: 3;
}

/* Sous-titre de la formation (liste formations.php) : sous le titre,
   en caractères standard (poids normal, gris atténué). */
.formation-sous-titre {
    display: block;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.9em;
    margin-top: 2px;
}

/* Tableau de bord : ligne "À traiter" + filtre type. Quand le toggle de type
   est masqué (un seul type de formation), on retire la 2e colonne pour que la
   carte occupe toute la largeur, sans la marge résiduelle du gap de la grille. */
.tb-atraiter-filtre-row--seul {
    grid-template-columns: 1fr;
}

/* Liste des formations : fourchette des tarifs de session affichée sous le
   badge "par session" (prix le plus bas / le plus haut des sessions). */
.tarif-sessions-fourchette {
    margin-top: 4px;
    font-size: 0.8em;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.2;
}

/* Barre du haut de formation_edit.php : groupe d'actions à droite
   (Déroulé pédagogique + Voir les sessions + Créer une session). */
.fe-top-bar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Badge de provenance du tarif dans la liste des sessions (par session /
   par période / par formation) : compact, sous le montant. */
.badge-tarif-source {
    font-size: 0.7em;
    margin-top: 2px;
    display: inline-block;
}

/* ============================================================
   Extraction de styles inline : sessions.php & session_edit.php
   (styles statiques uniquement ; dynamiques gardés en ligne)
   ============================================================ */
/* sessions.php : sous-titre dans l'en-tête de groupe de formation */
.formation-header-soustitre { font-weight: 400; opacity: .85; }

/* session_edit.php */

.se-p-mb8 { margin: 0 0 8px; }
.se-formation-preview-title { color: #2c3e50; font-size: 28px; margin-bottom: 10px; }
.se-type-pills-locked { pointer-events: none; opacity: .6; }
.se-flex-row { display: flex; gap: 8px; align-items: center; }
.se-zoom-options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.se-zoom-radio { display: flex; align-items: center; gap: 7px; font-weight: normal; cursor: pointer; }
.se-notif-box { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea; }
.se-notif-status { font-weight: 600; margin-bottom: 8px; }
.se-progress-track { background: #e0e0e0; border-radius: 4px; overflow: hidden; height: 20px; }
.se-progress-fill { background: linear-gradient(135deg, #667eea, #7