@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Paramètre globaux */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

button,
input[type="submit"],
input[type="email"] {
    -webkit-appearance: none; /* La ligne magique pour Safari */
    -moz-appearance: none;
    appearance: none;
}

html{
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    ::selection{
        background-color: var(--couleur-secondaire);
        color: #ffffff;
    }
}


/* Déclaration des couleurs */

:root{
    --couleur-principale : #1f2352;
    --couleur-secondaire : #1c8480;
    --couleur-texte-clair: #fff;
    --couleur-blanc-cassé : #f5f5f5;
    --couleur-gris-clair : #d9d9d9;
    --couleur-vert-clair: #d5e0df;
    --couleur-vert-cassé : #e6efee;
    --couleur-dégradé-1: linear-gradient(-90deg, #1770bf 0%, #1c8480 95%);
}

/* Place au Body  */
body{
    background-color: var(--couleur-texte-clair);
    color:var(--couleur-principale);
    overflow-x: hidden;
}

/* section-loader */

/* NOUVEAU : Logique de pre-chargement améliorée */
body.loading header,
body.loading main,
body.loading footer {
    /* Cache le contenu principal tant que la page n'est pas prête */
    opacity: 0;
}

body.loaded header,
body.loaded main,
body.loaded footer {
    /* Affiche le contenu avec une animation de fondu une fois la page prête */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader {
    position: relative;
    width: 100px;
    height: 100px;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Cercle qui tourne */
.circle {
    width: 100px;
    height: 100px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #1F2352;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* GIF centré */

.gif-center {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 85%;   /* max 50% de la largeur de l'écran */
    height: auto;     
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Place à la partie header */

header{
    width: 100%;
    color:#fff;
    background-color: var(--couleur-texte-clair);
    display: flex;
    justify-content: space-between;
    padding: 1rem 7rem;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#navbar.scrolled {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
    list-style: none;
}

nav ul li a{
  text-decoration: none;
  padding-bottom: 4px; 
  border-bottom: 2px solid transparent; 
  transition: all 0.3s ease;
  font-weight: normal;
  color: #1f2352;
}

nav ul li a:hover{
    color: var(--couleur-secondaire);
    font-weight: normal;

}

nav ul li a.active {
  color: var(--couleur-secondaire);
  font-weight: normal;
  border-bottom: 2px solid var(--couleur-secondaire);
}

header img{
    width: 120px;
    height: auto;
    max-width: 100%;     
}

.btn-link .icon{
    /* display: flex; */
    align-items: center;
    gap: 0.3rem;
}

.menu-toggle{
    display: none;
}

.btn-link .icon i{
    width: 20px;
    height: 20px;
    object-fit: contain;
    color: var(--couleur-texte-clair);
}

.btn-link{
    background-color: var(--couleur-principale);
    color: #fff;
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    border: none;
    transition: all 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.90rem;
}

.btn-link:hover{
    border: #1f2352 1px solid;
    color: var(--couleur-principale);
    background-color: #fff;
}

.btn-link:hover i{
    color: orange;
}



/* initialisation du main */

/* main{
    padding: 0rem 4rem;
} */

/* Place à la section Hero */

#hero{
    max-width: 100%;
    height: 90vh;
    background: var(--couleur-dégradé-1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 7rem;
    overflow: hidden;
    background: url(/Assets/bg-ac-22.jpg) no-repeat center center/cover;
    z-index: 1;
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(31, 138, 129, 0.9), rgba(4, 31, 81, 0.9));
    z-index: -1; 
    }

#hero .hero-gauche{
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.hero-gauche img{
    display: none;
}

#hero .hero-gauche h2{
    font-size: 2.7rem;
    line-height: 3.45rem;
    width: 100%;
    color: var(--couleur-texte-clair);
    margin-bottom: 1rem;
}

#hero .hero-gauche p{
    font-size: 1.2rem;
    color: var(--couleur-texte-clair);
    margin-bottom: 4rem;
    width: 75%;
}

#hero .hero-gauche .btn-hero{
    background-color: var(--couleur-blanc-cassé);
    color: var(--couleur-principale);
    padding: 1rem 2.3rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.hero-gauche .btn-hero i{
    margin-right: 0.7rem;
}

#hero .hero-gauche .btn-hero:hover{
    background-color: var(--couleur-vert-clair);
    color: var(--couleur-principale);
    opacity: 1;
    transform: scale(1.01);
}

#hero .hero-droite{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero .hero-droite img{
    width: 45%;
    height: auto;
    max-width: 82%;
    margin-top: 4rem;
    object-fit: contain;
    position:absolute;
}

.mobil-text{
    display: none;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    justify-content: center;
}

/* Animation de la section Hero */ 
#floatingCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


/* Place à la partie a propos */
#apropos{
    padding: 4rem 7rem;
    background-color: var(--couleur-texte-clair);
    scroll-margin-top: 40px;
}

#apropos .apropo-contenair{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
#apropos .partie-haute{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    
}

#apropos .partie-gauche{
    width: 55%;
}

#apropos .partie-droite{
    width: 45%;
    display: flex;
    justify-content: right;
    align-items: center;

}

.rext-mobile{
    display: none;
}

#apropos h2{
    font-size: 1.6rem;
    color: var(--couleur-principale);
    text-align: flex-start;
    margin-bottom: 2rem;
}

#apropos .apropo-contenair .partie-haute .partie-gauche p{
    font-size: 1.2rem;
    color: var(--couleur-principale);
    margin-bottom: 1.2rem;
    text-align: justify;
}

.partie-droite img{
    width: 800px;
    height: auto;
    max-width: 87%;
    object-fit: contain;
}

#apropros .partie-basse{
    width: 100%;
}

.apropo-contenair .partie-basse{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6rem;
}

.apropo-contenair .partie-basse h1{
    font-size: 2.2rem;
    color: var(--couleur-secondaire);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 900;
    transition: all 0.3s ease-in-out;
}

.apropo-contenair .partie-basse p{
    font-size: 1rem;
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 2rem;
}

/* Place à la section bannière */

