@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


/* Reset de base 
* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
    font-family: "Roboto Condensed", serif;
}*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Styles généraux (PC et grands écrans) */
body {
   /*- font-family: "Roboto Condensed", serif;*/

    margin: 0;
    padding: 0;

    font-size: 1rem; /* Taille relative */
    width: 100%;


    font-family: 'Open Sans', sans-serif;
  }
 
  h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700; /* Titre en gras */
    color: #000; /* Noir pur pour les titres */
}

a {
    color: #007BFF; /* Lien bleu */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Surligne au passage de la souris */
}
  .carousel {
     
        background-size: cover;
        background-position: center;
        /*background-repeat: no-repeat;*/
        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(14, 12, 12);
        text-align: center;
        position: relative;
        z-index: 1;
        transition: background-image 1s ease-in-out; /* Transition douce pour changer d'image */
    margin-top: 70px;

      
    }
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        font-size: 24px;
        cursor: pointer;
    }
      /* Bouton héro */
      .carousel-control.prev {
        left: 10px;
    }
    
    .carousel-control.next {
        right: 10px;
    }
    
    .carousel-control:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
  
  
  .product-info, .contact-form {
    max-width: 700px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    /*font-size: 1.8rem;*/
    font-size:  24px ;
    margin-bottom: 1rem;
  }
  p {
    font-size: 1.2rem;
    margin-bottom: 1rem;}
  ul {
    list-style-type: square;
    margin-left: 1.5rem;
  }
  
  .contact-form form {
    display: flex;
    flex-direction: column;
  }
  
  .contact-form label {
    margin-top: 1rem;
    font-weight: bold;
  }
  
  .contact-form input, .contact-form textarea, .contact-form button {
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  
  .contact-form button {
    background-color: #8b5e3b;
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 0.8rem;
    font-size: 1rem;
    margin-top: 1rem;
  }
  /* Barre de recherche */

  .search-form {
    display: flex;
    align-items: center;
    margin: 0 auto; /* Centre le formulaire si le conteneur a une largeur définie */
}

/* Champ de saisie de recherche */
.search-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 150px; /* Ajustez la largeur selon vos besoins */
    margin-right: 8px; /* Espace entre le champ de saisie et le bouton */
}
.search-form button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #135c1f;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Changement de couleur au survol du bouton */
.search-form button:hover {
  background-color: #503e1d;
}

/* Changement de couleur au clic du bouton */
.search-form button:active {
  background-color: #4b371d;
}


  .hero-content {
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour une meilleure lisibilité */
    padding: 20px;
    border-radius: 10px;
    max-width: 80%; /* Largeur maximale pour éviter que le contenu ne prenne toute la largeur */
   
    
}



.container{
    max-width: 1200px;
    margin: 20px auto;
    padding-left: 25px;
    padding-right: 25px;


}
/* Responsive design pour les petits écrans */
@media (max-width: 1024px) {
  .carousel {
      margin-top: 100px; /* Réduire l'espace supérieur sur les tablettes */
  }

  .product-info, .contact-form {
      max-width: 90%; /* Ajuster la largeur sur les tablettes */
  }

  h2 {
      font-size: 22px; /* Réduire la taille du titre sur les écrans moyens */
  }

  p {
      font-size: 1rem; /* Ajuster la taille de la police */
  }

  .search-form input[type="text"] {
      width: 100%; /* Champ de saisie prend toute la largeur sur tablettes */
  }
}

