/**
 * Styles pour ADAPTIV' - Analyse des Données d'Admission Parcoursup à Tivoli
 * 
 * NOTE SUR LES MEDIA QUERIES :
 * Avec le viewport fixe à width=1200, l'interface reste identique quelle que soit
 * la taille de la fenêtre. Les media queries qui modifient le layout structurel
 * (grid-template-columns, flex-direction, etc.) sont commentées pour permettre
 * à l'utilisateur de zoomer/dézoomer selon ses besoins tout en gardant la même
 * interface que sur un écran desktop.
 */

:root {
    --primary-color: #4a90e2;
    --secondary-color: #7b68ee;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #212529;
    --text-muted: #6c757d;
}

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

html {
    /* Forcer le zoom proportionnel : toujours afficher comme si la fenêtre faisait 1400px */
    /* Le zoom sera calculé dynamiquement par JavaScript */
    font-size: 16px;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f7fa;
    /* Background image déplacée vers body::after pour éviter les problèmes avec background-attachment: fixed sur iPad */
    color: var(--text-color);
    line-height: 1.6;
    position: relative;
    /* Largeur normale par défaut, le JavaScript appliquera width: 1400px seulement si nécessaire */
    width: 100%;
    margin: 0 auto;
    transform-origin: top center;
    /* Le zoom sera appliqué par JavaScript pour réduire proportionnellement si fenêtre < 1400px */
}

/* Image de fond fixe - solution compatible iPad */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../parcoursup6_vert.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    pointer-events: none;
    /* Forcer la création d'un nouveau contexte de stacking pour éviter les problèmes de rendu sur iPad */
    will-change: transform;
    transform: translateZ(0);
}

/* Overlay semi-transparent pour améliorer la lisibilité */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: -1;
    pointer-events: none;
    /* Forcer la création d'un nouveau contexte de stacking pour éviter les problèmes de rendu sur iPad */
    will-change: transform;
    transform: translateZ(0);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    /* Le JavaScript appliquera le zoom si nécessaire */
    transition: transform 0.1s ease;
}

/* Header */
header {
    background: linear-gradient(135deg, #013a4f 0%, #025577 50%, #026a88 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(1, 58, 79, 0.4);
    position: relative;
    overflow: hidden;
}

/* Effet de profondeur élégant */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
}

.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

.header-left-top {
    display: flex;
    align-items: center;
    gap: 0; /* Pas de gap par défaut pour contrôle individuel */
    flex-wrap: nowrap;
}

.header-logo {
    height: 100px; /* Plus grand sur grands écrans */
    width: auto;
    object-fit: contain;
    margin-right: 1px; /* Espace minimal entre logo et séparateur */
}

.header-separator {
    width: 2px;
    height: 1em; /* Hauteur relative à la taille de la police */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8), transparent);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px; /* Léger espace après "ADAP" */
    margin-right: 8px; /* Léger espace avant "TIV'" */
    margin-top: 0;
    margin-bottom: 0;
}
.header-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px; /* Légèrement plus grand */
    height: 7px; /* Légèrement plus grand */
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.header-title {
    font-family: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.8em;
    letter-spacing: 0.5px;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: nowrap;
    gap: 0;
}

/* Styles pour ADAP - couleur Tivoli bleu (#006683) */
.title-adap {
    background: linear-gradient(135deg, #006683 0%, #0088A3 50%, #00AACC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 102, 131, 0.3);
}

/* Styles pour TIV' - couleur Tivoli beige (#bdb082) */
.title-tiv {
    background: linear-gradient(135deg, #bdb082 0%, #d4c5a0 50%, #e8dcc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(189, 176, 130, 0.3);
}

/* Accents décoratifs subtils */
.title-accent {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.title-accent-left {
    margin-right: 12px;
    margin-left: 0;
}

.title-accent-right {
    margin-left: 12px;
    margin-right: 0;
}

.title-accent svg {
    display: block;
    width: auto;
    height: 0.7em;
    max-height: 28px;
    min-height: 18px;
}

.header-title:hover .title-accent {
    opacity: 0.9;
    transform: translateY(-1px);
}
.header-title::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}

.subtitle {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    opacity: 0.9;
    margin: 0;
    padding: 0;
    margin-left: 0;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    transition: font-size 0.3s ease;
}

/* Navigation tabs - intégré dans le header - style élégant */
.header-right {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    margin-right: 0;
}

.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
}

.user-info-main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.user-name {
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

.user-role {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-header-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.btn-header-action svg {
    width: 14px;
    height: 14px;
}

.btn-header-action:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-header-action:active {
    transform: translateY(0);
}

.btn-header-action svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.btn-header-action:hover svg {
    opacity: 1;
}

.btn-logout-action {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
}

.btn-logout-action:hover {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.5);
}

.role-administrateur {
    background-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

.role-professeur {
    background-color: rgba(0, 136, 163, 0.3);
    color: #00AACC;
    border: 1px solid rgba(0, 136, 163, 0.5);
}

.role-eleve {
    background-color: rgba(189, 176, 130, 0.3);
    color: #d4c5a0;
    border: 1px solid rgba(189, 176, 130, 0.5);
}

.btn-manage-users {
    padding: 8px 16px;
    background-color: rgba(0, 136, 163, 0.3);
    color: #00AACC;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 136, 163, 0.5);
    white-space: nowrap;
}

.btn-manage-users:hover {
    background-color: rgba(0, 136, 163, 0.4);
    border-color: rgba(0, 136, 163, 0.7);
    transform: translateY(-1px);
}

.btn-logout {
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

header .tabs {
    display: flex;
    gap: 0;
    margin: 0;
    margin-left: auto;
    background: transparent;
    padding: 0;
    align-items: center;
    flex: 1;
    max-width: 100%;
    justify-content: space-between;
}

header .tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    min-width: 0;
    flex: 0 0 auto;
}

header .tab-btn:link,
header .tab-btn:visited,
header .tab-btn:hover,
header .tab-btn:active {
    text-decoration: none;
}

header .tab-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    width: 18px;
    height: 18px;
}

header .tab-btn::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

header .tab-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

header .tab-btn:hover::after {
    width: 80%;
}

header .tab-btn:hover svg {
    opacity: 1;
}

header .tab-btn.active {
    color: white;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.15);
}

header .tab-btn.active::after {
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

header .tab-btn.active svg {
    opacity: 1;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Formulaires */
.search-panel {
    /* Background inspiré de la bannière (#013a4f, #025577, #026a88) mais en version très claire */
    /* Couleurs dérivées : versions très claires des bleu-vert de la bannière */
    background: linear-gradient(135deg, #e8f2f5 0%, #f0f7fa 50%, #e8f5f8 100%);
    background-color: #ecf5f8; /* Fond de base solide avec teinte bleu-vert douce */
    padding: 10px 15px 0px 15px; /* Réduire le padding-top de 15px à 10px et padding-bottom à 0px */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(1, 58, 79, 0.12), 0 1px 3px rgba(1, 58, 79, 0.08);
    margin-bottom: 20px;
    border: 1px solid rgba(2, 85, 119, 0.25);
    transition: padding 0.3s ease, margin-bottom 0.3s ease;
    position: relative;
    overflow: visible; /* Permettre aux dropdowns de sortir de la carte */
}

/* Effet de profondeur subtil comme la bannière */
.search-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(2, 106, 136, 0.3), transparent);
    z-index: 1;
}

/* Réduire l'espace quand la carte est pliée */
.search-panel.collapsed {
    padding: 8px 15px 8px 15px;
    margin-bottom: 10px;
}

.statistics-panel {
    /* Background identique à search-panel */
    background: linear-gradient(135deg, #e8f2f5 0%, #f0f7fa 50%, #e8f5f8 100%);
    background-color: #ecf5f8; /* Fond de base solide avec teinte bleu-vert douce */
    padding: 10px 15px 15px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(1, 58, 79, 0.12), 0 1px 3px rgba(1, 58, 79, 0.08);
    margin-bottom: 20px;
    border: 1px solid rgba(2, 85, 119, 0.25);
    position: relative;
    overflow: visible;
}

/* Effet de profondeur subtil comme la bannière */
.statistics-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(2, 106, 136, 0.3), transparent);
    z-index: 1;
}

/* En-tête pliable du search-panel */
.search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 18px;
    transition: margin-bottom 0.3s ease;
}

/* Réduire l'espace sous le header quand plié */
.search-panel.collapsed .search-panel-header {
    margin-bottom: 0;
}

.search-panel-header h2 {
    margin: 0;
    flex: 1;
    font-size: 1.5em;
    font-weight: 600 !important; /* Forcer le même poids que les autres titres */
}

.search-panel-toggle-icon {
    font-size: 1.2em;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    display: inline-block;
    transform: rotate(0deg);
}

.search-panel-header:hover .search-panel-toggle-icon {
    color: var(--primary-color);
}

/* Contenu du search-panel avec transition */
.search-panel-content {
    overflow: visible; /* Permettre aux dropdowns de sortir */
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.search-panel-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
}

.search-panel-content.expanded {
    max-height: 5000px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Icône tournée quand replié - rotation supprimée pour garder les triangles droits */

.search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow: visible; /* Permettre aux dropdowns de sortir */
}

/* Pour la ligne Formation seule, prendre toute la largeur */
.form-row-formation {
    grid-template-columns: 1fr !important;
}

/* Pour la ligne Formation + Actions : Formation réduite + Actions à droite */
.form-row-formation-actions {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Supprimer complètement l'espace après la dernière ligne (boutons) */
.search-form > .form-row-formation-actions:last-child {
    margin-bottom: -20px; /* Compenser le gap de 12px du formulaire + espace supplémentaire */
    padding-bottom: 0;
}

.search-form > .form-row-formation-actions:last-child .form-actions-inline {
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-row-formation-actions .form-actions-inline {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0;
    align-items: center;
}

.formation-group-compact {
    /* Retirer les restrictions de largeur pour avoir la même largeur que les autres champs */
    overflow: visible !important; /* Permettre aux dropdowns de sortir */
}

/* S'assurer que le form-group contenant le menu formation permet l'overflow */
.formation-group-compact,
.formation-group-compact .form-group,
.formation-group {
    overflow: visible !important;
}

.formation-group-compact .formation-select {
    max-width: 100% !important;
    width: 100% !important;
}

.form-row > * {
    min-width: 0; /* Permet au contenu de se rétrécir correctement */
}

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0; /* Permet au contenu de se rétrécir correctement */
    overflow: hidden;
    flex-wrap: wrap;
}

.option-count {
    color: var(--text-muted, #6b7280);
    font-weight: normal;
    font-size: 0.9em;
    margin-left: 4px;
}

.form-group label {
    margin-bottom: 0;
    margin-right: 0;
    font-weight: 500;
    color: var(--dark-color);
    font-size: 0.95em;
    flex-shrink: 0;
    white-space: nowrap;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.checkbox-label span {
    flex: 1;
    font-weight: 500;
}

.form-help {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.4;
    font-style: italic;
}

.form-group input,
.form-group select {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.95em;
    transition: border-color 0.3s;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 200px;
}

/* Exclure les boutons radio de la règle flex: 1 */
.form-group input[type="radio"] {
    flex: none;
    min-width: auto;
    width: auto;
    padding: 0;
}

/* Limiter la largeur des selects pour éviter le débordement */
.form-group select {
    max-width: calc(1400px - 80px);
    width: 100%;
}

/* Styles pour les groupes de boutons radio Oui/Non */
.form-group .radio-group {
    display: inline-flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    flex: none;
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
    max-width: none;
}

.form-group .radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: auto;
}

.form-group .radio-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    width: auto;
}

.form-group .radio-option label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
}

/* Les champs conditionnels doivent rester en colonne et être sur une nouvelle ligne */
.form-group .conditional-field {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 12px;
    width: 100%;
}