#banniere-prog{
    width: 100%;
    height: auto;
    /* margin-bottom: 4rem; */
    background: linear-gradient(90deg, #002462 0%, #1f2352 95%);
    padding: 4rem 7rem;
    color: #fff;
}

#banniere-prog .banniere-contenair{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
}

#banniere-prog .banniere-cote-gauche{
    width: 50%;
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#banniere-prog .banniere-cote-droite{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 2rem;
}

.banniere-contenair .banniere-cote-gauche img{
    width: 410px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.banniere-contenair .banniere-cote-gauche p{
    font-size: 1rem;
    color: var(--couleur-texte-clair);
    font-weight: 300;
    margin-bottom: 1.5rem;
    text-align: center;
}

.banniere-contenair .banniere-cote-droite img{
    width: 400px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.banniere-cote-gauche .btn-prog i{
    margin-right: 0.5rem;
    /* color: orange; */
}

.banniere-cote-gauche .btn-prog{
    border: #f5f5f5 1px solid;
    border-radius: 1rem;
    padding: 0.4rem 2.7rem;
    text-decoration: none;
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}

.banniere-cote-gauche .btn-prog:hover{
    border: #1c8480 1px solid;
    /* color: var(--couleur-principale); */
    transform: scale(1.01);
}

/* Place à la section formation en ligne */

.compteur-label {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
  margin-bottom: 2px;
}

#form-en-ligne{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 4rem 7rem;
    scroll-margin-top: 80px;
}

#form-en-ligne .form-en-ligne-contenair {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-en-ligne-contenair .form-title-haut{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.form-en-ligne-contenair .form-title-haut .bloc-de-gauche h3{
    color: #1c8480;
    margin-bottom: 0.5rem;
}

.form-en-ligne-contenair .form-title-haut .bloc-de-gauche h2{
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.form-en-ligne-contenair .form-title-haut .bloc-avec-img img{
    width: 40px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.form-en-ligne-contenair .form-title-haut .bloc-du-milieu{
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 2rem;
    margin-top: 2rem;
    
}

.bloc-list-card{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1.7rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.bloc-list-card .card-bloc img{
    width: 300px;
    height: 300px;
    max-width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.card-image {
    position: relative;  
    overflow: hidden;
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-image .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 84, 138, 0.9), rgba(1, 12, 59, 0.9), rgba(0,0,0,0.4)); 
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-image:hover .overlay{
    opacity: 1;          
    pointer-events: auto;
}   

.card-image:hover img {
    transform: scale(1.05);   
}

.card-image .overlay h3 {
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.card-image .overlay p {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1.2rem;
    padding: 0.2rem 1rem;
}

.card-bloc .bloc-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
}

.card-bloc .bloc-btn a{
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-top: 2rem;
    padding: 0.5rem 0.5rem;
    border: #1f2352 1px solid;
    transition: all 0.3s ease-in-out;
    color: #1f2352;   
    
}
.card-bloc .bloc-btn a i{
    margin-left: 0.2rem;
}   

.card-bloc .bloc-btn a:hover{
    border: #1c8480 1px solid;
    color: var(--couleur-principale);
    transform: scale(1.03);
}

/* Place à la section formation en presentielle */

#form-en-presentiel{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 4rem 7rem;
    scroll-margin-top: 80px;
    margin-bottom: 1.5rem;
}

#form-en-presentiel .form-presen-contenair {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-presen-contenair .presentiel-title-haut{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.form-presen-contenair .presentiel-title-haut .presen-bloc-gauche h3{
    color: #1c8480;
    margin-bottom: 0.5rem;
}

.form-presen-contenair .presentiel-title-haut .presen-bloc-gauche h2{
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.form-presen-contenair .presentiel-title-haut .presen-bloc-img img{
    width: 40px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.form-presen-contenair .presentiel-title-haut .presen-bloc-milieu{
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 2rem;
    margin-top: 2rem;
    
}

.pre-list-card{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1.7rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.pre-list-card .presentiel-card-bloc img{
    width: 300px;
    height: 300px;
    max-width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.pre-card-image {
    position: relative;  
    overflow: hidden;
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.presentiel-card-image .presentiel-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 84, 138, 0.9), rgba(1, 12, 59, 0.9), rgba(0,0,0,0.4)); 
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.presentiel-card-image:hover .presentiel-overlay{
    opacity: 1;          
    pointer-events: auto;
}   

.presentiel-card-image:hover img {
    transform: scale(1.05);   
}

.presentiel-card-image .presentiel-overlay h3 {
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.presentiel-card-image .presentiel-overlay p {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1.2rem;
    padding: 0.2rem 1rem;
}

.presentiel-card-bloc .presentiel-bloc-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-bloc .presentiel-bloc-btn a{
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-top: 2rem;
    padding: 0.5rem 0.5rem;
    border: #1f2352 1px solid;
    transition: all 0.3s ease-in-out;
    color: #1f2352;   
    
}
.presentiel-card-bloc .presentiel-bloc-btn a i{
    margin-left: 0.2rem;
}   

.presentiel-card-bloc .presentiel-bloc-btn a:hover{
    border: #1c8480 1px solid;
    color: var(--couleur-principale);
    transform: scale(1.03);
}

.presentiel-card-image{
    position: relative; 
    overflow: hidden;
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.presentiel-card-bloc .presentiel-bloc-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
}

.presentiel-card-bloc .presentiel-bloc-btn a{
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin-top: 2rem;
    padding: 0.5rem 0.5rem;
    border: #1f2352 1px solid;
    transition: all 0.3s ease-in-out;
    color: #1f2352;   
    
}
.presentiel-card-bloc .presentiel-bloc-btn a i{
    margin-left: 0.2rem;
}   

.presentiel-card-bloc .presentiel-bloc-btn a:hover{
    border: #1c8480 1px solid;
    color: var(--couleur-principale);
    transform: scale(1.03);
}

/* Place à la section note informative */

#note-info{
    width: 100%;
    height: auto;
    background-color: #f6f7f9;
    padding: 4rem 7rem;
    scroll-margin-top: 80px;
}

#note-info .note-info-contenair {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.note-info-contenair .note-info-gauche{
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 300px;
    margin-left: 3rem;
}

.note-info-contenair .note-info-gauche h3{
    color: var(--couleur-secondaire);
    width: fit-content;
    border: var(--couleur-secondaire) 1.2px solid;
    margin-bottom: 0.8rem;
    padding: 0.3rem 1rem;
    font-weight: normal;
    font-size: clamp(0.6rem, 1rem, 1rem);
}

.note-info-contenair .note-info-gauche h2{
    font-size: clamp(0.9rem, 1.4rem, 1.4rem);
    margin-bottom: 0.8rem;
    line-height: 2.2rem;
}

.note-info-contenair .note-info-gauche p{
    font-size: clamp(0.6rem, 1rem, 1rem);
    color: var(--couleur-principale);
    margin-bottom: 1.5rem;
}

.note-info-contenair .note-info-gauche a{
    text-decoration: none;
    width: fit-content;
    border: #1c8480 1px solid;
    border-radius: 20rem;
    color: var(--couleur-principale);
    padding: 0.7rem 3.8rem;
    font-size: clamp(0.6rem, 1rem, 1rem);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.note-info-contenair .note-info-gauche i{
    margin-right: 0.3rem;
}

.note-info-contenair .note-info-gauche a:hover{
    border: #1c8480 1px solid;
    background-color: transparent;
    border-radius: 20rem;
    color: var(--couleur-principale);
    transform: scale(1.01);
}

.note-info-contenair .note-info-droite img{
    width: 100%;
    height: auto;
    max-width: 320px;
    min-width: 250px;
    object-fit: cover;
}

.note-info-contenair .note-info-droite{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Palce à la section pour les photos */

#album{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 4rem 7rem;
    scroll-margin-top: 70px;
}

#album .album-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album-container .part-haut-al {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.album-container .part-haut-al h2{
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1.6rem, 1.6rem);
}

.album-container .part-haut-al p{
    font-size: clamp(0.8rem, 1.2rem, 1.2rem);
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 2.5rem;
}

.album-container .part-bas-al {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

.img-al {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  /* border-radius: 8px; */

  
}

.img-al img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;

}

.img-al-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* transparent noir */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: center;
  padding: 1rem;
}

.img-al:hover img {
  transform: scale(1.1);
}

.img-al:hover .img-al-overlay {
  opacity: 1;
}

/* Place à la section vidéo */

#instant-video{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 1rem  7rem;
    scroll-margin-top: 80px;
    margin-bottom: 4rem;
}

