body
{
    background-color: #021526;
    height: 100%; /* Définit la hauteur de l'ensemble de la page */
    display: flex; /* Applique Flexbox */
    flex-direction: column; /* Organise les éléments du haut vers le bas */
}
/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: 'Montserrat', sans-serif; /* Applique la police Montserrat */
}

nav{
    width: 100%;
    margin: 0 auto;
    background-color: #03346E;
    position: fixed;
    top: 0;
    left: 0;
    display: flex; /* Utiliser flexbox pour disposer l'image et le texte horizontalement */
    align-items: center; /* Centrer l'image et le texte verticalement */
    padding: 10px;
    z-index: 2; /* Mettre un z-index plus élevé pour que le menu reste au-dessus */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Ajuste cette valeur pour avoir l'espace que tu veux avant le formulaire */
    height: 100%; /* Définit la hauteur de l'ensemble de la page */
    display: flex; /* Applique Flexbox */
    flex-direction: column; /* Organise les éléments du haut vers le bas */
}

.content {
    flex: 1; /* Prend tout l'espace disponible entre le haut et le bas */
}

.pp{
    border-radius: 50%;
    padding: 5px;
    width: 60px;
    height: 60px;
}

.github-button {
    position: relative;
    z-index: 1; /* Mettre un z-index plus bas pour ne pas couvrir le menu */
}

.github {
    padding: 20px 50px;
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    margin-top: 20px; /* Ajouter un peu d'espace au-dessus */
}


/* ----------------------------------Textes---------------------------------- */
.nom{
    color: white;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
}

.titre-image {
    color: #023f8a;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

.titre-image:hover {
    color: #1d72b8; /* Couleur au survol */
}

.texte-image {
    color: white;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
}

.titre-apropos {
    font-size: 24px; /* Taille des sous-titres */
    font-weight: 600;
    display: inline-block;
    color: #023f8a;
    margin-bottom: 20px;
}

.titre-apropos:hover {
    color: #1d72b8; /* Couleur au survol */
}

.texte-apropos {
    text-align: center;
    line-height: 1.6;
    margin-bottom: 65px;
}
/* ----------------------------------Menu---------------------------------- */
.menu {
    list-style-type: none;
    display: flex;
    margin-left: auto;
    padding-right: 30px;
}

.menu li a {
    color: white;
    display: block; /* Pour que le lien occupe toute la zone du li */
    width: 100%; /* Le lien occupe toute la largeur du li */
    height: 100%; /* Le lien occupe toute la hauteur du li */
    padding: 15px 30px; /* Ajout du padding pour garder l'espacement du texte */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    font-size: 18px;
}

.menu li:hover {
    background-color: #022f52;
    transition: background-color 0.3s;
    border-radius: 10px;
}

.titre{
    color: white;
    padding: 20px;
    text-align: center;
    vertical-align: 10px;
    padding-top: 120px;
}

.content{
    color: white;
    padding: 30px;
}

/* ----------------------------------Images---------------------------------- */
.images {
    display: flex;
    flex-direction: column; /* Empile les images verticalement */
    gap: 50px; /* Espace entre les images */
    padding: 20px;
}

/* Conteneur pour chaque image */
.image-container {
    display: flex;
    align-items: center; /* Centre l'image verticalement */
    justify-content: space-between; /* Ajuste l'espace entre l'image et le texte */
    width: 100%; /* Conteneur plein largeur */
}

/* Conteneur texte + bouton pour chaque image */
.text-bouton-container {
    display: flex;
    flex-direction: column; /* Empile le texte et le bouton */
    align-items: center; /* Centre le texte et le bouton */
    justify-content: center; /* Centre le contenu */
    text-align: center; /* Centre le texte */
}

/* Images de taille uniforme */
.image-container img {
    width: 800px; /* Largeur fixe */
    height: 449px; /* Hauteur fixe */
    object-fit: contain; /* Ajuste l'image pour remplir sans déformation */
    border: 2px solid #03346E; /* Bordure optionnelle */
    border-radius: 10px; /* Coins arrondis */
    max-height: 100%;
    height: auto;
}

/* Aligne les images à gauche */
.gauche {
    justify-content: flex-start; /* Aligne à gauche */
}

/* Aligne les images à droite */
.droite {
    justify-content: flex-end; /* Aligne à droite */
}

img {
    max-width: 100%; /* Les images seront responsives */
    height: auto;
}

/* ----------------------------------Formulaire de contact---------------------------------- */

form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #1f2a42;
    border-radius: 8px;
    box-sizing: border-box; /* Assure que padding et border sont inclus dans la largeur totale */
}

.titre-form {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}

label {
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
}

input, textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #03346E;
    border-radius: 4px;
    width: 100%; /* Assure que les champs prennent toute la largeur disponible */
    background-color: #021526;
    color: white;
    box-sizing: border-box; /* Inclus padding et bordure dans la largeur totale */
}