.form-group .conditional-field .form-group {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.form-group .conditional-field label,
.form-group .conditional-field .form-group label {
    margin-bottom: 8px;
    white-space: normal;
    flex-shrink: 0;
}

/* Styles spécifiques pour la carte "Filtres de recherche" - labels au-dessus des champs */
.search-panel .form-row .form-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.search-panel .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
}

.search-panel .form-group label {
    margin-bottom: 4px;
    white-space: normal;
    flex-shrink: 0;
    width: 100%;
}

.search-panel .form-group input,
.search-panel .form-group select {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Surcharger spécifiquement les règles globales pour les selects dans search-panel */
.search-panel .form-group select {
    max-width: 100% !important;
    width: 100% !important;
}

/* S'assurer que select-with-reset prend toute la largeur dans search-panel */
.search-panel .select-with-reset {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

.search-panel .select-with-reset select,
.search-panel .select-with-reset input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Styles pour les formulaires dans l'onglet "users" - labels sur la même ligne que les champs */
.users-panel .form-group,
.users-management-container .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.users-panel .form-group label,
.users-management-container .form-group label {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.users-panel .form-group input,
.users-panel .form-group select,
.users-management-container .form-group input,
.users-management-container .form-group select {
    flex: 1 !important;
    min-width: 200px !important;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-group select option[value=""] {
    font-style: italic;
    color: var(--text-muted);
    font-weight: 500;
}

.form-group select optgroup {
    font-size: 0.8em;
    color: var(--text-muted);
    font-weight: normal;
}

.form-group select option {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Select avec bouton de réinitialisation */
.select-with-reset {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.select-with-reset select,
.select-with-reset input[type="text"] {
    flex: 1;
    padding-right: 5px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Forcer la largeur maximale pour tous les selects et inputs dans select-with-reset */
.select-with-reset select,
.select-with-reset input[type="text"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Exception pour stat-serie qui doit avoir un max-width de 200px */
#stat-serie,
.filters-bar .select-with-reset:has(#stat-serie) select {
    max-width: 200px !important;
    width: auto !important;
}

.filters-bar .select-with-reset:has(#stat-serie) {
    max-width: 200px !important;
    width: auto !important;
}

/* Groupe Formation - empêcher le débordement */
.formation-group {
    max-width: 100%;
    overflow: visible; /* Permettre aux dropdowns de sortir */
    width: 100%;
    position: relative;
}

.formation-group .select-with-reset {
    max-width: 100%;
    width: 100%;
    position: relative;
}

/* Wrapper pour contrôler le débordement du menu déroulant */
.formation-select-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.formation-select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Styles pour le dropdown de formation - permettre de sortir de la carte */
.custom-select-wrapper {
    overflow: visible !important; /* Permettre au dropdown de sortir */
}

#formation-select-dropdown {
    z-index: 10000 !important; /* Z-index très élevé pour être au-dessus de tout */
    position: absolute !important; /* Position absolute pour un positionnement relatif au conteneur */
    /* Comportement classique d'un select : s'affiche en dessous par défaut, au-dessus si nécessaire */
}

/* Empêcher le menu déroulant de déborder de la fenêtre */
select.formation-select {
    max-width: 100% !important; /* Ne pas dépasser la largeur du conteneur */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Limiter strictement la largeur du menu déroulant ouvert */
select.formation-select:focus,
select.formation-select:active,
select.formation-select[size] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Forcer la largeur du select Formation à correspondre à son conteneur */
.formation-group-compact .formation-select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Style pour les options du select Formation - permettre le retour à la ligne */
select.formation-select option {
    max-width: 100%;
    white-space: normal !important; /* Permettre le retour à la ligne */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding: 5px 8px;
    line-height: 1.4;
}

/* S'assurer que les options des selects sont visibles et que les scrollbars sont affichées */
select {
    /* Force l'affichage des scrollbars sur les menus déroulants */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--light-color);
}

select::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

select::-webkit-scrollbar-track {
    background: var(--light-color);
    border-radius: 6px;
}

select::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 2px solid var(--light-color);
}

select::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Style pour les options du select Formation (éviter le débordement et permettre retour à la ligne) */
.formation-select option {
    max-width: 100% !important;
    white-space: normal !important; /* Permettre le retour à la ligne */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding: 5px 8px;
    line-height: 1.4;
}

/* Contrainte supplémentaire pour le container du select Formation */
.formation-group .select-with-reset select.formation-select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* S'assurer que le select Formation ne dépasse jamais de son conteneur */
#formation {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Style pour le bouton de sélection de formation - même taille que les selects */
.formation-select-button {
    font-size: 0.95em !important;
    font-family: inherit !important;
    line-height: normal !important;
    /* Forcer tous les styles pour correspondre exactement aux selects */
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* S'assurer que le contenu du bouton (span) a la même taille */
.formation-select-button span {
    font-size: 0.95em !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

.btn-reset-select {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2em;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1;
    z-index: 10;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    user-select: none;
    -webkit-user-select: none;
}

.btn-reset-select:hover {
    background-color: var(--light-color);
    color: var(--danger-color);
}

.btn-reset-select:active {
    transform: translateY(-50%) scale(0.95);
    background-color: var(--light-color);
}

/* Le bouton sera géré dynamiquement par JavaScript */

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.form-actions-inline {
    margin-top: 0;
    flex-shrink: 0;
    align-items: flex-end;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}

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

.btn-primary:hover {
    background-color: #357abd;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

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

.btn-export:hover {
    background-color: #218838;
}

/* Boutons icônes export */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.btn-icon svg { width: 16px; height: 16px; display:block; }

/* Icon-only export buttons (no background, bigger icons) */
.icon-button {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.icon-button svg { width: 40px; height: 40px; display:block; }
#reset-btn svg { width: 32px; height: 32px; }
.icon-button:hover { 
    opacity: 0.85; 
    transform: scale(1.05);
}
.icon-button:active {
    transform: scale(0.95);
}

/* Styles spécifiques pour les icônes stroke (show-all, reset) - même taille que les exports */
.icon-button svg[stroke] {
    stroke: var(--primary-color);
    width: 40px;
    height: 40px;
}

#reset-btn svg[stroke] {
    stroke: var(--text-muted);
    width: 32px;
    height: 32px;
}

.icon-button:hover svg[stroke] {
    stroke: var(--primary-color);
}

#reset-btn:hover svg[stroke] {
    stroke: var(--danger-color);
}

/* Results */
.results-container {
    /* Background identique à search-panel */
    background: linear-gradient(135deg, #e8f2f5 0%, #f0f7fa 50%, #e8f5f8 100%);
    background-color: #ecf5f8; /* Fond de base solide avec teinte bleu-vert douce */
    padding: 0 30px 30px 30px; /* padding-top à 0 comme pour search-panel */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(1, 58, 79, 0.12), 0 1px 3px rgba(1, 58, 79, 0.08);
    margin-top: 20px;
    border: 1px solid rgba(2, 85, 119, 0.25);
    position: relative;
    overflow: hidden;
}

/* Effet de profondeur subtil comme la bannière */
.results-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(2, 106, 136, 0.3), transparent);
    z-index: 1;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 0; /* margin-top à 0 comme pour search-panel-header */
    margin-bottom: 20px;
    padding-top: 10px; /* padding-top à 0 */
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(2, 85, 119, 0.2);
    position: relative;
    z-index: 2; /* Au-dessus du ::before */
}

/* Titre "Résultats" avec la même taille et padding que "Filtres de recherche" */
#results-title {
    margin: 0;
    margin-top: 0; /* margin-top à 0 comme pour search-panel-header h2 */
    font-size: 1.5em; /* Même taille que search-panel-header h2 */
    padding: 0;
    font-weight: 600 !important; /* Forcer le même poids que les autres titres */
}

/* Harmoniser h3 avec h2 pour le titre "Résultats" */
.results-header h3 {
    font-size: 1.5em !important; /* Même taille que h2, avec !important pour forcer */
    margin: 0 !important;
    margin-top: 0 !important; /* margin-top à 0 */
    padding: 0;
    font-weight: 600 !important; /* Forcer le même poids que les autres titres */
    flex-shrink: 0;
}

.results-header .results-query {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 8px;
    font-size: 0.9em;
    white-space: normal;
    word-break: break-word;
}

.results-info {
    color: var(--text-muted);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.results-info #pagination-container-top {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
}

.results-info #results-count {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Table */
#results-table-container {
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-top: 20px;
}

/* Bandeau de chargement discret en haut de la carte */
.results-loading-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(74, 144, 226, 0.03) 100%);
    border-left: 3px solid var(--primary-color, #4a90e2);
    border-radius: 4px;
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--text-color, #333);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    animation: fadeIn 0.3s ease-in;
}

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

.results-loading-banner .loading-hourglass {
    font-size: 16px;
    color: var(--primary-color, #4a90e2);
    flex-shrink: 0;
}

.results-loading-banner .loading-text {
    font-weight: 500;
    flex: 1;
}

.results-loading-banner .loading-subtext {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-left: auto;
    font-style: italic;
}

/* Indicateur de tri (triangles) */
.sort-indicator {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
}

.triangles {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.tri {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.5;
}
.tri.up {
    border-bottom: 8px solid var(--text-muted);
}
.tri.down {
    border-top: 8px solid var(--text-muted);
}
.tri.active.up {
    border-bottom-color: var(--primary-color);
    opacity: 1;
}
.tri.active.down {
    border-top-color: var(--primary-color);
    opacity: 1;
}

#results-table-container table {
    width: 100%;
    min-width: 800px; /* Largeur minimum pour éviter que le tableau se compresse trop */
    border-collapse: collapse;
    table-layout: fixed;
}

/* Largeurs des colonnes en pourcentage pour éviter le défilement horizontal */
#results-table-container table th:nth-child(1),
#results-table-container table td:nth-child(1) {
    width: 3%; /* N° - réduite */
}

#results-table-container table th:nth-child(2),
#results-table-container table td:nth-child(2) {
    width: 12.5%; /* Nom Prénom - légèrement augmenté pour compenser la réduction de N° */
    padding-left: 4px; /* Padding minimal */
    padding-right: 4px; /* Padding minimal */
}

#results-table-container table th:nth-child(3),
#results-table-container table td:nth-child(3) {
    width: 3%; /* Classe - réduite au maximum */
    padding-left: 3px; /* Padding minimal */
    padding-right: 3px; /* Padding minimal */
}

#results-table-container table th:nth-child(4),
#results-table-container table td:nth-child(4) {
    width: 6%; /* Série */
}

#results-table-container table th:nth-child(5),
#results-table-container table td:nth-child(5) {
    width: 7%; /* Phase - augmentée pour afficher les badges de texte */
    padding-left: 2px; /* Padding minimal */
    padding-right: 2px; /* Padding minimal */
}

#results-table-container table th:nth-child(6),
#results-table-container table td:nth-child(6) {
    width: 18%; /* Formation */
}

#results-table-container table th:nth-child(7),
#results-table-container table td:nth-child(7) {
width: 12%; /* Établissement */
}

#results-table-container table th:nth-child(8),
#results-table-container table td:nth-child(8) {
    width: 8%; /* Type */
}

#results-table-container table th:nth-child(9),
#results-table-container table td:nth-child(9) {
    width: 8%; /* Type+ */
}

#results-table-container table th:nth-child(10),
#results-table-container table td:nth-child(10) {
    width: 12%; /* Situation */
}

#results-table-container table th:nth-child(11),
#results-table-container table td:nth-child(11) {
    width: 20%; /* Date - augmentée pour format XX/XX/XX */
    min-width: 170px; /* Largeur minimale pour garantir l'affichage complet */
    white-space: nowrap; /* Empêcher le retour à la ligne pour les dates */
    overflow: visible !important; /* Permettre l'affichage complet sans troncature */
    text-overflow: clip; /* Pas d'ellipsis, afficher le texte complet */
    padding-left: 1px; /* Padding minimal */
    padding-right: 1px; /* Padding minimal */
}

table th,
table td {
    padding: 8px; /* Padding réduit pour libérer de l'espace */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85em;
    overflow: hidden;
}

