/* Variables CSS pour les couleurs et espacements, en cohérence avec le reste de l'application */
:root {
    --primary-color: #0056b3; /* Couleur principale, un bleu institutionnel */
    --secondary-color: #003d7a; /* Couleur secondaire, un bleu plus foncé */
    --accent-color: #ffc107; /* Couleur d'accentuation, un jaune/orange vif */
    --text-color-dark: #333; /* Couleur de texte sombre pour la lisibilité */
    --text-color-light: #f4f4f4; /* Couleur de texte clair pour les fonds sombres */
    --bg-light: #f9f9f9; /* Arrière-plan général clair */
    --bg-dark: #2c3e50; /* Arrière-plan foncé pour les sections spécifiques */
    --border-color: #ddd; /* Couleur des bordures neutres */
    --card-bg: #fff; /* Arrière-plan des cartes et formulaires */

    --spacing-xs: 5px; /* Très petit espacement */
    --spacing-sm: 10px; /* Petit espacement */
    --spacing-md: 20px; /* Espacement moyen */
    --spacing-lg: 40px; /* Grand espacement */
    --spacing-xl: 80px; /* Très grand espacement */

    --font-family-primary: 'Inter', sans-serif; /* Police de caractères principale */
    --border-radius: 8px; /* Rayon de bordure par défaut pour les éléments */
    --transition-speed: 0.3s; /* Vitesse des transitions pour les effets au survol */

    --error-bg: #ffebeb; /* Fond rouge très clair */
    --error-color: #cc0000; /* Texte rouge foncé */
    --error-border: #ff8080; /* Bordure rouge */
}

/* Styles de base et réinitialisation pour le corps de la page */
body {
    font-family: var(--font-family-primary); /* Applique la police définie dans les variables */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité du texte */
    color: var(--text-color-dark); /* Couleur du texte par défaut */
    background-color: var(--bg-light); /* Couleur de fond de la page */
    margin: 0; /* Supprime la marge par défaut du corps */
    padding: 0; /* Supprime le padding par défaut du corps */
    display: flex; /* Utilise Flexbox pour organiser le contenu */
    flex-direction: column; /* Empile les éléments verticalement */
    min-height: 100vh; /* Assure que la page occupe au moins toute la hauteur de la fenêtre */
}

a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: var(--primary-color); /* Met la couleur des liens en bleu principal */
}

a:hover {
    color: var(--secondary-color); /* Change la couleur des liens au survol en bleu plus foncé */
}

ul {
    list-style: none; /* Supprime les puces des listes */
    margin: 0; /* Supprime la marge par défaut des listes */
    padding: 0; /* Supprime le padding par défaut des listes */
}

/* Styles pour le conteneur général (utilisé pour centrer le contenu) */
.container {
    max-width: 1200px; /* Définit une largeur maximale pour le contenu */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    padding: 0 var(--spacing-md); /* Ajoute un padding latéral sur les côtés */
}

/* Styles pour les boutons réutilisables */
.btn {
    display: inline-block; /* Permet d'appliquer des dimensions et des marges */
    padding: var(--spacing-sm) var(--spacing-md); /* Padding interne pour le bouton */
    border-radius: var(--border-radius); /* Bords arrondis pour un aspect doux */
    font-weight: 600; /* Texte en gras pour l'importance */
    text-align: center; /* Centre le texte à l'intérieur du bouton */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease; /* Transitions douces pour les changements de style */
    cursor: pointer; /* Indique que l'élément est cliquable */
    border: none; /* Supprime la bordure par défaut des boutons */
}

.btn-primary {
    background-color: var(--primary-color); /* Fond en couleur principale (bleu) */
    color: var(--text-color-light); /* Texte en couleur claire */
    border: 2px solid var(--primary-color); /* Bordure en couleur principale */
}

.btn-primary:hover {
    background-color: var(--secondary-color); /* Change le fond au survol en bleu plus foncé */
    border-color: var(--secondary-color); /* Change la bordure au survol */
}

/* Styles pour le Header de la page de connexion */
.header {
    background-color: var(--card-bg); /* Fond blanc pour l'en-tête */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Ajoute une ombre subtile sous l'en-tête */
    padding: var(--spacing-md) 0; /* Padding vertical pour l'en-tête */
    width: 100%; /* L'en-tête prend toute la largeur disponible */
    z-index: 1000; /* Assure que l'en-tête est au-dessus des autres éléments */
}