#instant-video .video-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#instant-video .partie-haut-video{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.9rem;
}

#instant-video .partie-haut-video img{
    width: 100px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 1rem;
}

#instant-video .partie-haut-video h2{
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1.6rem, 1.6rem);
    width: 60%;
    text-align: center;
}

#instant-video .partie-haut-video p{
    font-size: clamp(0.8rem, 1.2rem, 1.2rem);
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 1.5rem;
    width: 65%;
}

#instant-video .partie-bas-video{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}


/* Style pour les iframes YouTube */
.video-item iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Style spécifique pour le format vertical des YouTube Shorts */
.video-item.youtube-short {
    width: 290px;  /* Largeur d'un téléphone */
    height: 515px; /* Hauteur proportionnelle pour un format 9:16 */
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Ajout pour un look plus moderne */
}

/* section du temoignage */

#temoignage {
  padding: 4rem 7rem;
  background-color: #f6f7f9;
}

.temoignage-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.temge-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.temge-title h2 {
  font-size: 1.6rem;
  color: var(--couleur-principale);
  padding-bottom: 0.8rem;
}
.temge-title p {
  font-size: 1.2rem;
  color: var(--couleur-principale);
  width: 75%;
  
}

.t-list-container {
  display: flex;
  justify-content: center;
}

.tmg-list-card {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.temoignage-carte {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  padding: 2rem;
  width: 355px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.temoignage-carte p{
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.quotation-marks {
  font-size: 2rem;
  color: #1c8480;
  background-color: var(--couleur-vert-clair);
  position: absolute;
  width: fit-content;
  max-width: 40px;
  height: 40px;
  border-radius: 10px;
  top: -15px;
}

.details-auteur-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.details-auteur-gauche img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.details-auteur-texte-droit h4 {
  margin: 0;
  font-size: 1rem;
  color: #102d4e;
}

.details-auteur-texte-droit p {
  margin: 0;
  font-size: 0.6rem;
  color: #333;
}

/* Place à la section avec le Badge */

#bg-progres {
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 4rem 7rem;
  margin-bottom: 1rem;
}

#bg-progres .bg-progres-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bg-progres-container .bg-progres-haut {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.9rem;
}

.bg-progres-container .bg-progres-haut h2 {
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.6rem, 1.6rem);
  width: 60%;
  text-align: center;
}

.bg-progres-container .bg-progres-haut p {
  font-size: clamp(0.8rem, 1.1rem, 1.1rem);
  color: var(--couleur-principale);
  text-align: center;
  margin-bottom: 1.5rem;
  width: 90%;
}

.bg-progres-container .bg-progres-haut img{
    width: 100px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 1rem;
}

.bg-progres-container .bg-progres-bas{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-prog-bas .prog-bas-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}


.bg-prog-bas .prog-card .prog-carte-cercle-1 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ebfafc;
    position: relative;
}

.bg-prog-bas .prog-card .prog-carte-cercle-2 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7f9;
    position: relative;

}
.bg-prog-bas .prog-card .prog-carte-cercle-3 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0eff9;
    position: relative;

}
.bg-prog-bas .prog-card .prog-carte-cercle-4 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7f9;
    position: relative;

}
.bg-prog-bas .prog-card .prog-carte-cercle-5 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #edf7f9;
    position: relative;

}

.bg-prog-bas .prog-card img{
    width: 140px;
    height: 140px;
    max-width: 85%;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    margin-top: 0.8rem;
}

/* Place à la section banniere  */

#banner{
    width: 100%;
    height: auto;
    padding:  0;
    color: #fff;
}

#banner .banner-container{
    width: 100%;
    height: 400px;
    background: url(/Assets/banner-1.jpg) no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

#banner .banner-container img{
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

#banner .banner-container .banner-right
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20rem;
    padding: 0 1rem;
}

