/* Styles généraux du corps de la page */
body {
    background-color: #fafafa; /* Fond noir */
    color: #111; /* 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 #bbb; /* Ligne de séparation */
    /* Nouvelles propriétés pour le rendre "collant" */
    position: sticky;
    top: 0;
    background-color: #fafafa; /* 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: 1.5em;
}

/* 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: #111;
    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: #111;
    text-decoration: none;
    /* padding: 10px 15px; */
    /* transition: color 0.3s; */
    margin: 0;
    font-size: 1.5em;
    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: #111;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s;
}

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

/* Style for the arrow icon */
.dropdown-arrow {
    color: #111;
    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: #bbb; /* 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: #111;
    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 {
    width: 100%; /* Passe à 100% pour que le gris touche les bords */
    max-width: none; /* Supprime la limite de largeur */
    margin: 0;
    padding: 30px 0;
    text-align: center;
}

.content-block2 {
    display: flex;
    flex-direction: column; /* Aligne le texte au-dessus des logos */
    align-items: center;
    gap: 20px;
    padding: 30px 0;
    background-color: #555;
    width: 100%;
    box-sizing: border-box;
}

.content-block2 img {
    height: 80px;            /* FIXE LA HAUTEUR : les 3 images auront la même taille verticale */
    width: auto;             /* La largeur s'adapte proportionnellement (l'image longue restera longue) */
    object-fit: contain;     /* S'assure que l'image n'est pas déformée */
}

/* Style pour le texte */
.baseline-text {
    color: #ffffff; /* Blanc pour bien ressortir sur le gris */
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Conteneur spécifique pour les logos */
.baseline-logos {
    display: flex;
    flex-direction: row; /* Garde les logos côte à côte sur PC */
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.baseline-logos img {
    height: 60px; /* Taille uniforme en hauteur */
    width: auto;
}



/* Styles pour le pavé global de contenu */

.content-text .adn-title,
.content-text .main-title,
.content-text p {
    margin: 0;
    padding: 0;
}

/* On définit maintenant un espacement identique (10px par exemple) */
.content-text .adn-title {
    margin-bottom: 15px; 
    letter-spacing: 2px; /* Un petit look "premium" espacé */
    font-weight: bold;
    color: #555;         /* Optionnel : un gris foncé pour distinguer du titre */
}

.content-text .main-title {
    margin-bottom: 15px; /* Espace sous le grand titre (un peu plus si vous voulez l'aérer) */
    font-size: 2.5em;
    line-height: 1.2;
}

/* Pour le texte principal, on peut ajuster l'interligne pour plus de confort */
.content-text p {
    line-height: 1.6;
}

.content-block {
    display: flex;
    flex-direction: row;
    align-items: stretch;    /* Force la colonne de droite à faire la même hauteur que l'image de gauche */
    gap: 40px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-image-main {
    flex: 0 0 40%;
}

/* Colonne de gauche (Quadri) */
.content-image-main {
    flex: 0 0 40%;
    display: flex;
}

.content-image-main img {
    width: 100%;
    height: auto;
    display: block; /* Supprime l'espace invisible sous l'image */
}

.content-image {
	display: flex;
  flex: 0 0 25%;
  overflow: hidden;
      justify-content: center; /* Centre les cartes sur la ligne */

}

/* Colonne de droite */
.content-text {
    flex: 1;
    display: flex;
    flex-direction: column; /* Permet d'utiliser les marges automatiques pour l'alignement */
}

.content-text p:last-of-type {
    margin-bottom: 0;
}

.adn-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.main-title {
    font-size: 2.5em; /* Remplace le <font size="+5"> */
    margin-top: 0;
    line-height: 1.2;
}

/* La petite image "95percent" sous le texte */
.content-image-secondary {
    display: flex;
    justify-content: center;
    width: 100%;
    /* LA MAGIE EST ICI : */
    margin-top: auto; 
    padding-top: 20px; /* Espace minimum pour que l'image ne colle pas au texte si le texte est long */
}

.content-image-secondary img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block; /* Supprime l'espace invisible sous l'image */
}

.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: 80%;
  height: 100%;
  object-fit: cover;
  padding: 30px 30px;
      justify-content: center; /* Centre les cartes sur la ligne */

}

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



/* Conteneur principal limité à 1200px et centré */
.partners-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.partners-section h3 {
    margin-bottom: 30px;
    font-size: 1.8em;
    color: #333;
}

/* Grille des logos */
.partners-grid {
    display: grid;
    /* Crée 4 colonnes égales sur PC */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; /* Espace entre les logos */
    align-items: center; /* Centre verticalement les logos de hauteurs différentes */
    justify-items: center; /* Centre horizontalement */
}

.partners-grid img {
    max-width: 100%;    /* L'image ne dépasse pas sa case */
    height: auto;       /* Garde les proportions */
    max-height: 80px;   /* Force une harmonie visuelle en hauteur */
    /*filter: grayscale(100%); /* Optionnel : met les logos en gris pour un look pro */
    opacity: 0.7;       /* Optionnel : rend les logos discrets */
    transition: 0.3s;   /* Pour l'effet au survol */
}

/* Effet au survol : le logo reprend ses couleurs */
.partners-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- Media Queries pour Tablette --- */
@media (max-width: 992px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur tablette */
    }
}

/* --- Media Queries pour Smartphone --- */
@media (max-width: 600px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur mobile */
        gap: 20px;
    }
    
    .partners-grid img {
        max-height: 60px; /* On réduit un peu la taille sur mobile */
    }
}


