/* ==========================================================================
   RESET ET STYLES GLOBAUX
   ========================================================================== */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Assure une gestion cohérente des marges et paddings */
}

/* Styles globaux */
body {
    font-family: Arial, sans-serif; /* Police par défaut */
    color: #333; /* Couleur de texte principale */
    line-height: 1.6; /* Espacement entre les lignes */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alignement au début */
    position: relative;
    overflow: auto; /* Permettre le défilement */
    min-height: 100vh; /* Hauteur minimale pour remplir l'écran */
	margin-top: 80px; /* Hauteur approximative de l'en-tête */
	
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Barre de navigation en haut */
header {
    position: fixed; /* Fixe en haut de la page */
    top: 0;
    width: 100%;
    background: #333; /* Fond sombre pour contraste */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Espace entre le logo et les liens */
    align-items: center;
    z-index: 1000; /* S'assure que le header reste au-dessus du contenu */
}

header .logo img {
    max-height: 50px; /* Taille maximale du logo */
}

header nav ul {
    list-style: none; /* Supprime les puces des listes */
    display: flex; /* Alignement horizontal des liens */
}

header nav ul li a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #fff; /* Texte blanc pour contraste */
    margin-left: 20px; /* Espacement entre les liens */
}

/* Bouton "Accès Pro" dans le header */
header nav ul li a.btn {
    background: #007BFF; /* Bleu principal */
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px; /* Coins arrondis */
    text-decoration: none;
}

header nav ul li a.btn:hover {
    background: #0056b3; /* Bleu plus foncé au survol */
}

/* ==========================================================================
   VIDEO EN ARRIÈRE-PLAN
   ========================================================================== */

#background-video {
    position: fixed; /* Fixe en arrière-plan */
    top: 0;
    left: 0;
    width: 100%; /* Remplit toute la largeur de l'écran */
    height: 100%; /* Remplit toute la hauteur de l'écran */
    object-fit: cover; /* Ajuste la vidéo pour couvrir tout l'écran */
    z-index: -1; /* Place la vidéo derrière tout le contenu */
}

/* ==========================================================================
   SECTION HERO (BIENVENUE)
   ========================================================================== */
.hero {
    text-align: center; /* Centrage du texte */
    margin-top: 50px; /* Marge pour éviter la superposition avec le header */
    z-index: 1; /* S'assure que le contenu est au-dessus de la vidéo */
}

.hero h1 {
    
    font-size: 3rem; /* Taille augmentée pour un impact visuel marquant */
    margin-bottom: 2px; /* Espacement avec le texte suivant */
}

.hero p:first-of-type {
    font-style: italic; /* Texte en italique */
    margin-bottom: 5px; /* Espacement avec le texte suivant */
}

.hero h2 {
    font-family: 'Impact', sans-serif; /* Police Impact pour un effet fort */
	font-size: 3rem; /* Taille modérée pour un bon équilibre visuel */
    margin-top: 10px; /* Espace au-dessus */
    margin-bottom: 15px; /* Espace en dessous */
}

.hero p:last-of-type {
    margin-top: 5px;
}

/* ==========================================================================
   SECTION CONTACT
   ========================================================================== */

.contact-section {
    display: flex;
    justify-content: space-around; /* Espacement égal entre les deux colonnes */
    width: 80%; /* Largeur modérée pour un affichage propre */
    margin: 50px auto; /* Centrage horizontal */
    z-index: 1; /* Au-dessus de la vidéo */
}

.contact-info,
.contact-form {
    width: 45%; /* Deux colonnes de taille égale */
}

/* Mise en gras pour "Siège social" et "Antenne Marie-Galante" */
.contact-info strong {
    font-weight: bold; /* Texte en gras */
}

/* Fond semi-transparent avec coins arrondis */
.hero,
.contact-section .contact-info,
.contact-section .contact-form,
.waiting-block {
    background: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour mieux distinguer les sections */
}