.nav-container {
    padding: 0 var(--spacing-md); /* Padding latéral pour le contenu de la navigation */
}

.nav-content {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: flex-start; /* Aligne le contenu au début (gauche) */
    align-items: center; /* Centre les éléments verticalement */
    max-width: 1200px; /* Largeur maximale pour le contenu de la navigation */
    margin: 0 auto; /* Centre le contenu de la navigation */
}

.logo-section {
    display: flex; /* Utilise Flexbox pour l'icône et le texte du logo */
    align-items: center; /* Centre les éléments verticalement */
    gap: var(--spacing-sm); /* Espacement entre l'icône et le texte */
}

.logo-icon {
    font-size: 2em; /* Taille de l'icône du logo */
    color: var(--primary-color); /* Couleur de l'icône en bleu principal */
}

.logo-text h1 {
    font-size: 1.5em; /* Taille de police du titre du logo */
    color: var(--secondary-color); /* Couleur du titre en bleu foncé */
    margin: 0; /* Supprime la marge par défaut */
    line-height: 1; /* Réduit la hauteur de ligne pour compacter */
}

.logo-text span {
    display: block; /* Affiche le slogan sur une nouvelle ligne */
    font-size: 0.8em; /* Taille de police plus petite pour le slogan */
    color: #777; /* Couleur grise pour le slogan */
    margin-top: 2px; /* Petite marge au-dessus du slogan */
}

/* Conteneur principal de la page de connexion */
.login-container {
    flex-grow: 1; /* Permet au conteneur de prendre l'espace restant */
    display: flex; /* Utilise Flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: var(--spacing-lg) var(--spacing-md); /* Padding autour du conteneur de connexion */
    background-color: var(--bg-light); /* Fond clair */
}

/* Carte de connexion (le grand bloc blanc) */
.login-card {
    background-color: var(--card-bg); /* Fond blanc pour la carte */
    border-radius: var(--border-radius); /* Bords arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Ombre prononcée pour donner de la profondeur */
    display: flex; /* Utilise Flexbox pour organiser les sections gauche et droite */
    max-width: 900px; /* Largeur maximale de la carte */
    width: 100%; /* La carte prend toute la largeur disponible */
    overflow: hidden; /* Cache tout débordement de contenu */
}

/* Section gauche de la carte de connexion (informations sur les fonctionnalités) */
.login-left {
    flex: 1; /* Prend l'espace disponible */
    padding: var(--spacing-lg); /* Padding interne */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); /* Dégradé de fond bleu */
    color: var(--text-color-light); /* Texte clair sur le dégradé */
    display: flex; /* Utilise Flexbox */
    flex-direction: column; /* Empile les éléments verticalement */
    justify-content: center; /* Centre le contenu verticalement */
}

.login-left h2 {
    font-size: 2em; /* Taille du titre de bienvenue */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
    line-height: 1.2; /* Hauteur de ligne */
}

.login-left p {
    font-size: 1.1em; /* Taille du paragraphe de description */
    margin-bottom: var(--spacing-lg); /* Marge inférieure */
    opacity: 0.9; /* Légère transparence */
}

.features-list {
    display: flex; /* Utilise Flexbox pour la liste de fonctionnalités */
    flex-direction: column; /* Empile les éléments verticalement */
    gap: var(--spacing-md); /* Espacement entre les éléments de la liste */
}

.features-list li {
    display: flex; /* Utilise Flexbox pour chaque élément de liste */
    align-items: center; /* Centre les icônes et le texte verticalement */
    gap: var(--spacing-md); /* Espacement entre l'icône et le texte */
}