/* 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 #bbb; /* 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: 1em; /* Réduit la taille du titre */
    }
	
navb a {
    font-size: 1em;
}

    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-logos {
        flex-direction: column; /* Empile les logos sur mobile si nécessaire */
        gap: 20px;
    }
    

    .baseline-text {
        font-size: 1.1em;
        padding: 0 20px; /* Évite que le texte touche les bords du téléphone */
    }


.content-block {
        flex-direction: column; /* Empile l'image au-dessus du texte */
        padding: 20px 15px;
        align-items: center;    /* Centre les éléments horizontalement */
    }


.content-image-main {
        width: 100%; /* L'image "quadri" prend toute la largeur au-dessus */
    }

.main-title {
        font-size: 1.8em; /* Plus petit sur mobile */
    }

.content-image-secondary {
        margin-top: 20px; /* On remet une marge normale sur mobile */
    }
	
	
.content-image-secondary img {
        max-width: 80%;      /* L'image s'adapte à l'écran du téléphone */
    }

.content-image {
        flex: none;
        width: 100%;            /* Prend toute la largeur disponible */
        display: flex;
        justify-content: center; /* Centre l'image dans son conteneur */
        margin-bottom: 20px;
    }


.content-image img {
        width: 60%;             /* Augmente la taille de l'image (ajustez selon votre goût) */
        max-width: 250px;       /* Empêche l'image de devenir trop géante sur tablette */
        height: auto;
        padding: 0;             /* Supprime le gros padding qui réduit l'image */
    }

.content-text {
        font-size: 16px;        /* Un peu plus grand pour la lisibilité mobile */
        width: 100%;
    }

.content-text h1 {
        font-size: 1.5em;       /* Réduit la taille du titre principal sur mobile */
        text-align: center;
    }

.content-block2 {
        flex-direction: column; /* Aligne les images verticalement */
        gap: 20px;              /* Espace entre les images empilées */
        padding: 30px 20px;     /* Espace gris tout autour */
        width: 100%;            /* S'assure que le bandeau prend toute la largeur */
        box-sizing: border-box; /* Évite les problèmes de débordement dus au padding */
    }

    .content-block2 img {
        height: auto;           /* Libère la hauteur fixe pour le mobile */
        max-height: 80px;       /* Limite la hauteur pour qu'elles ne soient pas géantes */
        max-width: 80%;         /* Empêche l'image de dépasser la largeur de l'écran */
        width: auto;            /* Conserve les proportions */
    }
	
	
}