.contact-form input,
.contact-form textarea {
    width: 100%; /* Remplit toute la largeur disponible */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd; /* Bordure discrète */
    border-radius: 4px; /* Coins arrondis */
}

.contact-form button {
    background: #007BFF; /* Bleu principal */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form button:hover {
    background: #0056b3; /* Bleu plus foncé au survol */
}

/* Style pour la case à cocher */
.contact-form label {
    display: flex;
    align-items: center; /* Alignement vertical du texte et de la case */
    margin-top: 10px;
}

.contact-form input[type="checkbox"] {
    margin-right: 10px; /* Espace entre la case et le texte */
}

/* ==========================================================================
   SECTION ATTENTE
   ========================================================================== */

.waiting-block {
    text-align: center; /* Centrage du texte */
    margin-bottom: 50px; /* Marge inférieure pour espacer du footer */
    z-index: 1; /* Au-dessus de la vidéo */
}

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

footer {
    position: fixed; /* Fixe en bas de la page */
    bottom: 0;
    width: 100%;
    background: #333; /* Fond sombre pour contraste */
    color: #fff; /* Texte blanc pour visibilité */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Alignement gauche/droite */
    align-items: center;
    z-index: 1000; /* S'assure que le footer reste au-dessus du contenu */
}

footer p {
    margin: 0; /* Suppression de la marge par défaut */
}

footer a {
    color: #fff; /* Liens en blanc */
    text-decoration: none; /* Supprime le soulignement */
    margin: 0 10px; /* Espacement entre les liens */
}

/* Icônes des réseaux sociaux */
footer .social-icons {
    display: flex;
    justify-content: center; /* Centrage horizontal */
    gap: 15px; /* Espacement entre les icônes */
    margin-top: 10px;
}

footer .social-icons a {
    text-decoration: none;
    color: #fff; /* Icônes blanches */
    font-size: 1.5rem; /* Taille des icônes */
    transition: transform 0.3s ease; /* Animation fluide */
}

footer .social-icons a:hover {
    transform: scale(1.2); /* Effet d'agrandissement au survol */
}

/* ==========================================================================
   PAGE DE CONNEXION
   ========================================================================== */

.login-container {
    width: 300px; /* Largeur fixe pour une apparence compacte */
    margin: 100px auto; /* Centrage horizontal */
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* Fond blanc semi-transparent */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    text-align: center; /* Centrage du contenu */
}

.login-container input {
    width: 100%; /* Remplit toute la largeur disponible */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd; /* Bordure discrète */
    border-radius: 4px; /* Coins arrondis */
}

.error {
    color: red; /* Messages d'erreur en rouge */
    margin-bottom: 10px; /* Espacement sous le message */
}

.login-container button {
    background: #007BFF; /* Bleu principal */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.login-container button:hover {
    background: #0056b3; /* Bleu plus foncé au survol */
}

/* ==========================================================================
   MESSAGES D'ALERTE
   ========================================================================== */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    width: 80%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 1001; /* Supérieur à celui de l'en-tête */
    margin-top: 20px; /* Espacement entre l'en-tête et le message */
}

.alert-success {
    background-color: #d4edda; /* Vert clair pour succès */
    color: #155724; /* Texte vert foncé */
    border-color: #c3e6cb; /* Bordure verte */
}

.alert-info {
    background-color: #d1ecf1; /* Bleu clair pour information */
    color: #0c5460; /* Texte bleu foncé */
    border-color: #bee5eb; /* Bordure bleue */
}

.alert-error {
    background-color: #f8d7da; /* Rouge clair pour erreur */
    color: #721c24; /* Texte rouge foncé */
    border-color: #f5c6cb; /* Bordure rouge */
}

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

button,
.btn {
    background-color: #007BFF; /* Bleu principal */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition fluide */
}

button:hover,
.btn:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
}

/* Bouton Supprimer */
.delete-btn {
    background-color: #dc3545; /* Rouge principal */
}

