/* ==========================================================================
   VARIABLES ET CONFIGURATION
   ========================================================================== */
:root {
    /* Couleurs */
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --bg-neutral: #f8fafc; /* Fond gris très clair pour le tiers droit */
    --surface: #ffffff;    /* Fond blanc pur pour les inputs/modaux */
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    
    /* Structure */
    --radius: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Reset de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body, html {
    height: 100%;
    width: 100%;
    background-color: var(--bg-neutral);
    color: var(--text-dark);
    line-height: 1.5;
}

/* ==========================================================================
   LAYOUT PRINCIPAL (Mobile First)
   ========================================================================== */

.split-layout {
    display: flex;
    flex-direction: column; /* Empilé sur mobile */
    min-height: 100vh;
}

/* --- Tiers Gauche (Image / Bannière) --- */
.split-image {
    height: clamp(160px, 25vh, 300px);
    min-height: 160px;
    background-image: url('../images/fond.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.8));
    z-index: 1;
}

.brand-content {
    position: relative;
    z-index: 2;
    color: white;
}

.brand-content h1 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -1px;
}

.brand-content p {
    color: #cbd5e1;
    font-size: 0.9rem;
}

/* --- Tiers Droit (Contenu Blanc) --- */
/* Mobile : PAS de hauteur fixe ni de défilement interne. La page défile
   naturellement, la bannière se retire vers le haut et la barre d'adresse du
   navigateur peut se replier. Le défilement interne n'a de sens que sur PC,
   où l'image reste figée à gauche (voir la media query en bas de fichier). */
.split-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem; /* Espaces réduits sur mobile */
    background-color: var(--bg-neutral);
}

.form-logo {
    align-self: flex-start;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.form-container {
    width: 100%;
    max-width: 400px;
    margin: 1rem auto; /* Rapproche le formulaire du haut sur mobile */
}

/* ==========================================================================
   COMPOSANTS FORMULAIRE
   ========================================================================== */

.mobile-header {
    margin-bottom: 1.5rem;
}

.mobile-header h2 {
    font-size: 1.5rem;
    color: var(--text-dark);
}

.mobile-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-dark);
}

/* Astérisque signalant un champ obligatoire */
.requis {
    color: #b91c1c;
}

/* En-tête des pages membres : salutation et rôle sur une même ligne. */
.entete-membre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.input-group input {
    width: 100%;
    /* Les champs de type date portent une largeur minimale imposée par le
       navigateur : sans ceci, ils débordent d'une colonne étroite. */
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 1rem;
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.input-helper {
    display: flex;
    justify-content: flex-end; /* Aligne le lien à droite */
    margin-top: 0.5rem;
}

.link-muted {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.link-muted:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* --- Protection Anti-Spam (Honeypot) --- */
.hp-field {
    display: none; /* Cache le champ pour les humains */
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* --- Case à cocher (Se souvenir de moi, Sortie extérieure...) ---
   Sélecteur "label.checkbox-label" et non ".checkbox-label" seul : sinon la
   règle ".input-group label { display: block }" ci-dessus, plus spécifique,
   l'emporte et le centrage vertical ne s'applique jamais. */
label.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0; /* annule la marge des intitulés de champ */
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

a.btn {
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    margin-bottom: 10px;
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(2, 132, 199, 0.05);
}

.btn-outline {
    background-color: #e2e8f0;
    color: var(--text-dark);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(2, 132, 199, 0.05);
}

.divider {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 1.5rem 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.divider::before, .divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20%;
    height: 1px;
    background-color: var(--border);
}

.divider::before { left: 0; }
.divider::after { right: 0; }

/* Bouton secondaire discret (ex : "Se déconnecter" en bas de page) */
.btn-sm {
    width: auto;
    display: inline-flex;
    min-height: unset;
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* Menu de la page : onglets de navigation à gauche, déconnexion à droite.
   Simple bandeau délimité en haut et en bas, sans cadre fermé : les onglets
   s'alignent ainsi sur le bord du contenu de la page. Mobile first : ils
   passent naturellement à la ligne quand la largeur manque. */
.menu-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    margin: 0.75rem 0 1.5rem;
    background-color: var(--bg-neutral);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Mobile : les onglets se dimensionnent sur leur libellé (jamais coupé en deux
   lignes) puis s'étirent pour remplir la ligne ; ceux qui ne tiennent pas
   passent à la ligne suivante en entier. */
.menu-page .btn {
    flex: 1 1 auto;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
    /* Angles plus francs que les 8px des boutons d'action : dans une barre de
       navigation, des onglets trop arrondis font tache. */
    border-radius: 4px;
}

@media (min-width: 992px) {
    /* PC : chaque onglet reprend sa largeur naturelle, la déconnexion part à droite. */
    .menu-page .btn {
        flex: 0 0 auto;
        padding: 8px 20px;
        font-size: 0.85rem;
    }

    .menu-fin {
        margin-left: auto;
    }
}

/* Page courante : affichée mais non cliquable, en aplat plein pour qu'on la
   repère sans lire. Sélecteur à deux classes, délibérément : il doit l'emporter
   sur .btn-encadrant, qui impose sinon sa teinte chaude à l'entrée active. */
.menu-page .menu-actif {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/* Onglets menant aux pages d'encadrement (tableaux de bord, sorties
   extérieures) : teinte chaude qui reprend celle de leur barre latérale, pour
   signaler qu'on sort de l'espace personnel. */
.btn-encadrant {
    background-color: #e5cfb8;
    color: #6b4423;
}

.btn-encadrant:hover {
    background-color: #d8bda1;
    border-color: #8e6446;
    color: #573619;
}

/* Action secondaire du menu (déconnexion) : fond plus clair que les onglets,
   pour qu'elle ne se confonde pas avec la navigation. */
.btn-clair {
    background-color: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.btn-clair:hover {
    border-color: var(--primary);
    color: var(--primary);
}


/* ==========================================================================
   BANNIÈRE D'ERREUR (validation serveur) — commune à toutes les pages
   ========================================================================== */
.alert-error,
.alert-succes {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.alert-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* Confirmation d'une action réussie. Mêmes teintes que .pastille-verte, pour
   qu'un même code couleur veuille dire la même chose partout dans le site. */
.alert-succes {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.split-footer {
    margin-top: auto;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.footer-links {
    margin-top: 6px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.footer-links .separator {
    margin: 0 6px;
    color: #cbd5e1;
}



/* ==========================================================================
   RESPONSIVE DESKTOP (> 992px)
   ========================================================================== */

@media (min-width: 992px) {
    .split-layout {
        flex-direction: row;
    }

    .split-image {
        flex: 2; /* 2/3 de l'écran */
        height: 100vh;
        padding: 4rem;
        position: sticky;
        top: 0;
    }

    .image-overlay {
        background: linear-gradient(to right, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.2));
    }

    .brand-content h1 { font-size: 3rem; }
    .brand-content p { font-size: 1.2rem; }

    .split-form {
        flex: 1; /* 1/3 de l'écran */
        min-width: 480px;
        padding: 2.5rem 3.5rem;
        background-color: var(--surface); /* Blanc pur sur PC */
        box-shadow: -10px 0 50px rgba(0,0,0,0.05);
        /* L'image de gauche étant figée (sticky), c'est cette colonne qui
           défile de son côté. */
        height: 100vh;
        overflow-y: auto;
    }

    .form-logo { height: 55px; }

    .form-container {
        margin: auto; /* Centrage vertical parfait sur PC */
    }
}