#banner .banner-container .banner-right h2{
    font-size: clamp(1.2rem, 2.2rem, 2.2rem);
    color: var(--couleur-texte-clair);
    margin-bottom: 1rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

#banner .banner-right a{
    text-decoration: none;
    width: fit-content;
    border: #fff 1px solid;
    border-radius: 20rem;
    color: var(--couleur-texte-clair);
    padding: 0.7rem 3.8rem;
    font-size: clamp(0.65rem, 1.1rem, 1.1rem);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

#banner .banner-right a:hover{
    border: #ffffff 1px solid;
    background-color: transparent;
    border-radius: 20rem;
    color: var(--couleur-texte-clair);
    transform: scale(1.03);
}


/* section avec les formateurs */

#formateur {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-top: 3.5rem;
}

#formateur .formateur-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formateur-container .formateur-container-haut {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.formateur-container .formateur-container-haut img {
    width: 100px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 1rem;
}

.formateur-container .formateur-container-haut h2 {
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1.6rem, 1.6rem);
    width: 60%;
    text-align: center;
}

.formateur-container .formateur-container-haut p {
    font-size: clamp(0.7rem, 1.1rem, 1.1rem);
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 2.6rem;
    width: 85%;
}

.formateur-contenair-bas{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formateur-contenair-bas .form-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.formateur-contenair-bas .formateur-carte {
    width: 300px;
    height: 400px;
    /* background-color: #f5f7f9; */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}

.formateur-contenair-bas .formateur-carte img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.formateur-contenair-bas .formateur-carte h3 {
    font-size: 1.2rem;
    color: var(--couleur-secondaire);
    margin-bottom: 0.5rem;
}

.formateur-contenair-bas .formateur-carte p {
    font-size: 0.9rem;
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 0.4rem;
}

.formateur-carte .high{
 font-size: 0.7rem;
 margin-top: 0.5rem;
 font-weight: bold;
}

/* Place à la section footer  */

#footer {
    width: 100%;
    height: auto;
    background-color: var(--couleur-secondaire);
    padding: 0 7rem;
    color: #fff;
}

.footer-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

 .news-letter{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 200px;
    padding: 0 7rem;
    background: var(--couleur-dégradé-1);
}

 .news-droit{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
}

 .news-droit h2{
    font-size: clamp(0.6, 1.6rem, 1.6rem);
    margin-bottom: 0.3rem;
}

 .news-droit p{
    font-size: clamp(0.4, 1.2rem, 1.2rem);
    width: 65%;
    text-align: center;
    margin-bottom: 0.6rem;
}

.btn-news{
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    margin-right: 9rem;
}

