:root {
  --primary: #8fa61f;
  --secondary: #e68a1b ;
  --dark: #333333 ;
  --light: #f4f8fb; /* fond entete et pied de page   */
  --success-color: #28a745;
  --error-color: #dc3545;}

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

body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333333 ; background-color: #fff;}
.container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}

p {text-align: justify; margin-bottom: 15px;}
/*================ Classes ================= */
.espace-avant {margin-top: 20px;}
.espace-apres {margin-bottom: 20px;}
.centre {text-align: center;}
.gras {font-weight: bold;}
.blanc {color: #fff;}
.rouge {color: #dc3545;}
.vert {color: #8fa61f;}
.nom-de-pas {font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif; color: #8b4513; font-size: 1em;}

/*================ Liste ================= */
ul.information {list-style-type: disc; padding-left: 30px; margin: 0;}

/*============= LIENS ======================*/
a {outline: none; text-decoration: none; padding: 2px 1px 0;} 

/*============= Bouton burger ============*/
#ch {display: none;}
#menu {display: none;}
#lab {width: 30px;height: 30px;
  background: linear-gradient(#8fa61f 0%, #8fa61f 20%, transparent 21%, transparent 40%, #8fa61f 41%, #8fa61f 60%, transparent 61%, transparent 80%, #8fa61f 81%, #8fa61f 100%);
  margin: 4px;cursor: pointer;display: none;}  

/*============= Bouton remonter ============*/
html {scroll-behavior: smooth;}
#haut {position: fixed; bottom: 20px; right: 20px; z-index: 99;
  border: none; outline: none; background-color: #8fa61f;
  color: white; cursor: pointer; padding: 10px; border-radius: 10px; font-size: 20px; display: none;}
#haut:hover {background-color: #74ae08;}

/*============= Boutons contact ============*/
.bouton {display: inline-block; background-color: #8fa61f; color: white; padding: 0.6rem 1.2rem; border-radius: 8px;
    text-decoration: none; cursor: pointer; font-weight: 600; margin-top: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.2);}
.bouton:hover {background-color: white; color: #8fa61f; font-weight: bold; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.3);}

/*============== Header Styles =============*/
header {background-color: #f4f8fb; padding: 1rem 0;}
.header-content {display: flex; justify-content: space-between; align-items: center; position: relative;}
.header-top {display: flex; align-items: center; justify-content: space-between; width: 100%;} 
.logo {font-size: 2rem; font-weight: bold; color: #8fa61f; display: flex; align-items: center;} 

/*============= Menu navigation ==========*/
nav {display: flex; width: auto; flex-wrap: nowrap;} 
nav > a {display: block; background-color: #8fa61f; width: 100%; text-align: center; box-sizing: border-box; padding: 12px; margin: 5px;
    text-decoration: none; color: white; transition: all 0.3s ease; border-radius: 12px; white-space: nowrap;} 
nav > a:link, nav > a:visited {color: #fff;}
nav > a:hover {background-color: #fff; text-decoration: none; color: #8fa61f;} 

/*=============== Hero Section ==============*/
.hero {background-size: cover; background-position: center; height: 400px; display: flex; align-items: center;
    justify-content: center; color: white; text-align: center; position: relative;}
.hero::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
.hero-content {position: relative; z-index: 1;}
.hero h1 {font-size: 2.5rem; margin-bottom: 1rem; padding: 0 10px;}
.hero p {font-size: 1.5rem; margin-bottom: 1rem; padding: 0 15px; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);}

/*============== Main Content ==============*/
.main-content {padding: 4rem 0;}
.content-section {margin-bottom: 3rem; text-align: justify;}
.content-section img {max-width: 100%; height: auto; display: block;}
.content-section h2 {color: #e68a1b; margin-top: 1.4rem; margin-bottom: 0.8rem; position: relative; padding-bottom: 0.5rem;}
.content-section h2::after {content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 3px; background-color:  #8b4513;}
.content-section h3 {color: #e68a1b; margin-top: 1.2rem; border-bottom: 2px solid #8fa61f; padding-bottom: 0.2rem;}

/*================= Layouts ================*/
.deux-columns {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;}
.deux-columns img {width: 100%; height: auto; object-fit: contain; max-width: 100%; border-radius: 12px;}
.trois-columns {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem;}
.quatre-columns {display: grid; grid-template-columns: 1fr 1fr  1fr 1fr; gap: 1.2rem;}
.info-box {background: #dce6bf; padding: 1.2rem; border: 1px solid #8fa61f; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-bottom: 2rem;}
.info-box a {transition: all 0.3s ease;}
.info-box a:hover {transform: translateX(5px); background-color: #fff;}

/*============ Avis - Temoignages ==========*/
.temoignage {background: #fff; padding: 1.2rem; border: 1px solid #8fa61f; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-bottom: 2rem;}
.stars {font-size: 1.5em;color: gold;}
.avis {font-family: 'Dancing Script', cursive, 'Times New Roman', serif; color: #8b4513; font-size: 1.2em; text-align: justify; line-height: 1.2;}

/*============== Carousel ==============*/
.carousel {position: relative; overflow: hidden; margin: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.carousel-container {display: flex; transition: transform 0.5s ease;}
.carousel-item {min-width: 100%; position: relative;}
.carousel-item img {width: 100%; display: block;}
.carousel-caption {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: white; padding: 1rem;}
.carousel-nav {position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 1rem;}
.carousel-btn {background: #8fa61f; color: white; border: none; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;}

/*=============== Tableau ===============*/
.tableau-responsive {overflow-x: auto; margin-bottom: 1.5rem;}
table {width: 100%; border-collapse: collapse;}
th, td {padding: 0.75rem; text-align: left; border-bottom: 1px solid #ddd;}
th {background-color: #f8f9fa;}
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/*======== Gestion des vidéos ============*/
.video-container {text-align: center; margin: 20px 0;}
.video-wrapper {position: relative; width: 90%; max-width: 800px; margin: 0 auto;}
.video-wrapper iframe {width: 100%; height: 100%; border: none; aspect-ratio: 16/9; }
.video-placeholder {cursor: pointer; border: none; background: transparent; padding: 0; position: relative; width: 100%; height: 100%; display: block;}
.video-placeholder:hover .play-button {transform: scale(1.1); opacity: 0.9;}
.play-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #dc3545; pointer-events: none;}

/*==== Gestion des vidéos côte à côte ====*/
.videos-row {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 20px 0;}
.videos-row .video-container {
  flex: 1 1 400px; /* Augmente la base à 400px pour éviter qu'elles ne rétrécissent trop vite */
  max-width: 100%; /* Permet de prendre toute la largeur disponible */
  min-width: 300px; /* Largeur minimale pour éviter qu'elles ne deviennent trop petites */
}
.videos-row iframe {width: 100%; aspect-ratio: 16/9; height: auto;}

/*============= Gestion Images =============*/
.rounded-image {border-radius: 20px 50px 20px 50px; /* coins asymétriques */
    border: 3px solid #8fa61f; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); transform: rotate(2deg); /* légère rotation */
    transition: all 0.3s ease; /* animation fluide */}
.rounded-image:hover {border-radius: 50px 20px 50px 20px; transform: rotate(0deg);}
.original-size {width: auto !important; max-width: none !important; height: auto;}
.decale-bas {margin-top: 3rem;}

/*== AFFICHAGE FAQ == */
.faq-container {max-width: 1200px; margin: 2rem auto; padding: 0 1rem;}
.faq-item {background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem; overflow: hidden; transition: var(--transition);}
.faq-question {padding: 1.5rem; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; font-weight: 400; font-size: 1rem;}
.faq-question:hover {background-color: #dce6bf;}
.faq-icon {width: 20px; height: 20px; transition: var(--transition);}
.faq-answer {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 0 1.5rem; padding-top: 0;}
.faq-item.active .faq-answer {max-height: 300px; padding: 1.5rem 1.5rem 1.5rem;}
.faq-item.active .faq-icon {transform: rotate(45deg);}

/*==== formulaire de contact  ==== voir fichier 'formulaire.css'===*/

/*================ Footer ================*/
footer {background-color: #f4f8fb; color: #8fa61f; padding: 3rem 0 1.5rem;}
.footer-content {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}
.footer-section h3 {color: #b9b7b7; margin-bottom: 1.2rem;}
.footer-section ul {list-style: none;}
.footer-section ul li {margin-bottom: 0.75rem;}
.footer-section a {color: #b9b7b7; text-decoration: none; transition: color 0.3s;}
.footer-section a:hover {color: #8fa61f; font-weight: bold;}
.copyright {text-align: center; color: #8fa61f; margin-top: 2rem;}

/*==== MEDIA QUERIES ==== */
/*==== En dessous de 992px ==== */
@media all and (max-width: 992px) {
    #lab {display: block;} 
   .header-content {flex-direction: column; align-items: stretch; position: relative;} 
   .header-top {display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1001; } 
   .logo {order: 2; margin: 0 auto; padding: 0 20px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1001;}

    /*=== Cache le menu par défaut ===*/
    nav {display: none; flex-direction: column; position: absolute; top: 90px; left: 5px;
        width: max-content; min-width: 140px; background: linear-gradient(to bottom, var(--secondary-color), var(--dark-color)); 
        z-index: 1000; padding: 2px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.3);}
    nav > a {width: 100%; padding: 12px 15px; font-size: 1.2em; margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center;} 
    /*=== Affiche le menu quand la checkbox est cochée ===*/
    #ch:checked ~ nav {display: flex;}  
    /*=== Les 3 et 4 colonnes passent sur 2 colonnes  ===*/  
   .trois-columns, .quatre-columns {grid-template-columns: 1fr 1fr;  gap: 1.5rem;}
   .videos-row .video-container {flex: 1 1 350px;} /* Réduit légèrement la base pour les tablettes */
}
/*==== En dessous de 768px ==== */
@media all and (max-width: 768px) {
  .hero {height: 300px;} /* Réduit un peu la hauteur sur mobile */
  .hero h1 {font-size: 2.2rem; padding: 0 15px;}
  .hero p {font-size: 1.2rem; padding: 0 20px; line-height: 1.4;}

  body {font-size: 1em;}

  /*=== on adapte le menu qui devient une colonne ===*/
  nav {display: block; position: absolute; transform: translate(-1000px, 0); transition: all 0.5s ease;}
  #lab {display: block;} 
  #ch:checked + nav {transform: translate(0, 0); transition: all 0.5s ease;} 
  #menu {display: block;}

  /*=== les élements se mettent les uns en dessous des autres ===*/ 
  .stages-list, .deux-columns, .trois-columns {grid-template-columns: 1fr;  gap: 1.5rem;}
  .content-section {margin-bottom: 1.5rem;}
  .info-box {margin-bottom: 1.5rem;}
  .info-box a {font-size: 1.1em; padding: 8px 0;}

  .carousel-btn {width: 50px; height: 50px; font-size: 1.5rem;}

  .footer-section h3 {font-size: 1.5rem;}
  .footer-content {gap: 1.5rem;} /* Espacement réduit entre les sections */
  .footer-section h3 {font-size: 1.2rem; margin-bottom: 1rem;} /* Espacement réduit sous les titres */
  .footer-section ul li {margin-bottom: 0.5rem; }/* Espacement réduit entre les liens */

  /*=== on force l'affichage du tableau sur toute la longueur ===*/
  .tableau {width: 100%;}
  #flex-container {display:block;}

  .videos-row {flex-direction: column; align-items: center;}
  .videos-row .video-container {max-width: 100%; min-width: 100%; /* Prend toute la largeur sur mobile */}
}

@media (max-width: 576px) {
    .hero h1 {font-size: 2rem;}
    .espace-avant {margin-top: 15px;}
    .espace-apres {margin-bottom: 15px;}
    .content-section h2 {font-size: 1.1rem; margin-bottom: 0.8rem;}
    .quatre-columns {grid-template-columns: 1fr;  gap: 1rem;}
    .deux-columns, .trois-columns, .quatre-columns, .stages-list {gap: 1rem;}
    .footer-content {grid-template-columns: 1fr; gap: 1.2rem;}
    .footer-section {text-align: center;}
    .footer-section h3 {font-size: 1.1rem;}
    .social-links {justify-content: center;}
    .copyright {margin-top: 2rem; font-size: 0.9rem;}
}

/* Pour les très petits écrans */
@media all and (max-width: 480px) {
    .hero h1 {font-size: 1.8rem;}
    .hero p {font-size: 1rem;}
    .logo {font-size: 1.8rem;}
    .espace-avant {margin-top: 10px;}
    .espace-apres {margin-bottom: 10px;}
    .deux-columns, .trois-columns, .quatre-columns, .stages-list {gap: 0.75rem;}
    .info-box {padding: 1.25rem; margin-bottom: 1.25rem;}
    .content-section {margin-bottom: 1rem;}
    ul.information {list-style-type: disc; padding-left: 15px; margin: 0;}
    .video-wrapper {width: 95%;}
}