/* Styles généraux du corps de la page */
body {
    background-color: #000; /* Fond noir */
    color: #eee; /* Texte blanc */
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

/* Styles pour le header (l'en-tête) */
header {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace le titre et la navigation */
    align-items: center; /* Centre les éléments verticalement */
    padding: 20px;
    border-bottom: 2px solid #333; /* Ligne de séparation */
    /* Nouvelles propriétés pour le rendre "collant" */
    position: sticky;
    top: 0;
    background-color: #000; /* Ajouté pour éviter que le contenu ne soit visible à travers le header transparent */
    z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
}

header h1 {
    margin: 0;
    font-size: 2em;
}

/* Styles pour la barre de navigation (les 5 liens) */
/* Positionne les éléments de la barre de navigation */
nav {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: space-around;
    align-items: center; /* Centre les éléments verticalement */
    width: 100%;
}
nav a {
    color: #eee;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s;
}
nav a:hover {
    color: #aaa;
}

navb {
    /* display: flex; /* Utilise Flexbox pour aligner les éléments */ */
    /* justify-content: space-around; */
    /* align-items: center; /* Centre les éléments verticalement */ */
    /* width: 100%; */
}

navb a {
    color: #eee;
    text-decoration: none;
    /* padding: 10px 15px; */
    /* transition: color 0.3s; */
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

navb a:hover {
    color: #aaa;
}

header navb {
    display: flex;
    align-items: center;
}
/* Update the dropdown styles */
.dropdown {
    position: relative;
    display: flex; /* Use flexbox to align the link and the arrow */
    align-items: center; /* Vertically center them */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
}

/* Style for the link inside the dropdown */
.dropdown-link {
    color: #eee;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s;
}

.dropdown-link:hover {
    color: #aaa;
}

/* Style for the arrow icon */
.dropdown-arrow {
    color: #eee;
    padding: 10px 10px 10px 5px; /* Adjust padding to space it from the link */
    font-size: 10px; /* Adjust size of the arrow */
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg); /* Initial state for the arrow */
}

/* Change arrow direction when the dropdown is open */
.dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Hide dropdown content by default */
.dropdown-content {
    display: none; /* Cache le sous-menu par défaut */
    position: absolute; /* Le sous-menu se positionne par rapport au dropdown */
    top: 150%; /* Positionne le sous-menu juste en dessous du lien "Formations" */
    left: 0; /* Aligne le sous-menu avec le bord gauche du lien "Formations" */
    background-color: #333; /* Fond gris pour le sous-menu */
    min-width: 300px;
    max-width: 500px;
    z-index: 1; /* S'assure que le sous-menu est au-dessus des autres éléments */
    border-radius: 5px; /* Bords arrondis pour le design */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Class to show the content when the dropdown is active */
.dropdown.active .dropdown-content {
    display: block;
}




.header-logo-container {
    display: flex;
    align-items: center; /* Permet d'aligner verticalement les éléments */
}

.header-logo-container a {
    margin-right: 10px; /* Ajoute un espace entre le texte et l'image */
}

/* Styles pour le menu déroulant */
.dropdown {
    position: relative; /* Indispensable pour que le sous-menu se positionne par rapport à cet élément */
    display: inline-block; /* Permet au conteneur de s'adapter à la taille de son contenu et de s'aligner correctement */
}


/* Styles pour les liens du sous-menu */
.dropdown-content a {
    color: #eee;
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Chaque lien prend toute la largeur disponible */
    text-align: left; /* Alignement du texte des liens */
    border-radius: 5px; /* Bords arrondis pour le design */
}

.dropdown-content a:hover {
    background-color: #555; /* Changement de couleur au survol des liens du sous-menu */
}

/* Règle pour afficher le sous-menu au survol du parent */
.dropdown:hover .dropdown-content {
    display: block; /* Affiche le sous-menu lorsque le pointeur est sur le conteneur .dropdown */
}

/* Styles pour la section de la baseline */
.baseline {
    /* Centrage du conteneur lui-même */
    width: 90%; /* Ou la largeur de votre choix pour le conteneur */
    max-width: 1000px; /* Limite la largeur pour une meilleure lisibilité sur les grands écrans */
    margin: 0 auto; /* Centre le bloc sur la page */

    /* Alignement du texte à l'intérieur du conteneur */
    text-align: center; /* Justifie le texte à gauche */

    /* Autres styles de mise en page */
    padding: 30px 20px;
    font-size: 2.0em; /* J'ai réduit la taille pour le rendre plus lisible */
    border-bottom: 1px solid #333;
}
.content-block2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 80px;
    /*font-size: 2.0em;*/ /* J'ai réduit la taille pour le rendre plus lisible */
}


/* Styles pour le pavé global de contenu */
.content-block {
  display: flex; /* Active Flexbox */
  align-items: flex-start; /* Les enfants ne s'étirent pas */
  gap: 20px; /* J'ai augmenté l'espace entre l'image et le texte pour un meilleur rendu */
  padding: 20px 40px; /* Ajoute un padding de 20px en haut et en bas, et 40px à gauche et à droite */
}


.content-image {
  flex: 0 0 25%;
  overflow: hidden;
}

/* Section pour justifier le texte et aligner les puces */
.content-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  align-self: flex-start;
  /* text-align: justify; /* Justifie le texte */ */
  text-align: left; /* Justifie le texte */
}

.content-text ul {
  text-align: left; /* Alignement du texte de la liste à gauche */
  padding-left: 50px; /* Ajoute un espacement pour les puces */
}

/* Appliquer l'alignement justifié aux éléments de liste individuels */
.content-text li {
  /* text-align: justify; */
  text-align: left;
}