/* Permettre le retour à la ligne pour certaines colonnes importantes */
#results-table-container table td:nth-child(2), /* Nom Prénom */
#results-table-container table td:nth-child(6), /* Formation */
#results-table-container table td:nth-child(7) { /* Établissement */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Colonnes avec texte court - pas de retour à la ligne avec ellipsis */
#results-table-container table td:nth-child(1) { /* N° */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonne Phase - badge de texte avec retours à la ligne autorisés */
#results-table-container table th:nth-child(5),
#results-table-container table td:nth-child(5) { /* Phase */
    text-align: center;
    white-space: normal;
}

#results-table-container table td:nth-child(5) { /* Phase - centrer le badge sans qu'il prenne toute la largeur */
    text-align: center;
}

#results-table-container table td:nth-child(5) .phase-text {
    display: inline-block;
    text-align: center;
    overflow-wrap: anywhere;
    max-width: 70px;
}

/* Colonnes avec texte court - pas de retour à la ligne mais sans ellipsis */
#results-table-container table td:nth-child(4) { /* Série */
    white-space: nowrap;
}

/* Colonne Classe - retour à la ligne autorisé */
#results-table-container table td:nth-child(3) { /* Classe */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Colonnes avec retour à la ligne autorisé */
#results-table-container table td:nth-child(8), /* Type */
#results-table-container table td:nth-child(9) { /* Type+ */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Forcer une bordure exactement identique sur la colonne Situation */
#results-table td.situation-td {
    position: relative;
    border-bottom: none;
    text-align: center;
}
#results-table td.situation-td::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border-color);
}

table th {
    background-color: var(--light-color);
    font-weight: 600;
    color: var(--dark-color);
    position: sticky;
    top: 0;
}

table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px;
}

table th.sortable:hover {
    background-color: #e9ecef;
}

table th.sortable.sorted {
    background-color: #dee2e6;
}

table th.sortable .sort-indicator {
    position: absolute;
    right: 8px;
}

/* Alternance des lignes par élève - mieux visible */
table tbody tr.student-group-even {
    background-color: #ffffff;
}

table tbody tr.student-group-odd {
    background-color: #e3f2fd;
}

/* Alternance de couleur pour la colonne triée - Palette très variée et contrastée */
table tbody td.sort-alt-color-0,
.sort-alt-color-0 {
    color: #dc2626; /* Rouge vif */
    font-weight: 500;
}
table tbody td.sort-alt-color-1,
.sort-alt-color-1 {
    color: #0066cc; /* Bleu moyen vif */
    font-weight: 500;
}
table tbody td.sort-alt-color-2,
.sort-alt-color-2 {
    color: #00aa00; /* Vert vif */
    font-weight: 500;
}
table tbody td.sort-alt-color-3,
.sort-alt-color-3 {
    color: #ff6600; /* Orange vif */
    font-weight: 500;
}
table tbody td.sort-alt-color-4,
.sort-alt-color-4 {
    color: #8b00ff; /* Violet foncé */
    font-weight: 500;
}
table tbody td.sort-alt-color-5,
.sort-alt-color-5 {
    color: #00b3b3; /* Cyan/Turquoise */
    font-weight: 500;
}
table tbody td.sort-alt-color-6,
.sort-alt-color-6 {
    color: #cc0066; /* Magenta/Rose foncé */
    font-weight: 500;
}
table tbody td.sort-alt-color-7,
.sort-alt-color-7 {
    color: #009900; /* Vert foncé */
    font-weight: 500;
}
table tbody td.sort-alt-color-8,
.sort-alt-color-8 {
    color: #cc3300; /* Rouge brique */
    font-weight: 500;
}
table tbody td.sort-alt-color-9,
.sort-alt-color-9 {
    color: #0033cc; /* Bleu royal */
    font-weight: 500;
}
/* Pour les valeurs au-delà de 10, on répète les couleurs avec un modulo */
table tbody td.sort-alt-color {
    color: #dc2626; /* Rouge par défaut */
    font-weight: 500;
}

table td {
    font-size: 0.9em;
}

/* Colonne de numérotation */
table td:first-child {
    text-align: center;
    font-weight: 500;
    color: var(--text-muted);
    width: 50px;
    min-width: 50px;
    background-color: var(--light-color);
}
.formation-info {
    margin-right: 6px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--primary-color);
    border-radius: 3px;
    font-size: 0.85em;
    padding: 0 6px;
    cursor: pointer;
}
.formation-info:hover {
    background: var(--light-color);
}