.features-list .feature-icon {
    font-size: 1.8em; /* Taille des icônes de fonctionnalité */
    color: var(--accent-color); /* Couleur des icônes en jaune/orange */
    width: 40px; /* Largeur fixe pour l'icône */
    height: 40px; /* Hauteur fixe pour l'icône */
    display: flex; /* Utilise Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    background-color: rgba(255, 193, 7, 0.15); /* Fond légèrement transparent pour l'icône */
    border-radius: 50%; /* Forme circulaire pour l'icône */
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.features-list strong {
    font-size: 1.1em; /* Taille de police pour le titre de la fonctionnalité */
    display: block; /* Affiche le titre sur une nouvelle ligne */
    margin-bottom: 2px; /* Petite marge sous le titre */
}

.features-list p {
    font-size: 0.9em; /* Taille de police pour la description de la fonctionnalité */
    margin: 0; /* Supprime la marge par défaut */
    opacity: 0.8; /* Légère transparence */
}

/* Section droite de la carte de connexion (le formulaire) */
.login-right {
    flex: 1; /* Prend l'espace disponible */
    padding: var(--spacing-lg); /* Padding interne */
    display: flex; /* Utilise Flexbox */
    flex-direction: column; /* Empile les éléments verticalement */
    justify-content: center; /* Centre le contenu verticalement */
}

.login-header {
    text-align: center; /* Centre le texte de l'en-tête du formulaire */
    margin-bottom: var(--spacing-lg); /* Marge inférieure */
}

.login-header h2 {
    font-size: 2em; /* Taille du titre "Connexion" */
    color: var(--primary-color); /* Couleur du titre en bleu principal */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
}

.login-header p {
    font-size: 1em; /* Taille du paragraphe de description */
    color: #666; /* Couleur grise pour la description */
}

.form-group {
    margin-bottom: var(--spacing-md); /* Marge inférieure pour chaque groupe de formulaire */
}

.form-group label {
    display: block; /* Affiche le label sur une nouvelle ligne */
    font-size: 0.95em; /* Taille de police du label */
    color: var(--text-color-dark); /* Couleur du label */
    margin-bottom: var(--spacing-xs); /* Petite marge sous le label */
    font-weight: 500; /* Poids de police moyen */
}

.input-with-icon {
    position: relative; /* Position relative pour positionner l'icône */
}

.input-icon {
    position: absolute; /* Position absolue pour l'icône */
    left: var(--spacing-sm); /* Décalage à gauche */
    top: 50%; /* Centre verticalement */
    transform: translateY(-50%); /* Ajuste le centrage vertical */
    color: #999; /* Couleur grise pour l'icône */
    font-size: 1.1em; /* Taille de l'icône */
}

.form-group input[type="email"],
.form-group input[type="password"] {
    width: 90%; 
    padding: 10px 15px 10px 40px; /* Padding interne, avec espace pour l'icône */
    border: 1px solid var(--border-color); /* Bordure */
    border-radius: var(--border-radius); /* Bords arrondis */
    font-family: var(--font-family-primary); /* Applique la police principale */
    font-size: 1em; /* Taille de police */
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; /* Transitions douces */
}

.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
    border-color: var(--primary-color); /* Bordure bleue au focus */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); /* Ombre bleue au focus */
    outline: none; /* Supprime l'outline par défaut du navigateur */
}

.remember-forgot {
    display: flex; /* Utilise Flexbox */
    justify-content: space-between; /* Espace les éléments aux extrémités */
    align-items: center; /* Centre verticalement */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
    font-size: 0.9em; /* Taille de police plus petite */
}

.remember-me {
    display: flex; /* Utilise Flexbox */
    align-items: center; /* Centre verticalement */
    gap: var(--spacing-xs); /* Espacement entre la checkbox et le label */
}

.remember-me input[type="checkbox"] {
    accent-color: var(--primary-color); /* Met la couleur de la checkbox en bleu principal */
}

.forgot-password {
    color: var(--primary-color); /* Met le lien en bleu principal */
}

.forgot-password:hover {
    text-decoration: underline; /* Souligne le lien au survol */
}

.login-right .btn-primary {
    width: 100%; /* Le bouton de connexion prend toute la largeur */
    padding: var(--spacing-sm); /* Padding interne */
    font-size: 1.1em; /* Taille de police plus grande */
    margin-top: var(--spacing-md); /* Marge supérieure */
}

.divider {
    display: flex; 
    align-items: center; 
    text-align: center; /* Centre le texte */
    margin: var(--spacing-md) 0; /* Marge verticale */
    color: #aaa; /* Couleur grise pour le diviseur */
}

.divider::before,
.divider::after {
    content: ''; /* Contenu vide pour les lignes */
    flex: 1; /* Prend l'espace restant */
    border-bottom: 1px solid #eee; /* Ligne grise légère */
}

.divider-text {
    padding: 0 var(--spacing-sm); 
}

.social-login {
    display: flex; 
    justify-content: center; 
    gap: var(--spacing-md); 
    margin-bottom: var(--spacing-md); 
}

.social-btn {
    background-color: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius); 
    padding: var(--spacing-sm) var(--spacing-md); 
    font-size: 1.2em; 
    transition: all var(--transition-speed) ease; 
   /* width: 60px; 
    height: 60px; */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 

     
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.signup-link {
    text-align: center; /* Centre le texte du lien d'inscription */
    font-size: 0.9em; /* Taille de police plus petite */
    color: #666; /* Couleur grise */
    margin-top: var(--spacing-md); /* Marge supérieure */
}