.delete-btn:hover {
    background-color: #b02a37; /* Rouge plus foncé au survol */
}

/* Bouton Modifier */
.edit-btn {
    background-color: #ffc107; /* Jaune principal */
    color: #000; /* Texte noir pour contraste */
}

.edit-btn:hover {
    background-color: #e0a800; /* Jaune plus foncé au survol */
}

/* ==========================================================================
   TABLEAU DE DONNÉES
   ========================================================================== */

.styled-table {
    width: 100%; /* Remplit toute la largeur disponible */
    border-collapse: collapse; /* Supprime les bordures doubles */
    margin: 25px 0; /* Espacement autour du tableau */
    font-size: 0.9em; /* Taille de police modérée */
    font-family: Arial, sans-serif; /* Police par défaut */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* Ombre légère */
}

.styled-table thead tr {
    background-color: #007BFF; /* Bleu principal pour l'en-tête */
    color: #fff; /* Texte blanc */
    text-align: left; /* Alignement du texte à gauche */
}

.styled-table th,
.styled-table td {
    padding: 12px 15px; /* Espacement interne */
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd; /* Ligne de séparation entre les lignes */
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3; /* Alternance de couleur pour une meilleure lisibilité */
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #007BFF; /* Ligne plus épaisse pour la dernière ligne */
}

/* Titre principal */
.main-title {
    text-align: center;
    font-size: 2rem;
    margin-top: 100px; /* Espacement depuis l'en-tête */
    margin-bottom: 30px; /* Espacement avant le tableau */
    color: #007BFF; /* Bleu principal */
}

/* Pastilles de statut */
.status-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

.success {
    background-color: #d4edda;
    color: #155724;
}

.warning {
    background-color: #fff3cd;
    color: #856404;
}

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

/* Espacement pour le contenu principal */
main {
    margin-top: 100px; /* Décale le contenu sous l'en-tête */
    padding: 20px; /* Ajoute un peu d'espace autour du contenu */
    max-width: 800px; /* Limite la largeur pour un affichage propre */
    margin-left: auto;
    margin-right: auto; /* Centre le contenu horizontalement */
}

/* En-tête fixe avec espace pour éviter le chevauchement */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #333;
    z-index: 1000;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour mieux distinguer l'en-tête */
}

/* Styles spécifiques pour le tableau dans acces_pro.php */
.styled-table {
    width: 100%; /* Le tableau occupe toute la largeur */
    border-collapse: collapse;
    margin-top: 20px; /* Espacement entre le titre et le tableau */
}

.styled-table th,
.styled-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.styled-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Styles pour les boutons dans le tableau */
.btn {
    display: inline-block;
    padding: 5px 10px; /* Réduit la hauteur et la largeur des boutons */
    font-size: 0.9em; /* Taille de police légèrement réduite */
    text-decoration: none;
    color: #fff;
    background-color: #007BFF; /* Bleu standard */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px; /* Espacement entre les boutons */
}

.btn:hover {
    background-color: #0056b3; /* Couleur au survol */
}

.edit-btn {
    background-color: #28a745; /* Vert pour "Modifier" */
}

.edit-btn:hover {
    background-color: #1e7e34; /* Vert foncé au survol */
}

.delete-btn {
    background-color: #dc3545; /* Rouge pour "Supprimer" */
}

.delete-btn:hover {
    background-color: #bd2130; /* Rouge foncé au survol */
}

/* Classe pour désactiver la largeur maximale sur certaines pages */
.full-width {
    max-width: none; /* Annule la restriction de largeur */
    margin-left: auto;
    margin-right: auto;
}

/* Styles pour rendre le tableau responsive */
@media (max-width: 768px) {
    .styled-table th,
    .styled-table td {
        display: block;
        width: 100%;
        text-align: right;
    }

    .styled-table th::before,
    .styled-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    .styled-table th,
    .styled-table td {
        padding: 10px;
    }

    /* Styles pour les boutons */
    .btn {
        display: block;
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }
}