.btn-news form{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.btn-news input[type="email"] {
    flex: 1 1 auto;
    padding: 0.75rem 1rem;
    border: #fff 1px solid;
    border-radius: 50px;
    background-color: transparent;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.btn-news form input::placeholder{
    color: #e4e4e4;
    font-size: 1rem;
    text-align: center;
}
.btn-news form input:hover{
    transform: scale(1.03);
}

.btn-news button{
    padding: 1rem 2rem;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn-news button:hover{
    color: #1c8480;
    transform: scale(1.03);
}

/* Place àa la partie footer content */

.footer-content{
    width: 100%;
    padding: 2rem 7rem;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

}

.footer-logo p{
    font-size: clamp(0.6rem, 1rem, 1rem);
    margin-bottom: 0.8rem;
}

.footer-logo img{
    width: 100%;
    max-width: 180px;
    margin-bottom: 0.3rem;
}

.social-media-link{
    display: flex;
    gap: 0.5rem;
}

.social-media-link img{
    width: 26px;
    height: 26px;
}

.span-five{
    font-weight: 700;
    color: #002462;
}

.cgu{
    font-size: clamp(0.6rem, 1rem, 1rem);
}

.footer-contact i{
    gap: 10px;
}

.footer-links h2{
    margin-bottom: 0.3rem;
    font-size: clamp(0.5rem, 1.35rem, 1.35rem);
}

.footer-links ul{
    list-style: none;
}
.footer-links ul li a{
  text-decoration: none;
  padding-bottom: 2rem; 
  transition: all 0.3s ease;
  font-weight: normal;
  color: #1f2352;
  transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover{
    color: #1c8480;
}

.footer-contact h2{ 
    margin-bottom: 0.3rem;
    font-size: clamp(0.5rem, 1.35rem, 1.35rem);
}

.footer-contact p{
    margin-bottom: 1rem;
    
}

.footer-copyright{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer-copyright p{
    font-size: clamp(0.6rem, 1rem, 1rem);
    text-align: center;
    width: 70%;
}

.footer-contact a{
    list-style: none;
    text-decoration: none;
}

/* Ajouter un compteur animation de cours */

.card-image {
    position: relative; /* Indispensable pour le positionnement absolu */
}

/* Style pour le texte d'introduction */
.countdown-intro-text {
    position: absolute;
    top: 50%; /* Positionnement vertical au milieu */
    left: 50%;
    transform: translate(-50%, -100%); /* MODIFIÉ : Déplace le texte de 100% de sa propre hauteur vers le haut */
    
    color: #fff;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 500;
    line-height: 1.1rem;
    font-size: 0.8em;
    text-align: center;
    z-index: 10;
    
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Styles pour le compteur */
.countdown {
    position: absolute;
    top: 50%; /* Positionnement vertical au milieu */
    left: 50%;
    transform: translate(-50%, 10%); /* MODIFIÉ : Déplace le compteur de 10% de sa propre hauteur vers le bas */
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(236, 7, 7, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Styles pour les éléments internes du compteur */
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.countdown-label {
    font-size: 0.75rem;
    font-weight: normal;
    text-transform: uppercase;
    color: #fff;
    margin-top: 4px;
}

.countdown-separator {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

/* Effet de survol : les deux éléments disparaissent */
.card-image:hover .countdown-intro-text,
.card-image:hover .countdown {
    opacity: 0;
    visibility: hidden;
}

/* Effet de survol : les éléments du compteur disparaissent sur les deux types de cartes */
.card-image:hover .countdown-intro-text,
.card-image:hover .countdown,
.presentiel-card-image:hover .countdown-intro-text,
.presentiel-card-image:hover .countdown {
    opacity: 0;
    visibility: hidden;
}

.btn-link.mobile-btn {
    display: none;
}

/* Place au popup */

/* Styles pour le conteneur principal de la pop-up */
.popup-overlay {
  position: fixed; /* Reste en place même en défilant */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Arrière-plan semi-transparent */
  display: flex; /* Centrer le contenu */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Assure que la pop-up est au-dessus du reste du contenu */
  /* Ajoutez cette ligne pour masquer la pop-up par défaut */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Rendre la pop-up visible */
.popup-overlay.active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Styles pour le contenu de la boîte modale */
.popup-content {
  background: url(/Assets/img-bg-popup.png) no-repeat center fixed;
  background-size: cover;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 700px; /* Taille maximale de la pop-up */
  width: 90%; /* Pour une bonne gestion sur les petits écrans */
  position: relative;
  transform: scale(0.9); /* Démarrage de l'animation */
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column; /* Organise les éléments en colonne */
  text-align: center;
}

.popup-overlay.active .popup-content {
  transform: scale(1); /* Animation de l'ouverture */
}

/* Styles pour le bouton de fermeture */
.popup-close {
  position: absolute;
  background-color: #d5e0df;
  top: -10px;
  right: -10px;
  font-size: 2em;
  border-radius: 200px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  cursor: pointer;
  color: #02052a;
  transition: all 0.3s ease-in-out;
}

.popup-close:hover{
    background-color: #e7fdfc;
}

/* Styles pour le contenu interne */
.popup-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0.9rem auto;
}

.popup-image {
  flex: 1;
}

.popup-image img {
  max-width: 100%;
  height: auto;
}

.popup-text {
  flex: 1;
  text-align: left;
}

.popup-text h2{
    margin-bottom: 0.7rem;
    color: #fff;
    line-height: 1.8rem;
    width: 90%;
    font-size: 1.4rem;
}
.popup-text p{
    margin-bottom:0.5rem;
    color: #fff;
    width: 90%;
}

#free{
    margin-bottom: 1.7rem;
}


.popup-button{
  background-color: #1F2352;
  color: white;
  border: none;
  padding: 0.6rem 1.8rem;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  font-size: clamp(0.6rem, 1.1rem, 1.1rem);
  margin-top: 1.9rem !important;
  font-weight: 600;
  transition: all 0.3s ease-in-out;

}

.popup-button:hover{
    background-color: #fff;
    color: var(--couleur-principale);
}

/* //Partie avec le cookies */

/* Styles pour le conteneur principal de la pop-up */
.cookie-banner {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 25px;
  background-color: rgb(239, 252, 251);
  color: var(--couleur-principale);
  text-align: center;
  z-index: 1000;
  display:none;
  justify-content: center;
  align-items: center;
  gap: 20px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  position: relative; /* Indispensable pour positionner l'image de manière absolue */
}

/* L'image de cookie en tant que pseudo-élément */
.cookie-banner::before {
  content: ""; 
  background-image: url('/Assets/cookies.png');
  background-size: contain; 
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  /* Styles pour le bureau */
  width: 80px; /* Taille de l'image sur ordinateur */
  height: 80px;
  left: 25px;
  bottom: -1px;

}

.cookie-policy-link{
    text-decoration: none;
    margin-left: 0.5rem;
    color: #1c8480;
    font-weight: 500;
}

.cookie-accept-btn{
    padding: 0.5rem 2rem;
    border-radius: 100px;
    border: none;
    background-color: #1c8480;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.cookie-accept-btn:hover{
    transform: scale(1.02);
}

.cookie-banner p{
    margin-left: 3.8rem;
}

/* Dans le fichier : style.css */

/* --- Badge pour la prochaine session de formation --- */

.card-image {
    position: relative; /* Indispensable pour positionner le badge par-dessus */
}

.session-badge {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(230, 245, 237, 0.95); /* Vert clair semi-transparent */
    color: #0d5e3c; /* Vert foncé pour le texte */
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
    border: 1px solid rgba(13, 94, 60, 0.2);
    backdrop-filter: blur(4px); /* Effet de flou stylé (optionnel) */
    transition: opacity 0.3s ease;;
}

.card-bloc .card-image:hover ~ .session-badge,
.card-bloc .card-image:hover .session-badge {
    opacity: 0; /* Rend le badge transparent au survol de la carte */
}

.session-badge .fa-clock {
    font-size: 1.1em;
}


/* badge session presentiel */

.presentiel-card-bloc {
    position: relative;
}

/* Fait disparaître le badge UNIQUEMENT au survol de l'image de la carte présentiel */
.presentiel-card-bloc .presentiel-card-image:hover ~ .session-badge,
.presentiel-card-bloc .presentiel-card-image:hover .session-badge {
    opacity: 0;
}


/* On cache le badge par défaut */
.session-badge.hidden {
    display: none;
}

/* On adapte le positionnement pour les téléphones */
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column; 
    gap: 10px;
    padding-top: 50px; 
  }

  .cookie-banner p{
    margin-left: auto;
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

  /* Styles pour l'image sur mobile */
  .cookie-banner::before {
    top: -40px; /* Positionne l'image en haut, en la faisant déborder un peu */
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal parfait */
    width: 85px; /* Taille plus petite sur mobile */
    height: 85px;
  }

  .cookie-accept-btn{
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 500 !important;
  }
}

/* article populaire */

/* =============================================
   SECTION ARTICLES POPULAIRES (ACCUEIL)
   ============================================= */

#popular-posts {
    padding: 4rem 7rem;
    background-color: #f6f7f9; /* Un fond légèrement différent pour contraster */
}

.popular-posts-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popular-posts-header {
    text-align: center;
    margin-bottom: 3rem;
}

.popular-posts-header h2 {
    font-size: 1.6rem;
    color: var(--couleur-principale);
    margin-bottom: 1rem;
}

.popular-posts-header p {
    font-size: 1.2rem;
    max-width: 600px;
}

/* Grille pour les articles */
.popular-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    margin-bottom: 3rem;
}

/* Pied de la section avec le bouton */
.popular-posts-footer {
    text-align: center;
}

/* Le bouton utilise la classe .cta-button que vous avez déjà stylée,
   mais on peut l'ajuster si besoin */
.popular-posts-footer .cta-button {
    text-decoration: none;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.3s;
    background-color: transparent;
    border: 2px solid var(--couleur-principale);
    color: var(--couleur-principale);
    transition: all 0.3s ease-in-out;
}

.popular-posts-footer .cta-button:hover {
    background-color: var(--couleur-principale);
    color: #fff;
    transform: translateY(-3px);
}

/* =============================================
   AJUSTEMENT TAILLE ARTICLES POPULAIRES
   ============================================= */

/* On cible spécifiquement les cartes dans la section populaire */
#popular-posts .post-card {
    /* On peut réduire la marge du bas si nécessaire */
    margin-bottom: 1.5rem; 
}

/* On réduit la taille de l'image */
#popular-posts .post-card-image {
    height: 200px; /* Ancien: 250px */
}

/* On réduit la taille des textes */
#popular-posts .post-card-content {
    padding: 1rem; /* Moins d'espace intérieur */
}

#popular-posts .post-card-title {
    font-size: 1.2rem; /* Ancien: 1.6rem */
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

#popular-posts .post-card-excerpt {
    font-size: 0.9rem; /* Texte de l'extrait plus petit */
    line-height: 1.5;
    margin-bottom: 1rem;
}

#popular-posts .post-card-readmore {
    font-size: 0.9rem; /* Lien "Lire la suite" plus petit */
    font-weight: bold;
}