/* Responsive design pour les écrans petits (mobiles) */
@media (max-width: 768px) {
  .carousel {
      margin-top: 50px; /* Réduire l'espace sur les petits écrans */
      height: 80vh; /* Réduire la hauteur du carousel sur mobile */
  }

  .carousel-control {
      font-size: 20px; /* Taille plus petite des contrôles */
      padding: 8px;
  }

  .product-info, .contact-form {
      max-width: 100%; /* Prendre toute la largeur sur mobile */
      margin: 1rem auto;
      padding: 1rem;
  }

  h2 {
      font-size: 18px; /* Réduire la taille du titre */
  }

  p {
      font-size: 0.9rem; /* Réduire la taille de la police */
  }

  .search-form input[type="text"] {
      width: 100%; /* Champ de saisie prend toute la largeur sur mobile */
  }

  .hero-content {
      max-width: 90%; /* Ajuster le contenu héro sur mobile */
      font-size: 14px; /* Réduire la taille de la police dans l'élément héro */
  }
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Styles généraux (PC et grands écrans) */
body {
    font-family: "Roboto Condensed", serif;

    margin: 0;
    padding: 0;

    font-size: 1rem; /* Taille relative */
    width: 100%;
  }
 

h1, h2, h3 {
    color: #2c3e50;
}

/* Navbar principale */

.navbar, .navbar1 {
    display: flex;
    justify-content: space-between;
  align-items: center;
    position: absolute;
    top: 0; /* Place le menu en haut */
    left: 0;
    right: 100;
    width: 100%; /* Prend toute la largeur de la page */
    z-index: 2; /* Placer le menu au-dessus de l'image de fond */
   /*background: linear-gradient(45deg, rgb(241, 241, 241), rgb(146, 109, 59), rgba(3, 46, 3, 0.85)); /* Dégradé du vert vers le blanc */
   background-color:rgb(58, 55, 55);
    padding: 0px;

  border: none; /* Retire toute bordure */

  box-shadow: none; /* Retire toute ombre si présente */
}

.navbar li a, .navbar1 li a {
    font-size: 16px;
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: color 0.3s, background-color 0.3s; /* Animation douce */
}

.navbar li a:hover, .navbar1 li a:hover {
    color: rgb(66, 46, 7); 
    background-color: rgba(255, 255, 255, 0.3); /* Fond en survol */
    border-radius: 4px; /* Coins arrondis */
}

/* Conteneur des logos */
.logo-column ul {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .logo-column img {
    max-height: 60px; /* Limite la taille des logos */

  }


  .footer-sectionlogo img {
    max-width: 70px; /* Ajuste la largeur sans dépasser cette limite */
    height: auto; /* Conserve les proportions du logo */
    display: block; /* Permet le centrage via margin */
    margin: 0 auto; /* Centre le logo horizontalement */
  }
  


/* Navigation */
nav {
    text-align: auto;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-right: 15px;
}

nav ul li a {
    padding: 10px;
  /*  transition: all 0.3s ease-in-out;*/

}

.navbar1 ul li a {
    font-size: 16px;
  }

  
  .content-box {
    width: 95%;
    margin: 10px 0;
  }



/* Liens sociaux */

.social-links1 {
    position: fixed;
    top: 0; /* Place la liste en haut de la page */
    right: 0; /* Aligne la liste à droite */
    display: flex;
    list-style: none; /* autour des icônes */
    margin: 0;
}

   /* background-color: #f8f8f8; /* Couleur de fond (facultatif) */

.social-links1 li {
    margin-left: 25px; /* Espace entre les icônes */
}

.icon {
    width: 24px; /* Taille de l'icône */
    height: auto;
  
}



/* Responsivité : Ajustements pour les écrans plus petits */


/* Responsive Design */
@media (max-width: 768px) {
    .navbar, .navbar1 {
        flex-direction: column; /* Passer la navbar en colonne sur mobile */
        padding: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: center; /* Centrage des liens */
    }

    nav ul li {
        margin: 10px 0; /* Espacement vertical des liens */
    }

}

@media (max-width: 480px) {
    .navbar li a, .navbar1 li a {
        font-size: 16px; /* Réduction de la taille de la police */
        padding: 8px 12px;
    }

    .logo-column img {
        width: 70px; /* Réduction des logos */
    }
}

/* Responsive pour les écrans de plus de 768px */
@media (min-width: 768px) {
    .navbar, .navbar1 {
        flex-direction: row; /* Les éléments restent en ligne */
        justify-content: space-between; /* Les éléments se répartissent de manière égale */
        padding: 10px 20px; /* Réduit le padding pour un espace plus compact */
        height: 70px; /* Diminue la hauteur de la barre */
    }

    .navbar li a, .navbar1 li a {
        font-size: 12px; /* Conserve une petite taille pour les liens */
        padding: 5px 10px; /* Réduit le padding interne des liens */
    }

    .logo-column img {
        max-height: 50px; /* Réduit la taille des logos */
    }

    nav ul {
        gap: 10px; /* Réduit l’espace entre les liens de navigation */
    }

  
}

/***/


/* Responsive Design - Pour les écrans plus larges que 1000px */
/* Responsive Design - Pour les écrans plus larges que 1000px */
/* Pour les écrans plus larges que 1000px */

/**/

/* Sous-menu */
nav ul ul {
    display: none; /* Masquer le sous-menu par défaut */
    position: absolute;
    top: 100%; /* Positionner sous l'élément parent */
    left: 0;
    background-color: #131311; /* Fond clair */
    padding: 15px; /* Espacement interne */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre subtile */
    list-style-type: none; /* Supprimer les puces */
    border-radius: 4px; /* Bords arrondis */
    z-index: 1100; /* Priorité sur d'autres éléments */
    min-width: 200px; /* Largeur minimale pour assurer un affichage propre */
    text-align: left; /* Alignement par défaut */
}

/* Flèche pour les éléments déroulants */
.deroulant > a::after {
    content: "▼"; /* Petite flèche */
    font-size: 14px; /* Taille ajustée */
    margin-left: 8px; /* Espace entre le texte et la flèche */
    transition: transform 0.3s ease-in-out; /* Animation douce */
}

/* Rotation de la flèche lors du survol */
nav ul li:hover > a::after {
    transform: rotate(180deg); /* Inversion de la flèche */
}

/* Afficher le sous-menu au survol */
nav ul li:hover > ul {
    display: block; /* Afficher le sous-menu */
}

/* Position relative nécessaire pour les parents */
nav ul li {
    position: relative;
}

/* Liens du sous-menu */
nav ul ul li a {
    padding: 10px 20px; /* Espacement interne */
    display: block; /* Occupation de toute la largeur */
    color: #131111; /* Couleur du texte */
    text-decoration: none; /* Supprimer les soulignements */
    font-size: 14px; /* Police ajustée */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animation douce */
}

/* Séparation entre les éléments du sous-menu */
nav ul ul li {
    border-bottom: 1px solid #eee; /* Ligne de séparation */
}

/* Supprimer la ligne pour le dernier élément */
nav ul ul li:last-child {
    border-bottom: none;
}

/* Changement de style au survol des éléments */
nav ul ul li a:hover {
    background-color: #ddd; /* Fond clair au survol */
    color: #000; /* Texte noir au survol */
}

/* Barre de navigation normale (par défaut visible) */
.navbar-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

/* Style du bouton hamburger (par défaut masqué) */
.hamburger {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #f1f1f1;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
}

/* Responsive : masquage du menu et affichage du bouton hamburger */
@media (max-width: 768px) {
    .navbar-menu {
        display: none; /* Cacher la barre de navigation */
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.9); /* Fond sombre */
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        padding: 10px 0;
        z-index: 1000;
    }

    .navbar-menu.active {
        display: flex; /* Afficher la navigation lorsque le bouton est activé */
    }

    .hamburger {
        display: block; /* Afficher le bouton hamburger sur les petits écrans */
    }

    .navbar-menu ul li {
        margin: 10px 0;
        text-align: center;
    }

    .navbar-menu ul li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        padding: 8px 15px;
        transition: background-color 0.3s ease-in-out;
    }

    .navbar-menu ul li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }
}

