/* ============================================================================ */
/* BASE ET VARIABLES GLOBALES                                                   */
/* ============================================================================ */
:root { 
    --bg-color: #f4f7f6; 
    --text-main: #2c3e50; 
    --text-muted: #7f8c8d; 
    --panel-bg: #ffffff; 
    --primary: #2c3e50; 
    --secondary: #3498db; 
    --border: #bdc3c7; 
    --border-light: #ecf0f1; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg-color); 
    margin: 0; 
    color: var(--text-main); 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    transition: background 0.3s;
}

h1, h2, h3, h4, h5, strong { margin-top: 0; color: var(--text-main); }
span, small, p, li { color: var(--text-muted); }

/* ============================================================================ */
/* MOTEUR DE FORMES ET D'ANIMATIONS DYNAMIQUES (LES 4 STYLES)                   */
/* ============================================================================ */

/* 1. STANDARD : Léger, discret, professionnel */
body.style-standard {
    --radius-btn: 6px;
    --radius-panel: 8px;
    --shadow-base: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-hover: 0 4px 8px rgba(0,0,0,0.1);
    --anim-speed: 0.2s ease;
    --hover-transform: translateY(-2px);
    --border-width: 1px;
}

/* 2. ORGANIQUE : Très arrondi, ombres douces, effet de flottement */
body.style-organique {
    --radius-btn: 25px;
    --radius-panel: 20px;
    --shadow-base: 0 10px 20px rgba(0,0,0,0.04);
    --shadow-hover: 0 15px 30px rgba(0,0,0,0.1);
    --anim-speed: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --hover-transform: translateY(-6px) scale(1.02);
    --border-width: 0px;
}

/* 3. NÉO-BRUTALISME : Strict, angles droits, ombres noires pleines décalées */
body.style-brut {
    --radius-btn: 0px;
    --radius-panel: 0px;
    --shadow-base: 4px 4px 0px var(--text-main);
    --shadow-hover: 6px 6px 0px var(--text-main);
    --anim-speed: 0.1s linear;
    --hover-transform: translate(-2px, -2px);
    --border-width: 2px;
}

/* 4. VERRE FLUIDE : Effets néons, brillance (glow), très moderne */
body.style-fluide {
    --radius-btn: 10px;
    --radius-panel: 15px;
    --shadow-base: 0 0 10px rgba(0,0,0,0.05);
    --shadow-hover: 0 0 20px var(--secondary);
    --anim-speed: 0.3s ease-out;
    --hover-transform: scale(1.03);
    --border-width: 1px;
}

/* Application prioritaire des variables CSS sur l'interface */
.btn, .btn-small, .btn-nav, .theme-select, input, select, textarea {
    border-radius: var(--radius-btn) !important;
    transition: all var(--anim-speed) !important;
    box-shadow: var(--shadow-base);
    border-width: var(--border-width) !important;
    border-style: solid !important;
}

.panel, .toolbox, .workspace, .card, .eleve-card, .login-box, .modal, .panel-box {
    border-radius: var(--radius-panel) !important;
    transition: all var(--anim-speed) !important;
    box-shadow: var(--shadow-base);
    border-width: var(--border-width) !important;
    border-style: solid !important;
}

/* Comportements au survol centralisés */
.btn:hover, .btn-nav:hover, .card:hover, .eleve-card:hover, .tp-wrapper:hover {
    transform: var(--hover-transform) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* Correction pour le brutalisme (bordures de la couleur du texte) */
body.style-brut .btn, body.style-brut .panel, body.style-brut .card, body.style-brut .eleve-card, body.style-brut .workspace, body.style-brut .modal {
    border-color: var(--text-main) !important;
}

/* ============================================================================ */
/* ECRAN DE CONNEXION                                                           */
/* ============================================================================ */
#login-screen { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--primary); display: flex; justify-content: center; 
    align-items: center; z-index: 2000; 
}
.login-box { 
    background: var(--panel-bg); padding: 40px; 
    width: 350px; text-align: center; 
}
#main-app { display: none; flex-direction: column; height: 100%; width: 100%; }

