/* ============================================================
   SYSTÈME DE THEMING DYNAMIQUE
   ============================================================ */
:root {
    --color-primary: #004a99;
    --color-secondary: #34495e;
    --color-success: #27ae60;
    --color-warning: #e67e22;
    --color-bg-site: #f4f7f6;
    
    --bg-box-identite: #e3f2fd;
    --bg-box-societe: #f5f5f5;
    --bg-box-commercial: #e8f5e9;
    --bg-box-dossier: #fff3e0;

    --color-table-header: #333333;
}

/* ============================================================
   STYLES GLOBAUX
   ============================================================ */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100%;
    background-color: var(--color-bg-site);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    color: #333;
}

/* ============================================================
   CONTENEURS DE RAPPORTS & FORMULAIRES
   ============================================================ */

/* LE STANDARD "PRO" VALIDÉ : 900px max */
.report-container { 
    width: 95%; 
    align: center;
    max-width: 900px; 
    margin: 10px auto; 
    padding: 10px; 
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.filter-box { 
    background: #f8f9fa; 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    border: 1px solid #dee2e6; 
    display: flex; 
    align-items: center; 
    gap: 25px; 
}

/* Tableaux internes */
.report-container table { 
    width: 100%; 
    align: center;
    border-collapse: collapse; 
    margin-top: 2px; 
}

.report-container th { 
    background: var(--color-secondary); 
    color: white; 
    padding: 8px; 
    text-align: left;
    font-size: 0.7em; 
}

.report-container td { 
    padding: 5px; 
    border-bottom: 1px solid #eee; 
}

.total-row { 
    background: #34495e; 
    color: white; 
    font-weight: bold; 
}

/* Navigation */
.nav-menu { 
    background-color: #2c3e50; 
    display: flex; 
    justify-content: center; 
    padding: 12px; 
    gap: 15px; 
    flex-wrap: wrap; 
}

.nav-menu a { 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 13px;
    font-weight: bold; 
    text-transform: uppercase; 
}

.btn-dash { 
    background-color: #004a99; 
    padding: 5px 10px; 
    border-radius: 4px; 
}

/* Popups de confirmation (ex: send_demande.php) */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.popup { background: white; border-radius: 15px; text-align: center; max-width: 500px; width: 90%; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }

/* Gestion de l'impression */
@media print {
    .filter-box, .btn-print, .nav-menu {
        display: none !important;
    }
    .report-container {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
}


/* ============================================================
   FUSION : IDENTITÉ GESTEV (Cramignons/École + Admin)
   ============================================================ */
:root {
    /* Couleurs héritées */
    --color-primary: #004a99;
    --color-secondary: #34495e;
    --color-bordeaux-gestev: #800020;
    --color-bg-site: #f4f7f6;
    
    /* Backgrounds organisés */
    --bg-box-societe: #f5f5f5;
    --border-color: #ddd;
}

/* --- Base globale --- */
* { box-sizing: border-box; }
body { 
    margin: 0; padding: 20px; 
    background-color: var(--color-bg-site); 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* --- Structure Fiche (Basée sur le modèle magnifique) --- */
.societe-container {
    max-width: 800px;
    align: center;
    margin: 5px auto;
    background: white;
    padding: 5px;
    border-radius: 8px;
    border-top: 5px solid var(--color-primary); /* Bleu Gestev */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-size: 0.8em;
}

/* --- Structure Fiche (Basée sur le modèle magnifique) --- */
.societe-container-horaires {
    max-width: 800px;
    align: center;
    margin: 10px auto;
    background: white;
    padding: 10px;
    border-radius: 8px;
    border-top: 5px solid var(--color-primary); /* Bleu Gestev */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-size: 0.8em;
}


.societe-header {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.2em;
}

/* --- Sections & Blocs --- */
.societe-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--bg-box-societe);
    border-radius: 5px;
}

.societe-section-large {
    margin-bottom: 30px;
    padding: 25px; /* Augmenté un peu pour aérer */
    background-color: var(--bg-box-societe);
    border-radius: 5px;
    width: 100%;
    max-width: 900px;
}


.societe-section-bloc {
    margin-bottom: 15px;
    padding: 5px; 
    background-color: var(--bg-box-societe);
    border-radius: 5px;
    width: 100%;
    max-width: 900px;
   

/* Tasser l'interligne spécifiquement dans vos blocs */
.societe-section-bloc {
    /* ... vos propriétés existantes ... */
    
    /* C'est ici que l'interligne se joue pour le texte courant */
    line-height: 0.1 !important; 
}

/* Tasser l'espacement des tableaux dans ces blocs */
.societe-section-bloc table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.societe-section-bloc th, 
.societe-section-bloc td {
    /* Réduit l'espace vide interne des cellules */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    /* Force un interligne serré pour le texte dans les cellules */
    line-height: 1.0 !important; 
}



/* On cible les titres dans cette section pour leur donner de l'espace */
.societe-section-large h3 {
    margin-top: 0;
    margin-bottom: 20px; /* Ajoute de l'air sous le titre */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1em;
    color: var(--color-bordeaux-gestev);
}

/* On cible les titres dans cette section pour leur donner de l'espace */
.societe-section-bloc h3 {
    margin-top: 0;
    margin-bottom: 20px; /* Ajoute de l'air sous le titre */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1em;
    color: var(--color-bordeaux-gestev);
}


/* --- Cible spécifiquement l'espacement des champs --- */
.societe-section-large .form-group {
    margin-bottom: 40px; /* Augmente l'espace VERTICAL entre chaque champ */
}

/* --- Cible spécifiquement l'espacement des champs --- */
.societe-section-bloc .form-group {
    margin-bottom: 40px; /* Augmente l'espace VERTICAL entre chaque champ */
}


/* Si vous utilisez une grille à l'intérieur de cette section */
.societe-section-large .form-grid {
    gap: 60px; /* Augmente l'espace HORIZONTAL entre les colonnes */
}

/* Si vous utilisez une grille à l'intérieur de cette section */
.societe-section-bloc .form-grid {
    gap: 60px; /* Augmente l'espace HORIZONTAL entre les colonnes */
}

.societe-section h3 {
    margin-top: 0;
    font-size: 1.1em;
    color: var(--color-bordeaux-gestev); /* Accent bordeaux */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 15px;
}


/* On force le tableau à prendre toute la largeur disponible */
.societe-section-large table {
    width: 100%;
    border-collapse: collapse; /* Évite les doubles bordures */
    margin-top: 10px;
}

/* On force le tableau à prendre toute la largeur disponible */
.societe-section-bloc table {
    width: 100%;
    border-collapse: collapse; /* Évite les doubles bordures */
    margin-top: 10px;
}


/* On ajoute de l'espace autour du texte dans les cellules */
.societe-section-large th, 
.societe-section-large td {
    padding: 12px 15px; /* Le 12px gère l'espace haut/bas, 15px gauche/droite */
    text-align: left;
    border-bottom: 1px solid #ddd; /* Une ligne fine pour séparer les lignes */
}

.societe-section-large th {
    background-color: #f0f0f0; /* Un gris très léger pour le fond des titres */
    font-weight: bold;
}

.societe-section-bloc th {
    background-color: #f0f0f0; /* Un gris très léger pour le fond des titres */
    font-weight: bold;
}


/* --- Grille de champs (La fameuse grille) --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    
}

.form-group label {
    font-weight: bold;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 10px;
}

.form-group span {
    background: white;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    min-height: 38px;
}

/* Cibler le champ de saisie par son type */
input[type="text"] {
    color: #ff0033;        /* Couleur du texte saisi (ex: Gris foncé) */
    font-size: 16px;       /* Taille du texte saisi */
    font-weight: bold;     /* Optionnel : mettre en gras */
    padding: 8px;          /* Optionnel : ajouter un peu d'espace interne */
}

.form-group label {
    color: #000000;        /* Couleur du titre (ex: bordeaux) */
    font-size: 14px;       /* Taille du titre */
    font-weight: 600;      /* Épaisseur du titre */
}

input {
    width: 100%;
    padding: 12px 10px; /* Le premier chiffre (12px) augmente la hauteur verticale */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
}



/* Style pour les champs de saisie (inserts) */
input, select {
    width: 100%;
    padding: 8px 10px;        /* Réduit de 12px à 8px pour diminuer la hauteur */
    border: 1px solid #ccc;   /* Bordure plus discrète */
    border-radius: 4px;
    font-size: 0.5em;         /* Taille de police légèrement réduite */
    background-color: #fcfcfc;/* Fond très légèrement gris/blanc */
    color: #666;              /* Texte en gris plus foncé (moins agressif que le noir) */
}

/* Style spécifique pour le placeholder (le texte indicatif) */
input::placeholder {
    color: #bbb;              /* Placeholder en gris clair */
    font-size: 0.6em;
}

/* Réduction de l'espacement dans les groupes de formulaires */
.form-group {
    margin-bottom: 10px;      /* Resserrer l'espace entre les lignes */
}

.form-group label {
    font-size: 13px;          /* Titres des champs légèrement plus petits */
    color: #555;              /* Couleur plus douce pour le texte des labels */
}

/* Cette règle s'applique à tous les tableaux ayant la classe 'table-admin' */
.table-admin th, 
.table-admin td {
    text-align: left !important;
    padding-left: 10px;
}

#elevesTable thead th {
    text-align: left !important;
}



/* --- Ajustement Responsive Smartphone (Ajouter ceci à la fin) --- */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

ul, ol {
    font-size: 0.85em;
}


.btn-action { display: inline-block; padding: 6px 8px; border-radius: 4px; text-decoration: none; font-size: 10px; font-weight: bold; color: white; margin-left: 2px; }
        .btn-action.view { background-color: #3498db; }
        .btn-action.edit { background-color: var(--color-primary); }
        .btn-action.del { background-color: #e74c3c; }

/* Adaptation pour smartphones et tablettes */
@media screen and (max-width: 768px) {
    .form-grid {
        /* On force le passage à 1 seule colonne au lieu de 2 */
        grid-template-columns: 1fr !important;
        gap: 10px !important; /* Réduit un peu l'espacement pour gagner de la place */
    }
}