/***/
/* Section footer */
#footer {
  /*   background: linear-gradient(45deg, rgb(241, 241, 241), rgb(146, 109, 59), rgba(3, 46, 3, 0.85)); /* Dégradé du vert vers le blanc */
  background-color:rgb(58, 55, 55);
     color: #082509; /* Couleur du texte */
     padding: 40px 0;
     height: auto; /* Hauteur initiale */
     width: 100%; /* Assure que la section prend toute la largeur */
     background-size: cover; /* L'image couvrira toute la section sans se répéter */
     background-repeat: no-repeat; /* Empêche l'image de se répéter */
     background-position: center; /* Centre l'image pour un meilleur alignement */
 }
 
 /* Conteneur principal */
 .footer-container {
     display: flex;
     flex-wrap: wrap; /* Permet aux sections de passer à la ligne si nécessaire */
     justify-content: space-between; /* Répartit les sections uniformément */
     max-width: 100%;
     margin: 0 auto;
     padding: 20px; /* Ajout d'un peu de padding pour le confort */
     height: auto; /* Ajuste la hauteur en fonction du contenu */
 }
 
 /* Section du footer */
 .footer-section {
     flex: 1 1 200px; /* Définit une largeur minimale pour chaque section, mais permet de s'étendre */
     margin: 10px 40px;
 }
 
 /* Titres des sections */
 .footer-section h3 {
     margin-bottom: 12px;
     font-size: 16px;
     font-weight: bold;
     color: #bbddc1;
     
    font-family:  'Open Sans', 'Arial', 'sans-serif';
 }
 
 .footer-section h2 {
     font-size: 16px;
     color: #ecebe8;
     margin-bottom: 25px;
     text-align: center; /* Centre le titre */
 }
 
 /* Paragraphes des sections */
 .footer-section p {
     font-size: 14px;
     color: #e9e5db;
     margin-bottom: 25px;
 }
 
 /* Listes et formulaires */
 .footer-section p, .footer-section ul, .footer-section form {
     margin-bottom: 25px;
 }
 
 .footer-section ul {
     list-style: none;
     padding: 0;
 }
 
 .footer-section ul li {
     margin-bottom: 30px;
 }
 
 .footer-section ul li a {
     color: #e9e5db;
     text-decoration: none;
     transition: color 0.3s;
     font-size: 16px;
 }
 
 .footer-section ul li a:hover {
     color: #09580d;
 }
 
 /* Formulaire */
 .footer-section form input {
     padding: 10px;
     margin-right:10px;
     border: none;
     border-radius: 5px;
     width: 70%;
 }
 
 .footer-section form button {
     padding: 10px 20px;
     background-color:#09580d;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }
 
 .footer-section form button:hover {
     background-color: #106e77;
 }
 
 /* Style de base pour les icônes sociales */
 .social-links .icon {
     width: 24px; /* Taille de l'icône */
     height: 24px; /* Taille de l'icône */
     margin-right: 10px; /* Espace entre l'icône et le texte */
 }
 
 /* Styles responsives */
 @media (max-width: 1200px) {
     .social-links .icon {
         width: 22px; /* Réduit la taille de l'icône à 22px sur les grands écrans */
         height: 22px;
     }
 }
 
 @media (max-width: 992px) {
     .social-links .icon {
         width: 20px; /* Réduit la taille de l'icône à 20px sur les écrans moyens */
         height: 20px;
     }
 }
 
 @media (max-width: 768px) {
     .social-links .icon {
         width: 18px; /* Réduit la taille de l'icône à 18px sur les petits écrans */
         height: 18px;
     }
 }
 
 @media (max-width: 576px) {
     .social-links .icon {
         width: 16px; /* Réduit la taille de l'icône à 16px sur les très petits écrans */
         height: 16px;
     }
 }
 
 
 
 /* Responsive Design */
 
 /* Sur les écrans de taille moyenne (max-width: 768px) */
 @media (max-width: 768px) {
     #footer {
         height: auto; /* Réduit la hauteur pour les petits écrans */
         padding: 30px 0; /* Réduit l'espacement */
     }
     
     .footer-container {
         flex-direction: column; /* Aligne les sections verticalement */
         align-items: center; /* Centre les éléments */
         padding: 10px; /* Réduit les espacements */
     }
 
     .footer-section {
         margin: 20px 0; /* Ajuste les marges entre les sections */
         text-align: center; /* Centre le texte des sections */
     }
 
     .social-links {
         flex-direction: column; /* Empile les icônes verticalement */
         align-items: center;
     }
 
     .social-links li {
         margin-bottom: 10px; /* Ajoute un espace entre les icônes */
     }
 
    
 
     .footer-section h2 {
         font-size: 22px; /* Réduit la taille du titre */
     }
 
     .footer-section h3 {
         font-size: 18px; /* Ajuste la taille des titres */
     }
 
     .footer-section p {
         font-size: 16px; /* Réduit la taille du texte */
     }
 }
 
 /* Sur les écrans très petits (max-width: 480px) */
 @media (max-width: 480px) {
     #footer {
         height: auto; /* Assure que la hauteur s'ajuste */
         padding: 20px 0; /* Réduit l'espacement */
     }
     
     .footer-container {
         padding: 5px; /* Réduit l'espacement intérieur */
     }
 
     .footer-section {
         margin: 10px 0; /* Réduit l'espace entre les sections */
         text-align: center; /* Centre le texte */
     }
 
     .footer-section h2 {
         font-size: 20px; /* Réduit la taille du titre */
     }
 
     .footer-section h3 {
         font-size: 16px; /* Ajuste la taille des sous-titres */
     }
 
     .footer-section p {
         font-size: 14px; /* Réduit la taille du texte */
     }
 }

 @media (min-width: 768px) {
  .footer-container {
      flex-wrap: nowrap; /* Évite que les sections passent à la ligne */
      justify-content: space-around; /* Répartit mieux l'espace entre les sections */
  }

  .footer-section {
      flex: 1; /* Permet une répartition égale entre les sections */
      margin: 10px 20px; /* Réduit l'espacement pour un meilleur alignement */
  }

  .footer-section form input {
      width: 60%; /* Ajuste la largeur du champ input */
  }
}

 /********icon*****/
 /* Style de base pour le logo */
 