/* Modal générique */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100010 !important; /* Au-dessus du header (10000) et des menus déroulants (100000+) */
    /* S'assurer que le backdrop est toujours centré par rapport au viewport */
    margin: 0;
    padding: 0;
}
.modal {
    background: #fff;
    width: min(700px, calc(1400px * 0.92));
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 100011 !important; /* Au-dessus du backdrop (100010) */
    /* Le zoom sera appliqué par JavaScript pour correspondre au zoom du container */
}
.modal-header {
    padding: 12px 16px;
    background: var(--light-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-body { padding: 16px; overflow: auto; max-height: calc(90vh - 56px); }
.modal-body ul { padding-left: 18px; margin-left: 0; list-style: disc inside; }
.modal-body li { margin: 2px 0; }
.modal-close {
    border: none; background: transparent; font-size: 1.2em; cursor: pointer;
}

table th:first-child {
    background-color: var(--light-color);
    text-align: center;
}

/* Tableau des Licences */
.licences-table-container {
    margin-top: 20px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.licences-table-container h4 {
    margin: 1em 0 10px 0;
    padding: 15px;
    background-color: var(--light-color);
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 1.1em;
}

.licences-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.licences-table thead {
    background-color: var(--light-color);
    position: sticky;
    top: 0;
    z-index: 2;
}

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

.licences-table tbody tr:hover {
    background-color: rgba(74, 144, 226, 0.1);
}

.licences-table td:first-child {
    word-wrap: break-word;
    word-break: break-word;
    max-width: 0;
}

/* Boutons flottants pour navigation rapide */
.floating-nav {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.floating-nav-btn:hover {
    transform: translateY(-2px);
    opacity: 1;
    /* Les styles de hover spécifiques sont dans .scroll-top:hover et .scroll-bottom:hover */
}

.floating-nav-btn:active {
    transform: translateY(0);
}

.floating-nav-btn.scroll-top {
    background: linear-gradient(135deg, #026a88 0%, #025577 100%); /* Dégradé harmonieux avec la bannière */
    box-shadow: 0 4px 12px rgba(2, 90, 119, 0.4); /* Ombre avec la couleur de la bannière */
}

.floating-nav-btn.scroll-bottom {
    background: linear-gradient(135deg, #025577 0%, #013a4f 100%); /* Dégradé inverse pour distinction */
    box-shadow: 0 4px 12px rgba(1, 58, 79, 0.4); /* Ombre avec la couleur foncée de la bannière */
}

.floating-nav-btn.scroll-top:hover {
    background: linear-gradient(135deg, #027fa3 0%, #03718f 100%); /* Version plus claire au survol */
    box-shadow: 0 6px 16px rgba(2, 90, 119, 0.5);
}

.floating-nav-btn.scroll-bottom:hover {
    background: linear-gradient(135deg, #03718f 0%, #025577 100%); /* Version plus claire au survol */
    box-shadow: 0 6px 16px rgba(1, 58, 79, 0.5);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

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

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

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

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

.badge-other {
    background-color: #e9ecef;
    color: #495057;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.pagination button {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .page-info {
    margin: 0 15px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    white-space: nowrap;
}

.pagination .page-select {
    width: 70px;
    text-align: center;
    margin: 0 5px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    background: white;
    cursor: pointer;
}

.pagination .page-select:hover {
    border-color: var(--primary-color);
}

.pagination .page-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Statistics */
.filters-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Style spécifique pour l'onglet cartes-formations : champ de recherche sur sa propre ligne */
#cartes-formations-tab .filters-bar {
    display: block !important;
}

#cartes-formations-tab .filters-bar > .custom-select-wrapper:first-child {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    clear: both !important;
}

/* Styles pour le multiselect personnalisé */
.custom-multiselect-wrapper {
    position: relative;
    min-width: 200px;
    overflow: visible;
}

.custom-multiselect {
    position: relative;
    width: 100%;
}

.multiselect-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    min-height: 38px;
    transition: all 0.2s ease;
}

.multiselect-trigger:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.multiselect-trigger.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.multiselect-text {
    flex: 1;
    color: var(--text-color);
    font-size: 14px;
}

.multiselect-text.has-selection {
    color: var(--text-color);
    font-weight: 500;
}

.multiselect-arrow {
    margin-left: 8px;
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s ease;
}

.multiselect-trigger.active .multiselect-arrow {
    transform: rotate(180deg);
}

.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

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

.multiselect-options {
    padding: 4px 0;
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.multiselect-option:hover {
    background-color: #f5f7fa;
}

.multiselect-option input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.multiselect-option span {
    flex: 1;
    font-size: 14px;
    color: var(--text-color);
}

.multiselect-option input[type="checkbox"]:checked + span {
    font-weight: 500;
    color: var(--primary-color);
}
    margin-bottom: 20px;
    padding: 15px;
    background-color: transparent; /* Transparent pour la section Filtres */
    border-radius: 5px;
    flex-wrap: nowrap;
}

.filters-bar label {
    font-weight: 500;
    margin-right: 5px;
    font-size: 1em;
    white-space: nowrap;
}

.filters-bar select {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.95em;
    min-width: 150px;
    flex-shrink: 1;
    transition: padding 0.3s ease, font-size 0.3s ease;
}

.filters-bar .select-with-reset select {
    padding-right: 50px !important;
}

/* Ajuster le padding-right pour stat-serie et stat-phase pour éviter que la croix dépasse sur la flèche */
#stat-serie,
#stat-phase {
    padding-right: 55px !important;
}

/* Ajuster la position de la croix pour stat-serie et stat-phase */
.select-with-reset:has(#stat-serie) .btn-reset-select,
.select-with-reset:has(#stat-phase) .btn-reset-select {
    right: 12px;
}

#stat-serie {
    max-width: 200px !important;
    width: auto !important;
}

.filters-bar .select-with-reset:has(#stat-serie),
.filters-bar .select-with-reset:has(#stat-serie) select {
    max-width: 200px !important;
    width: auto !important;
}

.filters-bar label {
    flex-shrink: 0;
}

.filters-bar button {
    flex-shrink: 0;
    white-space: nowrap;
}

.stats-grid {
    display: flex;
    flex-wrap: nowrap; /* Forcer toutes les cartes sur une seule ligne */
    gap: 20px; /* Plus d'espace sur grands écrans */
    margin-bottom: 30px;
}

/* Les 3 premières cartes blanches doivent avoir la même largeur que les 3 premières cartes jaunes */
/* Les cartes jaunes sont dans .stats-grid-acceptes avec gap: 15px et flex: 1 1 0 */
/* Si on a 3 cartes jaunes : largeur = (largeur conteneur - 2 * 15px) / 3 */
/* Les cartes blanches sont dans .stats-grid avec gap: 20px */
/* Le problème : le 100% dans calc() fait référence au conteneur direct (.stats-grid), pas au parent */
/* Solution : utiliser une largeur qui correspond exactement à celle des cartes jaunes */
/* Si les deux conteneurs ont le même parent et la même largeur, on peut utiliser directement */
/* Mais il faut tenir compte que .stats-grid a gap: 20px, donc on doit ajuster */
/* Approche : utiliser la même formule que pour les cartes jaunes, en supposant que les conteneurs ont la même largeur */
.stats-grid .stat-card:not(.stat-card-wide) {
    /* Les cartes jaunes : 6 cartes avec gap: 15px, donc chaque carte = (100% - 5 * 15px) / 6 */
    /* Les 3 premières cartes blanches doivent avoir la même largeur qu'une carte jaune */
    /* Ajustement : réduire légèrement pour compenser les différences de padding/margin entre conteneurs */
    flex: 0 0 calc(((100% - 5 * 15px) / 6) - 2px);
    min-width: 0;
}

/* Carte large : prend la largeur restante après les 3 premières cartes */
.stats-grid .stat-card.stat-card-wide {
    flex: 1 1 auto; /* Prend tout l'espace restant après les 3 premières cartes et leurs gaps */
    padding: 18px; /* Même padding que les autres cartes pour avoir la même hauteur */
    margin-top: 0; /* S'assurer qu'il n'y a pas de margin-top différent */
}

/* Utiliser les mêmes espacements que les autres cartes */
.stats-grid .stat-card.stat-card-wide .stat-value {
    font-size: 1.8em; /* Réduire la taille du pourcentage */
    margin-bottom: 8px; /* Même espacement que les autres cartes */
    line-height: 1.1;
}

.stats-grid .stat-card.stat-card-wide h3 {
    font-size: 0.85em;
    margin-bottom: 4px; /* Même espacement que les autres cartes */
    margin-top: 0;
    font-weight: 600;
}

.stats-grid .stat-card.stat-card-wide .stat-percentage {
    font-size: 0.85em;
    margin-top: 4px; /* Même espacement que les autres cartes */
    color: var(--text-muted, #6b7280);
}

/* Réduire l'espacement dans les détails de la carte large */
.stats-grid .stat-card.stat-card-wide .stat-card-details {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Réduit de 6px à 3px pour diminuer la hauteur */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.stats-grid .stat-card.stat-card-wide .stat-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 6px; /* Réduit le padding vertical de 4px à 2px */
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    gap: 12px; /* Ajouter un espace entre le label et la valeur */
}

.stats-grid .stat-card.stat-card-wide .stat-detail-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 500;
    flex-shrink: 0; /* Empêcher le label de rétrécir */
}

.stats-grid .stat-card.stat-card-wide .stat-detail-icon {
    font-size: 14px;
}

.stats-grid .stat-card.stat-card-wide .stat-detail-value {
    text-align: right;
    font-size: 0.85em;
    white-space: nowrap; /* Garder le % et le nombre sur la même ligne */
}

.stats-grid .stat-card.stat-card-wide .stat-detail-value strong {
    font-size: 0.95em;
}

.stats-grid .stat-card.stat-card-wide .stat-detail-count {
    font-size: 0.75em;
    opacity: 0.8;
    margin-left: 4px; /* Petit espace entre le % et le nombre */
}

/* Aligner verticalement le % et le nombre de candidats dans la partie principale */
.stats-grid .stat-card.stat-card-wide > div[style*="display: flex"] > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.stats-grid .stat-card {
    min-width: 0; /* Permet aux cartes de rétrécir si nécessaire et d'éviter les débordements */
    max-width: 100%;
    padding: 18px; /* Plus de padding sur grands écrans */
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.stats-grid .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Icône dans les cartes (devant les titres) */
.stats-grid .stat-card h3 .stat-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 1.6em; /* Augmenté de 1em à 1.6em */
    vertical-align: middle;
    line-height: 1;
}

/* Tailles augmentées sur grands écrans */
.stats-grid .stat-card .stat-value {
    font-size: 2.3em; /* Plus grand sur grands écrans */
    font-weight: 700;
    margin-bottom: 8px; /* Espacement avec le titre */
    line-height: 1.1;
}

.stats-grid .stat-card h3 {
    font-size: 0.9em; /* Plus grand sur grands écrans */
    margin-bottom: 4px; /* Espacement réduit car le nombre est maintenant au-dessus */
    margin-top: 0;
    font-weight: 600;
}

.stats-grid .stat-card .stat-percentage {
    font-size: 0.9em; /* Plus grand sur grands écrans */
    color: var(--text-muted, #6b7280);
    margin-top: 4px;
}

/* Nouvelles cartes pour les pourcentages d'acceptés par catégorie */
.stats-grid-acceptes {
    display: flex;
    flex-wrap: nowrap; /* Forcer toutes les cartes sur une seule ligne */
    gap: 15px;
    align-items: stretch; /* Uniformiser la hauteur de toutes les cartes */
    margin-bottom: 25px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 3px solid #e5e7eb;
    overflow-x: auto; /* Permettre le défilement horizontal si nécessaire */
}

.stats-grid-acceptes .stat-card-acceptes {
    flex: 1 1 0; /* Chaque carte prend une part égale de l'espace disponible */
    min-width: 0; /* Permet aux cartes de rétrécir si nécessaire pour tenir sur une ligne */
    max-width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch; /* S'étirer pour correspondre à la hauteur des autres cartes */
    overflow: visible;
    word-wrap: break-word;
}

.stats-grid-acceptes .stat-card-acceptes:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    border-color: #d97706;
}

.stats-grid-acceptes .stat-card-acceptes h3 {
    font-size: 1.1em;
    margin-bottom: 4px;
    margin-top: 0;
    font-weight: 600;
    color: var(--text-color, #1f2937);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.stats-grid-acceptes .stat-card-acceptes h3 .stat-icon-acceptes {
    display: inline-block;
    margin-right: 6px;
    font-size: 1.6em;
    vertical-align: middle;
    line-height: 1;
}

/* Conteneur pour le pourcentage et le nombre d'élèves sur la même ligne */
.stats-grid-acceptes .stat-card-acceptes .stat-value-wrapper {
    display: flex;
    align-items: baseline; /* Aligner sur la ligne de base */
    justify-content: space-between; /* Aligner le pourcentage à gauche et le nombre d'élèves à droite */
    margin-bottom: 6px;
    flex-wrap: wrap; /* Permettre le retour à la ligne si nécessaire */
}

.stats-grid-acceptes .stat-card-acceptes .stat-value-acceptes {
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.1;
    color: #d97706;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    flex-shrink: 0; /* Empêcher le pourcentage de rétrécir */
}

.stats-grid-acceptes .stat-card-acceptes .stat-percentage-acceptes {
    font-size: 0.85em;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    flex-shrink: 1; /* Permettre au nombre d'élèves de rétrécir si nécessaire */
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategories {
    margin-top: 10px;
    padding-top: 12px;
    padding-bottom: 10px; /* Ajouter du padding en bas pour l'espacement avec la bordure */
    min-width: 0;
    overflow: visible;
    position: relative;
    flex-grow: 1; /* Permettre aux sous-catégories de prendre l'espace restant pour uniformiser la hauteur */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Séparateur horizontal élégant avec dégradé */
.stats-grid-acceptes .stat-card-acceptes .stat-subcategories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(217, 119, 6, 0.1) 0%, 
        rgba(217, 119, 6, 0.4) 50%, 
        rgba(217, 119, 6, 0.1) 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* Uniformiser tous les liserés des cartes jaunes */
.stats-grid-acceptes .stat-card-acceptes .stat-subcategories > div {
    border-top-color: #e5e7eb !important;
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
    font-size: 0.75em;
    color: var(--text-color, #1f2937);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    position: relative;
    padding-top: 8px;
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategory:first-child {
    padding-top: 0;
}

/* Séparateur horizontal entre les catégories (similaire à celui sous le %) */
.stats-grid-acceptes .stat-card-acceptes .stat-subcategory:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        rgba(217, 119, 6, 0.1) 0%, 
        rgba(217, 119, 6, 0.4) 50%, 
        rgba(217, 119, 6, 0.1) 100%);
    border-radius: 1px;
    pointer-events: none;
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategory-exemples {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 3px;
    padding-left: 0;
    font-weight: 400;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    line-height: 1.4;
}

/* Styles pour toutes les listes d'exemples dans les cartes jaunes */
.stats-grid-acceptes .stat-card-acceptes .stat-exemples-list,
.stats-grid-acceptes .stat-card-acceptes ul.stat-exemples-list {
    margin: 4px 0 0 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    display: block !important;
}

.stats-grid-acceptes .stat-card-acceptes .stat-exemples-list li,
.stats-grid-acceptes .stat-card-acceptes ul.stat-exemples-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.4;
    margin-bottom: 2px;
    display: block !important;
    position: relative;
    padding-left: 16px !important;
    margin-left: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 3px;
    padding-right: 4px;
    margin-right: -4px;
}

.stats-grid-acceptes .stat-card-acceptes .stat-exemples-list li::before,
.stats-grid-acceptes .stat-card-acceptes ul.stat-exemples-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
    transition: all 0.2s ease;
}

/* Effet de survol discret pour les exemples avec tooltip */
.stats-grid-acceptes .stat-card-acceptes .stat-exemples-list li[data-tooltip]:hover,
.stats-grid-acceptes .stat-card-acceptes ul.stat-exemples-list li[data-tooltip]:hover {
    background-color: rgba(217, 119, 6, 0.08);
    color: #78350f;
    cursor: help;
}

.stats-grid-acceptes .stat-card-acceptes .stat-exemples-list li[data-tooltip]:hover::before,
.stats-grid-acceptes .stat-card-acceptes ul.stat-exemples-list li[data-tooltip]:hover::before {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.4);
    transform: translateY(-50%) scale(1.2);
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-eleves {
    color: var(--text-muted);
    font-size: 0.85em;
    white-space: nowrap;
    flex-shrink: 0;
}

.stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-icon {
    font-size: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Styles pour les cartes jaunes pliables */
.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card {
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 110px; /* Hauteur minimale pour les cartes repliées */
    flex: 1 1 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card.expanded {
    min-height: auto; /* Laisser flex gérer la hauteur */
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header {
    flex-shrink: 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-content {
    flex: 1 1 auto;
    min-height: 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header {
    padding: 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 110px; /* Hauteur minimale pour uniformiser les en-têtes */
    height: 110px; /* Hauteur fixe pour uniformiser tous les en-têtes */
    max-height: 110px; /* Hauteur maximale pour forcer la hauteur */
    overflow: hidden; /* Empêcher le contenu de dépasser */
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card.expanded .yellow-card-header {
    height: 110px !important; /* Même hauteur fixe en mode déplié */
    max-height: 110px !important; /* Forcer la hauteur maximale */
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    border-color: #d97706;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header h3 {
    /* Utiliser exactement les mêmes styles que les cartes normales */
    font-size: 0.95em;
    margin-bottom: 4px;
    margin-top: 0;
    font-weight: 600;
    color: var(--text-color, #1f2937);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    line-height: 1.2;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header h3 .stat-title-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-left: 0;
    padding-left: 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header h3 .stat-icon-acceptes {
    /* Utiliser exactement les mêmes styles que les cartes normales */
    display: inline-block;
    margin-right: 6px;
    font-size: 1.5em;
    vertical-align: top;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0;
    align-self: flex-start;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header {
    position: relative;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header .yellow-card-toggle {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #d97706;
    font-weight: bold;
    font-size: 1.1em;
    transition: transform 0.3s ease;
    display: inline-block;
    line-height: 1;
    z-index: 1;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header .stat-value-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-bottom: 0;
    flex-wrap: nowrap;
    gap: 15px;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header .stat-value-acceptes {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.1;
    color: #d97706;
    white-space: nowrap;
    flex-shrink: 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-header .stat-percentage-acceptes {
    font-size: 0.85em;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}


.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-content {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
    transition: max-height 0.3s ease, padding 0.3s ease;
    margin-top: -2px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-content .stat-subcategories {
    flex: 1 1 auto;
    min-height: 100%;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card .yellow-card-content .stat-subcategories {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.stats-grid-acceptes .stat-card-acceptes.collapsible-yellow-card.expanded .yellow-card-content {
    border-top: 2px solid rgba(217, 119, 6, 0.2);
}

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Pour les très petits écrans */
/*
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes = 3 lignes équilibrées */
        gap: 12px; /* Légèrement augmenté */
    }
    
    .stats-grid .stat-card {
        padding: 14px; /* Légèrement augmenté */
    }
    
    .stats-grid .stat-card h3 .stat-icon {
        margin-right: 5px;
        font-size: 1.5em; /* Augmenté proportionnellement (0.95em × 1.6 ≈ 1.5em) */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.78em; /* Légèrement augmenté */
        margin-bottom: 7px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 1.7em; /* Légèrement augmenté */
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.82em; /* Légèrement augmenté */
    }
    
    /* Nouvelles cartes acceptés sur petits écrans */
    .stats-grid-acceptes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes {
        padding: 8px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 {
        font-size: 0.95em;
        margin-bottom: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 .stat-icon-acceptes {
        font-size: 1.5em;
        margin-right: 5px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-value-acceptes {
        font-size: 1.4em;
        margin-bottom: 2px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-percentage-acceptes {
        font-size: 0.72em;
        margin-bottom: 5px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategories {
        margin-top: 5px;
        padding-top: 5px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
        font-size: 0.7em;
        margin-top: 2px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-icon {
        font-size: 1em;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Media query pour écrans moyens (tablettes et petits ordinateurs) */
/*
@media (min-width: 769px) and (max-width: 1023px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonnes = 2 lignes équilibrées */
        gap: 16px;
    }
    
    .stats-grid .stat-card {
        padding: 16px;
    }
    
    .stats-grid .stat-card h3 .stat-icon {
        margin-right: 6px;
        font-size: 1.6em; /* Augmenté de 1em à 1.6em */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.85em;
        margin-bottom: 9px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2em;
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.87em;
    }
    
    /* S'assurer que le container utilise sa valeur par défaut jusqu'à 1023px */
    .container {
        max-width: 1400px; /* Valeur par défaut jusqu'à 1023px */
        padding: 20px;
    }
    
    /* Filtres responsive pour écrans moyens */
    .filters-bar {
        gap: 8px;
        padding: 13px;
    }
    
    .filters-bar label {
        font-size: 0.95em;
    }
    
    .filters-bar select {
        padding: 7px;
        font-size: 0.93em;
        min-width: 140px;
    }
    
    .custom-select-wrapper {
        min-width: 180px;
    }
    
    .custom-select-button {
        padding: 7px 28px 7px 7px;
        font-size: 0.93em;
    }
    
    .custom-select-dropdown {
        font-size: 0.93em;
    }
    
    /* Nouvelles cartes acceptés sur écrans moyens */
    .stats-grid-acceptes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes {
        padding: 10px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 {
        font-size: 1em;
        margin-bottom: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 .stat-icon-acceptes {
        font-size: 1.6em;
        margin-right: 6px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-value-acceptes {
        font-size: 1.6em;
        margin-bottom: 2px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-percentage-acceptes {
        font-size: 0.75em;
        margin-bottom: 5px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategories {
        margin-top: 5px;
        padding-top: 5px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
        font-size: 0.7em;
        margin-top: 2px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-icon {
        font-size: 1.05em;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Media query pour écrans 14 pouces (1024px - 1399px) */
/*
@media (min-width: 1024px) and (max-width: 1399px) {
    .stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 colonnes = 1 ligne si possible */
        gap: 18px;
    }
    
    /* Forcer 3 colonnes pour les cartes jaunes dans cette plage */
    .stats-grid-acceptes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }
    
    .stats-grid .stat-card {
        padding: 17px;
    }
    
    .stats-grid .stat-card h3 .stat-icon {
        margin-right: 6px;
        font-size: 1.6em; /* Augmenté de 1em à 1.6em */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.87em;
        margin-bottom: 9px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.15em;
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.88em;
    }
    
    /* Nouvelles cartes acceptés sur écrans 14 pouces - rester en 3 colonnes pour éviter la troncature */
    /* (déjà défini plus haut dans cette media query) */
    
    .stats-grid-acceptes .stat-card-acceptes {
        padding: 10px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 {
        font-size: 1.05em;
        margin-bottom: 4px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 .stat-icon-acceptes {
        font-size: 1.6em;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-value-acceptes {
        font-size: 1.8em;
        margin-bottom: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-percentage-acceptes {
        font-size: 0.8em;
        margin-bottom: 6px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategories {
        margin-top: 6px;
        padding-top: 6px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
        font-size: 0.75em;
        margin-top: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-icon {
        font-size: 1.1em;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Pour les très grands écrans, permettre plus de cartes sur une ligne */
/*
@media (min-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 colonnes = 1 ligne */
        gap: 22px;
    }
    
    .stats-grid .stat-card {
        padding: 20px;
    }
    
    .stats-grid .stat-card h3 .stat-icon {
        margin-right: 7px;
        font-size: 1.7em; /* Augmenté proportionnellement (1.05em × 1.6 ≈ 1.7em) */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.92em;
        margin-bottom: 11px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.4em;
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.92em;
    }
    
    /* Nouvelles cartes acceptés sur très grands écrans - rester en 3 colonnes jusqu'à 1800px pour éviter la troncature */
    .stats-grid-acceptes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes {
        padding: 12px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 {
        font-size: 1.15em;
        margin-bottom: 4px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes h3 .stat-icon-acceptes {
        font-size: 1.7em;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-value-acceptes {
        font-size: 2em;
        margin-bottom: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-percentage-acceptes {
        font-size: 0.85em;
        margin-bottom: 6px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategories {
        margin-top: 6px;
        padding-top: 6px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
        font-size: 0.8em;
        margin-top: 3px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory .stat-sub-icon {
        font-size: 1.15em;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Pour les écrans très larges (1800px et plus), passer à 6 colonnes pour les cartes jaunes */
/*
@media (min-width: 1800px) {
    .stats-grid-acceptes {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
    }
    
    .stats-grid-acceptes .stat-card-acceptes .stat-subcategory {
        font-size: 0.8em;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Transition progressive autour de 1399-1400px pour éviter les sauts visuels */
/*
@media (min-width: 1395px) and (max-width: 1405px) {
    /* Zone de transition fluide entre 1395px et 1405px */
    html {
        font-size: 14px; /* Valeur intermédiaire entre 12px (1399px) et 16px (1400px) */
    }
    
    /* Transition progressive du container pour éviter le saut de largeur */
    .container {
        max-width: 97%; /* Transition progressive de 95% (1399px) vers 1400px (1400px+) */
        padding: 18px; /* Transition progressive de 17px vers 20px */
    }
    
    .header-logo {
        height: 78px; /* Valeur intermédiaire entre 75px (1399px) et 85px (1400px) */
    }
    
    .header-separator {
        height: 1em; /* Hauteur relative à la taille de la police */
        margin-left: 8px; /* Léger espace après "ADAP" */
        margin-right: 8px; /* Léger espace avant "TIV'" */
    }
    
    .header-separator::before {
        width: 6.75px;
        height: 6.75px;
    }
    
    /* Transition progressive du titre */
    .header-title {
        font-size: 2.35em; /* Valeur intermédiaire : 2.35em * 14px = ~33px, proche de 32px */
    }
    
    .subtitle {
        font-size: 0.91em; /* Valeur intermédiaire pour la transition */
        margin-top: 0;
        white-space: normal;
        line-height: 1.3;
        word-wrap: break-word;
    }
    
    /* Transition progressive des stats-grid pour éviter les sauts */
    .stats-grid {
        gap: 19px; /* Valeur intermédiaire entre 18px (1399px) et 22px (1400px) */
    }
    
    .stats-grid .stat-card {
        padding: 18px; /* Valeur intermédiaire entre 17px (1399px) et 20px (1400px) */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.89em; /* Valeur intermédiaire entre 0.87em (1399px) et 0.92em (1400px) */
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.275em; /* Valeur intermédiaire entre 2.15em (1399px) et 2.4em (1400px) */
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.90em; /* Valeur intermédiaire entre 0.88em (1399px) et 0.92em (1400px) */
    }
}

    /* Media query pour écrans grands (1400px - 1919px) pour éviter le retour au style par défaut */
    /* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
       IMPORTANT: Placée après la zone de transition pour que les valeurs finales l'emportent après 1405px */
    /* UNIFIÉ : seuil à 1400px pour tous les changements (container, header, stats-grid) */
    /*
    @media (min-width: 1400px) and (max-width: 1919px) {
        /* Restaurer la taille de base normale */
        html {
            font-size: 16px; /* Restaurer la taille normale (pas de zoom) */
        }
        
        /* Container : retour à la largeur maximale normale */
        .container {
            max-width: 1400px; /* Largeur maximale standard */
            padding: 20px; /* Padding standard */
        }
        
        .header-left-top {
            gap: 0;
        }
        
        /* Transition progressive depuis 1400px */
        /* À 1400-1405px : la media query de transition (1395-1405px) prend priorité */
        /* À partir de 1406px : ces valeurs s'appliquent */
        .header-logo {
            height: 85px; /* Valeur finale après transition progressive */
            margin-right: 1px;
        }
        
        .header-separator {
            height: 1em; /* Hauteur relative à la taille de la police */
            margin-left: 8px; /* Léger espace après "ADAP" */
            margin-right: 8px; /* Léger espace avant "TIV'" */
        }
        .header-separator::before {
            width: 7px;
            height: 7px;
        }
        
        /* Ajuster le titre pour compenser le retour à font-size: 16px */
        /* À 1399px : titre 2.67em * 12px = 32px */
        /* À 1400px : on veut ~32px = 2em * 16px */
        /* Transition progressive : utiliser une valeur légèrement supérieure à 2em pour une transition plus fluide */
        .header-title {
            font-size: 2.05em; /* Légèrement plus grand que 2em pour transition fluide */
        }
        
        .subtitle {
            font-size: 0.95em; /* Cohérent avec font-size: 16px */
            margin-top: 0;
            white-space: normal;
            line-height: 1.3;
            word-wrap: break-word;
        }
    
    /* Boutons tab pour écrans grands */
    header .tab-btn {
        padding: 13px 26px;
        font-size: 0.98em;
        letter-spacing: 0.7px;
    }
    
    /* Filtres responsive pour écrans grands */
    .filters-bar {
        gap: 10px;
        padding: 15px;
    }
    
    .filters-bar label {
        font-size: 0.97em;
    }
    
    .filters-bar select {
        padding: 8px;
        font-size: 0.96em;
        min-width: 160px;
    }
    
    .custom-select-wrapper {
        min-width: 220px;
    }
    
    .custom-select-button {
        padding: 8px 30px 8px 8px;
        font-size: 0.96em;
    }
    
    .custom-select-dropdown {
        font-size: 0.96em;
    }
    
    /* Cartes stats pour écrans grands */
    .stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* Assurer 6 colonnes */
        gap: 23px;
    }
    
    .stats-grid .stat-card {
        padding: 21px;
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.94em;
        margin-bottom: 12px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.5em;
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.94em;
    }
}
    */

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
   Pour les très grands écrans (> 1920px), augmenter encore plus les tailles du header */
/*
@media (min-width: 1920px) {
    .header-left-top {
        gap: 0;
    }
    
    .header-logo {
        height: 120px;
        margin-right: 2px;
    }
    
    .header-separator {
        height: 1em; /* Hauteur relative à la taille de la police */
        margin-left: 8px; /* Léger espace après "ADAP" */
        margin-right: 8px; /* Léger espace avant "TIV'" */
    }
    .header-separator::before {
        width: 8px;
        height: 8px;
    }
    
    .header-title {
        font-size: 2.8em;
    }
    
    .subtitle {
        font-size: 1.05em; /* Plus grand sur très grands écrans */
        white-space: normal;
        line-height: 1.3;
        word-wrap: break-word;
    }
    
    /* Boutons tab pour très grands écrans */
    header .tab-btn {
        padding: 16px 32px;
        font-size: 1.05em;
        letter-spacing: 1px;
    }
    
    /* Filtres responsive pour très grands écrans */
    .filters-bar {
        gap: 12px;
        padding: 18px;
    }
    
    .filters-bar label {
        font-size: 1.05em;
    }
    
    .filters-bar select {
        padding: 10px;
        font-size: 1.02em;
        min-width: 180px;
    }
    
    .custom-select-wrapper {
        min-width: 250px;
    }
    
    .custom-select-button {
        padding: 10px 32px 10px 10px;
        font-size: 1.02em;
    }
    
    .custom-select-dropdown {
        font-size: 1.02em;
    }
    
    /* Cartes stats pour très grands écrans */
    .stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* Assurer 6 colonnes */
        gap: 25px;
    }
    
    .stats-grid .stat-card {
        padding: 24px;
    }
    
    .stats-grid .stat-card h3 {
        font-size: 1em;
        margin-bottom: 14px;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.7em;
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.98em;
    }
}

/* Les cartes après le tableau de répartition doivent prendre toute la largeur */
.stats-block + .chart-container .stat-card,
.chart-container:has(+ .stats-block) ~ .chart-container .stat-card,
.chart-container .stat-card {
    width: 100%;
    max-width: 100%;
}

/* S'assurer que stats-block prend toute la largeur */
.stats-block {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 10px;
    grid-column: 1 / -1; /* si jamais inséré dans une grille, occuper toute la largeur */
}

/* Les chart-container après stats-block doivent aussi prendre toute la largeur */
.stats-block ~ .chart-container,
.stats-block + * .chart-container {
    width: 100%;
    display: block;
    max-width: 100%;
}

/* Tous les chart-container doivent prendre toute la largeur par défaut */
#statistics-content .chart-container {
    width: 100%;
    max-width: 100%;
    display: block;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--primary-color);
}

.stat-card h3 {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-card .stat-value {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--primary-color);
}

.stat-card .stat-percentage {
    font-size: 1em;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: normal;
}

/* Petits tableaux pour répartitions */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.mini-table th, .mini-table td {
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    text-align: left;
}
.mini-table th {
    background: #f9fafb;
}

.chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: visible; /* éviter que des éléments (tooltips externes éventuels) soient coupés */
    position: relative; /* pour positionner un tooltip externe */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.stats-block {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 10px;
    grid-column: 1 / -1; /* si jamais inséré dans une grille, occuper toute la largeur */
}

.stats-block .chart-container {
    width: 100%;
}

/* Disposition des petits diagrammes circulaires */
.pie-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.pie-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
}
.small-pie {
    width: 300px;
    height: 300px;
}
.pie-caption {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.9em;
}

.pie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: center;
    margin-top: 10px;
}
.pie-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dark-color);
}
.pie-legend .legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* Lignes repliables par élève (onglet Recherche) */
.student-hidden { display: none; }
.expand-toggle {
    cursor: pointer;
    background: none;
    border: none;
    color: var(--primary-color);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 1em;
    margin-right: 6px;
    line-height: 1;
}
.expand-toggle:hover { color: var(--dark-color); }

/* Icône de situation dans le tableau */
.situation-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px; /* espace contrôlé entre icône et libellé */
    line-height: 1.1;
}
.situation-icon {
    margin: 0;
    font-size: 1.2em;
    line-height: 1;
}

.phase-chip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.03) inset;
}
.phase-text {
    display: inline-block;
    padding: 1px 2px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
    color: white;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    max-width: 70px;
}
.phase-main { background-color: #2b8a3e; }             /* vert soutenu */
.phase-complement { background-color: #1c7ed6; }       /* bleu */
.phase-apprentissage { background-color: #d63384; }     /* rose/magenta */
.phase-desistements { background-color: #e67700; }      /* orange foncé */
.phase-caes { background-color: #ae3ec9; }             /* violet */
.phase-other { background-color: #868e96; }            /* gris */

/* Assurer l'alignement vertical des cellules du tableau des résultats */
#results-table td {
    vertical-align: middle;
}

/* Réduire les marges du badge sous l'icône pour limiter les décalages */
.situation-cell .badge {
    margin: 0;
    text-align: center;
    width: 100%;
    display: block;
}

/* Barre d'actions globale du tableau */
.results-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin: 6px 0 8px 0;
}
.results-actions button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.results-actions button.secondary {
    background: var(--dark-color);
}

/* Numérotation X vs X-Y selon état */
.num-expanded { display: none; }
tr.student-expanded .num-collapsed { display: none; }
tr.student-expanded .num-expanded { display: inline; }

/* Tooltip externe Chart.js */
.chartjs-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    pointer-events: none;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    z-index: 10;
    font-size: 12px;
}

/* Tooltip personnalisé pour les exemples des cartes jaunes */
.stat-exemple-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 4px;
    padding: 8px 10px;
    pointer-events: none;
    z-index: 10000;
    font-size: 12px;
    max-width: 400px;
    white-space: normal;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.stat-exemple-tooltip.visible {
    opacity: 1;
}

.stat-exemples-list li {
    cursor: help;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Cellules de formation avec tooltip personnalisé */
.formation-tooltip-cell {
    cursor: help;
    position: relative;
}

.chart-container#chart-phase-container {
    min-height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.chart-container#chart-phase-container canvas {
    max-height: none;
    min-height: 350px;
}

.chart-container canvas {
    max-height: 800px;
}

/* Exception : les graphiques génériques de formations doivent pouvoir être très hauts */
.formation-type-chart-wrapper canvas,
.chart-container:has(.formation-type-chart-wrapper) canvas,
.chart-container:has([id^="chart-formation-type-"]) canvas,
#chart-formation-type {
    max-height: none !important;
    height: auto !important;
}

.formation-type-chart-wrapper,
.chart-container:has(.formation-type-chart-wrapper),
.chart-container:has([id^="chart-formation-type-"]),
.chart-container:has(#chart-formation-type) {
    max-height: none !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
}

/* Limiter la largeur maximale des graphiques de type de formation */
#chart-formation-type,
[id^="chart-formation-type-"] {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Pour les sous-graphiques de type de formation */
.formation-sub-section .section-header h3 {
    font-size: 1.1em !important;
}

/* Bouton moderne pour activer/désactiver la Fiche Avenir */
.fiche-avenir-toggle-btn {
    margin-left: auto;
    padding: 14px 28px;
    font-size: 0.95em;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.fiche-avenir-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fiche-avenir-toggle-btn:hover::before {
    width: 350px;
    height: 350px;
}

.fiche-avenir-toggle-btn:active {
    transform: scale(0.96);
}

.fiche-avenir-toggle-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style pour le bouton activé (vert) */
.fiche-avenir-toggle-btn.enabled {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.1);
}

.fiche-avenir-toggle-btn.enabled:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45), 0 0 0 1px rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
}

.fiche-avenir-toggle-btn.enabled:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

/* Style pour le bouton désactivé (rouge) */
.fiche-avenir-toggle-btn.disabled {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35), 0 0 0 1px rgba(239, 68, 68, 0.1);
}

.fiche-avenir-toggle-btn.disabled:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45), 0 0 0 1px rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.fiche-avenir-toggle-btn.disabled:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

/* Animation de chargement */
.fiche-avenir-toggle-btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.fiche-avenir-toggle-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.formation-sub-section .chart-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.formation-sub-section .chart-container canvas {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Exception : le graphique par établissement doit pouvoir être très haut */
#chart-etablissement {
    max-height: none !important;
    height: auto !important;
}

.chart-container:has(#chart-etablissement) {
    max-height: none !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Limiter la largeur maximale du canvas pour éviter un scroll horizontal excessif */
#chart-etablissement {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Sur petits écrans, permettre le défilement horizontal pour le graphique d'établissement */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (max-width: 768px) {
    .chart-container:has(#chart-etablissement) {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    #chart-etablissement {
        min-width: 600px; /* Largeur minimale pour garantir la lisibilité */
        max-width: 100% !important;
    }
}
*/

/* Exception : le graphique des licences doit pouvoir être TRÈS haut */
#chart-licence {
    max-height: none !important;
    height: auto !important;
}

/* Conteneur du graphique des licences : permettre une hauteur très grande */
.chart-container:has(#chart-licence) {
    max-height: none !important;
    height: auto !important;
    overflow: auto !important;
}

/* Réduire l'interligne dans les labels multilignes des graphiques Chart.js */
.chartjs-axis-y text,
.chartjs-axis-y .chartjs-tick-label {
    line-height: 1.1 !important;
}

.chartjs-axis-y .chartjs-tick-label tspan {
    line-height: 1.1 !important;
}

.chart-container h3 {
    margin-bottom: 20px;
    color: var(--dark-color);
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Menu déroulant personnalisé de répartition - permettre l'affichage complet des formations avec retours à la ligne */
.custom-select-wrapper {
    position: relative;
    min-width: 200px;
    max-width: 100%;
    transition: min-width 0.3s ease;
}

.custom-select-button {
    position: relative;
    padding: 8px 30px 8px 8px;
    font-size: 0.95em;
    transition: padding 0.3s ease, font-size 0.3s ease;
}

.custom-select-button::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.8em;
    color: var(--text-muted);
    transition: right 0.3s ease, font-size 0.3s ease;
}

.custom-select-button:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.custom-select-dropdown {
    background: white;
    font-size: 0.95em;
    transition: font-size 0.3s ease;
}

.custom-select-option {
    transition: background-color 0.2s;
    padding: 8px 8px;
    font-size: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.custom-select-option input[type="checkbox"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    vertical-align: middle;
    align-self: center;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.custom-select-option > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.custom-select-option:last-child {
    border-bottom: none !important;
}

.custom-select-option:hover {
    background-color: #f5f5f5 !important;
}

/* Responsive */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (max-width: 768px) {
    /* Tableau responsive sur petits écrans */
    #results-table-container {
        margin-top: 15px;
    }
    
    #results-table-container table {
        min-width: 100%;
        font-size: 0.75em;
    }
    
    table th,
    table td {
        padding: 6px 4px;
        font-size: 0.75em;
    }
    
    table th {
        font-size: 0.8em;
    }
    
    /* Ajuster les largeurs des colonnes sur petits écrans */
    #results-table-container table th:nth-child(1),
    #results-table-container table td:nth-child(1) {
        width: 2.5%; /* N° - réduite */
    }
    
    #results-table-container table th:nth-child(2),
    #results-table-container table td:nth-child(2) {
        width: 11%; /* Nom Prénom */
        padding-left: 4px;
        padding-right: 4px;
    }
    
    #results-table-container table th:nth-child(3),
    #results-table-container table td:nth-child(3) {
        width: 4%; /* Classe - réduite */
        padding-left: 3px;
        padding-right: 3px;
    }
    
    #results-table-container table th:nth-child(4),
    #results-table-container table td:nth-child(4) {
        width: 5%; /* Série */
    }
    
    #results-table-container table th:nth-child(5),
    #results-table-container table td:nth-child(5) {
        width: 7%; /* Phase - augmentée pour badges de texte */
        padding-left: 2px;
        padding-right: 2px;
    }
    
    #results-table-container table th:nth-child(6),
    #results-table-container table td:nth-child(6) {
        width: 20%; /* Formation */
    }
    
    #results-table-container table th:nth-child(7),
    #results-table-container table td:nth-child(7) {
        width: 13%; /* Établissement */
    }
    
    #results-table-container table th:nth-child(8),
    #results-table-container table td:nth-child(8) {
        width: 7%; /* Type */
    }
    
    #results-table-container table th:nth-child(9),
    #results-table-container table td:nth-child(9) {
        width: 7%; /* Type+ */
    }
    
    #results-table-container table th:nth-child(10),
    #results-table-container table td:nth-child(10) {
        width: 13%; /* Situation */
    }
    
    #results-table-container table th:nth-child(11),
    #results-table-container table td:nth-child(11) {
        width: 11%; /* Date */
    }
    
    /* Masquer certaines colonnes moins importantes sur petits écrans */
    #results-table-container table th:nth-child(4), /* Série */
    #results-table-container table td:nth-child(4) {
        display: none;
    }
    
    /* Réajuster les largeurs après masquage de Série */
    #results-table-container table th:nth-child(1),
    #results-table-container table td:nth-child(1) {
        width: 2.5%; /* N° - réduite */
    }
    
    #results-table-container table th:nth-child(2),
    #results-table-container table td:nth-child(2) {
        width: 13%; /* Nom Prénom */
        padding-left: 4px;
        padding-right: 4px;
    }
    
    #results-table-container table th:nth-child(3),
    #results-table-container table td:nth-child(3) {
        width: 5%; /* Classe - réduite */
        padding-left: 3px;
        padding-right: 3px;
    }
    
    #results-table-container table th:nth-child(5),
    #results-table-container table td:nth-child(5) {
        width: 8%; /* Phase - augmentée pour badges de texte */
        padding-left: 2px;
        padding-right: 2px;
    }
    
    #results-table-container table th:nth-child(6),
    #results-table-container table td:nth-child(6) {
        width: 20%; /* Formation */
    }
    
    #results-table-container table th:nth-child(7),
    #results-table-container table td:nth-child(7) {
        width: 14%; /* Établissement */
    }
    
    #results-table-container table th:nth-child(8),
    #results-table-container table td:nth-child(8) {
        width: 8%; /* Type */
    }
    
    #results-table-container table th:nth-child(9),
    #results-table-container table td:nth-child(9) {
        width: 8%; /* Type+ */
    }
    
    #results-table-container table th:nth-child(10),
    #results-table-container table td:nth-child(10) {
        width: 14%; /* Situation */
    }
    
    #results-table-container table th:nth-child(11),
    #results-table-container table td:nth-child(11) {
        width: 7%; /* Date */
    }
    
    .container {
        padding: 10px;
    }

    .header-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Logo, séparateur et titre restent sur une ligne même sur petits écrans */
    .header-left {
        width: 100%;
        gap: 3px; /* Réduit pour rapprocher le sous-titre du logo sur petits écrans */
    }
    
    .header-left-top {
        gap: 0;
    }
    
    .header-logo {
        height: 70px; /* Augmenté de 55px pour être plus grand sur petits écrans */
        flex-shrink: 0;
        margin-right: 1px;
    }
    
    .header-separator {
        height: 1em; /* Hauteur relative à la taille de la police */
        margin-left: 8px; /* Léger espace après "ADAP" */
        margin-right: 8px; /* Léger espace avant "TIV'" */
    }
    .header-separator::before {
        width: 6px; /* Augmenté pour correspondre à la taille du séparateur */
        height: 6px;
    }
    
    .header-title {
        font-size: 1.85em; /* Augmenté de 1.5em pour être plus grand sur petits écrans */
        flex-shrink: 1;
        min-width: 0;
    }
    
    .subtitle {
        font-size: 0.75em; /* Plus petit sur très petits écrans */
        white-space: normal;
        line-height: 1.3;
        word-wrap: break-word;
    }
    
    /* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
    .header-top-row {
        flex-wrap: wrap;
    }
    
    .header-right {
        order: 3;
        width: 100%;
        justify-content: center;
        margin: 10px 0 0 0;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .user-info {
        align-items: center;
        width: 100%;
    }
    
    .user-info-main {
        align-items: center;
    }
    */
    
    .user-name {
        font-size: 0.85em;
    }
    
    .user-role {
        font-size: 0.7em;
        padding: 3px 8px;
    }
    
    /* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
    .user-actions {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    */
    
    .btn-header-action {
        font-size: 0.8em;
        padding: 5px 10px;
    }
    
    /* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
    header .tabs {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        gap: 4px;
        padding: 4px;
    }
    
    header .tab-btn {
        flex: 0 0 auto;
        font-size: 0.85em;
        padding: 8px 12px;
        min-width: 0;
        letter-spacing: 0.2px;
        gap: 6px;
    }
    */
    
    header .tab-btn svg {
        width: 16px;
        height: 16px;
    }

    /* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
    .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    */

    /* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
    .results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .results-header-left {
        width: 100%;
    }
    
    .results-info {
        width: 100%;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .results-info #pagination-container-top {
        width: 100%;
    }

    .stats-grid {
        flex-direction: column;
    }
    
    .stats-grid .stat-card {
        flex: 1 1 auto;
        min-width: 100%;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }
    
    .filters-bar label {
        font-size: 0.9em;
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .filters-bar select {
        padding: 10px;
        font-size: 0.9em;
        min-width: 100%;
        width: 100%;
    }
    
    .custom-select-wrapper {
        min-width: 100%;
        width: 100%;
    }
    
    .custom-select-button {
        padding: 10px 30px 10px 10px;
        font-size: 0.9em;
        width: 100%;
    }
    
    .custom-select-dropdown {
        font-size: 0.9em;
    }
    */
}

    /* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
       Zone sans breakpoint pour la bannière entre 768px et 803px */
    /*
    @media (min-width: 768px) and (max-width: 803px) {
        /* Forcer les styles de la bannière à rester identiques dans cette plage */
        header {
            padding: 15px 15px 12px 15px !important;
        }
        
        .header-left-top {
            gap: 0 !important;
        }
        
        .header-logo {
            height: 70px !important;
            margin-right: 1px !important;
        }
        
        .header-separator {
            height: 1em !important;
            margin-left: 8px !important;
            margin-right: 8px !important;
        }
        
        .header-separator::before {
            width: 6px !important;
            height: 6px !important;
        }
        
        .header-title {
            font-size: 1.6em !important;
        }
        
        .subtitle {
            font-size: 0.75em !important;
            line-height: 1.2 !important;
            white-space: normal !important;
            word-wrap: break-word !important;
        }
        
        header .tab-btn {
            padding: 10px 12px !important;
            font-size: 0.85em !important;
            letter-spacing: normal !important;
        }
    }
    
    /* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop
       Media query pour écrans moyens (tablettes et petits ordinateurs) */
    /* Modifié pour commencer à 804px au lieu de 769px pour éviter les breakpoints entre 767px et 803px */
    /*
    @media (min-width: 804px) and (max-width: 1023px) {
        .header-left-top {
            gap: 0;
        }
        
        .header-logo {
            height: 70px;
            margin-right: 1px;
        }
        
        .header-separator {
            height: 1em; /* Hauteur relative à la taille de la police */
            margin-left: 8px; /* Léger espace après "ADAP" */
            margin-right: 8px; /* Léger espace avant "TIV'" */
        }
        .header-separator::before {
            width: 6px;
            height: 6px;
        }
        
        .header-title {
            font-size: 2em;
        }
        
        .subtitle {
            font-size: 0.88em; /* Ajusté pour écrans moyens */
            white-space: normal;
            line-height: 1.3;
            word-wrap: break-word;
        }
        
        /* Boutons tab pour écrans moyens */
        header .tab-btn {
            padding: 11px 20px;
            font-size: 0.92em;
            letter-spacing: 0.6px;
        }
    }
    */

/* Transition progressive autour de 1023-1024px pour éviter les sauts visuels */
/* UNIFIÉ : cette zone gère TOUS les changements (container, font-size, header, stats-grid) */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (min-width: 1019px) and (max-width: 1029px) {
    /* Zone de transition fluide entre 1019px et 1029px */
    html {
        font-size: 14px; /* Valeur intermédiaire entre 16px (1023px) et 12px (1024px) */
    }
    
    /* Transition progressive du container */
    .container {
        max-width: 96%; /* Transition progressive de 1400px (1023px) vers 95% (1024px) */
        padding: 18px; /* Transition progressive de 20px vers 17px */
    }
    
    /* Transition progressive du header */
    .header-logo {
        height: 72px; /* Valeur intermédiaire entre 70px (1023px) et 75px (1024px) */
    }
    
    .header-separator {
        height: 1em; /* Hauteur relative à la taille de la police */
        margin-left: 8px; /* Léger espace après "ADAP" */
        margin-right: 8px; /* Léger espace avant "TIV'" */
    }
    
    .header-separator::before {
        width: 6.25px;
        height: 6.25px;
    }
    
    /* Transition progressive du titre */
    /* À 1023px : titre 2em * 16px = 32px */
    /* À 1024px : titre 2.67em * 12px = 32px */
    /* Transition : utiliser une valeur qui donne ~32px avec font-size: 14px */
    .header-title {
        font-size: 2.3em; /* 2.3em * 14px = ~32px, proche de 32px */
    }
    
    .subtitle {
        font-size: 0.87em; /* Valeur intermédiaire entre 0.88em (1023px) et 0.88em (1024px mais avec font-size différent) */
        white-space: normal;
        line-height: 1.3;
        word-wrap: break-word;
    }
    
    /* Transition progressive des stats-grid */
    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Transition de 3 à 6 colonnes */
        gap: 17px; /* Valeur intermédiaire entre les différents gaps */
    }
    
    .stats-grid .stat-card {
        padding: 16.5px; /* Valeur intermédiaire */
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.86em; /* Valeur intermédiaire */
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 2.07em; /* Valeur intermédiaire */
    }
    
    .stats-grid .stat-card .stat-percentage {
        font-size: 0.875em; /* Valeur intermédiaire */
    }
    
    /* Transition progressive des filtres */
    .filters-bar {
        gap: 9px;
        padding: 14px;
    }
    
    .filters-bar label {
        font-size: 0.93em;
    }
    
    .filters-bar select {
        padding: 7.5px;
        font-size: 0.91em;
        min-width: 145px;
    }
    
    .custom-select-wrapper {
        min-width: 190px;
    }
    
    .custom-select-button {
        padding: 7.5px 29px 7.5px 7.5px;
        font-size: 0.91em;
    }
    
    .custom-select-dropdown {
        font-size: 0.91em;
    }
    
    /* Transition progressive des boutons tab */
    header .tab-btn {
        padding: 10.5px 18px; /* Valeur intermédiaire entre 11px 20px (1023px) et 10px 16px (1024px) */
        font-size: 0.925em; /* Valeur intermédiaire entre 0.92em (1023px) et 0.93em (1024px mais avec font-size différent) */
        letter-spacing: 0.55px; /* Valeur intermédiaire entre 0.6px (1023px) et ajusté pour 1024px */
    }
}

/* Optimisation pour écrans de 14 pouces (réduction des tailles pour afficher plus de contenu) */
/* Applique des réductions de taille similaires à un zoom de 75% mais de manière propre */
/* UNIFIÉ avec le seuil 1400px : cette media query s'arrête à 1399px */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (min-width: 1024px) and (max-width: 1399px) {
    /* Garder la taille de base normale pour cohérence avec les autres plages */
    html {
        font-size: 16px; /* Maintenu à 16px pour cohérence */
    }
    
    /* Réduction des largeurs maximales pour avoir plus de marge */
    /* Cette largeur sera maintenue dans la zone de transition */
    .container {
        max-width: 95%; /* Augmenté de 90% pour transition plus fluide */
        padding: 17px; /* Valeur intermédiaire pour transition */
    }
    
    /* Header */
    header {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .header-content {
        gap: 15px;
    }
    
    .header-left {
        gap: 4px; /* Réduit pour rapprocher le sous-titre du logo */
    }
    
    .header-left-top {
        gap: 0;
    }
    
    /* Ajuster les tailles pour compenser le font-size: 12px et maintenir une taille similaire à 1023px */
    /* À 1023px : logo 70px, titre 2em = 32px (avec font-size: 16px) */
    /* À 1024px : avec font-size: 12px, on veut logo 75px, titre ~32px = 2.67em */
    /* À 1399px : on garde les mêmes valeurs pour éviter les sauts */
    .header-logo {
        height: 75px; /* Augmenté de 70px pour compenser le font-size réduit */
        margin-right: 1px;
    }
    
    .header-separator {
        height: 1em; /* Hauteur relative à la taille de la police */
        margin-left: 8px; /* Léger espace après "ADAP" */
        margin-right: 8px; /* Léger espace avant "TIV'" */
    }
    .header-separator::before {
        width: 6.5px;
        height: 6.5px;
    }
    
    .header-title {
        font-size: 2.67em; /* 2.67em * 12px = ~32px, similaire à 2em * 16px = 32px à 1023px */
    }
    
    .subtitle {
        font-size: 0.88em; /* Légèrement réduit pour 1024-1399px avec font-size: 12px */
        white-space: normal;
        line-height: 1.3;
        margin-top: 0; /* Réduire l'espace au-dessus du sous-titre */
        word-wrap: break-word;
    }
    
    /* Navigation - ajuster pour écrans 14 pouces */
    header .tabs {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        gap: 2px;
    }
    
    header .tab-btn {
        flex: 0 0 auto;
        font-size: 0.93em; /* Ajusté pour font-size: 12px */
        padding: 10px 16px; /* Ajusté pour font-size: 12px */
        min-width: 0;
        letter-spacing: 0.5px;
    }
    
    /* Filtres responsive pour écrans 14 pouces */
    .filters-bar {
        gap: 9px;
        padding: 14px;
    }
    
    .filters-bar label {
        font-size: 0.92em; /* Ajusté pour font-size: 12px */
    }
    
    .filters-bar select {
        padding: 7px;
        font-size: 0.90em; /* Ajusté pour font-size: 12px */
        min-width: 130px;
    }
    
    .custom-select-wrapper {
        min-width: 170px;
    }
    
    .custom-select-button {
        padding: 7px 28px 7px 7px;
        font-size: 0.90em; /* Ajusté pour font-size: 12px */
    }
    
    .custom-select-dropdown {
        font-size: 0.90em; /* Ajusté pour font-size: 12px */
    }
}
*/

/* Media query pour petits écrans - styles généraux */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (max-width: 768px) {
    /* Panels et cartes */
    .search-panel,
    .statistics-panel,
    .results-container,
    .chart-container {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    /* Formulaires - valeurs par défaut pour 768px */
    .search-form {
        gap: 15px;
    }
    
    .form-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    
    .form-group input,
    .form-group select {
        padding: 8px;
        font-size: 0.9em;
    }
    
    /* Tableaux */
    table th,
    table td {
        padding: 10px;
        font-size: 0.85em;
    }
    
    table th {
        font-size: 0.9em;
    }
    
    /* Stat cards */
    .stat-card {
        padding: 15px;
    }
    
    .stat-card h3 {
        font-size: 0.85em;
        margin-bottom: 8px;
    }
    
    .stat-card .stat-value {
        font-size: 2em; /* Au lieu de 2.5em */
    }
    
    .stat-card .stat-percentage {
        font-size: 0.9em;
    }
    
    .stats-grid .stat-card h3 {
        font-size: 0.75em;
    }
    
    .stats-grid .stat-card .stat-value {
        font-size: 1.8em;
    }
    
    /* Boutons */
    .btn {
        padding: 8px 16px;
        font-size: 0.9em;
    }
    
    /* Chart containers */
    .chart-container h3 {
        font-size: 1.1em;
        margin-bottom: 15px;
    }
    
    /* Pagination */
    .pagination {
        margin-top: 15px;
        padding-top: 15px;
        gap: 6px;
    }
    
    .pagination button {
        padding: 6px 10px;
        font-size: 0.85em;
        flex-shrink: 0;
    }
    
    .pagination .page-info {
        margin: 0 8px;
        font-size: 0.85em;
    }
    
    .pagination .page-select {
        width: 60px;
        font-size: 0.85em;
        padding: 3px 6px;
    }
    
    /* Filters bar */
    .filters-bar {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .filters-bar select {
        padding: 6px;
        font-size: 0.9em;
    }
    
    /* Results header */
    .results-header {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .results-info {
        font-size: 0.85em;
    }
    
    /* Badges */
    .badge {
        padding: 3px 6px;
        font-size: 0.8em;
    }
}

/* Breakpoint pour écrans moyens (≤1024px) */
/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (max-width: 1024px) and (min-width: 769px) {
    #results-table-container table {
        min-width: 100%;
        font-size: 0.8em;
    }
    
    table th,
    table td {
        padding: 10px 8px;
        font-size: 0.8em;
    }
    
    /* Ajuster légèrement les largeurs */
    #results-table-container table th:nth-child(6),
    #results-table-container table td:nth-child(6) {
        width: 20%; /* Formation - un peu plus large */
    }
    
    #results-table-container table th:nth-child(7),
    #results-table-container table td:nth-child(7) {
        width: 13%; /* Établissement */
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
   Passer à 2 colonnes sur écrans moyens (900px - 481px) */
/*
@media (max-width: 900px) and (min-width: 481px) {
    #search-tab .search-panel .search-form {
        gap: 8px !important;
    }
    
    #search-tab .search-panel .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    
    #search-tab .search-panel .form-group {
        margin-bottom: 0 !important;
    }
}
*/

/* DÉSACTIVÉ : Avec viewport fixe, on garde le layout desktop
   Passer à 1 colonne sur très petits écrans (≤480px) */
/*
@media (max-width: 480px) {
    #search-tab .search-panel .search-form {
        gap: 6px !important;
    }
    
    #search-tab .search-panel .form-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    
    #search-tab .search-panel .form-group {
        margin-bottom: 0 !important;
    }
    #results-table-container table {
        font-size: 0.65em;
        min-width: 100%;
    }
    
    table th,
    table td {
        padding: 4px 2px;
        font-size: 0.65em;
    }
    
    table th {
        font-size: 0.7em;
    }
    
    /* Masquer encore plus de colonnes sur très petits écrans */
    #results-table-container table th:nth-child(4), /* Série */
    #results-table-container table td:nth-child(4),
    #results-table-container table th:nth-child(5), /* Phase */
    #results-table-container table td:nth-child(5) {
        display: none;
    }
    
    /* Réajuster les largeurs après masquage de Série et Phase */
    #results-table-container table th:nth-child(1),
    #results-table-container table td:nth-child(1) {
        width: 2%; /* N° - très réduite sur très petits écrans */
    }
    
    #results-table-container table th:nth-child(2),
    #results-table-container table td:nth-child(2) {
        width: 16%; /* Nom Prénom - augmenté pour compenser la réduction de N° */
    }
    
    #results-table-container table th:nth-child(3),
    #results-table-container table td:nth-child(3) {
        width: 8%; /* Classe */
    }
    
    #results-table-container table th:nth-child(6),
    #results-table-container table td:nth-child(6) {
        width: 22%; /* Formation */
    }
    
    #results-table-container table th:nth-child(7),
    #results-table-container table td:nth-child(7) {
        width: 16%; /* Établissement */
    }
    
    #results-table-container table th:nth-child(8),
    #results-table-container table td:nth-child(8) {
        width: 9%; /* Type */
    }
    
    #results-table-container table th:nth-child(9),
    #results-table-container table td:nth-child(9) {
        width: 9%; /* Type+ */
    }
    
    #results-table-container table th:nth-child(10),
    #results-table-container table td:nth-child(10) {
        width: 12%; /* Situation */
    }
    
    #results-table-container table th:nth-child(11),
    #results-table-container table td:nth-child(11) {
        width: 4%; /* Date */
    }
}
*/

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--light-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Panneau de configuration du tri */
.sort-config-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    /* transform sera géré par JavaScript pour inclure le zoom */
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000 !important;
    min-width: 500px;
    max-width: calc(1400px * 0.9);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0;
    width: auto;
    transform-origin: center center;
}

