*{                                      /* Sélecteur universel : applique les règles à tous les éléments */
    margin: 0px;                        /* Supprime les marges extérieures par défaut */
    padding: 0px;                       /* Supprime les espacements intérieurs par défaut */
    font-family: 'Roboto', sans-serif;              /* Définit la police principale du site */
}

.header{
    background-color: #fff;            /* Fond blanc pour l’en-tête */
    height: 100vh;                     /* Hauteur égale à la hauteur de l'écran */
    background-size: cover;            /* L’image de fond couvre tout le bloc */
    background-position: center;       /* Centre l’image de fond */
    min-height: 100px;                 /* Hauteur minimale de 100px */
}

ul {
    display: flex;                     /* Met les éléments <li> en ligne */
    padding: 0;                        /* Supprime le padding */
    margin: 0;                         /* Supprime la marge */
}

ul li {
    flex: 1;                           /* Tous les onglets prennent la même largeur */
    list-style: none;                 /* Supprime les puces des listes */
}

ul li a {
    display: block;                   /* Rend le lien cliquable sur tout le bloc */
    text-align: center;               /* Centre le texte */
    padding: 15px 0;                  /* Espace vertical à l'intérieur du lien */
    text-decoration: none;            /* Supprime le soulignement */
    color: white;                     /* Couleur du texte */
    font-weight: bold;               /* Met le texte en gras */
    transition: transform 0.2s ease, background-color 0.2s ease; /* Animation douce */
}