/*************/

.learn-more-right {
  display: inline-block;
  text-decoration: none;
  color: #fcf6f6;
  font-weight: bold;
  padding: 10px 30px;
  border: 2px solid #031011;
  border-radius: 30px;
  background-color: #032905;
  position: relative;
  float: right; /* Positionné à droite */
  margin-right: 20px;
  transition: background-color 0.3s ease;
}



.learn-more-right:hover {
  background-color: #1bb416;
  color: #fff;}
 /******************propose*******************/



/* Section "À propos" */
.about-section {
  padding: 40px 0;
  background-color: #f4f4f4;
  text-align: center;
}



.about-section h2 {
  margin-bottom: 10px;
}
.text P{
  font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
 
}

/* Sections des sociétés */



.company-section {
  padding: 100px 50px;
}

.company-section .content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.company-section .company-img {
  width: 20%;
  border-radius: 10px;
  object-fit: cover;
}

.company-section .text {
  flex: 1;
}

.company-section h2 {
  color: #755831;
  margin-bottom: 20px;
}

/* Section des engagements */
/* Section Engagement */
.engagement-section {
  background-color: #f4f6f9;         /* Fond clair et moderne */
  padding: 80px 0;                    /* Espacement généreux en haut et en bas */
  border-top: 5px solid #4F8231; /* Vert avec une touche de marron */   /* Bordure bleue au sommet pour ajouter de la structure */


}

.container {
  max-width: 1100px;                  /* Largeur maximale du conteneur */
  margin: 0 auto;                     /* Centrage horizontal du contenu */
  padding: 0 20px;                    /* Espacement interne */
}

.content-wrapper {
  text-align: center;                 /* Centrer tout le contenu à l'intérieur du wrapper */
  line-height: 1.6;
  font-size: 1rem;   

}

.section-title {
  font-size: 40px;                  /* Taille de police plus grande pour le titre */
 /* color: #2c3e50;                     /* Couleur foncée pour un effet sophistiqué */
  font-weight: 600;                   /* Poids plus élevé pour plus de visibilité */
  margin-bottom: 30px;                /* Espacement sous le titre */
 text-transform: uppercase;  
  line-height: 1.6;        /* Mettre le titre en majuscules pour une apparence plus professionnelle */
}

.section-description {
  font-size: 1rem;
  color: #2d2e2d;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;       
  line-height: 1.6;      /* Centrer le texte */
}

.intro-text, .commitment-text {
  margin-bottom: 10px;  
  font-size: 1.2rem;
  color: #444;
  line-height: 1.6;
  

  
  text-align: justify; /* Justifie le texte pour un alignement propre sur les deux côtés */
 
}

.commitment-text {
  font-weight: 500;                   /* Poids de texte plus léger pour la seconde partie */
  

  margin-bottom: 10px;  
  font-size: 30px;
  color: #444;
  line-height: 1.6;


}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;                  /* Réduction de la taille du titre sur mobile */
  }

  .section-description {
    font-size: 1rem;                  /* Réduction de la taille de texte sur mobile */
    max-width: 100%;                  /* La largeur du texte s'étend sur toute la largeur sur mobile */
  }

  .intro-text, .commitment-text {
    margin-bottom: 15px;              /* Réduction de l'espacement sous les paragraphes sur mobile */
  } 
}
/* Responsive pour les écrans de 768px et plus */
@media (min-width: 768px) {
  .section-title {
    font-size: 1rem;               /* Agrandir la taille du titre */
    margin-bottom: 40px;             /* Augmenter l'espacement sous le titre */
  }

  .section-description {
    font-size: 1.2rem;               /* Augmenter la taille du texte de la description */
    margin-bottom: 15px;             /* Espacement sous la description */
  }

  .intro-text, .commitment-text {
    font-size: 1.4rem;               /* Augmenter la taille des textes intro et engagement */
    margin-bottom: 25px;             /* Augmenter l'espacement entre les paragraphes */
  }

  .container {
    padding: 0 30px;                /* Espacement interne plus large */
  }

  .content-wrapper {
    font-size: 1.1rem;               /* Augmenter la taille du texte */
  }
}

