/* ========================================
   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 « rejetée » — statut de reservation ajoute le 25/08/2026.
   Orange : ni le vert d'une confirmation, ni le rouge d'une annulation. */
.badge-rejetee {
    background: #fde5cf;
    color: #8a4b08;
}

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

/* L'ATTRIBUT `hidden` NE SUFFIT PAS ICI — 29/08/2026.
   `hidden` ne vaut qu'un `display: none` de la feuille par défaut du
   navigateur, et `.select-option { display: flex }` le supplante : les
   lignes filtrées restaient donc toutes visibles, le filtre semblait ne
   rien faire. Il faut le dire explicitement. */
.select-option[hidden],
.select-filtre-vide[hidden] {
    display: none !important;
}


.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; }
.icon-rejetee { color: #e67e22; }

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

/* Carte « Nombre de places » : les réglages sur une seule ligne.
   Le nombre de colonnes n'est PAS figé : « Places illimitées » n'apparaît que
   pour certains types de formation, et « Nombre de places » disparaît quand
   les places sont illimitées. Selon le cas il y a donc deux ou trois réglages
   à afficher — `grid-auto-flow: column` en crée autant de colonnes qu'il y a
   d'éléments réellement visibles, et de largeur égale.
   Une classe à part plutôt qu'une modification de `.grid-2-cols`, qui sert
   dans toute l'admin.
   Sous 1100 px la ligne ne tiendrait pas : on repasse à un réglage par ligne. */
.grid-places-3 {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

@media (max-width: 1100px) {
    .grid-places-3 {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
    }
}
.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;
}

/* Un en-tête de carte peut porter un `.section-title` plutôt qu'un
   `.card-title` — c'est le cas de `pages_du_site.php`, dont les trois blocs
   sont titrés ainsi. Même neutralisation que ci-dessus : le trait et le
   retrait appartiennent à la ligne, sinon le trait s'arrête à la fin du texte
   et le bouton se retrouve collé dessus. */
.card-header-flex .section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 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é */
/* Autorisation de diffusion d'image (reservation_detail.php) — un refus
   doit se lire aussi nettement qu'un accord. */
.cp-applied-box.ai-refuse {
    background: #fef2f2;
    border-color: #fecaca;
}

.cp-applied-box.ai-refuse .cp-applied-icon {
    color: #b91c1c;
}

.ai-consigne {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.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: "BC ACADEMY — 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 hérité d'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 liseré -----
   Couleur, épaisseur et longueur étaient alignées sur UNE seule ligne
   (`flex` en rangée) : trois libellés et six contrôles côte à côte, illisible
   dès que la carte se rétrécit. Chaque réglage occupe maintenant sa propre
   ligne, comme partout ailleurs dans ces cartes.
   `#titre-boite-lisere-controls` et `.ts-lisere-controls` sont inclus pour
   que les trois familles de liserés se présentent de la même façon. */
.h1-lisere-controls,
.h2-lisere-controls,
.h3-lisere-controls,
.h4-lisere-controls,
.h5-lisere-controls,
.h6-lisere-controls,
.ts-lisere-controls,
#titre-boite-lisere-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    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;
}

/* Niveau et sous-titre de la formation (liste formations.php) : l'un au-dessus
   du titre, l'autre en dessous, en caractères standard (poids normal, gris
   atténué). Une seule déclaration pour les deux : ils doivent se ressembler,
   et deux blocs séparés finissent toujours par diverger. Seule la marge les
   sépare — du côté du titre dans chaque cas. */
.formation-niveau,
.formation-sous-titre {
    display: block;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.9em;
}

.formation-niveau {
    margin-bottom: 2px;
}

.formation-sous-titre {
    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, #764ba2); height: 100%; width: 0; transition: width .3s ease; }
/* ── Aperçu de la carte « Bandeau de page » (Identité visuelle) ────────── */
.bandeau-preview {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}
.bandeau-preview-voile {
    position: absolute;
    inset: 0;
}
.bandeau-preview-titre {
    position: relative;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    padding: 0 10px;
}

/* ── Bandeaux de page (liste + édition) ───────────────────────────────── */
.bandeau-vignette {
    display: inline-block;
    width: 64px;
    height: 36px;
    border-radius: 4px;
    background-size: cover;
    background-position: center center;
    border: 1px solid #dfe6ee;
}
.bandeau-vignette.vide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f5f9;
    color: #b7c2cf;
}
.bandeau-pages-libres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bandeau-edit-apercu {
    margin-bottom: 15px;
}
.bandeau-edit-image {
    position: relative;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 62 / 16;
    border-radius: 6px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bandeau-edit-voile {
    position: absolute;
    inset: 0;
}
.bandeau-edit-titre {
    position: relative;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 16px;
}

/* Sélecteur d'image + suppression du fichier, sur une ligne. */
.bandeau-select-ligne {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bandeau-select-ligne .form-control {
    flex: 1;
    min-width: 0;
}

/* ── Image du bandeau dans la modale « Modifier la page » ──────────────── */
/* Reprend l'aperçu sur damier et les trois boutons de la carte « Fond »
   d'Identité visuelle, pour que le geste soit le même des deux côtés. */
.bandeau-upload-modale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    text-align: center;
}
.bandeau-upload-boutons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bandeau-upload-boutons .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Le damier et le cadrage de l'aperçu ne vivaient que dans le <style> en tête
   d'identite_visuelle.php : ils n'existaient donc pas sur parametres.php.
   Repris ici, portés par la modale, pour ne pas modifier le rendu ailleurs. */
.bandeau-upload-modale .logo-preview {
    width: 100%;
    max-width: 260px;
    min-height: 100px;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #ddd;
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.bandeau-upload-modale .logo-container {
    display: contents;
}
.bandeau-upload-modale .logo-preview img {
    max-width: 100%;
    max-height: 120px;
    height: auto;
    border-radius: 4px;
}
.bandeau-upload-modale .logo-preview.empty .material-symbols-outlined {
    font-size: 40px;
    color: #9aa7b4;
}
.bandeau-upload-etat {
    font-size: 12px;
    color: #6b7c8d;
}
.bandeau-upload-etat.en-cours { color: #6b7c8d; }
.bandeau-upload-etat.ok       { color: #1e7e4f; }
.bandeau-upload-etat.erreur   { color: #c0392b; }

/* ── Modale « Modifier la page » sur deux colonnes ─────────────────────── */
.menu-item-modal {
    max-width: 880px;
}

.menu-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}

/* Filet de séparation porté par la seconde colonne : pas d'élément vide à
   maintenir, et il disparaît de lui-même quand les colonnes se replient. */
.menu-item-col + .menu-item-col {
    border-left: 1px solid #e6ecf3;
    padding-left: 32px;
}

.menu-item-col-titre {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6ecf3;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7c8d;
}
.menu-item-col-titre .material-symbols-outlined {
    font-size: 18px;
}

/* Écran étroit : les colonnes se replient, le filet passe au-dessus. */
@media (max-width: 820px) {
    .menu-item-modal {
        max-width: 520px;
    }
    .menu-item-grid {
        grid-template-columns: 1fr;
        gap: 22px 0;
    }
    .menu-item-col + .menu-item-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #e6ecf3;
        padding-top: 18px;
    }
}

/* =====================================================================
   CONTENU DES PAGES ÉDITORIALES — page_contenu_edit.php
   =====================================================================
   Sections empilées, repliées par défaut : on voit la structure de la
   page d'un coup d'œil, et les éditeurs de texte ne sont montés qu'à
   l'ouverture d'une section. */

.pcs-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.pcs-section {
    background: #fff;
    border: 1px solid #e6ecf3;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.pcs-section.ouverte {
    border-color: #cfe0f3;
    box-shadow: 0 2px 12px rgba(13, 90, 167, .08);
}

/* Une section masquée sur le site se reconnaît sans avoir à l'ouvrir. */
.pcs-section-inactive {
    background: #fafbfc;
}

.pcs-section-inactive .pcs-tete-titre {
    opacity: .5;
    text-decoration: line-through;
}

.pcs-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

.pcs-poignee {
    cursor: grab;
    color: #b6c2cf;
}

.pcs-poignee:active {
    cursor: grabbing;
}

.pcs-chevron {
    color: #8a99a8;
    transition: transform .15s;
}

.pcs-section.ouverte .pcs-chevron {
    transform: rotate(180deg);
}

/* L'en-tête d'une section est lu en BALAYANT la liste de haut en bas : chaque
   information occupe donc une colonne de largeur fixe, alignée d'une ligne à
   l'autre. Empilés dans un même bloc, titre et modèle obligeaient l'œil à
   revenir en arrière à chaque ligne. */
.pcs-tete-titre {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcs-tete-titre em {
    color: #9aa7b4;
    font-weight: 400;
}

.pcs-tete-modele {
    flex: 0 0 130px;
    font-size: 12px;
    color: #8a99a8;
    text-align: right;
    white-space: nowrap;
}

/* Le schéma : un bloc par colonne, à la largeur du modèle, portant le
   pictogramme de ce que la colonne contient. C'est la même information que
   l'intitulé à côté, mais donnée en une image plutôt qu'en une phrase. */
.pcs-tete-schema {
    flex: 0 0 120px;
    display: flex;
    gap: 6px;
    height: 34px;
    /* Écarté des deux icônes d'action qui suivent. Collé à elles, le schéma
       se lisait comme deux boutons de plus : c'est la PROXIMITÉ qui fait
       croire à un groupe, plus que la forme des blocs. */
    margin-right: 28px;
}

.pcs-tete-bloc {
    min-width: 0;
    border: 1.5px solid #cfe0f3;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d5aa7;
}

.pcs-tete-bloc .material-symbols-outlined {
    font-size: 17px;
}

/* Section masquée : le schéma s'éteint avec le reste de la ligne. */
.pcs-section-inactive .pcs-tete-bloc {
    border-color: #e2e8ee;
    color: #a9b6c2;
}

/* Case « afficher sur le site », dessinée comme un bouton d'icône pour ne
   pas introduire une case à cocher isolée au milieu d'une barre d'icônes.

   Elle reprend les couleurs de l'interrupteur des autres listes
   (`.btn-icon-toggle`) : vert quand la section est affichée, orange quand elle
   ne l'est pas. Les mêmes teintes, pour que l'état se lise sans réfléchir.

   Le carré coloré est porté par l'ICÔNE et non par l'étiquette : la case à
   cocher est à l'intérieur de celle-ci, et seul le sélecteur frère
   (`input:checked + …`) permet de réagir à son état partout, sans dépendre de
   `:has()`. */
.pcs-actif {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.pcs-actif input {
    display: none;
}

.pcs-actif .material-symbols-outlined {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s;
    background: #fff3e0;
    color: #ff9800;
}

.pcs-actif:hover .material-symbols-outlined {
    background: #ff9800;
    color: #ffffff;
}

.pcs-actif input:checked + .material-symbols-outlined {
    background: #e8f5e9;
    color: #4CAF50;
}

.pcs-actif:hover input:checked + .material-symbols-outlined {
    background: #4CAF50;
    color: #ffffff;
}

.pcs-corps {
    display: none;
    padding: 0 16px 18px;
    border-top: 1px solid #f0f4f8;
}

.pcs-section.ouverte .pcs-corps {
    display: block;
}

.pcs-corps .form-group {
    margin-top: 16px;
}

/* --- Choix du modèle : des vignettes plutôt qu'une liste déroulante,
       parce qu'un colonnage se reconnaît infiniment plus vite dessiné
       qu'écrit. ------------------------------------------------------ */
.pcs-modeles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pcs-modele {
    flex: 0 0 130px;
    border: 2px solid #e6ecf3;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.pcs-modele:hover {
    border-color: #cfe0f3;
}

.pcs-modele.actif {
    border-color: #0d5aa7;
    background: #f4f9ff;
}

.pcs-modele input {
    display: none;
}

.pcs-modele-vignette {
    display: flex;
    gap: 4px;
    height: 34px;
    margin-bottom: 8px;
}

.pcs-modele-bloc {
    background: #d6e3f0;
    border-radius: 3px;
}

.pcs-modele.actif .pcs-modele-bloc {
    background: #0d5aa7;
}

.pcs-modele-libelle {
    font-size: 11px;
    color: #6b7c8d;
}

/* --- Les deux colonnes ------------------------------------------------ */
.pcs-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

/* « Une colonne » : l'éditeur prend toute la largeur.
   La grille restait à deux pistes même quand la seconde colonne est
   masquée, si bien que l'unique éditeur se contentait de la moitié gauche —
   on rédigeait un texte pleine largeur dans une fenêtre deux fois trop
   étroite. `data-modele` est tenu à jour par le script de
   `page_contenu_edit.php` à chaque changement de mise en page : une règle
   CSS suffit, sans toucher au JavaScript. */
.pcs-section[data-modele="100"] .pcs-colonnes {
    grid-template-columns: 1fr;
}

.pcs-colonne {
    border: 1px solid #eef2f6;
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}

.pcs-colonne[hidden] {
    display: none;
}

.pcs-colonne-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pcs-colonne-tete strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a99a8;
}

.pcs-bascule {
    display: flex;
    border: 1px solid #e6ecf3;
    border-radius: 6px;
    overflow: hidden;
}

.pcs-bascule label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #6b7c8d;
    cursor: pointer;
    background: #fff;
}

.pcs-bascule label + label {
    border-left: 1px solid #e6ecf3;
}

.pcs-bascule label .material-symbols-outlined {
    font-size: 16px;
}

.pcs-bascule label.actif {
    background: #0d5aa7;
    color: #fff;
}

.pcs-bascule input {
    display: none;
}

/* Un seul volet visible à la fois, selon la bascule Texte / Visuel. */
.pcs-volet {
    display: none;
}

.pcs-colonne[data-type="texte"] .pcs-volet-texte,
.pcs-colonne[data-type="visuel"] .pcs-volet-visuel {
    display: block;
}

.pcs-volet-visuel {
    text-align: center;
}

/* Même bloc d'aperçu que la carte « Bandeau de page », élargi à la
   colonne : un visuel de page est presque toujours en paysage. */
.pcs-apercu {
    width: 100%;
    height: 180px;
    margin: 0 auto 10px;
    background: #fafbfc;
}

.pcs-apercu img {
    max-width: 100%;
    max-height: 140px;
}

.pcs-visuel-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pcs-fichier-nom {
    display: block;
    width: 100%;
    color: #8a99a8;
    font-size: 11px;
}

/* --- Pied de page de l'écran ------------------------------------------ */
/* Le bouton d'ajout est remonté dans l'en-tête de la carte : il ne reste ici
   que « Enregistrer », calé à gauche. */
.pcs-barre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pcs-vide {
    text-align: center;
    padding: 40px 20px;
    color: #9aa7b4;
    border: 2px dashed #e6ecf3;
    border-radius: 10px;
    margin-bottom: 20px;
}

.pcs-vide .material-symbols-outlined {
    font-size: 40px;
    color: #cfd8e3;
}

.pcs-vide p {
    margin: 8px 0 0;
}

@media (max-width: 900px) {
    .pcs-colonnes {
        grid-template-columns: 1fr;
    }
    .pcs-modele {
        flex: 1 1 45%;
    }
}

/* Titre d'une colonne : il se saisit au-dessus du volet, puisqu'il
   appartient à la colonne et non à la section. */
.pcs-colonne-titre .pcs-titre {
    font-weight: 500;
}

/* =====================================================================
   ÉDITEUR DE FORMULAIRES — formulaires.php / formulaire_edit.php
   =====================================================================
   Repris du site du cabinet Bourgeois avec le reste du système. Les
   couleurs de sa charte ont été remplacées par celles de BC ACADEMY
   (bleu du logo #0d5aa7), et ses variables CSS, qui n'existent pas ici,
   par leurs valeurs. Rien d'autre n'a bougé : à mise en page identique,
   comportement identique. */

.data-table a.btn-action-icon {
    text-decoration: none !important;
}

.badge-read {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-form-group .hint {
    font-size: 12px;
    color: #8a99a8;
    margin-top: 4px;
}

.drag-handle {
    color: #888;
    cursor: grab;
    text-align: center;
    font-size: 14px;
}

.btn-add-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #0d5aa7;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    font-family: inherit;
    padding: 0;
}

/* Quill compact pour les intitulés */
.field-block .ql-toolbar {
    padding: 2px 6px !important;
    background: #fafafa;
    border: 0.5px solid #e6ecf3 !important;
    border-radius: 4px 4px 0 0;
    line-height: 1;
}

.field-block .ql-container {
    font-size: 13px;
    min-height: 40px;
    border: 0.5px solid #e6ecf3 !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px;
}

.field-block .ql-toolbar .ql-formats {
    margin-right: 4px !important;
}

.field-block .ql-toolbar button {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.field-block .ql-toolbar button svg {
    width: 12px !important;
    height: 12px !important;
}

.field-block .ql-toolbar .ql-picker {
    font-size: 11px !important;
    height: 18px !important;
}

.field-block .ql-color-picker .ql-picker-label svg {
    width: 12px !important;
    height: 12px !important;
}

.field-block {
    background: #fff;
    border: 0.5px solid #e6ecf3;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: box-shadow .15s;
    position: relative;
}

.field-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.field-block.sortable-ghost {
    opacity: .4;
    background: #f0f4ff;
}

.field-block.sortable-chosen {
    box-shadow: 0 4px 16px rgba(13,90,167,.25);
}

.field-header {
    display: grid;
  grid-template-columns: 28px 1fr 140px auto 40px;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
}

.drag-handle {
    padding-top: 14px;
  text-align: center;
  color: #888;
  cursor: grab;
  font-size: 16px;
  user-select: none;
}

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

.field-intitule-wrap {
    display: block;
    width: 100%;
}

.quill-intitule {
    border: 0.5px solid #e6ecf3;
  border-radius: 4px;
  min-height: 55px;
}

.type-select {
    width: 100%;
  padding: 8px 30px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  margin-top: 6px;
  cursor: pointer;
  background-color: #fff;
  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 8px center;
  transition: border-color .2s, box-shadow .2s;
  color: #2c3e50;
}

.type-select:hover {
    border-color: #0d5aa7;
}

.type-select:focus {
    outline: none;
    border-color: #0d5aa7;
    box-shadow: 0 0 0 3px rgba(13,90,167,.1);
}

.field-actions {
    display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  padding-top: 8px;
  align-items: center;
}

.btn-action-icon,
.btn-action-toggle {
    background: #f5f5f5;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  color: #ccc;
  line-height: 1;
  flex-shrink: 0;
}

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

.btn-action-icon:hover {
    background: #e0e0e0;
}

.btn-action-view {
    color: #17a2b8 !important;
    background: #e0f7fa !important;
}

.btn-action-view:hover {
    background: #17a2b8 !important;
    color: #fff !important;
}

.btn-action-edit {
    color: #27ae60 !important;
    background: #e8f5e9 !important;
}

.btn-action-edit:hover {
    background: #27ae60 !important;
    color: #fff !important;
}

.btn-action-dup {
    color: #0d5aa7 !important;
    background: #e8eaf6 !important;
}

.btn-action-dup:hover {
    background: #0d5aa7 !important;
    color: #fff !important;
}

.btn-action-del {
    color: #f44336 !important;
    background: #ffebee !important;
}

.btn-action-del:hover {
    background: #f44336 !important;
    color: #fff !important;
}

.btn-req-on {
    background: #fff0e0 !important;
    color: #b06a00 !important;
    border-color: #f6ad55 !important;
}

.btn-actif-on {
    background: #e8f5e9 !important;
    color: #2d7d45  !important;
    border-color: #b7e4c7 !important;
}

.btn-cond-on {
    background: #fff8e6 !important;
    color: #0d5aa7 !important;
    border-color: #0d5aa7 !important;
}

.field-fold-btn {
    background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: color .15s;
  line-height: 1;
  margin-top: 8px;
  align-self: start;
  width: 100%;
}

.field-fold-btn:hover {
    color: #0d5aa7;
}

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

.children-zone {
    margin: 0 40px 8px 40px;
    padding: 6px;
    background: rgba(13,90,167,.04);
    border-radius: 6px;
    border: 1px dashed rgba(13,90,167,.2);
    min-height: 36px;
    display: block;
}

.children-zone:empty::after {
    content: "Glissez un champ ici pour le grouper";
    font-size: 11px;
    color: #bbb;
    display: block;
    text-align: center;
    padding: 6px;
}

.children-zone::after {
    content: "＋ Déposer un champ ici";
    font-size: 11px;
    color: rgba(13,90,167,.4);
    display: block;
    text-align: center;
    padding: 6px 6px 2px;
    border-top: 1px dashed rgba(13,90,167,.15);
    margin-top: 4px;
}

.children-zone:empty::after {
    border-top: none;
    margin-top: 0;
    color: #bbb;
    content: "Glissez un champ ici pour le grouper";
}

.children-zone .field-block {
    background: #f8f9ff;
    margin-bottom: 6px;
    border-color: rgba(13,90,167,.2);
}

.children-zone .field-block:last-child {
    margin-bottom: 0;
}

.children-zone .children-zone {
    display: none;
}

.field-list-header {
    display: grid;
  grid-template-columns: 28px 1fr 140px auto 40px;
  gap: 8px;
  padding: 0 12px 8px;
  font-size: 11px;
  color: #8a99a8;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 0.5px solid #e6ecf3;
  margin-bottom: 8px;
}

.modal-box {
    background: #fff;
  border-radius: 14px;
  padding: 28px;
  width: 720px;
  max-width: 95vw;
  box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
}

.modal-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: -.01em;
}

.modal-desc {
    font-size: 13px;
    color: #8a99a8;
    margin: 0 0 20px;
}

.modal-op-row {
    margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #5b6b7b;
}

.cond-rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.cond-rule-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cond-select {
    flex: 1;
  min-width: 0;
  padding: 10px 32px 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background-color: #fff;
  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 10px center;
  transition: border-color .2s, box-shadow .2s;
  color: #2c3e50;
}

.cond-select:hover {
    border-color: #0d5aa7;
}

.cond-select:focus {
    outline: none;
    border-color: #0d5aa7;
    box-shadow: 0 0 0 3px rgba(13,90,167,.1);
}

.cond-rule-del {
    background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  font-size: 20px;
  padding: 0 2px;
  transition: color .1s;
  flex-shrink: 0;
  line-height: 1;
}

.cond-rule-del:hover {
    color: #e00;
}

.field-col-full {
    grid-column: span 6;
}

.field-col-half {
    grid-column: span 3;
}

.field-col-two_thirds {
    grid-column: span 4;
}

.field-col-third {
    grid-column: span 2;
}

.col-select {
    border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 20px 4px 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  background-color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  color: #5b6b7b;
  transition: border-color .2s;
}

.col-select:hover {
    border-color: #0d5aa7;
}

.col-select:focus {
    outline: none;
    border-color: #0d5aa7;
    box-shadow: 0 0 0 2px rgba(13,90,167,.1);
}

.gi-row.sortable-ghost {
    opacity: .4;
    background: #f0f4ff;
}

.gi-row.sortable-chosen {
    box-shadow: 0 4px 16px rgba(13,90,167,.25);
}

/* Icônes Material Symbols */
.material-symbols-outlined.icon-xs {
    font-size: 14px;
}

.material-symbols-outlined.icon-sm {
    font-size: 15px;
}

.material-symbols-outlined.icon-lg {
    font-size: 22px;
}

.card-body--p16 {
    padding: 16px;
}

.admin-filter-select {
    border: 0.5px solid #e6ecf3;
  border-radius: 6px;
  padding: 7px 30px 7px 10px;
  font-family: inherit;
  font-size: 13px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #2c3e50;
  height: 36px;
  box-sizing: border-box;
}

.admin-filter-select:focus {
    outline: none;
    border-color: #0d5aa7;
    box-shadow: 0 0 0 3px rgba(13,90,167,.1);
}

.input-mono {
    font-family: monospace;
}

.modal-overlay--center {
    align-items: center;
    padding: 0;
}

.modal-box--sm {
    width: 500px;
}

.modal-title--plain {
    font-weight: 400;
    margin-bottom: 20px;
}

.ms-auto {
    margin-left: auto;
}

.th-32 {
    width: 32px;
}

.td-32 {
    width: 32px;
    text-align: center;
}

.td-empty {
    text-align: center;
    color: #8a99a8;
    padding: 28px;
}

.action-btns {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
}

.row-subtitle {
    font-size: 11px;
    color: #8a99a8;
    margin-top: 2px;
}

.slug-code {
    font-size: 11px;
    color: #5b6b7b;
}

.icon-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hint--warning {
    color: #e07000;
}

.btn-add-field--spaced {
    margin: 8px 0 12px;
}

.btn-add-field--mb {
    margin-bottom: 16px;
}

.field-hint {
    font-size: 11px;
    color: #8a99a8;
    margin-bottom: 16px;
}

.form-save-row {
    padding-top: 16px;
    border-top: 0.5px solid #e6ecf3;
    display: flex;
    gap: 10px;
}

.header-hint {
    color: #ccc;
    font-weight: 400;
}

.search-form {
    display: flex;
    gap: 6px;
}

.checkbox-input {
    width: 15px;
    height: 15px;
    accent-color: #0d5aa7;
}

.alerte-status-wrap {
    margin-bottom: 16px;
}

.alerte-status {
    display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}

.alerte-status--on {
    background: #fff8e1;
    color: #b06a00;
    border: 0.5px solid #f6ad55;
}

.alerte-status--off {
    background: #f5f5f5;
    color: #888;
    border: 0.5px solid #ddd;
}

.format-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.format-edit-field label {
    font-size: 12px;
    color: #666;
}

.format-edit-field small {
    font-size: 11px;
    color: #aaa;
}

.format-edit-field small a {
    color: #aaa;
}

.format-edit-field input[type=text] {
    width: 100%;
    padding: 7px 10px;
    border: 0.5px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    color: #2c3e50;
}

.format-edit-field .form-control {
    width: 100%;
    padding: 7px 10px;
    border: 0.5px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
    color: #2c3e50;
}

.format-edit-field input[type=text]:focus,
.format-edit-field .form-control:focus {
    border-color: #0d5aa7;
    box-shadow: 0 0 0 3px rgba(13,90,167,.1);
}

.format-edit-color {
    display: flex;
    gap: 8px;
    align-items: center;
}

.format-edit-color input[type=color] {
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0;
}

.format-edit-color input[type=text] {
    flex: 1;
    padding: 7px 10px;
    border: 0.5px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}

.format-edit-color input[type=text]:focus {
    border-color: #0d5aa7;
}

.td-empty {
    text-align: center;
    color: #bbb;
    padding: 28px;
    font-size: 13px;
}

.modal-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

a.btn-action-icon {
    text-decoration: none !important;
}

.icon-accent {
    color: #0d5aa7;
}

.icon-warning-sm {
    color: #e07000;
    vertical-align: middle;
}

.icon-muted {
    color: #ccc;
}

.checkbox-label--mt {
    margin-top: 6px;
}

.field-extra {
    display: none;
    padding: 2px 12px 8px;
    padding-left: 48px;
}

.field-extra.fb-visible {
    display: block;
}

.extra-for-select,
.extra-for-file {
    display: none;
    align-items: center;
    gap: 8px;
}

.extra-for-select.fb-visible {
    display: flex;
}

.extra-for-file.fb-visible {
    display: flex;
}

.field-extra-label {
    font-size: 12px;
    color: #8a99a8;
    white-space: nowrap;
}

.field-extra-input {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #e6ecf3;
    border-radius: 4px;
    color: #2c3e50;
    background: #ffffff;
}

.field-extra-input--sm {
    width: 220px;
}

.field-extra-input--md {
    width: 300px;
}

.form-section-sep {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e6ecf3;
}

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

.field-wide-input {
    width: 320px;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6ecf3;
    border-radius: 6px;
    font-size: 14px;
    color: #2c3e50;
    background: #ffffff;
}

.field-hint--mt {
    margin-top: 6px;
}

.hint--mb16 {
    margin-bottom: 16px;
}

.hint--mb12 {
    margin-bottom: 12px;
}

.input-mono--sm {
    font-size: 11px;
}

.action-config-item.sortable-ghost {
    opacity:.4;
    background:#0d5aa7;
}

.action-config-item.sortable-chosen {
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.drag-handle-action {
    cursor:grab;
    color:#888;
    flex-shrink:0;
}

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

.statut-row.sortable-ghost {
    opacity: .4;
    background: #f0f4ff;
}

.statut-row.sortable-chosen {
    box-shadow: 0 4px 16px rgba(13,90,167,.25);
}

.fb-outer-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.fb-side-nav {
    width: 200px;
    flex-shrink: 0;
  background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
  position: sticky;
    top: 56px;
  max-height: calc(100vh - 76px);
    overflow-y: auto;
  padding: 8px 0;
}

.fb-content-wrap {
    flex: 1;
    min-width: 0;
}

.fb-scroll-spacer {
    height: 50vh;
}

.fb-nav-children {
    
}

#fields-list > .field-block,
.children-zone > .field-block {
    scroll-margin-top: 75px;
}

.fb-nav-item {
    display: flex;
    align-items: center;
    /* `justify-content: space-between` poussait le libellé à l'opposé de son
       icône, chacun collé à un bord. Ça n'a de sens que si la ligne porte un
       troisième élément à droite — un chevron, un compteur — ce qui n'est pas
       le cas ici. Le libellé suit donc son icône, séparé par un `gap`.

       Cette règle est restée SANS EFFET pendant des mois : elle se trouve
       après la déclaration tronquée de `.se-progress-fill` (ligne ~19897),
       qui avalait tout ce qui la suivait. Réparer cette troncature l'a
       réveillée, et avec elle son défaut d'alignement. */
    gap: 10px;
  padding: 7px 16px;
    font-size: 13px;
    color: #5b6b7b;
  cursor: pointer;
    border-left: 2px solid transparent;
  transition: background .1s, color .1s, border-color .1s;
  overflow: hidden;
    user-select: none;
    line-height: 1.4;
}

.fb-nav-item:hover {
    background: #f5f5f5;
    color: #2c3e50;
}

.fb-nav-item.active {
    background: #f0f4ff;
    color: #0d5aa7;
    border-left-color: #0d5aa7;
}

.fb-nav-item.fb-nav-section {
    
}

.fb-nav-item.fb-nav-section.active {
    
}

.fb-nav-item.fb-nav-child {
    padding-left: 28px;
}

.fb-nav-item.fb-nav-child.active {
    color: #0d5aa7;
}

.fb-nav-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.fb-nav-item-icon {
    font-size: 16px;
    flex-shrink: 0;
    opacity: .5;
    margin-left: 4px;
    font-family: "Material Symbols Outlined";
}

.extra-for-option {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.extra-for-option.fb-visible {
    display: flex;
}

.modal-box--blocs {
    width: 760px;
    max-height: 85vh;
    overflow-y: auto;
}

/* Le système de formulaires vient du site du cabinet, qui montre ses modales
   avec la classe `open`. BC ACADEMY emploie `show` ou `active` selon les
   écrans. Plutôt que de réécrire le JavaScript porté — et de créer un écart
   de plus avec l'original — on déclare simplement la convention manquante. */
.modal-overlay.open {
    display: flex;
}

/* Troisième type de colonne : formulaire de contact. Il n'a aucun réglage,
   la carte se contente d'annoncer ce qui s'affichera sur la page. */
.pcs-colonne[data-type="formulaire"] .pcs-volet-formulaire {
    display: block;
}

/* Le titre vaut pour la colonne de texte comme pour le formulaire ; seul le
   visuel s'en passe, n'ayant pas où l'afficher. */
.pcs-colonne-titre {
    margin-bottom: 8px;
}

.pcs-colonne[data-type="visuel"] .pcs-colonne-titre {
    display: none;
}

.pcs-formulaire-apercu {
    border: 1px dashed #d7e2ee;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    color: #6b7c8d;
    background: #fbfdff;
}

.pcs-formulaire-apercu .material-symbols-outlined {
    font-size: 34px;
    color: #b6c9dd;
}

.pcs-formulaire-apercu p {
    margin: 6px 0 0;
    font-size: 13px;
}

.pcs-formulaire-note {
    font-size: 11px !important;
    color: #9aa7b4;
    margin-top: 10px !important;
}

/* Liseré des titres, dans l'aperçu d'Identité visuelle.
   Dessiné comme sur le site public : un trait COURT sous le titre, et non
   une bordure basse qui prendrait toute sa largeur. Les trois variables
   sont posées sur l'élément par le JavaScript de la carte. */
.apercu-lisere::after {
    content: '';
    display: block;
    width: var(--apercu-lisere-longueur, 100px);
    border-top: var(--apercu-lisere-epaisseur, 3px) solid var(--apercu-lisere-couleur, #0d5aa7);
    margin-top: 8px;
}

/* Quatrième type de colonne : une liste dynamique (formateurs,
   intervenants). Comme le formulaire, elle n'a qu'un choix de source. */
.pcs-colonne[data-type="liste"] .pcs-volet-liste {
    display: block;
}

/* Aperçu du pictogramme d'une formation : c'est une icône, pas une photo.
   L'afficher à la taille du visuel donnerait une idée fausse de son rendu
   dans les listes, où il reste petit. */
.fe-pictogramme-preview {
    max-width: 140px;
    max-height: 140px;
}


/* =====================================================================
   Galerie photos — carte d'administration (formation_edit / session_edit)
   ---------------------------------------------------------------------
   Ces règles étaient d'abord parties dans le style.css du site PUBLIC, que
   l'administration ne charge pas : la grille ne s'appliquait pas et chaque
   photo occupait toute la largeur — près de 1 900 px de haut pour cinq
   photos. C'est la cause de l'affichage que vous aviez signalé.
   ===================================================================== */
.galerie-admin-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 14px 0 16px;
}
.galerie-admin-item {
    position: relative;
    background: #f7f7f9;
    border: 1px solid #ececf1;
    border-radius: 8px;
    padding: 6px;
}
.galerie-admin-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
/* Ordre et légende sur UNE ligne sous la vignette : deux champs empilés
   doublaient la hauteur de chaque carte pour rien. */
.galerie-admin-champs {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.galerie-admin-legende {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    font-size: 13px;
}
.galerie-admin-suppr {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.galerie-admin-item:hover .galerie-admin-suppr,
.galerie-admin-suppr:focus { opacity: 1; }
.galerie-admin-suppr:hover { background: #dc3545; }
.galerie-admin-suppr .material-symbols-outlined { font-size: 16px; }
.galerie-admin-barre {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.galerie-admin-ajout {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.galerie-admin-ajout input[type="file"] { flex: 1; min-width: 240px; }

/* ---- Glisser-déposer ----
   `cursor: grab` annonce que la vignette se saisit ; sans cet indice visuel,
   personne ne devine qu'on peut la déplacer. */
.galerie-admin-item[draggable="true"] {
    cursor: grab;
}
.galerie-admin-item[draggable="true"]:active {
    cursor: grabbing;
}
/* Les champs de saisie ne doivent PAS déclencher le glisser : sans cela,
   cliquer dans « Légende » pour la modifier emporte la vignette. */
.galerie-admin-item input {
    cursor: auto;
}
.galerie-admin-saisie {
    opacity: 0.45;
    border-color: var(--couleur-principale, #0d5aa7);
}

/* ============================================================
   pages_du_site.php — la liste des pages du menu

   Un vrai tableau, comme `formateurs.php` : ses colonnes sont NOMMÉES, ce
   qu'un simple alignement ne donne pas. Ne restent ici que les largeurs et
   les nuances propres à cette liste — la forme du tableau, elle, vient de
   `.table`, écrite une fois pour toute l'administration.
   ============================================================ */
.table-scroll {
    overflow-x: auto;
}

#menu-items-table .mi-col-poignee { width: 40px; }
#menu-items-table .mi-col-icone   { width: 34px; text-align: center; color: #555; }
#menu-items-table .mi-col-sections,
#menu-items-table .mi-col-actions { white-space: nowrap; width: 1%; }

/* En-tête « Actions » ferré à gauche, au-dessus du premier bouton.

   `!important` obligatoire, et ce n'est pas un caprice : cette feuille porte,
   ligne 14695, un `th { text-align: center !important; }` — un sélecteur
   d'élément nu, appliqué à TOUS les en-têtes de tableau de l'administration.
   Aucune règle sans `!important` ne peut le contredire, si précise soit-elle.

   Retirer ce `th` global aurait recentré — ou plutôt décentré — les en-têtes
   de toutes les listes du site d'un coup. On le contredit donc ici seulement,
   pour cette colonne. */
#menu-items-table thead th.mi-col-actions {
    text-align: left !important;
}

/* « Page », « Sous-menu » et « Bandeau » à la même largeur : trois colonnes
   de même nature — un renseignement sur la page, court et borné — n'ont pas de
   raison d'avoir des tailles différentes, et l'œil bute sur l'irrégularité.
   Seul l'intitulé garde une largeur libre : c'est le seul dont la longueur soit
   imprévisible, il absorbe donc ce qui reste.

   La largeur est posée sur l'en-tête ET sur la cellule : en `table-layout`
   automatique, le navigateur arbitre entre les deux, et une seule des deux
   déclarations le laisse libre de faire autrement. */
#menu-items-table .mi-page,
#menu-items-table .mi-sousmenu,
#menu-items-table .mi-bandeau,
#menu-items-table thead th:nth-child(4),
#menu-items-table thead th:nth-child(5),
#menu-items-table thead th:nth-child(6) {
    width: 210px;
}

#menu-items-table .mi-titre {
    font-weight: 700;
    color: #2c3e50;
}

#menu-items-table .mi-titre em {
    color: #9aa7b4;
    font-weight: 400;
}

/* Le nom du fichier sous l'intitulé de la page. C'est un identifiant
   technique, et tout identifiant technique se présente de la même façon
   dans cet écran : pastille grise, fonte à chasse fixe. La clé de contenu
   de la carte « Fichiers de page » partage donc cette règle — une seule
   définition, sinon les deux divergent à la première retouche.

   `inline-block` pour que la pastille épouse le texte au lieu de barrer
   toute la colonne ; `max-width: 100%` pour qu'elle ne puisse pas déborder
   de la cellule, la troncature restant assurée juste en dessous. */
#menu-items-table .mi-fichier,
#fichiers-pages-table .cle-contenu,
.mne-item-page {
    display: inline-block;
    max-width: 100%;
    margin-top: 3px;
    background: #f4f6f8;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #607d8b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

/* « Page » et « Sous-menu » tiennent sur UNE ligne : au-delà, le texte est
   coupé par des points de suspension. Deux lignes dans une colonne étroite
   font gonfler la rangée entière et cassent la régularité du tableau.

   La troncature porte sur l'enveloppe du texte, pas sur la cellule : une
   cellule de tableau ne se laisse pas tronquer directement, il lui faut un
   bloc intérieur qui hérite de sa largeur.

   « Bandeau » n'est pas concernée — son contenu est une phrase, elle a le
   droit de respirer sur deux lignes. */
/* `.mi-fichier` ne figure plus ici : il porte désormais sa propre
   troncature, avec le reste de sa pastille. L'y laisser aurait écrasé son
   `display: inline-block` — cette liste est écrite plus bas dans le
   fichier, elle l'emporte à spécificité égale. */
#menu-items-table .mi-page .mi-txt,
#menu-items-table .mi-sousmenu .mi-txt {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#menu-items-table .mi-sousmenu { color: #0d5aa7; }


/* ============================================================
   menu_item_edit.php — une entrée du menu sur son propre écran

   Ce qui tenait dans une modale à deux colonnes serrées respire ici : deux
   cartes, l'entrée puis son bandeau, et des champs sur deux colonnes qui se
   remettent en une seule dès que la fenêtre se réduit.
   ============================================================ */
.mie-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 24px;
}

.mie-facultatif {
    color: #999;
    font-weight: normal;
}

.mie-aide {
    display: block;
    margin-top: 6px;
    color: #666;
}

/* L'aperçu du pictogramme, à gauche de son champ : on voit ce qu'on tape
   plutôt que d'aller le vérifier sur le site. */
.mie-icone-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mie-icone-apercu {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6ecf3;
    border-radius: 8px;
    color: #0d5aa7;
    background: #f7fafd;
}

.mie-case {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* La clé de la page, rappelée en clair : c'est elle qui relie l'entrée à son
   contenu, et c'est la première chose qu'on cherche quand une page semble
   avoir perdu ses sections. */
.mie-cle {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7c8d;
}

.mie-cle code {
    background: #f0f4f8;
    border-radius: 4px;
    padding: 1px 6px;
    color: #0d5aa7;
}

.mie-upload {
    margin-top: 10px;
}

/* ------------------------------------------------------------------
   Fichiers de page — la liste des pages éditoriales de `pages_du_site.php`
   ------------------------------------------------------------------ */

#fichiers-pages-table th {
    /* Rappel : `th { text-align: center !important }` (plus haut dans cette
       feuille) centre TOUS les en-têtes de tableau de l'administration.
       Seul un autre `!important` peut le contredire. */
    text-align: left !important;
}

#fichiers-pages-table .fp-col-fichier { width: 230px; }
#fichiers-pages-table .fp-col-cle     { width: 260px; }
#fichiers-pages-table .fp-col-actions { width: 140px; }

#fichiers-pages-table .fp-col-fichier,
#fichiers-pages-table .fp-col-cle {
    white-space: nowrap;
}

/* Le nombre de sections passe sous la clé, en retrait de sa pastille :
   c'est un renseignement sur elle, pas une donnée de plus dans la colonne. */
#fichiers-pages-table .cle-sections {
    display: block;
    margin-top: 4px;
    padding-left: 6px;
    font-size: 0.8em;
    color: #90a4ae;
}

#fichiers-pages-table .fp-col-usage {
    font-size: 0.9em;
    color: #607d8b;
}

/* Entrée de menu retirée du site : la rangée s'éteint sans disparaître.
   Elle reste modifiable et déplaçable — c'est un état, pas une suppression. */
#menu-items-table tr.mi-inactif {
    opacity: 0.55;
}

/* L'intitulé barré dit la même chose une seconde fois. C'est voulu :
   l'opacité seule se confond avec une rangée sur deux d'un tableau zébré. */
#menu-items-table tr.mi-inactif .mi-titre {
    text-decoration: line-through;
    color: #8a97a4;
}

/* ---------------------------------------------------------------------
   SUR MOBILE, QUELLE COLONNE EN PREMIER
   Deux vignettes sous les modèles de mise en page. Elles reprennent
   `.pcs-modele` : même cadre, même état actif, même libellé — c'est le
   même geste, il doit avoir la même apparence.
   --------------------------------------------------------------------- */

/* Une seule colonne : il n'y a rien à ordonner. Masqué en CSS et non en
   JavaScript — `data-modele` est déjà tenu à jour par le script qui change
   de modèle, comme pour `.pcs-colonnes` juste au-dessus. */
.pcs-section[data-modele="100"] .pcs-ordre-mobile {
    display: none;
}

/* Les blocs s'empilent au lieu de se juxtaposer : c'est précisément ce que
   la vignette doit montrer — ce qui arrive aux colonnes sur un téléphone. */
.pcs-vignette-empilee {
    flex-direction: column;
}

.pcs-bloc-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: #6b7c8d;
}

.pcs-modele.actif .pcs-bloc-numero {
    color: #ffffff;
}

/* Le premier bloc est celui qui compte : c'est lui qu'on verra en haut du
   téléphone. Les suivants s'effacent, pour que la vignette se lise d'un
   coup d'œil sans avoir à déchiffrer les chiffres. */
.pcs-vignette-empilee .pcs-bloc-numero + .pcs-bloc-numero {
    opacity: .45;
}

/* Les deux réglages de disposition côte à côte : « Mise en page » et
   « Sur mobile, afficher d'abord ». Ils répondent à la même question et
   se lisent d'un même regard.

   `flex-wrap` les remet l'un sous l'autre sur un écran étroit — six
   vignettes de 130 px en font 820 avec les écarts, ce qui ne tient pas
   partout. `align-items: flex-start` évite que le bloc de gauche s'étire
   à la hauteur du second, qui porte une phrase d'explication. */
/* LES BLOCS DE DISPOSITION SE SUIVENT, TOUT SIMPLEMENT.

   Pas de flex ici, et c'est délibéré. Deux tentatives ont échoué avant
   celle-ci :

     · en flex ordinaire, les blocs se partageaient la largeur à parts
       égales — deux colonnes de force — et « Mise en page » repliait sa
       quatrième vignette alors qu'il restait de la place à côté ;
     · en flex sans rétrécissement, la rangée de vignettes DÉBORDAIT de
       son bloc et venait se poser PAR-DESSUS le bloc suivant.

   Des blocs `inline-block` s'enchaînent comme des mots dans une phrase :
   chacun prend la largeur de son contenu, et quand il n'y a plus la place
   le suivant passe à la ligne. C'est exactement le comportement voulu, et
   il n'y a rien à régler. */
.pcs-disposition > .form-group {
    display: inline-block;
    vertical-align: top;
    /* `max-content` force la largeur naturelle du bloc : ses vignettes
       tiennent donc sur une ligne. `max-width` l'empêche de dépasser son
       conteneur — dans ce cas, et dans ce cas seulement, les vignettes se
       replient entre elles plutôt que de déborder. */
    width: max-content;
    max-width: 100%;
    margin: 0 28px 10px 0;
}

/* La phrase d'explication ne s'étale pas : côte à côte, elle pousserait la
   ligne à s'élargir bien au-delà de ses deux vignettes. */
.pcs-ordre-mobile .description {
    max-width: 300px;
}

/* ---------------------------------------------------------------------
   L'INTRODUCTION D'UNE COLONNE
   Un éditeur court, au-dessus du contenu, pour annoncer un visuel, un
   formulaire ou une liste.
   --------------------------------------------------------------------- */

/* Une colonne de TEXTE a déjà son éditeur : un second au-dessus ferait
   deux champs pour la même chose. `data-type` est tenu à jour par le
   script qui bascule le type, l'affichage suit donc sans recharger. */
.pcs-colonne[data-type="texte"] .pcs-colonne-intro {
    display: none;
}

.pcs-colonne-intro {
    margin-bottom: 12px;
}

.pcs-intro-libelle {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7c8d;
}


/* ═══════════════════════════════════════════════════════════════════════
   LES IDENTIFIANTS PROFESSIONNELS DANS LA LISTE DES APPRENANTS — 25/08/2026
   ═══════════════════════════════════════════════════════════════════════
   Deux pastilles « RPPS » et « SIRET » sous le badge de statut, côte à
   côte, affichées seulement quand le numéro est renseigné.

   Plus petites et plus discrètes que le badge de statut : celui-ci dit si
   le compte fonctionne, ce qui prime ; celles-là complètent. Un même poids
   visuel aurait mis les trois sur le même plan.

   Le numéro est en infobulle, pas dans la pastille : la colonne est
   étroite, et dans une liste on lit la PRÉSENCE du numéro, pas sa valeur.
   ═══════════════════════════════════════════════════════════════════════ */

/* CÔTE À CÔTE, SANS RETOUR À LA LIGNE.
   Avec `flex-wrap: wrap`, la colonne « Statut » étant étroite, la seconde
   pastille passait dessous. `nowrap` sur le conteneur ET sur les pastilles
   augmente la largeur minimale de la cellule : le tableau, en disposition
   automatique, élargit alors la colonne tout seul. Pas besoin de lui
   imposer une largeur en dur, qui serait fausse le jour où un libellé
   change. */
/* La profession sous le nom, dans la liste des apprenants. Gris demandé
   par le client — assez présent pour se lire, assez discret pour que le
   nom reste ce qu'on parcourt d'abord. */
.ap-profession {
    margin-top: 3px;
    color: #999;
    /* 14 px contre 16 pour le nom. À 12, l'écart était trop brutal : la
       ligne se lisait comme une note de bas de page. Deux pixels de moins
       et le gris suffisent à la mettre au second plan. */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.ap-identifiants {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
    margin-top: 5px;
}

/* Les pastilles sont devenues des LIENS vers les annuaires publics
   (25/08/2026). `text-decoration: none` parce qu'un soulignement dans une
   pastille arrondie fait sale ; le survol s'assume par la couleur et le
   fond, comme n'importe quel bouton du tableau. */
.badge-identifiant {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #0d5aa7;
    background: #e7f0fa;
    border: 1px solid #cfe0f2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

/* LES PASTILLES SONT DES BOUTONS (25/08/2026) : un clic interroge le
   registre et la réponse paraît dans une infobulle. `button` et non `a`,
   parce qu'elles n'emmènent nulle part — elles agissent.

   Les liens vers les annuaires publics ont été retirés : la vérification
   donne déjà le nom, la profession et l'état d'activité. */
button.badge-identifiant {
    font-family: inherit;
    line-height: 1.2;
}

button.badge-identifiant:disabled {
    opacity: .6;
    cursor: progress;
}

/* LA RÉPONSE DU REGISTRE, dans une infobulle flottante (25/08/2026).
   ═══════════════════════════════════════════════════════════════════════
   `position: fixed` : posée par rapport à la fenêtre, elle ne pousse rien
   et rien ne la rogne — ni le `overflow` du conteneur de tableau, ni la
   cellule. Insérée dans la ligne, elle faisait grandir le tableau à chaque
   vérification et la liste se déformait sous les yeux.

   Trois états, les mêmes qu'à l'inscription : vert trouvé et concordant,
   orange trouvé avec réserve ou registre muet, rouge introuvable. Un
   administrateur et un inscrit voient la même chose du même numéro.
   ═══════════════════════════════════════════════════════════════════════ */
.ap-bulle {
    position: fixed;
    z-index: 1200;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

.ap-bulle .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.ap-bulle-attente { color: #64748b; border-color: #e2e8f0; font-style: italic; }
.ap-bulle-vert    { color: #1b6b3f; border-color: #bfe3d0; background: #f4fbf7; }
.ap-bulle-orange  { color: #8a5200; border-color: #f0dcb4; background: #fdfaf3; }
.ap-bulle-rouge   { color: #97231a; border-color: #f5c9c3; background: #fdf6f5; }

button.badge-identifiant:hover:not(:disabled),
button.badge-identifiant:focus-visible {
    color: #fff;
    background: #0d5aa7;
    border-color: #0d5aa7;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LES DEUX LISTES DE RÉFÉRENCE — 25/08/2026
   ═══════════════════════════════════════════════════════════════════════
   `.mr-` : motifs de rejet (motifs_rejet.php)
   `.pr-` : professions      (professions.php)

   Deux écrans, la même mécanique — un libellé qu'on corrige sur place, un
   code figé, des flèches d'ordre, une ligne grisée quand c'est désactivé.
   Les sélecteurs sont donc appariés plutôt que dupliqués : ce qui change
   pour l'un change pour l'autre, et les deux écrans ne peuvent pas
   diverger en silence.

   Ici et non dans un `<style>` de page : la feuille est le seul endroit
   où on cherche du CSS quand on veut le changer.
   ═══════════════════════════════════════════════════════════════════════ */
.mr-code, .pr-code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #64748b; }
    .mr-libelle-input, .pr-libelle-input { width: 100%; border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 6px; font: inherit; }
    .mr-libelle-input:hover, .pr-libelle-input:hover  { border-color: #cbd5e1; background: #fff; }
    .mr-libelle-input:focus, .pr-libelle-input:focus  { border-color: #0d5aa7; background: #fff; outline: none; }
    .mr-ordre-btns { display: inline-flex; gap: 2px; }
    .mr-ordre-btns button { background: none; border: none; cursor: pointer; color: #64748b; padding: 2px; }
    .mr-ordre-btns button:hover { color: #0d5aa7; }

/* ─── L'ORDRE DES PROFESSIONS SE RÈGLE AU GLISSÉ-DÉPOSÉ (25/08/2026) ───
   Les motifs de rejet gardent leurs flèches, ils sont cinq. Les
   professions sont seize : remonter la dernière d'un cran à la fois
   n'était pas un réglage, c'était une corvée. Même mécanique que
   « Configurer les onglets ».

   `cursor: grab` puis `grabbing` : la main ouverte dit que la ligne se
   prend, la main fermée qu'elle est tenue. Sans ce couple, rien ne
   signale qu'un glissé est possible. */
    .pr-drag-handle { color: #94a3b8; cursor: grab; user-select: none; vertical-align: middle; }
    .pr-drag-handle:hover { color: #0d5aa7; }
    .pr-drag-handle:active { cursor: grabbing; }
    .pr-dragging { opacity: .45; background: #eef4fb; }
    .pr-th-ordre { font-size: 12px; color: #94a3b8; font-weight: 500; }
    .mr-inactif td, .pr-inactif td { opacity: .55; }
    .mr-ajout, .pr-ajout { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
    .mr-ajout .form-group, .pr-ajout .form-group { flex: 1 1 340px; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   DIAGNOSTIC RPPS (diag_rpps.php) — 25/08/2026
   ═══════════════════════════════════════════════════════════════════════
   Page temporaire, styles reduits au strict necessaire. A retirer en meme
   temps que la page.
   ═══════════════════════════════════════════════════════════════════════ */
.dr-form { max-width: 460px; }

.dr-brut {
    background: #f7f7f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 12px;
    overflow-x: auto;
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CODES PROMO ATTRIBUÉS — récapitulatif d'un apprenant (25/08/2026)
   ═══════════════════════════════════════════════════════════════════════
   Le code en chasse fixe : c'est une suite de caractères qu'on recopie,
   elle se lit mieux dans une police à espacement constant — un 0 et un O
   n'y ont pas la même allure.

   La description et le détail d'usage en gris, plus petits : ils
   complètent la ligne sans concurrencer le code ni le badge.
   ═══════════════════════════════════════════════════════════════════════ */

.cp-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: .03em;
}

.cp-description {
    margin-top: 3px;
    color: #999;
    font-size: 12.5px;
    line-height: 1.3;
}

.cp-detail-usage {
    margin-top: 4px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.3;
}

/* Pourquoi le code n'a pas servi : expiré, épuisé, désactivé. En ambre,
   parce que ce n'est ni une erreur ni un simple détail — c'est ce qui
   décide s'il faut en refaire un. */
.cp-motif {
    color: #b45309;
    font-style: italic;
}

/* L'en-tête de la carte : le décompte et le bouton de création, alignés à
   droite. Le décompte disparaît quand il n'y a rien à compter, le bouton
   reste — c'est justement là qu'on veut en créer un. */
.cp-entete-droite {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cp-vide {
    margin: 0;
    padding: 6px 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ÉCRAN DE CORRESPONDANCE DES COLONNES — import.php
   ═══════════════════════════════════════════════════════════════════════
   Un tableau à trois colonnes : le champ attendu, la colonne du fichier
   qui le nourrit, et un extrait de ce qu'elle contient réellement. C'est
   ce troisième volet qui fait le travail — le nom d'une colonne se
   ressemble d'un export à l'autre, son contenu non. */

.import-carte {
    overflow-x: auto;
}

.import-carte .table td {
    vertical-align: top;
}

.import-carte .form-control {
    padding: 6px 8px;
}

/* « obligatoire » se lit comme une étiquette, pas comme une phrase :
   assez visible pour arrêter l'œil, assez discret pour ne pas crier. */
.import-obligatoire {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #fdecea;
    color: #97231a;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.import-aide {
    margin-top: 3px;
    color: #777;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

/* L'EXTRAIT EST EN CHASSE FIXE. Un décalage d'une colonne se repère à
   l'alignement bien avant qu'on ait lu les mots — une date là où on
   attend un nom saute aux yeux. */
.import-exemple {
    color: #555;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}

.import-exemple div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}

.import-exemple div + div {
    color: #8a8a8a;
}

/* Le tarif résolu, sous la liste des sessions de l'import.
   Vert quand un prix existe, ambre quand il n'y en a pas : l'absence de
   tarif n'est pas une erreur, mais elle demande une décision. */
.import-tarif {
    margin: -8px 0 18px;
    padding: 10px 14px;
    border-left: 3px solid #1b6b3f;
    border-radius: 0 4px 4px 0;
    background: #eef7f1;
    color: #1b4d31;
    font-size: 14px;
    line-height: 1.5;
}

.import-tarif.est-absent {
    border-left-color: #b8860b;
    background: #fdf6e3;
    color: #6b4f13;
}

.import-tarif div {
    margin-top: 2px;
    font-size: 13px;
    opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   LE RAPPEL DU REJET — reservation_detail.php
   ═══════════════════════════════════════════════════════════════════════
   Motif et message tels qu'ils sont partis à l'apprenant. Ambre plutôt
   que rouge : un rejet est une décision assumée, pas une erreur à
   signaler. */

.rejet-recap {
    border-left: 3px solid #b8860b;
    background: #fdf6e3;
}

.rejet-recap-titre {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: #6b4f13;
    font-size: 16px;
}

.rejet-recap-motif {
    margin: 0;
    color: #6b4f13;
    font-weight: 600;
}

/* Le message garde ses retours à la ligne : il a été écrit à la main,
   et sa mise en forme fait partie de ce qui a été dit. */
.rejet-recap-message {
    margin-top: 8px;
    color: #4a3a10;
    line-height: 1.55;
    white-space: normal;
}

/* Les choix de statut dans la modale — déplacés depuis un bloc <style>
   qui vivait dans includes/_modals_include.php. */
.statut-choix { display: flex; flex-direction: column; gap: 8px; }
.statut-choix-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.statut-choix-item:hover { background: #f8fafc; }
.statut-choix-item input { margin: 0; }
/* La bordure suit le choix : sans cela, trois lignes identiques dont une
   seule cochée se repèrent mal d'un coup d'œil. */
.statut-choix-item:has(input:checked) { border-color: #3b82f6; background: #eff6ff; }

/* ═══════════════════════════════════════════════════════════════════════
   LE CHAMP DE RECHERCHE DES LISTES LONGUES
   ═══════════════════════════════════════════════════════════════════════
   Posé par le script dans toute liste déroulante de plus de huit choix —
   celle des apprenants en compte près d'un millier.

   COLLÉ EN HAUT (`sticky`) : il reste visible pendant qu'on fait défiler
   les résultats, sinon il faudrait remonter pour affiner sa recherche. */

.select-filtre {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.select-filtre input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.select-filtre input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Le nombre de lignes encore visibles : il dit d'un coup d'œil si la
   recherche a mordu, et évite de faire défiler pour le savoir. */
.select-filtre-compte {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.select-filtre-vide {
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

/* Pendant qu'une liste déroulante est ouverte, la fenêtre laisse déborder :
   sans cela son `overflow-y: auto` rogne la liste à une ligne. Rétabli à la
   fermeture, pour qu'une fenêtre réellement haute garde son défilement. */
.modal-content.a-liste-ouverte {
    overflow: visible;
}

/* Une liste dans une fenêtre peut être un peu plus haute maintenant qu'elle
   n'est plus rognée : le champ de recherche prend déjà une ligne. */
.custom-select-modal .select-options {
    max-height: 340px;
}

/* Le champ posé AU-DESSUS du menu, et non dedans : il n'est plus collé en
   haut d'une liste déroulante, il vit dans le formulaire. */
.select-filtre-dehors {
    position: static;
    padding: 0 0 8px;
    border-bottom: 0;
    background: transparent;
}

/* La ligne qui vient d'être rattachée, désignée quelques secondes à
   l'arrivée sur la page. Un fond vert pâle qui s'efface : assez pour
   trouver la ligne du regard, pas assez pour rester dans le chemin. */
tr.vient-d-etre-ajoute > td {
    background: #e8f6ee;
    animation: vient-d-etre-ajoute 4s ease-out forwards;
}

@keyframes vient-d-etre-ajoute {
    0%   { background: #c9ead8; }
    70%  { background: #e8f6ee; }
    100% { background: transparent; }
}

/* Le mouvement est retiré pour qui a demandé à son système de les
   limiter : la couleur reste, seule la transition disparaît. */
@media (prefers-reduced-motion: reduce) {
    tr.vient-d-etre-ajoute > td { animation: none; }
}

/* Le bloc « formation rattachée » de session_edit.php : le titre en haut,
   le lien vers la formation EN BAS, la vignette à droite.

   `.view-header` aligne ses colonnes sur `flex-start` : la colonne de
   gauche ne fait donc que la hauteur de son contenu, et le lien restait
   collé sous le titre. On la fait s'étirer sur toute la hauteur du bloc —
   celle que donne le visuel — pour que `space-between` puisse pousser le
   lien jusqu'en bas.

   La règle ne vise QUE ce bloc, par `:has()` : les autres `.view-header`
   du site gardent leur alignement en haut. */
.view-section:has(.se-formation-preview-corps) {
    display: flex;
    flex-direction: column;
}

.view-header:has(.se-formation-preview-corps) {
    flex: 1;
    align-items: stretch;
}

.se-formation-preview-corps {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    /* Repli pour un navigateur sans `:has()` : le lien reste sous le
       titre plutôt que de disparaître. */
    min-height: 100%;
}

.se-formation-preview-lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}
/* ------------------------------------------------------------------ */
/* À AJOUTER dans admin/style_admin.css (juste après la règle .btn-cond-on) */
/* État actif du bouton « critère de regroupement » (icône table_rows).   */
/* ------------------------------------------------------------------ */
.btn-reg-on {
    background: #e6f6f8 !important;
    color: #0e7490 !important;
    border-color: #67cfdb !important;
}
/* =====================================================================
   Système de formulaires — imbrication à 2 niveaux (section → champ →
   options) + bouton « Ajouter une option ».
   À AJOUTER À LA FIN de admin/style_admin.css (VSR et BC Academy).
   Ajout PUR : ne modifie aucune règle existante.
   ===================================================================== */

/* Réafficher les zones de dépôt jusqu'au 2e niveau (annule le display:none
   des zones imbriquées défini plus haut dans le fichier) ; on masque
   uniquement le 3e niveau (pas d'imbrication au-delà de section → champ →
   options). */
.children-zone .children-zone                 { display: block; }
.children-zone .children-zone .children-zone  { display: none; }

/* Bouton « Ajouter une option » (listes déroulantes / boutons radio) :
   ajoute une option directement imbriquée, sans glisser/déposer. */
.extra-add-option            { display: none; margin-top: 8px; }
.extra-add-option.fb-visible { display: block; }
.btn-add-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #0d5aa7;
    background: #eef4fb;
    border: 1px dashed #9cc3e6;
    border-radius: 6px;
}
.btn-add-option:hover { background: #e2eefb; }