/* --- Responsive pour la section --- */
@media (max-width: 1024px) {
    #popular-posts {
        padding: 3rem 2.5rem;
    }
}

/* Les styles existants de p, button, etc. restent inchangés */

/* ----------------------------------------------
RESPONSIVE TABLETTE | MOBILE | PC
---------------------------------------------- */

@media (max-width: 1450px) {

    /* --- GESTION DE L'EN-TÊTE --- */
   
    #navbar {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    
    header .desktop-btn {
        display: none;
    }

    header nav ul {
        display: none;
    }

    /* Styles pour l'icône hamburger et l'icône de fermeture */
    .menu-toggle {
        display: block;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--couleur-principale);
        z-index: 1001; 
    }
    
    .menu-toggle .close-icon {
        display: none;
        /* Ajout du style pour la couleur */
        color: var(--couleur-texte-clair);
    }
    
    .menu-toggle.active .fa-bars {
        display: none; 
    }
    
    .menu-toggle.active .close-icon {
        display: block;
    }

    /* --- STYLES DU MENU MOBILE --- */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        max-width: 280px;
        height: 100vh;
        background-color: var(--couleur-principale);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        z-index: 999;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        transition: right 0.3s ease-in-out;
        padding-top: 5rem;
    }
    
    .nav-links.active {
        right: 0;
    }

    .nav-links ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        list-style: none;
        margin-top: 4rem;
    }
    
    .nav-links ul li {
        width: 100%;
        padding: 0.4rem 0;
        text-align: center;
    }

    .nav-links ul li a {
        text-decoration: none;
        color: var(--couleur-texte-clair);
        font-size: 1rem;
    }

    .nav-links ul li a:hover {
        color: var(--couleur-secondaire);
    }

    header .nav-links .mobile-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        margin: 2rem auto 0;
        padding: 0.6rem 1.2rem;
        border-radius: 50px;
        background-color: var(--couleur-secondaire);
        color: var(--couleur-texte-clair);
        font-size: 0.9rem;
    }
    
    header .nav-links .mobile-btn:hover {
        background-color: #fff;
        color: var(--couleur-principale);
    }


   /* Place au hero section */
/* Empile les éléments de la section Hero */
    #hero {
       display: flex; /* Passe en une seule colonne */
        text-align: center;
        height: auto;
    }

    #hero .hero-gauche
 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #hero .hero-gauche .btn-hero {
        padding: 1rem 1.3rem;
    }

    #hero .hero-gauche {
        width: 100%;
        text-align: center;

    }

    #hero .hero-gauche p {
        max-width: 100%;
        margin-bottom: 2rem;
        font-size: clamp(0.8rem, 1.2rem, 1.2rem);
    }

    #hero .hero-droite {
        width: 100%;
        margin-top: 2rem;
    }

    #hero .hero-droite img {
        max-width: 80%; /* Assure que l'image ne dépasse pas */
        margin: 0 auto;

    }

#hero {
    padding: 4rem 7rem; /* Réduit le padding */

}

.hero-gauche{
    margin-bottom: 2.5rem;
}

#hero .hero-gauche h2 {
    font-size: clamp(1.65rem, 2vw, 1rem); 
    line-height: 2.2rem;
    width: 90%;
}

#hero .hero-gauche p {
    font-size: clamp(1rem, 2vw, 1.2rem);
}

#hero .hero-droite img {
    max-width: 80%; /* Ajuste la taille de l'image */
}

/* Place à la section apropos */
#apropos .partie-droite img {
    max-width: 500px;
    margin-left: 2.5rem;
    align-items: center;
}

.apropo-contenair .partie-basse{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}

.bg-progres-container .bg-progres-haut p {
    width: 100%;
}
.bg-progres-container .bg-progres-haut h2 {
    width: 100%;
}

/* Place à la section formateur */

#formateur .formateur-contenair-bas{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 7rem;
}

#formateur .formateur-card{
    flex: 1 1 45%;
    max-width: 45%;
}

/* Responsive section news letter */

.news-letter{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.news-droit h2{
    font-size: clamp(1rem, 1.6rem, 1.6rem);
    margin-bottom: 0.5rem;

}
.news-droit p{
    font-size: clamp(0.9rem, 1.2rem, 1.2rem);
    margin-bottom: 1.1rem;

}

.btn-news{
    margin-right: 0;
}

.presen-bloc-gauche{
    width: 50%;
}
.presen-bloc-gauche h2{
    line-height: 2.1rem;
}
.bloc-de-gauche{
    width: 50%;
}
.bloc-de-gauche h2{
    line-height: 2.1rem;
}

#banniere-prog .btn-prog {
        white-space: nowrap;
        padding: 0.6rem 0.8rem;
    }
    
    .footer-content{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }


#apropos .partie-droite
 {  
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

#apropos .partie-gauche
 {  
    
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bloc-list-card{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
}

.pre-list-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
}

/* section avec la bannière */
#banner .banner-container .banner-right 
{
    margin-left: 20rem;
}

#instant-video .partie-haut-video h2 
{
    width: 100%;
}

.note-info-contenair .note-info-gauche{
    width: 75%;
}

.note-info-contenair .note-info-droite{
    display: none;
}

.note-info-contenair .note-info-gauche h2{
  width: 90%;
}

}

/* ---------------------------------------------------------
RESPONSIVE TABLETTE | MOBILE | PC : 1024px
........................................................ */

@media (max-width: 1024px) {

     html{
        overflow-x: hidden;
    }

    body{
        padding-top: 60px;
    }

    #navbar, #hero, #apropos, #banniere-prog, #formateur, #bg-progres, #album, #instant-video, #temoignage, #note-info {
        padding: 2rem 2.5rem;
    }

   #navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000; /* Assurez-vous qu'il reste au-dessus */
    }

    #navbar img{
        max-width: 90px;
        margin-left: -0.9rem;
    }

    .menu-toggle i{
        width: 10px;
        height: auto;
    }

    .nav-links {
        width: 70%;
        max-width: 300px;
    }

    #hero{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 2rem 2rem;
        text-align: center;
        height: auto;
        background: url(/Assets/bg-ac-1.jpg) no-repeat center center/cover;
        position: relative;
        z-index: 1;
    }

    #hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(31, 138, 129, 0.9), rgba(4, 31, 81, 0.8));
    z-index: -1; 
}

    .hero-gauche p{
        line-height: 1.3rem;
        font-size: 0.6rem;
        width: 100% !important;
        margin-bottom: 2.5rem;
        display: none;
    }
    .hero-gauche h2{
        display: none;
    }

    .mobil-text{
        display: flex;
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
        justify-content: center;
    }

    #hero .hero-gauche {
        width: 100%;
        margin-bottom: 2.1rem;
    }

    .hero-gauche img{
        display: flex;
        width: 90%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
        margin-bottom: 2rem;
        margin-top: 1.2rem;
    }

    .hero-droite img {
        display: none;
    }
    .hero-droite{
        display: none;
        margin-bottom: -3rem;
        padding: 0;
    }
    .btn-hero {
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
        margin-top: -1rem;
        font-size: 1rem !important;
        padding: 0.7rem 0.7rem !important;

    }

    #apropos .partie-gauche, #apropos .partie-droite{
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .apropo-contenair{
        text-align: center;
    }

    #apropos .partie-gauche h2{
        font-size: clamp(1.4rem, 2.5vw, 1.8rem);
        line-height: 2rem;
        width: 85%;
        margin-bottom: 1.5rem;
    }

    #apropos .partie-gauche p{
        display: none;
   }

   .rext-mobile{
    display: flex;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    justify-content: center;
   }

   .rext-mobile p{
    font-size: clamp(0.8rem, 1.2rem, 1.2rem);
    color: var(--couleur-principale);
    text-align: center;
    width: 85%;
   }

    #apropos .partie-droite img{
          width: 100%;
          height: auto;
          margin-top: -1rem;
          max-width: 100%;
          object-fit: cover;
     }

     .partie-basse{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 2rem;
     }

     .apropo-contenair .partie-basse p{
        font-size: 1.2rem;
     }

     .decompte-chiffre {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-top: -2rem
     }

     .decompte-chiffre p{
            width:80%;
     }

     .banniere-contenair{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
     }
     
.banniere-cote-gauche img{
    display: none;
}

 .banniere-contenair .banniere-cote-gauche p{
    width: 100%;
    font-size: clamp(0.3rem, 1.1rem, 1.2rem);
}

.banniere-cote-gauche .btn-prog {
    width: fit-content;
    padding: 0.6rem 0.4rem;
    font-size: clamp(0.4rem, 0.8rem, 0.8rem);
}

    
 #banniere-prog .banniere-cote-gauche{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    padding-left: 0;
}

#banniere-prog .banniere-cote-droite{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -3rem;
}