/*#presentation{
  background-image: url('/image/.png'); /* Remplacez par le chemin de votre image 
  background-size: cover; /* L'image couvre toute la section 
  background-position: center; /* L'image est centrée dans la section 
  height: 80vh; /* La section prend toute la hauteur de la fenêtre 
  right: 150vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white; /* Assure que le texte est visible sur le fond 
  padding: 50px;
  box-sizing: border-box; /* Inclut le padding dans la taille totale 
}
*/
.buttonpr {
  text-align: right;
  margin-top: 40px;
}

.btn-presentable {
  background-color: #af784c; /* Couleur de fond */
  color: rgb(37, 28, 8); /* Texte en blanc */
  padding: 20px 30px; /* Augmenter l'espacement intérieur */
  text-decoration: none; /* Retire le soulignement */
  font-size: 18px; /* Augmenter la taille du texte */
  border-radius: 12px; /* Coins plus arrondis */
  transition: background-color 0.3s ease; /* Transition de la couleur de fond */
}

.btn-presentable:hover {
  background-color: #eaecea; /* Couleur de fond au survol */
}

#wood{
  background-color: #e9e6db; /* Couleur de fond */
}
#yards{
  background-color: #dbe9dd; /* Couleur de fond */
}

.buttonpr1 {
  text-align: right;
  margin-top: 40px;
}

.btn-presentable1 {
  background-color: #4caf5c; /* Couleur de fond */
  color: rgb(37, 28, 8); /* Texte en couleur sombre */
  padding: 20px 30px; /* Augmenter l'espacement intérieur */
  text-decoration: none; /* Retire le soulignement */
  font-size: 18px; /* Augmenter la taille du texte */
  border-radius: 12px; /* Coins plus arrondis */
  transition: background-color 0.3s ease; /* Transition de la couleur de fond */
}

.btn-presentable1:hover {
  background-color: #eaecea; /* Couleur de fond au survol */
}