.sort-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.sort-config-header h4 {
    margin: 0;
    font-size: 1.1em;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.close-btn:hover {
    background: #f3f4f6;
    color: var(--text-color);
}

.sort-config-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.sort-config-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

/* DÉSACTIVÉ : Avec viewport fixe à 1400px, on garde toujours le layout desktop */
/*
@media (max-width: 768px) {
    .sort-config-panel {
        min-width: calc(1400px * 0.9);
        max-height: 85vh;
    }
}
*/

/* Désactiver le révélateur natif du mot de passe sur tous les champs de l'application */
input[type="password"]::-ms-reveal {
    display: none !important;
}

input[type="password"]::-ms-clear {
    display: none !important;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Garantir la mise en page Formation + actions sur toutes les largeurs */
#search-tab .search-panel .form-row-formation-actions {
    grid-template-columns: 1fr !important;
    width: 100%;
}

#search-tab .search-panel .form-row-formation-actions .form-actions-inline {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
}

/* Animation pour le sablier de chargement - version alternative avec retournement */
@keyframes hourglass-flip {
    0% { transform: rotateZ(0deg) scaleY(1); }
    25% { transform: rotateZ(90deg) scaleY(0.8); }
    50% { transform: rotateZ(180deg) scaleY(1); }
    75% { transform: rotateZ(270deg) scaleY(0.8); }
    100% { transform: rotateZ(360deg) scaleY(1); }
}

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