/* Couleurs pour chaque onglet */
.jaune    { background-color: #ceab5d; }
.bleu     { background-color: #87BFFF; }
.violet   { background-color: #92542a; }
.gris     { background-color: #8b97af; }
.orange   { background-color: #78151e; }

/* Animation au survol */
ul li a:hover {
    transform: scale(1.05);          /* Agrandit légèrement le lien */
}

/* Changement de couleur au survol */
.jaune:hover {
    background-color: #c29953;
    color: white;
}
.bleu:hover {
    background-color: #6699cc;
    color: white;
}

.violet:hover {
    background-color: #7a4423;
    color: white;
}
.gris:hover {
    background-color: #6e788d;
    color: white;
}

.orange:hover {
    background-color: #5e1018;
    color: white;
}

/* Menu déroulant (dropdown) */
ul li.dropdown {
  position: relative;                /* Nécessaire pour positionner le sous-menu */
}

ul li .submenu {
  display: none;                     /* Caché par défaut */
  position: absolute;               /* Positionné par rapport au parent */
  top: 100%;                        /* Juste en dessous du parent */
  left: 50%;                        /* Centré horizontalement */
  transform: translateX(-50%);      /* Ajuste le centrage */
  background-color: #7a4423;        /* Fond du sous-menu */
  padding: 0;
  margin: 0;
  list-style: none;                 
  width: 180px;                     /* Largeur du sous-menu */
  border-radius: 5px;               /* Coins arrondis */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Ombre portée */
  z-index: 10;                      /* Affiche au-dessus des autres éléments */
}

ul li.dropdown:hover .submenu {
  display: block;                   /* Affiche le sous-menu au survol */
}

/* Barre supérieure (logo + icônes) */
.top-bar {
    display: flex;                 /* Aligne horizontalement */
    justify-content: space-between; /* Espace entre les éléments */
    align-items: center;           /* Aligne verticalement */
    padding: 15px 30px;            /* Espace intérieur */
    background-color: #fff
}

.logo {
    height: 90px;                  /* Hauteur fixe du logo */
}

.social-icons {
    display: flex;                /* Aligne les icônes en ligne (flexbox) */
    align-items: center;          /* Centre verticalement les icônes */
}

.social-icons a {
    margin-left: 20px;            /* Espace à gauche entre chaque icône */
    color: #333;                  /* Couleur gris foncé des icônes */
    font-size: 35px;              /* Taille des icônes */
    text-decoration: none;        /* Supprime le soulignement des liens */
    transition: color 0.3s;       /* Animation douce au changement de couleur */
    display: flex;                /* Flex pour centrer le contenu de chaque lien */
    align-items: center;          /* Centre verticalement le contenu */
    justify-content: center;      /* Centre horizontalement le contenu */
}

.ient-icon {
    height: 60px;                 /* Hauteur fixe de l’icône */
    width: auto;                  /* Largeur automatique pour garder la proportion */
    display: block;               /* Affichage en bloc (pas en ligne) */
}

h1 {
  text-align: center;            /* Centre horizontalement le texte des titres h1 */
}

.hero-banner {
  background-image: url('images/cfa.png'); /* Image de fond */
  background-size: cover;         /* Image couvre toute la zone */
  background-position: 50% 75%;  /* Positionnement de l’image (centrée horizontalement, un peu en bas verticalement) */
  height: 400px;                 /* Hauteur fixe de la bannière */
  position: relative;            /* Position relative pour gérer les éléments enfants */
  display: flex;                 /* Flexbox pour aligner le contenu */
  align-items: center;           /* Centre verticalement le contenu */
  justify-content: center;       /* Centre horizontalement le contenu */
  color: black;                  /* Couleur du texte en noir */
}

.hero-text {
  padding: 20px 40px;            /* Espacement interne vertical (20px) et horizontal (40px) */
  border-radius: 8px;            /* Bords arrondis */
  text-align: center;            /* Centre le texte à l’intérieur */
}

.hero-text h1 {
  font-size: 2.5rem;             /* Taille du titre principal */
  margin-bottom: 10px;           /* Marge en bas pour espacer du paragraphe */
}

.hero-text p {
  font-size: 1.2rem;             /* Taille du texte des paragraphes */
}

/* Menu déroulant */
ul li .submenu li a {
  display: block;                /* Chaque lien du sous-menu s’affiche en bloc */
  padding: 10px 15px;            /* Espacement autour du texte */
  color: #333;                   /* Couleur gris foncé */
  font-weight: normal;           /* Police normale (pas en gras) */
  text-decoration: none;         /* Pas de soulignement */
  transition: background-color 0.3s ease; /* Transition douce sur le changement de fond */
}

ul li .submenu li a:hover {
  background-color: #B4A7D6;     /* Fond violet clair au survol */
  color: white;                  /* Texte blanc au survol */
}

ul {
  position: relative;            /* Position relative pour gérer les sous-menus */
  padding: 0;                   /* Pas de padding par défaut */
  margin: 0;                    /* Pas de marge par défaut */
  display: flex;                /* Menu principal en ligne avec flexbox */
}

ul li {
  list-style: none;             /* Supprime les puces */
  flex: 1;                     /* Chaque item prend une largeur égale */
}

ul li a {
  display: block;               /* Chaque lien est un bloc */
  text-align: center;           /* Texte centré */
  padding: 15px 0;              /* Espacement vertical */
  text-decoration: none;        /* Pas de soulignement */
  font-weight: bold;            /* Texte en gras */
  transition: transform 0.2s ease, background-color 0.2s ease; /* Animation sur transformation et couleur */
  color: white;                 /* Texte blanc */
}


.violet {
  background-color: #92542a;     /* Fond jaune clair */
}

.violet:hover {
  background-color: #7a4423;     /* Fond jaune plus foncé au survol */
  color: white;                  /* Texte blanc au survol */
}

.jaune {
  background-color: #ceab5d;     /* Fond jaune clair */
}

.jaune:hover {
  background-color: #c29953;     /* Fond jaune plus foncé au survol */
  color: white;                  /* Texte blanc au survol */
}

/* Pied de page */
.site-footer {
  background-color: #333;        /* Fond gris foncé */
  color: white;                  /* Texte blanc */
  padding: 40px 20px 20px;       /* Espacement interne (haut 40px, côtés 20px, bas 20px) */
  font-size: 14px;               /* Taille de police petite */
}

.footer-container {
  display: flex;                 /* Flexbox pour organiser les sections */
  justify-content: space-around; /* Distribution uniforme */
  flex-wrap: wrap;               /* Retour à la ligne si trop large */
  max-width: 1200px;             /* Largeur max */
  margin: auto;                  /* Centre horizontalement */
  text-align: left;              /* Texte aligné à gauche */
}

.footer-section {
  flex: 1 1 250px;               /* Chaque section prend au moins 250px, s’adapte */
  margin: 10px;                  /* Marge autour */
}

.footer-section h3 {
  margin-bottom: 10px;           /* Marge sous le titre */
  font-size: 18px;               /* Taille du titre */
  color: #f0f0f0;               /* Couleur gris clair */
}

.footer-section p {
  margin: 6px 0;                 /* Marge verticale des paragraphes */
}

.footer-bottom {
  text-align: center;            /* Texte centré */
  margin-top: 30px;              /* Marge au-dessus */
  border-top: 1px solid #555;    /* Ligne horizontale */
  padding-top: 15px;             /* Espacement au-dessus */
  font-size: 13px;               /* Petite taille de police */
  color: #bbb;                   /* Couleur gris clair */
}

/* Section "Nos équipes" */
.image-section {
  width: 100%;                  /* Pleine largeur */
  text-align: center;           /* Centre le contenu */
  margin: 0;                    /* Pas de marge */
}

.image-section img.main-image {
  max-width: 100%;              /* Largeur max 100% du conteneur */
  height: auto;                 /* Hauteur automatique pour garder les proportions */
  border-radius: 0px;           /* Pas de bord arrondi */
  cursor: pointer;              /* Curseur pointeur au survol */
}

/* Galerie d’images */
.gallery {
  display: flex;                /* Flexbox pour aligner les images */
  flex-wrap: wrap;              /* Retour à la ligne si besoin */
  gap: 15px;                   /* Espace entre les images */
  justify-content: center;      /* Centre la galerie */
  padding: 20px;                /* Padding autour */
}

.gallery img {
  width: 250px;                /* Largeur fixe */
  height: 180px;               /* Hauteur fixe */
  object-fit: cover;           /* L’image couvre la zone, rogée si besoin */
  border-radius: 8px;          /* Bords arrondis */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Ombre légère */
  cursor: pointer;             /* Curseur pointeur */
  transition: transform 0.3s ease; /* Animation sur la transformation */
}

.gallery img:hover {
  transform: scale(1.05);      /* Agrandit légèrement l’image */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Ombre plus prononcée */
}

/* Étapes de formation */
.indicators {
  text-align: center;          /* Centre le texte */
  padding: 40px 20px;          /* Espacement */
}

.indicators h1 {
  font-size: 2.5rem;           /* Grande taille */
  margin-bottom: 10px;         /* Marge en dessous */
}

.indicators h2 {
  font-size: 1.5rem;           /* Taille moyenne */
  font-weight: 400;            /* Poids normal */
  color: #555;                 /* Gris moyen */
  margin-bottom: 30px;         /* Marge en dessous */
}

.photo-grid {
  display: grid;               /* Utilisation de la grille */
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
  gap: 20px;                  /* Espace entre les images */
  max-width: 800px;           /* Largeur max */
  margin: 0 auto;             /* Centré horizontalement */
}

.photo-grid img {
  width: 100%;                /* Image pleine largeur de la cellule */
  height: auto;               /* Hauteur automatique */
  object-fit: contain;        /* Contient l’image sans la rogner */
  border-radius: 8px;         /* Bords arrondis */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* Ombre légère */
}

.etapes-formation {
  margin-top: 60px;           /* Marge en haut */
  max-width: 900px;           /* Largeur max */
  margin-left: auto;          /* Centré horizontalement */
  margin-right: auto;
  padding: 0 20px;            /* Padding horizontal */
}

.etapes-formation h2,
.etapes-formation .subtitle {
  text-align: center;         /* Texte centré */
  margin-bottom: 20px;        /* Marge en dessous */
  color: #333;                /* Gris foncé */
}

.etapes-formation .etape {
  max-width: 800px;           /* Largeur max */
  margin-left: auto;          /* Centré horizontalement */
  margin-right: auto;
  display: flex;              /* Flexbox pour aligner image + texte */
  align-items: center;        /* Centre verticalement */
  gap: 20px;                  /* Espace entre image et texte */
  margin-bottom: 40px;        /* Marge en bas */
  padding: 15px;              /* Padding interne */
  background-color: #f0f0f0;  /* Fond gris très clair */
  border-radius: 8px;         /* Bords arrondis */
}

.etapes-formation .etape img {
  width: 25%;                 /* Image prend 25% de la largeur */
  height: auto;               /* Hauteur auto */
  border-radius: 8px;         /* Bords arrondis */
  object-fit: cover;          /* Image recadrée pour remplir */
}

.etapes-formation .etape .texte {
  width: 75%;                 /* Texte prend 75% de la largeur */
}

@media (max-width: 768px) {
  .etapes-formation .etape {
    flex-direction: column;   /* Colonne au lieu de ligne sur petits écrans */
    text-align: center;       /* Texte centré */
  }
  .etapes-formation .etape img,
  .etapes-formation .etape .texte {
    width: 100%;              /* Image et texte prennent toute la largeur */
  }
}
/* Sous-menu pour Accueil actif (jaune) */
ul li.dropdown.active.jaune .submenu {
    background-color: #ceab5d; /* jaune clair */
}

ul li.dropdown.active.jaune .submenu li a:hover {
    background-color: #c29953; /* jaune foncé */
    color: white;
}

/* Sous-menu pour Formations actif (violet) */
ul li.dropdown.active.violet .submenu {
    background-color: #92542a; /* violet clair */
}

ul li.dropdown.active.violet .submenu li a:hover {
    background-color: #7a4423; /* violet plus foncé */
    color: white;
}

/* Sous-menu pour Formations actif (bleu) */
ul li.dropdown.active.bleu .submenu {
    background-color: #87BFFF; /* bleu clair */
}

ul li.dropdown.active.bleu .submenu li a:hover {
    background-color: #337AB7; /* bleu plus foncé */
    color: white;
}


/* Sous-menu pour Formations actif (gris) */
ul li.dropdown.active.gris .submenu {
    background-color: #e0e0e0; /* gris clair */
}

ul li.dropdown.active.gris .submenu li a:hover {
    background-color: #a0a0a0; /* gris plus foncé */
    color: white;
}


.document-image {
  max-width: 300px;
  height: auto;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.document-image:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.document-section {
  margin-left: 70px;            /* Aucune marge inutile à gauche */
  padding-left: 20px;        /* Juste un petit espace depuis le bord */
  max-width: fit-content;
}

.contact-section {
  background-color: #f9f9f9;
  padding: 50px 20px;
}

.contact-container {
  width: 900px;        /* largeur fixe */
  max-width: calc(100% - 40px); /* mais ne dépasse pas largeur fenêtre - 40px */
  margin: 40px auto;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 15px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.contact-info {
  max-width: 600px;
  margin: 0 auto 40px auto;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;

  background-color: #f0f0f0; /* gris clair */
  border-radius: 12px;        /* coins arrondis */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* optionnel : ombre légère */
}

.contact-info h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: black;
}

.contact-info p {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}

.contact-info i {
  margin-right: 10px;
  color: black;
}


.contact-form {
  flex: 1;
  min-width: 250px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.contact-form button {
  padding: 12px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form button:hover {
  background-color: black ;
}

.success {
  color: green;
  margin-bottom: 15px;
}

.error {
  color: red;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }
}