/* 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 {
        gap: 15px;           /* Réduit l'espace sur petit écran */
        padding: 20px 10px;
    }
    
    .content-block2 img {
        height: 50px;        /* Réduit la hauteur sur mobile pour que tout tienne sur une ligne */
    }
	
}

/* Style pour l'encadré principal avec bords arrondis */
.main-card {
    background-color: #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	width: 100%; 
    max-width: 1200px; /* Largeur max pour PC */
    min-width: auto;   /* Supprimez le 680px qui casse le mobile */
    box-sizing: border-box;
  border-bottom: 1px solid #555;
  border-right: 1px solid #aaa;
}

.card-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 15px;
}

.card-flex img {
    height: 100px; /* Taille réduite pour mieux tenir */
    width: auto;
}

/* Style pour le sous-titre */
.main-card .subtitle {
    font-size: 1.5em;
    color: #333; /* 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: #bbb; /* 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: #fafafa;
    margin-top: 0;
    font-size: 1.5em;
    /* text-align: center; /* Centre le contenu textuel */ */
}

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

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

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


@media (max-width: 600px) {
    .card-flex {
        flex-direction: column; /* Empile l'image sous le texte sur petit mobile */
        text-align: center;
    }
    .main-card h1 {
        font-size: 1.8em; /* Réduit le titre sur mobile */
    }
}

/* Media Query pour les petits écrans */
@media (max-width: 768px) {
* {
        box-sizing: border-box;
    }

    .card-container {
        flex-direction: column; /* Empile les cartes verticalement sur les petits écrans */
        gap: 15px;
    }

.main-card {
        min-width: 0 !important; /* Annule le 680px précédent */
        width: 100% !important;
        padding: 15px 10px !important; /* Réduit les marges internes */
        margin: 0 !important;
    }

.content-block, .content-text {
        padding: 10px 5px !important;
        width: 100% !important;
        overflow: hidden; /* Coupe ce qui pourrait dépasser */
    }

.card {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 15px;
    }

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


.content-text .card ul {
        padding-left: 10px !important; /* Le !important est une sécurité ultime ici */
        text-align: left;
        font-size: 0.9em;
        margin-left: 0;
		list-style-position: outside; /* Les puces restent à gauche mais dans le cadre */
    }

    /* On s'assure aussi que les éléments de liste n'ont pas de marges parasites */
    .content-text .card li {
        margin-left: 0;
        padding-left: 0;
    }

    /* Force les images à ne jamais dépasser la largeur de la carte */
    .card img {
        max-width: 60%;
        height: auto !important;
    }

}

#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 */
}



/* Contact*/

/* Style pour la page contact */
.contact-container {
    align-items: flex-start; /* Aligne le haut des deux colonnes */
}

.contact-info {
    flex: 0 0 40%;
}

.phone-img {
    max-width: 250px;
    height: auto;
    margin-top: 10px;
}

.contact-form {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    box-sizing: border-box; /* Très important pour le responsive */
}

.captcha-box {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.captcha-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.btn-submit {
    background-color: #555; /* On reste dans vos tons gris */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s;
}

.btn-submit:hover {
    background-color: #333;
}

.phone-link {
    text-decoration: none; /* Enlève tout soulignement */
    display: inline-block; /* Permet une meilleure zone de clic */
}

.phone-img {
    max-width: 250px;
    height: auto;
    transition: transform 0.2s; /* Petit effet de dynamisme */
}

/* Optionnel : petit effet au survol sur PC */
.phone-link:hover .phone-img {
    transform: scale(1.05); /* L'image grossit très légèrement */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
    .contact-info {
        margin-bottom: 30px;
    }
}