.loading-hourglass {
    display: inline-block;
    animation: hourglass-flip 2s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

/* Autres animations pour icônes de chargement */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dots-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.7; }
    40% { transform: translateY(-10px); opacity: 1; }
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    75% { transform: translateY(8px); }
}

.loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    user-select: none;
    pointer-events: none;
}

.loading-dots {
    display: inline-block;
    user-select: none;
    pointer-events: none;
}

.loading-dots span {
    display: inline-block;
    animation: dots-bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.loading-pulse {
    display: inline-block;
    animation: pulse-scale 1.5s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

.loading-wave {
    display: inline-block;
    animation: wave 1s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

/* Styles pour la carte géographique avec volet latéral */
#geographic-map-wrapper {
    position: relative;
}

#geographic-sidebar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden; /* Empêcher le scroll sur le conteneur parent */
    display: flex;
    flex-direction: column;
    height: 100%;
}

#geographic-sidebar h4 {
    word-wrap: break-word;
}

#geographic-sidebar h5 {
    font-size: 0.9em;
    font-weight: 600;
}

#geographic-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Empêcher le scroll horizontal */
}

#geographic-sidebar-content::-webkit-scrollbar {
    width: 8px;
}

#geographic-sidebar-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#geographic-sidebar-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#geographic-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#geographic-sidebar-close {
    transition: color 0.2s ease;
}