#banniere-prog .banniere-cote-droite img{
    width: 75%;
    
}

    
     #banniere-prog .btn-prog {
          width: fit-content;
          padding: 0.6rem 0.8rem;
     }
    
     #banniere-prog h2 {
          font-size: clamp(1.2rem, 2vw, 1.6rem);
     }
    
    .form-title-haut{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

   .bloc-de-gauche{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
} 

.bloc-de-gauche h2{
    font-size: clamp(1.3rem, 2vw, 1.3rem) !important;
    line-height: 1.8rem;
    width: 85%;
    margin-bottom: 1.5rem;
}

.bloc-avec-img img{
    display: none;
}

  #form-en-ligne{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 0;
  }


  .bloc-list-card{
    margin-top: -2.5rem;
  }


     .form-en-ligne-contenair h2{
          font-size: clamp(1.2rem, 2vw, 1.6rem);
          margin-bottom: 1rem;
     }

     .form-en-ligne-contenair p{
          font-size: clamp(0.8rem, 1.2rem, 1.1rem);
          color: var(--couleur-texte-clair);
          text-align: center;
          /* padding: 1rem 0; */
          width: 85%;
          margin-bottom: 1.5rem;
     }


     #form-en-presentiel{
         width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 2rem 0;
     }

     .presentiel-title-haut{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
     }

     .presen-bloc-gauche{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
     }

     .presen-bloc-gauche h2{
          font-size: clamp(1.3rem, 2vw, 1.3rem) !important;
          line-height: 1.8rem;
          width: 85%;
          margin-bottom: 1.5rem;
     }

     .presen-bloc-img img{
            display: none;
     }

     .pre-list-card{
        margin-top: -2rem;
     }

     .form-presen-contenair p{
          font-size: clamp(0.8rem, 1.2rem, 1.1rem);
          color: var(--couleur-texte-clair);
          text-align: center;
          width: 85%;
          margin-bottom: 1.5rem;
     }

     #note-info{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 2rem 2rem;
     }

     .note-info-contenair .note-info-gauche{
        margin-left:0;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }

        .note-info-contenair .note-info-gauche h2{
            font-size: clamp(1.05em, 2vw, 1.3em);
            margin-bottom: 1rem;
            line-height: 1.4em
        }

        .note-info-contenair .note-info-gauche h3{
            text-align: center;
            margin-bottom: 1.6rem;
            margin-top: 1rem;
        }
        .note-info-contenair .note-info-gauche p{
            text-align: center;
            font-size: clamp(0.5rem, 1rem, 1rem);
            width: 85%;
            margin-bottom: 0.9rem;
        }

        .solid-icon{
            margin: 1rem 2rem;
            font-size: 1.5rem;
            padding: 0.7rem 1rem !important;
        }
     .note-info-droite img{
        display: none
     }
    
     #formateur .formateur-container-haut img{
          width: 80px;
    }

     #formateur .formateur-container-haut{
          width: 100%;
    }

     #formateur .formateur-container-haut h2{
        width: 75%;
        font-size: clamp(1.3rem, 2vw, 1.6rem);
        margin-bottom: 1rem; 
    }

     #formateur .formateur-contenair-bas{
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          padding: 2rem 0;
     }
    
     #formateur .formateur-card{
          flex: 1 1 45%;
          max-width: 45%;
     }
    
     #bg-progres .bg-progres-container{
          padding: 0;
     }
   .rext-mobile{
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
   }

   .album-container .part-haut-al{
    width: 100%;
    text-align: center;
   }
   .album-container .part-haut-al h2{
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    width: 85%;
    line-height: 1.7rem;
   }

   .album-container .part-haut-al p{
    font-size: clamp(1.05rem, 1vw, 1.3rem);
   }

   #instant-video .partie-haut-video{
    width: 100%;
   }

   #instant-video .partie-haut-video h2{
    width: 85%;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.7rem;
   }

   #instant-video .partie-haut-video p{
    font-size: clamp(1.05rem, 1vw, 1.3rem);
    width: 95%;
    margin-bottom: 1.5rem;
   }

   .temge-title h2{
    font-size: clamp(1.3rem, 2vw, 1.6rem);
   }

    .temge-title p{
     font-size: clamp(0.8rem, 1.05rem, 1.05rem);
     width: 85%;
    }

   .temge-title h2{
    font-size: clamp(1.3rem, 2vw, 1.6rem);
   }

   .t-list-container{
    margin-bottom: 1.5rem;
   }

   .bg-progres-container .bg-progres-haut{
    width: 100%;
   }
   
   .bg-progres-container .bg-progres-haut p{
    font-size: clamp(0.8rem, 1.05rem, 1.05rem);
   }

   .bg-progres-container .bg-progres-haut h2{
    font-size: clamp(0.8rem, 1.3rem, 1.3rem);
    width: 85%;
    margin-bottom: 2rem;
   }

   #banner{
    display: none;
   }

   .bg-prog-bas .prog-card img{
        width: 100px;
        height: 100px;
   }

   .prog-bas-container{
    margin-top: -1rem;
   }

    .bg-prog-bas .prog-card .prog-carte-cercle-1{
    width: 150px;
    height: 150px;
    }

    .bg-prog-bas .prog-card .prog-carte-cercle-2{
    width: 150px;
    height: 150px;
    }

    .bg-prog-bas .prog-card .prog-carte-cercle-3{
    width: 150px;
    height: 150px;
    }

    .bg-prog-bas .prog-card .prog-carte-cercle-4{
    width: 150px;
    height: 150px;
    }

    .form-container{
         display: flex;
        flex-wrap: wrap;
    }

    .bg-prog-bas .prog-card .prog-carte-cercle-5{
    width: 150px;
    height: 150px;
    }

    .formateur-contenair-bas .formateur-carte{
        margin-bottom: -2rem;
    }
    
    .formateur-contenair-bas{
        margin-top: -2rem !important;
    }


    .footer-container{
        width: 100%;
        text-align: center;
    }

    .news-droit h2{
        font-size: clamp(1.5rem, 2vw, 1.6rem);
        line-height: 1.6rem;
        margin-bottom: 1.3rem;
    }

    .news-droit p{
        font-size: clamp(0.8rem, 1.2rem, 1.2rem);
        width: 85%;
        margin-bottom: 1rem;
    }

    .btn-news form{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0rem;
    }

    .btn-news form input[type="email"] {
        width: 100%;
        max-width: 300px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
        margin-bottom:1rem;
        margin-top: 1.5rem;
    }

    .footer-logo, .footer-links{
        margin-bottom: 1.4rem;
    }

    .footer-logo{
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-logo p{
        font-size: clamp(0.6rem, 1rem, 1rem);
        text-align: center;
        margin-bottom: 1rem;
    }

    .footer-links h2{
     font-size: clamp(0.5rem, 1.35rem, 1.35rem);
     margin-bottom: 1.1rem;
    }

    .footer-links ul li a{
        padding-bottom: 2rem;
        font-size: clamp(0.6rem, 1rem, 1rem);
        font-weight: 500;
    }

    .footer-contact{
        width: 85%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-contact h2{
        font-size: clamp(0.5rem, 1.35rem, 1.35rem);
        margin-bottom: 1rem;
    }

    .footer-copyright p{
        width: 65%;
        margin-bottom: 2rem;
    }
}

@media (max-width: 600px) {
      #free{
        display: none;
    }
    .popup-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .popup-text{
        text-align: center;
        width: 100%;
    }
    .popup-text h2{
        font-size: clamp(1rem, 1.3rem, 1.3rem);
        text-align: center;
        width: 100%;
    }
    .popup-text p{
        font-size: clamp(0.5rem, 0.9rem, 0.9rem);
        text-align: center;
        margin-bottom: 2.5rem;
        width: 100%;
    }

    .popup-image img {
    max-width: 85%;
    height: auto;
}

.popup-button{
    font-size: clamp(0.5rem, 1.3rem, 1.3rem)!important;
    padding: 1rem 2rem;
    font-weight: 800;
}

}