input[type="submit"] {
    background-color: #03346E;
    color: white;
    cursor: pointer;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #1d72b8;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* ----------------------------------Liens HyperText---------------------------------- */

a {
    color: #1d72b8; /* Couleur bleu clair ou autre couleur contrastée */
    text-decoration: none; /* Retire la soulignure si tu n'en veux pas */
}

/* Liens au survol */
a:hover {
    color: #00ccff; /* Change la couleur lorsque l'utilisateur survole le lien */
    text-decoration: underline;
}
/* ----------------------------------Copyright---------------------------------- */

footer {
    background-color: #03346E; /* Couleur de fond discrète pour le footer */
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    padding: 10px 0; /* Espacement vertical */
    position: relative;
    bottom: 0;
    width: 100%;
    font-size: 14px; /* Taille de texte plus petite */
}

footer p {
    margin: 0; /* Supprime les marges pour une mise en page propre */
}

/* ----------------------------------Page D'acceuil---------------------------------- */

/* Titre spécifique de l'accueil */
.accueil-title {
    font-size: 30px;
    text-align: center;
    color: #1d72b8;
    margin-bottom: 20px;
    padding-top: 110px;
}

/* Texte d'introduction */
.intro-text {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 40px;
    color: #b0c4de;
}

/* Card (pour le "mon parcours" ou autre section) */
.card {
    background-color: #03346E;
    padding: 20px;
    margin: 0 auto 20px;
    border-radius: 8px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card h2 {
    font-size: 2em;
    color: #ffffff;
    margin-bottom: 20px;
}

.card p {
    font-size: 1.1em;
    color: #e0e0e0;
}

/* Conteneur du bouton */
.btn-explorer-container {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement (si nécessaire) */
    margin-top: 20px; /* Espacement au-dessus du bouton */
}

/* Bouton d'appel à l'action */
.btn-explorer {
    display: inline-block;
    background-color: #1d72b8;
    color: white;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 8px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-explorer:visited {
    color: white;
}

.btn-explorer:hover {
    background-color: #00aeff;
}

/* Contact (texte) */
.contact-info {
    text-align: center;
    font-size: 1.1em;
    margin-top: 40px;
}

.contact-info a {
    color: #1d72b8;
    text-decoration: none;
}

.contact-info a:hover {
    color: #00ccff;
    text-decoration: underline;
}

/* ----------------------------------Responsive---------------------------------- */

@media (max-width: 768px) {
    nav {
        width: 100%;
        margin: 0 auto;
        background-color: #03346E;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding: 10px;
        z-index: 2;
        overflow-x: auto; /* Permet de faire défiler horizontalement si nécessaire */
    }

    .menu {
        list-style-type: none;
        display: flex;
        margin-left: auto;
        padding-right: 10px; /* Réduit un peu l'espace pour gagner de la place */
    }

    .menu li {
        display: inline-block;
    }

    .menu li a {
        color: white;
        display: inline-block;
        padding: 15px 20px; /* Ajuste le padding pour gagner de la place */
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        font-size: 16px; /* Réduit légèrement la taille de la police pour les écrans plus petits */
    }

    /* Modifications pour les écrans de petite taille */
    .image-container {
        display: flex;
        flex-direction: column; /* Aligner les éléments en colonne (image, titre, texte) */
        align-items: center; /* Centrer horizontalement */
        margin-bottom: 30px;
    }

    .image-container img {
        width: 100%; /* Ajuste la largeur de l'image pour s'adapter à l'écran */
        height: auto;
        margin-bottom: 30px; /* Espace entre l'image et le texte */
    }

    .text-bouton-container {
        display: flex;
        flex-direction: column; /* Empiler le texte et le bouton en colonne */
        align-items: center;
        justify-content: center;
        text-align: center; /* Centrer le texte */
    }

    /* Lorsque l'image est à droite sur l'écran large, la mettre à gauche sur mobile */
    .image-container.droite {
        flex-direction: column-reverse; /* Inverse l'ordre des éléments, image en haut */
    }

    .texte-image {
        margin-top: 10px; /* Ajouter un petit espace entre le texte et l'image */
    }

    /* Gérer l'espacement entre les sections */
    .image-container .texte-image, .image-container .nom {
        margin-bottom: 10px;
    }
}

@media (max-width: 1024px) {
    /* Modifications pour les écrans de petite taille */
    .image-container {
        display: flex;
        flex-direction: column; /* Aligner les éléments en colonne (image, titre, texte) */
        align-items: center; /* Centrer horizontalement */
        margin-bottom: 30px;
    }

    .image-container img {
        width: 100%; /* Ajuste la largeur de l'image pour s'adapter à l'écran */
        height: auto;
        margin-bottom: 30px; /* Espace entre l'image et le texte */
    }

    .text-bouton-container {
        display: flex;
        flex-direction: column; /* Empiler le texte et le bouton en colonne */
        align-items: center;
        justify-content: center;
        text-align: center; /* Centrer le texte */
    }

    /* Lorsque l'image est à droite sur l'écran large, la mettre à gauche sur mobile */
    .image-container.droite {
        flex-direction: column-reverse; /* Inverse l'ordre des éléments, image en haut */
    }

    .texte-image {
        margin-top: 10px; /* Ajouter un petit espace entre le texte et l'image */
    }

    /* Gérer l'espacement entre les sections */
    .image-container .texte-image, .image-container .nom {
        margin-bottom: 10px;
    }
}