/* Responsive design pour les écrans moyens et petits (max-width: 1024px) */
@media (max-width: 1024px) {
  .btn-presentable1 {
    padding: 15px 25px; /* Réduit l'espacement intérieur */
    font-size: 16px; /* Réduit légèrement la taille du texte */
  }
}

/* Responsive design pour les petits écrans (max-width: 768px) */
@media (max-width: 768px) {
  .btn-presentable1 {
    padding: 12px 20px; /* Réduit davantage l'espacement intérieur */
    font-size: 14px; /* Réduit la taille du texte pour s'adapter aux petits écrans */
    border-radius: 10px; /* Réduit l'arrondissement des coins */
  }
}

/* Responsive design pour les très petits écrans (max-width: 480px) */
@media (max-width: 480px) {
  .btn-presentable1 {
    padding: 10px 15px; /* Réduit l'espacement intérieur pour les très petits écrans */
    font-size: 12px; /* Réduit davantage la taille du texte */
    border-radius: 8px; /* Réduit encore l'arrondissement des coins */
  }
}



/* Conteneur de contenu */
.content {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Bloc de contenu individuel */
.content-block {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 35px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Effet de survol */
.content-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}


/* Image */


.image500 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image500 img {
  width: 700px;
  height: auto;
}
.image50 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image50 img {
  width: 600px;
  height: auto;
}
.image60 img {
  width: 600px;
  position:center ;
}
.content h2{
  font-size: 24px;
  text-align: center; /* Centre le titre */
  padding: 20px 10px;
}

/* Décalage pour effet visuel */
.content-block:nth-child(odd) {
  flex-direction: row-reverse;
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
  .content-block {
      flex-direction: column;
      text-align: center;
  }
  .image img {
      width: 100%;
      max-width: 350px;
  }
}


/***propos.html /
/* Conteneur principal */
/* Styles de base */
/* Styles de base */
.content {
  display: flex;
  justify-content: center;  /* Centre le contenu horizontalement */
  align-items: center;      /* Centre le contenu verticalement */
  padding: 20px;            /* Espacement interne */
  width: 100%;      
  margin-top: 10px;        /* S'assure que .content prend toute la largeur */
}

/* Responsive : Écrans de taille moyenne (tablettes et plus petits) */
@media (max-width: 768px) {
  .content {
    flex-direction: column;  /* Empile les éléments en colonne pour les petits écrans */
    padding: 15px;          /* Réduit l'espacement interne sur les petits écrans */
    margin-top: 10px;
  }
}

/* Responsive : Écrans très petits (mobiles) */
@media (max-width: 480px) {
  .content {
    padding: 10px; 
              /* Réduit encore plus l'espacement interne sur les très petits écrans */
              margin-top: 10px;
  }
}

.text-image-wrapper {
  display: flex;
  flex-direction: row;      /* Aligner le texte et l'image en ligne (côte à côte) */
  align-items: center;      /* Aligner le contenu verticalement au centre */
  width: 100%;
  max-width: 1000px;        /* Limite la largeur à 1200px */
  background-color: #f8f8f8;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 100px;

}

.text-section {
  text-align: left;
  color: #333;
  width: 60%;
  padding-right: 20px;
  margin-right: 30px; /* Ajoute de l'espace entre le texte et l'image */
}

.text-section h1 {
  font-size: 2rem;
  color: #af874a;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
}

.text-section p {
  font-size: 1.2rem; /* Taille de police lisible et moderne */
  color: #2d2e2d; /* Couleur sombre pour un bon contraste */
  text-align: justify; /* Justifie le texte pour un alignement propre sur les deux côtés */
  margin-bottom: 10px; /* Espacement en bas pour aérer le contenu */
}

.text-section1 {
  text-align: left;
  color: #333;
  width: 60%;
  padding-right: 20px;
}

.text-section1 h1 {
  font-size: 2rem;
  color: #165e23;
  /*text-transform: uppercase;*/
  font-weight: bold;
  margin-bottom: 10px;
}

.text-section1 p {
  font-size: 1.2rem; /* Taille de police lisible et moderne */
  color: #2d2e2d; /* Couleur sombre pour un bon contraste */
  text-align: justify; /* Justifie le texte pour un alignement propre sur les deux côtés */
  margin-bottom: 10px; /* Espacement en bas pour aérer le contenu */
}

.image-section {
  width: 35%;
}

.image-section img {
  width: 50%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-left: 100px;
}

/* Section #woo */
/* Section #woo */
#woo {
  background-image: url("image/WO.png");
  background-size: cover;           /* Recouvre toute la section */
  background-position: center;      /* Centre l'image d'arrière-plan */
  min-height: 600px;                /* Définit une hauteur minimale pour la section */
  padding: 40px;                    /* Espacement interne */
  font-family: 'Open Sans', 'Arial', sans-serif;
}