.signup-link a {
    font-weight: 600; /* Texte en gras pour le lien */
}

/* Styles pour le Footer (reprise des styles de main_style.css) */
.footer {
    background-color: var(--bg-dark); /* Fond foncé pour le pied de page */
    color: var(--text-color-light); /* Texte clair */
    padding: var(--spacing-xl) 0 var(--spacing-md) 0; /* Padding vertical */
    margin-top: auto; /* Pousse le footer vers le bas de la page */
}

.footer-content {
    display: grid; /* Utilise Grid pour le contenu du pied de page */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes responsives */
    gap: var(--spacing-lg); /* Espacement entre les sections */
    margin-bottom: var(--spacing-lg); /* Marge inférieure */
}

.footer-section {
    margin-bottom: var(--spacing-md); /* Marge inférieure pour les sections du pied de page */
}

.footer-logo {
    display: flex; /* Utilise Flexbox pour le logo du pied de page */
    align-items: center; /* Centre les éléments verticalement */
    gap: var(--spacing-sm); /* Espacement */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
}

.footer-logo .logo-icon {
    font-size: 2.5em; /* Taille de l'icône du logo */
    color: var(--accent-color); /* Couleur de l'icône */
}

.footer-logo .logo-text h3 {
    font-size: 1.5em; /* Taille du titre du logo */
    color: var(--text-color-light); /* Couleur du texte */
    margin: 0; /* Réinitialise la marge */
    line-height: 1; /* Hauteur de ligne réduite */
}

.footer-logo .logo-text p {
    font-size: 0.8em; /* Taille de la description du logo */
    opacity: 0.8; /* Légère transparence */
    margin-top: 2px; /* Marge supérieure */
}

.footer-description {
    font-size: 0.95em; /* Taille de la description du pied de page */
    line-height: 1.7; /* Hauteur de ligne */
    opacity: 0.9; /* Légère transparence */
}

.footer-section h4 {
    font-size: 1.2em; /* Taille du titre de section du pied de page */
    color: var(--accent-color); /* Couleur du titre */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
    position: relative; /* Position relative pour l'underline */
    padding-bottom: var(--spacing-xs); /* Padding inférieur pour l'underline */
}

.footer-section h4::after {
    content: ''; /* Contenu vide */
    position: absolute; /* Position absolue */
    left: 0; /* Commence à gauche */
    bottom: 0; /* En bas */
    width: 50px; /* Largeur de l'underline */
    height: 2px; /* Hauteur de l'underline */
    background-color: var(--accent-color); /* Couleur de l'underline */
}

.footer-links {
    padding: 0; /* Réinitialise le padding */
}

.footer-links li {
    margin-bottom: var(--spacing-xs); /* Marge inférieure pour les éléments de liste */
}

.footer-links a {
    color: var(--text-color-light); /* Couleur des liens */
    opacity: 0.9; /* Légère transparence */
    display: flex; /* Utilise Flexbox pour l'icône et le texte */
    align-items: center; /* Centre les éléments verticalement */
    gap: var(--spacing-xs); /* Espacement */
}

.footer-links a:hover {
    color: var(--accent-color); /* Couleur des liens au survol */
    opacity: 1; /* Opacité complète */
}

/* Styles spécifiques pour les éléments de contact dans le footer */
.contact-item-footer {
    display: flex; /* Utilise Flexbox pour aligner l'icône et le texte */
    align-items: center; /* Centre verticalement */
    gap: var(--spacing-sm); /* Espacement entre l'icône et le texte */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
    color: var(--text-color-light); /* Texte clair */
    opacity: 0.9; /* Légère transparence */
}

.contact-item-footer i {
    font-size: 1.1em; /* Taille de l'icône */
    color: var(--accent-color); /* Couleur de l'icône en jaune/orange */
}

.footer-bottom {
    text-align: center; /* Centre le contenu du bas du pied de page */
    padding-top: var(--spacing-md); /* Padding supérieur */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation légère */
    margin-top: var(--spacing-lg); /* Marge supérieure */
}

.footer-bottom p {
    font-size: 0.9em; /* Taille de police du texte de copyright */
    opacity: 0.8; /* Légère transparence */
    margin-top: var(--spacing-md); /* Marge supérieure */
}