/* ============================================================================ */
/* BARRE SUPERIEURE (HEADER)                                                    */
/* ============================================================================ */
.top-banner { 
    background: var(--primary); padding: 10px 20px; 
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 10; 
}
.top-banner h1 { margin: 0; color: white; font-size: 1.2em; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.btn-nav { 
    background: transparent; padding: 8px 12px; font-weight: bold; 
    color: var(--border-light); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-nav.active-nav { background: var(--secondary); color: white; border-color: var(--border-light); }
.theme-select { padding: 6px 10px; background: var(--panel-bg); color: var(--text-main); font-weight: bold; font-size: 0.85em; cursor: pointer; outline: none; }
.user-badge { background: rgba(0,0,0,0.2); padding: 8px 15px; border-radius: 20px; font-weight: bold; color: white; font-size: 0.85em; border: 1px solid rgba(255,255,255,0.2); white-space: nowrap; }

/* ============================================================================ */
/* BOUTONS ET INPUTS GENERAUX                                                   */
/* ============================================================================ */
.btn { padding: 8px 15px; cursor: pointer; font-weight: bold; color: white; text-align: center; }
.btn-green { background: #2ecc71; border-color: #27ae60;} 
.btn-blue { background: var(--secondary); border-color: var(--primary);} 
.btn-red { background: #e74c3c; border-color: #c0392b;} 
.btn-gray { background: #95a5a6; border-color: #7f8c8d;} 
.btn-small { padding: 5px 10px; font-size: 0.8em; }

input[type="text"], input[type="password"], input[type="number"], select, textarea { 
    width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; 
    background: var(--panel-bg); color: var(--text-main); 
}

/* ============================================================================ */
/* DISPOSITION PRINCIPALE ET PANNEAUX (POUR TOUTES LES PAGES)                   */
/* ============================================================================ */
.content-area { display: flex; flex: 1; overflow: hidden; padding: 20px; gap: 20px; }

/* Le panneau principal (utilisé dans prof.html et gestion_eleves.html) */
.panel { 
    flex: 1; /* C'est cette ligne qui force la boîte à prendre tout l'écran ! */
    background: var(--panel-bg); 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
}

/* Les demi-panneaux (utilisés dans eleve.html) */
.left-panel, .right-panel {
    flex: 1; /* Ils se partagent l'écran à 50/50 */
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.right-panel {
    border-left: 2px solid var(--border-light);
    padding-left: 20px;
}

.panel-box {
    background: var(--panel-bg);
    padding: 20px;
}

/* ---------------------------------------------------------------------------- */
/* SPÉCIFIQUE AU TABLEAU DE BORD                                                */
/* ---------------------------------------------------------------------------- */
.toolbox { width: 350px; background: var(--panel-bg); display: flex; flex-direction: column; overflow: hidden; }
.toolbox-tabs { display: flex; background: var(--border-light); flex-wrap: wrap; }
.tb-tab { flex: 1 1 40%; padding: 12px 5px; text-align: center; font-weight: bold; cursor: pointer; color: var(--text-muted); border-bottom: 3px solid transparent; font-size: 0.9em; }
.tb-tab.active { background: var(--panel-bg); color: var(--secondary); border-bottom: 3px solid var(--secondary); }
.toolbox-content { flex: 1; overflow-y: auto; padding: 15px; display: none; }
.toolbox-content.active { display: block; }

/* ============================================================================ */
/* SALLE DE CLASSE ET ESPACES (DROITE)                                          */
/* ============================================================================ */
.classroom { flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.workspaces-container { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.workspace { background: var(--panel-bg); width: 300px; min-height: 200px; display: flex; flex-direction: column; }
.workspace.dragover { border-color: var(--secondary); background: var(--border-light); }
.workspace-header { background: var(--border-light); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
.workspace-title { font-weight: bold; border: none; background: transparent; font-size: 1.1em; color: var(--text-main); outline: none; width: 80%; margin-bottom: 0; padding: 0; box-shadow:none !important; border-width:0 !important;}
.workspace-body { padding: 15px; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 100px; }

.absent-zone { background: rgba(231, 76, 60, 0.1); padding: 15px; min-height: 100px; display: flex; gap: 10px; flex-wrap: wrap; border: 2px dashed #e74c3c !important;}
.absent-zone.dragover { background: rgba(231, 76, 60, 0.2); }

/* ============================================================================ */
/* CARTES ELEVES                                                                */
/* ============================================================================ */
.eleve-card { background: var(--panel-bg); border-left: 5px solid var(--secondary) !important; padding: 10px; cursor: grab; }
.eleve-card:active { cursor: grabbing; opacity: 0.8; }
.eleve-card.genre-f { border-left-color: #e74c3c !important; }
.eleve-card.selected { border: 2px solid #f39c12 !important; border-left: 5px solid #f39c12 !important; }
.eleve-card.dragover-tp { border-color: #2ecc71 !important; background: var(--border-light); }

.tp-badge { display: inline-block; padding: 5px 10px; border-radius: 15px; font-size: 0.8em; font-weight: bold; color: white; margin-top: 10px; cursor: pointer; }
.btn-remove-tp { margin-left: 8px; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; padding: 2px 6px; }
.btn-remove-tp:hover { background: #e74c3c; }

/* ============================================================================ */
/* PASTILLES D'ACTIVITÉS (TOOLBOX)                                              */
/* ============================================================================ */
.tp-wrapper { position: relative; width: 100px; height: 100px; cursor: grab; margin: 0 auto 15px auto; }
.tp-wrapper:active { cursor: grabbing; }
.tp-wrapper.tp-completed, .tp-wrapper.disabled { filter: grayscale(100%) opacity(0.5); }
.tp-wrapper.completed { filter: drop-shadow(0 0 8px #2ecc71); }

.tp-shape { width: 100%; height: 100%; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5px; box-sizing: border-box; }
.tp-circle { border-radius: 50%; }
.tp-square { border-radius: 10px; padding: 8px; }
.tp-polygon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); padding: 12px; }
.flex-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================================ */
/* HISTORIQUE ET CHRONOLOGIE (DOSSIER ELEVE)                                    */
/* ============================================================================ */
.chronologie { display: flex; flex-wrap: wrap; gap: 30px; justify-content: flex-start; padding: 10px 0; }
.etape-wrapper { position: relative; width: 140px; height: 140px; flex-shrink: 0; cursor: pointer; }
.etape-wrapper:not(:last-child)::after { content: ''; position: absolute; top: 50%; left: 100%; width: 30px; height: 4px; background: var(--border); transform: translateY(-50%); z-index: -1; }
.etape-shape { width: 100%; height: 100%; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; box-sizing: border-box; overflow: hidden; }

/* RECONSTRUCTION DES FORMES GÉOMÉTRIQUES DE L'HISTORIQUE */
.etape-circle { 
    border-radius: 50% !important; 
}

.etape-square { 
    border-radius: var(--radius-btn) !important; 
}

.etape-polygon { 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    padding: 15px; 
    border-radius: 0px !important; 
}

/* SÉCURISATION DES FORMES DE LA BOITE À OUTILS GAUCHE */
.tp-circle { 
    border-radius: 50% !important; 
}

.tp-square { 
    border-radius: var(--radius-btn) !important; 
}

.tp-polygon { 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    border-radius: 0px !important; 
}
/* ============================================================================ */
/* MODALES ET JAUGES                                                            */
/* ============================================================================ */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: flex-start; overflow-y: auto; padding: 20px; z-index: 1000; }
.modal { background: var(--panel-bg); padding: 30px; width: 850px; margin: auto; position: relative; }
.alerte-banniere { color: white; font-size: 0.75em; padding: 6px 8px; border-radius: 4px; margin-top: 8px; font-weight: bold; text-align: center; text-transform: uppercase; }
.gauge-container { display: flex; width: 100%; height: 16px; border-radius: 4px; overflow: hidden; background: var(--border-light); margin-top: 5px; border: 1px solid var(--border); }

/* ============================================================================ */
/* GRILLES D'AFFICHAGE (CARTES TP, ÉLÈVES, RÉFÉRENTIELS)                        */
/* ============================================================================ */
.grid-cartes {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne automatiquement */
    gap: 30px; /* C'est l'écartement exact entre deux pastilles. Modifie ce chiffre si tu veux les rapprocher ou les éloigner */
    justify-content: flex-start; /* Aligne tout sagement à gauche */
    align-items: flex-start;
    width: 100%;
    margin-top: 15px;
}
/* ============================================================================ */
/* MOTEUR DE TRANSITION DE PAGE (EFFET CINÉMATOGRAPHIQUE PRO)                   */
/* ============================================================================ */

/* 1. État de départ : Tout le corps de la page est invisible pour empêcher le flash */
body {
    opacity: 0;
    /* Apparition avec un léger effet de mise au point (flou -> net) */
    animation: pageEntree 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes pageEntree {
    0% { opacity: 0; transform: scale(1.02) translateY(10px); filter: blur(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); }
}

/* 2. Animation de sortie (Déclenchée par Javascript au clic) */
body.page-sortie {
    /* Disparition avec un léger recul et perte de focus */
    animation: pageSortie 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes pageSortie {
    0% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); }
    100% { opacity: 0; transform: scale(0.98) translateY(-10px); filter: blur(3px); }
}

/* Nettoyage : On s'assure que main-app n'a pas d'animations parasites */
#main-app { animation: none; }

/* ============================================================================ */
/* LE REPERTOIRE EN SERPENTIN ("S" SHAPE LAYOUT)                                */
/* ============================================================================ */
.s-path-container {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Espace uniforme entre chaque étage */
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
}

.s-row {
    display: flex;
    align-items: center;
    width: 520px; /* Fixé rigidement : 3 pastilles (420px) + 2 flèches (100px) */
    margin: 0 auto; /* Centre parfaitement le serpentin dans la modale */
    position: relative;
}

/* Alignement standard : de gauche à droite */
.s-row-ltr {
    flex-direction: row;
    justify-content: flex-start;
}

/* Alignement inversé : de droite à gauche (Crée le virage du S) */
.s-row-rtl {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Style des flèches horizontales calibrées */
.s-arrow-horizontal {
    width: 50px; /* Largeur fixe pour le calcul du conteneur */
    font-size: 1.8em;
    font-weight: bold;
    color: var(--secondary);
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style des flèches verticales qui relient les étages */
.s-arrow-vertical {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--secondary);
    user-select: none;
    position: absolute;
    top: -48px; /* Positionné exactement dans le vide entre deux rangées */
    width: 140px; /* Même largeur qu'une pastille pour garantir un centrage parfait */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Positionnement de la flèche montante selon le sens du virage */
.s-row-ltr .s-arrow-vertical {
    right: 0; /* Se place pile au-dessus de la 3ème pastille (fin de ligne à droite) */
}

.s-row-rtl .s-arrow-vertical {
    left: 0; /* Se place pile au-dessus de la 1ère pastille (fin de ligne à gauche) */
}

/* ============================================================================ */
/* FORÇAGE DE L'ALIGNEMENT DES PASTILLES (GESTION DES ACTIVITÉS)                */
/* ============================================================================ */

/* 1. On force le conteneur principal à tout tasser à gauche */
#liste-tps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important; /* L'écartement exact que tu auras entre deux pastilles */
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* 2. On détruit les "boîtes invisibles" autour des pastilles */
#liste-tps .tp-wrapper {
    width: 140px !important; /* Taille stricte de la pastille */
    height: 140px !important; 
    margin: 0 !important;
    flex-grow: 0 !important; /* Interdit à la pastille de s'étirer horizontalement */
    flex-shrink: 0 !important;
}
/* ============================================================================ */
/* ADAPTATION POUR TÉLÉPHONES ET TABLETTES (RESPONSIVE DESIGN)                  */
/* ============================================================================ */
@media (max-width: 768px) {
    /* Libère la hauteur pour permettre le défilement au doigt sur tout l'écran */
    body {
        height: auto;
        overflow: auto;
    }

    /* Empile les colonnes verticalement au lieu de les garder côte à côte */
    .content-area {
        flex-direction: column;
        overflow: visible;
        padding: 10px;
    }

    /* Force les panneaux à prendre 100% de la largeur du téléphone */
    .left-panel, .right-panel, .panel {
        flex: none;
        width: 100%;
        overflow-y: visible;
        box-sizing: border-box;
    }

    /* Remplace la ligne de séparation verticale par une ligne horizontale */
    .right-panel {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid var(--border-light);
        padding-top: 20px;
    }

    /* Empile le menu supérieur pour éviter que les boutons ne sortent de l'écran */
    .top-banner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}