@media (max-width: 1200px) {
  #woo {
    min-height: 500px;              /* Hauteur réduite pour les écrans plus petits */
  }
}

@media (max-width: 768px) {
  #woo {
    min-height: 400px;              /* Hauteur réduite pour les écrans de taille tablette */
    padding: 20px;                  /* Réduction de l'espacement interne pour les petits écrans */
  }
}

@media (max-width: 480px) {
  #woo {
    min-height: 300px;              /* Hauteur réduite pour les petits écrans (mobile) */
    padding: 10px;                  /* Réduction de l'espacement interne */
  }
}

/* Section #wy */
#wy {
  background-image: url("image/pagedegrade.png");
  background-size: cover;           /* Recouvre toute la section */
  background-position: center;      /* Centre l'image d'arrière-plan */
  min-height: 600px;                /* Définit une hauteur minimale pour la section */
  padding: 40px;                    /* Espacement interne */
}

@media (max-width: 1200px) {
  #wy {
    min-height: 500px;              /* Hauteur réduite pour les écrans plus petits */
  }
}

@media (max-width: 768px) {
  #wy {
    min-height: 400px;              /* Hauteur réduite pour les écrans de taille tablette */
    padding: 20px;                  /* Réduction de l'espacement interne pour les petits écrans */
  }
}

@media (max-width: 480px) {
  #wy {
    min-height: 300px;              /* Hauteur réduite pour les petits écrans (mobile) */
    padding: 10px;                  /* Réduction de l'espacement interne */
  }
}


/* Responsive : Écrans de taille moyenne (tablettes et mobiles) */
@media (max-width: 768px) {
  .text-image-wrapper {
    flex-direction: column;  /* Empile le texte et l'image en colonne */
    align-items: center;     /* Centre le contenu */
  }

  .text-section {
    width: 100%;             /* Texte occupe toute la largeur disponible */
    padding-right: 0;
    text-align: center;      /* Centrer le texte sur petits écrans */
  }
  .text-section1{
    width: 100%;             /* Texte occupe toute la largeur disponible */
    padding-right: 0;
    text-align: center;      /* Centrer le texte sur petits écrans */
  }

  .image-section {
    width: 80%;              /* Image occupe 80% de la largeur disponible */
    margin-top: 20px;        /* Espacement entre le texte et l'image */
  }
}

/* Responsive : Écrans très petits (mobiles) */
@media (max-width: 480px) {
  .text-section h1 {
    font-size: 1.5rem;       /* Réduit la taille du titre */
  }

  .text-section p {
    font-size: 1rem;         /* Réduit la taille du texte */
  }


  .text-section1 h1 {
    font-size: 1.5rem;       /* Réduit la taille du titre */
  }

  .text-section1 p {
    font-size: 1rem;         /* Réduit la taille du texte */
  }

  .image-section img {
    border-radius: 5px;      /* Ajuste les coins arrondis pour les petits écrans */
  }
}


/**********/

/* Style global de la section */
.timeline-nav {
  background-color: #f4f4f4;
  padding: 20px 0;
  font-family: 'Arial', sans-serif; /* Police simple et professionnelle */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;

}

