/* =====================================================
   ELEMENTS GLOBAUX
   Styles appliqués à l'ensemble de la page
   ===================================================== */

body {
    /* Définit la police par défaut du site */
    font-family: Arial, sans-serif;
}

/* =====================================================
   HEADER
   Styles de l'en-tête du site
   ===================================================== */

header {
    /* Couleur de fond bleu clair */
    background-color: #e0f7fa;

    /* Espacement intérieur */
    padding: 20px;

    /* Espacement extérieur */
    margin: 40px;

    /* Alignement du texte à droite */
    text-align: right;
}

/* Liens de navigation */
nav a {
    /* Texte en majuscules */
    text-transform: uppercase;

    /* Taille du texte */
    font-size: 32px;

    /* Suppression du soulignement */
    text-decoration: none;

    /* Couleur du texte */
    color: blue;
}

/* Effet au survol des liens */
nav a:hover {
    /* Change la couleur au passage de la souris */
    color: teal;
}

/* =====================================================
   CONTENU PRINCIPAL
   Zone centrale de la page
   ===================================================== */

#principal {
    /* Largeur maximale du contenu */
    max-width: 800px;

    /* Centre horizontalement le bloc */
    margin: 0 auto;

    /* Centre le texte */
    text-align: center;
}

/* Image illustrative flottante */
#illustration {
    /* Aligne l'image à droite */
    float: right;

    /* Largeur fixe */
    width: 350px;

    /* Hauteur automatique pour conserver les proportions */
    height: auto;
}

/* =====================================================
   IMAGES & CONTENEURS FLEX
   ===================================================== */

/* Image de bannière */
#banniere {
    /* Largeur relative à l'écran */
    width: 75%;

    /* Hauteur automatique */
    height: auto;

    /* Comportement de type bloc */
    display: block;

    /* Centrage horizontal */
    margin: 0 auto;
}

/* Bloc de texte dans un conteneur flex */
.texte {
    /* Occupe 8 parts de l'espace disponible */
    flex: 8;

    /* Justifie le texte */
    text-align: justify;
}

/* =====================================================
   TABLEAUX
   ===================================================== */

/* Tableau principal */
.tableau {
    /* Occupe toute la largeur disponible */
    width: 100%;

    /* Fusionne les bordures */
    border-collapse: collapse;

    /* Marge au-dessus du tableau */
    margin-top: 40px;

    /* Centre le texte */
    text-align: center;
}

/* En-tête du tableau */
.tableau thead {
    /* Fond gris clair */
    background-color: #e0e0e0;
}

/* Cellules d'en-tête */
.tableau th {
    /* Espacement intérieur */
    padding: 15px;

    /* Supprime les bordures */
    border: none;
}

/* =====================================================
   FOOTER
   Pied de page du site
   ===================================================== */

.footer {
    /* Couleur de fond */
    background-color: #e0f7fa;

    /* Espacement intérieur */
    padding: 60px;

    /* Espacement extérieur */
    margin: 40px;
}

/* Conteneur principal du footer */
.footer-contenu {
    /* Active Flexbox */
    display: flex;

    /* Espacement entre les colonnes */
    gap: 30px;

    /* Texte justifié */
    text-align: justify;
}

/* Colonnes du footer */
.footer-colonne {
    /* Chaque colonne prend la même largeur */
    flex: 1;

    /* Marges latérales importantes */
    margin-left: 120px;
    margin-right: 120px;
}

/* Texte de copyright */
#footer-copyright {
    /* Marge au-dessus */
    margin-top: 40px;

    /* Alignement à gauche */
    text-align: left;
}

/* =====================================================
   FORMULAIRES
   ===================================================== */

form {
    /* Largeur maximale du formulaire */
    max-width: 500px;

    /* Centre le formulaire */
    margin: 0 auto;
}

/* Groupe champ + label */
.champ {
    /* Organisation verticale */
    display: flex;
    flex-direction: column;

    /* Espacement entre les champs */
    margin-bottom: 15px;
}

/* Labels des champs */
label {
    /* Marge sous le label */
    margin-bottom: 5px;

    /* Texte en gras */
    font-weight: bold;
}

/* Champs de saisie */
input,
textarea {
    /* Espacement intérieur */
    padding: 8px;


}

/* Bouton */
button {
    /* Espacement intérieur */
    padding: 10px;

    /* Taille du texte */
    font-size: 1rem;

    /* Curseur en forme de main */
    cursor: pointer;
}

/* =====================================================
   RESPONSIVE
   Adaptation aux écrans mobiles
   ===================================================== */

@media (max-width: 768px) {
    .footer-contenu {
        /* Passage en colonne sur mobile */
        flex-direction: column;

        /* Réduction de l'espace */
        gap: 20px;
    }

    .footer-colonne {
        /* Suppression des grandes marges */
        margin-left: 0;
        margin-right: 0;

        /* Texte justifié */
        text-align: justify;
    }

    #footer-copyright {
        /* Centrage du texte sur mobile */
        text-align: center;
    }
}