.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 30px 30px;
}

.content-text a {
    color: #eee;
    text-decoration: none;
}
.content-text a:hover {
    color: #aaf;
    text-decoration: none;
}


/* Styles pour le pied de page */
footer {
    text-align: center; /* Centre le contenu du pied de page */
    padding: 30px 0;
    margin-top: 50px; /* Ajoute de l'espace au-dessus du pied de page */
    border-top: 1px solid #333; /* Ligne de séparation */
}

.footer-link img {
    width: 100px; /* Taille de l'image (ajustez selon vos besoins) */
    height: auto; /* Maintient les proportions de l'image */
    transition: transform 0.3s ease; /* Effet de transition au survol */
}

.footer-link img:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image au survol */
}

/* --- Media Queries pour le responsive design --- */

/* Pour les écrans jusqu'à 768px (tablettes et smartphones en mode paysage) */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Empile les éléments du header */
        text-align: center;
        padding-bottom: 10px; /* Réduit l'espace en bas */
    }

    header h1 {
        font-size: 1.5em; /* Réduit la taille du titre */
    }

    nav {
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne */
        justify-content: center; /* Centre les liens */
        gap: 5px; /* Réduit l'espace entre les liens */
        width: 50%;
    }

    .dropdown {
        width: 100%; /* Le conteneur du dropdown prend toute la largeur */
    }

    .dropdown-content {
        position: static; /* Le sous-menu se positionne de manière statique dans le flux */
        width: 100%; /* Le sous-menu prend toute la largeur */
        box-shadow: none; /* Supprime l'ombre */
    }

    .baseline {
        font-size: 1.2em; /* Réduit la taille de la police de la baseline */
    }

    .content-block {
        flex-direction: column; /* Empile l'image et le texte */
        padding: 10px;
    }

    .content-image {
        flex: none; /* L'image n'a plus de flex-grow */
        width: 100%; /* L'image prend toute la largeur */
        margin-bottom: 20px; /* Ajoute de l'espace en bas de l'image */
    }

    .content-image img {
        height: auto; /* L'image s'adapte en hauteur */
    }

    .content-text {
        font-size: 14px; /* Réduit la taille de la police pour le texte de contenu */
    }
}

/* Pour les écrans très petits (smartphones en mode portrait) */
@media (max-width: 480px) {
    header {
        padding: 10px;
    }

    header img {
        width: 50px; /* Réduit la taille du logo */
        height: auto;
    }

    nav a {
        padding: 5px 10px; /* Réduit le padding des liens */
    }

    .content-block2 {
        flex-direction: column;
        padding: 10px;
        text-align: center;
    }
}

/* Style pour l'encadré principal avec bords arrondis */
.main-card {
    background-color: #222;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    min-width: 680px; /* Add this line to set a minimum width */
  border-bottom: 1px solid #555;
  border-right: 1px solid #aaa;
}
/* Style pour le sous-titre */
.main-card .subtitle {
    font-size: 1.5em;
    color: #bbb; /* Une couleur légèrement plus claire pour le sous-titre */
    margin-top: -10px; /* Réduit l'espace entre le titre et le sous-titre */
    margin-bottom: 20px;
}

/* Conteneur pour aligner les trois cartes horizontalement */
.card-container {
    display: flex;
    gap: 20px; /* Espace entre les cartes */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur de petits écrans */
    justify-content: center; /* Centre les cartes sur la ligne */
}

/* Style pour chaque carte individuelle */
.card {
    background-color: #333; /* Fond plus clair pour les cartes individuelles */
    border-radius: 5px; /* Bords arrondis */
    padding: 15px;
    flex: 1; /* Permet aux cartes de s'étirer pour remplir l'espace disponible */
    min-width: 200px; /* Empêche les cartes de devenir trop petites */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center; /* Alignement du texte à l'intérieur de la carte */
  border-bottom: 1px solid #555;
  border-right: 1px solid #aaa;
}

.card h3 {
    color: #eee;
    margin-top: 0;
    font-size: 1.5em;
    /* text-align: center; /* Centre le contenu textuel */ */
}

.main-card h1 {
    color: #eee;
    margin-top: 0;
    font-size: 3em;
	/* -webkit-text-stroke-width: 0.02em; */
	/* -webkit-text-stroke-color: #000; */

}
.main-card h3 {
    color: #eee;
    margin-top: 0;
    font-size: 1.8em;
}

.card p {
    color: #ddd;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Media Query pour les petits écrans */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column; /* Empile les cartes verticalement sur les petits écrans */
        gap: 15px;
    }

    .main-card {
        padding: 15px;
    }

    .card {
        min-width: unset; /* Supprime la taille minimale pour un meilleur ajustement */
    }
}

#bouton-remonter {
    display: none; /* Cache le bouton par défaut */
    position: fixed; /* Le rend fixe même en scrollant */
    bottom: 20px;
    right: 20px;
    z-index: 99; /* Assure qu'il est au-dessus des autres éléments */
    font-size: 24px;
    border: none;
    outline: none;
    background-color: #007bff; /* Nouvelle couleur de fond moderne (bleu) */
    color: white;
    cursor: pointer;
    padding: 15px 20px; /* Ajuste le padding pour un look carré */
    border-radius: 8px; /* Bords légèrement arrondis pour un look moderne (au lieu de 50% pour rond) */
    text-decoration: none; /* Enlève le soulignement du lien */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

#bouton-remonter:hover {
    background-color: #0056b3; /* Assombrit légèrement au survol */
    transform: translateY(-2px); /* Effet léger de soulèvement */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
}