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

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

/* 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: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease; /* Transition douce sur le changement de fond */
}

ul li .submenu li a:hover {
  background-color: #92542a;     /* 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 violet 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 */
}

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


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


@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: #7ca7b9; /* bleu clair */
}

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


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

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



ul li.dropdown.active.gris .submenu {
    background-color: #78151e; /* gris clair */
}

ul li.dropdown.active.orange .submenu li a:hover {
    background-color: #5e1018;
    color: white;
}



.hero-banner {
  background-image: url('vache2.jpg');
  background-size: cover;
  background-position: 50% 75%;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  overflow: hidden; /* pour contenir l’overlay */
}

/* Overlay pour améliorer la lisibilité du texte */
.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* noir avec 40% d’opacité */
  z-index: 1;
}

.hero-text {
  position: relative; /* pour être au-dessus de l’overlay */
  z-index: 2;
  padding: 20px 40px;
  border-radius: 8px;
  text-align: center;
  color: white; /* changer la couleur du texte en blanc pour mieux contraster */
}

.hero-text h1 {
  font-size: 3em;
  margin-bottom: 0.2em;
}

.hero-text p {
  font-size: 1.2rem;
}

#formules-location {
  font-family: 'roboto', sans-serif;
  padding: 2em;
  background-color: #f9f9f9;
}

.formules-header {
  text-align: center;
  margin-bottom: 2em;
}


.formules-header h2 {
  margin-top: 1em;   /* ajoute de l’espace au-dessus */
  margin-bottom: 1em; /* garde un petit espace en dessous si besoin */
}


.formules-header p {
  max-width: 800px;
  margin: 0 auto;
}

.formules-container {
  display: flex;
  justify-content: center; /* centre les cartes horizontalement */
  gap: 20px;               /* espace entre cartes */
  flex-wrap: wrap;
}

.formule-card {
  flex: 0 1 350px;          /* largeur fixe max 350px */
  max-width: 350px;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #eaeaea;
  text-align: center;       /* centre le texte à l’intérieur */
}

.formule-titre {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #444;
}


.formule-detail {
  margin-top: 1em;
}

.formule-section {
  margin-bottom: 1em;
}

.formule-section strong {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25em;
}


.formule-card ul {
  list-style: none;
  padding: 0;
  margin-top: 1em;
}

/* ✅ Modification ici : chaque ligne devient un bloc vertical */
.formule-card li {
  margin-bottom: 1em;
  font-size: 0.95em;
}

/* ✅ Le <strong> reste en bloc pour être au-dessus */
.formule-card li strong {
  display: block;
  margin-bottom: 0.2em;
}

.formules-footer {
  text-align: center;
  margin-top: 2em;
  font-style: normal;
  font-size: 0.95em;
}