#geographic-sidebar-close:hover {
    color: #333 !important;
    background: #f0f0f0;
    border-radius: 50%;
}

#geographic-map-container {
    transition: margin-left 0.3s ease;
}

/* Responsive : masquer le volet sur petits écrans */
@media (max-width: 768px) {
    #geographic-sidebar {
        width: 100% !important;
        max-width: 100%;
    }
    
    #geographic-map-container {
        margin-left: 0 !important;
    }
}

/* Styles pour les popups des formations sur la carte */
.formations-popup .leaflet-popup-content-wrapper,
.geographic-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    overflow: hidden !important;
    max-width: 300px !important;
}

.formations-popup .leaflet-popup-content,
.geographic-popup .leaflet-popup-content {
    margin: 0;
    width: 300px !important;
    height: 280px !important;
    overflow: hidden !important;
    max-width: 300px !important;
}

.formations-popup .popup-scrollable-content,
.geographic-popup .popup-scrollable-content {
    /* Style pour la barre de défilement */
    scrollbar-width: thin;
    scrollbar-color: #026a88 #f0f0f0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.formations-popup .geographic-popup-content,
.geographic-popup .geographic-popup-content {
    width: 300px !important;
    height: 280px !important;
    max-width: 300px !important;
    overflow: hidden !important;
}

.formations-popup .popup-scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.formations-popup .popup-scrollable-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.formations-popup .popup-scrollable-content::-webkit-scrollbar-thumb {
    background: #026a88;
    border-radius: 4px;
}

.formations-popup .popup-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #013a4f;
}

.formations-popup .popup-header,
.geographic-popup .popup-header {
    flex-shrink: 0 !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.formations-popup .popup-navigation,
.geographic-popup .popup-navigation {
    /* S'assurer que la navigation reste en bas et toujours visible */
    position: relative;
    z-index: 10;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    overflow: hidden !important;
}

/* Empêcher le défilement horizontal dans tous les éléments des popups */
.formations-popup *,
.geographic-popup * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.formations-popup a,
.geographic-popup a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
}

.formations-popup .popup-nav-btn:hover {
    background: #013a4f !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.formations-popup .popup-nav-btn:active {
    transform: scale(0.95);
}