/* erreur style*/
.error-message {
    background-color: var(--error-bg);
    color: var(--error-color);
    border: 1px solid var(--error-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9em;
    animation: slideIn 0.3s ease-out;
}

/* Media Queries pour la Responsivité */

/* Pour les écrans de taille moyenne (tablettes et petits ordinateurs) */
@media (max-width: 900px) {
    .login-card {
        flex-direction: column; /* Empile les sections gauche et droite verticalement */
        max-width: 500px; /* Réduit la largeur maximale de la carte */
    }

    .login-left {
        display: none;
        padding: var(--spacing-md); /* Réduit le padding de la section gauche */
        text-align: center; /* Centre le texte de la section gauche */
    }

    .login-left h2 {
        font-size: 1.8em; /* Réduit la taille du titre de bienvenue */
    }

    .login-left p {
        font-size: 1em; /* Réduit la taille du paragraphe de description */
    }

    .features-list {
        align-items: center; /* Centre les éléments de la liste de fonctionnalités */
    }

    .login-right {
        padding: var(--spacing-md); /* Réduit le padding de la section droite (formulaire) */
    }

    .login-header h2 {
        font-size: 1.8em; /* Réduit la taille du titre de connexion */
    }

    .login-header p {
        font-size: 0.9em; /* Réduit la taille du paragraphe de description du formulaire */
    }

    .social-login {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajuste les colonnes du footer */
    }
}

/* Pour les écrans de petite taille (mobiles) */
@media (max-width: 576px) {
    .header {
        padding: var(--spacing-sm) 0; /* Réduit le padding de l'en-tête */
    }

    .logo-text h1 {
        font-size: 1.2em; /* Réduit la taille du titre du logo */
    }

    .logo-text span {
        font-size: 0.7em; /* Réduit la taille du slogan */
    }

    .login-container {
        padding: var(--spacing-md) var(--spacing-sm); /* Réduit le padding du conteneur de connexion */
    }

    .login-card {
        box-shadow: none; /* Supprime l'ombre de la carte sur les très petits écrans */
        border-radius: 0; /* Supprime les bords arrondis pour une intégration pleine largeur */
    }

    .login-left {
        padding: var(--spacing-md) var(--spacing-sm); /* Réduit le padding de la section gauche */
    }

    .login-left h2 {
        font-size: 1.5em; /* Réduit encore la taille du titre de bienvenue */
    }

    .login-left p {
        font-size: 0.9em; /* Réduit encore la taille du paragraphe de description */
    }

    .features-list li {
        flex-direction: column; /* Empile l'icône et le texte de la fonctionnalité */
        text-align: center; /* Centre le texte */
        gap: var(--spacing-xs); /* Réduit l'espacement */
    }

    .features-list .feature-icon {
        font-size: 1.5em; /* Réduit la taille des icônes de fonctionnalité */
        width: 35px; /* Réduit la taille de l'icône */
        height: 35px; /* Réduit la taille de l'icône */
    }

    .login-right {
        padding: var(--spacing-md) var(--spacing-sm); /* Réduit le padding de la section droite */
    }

    .login-header h2 {
        font-size: 1.5em; /* Réduit encore la taille du titre de connexion */
    }

    .form-group label {
        font-size: 0.85em; /* Réduit la taille de police du label */
    }

    .form-group input {
        padding: 8px 12px 8px 35px; /* Ajuste le padding pour l'icône */
        font-size: 0.9em; /* Réduit la taille de police des inputs */
    }

    .input-icon {
        font-size: 1em; /* Réduit la taille de l'icône dans l'input */
        left: var(--spacing-xs); /* Ajuste le positionnement de l'icône */
    }

    .remember-forgot {
        flex-direction: column; /* Empile les éléments "se souvenir" et "mot de passe oublié" */
        align-items: flex-start; /* Aligne au début */
        gap: var(--spacing-sm); /* Ajoute un espacement */
    }



    .signup-link {
        font-size: 0.8em; 
    }

    .footer-content {
        grid-template-columns: 1fr; /* Une seule colonne pour le footer */
        text-align: center; /* Centre le texte du footer */
    }

    .footer-section h4::after {
        left: 50%; /* Centre l'underline des titres du footer */
        transform: translateX(-50%); /* Ajuste le centrage */
    }

    .footer-links li {
        justify-content: center; /* Centre les liens du footer */
    }

    .contact-item-footer {
        justify-content: center; /* Centre les éléments de contact du footer */
    }
}