/* Conteneur centré */
.timeline-nav .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Liste principale de la timeline */
.timeline {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Liens principaux */
.timeline > li > a {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  font-family: 'Arial', sans-serif; /* Police simple et professionnelle */
}

.timeline > li > a:hover {
  color: #ffffff;
  background-color: #3fad76;
  border-color: #3dac4c;
}

/* Sous-menu */
.timeline .deroulant {
  position: relative;
}

.timeline .sous1 {
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  padding: 10px 0;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: none;
  z-index: 10;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.timeline .sous1 li {
  padding:10;
  text-align: left;
}

.timeline .sous1 li a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
  padding: 8px 15px;
  display: block;
  transition: all 0.3s ease;
}

.timeline .sous1 li a:hover {
  color: #ffffff;
  background-color: #007BFF;
}

/* Affichage du sous-menu au survol */
.timeline .deroulant:hover .sous1 {
  display: block;
}

/* Alignement des éléments */
.timeline > li {
  position: relative;
}

/* Responsive design */




/* Responsive design pour les écrans plus petits */
@media (max-width: 768px) {
  /* Liste de la timeline centrée verticalement */
  .timeline {
    flex-direction: column; /* Afficher la timeline en colonne sur les petits écrans */
    gap: 15px; /* Réduire l'écart entre les éléments */
  }

  /* Ajuster les liens principaux */
  .timeline > li > a {
    font-size: 14px; /* Réduire la taille du texte */
    padding: 8px 12px; /* Réduire la taille des paddings */
  }

  /* Ajuster le sous-menu */
  .timeline .sous1 {
    min-width: 100%; /* Prendre toute la largeur disponible sur les petits écrans */
    box-shadow: none; /* Enlever l'ombre du sous-menu sur mobile */
  }

  /* Ajuster les éléments du sous-menu */
  .timeline .sous1 li {
    padding: 8px 15px; /* Réduire la taille du padding dans le sous-menu */
  }

  .timeline .sous1 li a {
    font-size: 13px; /* Réduire la taille du texte dans le sous-menu */
  }
}

/* Responsive design pour les très petits écrans (mobiles) */
@media (max-width: 480px) {
  /* Réduire l'écart entre les éléments de la timeline */
  .timeline {
    gap: 10px;
  }

  /* Réduire la taille du texte et les paddings */
  .timeline > li > a {
    font-size: 12px; /* Taille du texte réduite */
    padding: 6px 10px; /* Réduction du padding */
  }

  .timeline .sous1 {
    min-width: 100%; /* Le sous-menu prend toute la largeur sur les petits écrans */
    box-shadow: none; /* Enlever l'ombre du sous-menu */
  }

  .timeline .sous1 li {
    padding: 6px 10px; /* Réduire la taille des éléments du sous-menu */
  }

  .timeline .sous1 li a {
    font-size: 12px; /* Réduire la taille du texte dans le sous-menu */
  }
}
/* Conteneur de la timeline */
.timeline-nav {
  position: relative;
}
.image-preview {
  position: absolute;
  top: 50%; /* Centré verticalement par rapport au sous-menu */
  right: 10px; /* Ajusté pour qu'il reste proche du sous-menu */
 
  transform: translateY(-50%);
  width: 300px; /* Réduction de la largeur */
  height: 300px; /* Réduction de la hauteur */
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  background-size: cover;
  background-position: center;
  display: none; /* Masqué par défaut */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}



  
.sous1 li a:hover {
  color: #007BFF;
  cursor: pointer;
}


html {
  scroll-behavior: smooth;
}


#Styleporte {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */

}


#Stylesalledebain
{
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */
}

#Styleterrasse
{
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */
}

#Stylemeuble{
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */
}


#Stylbureau{
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */
}

#Stylmanche{
  
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */

}


#StyleCuisine {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler sur petits écrans */
  gap: 20px; /* Espacement entre les éléments */
  margin: 20px auto;
  max-width: 900px; /* Largeur maximale du conteneur */
}

#cui {
  flex: 1; /* Le texte occupe tout l'espace disponible */
  min-width: 300px; /* Largeur minimale du texte */
  border: 2px solid #8B4513; /* Bordure marron */
  padding: 20px;
  background-color: #F9F5F0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'Arial', sans-serif;
  color: #4A2F1C;
  line-height: 1.6;
}

#cui h2 {
  text-align: center;
  color: #5A3825;
}

#cui p {
  text-align: justify;
}

#StyleCuisine img {
  border-radius: 10px; /* Bords arrondis pour les images */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère */
}

#StyleCuisine > img {
  flex: 1; /* L'image principale occupe un espace égal au texte */
  max-width: 500px; /* Largeur maximale de l'image principale */
  height: auto; /* Conserve les proportions de l'image */
}

.image-collection {
  display: flex;
  flex-wrap: wrap; /* Les images s'adaptent sur plusieurs lignes si nécessaire */
  gap: 10px; /* Espacement entre les petites images */
  margin-top: 20px;
  justify-content: center; /* Centrer les images */
  width: 100%; /* La collection prend toute la largeur disponible */
}

.image-collection .small-image {
  width: calc(25% - 10px); /* Chaque petite image occupe 25% de la ligne avec l'espacement */
  max-width: 120px; /* Largeur maximale des petites images */
  border-radius: 5px; /* Bords légèrement arrondis */
  cursor: pointer; /* Le curseur change pour indiquer que l'image est interactive */
  transition: transform 0.3s ease; /* Animation au survol */
}

.image-collection .small-image:hover {
  transform: scale(1.1); /* Agrandissement léger au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
}


.btn-more-info {
  background-color: #ff6600; /* Bleu professionnel */
  color: white;
  border: none;
  padding: 12px 25px; /* Espacement interne pour un look soigné */
  text-align: center;
  font-size: 16px;
  font-weight: bold; /* Texte plus impactant */
  cursor: pointer;
  border-radius: 25px; /* Coins arrondis pour un style moderne */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet 3D */
  transition: all 0.3s ease; /* Transition pour un effet fluide au survol */
  margin-top: 20px;
  position: 10000px;
  right: 0;
 
}

.btn-more-info:hover {
  background-color: #3a1c0e; /* Couleur plus foncée au survol */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
  transform: translateY(-3px); /* Légère élévation pour un effet dynamique */
}


/*************/