@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;
    }
}

/* Conteneur principal */


/* Responsive Design : Sous-menu */



/*************************/
.hero-section{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.986);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: background-image 1s ease-in-out; /* Transition douce pour changer d'image */
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couche foncée */
    z-index: -1;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* Responsive pour smartphones */
@media (max-width: 480px) {
    .hero-section {
        height: 70vh; /* Réduction supplémentaire pour les petits écrans */
        text-align: center;
    }

    .carousel-control {
        font-size: 14px;
        padding: 6px;
    }
}
/***/




/* Contenu de la section héro */
/* Conteneur du contenu Hero */

.hero-content {
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent pour une meilleure lisibilité */
    /*/padding: 20px 30px; /* Espacement interne pour aérer le contenu */


    border-radius: 12px; /* Coins légèrement arrondis */
    width: 100%;
    height: 20%;
   /* max-width: 70%; /* Largeur maximale du contenu */
    text-align: center; /* Centrer le texte */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Légère ombre pour un effet flottant */
    margin: 10px ;/* Centrage horizontal */
    /*height: 1000px;*/
    
}

/* Styles pour les titres */
.hero-content h1 {
    font-size: 36px; /* Taille plus grande pour le titre */
    margin-bottom: 15px; /* Réduction de l'espace sous le titre */
    color: #ffffff; /* Couleur blanche pour un bon contraste */
    line-height: 1.4; /* Hauteur de ligne pour améliorer la lisibilité */
    font-weight: bold; /* Texte en gras pour le titre */
}

/* Styles pour les paragraphes */
.hero-content p {
    font-size: 18px; /* Texte légèrement plus grand pour une meilleure lecture */
    margin-bottom: 25px; /* Espacement ajusté sous le paragraphe */
    color: #f0f0f0; /* Couleur blanche adoucie */
    line-height: 1.6; /* Hauteur de ligne confortable */
}

/* Bouton de la Hero Section */
.btn-hero {
    padding: 12px 30px; /* Espacement interne ajusté pour un bouton bien proportionné */
    background-color: #f05b22; /* Couleur principale du bouton */
    color: #ffffff; /* Couleur du texte */
    text-decoration: none; /* Suppression des soulignements */
    font-size: 16px; /* Taille du texte */
    font-weight: bold; /* Texte légèrement en gras */
    border-radius: 6px; /* Coins arrondis */
    transition: all 0.3s ease; /* Transition douce pour hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Légère ombre pour un effet surélevé */
}

/* Effet au survol du bouton */
.btn-hero:hover {
    background-color: #d24e1c; /* Couleur plus foncée au survol */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Ombre plus marquée pour le hover */
    transform: translateY(-3px); /* Légère élévation au survol */
}

/* Responsive : ajustement pour les petits écrans */
@media (max-width: 768px) {
    .hero-content {
        max-width: 90%; /* Largeur ajustée pour les écrans plus étroits */
        padding: 15px 20px; /* Espacement réduit pour optimiser l'espace */
        height: auto;
    }

    .hero-content h1 {
        font-size: 28px; /* Taille du titre réduite pour le mobile */
    }

    .hero-content p {
        font-size: 14px; /* Taille du texte réduite pour s'adapter */
    }

    .btn-hero {
        font-size: 14px; /* Texte plus petit pour un bouton adapté */
        padding: 10px 20px; /* Espacement réduit pour le mobile */
    }
}

/**************/
/* Conteneur général */
.container {
    width: 90%;
    max-width: 1200px; /* Limite la largeur pour un affichage centré sur les grands écrans */
    margin: 0 auto; /* Centrage horizontal */
}

/* Gestion des colonnes et des lignes */
.row {
    display: flex;
    align-items: center;
    justify-content: space-around; /* Espacement uniforme entre les éléments */
    flex-wrap: wrap; /* Permet de passer à la ligne sur petits écrans */
}

.col-2 {
    flex-basis: 50%; /* Chaque colonne prend 50% de la largeur disponible */
    background-color: #e2d4c2; /* Couleur de fond douce */
    padding: 20px; /* Espacement interne pour le contenu */
    border-radius: 10px; /* Coins arrondis pour un design moderne */
    max-width: 1000px; /* Largeur maximale pour éviter que la colonne ne prenne toute la largeur */
    height: 500px; /* Hauteur fixe */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage vertical et horizontal */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Ajout d'une ombre légère pour un effet en relief */
}

/* Titre dans la colonne */
.col-2 h1 {
    line-height: 60px; /* Hauteur de ligne pour espacer les lignes du titre */
    margin: 0; /* Supprime les marges par défaut */
    color: #442d2d; /* Couleur du texte */
    font-size: 3em; /* Taille du texte */
    font-weight: bold; /* Texte en gras */
}

/* Bouton de la colonne */
.col-2 a {
    display: inline-block; /* Le bouton est affiché en ligne mais reste un bloc */
    text-decoration: none; /* Supprime le soulignement */
    padding: 20px 50px; /* Espacement interne augmenté */
    background: #0f5a2e; /* Couleur de fond principale */
    color: #141313; /* Couleur du texte */
    border-radius: 30px; /* Arrondit les bords du bouton */
    margin-top: 25px; /* Espace au-dessus du bouton */
    transition: background 0.5s ease; /* Transition fluide pour le hover */
    font-size: 24px; /* Taille plus grande pour le texte */
    font-weight: bold; /* Texte gras */
}

.col-2 a:hover {
    background: #367710; /* Couleur de fond au survol */
}

/* Paragraphe dans la colonne */
.col-2 p {
    color: rgb(80, 76, 72); /* Couleur du texte */
    font-size: 16px; /* Taille du texte */
    line-height: 1.8; /* Hauteur de ligne pour une meilleure lisibilité */
    padding: 20px; /* Espacement interne */
    background-color: rgba(233, 222, 222, 0.562); /* Fond semi-transparent */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet en relief */
}

/* Section d'en-tête */
.header-section {
    position: relative; /* Permet de positionner les éléments enfants en absolu */
    overflow: hidden; /* Empêche la vidéo de déborder */
    padding: 50px; /* Ajoute de l'espace autour du contenu */
    color: #fff; /* Texte blanc */
    height: 1500px; /* Hauteur fixe pour contenir la vidéo */
}

/* Vidéo de fond */
.background-video {
    position: absolute; /* Vidéo positionnée en absolu */
    top: 0; /* Alignement en haut */
    left: 0; /* Alignement à gauche */
    width: 100%; /* Vidéo couvre toute la largeur */
    height: 100%; /* Vidéo couvre toute la hauteur */
    object-fit: cover; /* La vidéo s'adapte à la section sans déformation */
    z-index: -1; /* Place la vidéo derrière le contenu */
}

-----------------------------------/*  style de la section categorie*/----------------------------

/* Styles de base */
.categories {
    margin: 70px 0;
}

.containerp h2 {
    text-align: center;
    font-size: 24px;
    color: #0f0f0f;
    margin: 60px; /* Ajoute un espace entre les éléments */
}

.containerp p {
    text-align: center;
    font-size: 16px;
    color: #3d3a3a;
    margin: 0 auto;
}

.col-3 {
    flex: 1;
    max-width: 24%; 
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    margin: 10px; /* Espacement autour de chaque colonne */
    text-align: center; /* Centre le texte à l'intérieur des colonnes */
    margin: 60px; /* Ajoute un espace entre les éléments */
}

.col-3 img {
    width: 70%; /* Ajuste l'image à la largeur de la colonne */
    height: 250px; /* Conserve les proportions de l'image */
    margin: 20px;
}

.col-3 p {
    font-size: 16px; /* Taille de la police */
    margin: 15px 0px 0; /* Espacement au-dessus du texte */
}

/* Media Queries pour rendre le design responsive */

/* Pour les tablettes */
@media (max-width: 768px) {
    .col-3 {
        max-width: 48%; /* Passe à 48% pour les tablettes */
        margin: 30px; /* Réduit la marge */
    }

    .col-3 img {
        width: 80%; /* Ajuste l'image pour les tablettes */
        height: auto; /* Maintient les proportions de l'image */
    }

    .containerp h2 {
        font-size: 20px; /* Réduit la taille de la police pour les tablettes */
        margin: 40px;
    }

    .containerp p {
        font-size: 14px; /* Réduit la taille de la police pour les tablettes */
    }
}

/* Pour les mobiles */
@media (max-width: 480px) {
    .col-3 {
        max-width: 100%; /* Passe à 100% pour les mobiles */
        margin: 15px; /* Réduit la marge pour les mobiles */
    }

    .col-3 img {
        width: 100%; /* Ajuste l'image à la largeur du conteneur */
        height: auto; /* Maintient les proportions de l'image */
    }

    .containerp h2 {
        font-size: 18px; /* Réduit encore la taille de la police pour les petits écrans */
        margin: 20px;
    }

    .containerp p {
        font-size: 14px; /* Réduit la taille de la police pour les petits écrans */
    }
}

/***/
/* Styles de base */
.why1 {
    background-color: #ffffff;             /* Fond blanc pour une touche de clarté et de modernité */
    padding: 40px 20px;                    /* Espacement autour du contenu */
    text-align: center;                    /* Centrage du texte */
    border-radius: 10px;                   /* Coins arrondis pour un look plus moderne */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre plus marquée pour ajouter de la profondeur */
    margin: 30px auto;                     /* Centrer la section dans la page */
    width: 80%;                            /* Largeur de la section */
    border-top: 5px solid #a77028;         /* Bordure verte pour ajouter de la personnalité */
}

.sooo {
    max-width: 900px;                      /* Limite la largeur du texte pour le rendre plus lisible */
    margin: 0 auto;                        /* Centre le contenu */
    padding: 20px;                         /* Espacement intérieur */
}

h1 {
    font-size: 2.5rem;                     /* Taille de police plus grande pour le titre */
    color: #c9841c;                        /* Couleur attrayante (rouge orangé) */
              /* Espacement sous le titre */
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
  } /* Titre légèrement plus audacieux */


 p {
    font-size: 1.5rem;
    color: #2d2e2d;
    text-transform: uppercase;
 
    margin-bottom: 20px;
  }                   /* Espacement au-dessus du texte */


a {
    color: #007BFF;                        /* Couleur bleue pour le lien */
    text-decoration: none;                  /* Supprimer le soulignement par défaut */
    font-weight: bold;                      /* Rendre le lien plus visible */
}

a:hover {
    text-decoration: underline;             /* Souligner au survol */
    color: #0056b3;                         /* Changer la couleur du lien au survol */
}

@media (max-width: 768px) {
    .why1 {
        width: 95%;                        /* Réduit la largeur pour les petits écrans */
        padding: 20px;                     /* Réduit l'espacement pour les petits écrans */
    }
}



.button-container {
    text-align: center; /* Centre le contenu horizontalement */
    margin-top: 30px; /* Espace au-dessus */
}

.btn1 {
    display: inline-block; /* Pour que le lien se comporte comme un bouton */
    background-color: #FF8000; /* Couleur de fond orange vif */
    color: white; /* Couleur du texte */
    padding: 12px 28px; /* Espacement intérieur plus généreux */
    text-decoration: none; /* Enlève le soulignement */
    border-radius: 8px; /* Coins légèrement arrondis */
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif; /* Police moderne */
    font-size: 16px; /* Taille de police plus lisible */
    font-weight: 600; /* Texte en gras pour une meilleure lisibilité */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Ombre pour un effet de profondeur */
    transition: transform 0.2s, box-shadow 0.2s; /* Transition pour les effets */
    cursor: pointer; /* Curseur en forme de main pour indiquer que c'est cliquable */
}

.btn1:hover {
    background-color: #E67300; /* Couleur de fond légèrement plus foncée au survol */
    transform: translateY(-3px); /* Soulève légèrement le bouton au survol */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
}

/* Media Queries pour rendre le design responsive */

/* Pour les tablettes */
@media (max-width: 768px) {


    .btn1 {
        padding: 10px 24px; /* Réduit la taille du bouton pour les tablettes */
        font-size: 14px; /* Réduit la taille de la police du bouton */
    }
}

/* Pour les mobiles */
@media (max-width: 480px) {
    #so {
        padding: 10px; /* Réduit encore le padding pour les mobiles */
    }



    .btn1 {
        padding: 8px 20px; /* Réduit la taille du bouton pour les petits écrans */
        font-size: 12px; /* Réduit la taille de la police du bouton */
    }
}
/***/
/* Styles de base */
#whyy {
    min-height: 600px;
    width: 100%; /* Assure que la section prend toute la largeur */
  /* background-image: url('/image/ayous.jpg'); /* Remplacez par le chemin de votre image */
    padding: 10px 20px;
    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 */
}

figure {
    margin: 0;
}

.whyy h2 {
    font-size: 30px;
}
   /***********  woods of the world *******/
   /* Section principale */
.expertise-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #ebe7e4; /* Couleur de fond */
  }
  
  /* Conteneur carré */
  .expertise-container {
    display: flex;
    flex-direction: row;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    max-width: 1200px;
    width: 100%;
  }

  /* Image */
  .image-section {
    flex: 1;
    position: relative;
  }
  
  .image-section img {
    width: 100%;
    height: 100%;
   object-fit: cover;
   align-items: center;
  }
  
  /* Contenu */
  .content-section {
    flex: 1;
    padding: 20px;
    background-color: white;
  }
  
  .small-title {
    font-size: 1.2rem;
    color: #2d2e2d;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .main-title {
    font-size: 2rem;
    color: #1d1d1b;
    margin-bottom: 20px;
  }
  
  .description {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  /* Boutons */
  .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .custom-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #d9ff00;
    color: black;
    text-decoration: none;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .custom-button:hover {
    background-color: #c4e600;
    transform: scale(1.02);
  }
  
  .button-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: black;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.2rem;
  }
  
  .button-text {
    text-transform: uppercase;
  }
  
/* Responsive Design */
@media (max-width: 992px) {
    .expertise-container {
        flex-direction: column; /* Image en haut, texte en bas */
    }

    .image-section{
        flex: none;
        height: 300px; /* Ajustement de la hauteur */
    }

    .image-section img {
        height: 100%;
    }

    .content-section {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .main-title {
        font-size: 1.5rem;
    }

    .custom-button{
        font-size: 0.9rem;
        padding: 10px 15px;
    }
}

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

/*************************** wymex */

/* Section principale */
.expertise-section1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #f8f8f8; /* Couleur de fond */
}

/* Conteneur principal */
.expertise-container1 {
    display: flex;
    flex-direction: row-reverse; /* Image à droite, texte à gauche */
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    max-width: 1200px;
    width: 100%;
}

/* Section image */
.image-section1 {
    flex: 1;
    position: relative;
}

.image-section1 img {
    width: 100%;
    height: 100%;
   object-fit: cover;
   align-items: center;
}



/* Responsive Design */
@media (max-width: 992px) {
    .expertise-container1 {
        flex-direction: column; /* Image en haut, texte en bas */
    }

    .image-section1 {
        flex: none;
        height: 300px; /* Ajustement de la hauteur */
    }

    .image-section1 img {
        height: 100%;
    }

    .content-section1 {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .main-title1 {
        font-size: 1.5rem;
    }

    .custom-button1 {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
}

 
/**************/
#woods h1 {
    font-size: 40px;
    color: #3d3a3a;
    text-align: center;
    min-height: 100px;
    padding: 20px 40px;
}

.logowoods img {
    width: 90px; /* Ajuste cette valeur pour la largeur */
    height: auto; /* Conserve les proportions de l'image */
}

.butwoods {
    display: flex;
    flex-direction: column; /* Organiser les boutons en colonne */
    align-items: center; /* Centrer horizontalement */
    gap: 10px; /* Espacement vertical entre les boutons */
}

.btn-presentable {
    background-color: #eb8603; /* Couleur verte */
    color: rgb(17, 10, 10); /* Texte blanc */
    text-decoration: none; /* Retirer le soulignement */
    border: none; /* Retirer les bordures */
    padding: 20px 30px; /* Espacement interne */
    font-size: 20px; /* Taille du texte */
    border-radius: 15px; /* Coins arrondis */
    display: inline-block; /* Pour que le lien ressemble à un bouton */
    cursor: pointer; /* Changer le curseur */
    transition: background-color 0.3s ease; /* Effet de survol */
}

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

.produitswhy {
    text-align: center;
    margin-bottom: 50px;
    padding: 20px;
}

.produitswhy h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #0b5804;
    font-size: 24px;
}

.whyy {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image-why {
    flex: 1;
    margin-right: 20px;
}

.image-why img {
    width: 600px; /* Taille de l'image */
    height: auto;
}

.text-container3 p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0; /* Enlève la marge par défaut du paragraphe */
}

.produitswhy h1 {
    font-size: 32px;
    line-height: 1.6;
}

.flex-container3 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.image-container3 {
    flex: 1;
    margin-left: 5px; /* Réduire l'espace entre l'image et le texte */
}

.image-container3 img {
    width: 1000px; /* Taille de l'image */
    height: 800px;
    padding: 10px; /* Espace entre l'image et le cadre */
}

.text-container3 {
    flex: 2;
    text-align: left; /* Alignement à gauche pour le texte */
    padding: 50px; /* Réduire l'espace autour du texte */
    border-radius: 5px; /* Coins arrondis si souhaité */
}

.text-container3 p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0; /* Enlève la marge par défaut du paragraphe */
}

.text-container3 h1 {
    font-size: 32px;
    line-height: 1.6;
}

/* Media Queries pour rendre le design responsive */

/* Pour les tablettes */
@media (max-width: 768px) {
    #whyy {
        /*padding: 15px; /* Réduit le padding pour les tablettes */

        min-height: 500px; /* Réduit la hauteur pour les tablettes */
        padding: 10px 15px; /* Ajuste les espacements pour les tablettes */
    }

    .whyy h2 {
        font-size: 24px; /* Réduit la taille du titre */
    }

    .butwoods {
        flex-direction: row; /* Affiche les boutons en ligne sur tablette */
    }

    .btn-presentable {
        padding: 15px 20px; /* Réduit la taille du bouton */
        font-size: 16px; /* Réduit la taille du texte du bouton */
    }

    .produitswhy h2 {
        font-size: 20px; /* Réduit la taille de la police du titre des produits */
    }

    .whyy {
        flex-direction: column; /* Affiche les éléments en colonne pour les tablettes */
        align-items: flex-start; /* Aligne les éléments à gauche */
    }

    .image-why img {
        width: 100%; /* L'image prend toute la largeur de l'écran */
    }

    .text-container3 {
        padding: 30px; /* Réduit le padding pour mieux s'adapter aux écrans plus petits */
    }

    .flex-container3 {
        flex-direction: column; /* Affiche les éléments en colonne pour les tablettes */
        padding: 10px; /* Réduit le padding */
    }

    .image-container3 img {
        width: 100%; /* L'image prend toute la largeur */
        height: auto; /* Maintient les proportions */
    }

    .text-container3 h1 {
        font-size: 24px; /* Réduit la taille du titre dans le texte */
    }
}

/* Pour les mobiles */
@media (max-width: 480px) {
    #whyy {
       /* padding: 10px; /* Réduit encore le padding pour les petits écrans */
       min-height: 400px; /* Réduit encore plus la hauteur pour les téléphones */
       padding: 5px 10px; /* Réduit l'espacement pour les petits écrans */
    }

    .whyy h2 {
        font-size: 20px; /* Réduit encore la taille du titre */
    }

    .butwoods {
        flex-direction: column; /* Affiche les boutons en colonne sur mobile */
        gap: 5px; /* Réduit l'espace entre les boutons */
    }

    .btn-presentable {
        padding: 10px 15px; /* Réduit encore la taille du bouton */
        font-size: 14px; /* Réduit la taille du texte */
    }

    .produitswhy h2 {
        font-size: 18px; /* Réduit la taille de la police des produits */
    }

    .whyy {
        flex-direction: column; /* Affiche les éléments en colonne */
        align-items: center; /* Centre les éléments */
    }

    .image-why img {
        width: 100%; /* L'image prend toute la largeur de l'écran */
    }

    .text-container3 {
        padding: 20px; /* Réduit encore le padding */
    }

    .flex-container3 {
        flex-direction: column; /* Affiche les éléments en colonne */
        padding: 5px; /* Réduit le padding */
    }

    .image-container3 img {
        width: 90%; /* L'image prend toute la largeur */
        height: auto; /* Maintient les proportions */
    }

    .text-container3 h1 {
        font-size: 20px; /* Réduit la taille du titre pour les mobiles */
    }
}

 /**section pour quoi choisir woods ***/
/* Conteneur de l'image */
.containerw {
    max-width:100%; /* Limite la largeur maximale du conteneur */
    margin: auto; /* Centrer le conteneur */
}

.containerw h2 {
    text-align: center;
    font-size: 30px;
    color: #0f0f0f;
    margin: 60px; /* Espacement entre les éléments */
}

.containerw p {
    font-size: 16px;
    color: #0f0e0e;
    text-align: center;
    padding: 20px 40px;
}

.col-6 {
    min-width: 400px; /* Largeur minimale pour chaque colonne */
    max-width: 1000px; /* Largeur maximale pour chaque colonne */
    margin: 0;
}

.lo h1 {
    text-align: center;
    font-size: 30px;
    color: #644426;
    margin: 60px; /* Espacement autour du titre */
}

.overlay {
    display: none; /* Masquer l'overlay par défaut */
    position: absolute; /* Positionner l'overlay par rapport à son parent */
    top: 0; /* Commence en haut */
    left: 0; /* Commence à gauche */
    right: 0; /* S'étend jusqu'à la droite */
    bottom: 0; /* S'étend jusqu'en bas */
    background-color: rgba(0, 0, 0, 0.5); /* Arrière-plan semi-transparent */
    color: white; /* Texte en blanc */
    padding: 20px; /* Espacement interne */
    z-index: 2; /* Placer l'overlay au-dessus de l'image */
    opacity: 0; /* Rendre l'overlay invisible */
    transition: opacity 0.3s ease; /* Transition douce pour l'opacité */
    text-align: center; /* Centrer le contenu horizontalement */
    display: flex; /* Utiliser le modèle flex */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
}

.image-container {
    position: relative; /* Nécessaire pour le bon positionnement de l'overlay */
}

.image-container:hover .overlay {
    display: flex; /* Afficher l'overlay lors du survol */
    opacity: 1; /* Rendre l'overlay visible */
}

.col-img {
    position: relative;
    width: 100%;
}

.col-img img {
    width: 100%;
    height: auto;
    cursor: pointer; /* Change le curseur en pointeur pour indiquer un élément cliquable */
}

.overlay-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Ombre pour améliorer la lisibilité du texte */
}

.hidden-text {
    display: none;
    font-size: 18px;
    margin-top: 20px;
    color: #333;
    line-height: 1.5;
}

.col-img img:active + .hidden-text {
    display: block; /* Afficher le texte lors du clic sur l'image */
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .containerw h2 {
        font-size: 28px;
    }

    .containerw p {
        font-size: 14px;
    }

    .lo h1 {
        font-size: 36px;
    }

    .col-6 {
        min-width: 350px; /* Largeur minimale ajustée pour écrans moyens */
    }

    .col-img img {
        width: 100%;
        height: auto;
    }

    .overlay-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .containerw h2 {
        font-size: 24px;
    }

    .containerw p {
        font-size: 14px;
    }

    .lo h1 {
        font-size: 30px;
    }

    .col-6 {
        min-width: 100%; /* Colonne pleine largeur pour les petits écrans */
    }

    .overlay-title {
        font-size: 1.2rem;
    }

    .col-img img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .containerw h2 {
        font-size: 20px;
    }

    .containerw p {
        font-size: 12px;
        padding: 10px 20px;
    }

    .lo h1 {
        font-size: 28px;
    }

    .overlay-title {
        font-size: 1rem;
    }

    .col-6 {
        min-width: 100%; /* Largeur pleine pour les très petits écrans */
    }

    .col-img img {
        width: 100%;
        height: auto;
    }
}

/**section wymex*/
#WYMEX {
    min-height: auto;
    width: 100%; /* Assure que le header prend toute la largeur */
    background-image: url('image/pagedegrade.png');
    padding: 10px 20px;
    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 */
}

/* Ajustement du logo */
.logowymex img {
    width: 150px; /* Ajuste cette valeur pour la largeur */
    height: auto; /* Conserve les proportions de l'image */
}

#yards h2 {
    font-size: 40px;
    color: #3d3a3a;
    text-align: center;
    min-height: 100px;
    padding: 20px 40px;
}

.yardsss {
    max-width: 1800px; /* Limite la largeur maximale du conteneur */
    margin: auto; /* Centre le conteneur */
}

.yardsss h2 {
    font-size: 30px;
    color: #201919;
    text-align: center;
    padding: 20px 40px;
}

.lowy h1 {
    text-align: center;
    font-size: 30px;
    margin: 60px; /* Ajoute un espace entre les éléments */
}

/* Styles spécifiques pour les écrans de téléphone */
@media (max-width: 1200px) {
    #WYMEX {
        padding: 15px 25px; /* Ajuste les marges du header pour les grands écrans */
    }

    .logowymex img {
        width: 130px; /* Réduit la taille du logo sur des écrans plus grands */
    }

    #yards h2 {
        font-size: 36px; /* Taille du titre réduite pour les grands écrans */
    }

    .yardsss h2 {
        font-size: 26px; /* Ajuste la taille du texte */
    }

    .lowy h1 {
        font-size: 36px; /* Ajuste la taille du titre */
    }
}

@media (max-width: 768px) {
    #WYMEX {
        padding: 15px 20px; /* Réduction du padding sur les petits écrans */
    }

    .logowymex img {
        width: 100px; /* Réduit la taille du logo sur les petits écrans */
    }

    #yards h2 {
        font-size: 28px; /* Taille du titre réduite pour les petits écrans */
        padding: 10px 20px; /* Ajuste le padding pour mieux s'adapter */
    }

    .yardsss h2 {
        font-size: 24px; /* Réduit la taille du titre */
    }

    .lowy h1 {
        font-size: 28px; /* Réduit la taille du titre pour les petits écrans */
        margin: 30px 0; /* Réduit l'espacement */
    }

    .overlay p {
        font-size: 1.5rem; /* Réduit la taille de la police */
        padding: 10px 20px; /* Ajuste le padding */
    }
}

@media (max-width: 480px) {
    #WYMEX {
        padding: 10px 15px; /* Réduit davantage le padding */
    }

    .logowymex img {
        width: 80px; /* Réduit encore plus la taille du logo */
    }

    #yards h2 {
        font-size: 24px; /* Taille du titre encore réduite */
        padding: 10px 15px; /* Ajuste encore plus le padding */
    }

    .yardsss h2 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .lowy h1 {
        font-size: 24px; /* Taille du titre réduite pour les très petits écrans */
        margin: 20px 0; /* Réduit encore l'espacement */
    }

    .overlay p {
        font-size: 1.2rem; /* Réduit la taille de la police pour les petits écrans */
        padding: 8px 15px; /* Réduit le padding */
    }
}


 /***section du essance */
 #centered-section {
    padding: 10px 20px;
}

.centered-section {
    text-align: center;
}

.arbr img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Taille de l'image */
    height: 700px;
    padding: 20px;
}

.centered-section h1 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 40px;
    line-height: 1.6;
}

.centered-section p {
    text-align: center;
    font-size: 40px;
}

.centered-section .btn {
    display: inline-block;
    margin-top: 50px;
    padding: 10px 80px;
    background-color: #4CAF50; /* Couleur de fond du bouton */
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 25px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.centered-section .btn:hover {
    background-color: #073009; /* Couleur de fond du bouton au survol */
}

/* Conteneur principal */
.container20 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Espacement uniforme entre les éléments */
    gap: 20px; /* Espacement entre les éléments */
    padding: 40px 0; /* Espacement en haut et en bas */
}

/* Chaque groupe d'image et de texte */
.grpimg {
    flex: 1 1 30%; /* Largeur de 30% pour chaque élément */
    box-sizing: border-box;
    text-align: center; /* Centrer le texte */
    padding: 20px; /* Espacement interne */
    background-color: #f9f9f9; /* Couleur de fond légère */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Style des images */
.grpimg img {
    width: 100px; /* Taille fixe pour uniformiser les images */
    height: 100px; /* Taille fixe pour uniformiser les images */
    object-fit: cover; /* Recadrer l'image sans déformation */
    margin-bottom: 15px; /* Espacement sous l'image */
}

/* Style des titres */
.grpimg h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333; /* Couleur du texte */
}

/* Style des paragraphes */
.grpimg p {
    font-size: 16px;
    line-height: 1.5;
    color: #666; /* Couleur du texte */
    margin: 0;
}

/* Responsive pour les tablettes */
@media (max-width: 768px) {
    .arbr img {
        width: 100%; /* L'image prend toute la largeur sur les tablettes */
        height: auto; /* Ajuste la hauteur automatiquement pour maintenir les proportions */
    }

    .centered-section h1 {
        font-size: 32px; /* Taille de la police réduite pour les écrans plus petits */
        margin-bottom: 30px; /* Espacement réduit pour les petits écrans */
    }

    .centered-section p {
        font-size: 30px; /* Taille de la police réduite pour les petits écrans */
    }

    .centered-section .btn {
        font-size: 22px; /* Réduit la taille du texte du bouton */
        padding: 8px 60px; /* Réduit l'espacement du bouton */
    }

    .container20 {
        padding: 20px 0; /* Réduit l'espacement pour les petits écrans */
    }

    .grpimg {
        flex: 1 1 48%; /* Deux colonnes pour les écrans plus petits */
    }
}

/* Responsive pour les mobiles */
@media (max-width: 480px) {
    .arbr img {
        width: 100%; /* L'image prend toute la largeur sur les petits écrans */
        height: auto; /* Ajuste la hauteur automatiquement pour maintenir les proportions */
    }

    .centered-section h1 {
        font-size: 28px; /* Taille de la police réduite pour les très petits écrans */
        margin-bottom: 20px; /* Réduction de l'espacement */
    }

    .centered-section p {
        font-size: 24px; /* Taille de la police réduite pour les très petits écrans */
    }

    .centered-section .btn {
        font-size: 20px; /* Réduit la taille du texte du bouton */
        padding: 8px 40px; /* Réduit l'espacement du bouton */
    }

    .container20 {
        padding: 10px 0; /* Réduit l'espacement en haut et en bas pour les petits écrans */
    }

    .grpimg {
        flex: 1 1 100%; /* Une seule colonne pour les écrans très petits */
        padding: 10px; /* Réduit l'espacement interne */
    }

    .grpimg img {
        width: 80px; /* Réduit la taille des images */
        height: 80px; /* Réduit la taille des images */
    }

    .grpimg h3 {
        font-size: 16px; /* Réduit la taille des titres */
    }

    .grpimg p {
        font-size: 14px; /* Réduit la taille des paragraphes */
    }
}

/* section projet **/

#projet {
    min-height: 600px;
    width: 100%; /* Assure que le header prend toute la largeur */
    padding: 10px 20px;
    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 */
    background-color: #fffffc;
    text-align: center; /* Centre le texte et le contenu */
}

#projet h2 {
    font-size: 30px;
    color: #000000bd;
    padding: 10px;
}

.PRO {
    display: flex;
    align-items: center; /* Aligne verticalement au centre */
    padding-left: 8%;
    padding-right: 10%;
    
    /* Styles d'écriture */
    font-family: 'Arial', sans-serif; /* Police simple et professionnelle */
    font-size: 1.2rem; /* Taille du texte lisible et moderne */
    font-weight: 400; /* Épaisseur standard */
    line-height: 1.6; /* Espacement entre les lignes pour améliorer la lisibilité */
    color: #333; /* Couleur du texte (gris foncé pour un bon contraste) */
    text-align: justify; /* Justifie le texte pour un rendu propre */
}


/* Style pour le bouton */
.btn7 {
    font-family: var(--alori-font);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-appearance: none;
    border: none;
    outline: none !important;
    background-color: #94441f;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 16px 45px 15px;
    border-radius: 40px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    letter-spacing: 0.025em;
    overflow: hidden;
    z-index: 1;
    margin-left: 200px; /* Ajoute un espace de 12 pixels entre le titre et le bouton */
    text-decoration: none; /* Supprime la décoration de lien */



     /* Styles d'écriture */
     font-family: 'Arial', sans-serif; /* Police simple et professionnelle */
    /* Taille du texte lisible et moderne */
     font-weight: 400; /* Épaisseur standard */
     line-height: 1.6; /* Espacement entre les lignes pour améliorer la lisibilité */

     text-align: justify; /* Justifie le texte pour un rendu propre */
}

/* Effet de survol */
.btn7:hover {
    background-color: #ec4c02; /* Changement de couleur au survol */
    transform: translateY(-2px); /* Déplacer légèrement vers le haut */
}

/* Container pour l'image */
.image-container30 {
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement si nécessaire */
    margin-top: 20px;
}

.image-container30 img {
    width: 40%; /* Ajuste la taille de l'image à 40% de la largeur de son conteneur */
    max-width: 400px; /* Limite la taille maximale de l'image */
    height: auto; /* Maintient les proportions de l'image */
    transition: transform 0.3s ease; /* Ajoute une animation pour l'effet de survol */
}

.image-container30 img:hover {
    transform: scale(1.1); /* Agrandit l'image de 10% au survol */
}

/* Responsive pour les tablettes */
@media (max-width: 768px) {
    #projet {
        padding: 20px 10px; /* Réduit l'espacement des bords pour les petits écrans */
    }

    #projet h2 {
        font-size: 24px; /* Réduit la taille du titre pour les tablettes */
    }

    .PRO {
        flex-direction: column; /* Change l'alignement des éléments en colonne pour les petits écrans */
        padding-left: 5%; /* Réduit l'espacement */
        padding-right: 5%; /* Réduit l'espacement */
    }

    .btn7 {
        margin-left: 0; /* Supprime l'espace à gauche pour que le bouton soit centré */
        font-size: 16px; /* Réduit la taille du texte du bouton */
        padding: 12px 30px; /* Réduit les espacements internes du bouton */
    }

    .image-container30 img {
        width: 70%; /* Réduit la taille de l'image sur les écrans plus petits */
    }
}

/* Responsive pour les mobiles */
@media (max-width: 480px) {
    #projet {
        padding: 15px 5px; /* Réduit l'espacement sur les très petits écrans */
    }

    #projet h2 {
        font-size: 20px; /* Taille du texte réduite pour les petits écrans */
    }

    .PRO {
        flex-direction: column; /* Passe la disposition en colonne */
        padding-left: 10%; /* Réduit l'espacement à gauche */
        padding-right: 10%; /* Réduit l'espacement à droite */
    }

    .btn7 {
        font-size: 14px; /* Taille du texte réduite pour les petits écrans */
        padding: 10px 20px; /* Réduit les espacements internes du bouton */
    }

    .image-container30 img {
        width: 90%; /* L'image prend presque toute la largeur de l'écran */
    }
}

/**************************************chat**************new***/
.phone-input, .submit-phone-btn {
    margin-top: 10px;
    padding: 10px;
    font-size: 16px;
    width: calc(100% - 20px);
  }
  
  .submit-phone-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  .submit-phone-btn:hover {
    background-color: #45a049;
  }
  
/* Bouton flottant de chat */
/* Bouton du chat en forme rectangulaire */
.chat-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
   /* 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: #3447f1;
    color: white;
    padding: 18px 30px; /* Espacement pour un bouton plus large */
    border-radius: 8px; /* Bordure arrondie mais plus subtile */
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.chat-button:hover {
    background-color: #8B5E3C; /* Teinte plus foncée pour l'interactivité */
    transform: scale(1.1);
}

/* Boîte de messagerie rectangulaire */
.chat-box {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 400px; /* Largeur ajustée pour un look plus rectangulaire */
    max-width: 90%;
    background-color: #fff;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transform: translateX(110%);
    transition: transform 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    z-index: 1000;
}

.chat-box.active {
    transform: translateX(0);
}

.chat-header {

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

    color: rgb(65, 55, 30);
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    border-radius: 10px 10px 0 0; /* Coins arrondis uniquement en haut */

    font-size: 12px;
    
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
}

.messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #080703; /* Teinte beige clair pour le fond */
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.6;
}

.message {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 8px;
    max-width: 100%;
    font-size: 18px;
}

/* Messages reçus et envoyés */
.message.received {
    background-color: #c7c1c1; /* Gris clair pour les messages entrants */
    align-self: flex-start;
    font-size: 16px;
}

.message.sent {
    background-color: #8E7D3E; /* Vert olive plus foncé pour les messages envoyés */
    color: white;
    align-self: flex-end;
    font-size: 16px;
}

/* Boutons de réponse */
.response-buttons button {
    margin: 8px 5px;
    padding: 12px 20px;
    background-color: linear-gradient(45deg, rgb(241, 241, 241), rgb(146, 109, 59), rgba(3, 46, 3, 0.85)); /* Dégradé du vert vers le blanc */ /* Teinte bois */
    color: rgb(6, 48, 18);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Lora', serif;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 16px;
}

.response-buttons button:hover {
    background-color: #8B5E3C; /* Teinte foncée au survol */
    transform: scale(1.05);
}

.response-buttons button:active {
    background-color: #6A4E2F; /* Teinte plus foncée au clic */
}

/* Boutons produits */
#product-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
}

button {
    padding: 12px 25px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #E0D1B4; /* Bois clair */
    border: 2px solid #5A3921;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin: 10px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

/* Animation boutons */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

button:nth-child(1) {
    animation-delay: 0.1s;
}

button:nth-child(2) {
    animation-delay: 0.2s;
}

button:nth-child(3) {
    animation-delay: 0.3s;
}

button:hover {
    background-color: #B59A6D; /* Bois plus riche */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

button:active {
    background-color: #9A7C52;
}

/* Boutons sous-produits */
.sub-product-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.sub-product-button {
    padding: 10px 18px;
    background-color: #3E3A36; /* Gris-brun neutre */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.sub-product-button:hover {
    background-color: #8A7F74; /* Gris plus doux */
}

/* Formulaire d'email */
.email-input {
    margin-top: 12px;
    padding: 12px;
    width: calc(100% - 24px);
    border: 1px solid #DDD;
    border-radius: 6px;
    font-family: 'Lora', serif;
}

.submit-email-btn {
    padding: 12px 20px;
    background-color: #4C6B38; /* Vert olive bois */
    color: white;
    border: none;
    border-radius: 8px;
    margin-top: 15px;
    cursor: pointer;
    font-family: 'Lora', serif;
}

.submit-email-btn:hover {
    background-color: #3F572E;
}


/* Media Queries pour rendre le site responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    /* Ajuster les tailles des éléments de formulaire */
    .phone-input, .submit-phone-btn, .email-input, .submit-email-btn {
        font-size: 14px;
        width: calc(100% - 18px); /* Réduire l'espacement pour mieux s'adapter */
    }

    /* Bouton flottant de chat */
    .chat-button {
        font-size: 16px;
        padding: 12px 20px;
        bottom: 20px;
        right: 20px;
    }

    /* Boîte de messagerie */
    .chat-box {
        width: 100%;
        bottom: 0;
        right: 0;
    }

    /* Réduire la taille du texte dans la boîte de messages */
    .messages {
        font-size: 14px;
    }

    /* Réduire la taille des messages */
    .message {
        font-size: 14px;
    }

    /* Boutons de réponse */
    .response-buttons button {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* Réduire les tailles des boutons produits */
    #product-buttons-container button {
        font-size: 16px;
        padding: 10px 20px;
    }

    /* Boutons sous-produits */
    .sub-product-button {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* Ajuster les éléments de formulaire pour les tablettes */
    .phone-input, .submit-phone-btn, .email-input, .submit-email-btn {
        font-size: 15px;
        width: calc(100% - 20px);
    }

    /* Ajuster les tailles du bouton flottant de chat */
    .chat-button {
        font-size: 17px;
        padding: 15px 25px;
        bottom: 25px;
        right: 25px;
    }

    /* Boîte de messagerie sur tablette */
    .chat-box {
        width: 90%;
        bottom: 30px;
        right: 30px;
    }

    /* Ajuster la taille des messages */
    .messages {
        font-size: 15px;
    }

    .message {
        font-size: 15px;
    }

    /* Ajuster les boutons de réponse */
    .response-buttons button {
        font-size: 15px;
        padding: 10px 18px;
    }

    /* Ajuster les tailles des boutons produits */
    #product-buttons-container button {
        font-size: 17px;
        padding: 11px 22px;
    }

    /* Ajuster les boutons sous-produits */
    .sub-product-button {
        font-size: 15px;
        padding: 9px 17px;
    }
}

/* Grand écran (ordinateur de bureau) */
@media screen and (min-width: 1025px) {
    /* Aucun changement nécessaire, ce sont les styles par défaut */
}


/**************************tableau ACTUALITÉS********************************/
#header1 {
    background-color: #f3ebd3;
    color: #fff;
    padding: 40px 20px;
}

.tables-container h2 {
    text-align: center;
    font-size: 3rem;
    color: #0a0909;
    margin-top: 30px;
    margin: 60px; /* Ajoute un espace entre les éléments */
}

.col-5 {
    text-align: center; /* Centre tout le contenu textuel à l'intérieur du conteneur */
    width: 100%; /* Assurez-vous que le conteneur a une largeur définie */
    flex-basis: 25%;
    min-width: 200px;
    padding: 15px;
    transition: transform 0.5s;
}

.col-5 a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 30px;
    background: #244c50;
    color: #fff;
    border-radius: 30px;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    transition: background 0.5s;
}

.col-5 a:hover {
    background: #106e77;
}

.tables-container {
    padding: 0px 50px; /* Réduit le padding */
}

.col-5 img {
    width: 100%; /* Ajuste l'image à la largeur de la colonne */
    height: 250px; /* Conserve les proportions de l'image */
}

/* Media Queries pour rendre le tableau responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    .tables-container {
        padding: 0 10px; /* Réduire le padding pour s'adapter à l'écran mobile */
    }

    .tables-container h2 {
        font-size: 2rem; /* Réduire la taille du titre */
        margin: 30px 0; /* Ajuster les marges */
    }

    .col-5 {
        flex-basis: 100%; /* Afficher chaque colonne en pleine largeur */
        padding: 10px;
    }

    .col-5 img {
        height: auto; /* Laisser l'image s'ajuster en hauteur */
    }

    .col-5 a {
        font-size: 14px; /* Réduire la taille du texte sur les boutons */
        padding: 8px 20px;
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .tables-container {
        padding: 0 30px; /* Ajuster le padding pour les tablettes */
    }

    .tables-container h2 {
        font-size: 2.5rem; /* Ajuster la taille du titre */
        margin: 40px 0;
    }

    .col-5 {
        flex-basis: 45%; /* Chaque colonne occupe 45% de la largeur */
        padding: 15px;
    }

    .col-5 img {
        height: 220px; /* Ajuster la taille de l'image pour les tablettes */
    }

    .col-5 a {
        font-size: 15px; /* Ajuster la taille du texte sur les boutons */
        padding: 10px 25px;
    }
}

/* Écrans larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    .col-5 {
        flex-basis: 23%; /* Chaque colonne occupe 23% de la largeur pour un design à 4 colonnes */
        padding: 15px;
    }

    .col-5 img {
        height: 250px; /* Maintenir la hauteur pour les grands écrans */
    }
}



/*** *********************************IMAGE EN ARRIRE PLAN 

}*/
#demande-devis {
    background-color: #a9c083;
    color: #fff;
    padding: 40px 20px;
}

#demande-devis .content50 {
    background-color: rgba(212, 202, 202, 0.6); /* Ajoute un fond semi-transparent pour rendre le texte lisible */
    padding: 20px; /* Ajoute de l'espace autour du contenu */
    border-radius: 10px; /* Arrondit les coins du conteneur de contenu */
    max-width: 800px; /* Définit une largeur maximale pour le conteneur */
    margin: 0 auto; /* Centre le conteneur */
}

#demande-devis h2 {
    margin: 0 0 15px 0; /* Espacement sous le titre */
    font-size: 28px; /* Taille du titre */
    color: #1d1313;
}

#demande-devis p {
    margin: 0 0 20px 0; /* Espacement sous le paragraphe */
    font-size: 18px; /* Taille du texte du paragraphe */
    color: #0c0c0c;
}

#demande-devis .btn {
    display: inline-block; /* Transforme le lien en bouton */
    padding: 10px 30px; /* Espacement intérieur du bouton */
    background: #125c0f; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte du bouton */
    border-radius: 30px; /* Coins arrondis */
    text-decoration: none; /* Supprime la sous-ligne du lien */
    transition: background 0.5s; /* Animation de changement de couleur */
}

#demande-devis .btn:hover {
    background: #6d7c7e; /* Changement de couleur au survol */
}

/* Media Queries pour rendre la section responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    #demande-devis {
        padding: 20px 10px; /* Réduire le padding pour les petits écrans */
    }

    #demande-devis .content50 {
        padding: 15px; /* Réduire le padding du contenu */
        max-width: 90%; /* Ajuster la largeur maximale pour les petits écrans */
    }

    #demande-devis h2 {
        font-size: 24px; /* Réduire la taille du titre */
    }

    #demande-devis p {
        font-size: 16px; /* Réduire la taille du texte du paragraphe */
    }

    #demande-devis .btn {
        padding: 8px 20px; /* Réduire la taille du bouton */
        font-size: 14px; /* Réduire la taille du texte du bouton */
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    #demande-devis {
        padding: 30px 15px; /* Ajuster le padding pour les tablettes */
    }

    #demande-devis .content50 {
        padding: 18px; /* Ajuster le padding du contenu */
        max-width: 80%; /* Ajuster la largeur maximale pour les tablettes */
    }

    #demande-devis h2 {
        font-size: 26px; /* Ajuster la taille du titre */
    }

    #demande-devis p {
        font-size: 17px; /* Ajuster la taille du texte du paragraphe */
    }

    #demande-devis .btn {
        padding: 9px 25px; /* Ajuster le bouton */
        font-size: 15px; /* Ajuster la taille du texte du bouton */
    }
}

/* Écrans larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    #demande-devis {
        padding: 40px 20px; /* Garder le padding initial pour les grands écrans */
    }

    #demande-devis .content50 {
        padding: 20px; /* Garder le padding initial du contenu */
        max-width: 800px; /* Garder la largeur maximale initiale */
    }

    #demande-devis h2 {
        font-size: 28px; /* Garder la taille du titre */
    }

    #demande-devis p {
        font-size: 18px; /* Garder la taille du texte du paragraphe */
    }

    #demande-devis .btn {
        padding: 10px 30px; /* Garder la taille du bouton */
        font-size: 16px; /* Garder la taille du texte du bouton */
    }
}



/*******************************livraison rapide**********************/
.fast-delivery-banner {
    background-color: #E8F5E9;
    padding: 30px;
    text-align: center;
    border-bottom: 3px solid #66BB6A;
    animation: fadeIn 1.5s ease-in-out;
}

.delivery-content {
    max-width: 800px;
    margin: auto;
}

.icon-delivery {
    font-size: 24px;
    color: #388E3C;
    margin-bottom: 10px;
    animation: bounce 2s infinite;
}

.fast-delivery-banner h3 {
    font-size: 26px;
    color: #2E7D32;
    margin: 10px 0;
}

.fast-delivery-banner p {
    font-size: 18px;
    color: #666;
}

.order-now-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.order-now-btn:hover {
    background-color: #388E3C;
}

/* Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Media Queries pour rendre la section responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    .fast-delivery-banner {
        padding: 20px 10px; /* Réduit le padding pour les petits écrans */
    }

    .icon-delivery {
        font-size: 20px; /* Réduit la taille de l'icône */
    }

    .fast-delivery-banner h3 {
        font-size: 22px; /* Réduit la taille du titre */
    }

    .fast-delivery-banner p {
        font-size: 16px; /* Réduit la taille du texte */
    }

    .order-now-btn {
        padding: 10px 15px; /* Réduit le padding du bouton */
        font-size: 14px; /* Réduit la taille du texte du bouton */
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .fast-delivery-banner {
        padding: 25px 15px; /* Ajuste le padding pour les tablettes */
    }

    .icon-delivery {
        font-size: 22px; /* Ajuste la taille de l'icône */
    }

    .fast-delivery-banner h3 {
        font-size: 24px; /* Ajuste la taille du titre */
    }

    .fast-delivery-banner p {
        font-size: 17px; /* Ajuste la taille du texte */
    }

    .order-now-btn {
        padding: 11px 18px; /* Ajuste le padding du bouton */
        font-size: 15px; /* Ajuste la taille du texte du bouton */
    }
}

/* Écrans larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    .fast-delivery-banner {
        padding: 30px; /* Garder le padding initial */
    }

    .icon-delivery {
        font-size: 24px; /* Garder la taille de l'icône */
    }

    .fast-delivery-banner h3 {
        font-size: 26px; /* Garder la taille du titre */
    }

    .fast-delivery-banner p {
        font-size: 18px; /* Garder la taille du texte */
    }

    .order-now-btn {
        padding: 12px 20px; /* Garder le padding du bouton */
        font-size: 16px; /* Garder la taille du texte du bouton */
    }
}

  
 /*** *********************************Contact********************/

 #contact {
  height: 600px;
    width: 100%; /* Assure que le header prend toute la largeur */
    background-image: url('image/woods.jpeg'); /* Remplacez par le chemin de votre image */
    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: left; /* Centre l'image pour un meilleur alignement */
}


/* Pour les tablettes (768px à 1024px) */
@media (max-width: 1024px) {
    #contact {
        height: 450px; /* Réduit la hauteur pour s'adapter aux tablettes */
        background-position: center;
    }
}

/* Pour les mobiles (moins de 768px) */
@media (max-width: 768px) {
    #contact {
        height: 300px; /* Hauteur réduite pour les petits écrans */
        background-position: center;
    }
}
/* Formulaire de contact */
#contactForm {
    background-color: #daecbb; /* Couleur de fond du formulaire */
    max-width: 500px; /* Limite la largeur du formulaire */
    width: 90%; /* Le formulaire occupera 90% de la largeur de son conteneur */
    padding: 20px; /* Réduit l'espacement intérieur */
    font-size: 0.9rem; /* Diminution de la taille du texte à l'intérieur */
}

.intro-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px 0;
    flex-grow: 3;
}

.intro-contact h1 {
    font-size: 20px;
    margin-bottom: 20px;
}

.intro-contact p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Section Maps */
#maps p {
    font-size: 40px;
    margin-bottom: 20px;
    text-align: center;
    margin: 40px;
}


/* Responsivité : pour les écrans moyens (tablettes) */
@media (max-width: 768px) {
    #maps p {
        font-size: 30px;  /* Réduction de la taille de la police pour les tablettes */
        margin: 20px;     /* Réduction des marges */
    }
}

/* Responsivité : pour les écrans plus petits (mobiles) */
@media (max-width: 480px) {
    #maps p {
        font-size: 12px;  /* Taille de texte encore plus petite pour les petits écrans */
        margin: 15px;     /* Réduction des marges pour éviter l'encombrement */
    }
}

/* Styles pour écrans de plus de 768px */
/* Styles pour écrans de plus de 768px */
@media (min-width: 768px) {
    #contact {
        min-height: 100px; /* Augmente la hauteur minimale */
        background-size: contain; /* L'image s'adapte sans être coupée */
        background-position: center; /* Centre l'image */
        padding: 50px; /* Ajoute un espace autour du contenu */
    }

    #contactForm {
        width: 50%; /* Limite la largeur du formulaire pour un aspect plus propre */
        margin: 0 auto; /* Centre le formulaire */
        border-radius: 10px; /* Coins légèrement arrondis */
        padding: 30px; /* Ajoute de l'espace interne */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour mettre en avant */
    }

    .intro-contact h1 {
        font-size: 40px; /* Agrandit le texte du titre */
        margin-bottom: 30px; /* Espace plus large sous le titre */
    }

    .intro-contact p {
        font-size: 36px; /* Texte descriptif plus grand */
        margin-bottom: 30px;
    }

    #maps p {
        font-size: 18px; /* Texte plus grand dans la section Maps */
        margin: 20px; /* Ajoute un espacement plus large autour */
    }
}

/****/



/* Conteneur de la carte */
.map-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Aspect ratio 16:9 (56.25% = 9/16) */
    height: 0;
    max-width: 100%; /* S'assure que la carte ne dépasse pas du conteneur */
    width: 100%;
    background-color: #f0f0f0;
   
}

.map-container p{
    font-size: 18px;
}
/* Intégration de l'iframe dans le conteneur */
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsivité : pour les petits écrans */
@media (max-width: 768px) {
    .map-container {
        padding-top: 75%; /* Augmenter l'aspect ratio pour les petits écrans */
    }
}

@media (max-width: 480px) {
    .map-container {
        padding-top: 100%; /* Aspect ratio 1:1 pour les très petits écrans */
    }
}

/* Pour les grands écrans (plus de 768px) */
@media (min-width: 769px) {
    .map-container {
        padding-top: 56.25%; /* Aspect ratio standard 16:9 */
    }
    .map-container iframe {
        width: 100%;
        height: 100%;
    }
}

/**/
/* Informations de contact */
.contact-info {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.contact-info h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.info-details {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.info-item {
    flex: 1;
    max-width: 250px;
    margin: 10px;
}

.info-item h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.info-item p {
    font-size: 16px;
}

.info-item a {
    color: #607375;
    text-decoration: none;
}

/* Formulaire */
.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.contact-form h2 {
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
}

.contact-form p {
    font-size: 30px;
}

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

.contact-form label {
    font-size: 25px;
    margin: 10px 0 5px;
}

.contact-form select,
.contact-form input,
.contact-form textarea {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    border: 3px solid #ddd;
    border-radius: 5px;
}

.contact-form button {
    padding: 10px 10px;
    font-size: 25px;
    color: #f1f5f1;
    background-color: #135c13;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
    margin-bottom: 40px;
}

.contact-form button:hover {
    background-color: #63a85a;
}

/* Media Queries pour rendre la section responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    #contact {
        min-height: 400px; /* Réduit la hauteur pour les petits écrans */
    }

    .intro-contact h1 {
        font-size: 40px; /* Réduit la taille du titre */
    }

    .intro-contact p {
        font-size: 20px; /* Réduit la taille du texte */
    }

    .contact-info h2 {
        font-size: 28px; /* Réduit la taille du sous-titre */
    }

    .info-item {
        flex: 1;
        max-width: 100%;
        margin: 10px 0;
    }

    .contact-form h2 {
        font-size: 28px; /* Réduit la taille du titre du formulaire */
    }

    .contact-form label {
        font-size: 18px; /* Réduit la taille des labels */
    }

    .contact-form input, .contact-form select, .contact-form textarea {
        font-size: 14px; /* Réduit la taille de la police des champs */
    }

    .contact-form button {
        font-size: 18px; /* Réduit la taille du bouton */
        padding: 8px 15px; /* Réduit le padding du bouton */
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .intro-contact h1 {
        font-size: 50px; /* Ajuste la taille du titre */
    }

    .intro-contact p {
        font-size: 25px; /* Ajuste la taille du texte */
    }

    .contact-info h2 {
        font-size: 32px; /* Ajuste la taille du sous-titre */
    }

    .contact-form h2 {
        font-size: 32px; /* Ajuste la taille du titre du formulaire */
    }

    .contact-form label {
        font-size: 22px; /* Ajuste la taille des labels */
    }

    .contact-form input, .contact-form select, .contact-form textarea {
        font-size: 15px; /* Ajuste la taille de la police des champs */
    }

    .contact-form button {
        font-size: 20px; /* Ajuste la taille du bouton */
        padding: 9px 18px; /* Ajuste le padding du bouton */
    }
}

/* Écrans larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    .intro-contact h1 {
        font-size: 40px; /* Garder la taille du titre */
    }

    .intro-contact p {
        font-size: 20px; /* Garder la taille du texte */
    }

    .contact-info h2 {
        font-size: 15px; /* Garder la taille du sous-titre */
    }

    .contact-form h2 {
        font-size: 36px; /* Garder la taille du titre du formulaire */
    }

    .contact-form label {
        font-size: 25px; /* Garder la taille des labels */
    }

    .contact-form input, .contact-form select, .contact-form textarea {
        font-size: 16px; /* Garder la taille de la police des champs */
    }

    .contact-form button {
        font-size: 25px; /* Garder la taille du bouton */
        padding: 10px 20px; /* Garder le padding du bouton */
    }
}


/* Section Introduction spécifique à Propos.html */
#intro-propos {
    background-color: #2a6e1c;
    color: #fff;
    padding: 40px 20px;
}

.intro-propos h1 {
    color: #f0e7e7;
    line-height: 1.6;
    font-size: 3em;
    text-align: center;
}

.intro-propos p {
    color: #eee3e3;
    line-height: 1.6;
    font-size: 1.7em;
    text-align: center;
}

/* Media Queries pour rendre la section responsive */

/* Petit écran (téléphones mobiles) */
@media screen and (max-width: 600px) {
    #intro-propos {
        padding: 20px 10px; /* Réduit le padding pour les petits écrans */
    }

    .intro-propos h1 {
        font-size: 2em; /* Réduit la taille du titre */
    }

    .intro-propos p {
        font-size: 1.3em; /* Réduit la taille du texte */
    }
}

/* Écrans moyens (tablettes) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    #intro-propos {
        padding: 30px 15px; /* Ajuste le padding pour les tablettes */
    }

    .intro-propos h1 {
        font-size: 2.5em; /* Ajuste la taille du titre */
    }

    .intro-propos p {
        font-size: 1.5em; /* Ajuste la taille du texte */
    }
}

/* Écrans larges (ordinateurs de bureau) */
@media screen and (min-width: 1025px) {
    #intro-propos {
        padding: 40px 20px; /* Conserve le padding pour les grands écrans */
    }

    .intro-propos h1 {
        font-size: 3em; /* Garder la taille du titre */
    }

    .intro-propos p {
        font-size: 1.7em; /* Garder la taille du texte */
    }
}

 
/* *****************Section Histoire ******************/
/* Style de base pour #presentationwoods */
#presentationwoods {
    background-image: url('image/grusap1.jpg'); /* Chemin de l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    background-position: center; /* Centre l'image */
    margin-top: 10px; /* Décalage du haut */
    padding: 20px; /* Ajoute un peu de padding pour espacer le contenu */
    box-sizing: border-box; /* Inclut padding et bordures dans la taille */
    font-family: 'Open Sans', 'Arial', sans-serif
}

/* Styles pour écrans de plus de 1200px (grands écrans) */
@media (min-width: 1200px) {
    #presentationwoods {
        height: 80vh; /* Augmente la hauteur pour un impact visuel plus grand */
        padding: 20px; /* Augmente l'espacement interne */
        background-size: contain; /* Affiche l'image entière sans la couper */
    }
}

/* Styles pour écrans entre 768px et 1200px (tablettes et petits ordinateurs) */
@media (min-width: 768px) and (max-width: 1199px) {
    #presentationwoods {
        height: 70vh; /* Ajuste la hauteur pour écrans moyens */
        padding: 15px; /* Espacement interne adapté */
        background-size: cover; /* Maintient l'image couvrant toute la section */
    }
}

/* Styles pour écrans entre 480px et 768px (smartphones horizontaux et tablettes) */
@media (min-width: 480px) and (max-width: 767px) {
    #presentationwoods {
        height: 50vh; /* Réduit la hauteur pour écrans plus petits */
        padding: 10px; /* Réduit l'espacement interne */
        font-size: 16px; /* Taille de texte adaptée pour lisibilité */
        background-size: cover; /* Couvre toute la section */
    }
}

/* Styles pour écrans de moins de 480px (smartphones verticaux) */
@media (max-width: 479px) {
    #presentationwoods {
        height: 40vh; /* Réduit encore la hauteur pour petits écrans */
        padding: 5px; /* Réduction maximale de l'espacement */
        font-size: 14px; /* Texte plus petit pour s'adapter à l'écran */
        background-size: cover; /* Maintient une bonne couverture de l'image */
    }
}


/* Logo aligné à gauche */
.logo1 {
    margin-right: 20px; /* Espace entre le logo et la navigation */
}

.logo1 img {
    width: 100px; /* Ajuste la taille du logo selon vos besoins */
    top: 0; /* Place l'image tout en haut */
    left: 0; /* Ajuste horizontalement si nécessaire */
}

/* Formulaire de recherche */
.search-form1 {
    display: flex;
    align-items: center;
    margin: 0 auto;
}

/* Champ de saisie de recherche */
.search-form1 input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 150px;
    margin-right: 8px;
}

/* Bouton de recherche */
.search-form1 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-form1 button:hover {
    background-color: #503e1d;
}

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

/* Conteneur principal */
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 50px;
    background-color: #f9f9f9;
}

/* Section d'introduction */
.intro {
    background-color: #e6a760;
    color: #ffffff;
    padding: 50px; /* Réduit l'espace interne */
    text-align: center;
    border-radius: 10px;
    margin-bottom: 50px; /* Réduit l'espace en bas */
    font-size: 14px; /* Diminue la taille du texte */
    font-weight: bold;
    letter-spacing: 0.5px; /* Réduit l'espacement des lettres */



}
@media (max-width: 768px) {
    .intro {
        padding: 30px; /* Moins d'espace sur mobile */
        font-size: 12px; /* Texte plus petit */
        margin-bottom: 30px; /* Moins d'espace sous la section */
   
    }
}


@media (max-width: 480px) {
    .intro {
        padding: 20px; /* Réduit davantage l'espace intérieur */
        font-size: 12px; /* Diminue la taille du texte */
        margin-bottom: 20px; /* Réduit l'espace sous la section */
        border-radius: 5px; /* Angle plus arrondi pour les petits écrans */
        letter-spacing: 0.2px; /* Moins d'espacement entre les lettres */
    }
}

/***/

/* Autres sections intro */
/* Style général pour .intro1 et .intr */
.intro1, .intr {
    background-color: #122e05;
    color: #ffffff;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 100px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
}
.intro1 p{

    margin-bottom: 20px;  
    font-size: 1.2rem;
    color: #eee4e4;
    line-height: 1.6;
    margin-bottom: 20px;  
}

.intr {
    background-color: #809b74;
    font-size: 24px;
}

/* 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 */
.image50 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image50 img {
    width: 1200px;
    height: auto;
}

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

/* Pour les écrans jusqu'à 768px (tablettes et petits écrans) */
@media (max-width: 768px) {
    .intro1, .intr {
        padding: 30px; /* Moins d'espace intérieur */
        font-size: 16px; /* Réduction de la taille de la police */
        margin-bottom: 50px; /* Moins d'espace sous la section */
    }

    .intr {
        font-size: 16px; /* Réduction de la taille pour .intr */
    }

    .content {
        gap: 30px; /* Moins d'espace entre les blocs */
    }

    .content-block {
        padding: 20px; /* Moins d'espace intérieur dans chaque bloc */
        gap: 20px; /* Moins d'espace entre l'image et le texte */
    }

    .image50 img {
        width: 100%; /* L'image s'adapte à l'écran */
        height: auto;
    }

    /* Réduction des bordures pour les petits écrans */
    .content-block:nth-child(odd) {
        flex-direction: column; /* Alignement en colonne sur les petits écrans */
    }
}

/* Pour les écrans jusqu'à 480px (smartphones) */
@media (max-width: 480px) {
    .intro1, .intr {
        padding: 15px; /* Moins d'espace intérieur pour les petits écrans */
        font-size: 12px; /* Plus petite taille de texte */
        margin-bottom: 20px; /* Réduction de l'espace sous la section */
    }

    .intr {
        font-size: 12px; /* Réduction supplémentaire pour .intr */
    }

    .content {
        gap: 20px; /* Moins d'espace entre les blocs */
    }

    .content-block {
        padding: 15px; /* Réduction du padding dans chaque bloc */
        gap: 15px; /* Moins d'espace entre l'image et le texte */
    }

    .image50 img {
        width: 100%; /* L'image occupe toute la largeur de l'écran */
        height: auto;
    }

    /* Ajustement du flex-direction pour les petits écrans */
    .content-block:nth-child(odd) {
        flex-direction: column; /* Alignement en colonne pour les petits écrans */
    }
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    #presentationwoods {
        height: 40vh; /* Réduit la hauteur pour les petits écrans */
    }

    .content-block {
        flex-direction: column;
        text-align: center;
    }

    .image50 img {
        width: 100%;
        max-width: 350px;
    }

    .search-form1 input[type="text"] {
        width: 100%; /* S'adapte à la largeur du conteneur */
        margin-right: 0;
    }

    .search-form1 button {
        width: 100%;
    }
}

/* Responsive pour tablettes */
@media (max-width: 1024px) {
    #presentationwoods {
        height: 50vh; /* Ajuste la hauteur pour les tablettes */
    }

    .content-block {
        flex-direction: column;
        text-align: center;
    }

    .image50 img {
        width: 100%;
    }
}

/****news ****/



/**************************************Section Équipe*****************************************/

/* Section Équipe */
#equipe {
    background-color: #ecf3ee; /* Couleur de fond de la section */
    color: #272222; /* Couleur du texte */
    padding: 40px 20px;
}

/* Disposition des éléments dans la section */
#equipe .row {
    display: flex;
    justify-content: space-around; /* Répartit l'espace de manière égale */
    flex-wrap: wrap; /* Permet le retour à la ligne des éléments */
    text-align: center; /* Centre le texte */
}

/* Colonne individuelle dans la section Équipe */
#equipe .col-3 {
    flex-basis: 22%; /* Largeur de chaque colonne */
    margin-bottom: 20px; /* Espace en bas des éléments */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout d'un effet visuel */
}

/* Effet de survol sur les colonnes */
#equipe .col-3:hover {
    transform: translateY(-5px); /* Légère élévation lors du survol */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Ombre portée subtile */
}

/* Style des images dans les colonnes */
#equipe .col-3 img {
    width: 100%; /* L'image prend toute la largeur de la colonne */
    border-radius: 10px; /* Bords arrondis pour l'image */
    margin-bottom: 15px; /* Espace sous l'image */
    object-fit: cover; /* L'image s'ajuste bien à la taille du conteneur */
}

/* Responsive : ajustements pour petits écrans */
@media (max-width: 768px) {
    #equipe .col-3 {
        flex-basis: 48%; /* Réduit la taille des colonnes sur les petits écrans */
    }
}

/* Responsive : ajustements pour très petits écrans (smartphones) */
@media (max-width: 480px) {
    #equipe .col-3 {
        flex-basis: 100%; /* Colonnes prennent toute la largeur sur les très petits écrans */
    }
}

/************************************************************ page produit -******************************************/
/* Section d'introduction produit */
#intro-produit {
    display: flex; /* Utilise Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    text-align: center; /* Centre le texte à l'intérieur */
    padding: 20px; /* Ajoute un espacement autour du contenu */
    background-color: #e7e1db; /* Couleur de fond douce */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 800px; /* Limite la largeur pour un meilleur affichage */
    max-height: 500px; /* Limite la hauteur */
    box-sizing: border-box; /* Inclut les bordures et le padding dans la taille */
}

/* Style du titre dans la section d'introduction produit */
#intro-produit h1 {
    color: #533d14; /* Couleur du texte */
    font-size: 2em; /* Taille du texte */
    margin-top: 30px;

}

/* Style du titre dans les produits */
.product h1 {
    color: #533d14; /* Couleur du texte */
    font-size: 1em; /* Taille du texte */
    text-align: center; /* Centrage du texte */
   
}



#produit {
    min-height: 700px;
    width: 100%;
    background: linear-gradient(rgba(24, 161, 122, 0.7), rgba(15, 31, 23, 0.419)), url('image/plot sapelli.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Open Sans', 'Arial', sans-serif;
}


#produit .content-header {
    height: 100%;
    margin-top: 300px;
    text-align: center;
    color: white;
}
#produit .content-header h1 {
    color: white;
    font-size: 50px;
}

/* Effet de survol ou d'interaction visuelle pour rendre les sections plus dynamiques */
#intro-produit:hover,
#produit:hover {
    opacity: 0.9; /* Effet de transparence au survol */
    transition: opacity 0.3s ease; /* Transition douce */
}


@media (max-width: 1000px) {
    .image-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text-content {
        text-align: center;
    }

    .product-card .image-text .images {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .images img {
        max-width: 45%;
    }
}

@media (min-width: 1000px) {
    .image-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text-content {
        text-align: center;
    }

    .images {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .images img {
        max-width: 45%;
    }
}


/***section grum du produit ***/
/* Centrage global de la section */
.product-card {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    margin: 100px auto;
    max-width: 1100px; /* Meilleure largeur pour les grands écrans */
    background-color: #faf7f4;
    object-fit: cover;
}

/* Conteneur principal */
.image-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e7e1db;
    padding: 20px;
    gap: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: max-content;
    box-sizing: border-box;
}

/* Image */
.image-text .images {
    width: 100%;
    gap: 20px;
    height: auto;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.image-text .images img {
    border-radius: 20px;
    transition: all 0.25s;
}

.image-text .images img:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 30px rgb(163, 163, 163);
}

/* Texte */
.text-content {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.text-content h1 {
    font-size: 26px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

.image-text p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 10px 0;
}


@media (max-width: 768px) {
    .image-text {
        flex-direction: column; /* Empile l'image et le texte */
        text-align: center; /* Centre le texte */
    }

    .image-text img {
        max-width: 100%; /* Image prend toute la largeur */
    }

    .text-content h1 {
        font-size: 20px; /* Taille réduite du titre */
    }

    .image-text p {
        font-size: 14px; /* Réduction de la taille du texte */
    }
}




/**section equarrie */
/* Section Intro Équarris */
#intro-equarris {
    display: flex; /* Utilisation de Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 40px; /* Ajoute un espacement autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 1100px; /* Limite la largeur */
    background-color: #faf7f4; /* Optionnel : couleur de fond douce */
}

/* Alignement interne de l'image et du texte */
.image-texteq {
    display: flex; /* Met l'image et le texte sur la même ligne */
    align-items: center; /* Aligne l'image et le texte verticalement */
    gap: 20px; /* Ajoute un espace entre l'image et le texte */
    background-color: #e7e1db; /* Fond doux pour le contenu */
    padding: 20px; /* Espace interne autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1100px; /* Limite la largeur */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
}

/* Style pour l'image */
.image-texteq img {
    width: 450px; /* Taille de l'image */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Coins arrondis de l'image */
}

/* Style pour les titres dans la section */
.text-contenteq h1 {
    font-size: 25px; /* Taille du titre */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style pour le texte dans la section */
.image-texteq p {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px 0; /* Ajoute du padding vertical */
}

/* Style pour les liens */
.text-contenteq a {
    font-size: 16px; /* Taille du texte des liens */
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Enlève la décoration par défaut */
}

.text-contenteq a:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline; /* Souligne le lien au survol */
}

/* Modale : Style pour la fenêtre modale */
.modal {
    display: none; /* Modale cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Assure que la modale est au-dessus de tout */
}

/* Contenu de la modale */
.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 80%; /* Largeur de la modale */
    max-width: 600px; /* Limite la largeur */
    position: relative;
}

/* Bouton de fermeture "X" */
.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
}

/* Espacement entre les sections */
 #intro-equarris, #intro-plot, #intro-sciage, #intro-tera, #intro-contre {
    margin-bottom: 20px; /* Ajoute un espacement sous chaque section */
}

/* Responsive Design : Ajustement des tailles sur petits écrans */
@media (max-width: 768px) {
    #intro-equarris, .image-texteq {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        gap: 10px; /* Réduit l'espace entre l'image et le texte */
    }

    .image-texteq img {
        width: 80%; /* Réduit la taille de l'image sur les petits écrans */
    }

    .text-contenteq h1 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .image-texteq p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    .text-contenteq a {
        font-size: 14px; /* Réduit la taille des liens */
    }
}


/*section plot */

/* Section Intro Plot */
#intro-plot {
    display: flex; /* Utilisation de Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 40px; /* Ajoute un espacement autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 1100px; /* Limite la largeur pour un meilleur affichage */
    background-color: #faf7f4; /* Couleur de fond douce */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    width: 100%; /* Prend toute la largeur disponible */
}

/* Alignement de l'image et du texte côte à côte */
.image-textep {
    display: flex; /* Met l'image et le texte sur la même ligne */
    align-items: center; /* Aligne verticalement l'image et le texte */
    gap: 20px; /* Espacement entre l'image et le texte */
    background-color: #e7e1db; /* Fond doux pour le contenu */
    padding: 20px; /* Espace interne autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet visuel */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1100px; /* Limite la largeur */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
}

/* Style pour l'image */
.image-textep img {
    width: 450px; /* Taille de l'image (réduite) */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Coins arrondis de l'image */
}

/* Style pour les titres dans la section */
.text-contentep h1 {
    font-size: 25px; /* Taille du titre */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style pour le texte dans la section */
.image-textep p {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px 0; /* Espacement vertical */
}

/* Style pour les liens */
.text-contentep a {
    font-size: 16px; /* Taille du texte des liens */
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Enlève la décoration par défaut */
}

/* Changement de couleur pour les liens au survol */
.text-contentep a:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline; /* Souligne le lien au survol */
}

/* Responsive Design : Ajustement des tailles sur petits écrans */
@media (max-width: 768px) {
    #intro-plot, .image-textep {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        gap: 10px; /* Réduit l'espace entre l'image et le texte */
    }

    .image-textep img {
        width: 80%; /* Réduit la taille de l'image sur les petits écrans */
    }

    .text-contentep h1 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .image-textep p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    .text-contentep a {
        font-size: 14px; /* Réduit la taille des liens */
    }
}


/** section sciage*****/
/* Section Intro Sciage */
#intro-sciage {
    display: flex; /* Utilisation de Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 50px; /* Ajoute un espacement autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 1100px; /* Limite la largeur pour un meilleur affichage */
    background-color: #faf7f4; /* Fond doux */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
    width: 100%; /* Prend toute la largeur disponible */
}

/* Alignement de l'image et du texte côte à côte */
.image-textes {
    display: flex; /* Met l'image et le texte sur la même ligne */
    align-items: center; /* Aligne verticalement l'image et le texte */
    gap: 20px; /* Espacement entre l'image et le texte */
    background-color: #e7e1db; /* Fond doux pour le contenu */
    padding: 20px; /* Espace interne autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet visuel */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1100px; /* Limite la largeur */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
}

/* Style pour l'image */
.image-textes img {
    width: 450px; /* Taille de l'image (réduite) */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Coins arrondis de l'image */
}

/* Style pour le titre */
.text-contentes h1 {
    font-size: 25px; /* Taille du titre */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style pour le texte */
.image-textes p {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px 0; /* Espacement vertical */
}

/* Style pour les liens */
.text-contentes a {
    font-size: 16px; /* Taille du texte des liens */
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Enlève la décoration par défaut */
}

/* Changement de couleur pour les liens au survol */
.text-contentes a:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline; /* Souligne le lien au survol */
}

/* Responsive Design : Ajustement des tailles sur petits écrans */
@media (max-width: 768px) {
    #intro-sciage, .image-textes {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        gap: 10px; /* Réduit l'espace entre l'image et le texte */
    }

    .image-textes img {
        width: 80%; /* Réduit la taille de l'image sur les petits écrans */
    }

    .text-contentes h1 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .image-textes p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    .text-contentes a {
        font-size: 14px; /* Réduit la taille des liens */
    }
}


/**section terasse*/


/* Section Intro Tera */
#intro-tera {
    display: flex; /* Utilisation de Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 50px; /* Ajoute un espacement autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 1100px; /* Limite la largeur pour un meilleur affichage */
    background-color: #faf7f4; /* Fond doux */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
    width: 100%; /* Prend toute la largeur disponible */
}

/* Alignement de l'image et du texte côte à côte */
.image-textet {
    display: flex; /* Met l'image et le texte sur la même ligne */
    align-items: center; /* Aligne verticalement l'image et le texte */
    gap: 20px; /* Espacement entre l'image et le texte */
    background-color: #e7e1db; /* Fond doux pour le contenu */
    padding: 20px; /* Espace interne autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet visuel */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1100px; /* Limite la largeur */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
}

/* Style pour l'image */
.image-textet img {
    width: 450px; /* Taille de l'image (réduite) */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Coins arrondis de l'image */
}

/* Style pour le titre */
.text-contentet h1 {
    font-size: 25px; /* Taille du titre */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style pour le texte */
.image-textet p {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px 0; /* Espacement vertical */
}

/* Style pour les liens */
.text-contentet a {
    font-size: 16px; /* Taille du texte des liens */
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Enlève la décoration par défaut */
}

/* Changement de couleur pour les liens au survol */
.text-contentet a:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline; /* Souligne le lien au survol */
}

/* Responsive Design : Ajustement des tailles sur petits écrans */
@media (max-width: 768px) {
    #intro-tera, .image-textet {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        gap: 10px; /* Réduit l'espace entre l'image et le texte */
    }

    .image-textet img {
        width: 80%; /* Réduit la taille de l'image sur les petits écrans */
    }

    .text-contentet h1 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .image-textet p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    .text-contentet a {
        font-size: 14px; /* Réduit la taille des liens */
    }
}


/*** section contreplaque **/
/* Section Intro Contre */
#intro-contre {
    display: flex; /* Utilisation de Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 50px; /* Ajoute un espacement autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    margin: 10px auto; /* Centre la section dans la page */
    max-width: 1100px; /* Limite la largeur pour un meilleur affichage */
    background-color: #faf7f4; /* Fond doux */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
    width: 100%; /* Prend toute la largeur disponible */
}

/* Alignement de l'image et du texte côte à côte */
.image-textec {
    display: flex; /* Met l'image et le texte sur la même ligne */
    align-items: center; /* Aligne verticalement l'image et le texte */
    gap: 20px; /* Espacement entre l'image et le texte */
    background-color: #e7e1db; /* Fond doux pour le contenu */
    padding: 20px; /* Espace interne autour du contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet visuel */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1100px; /* Limite la largeur */
    box-sizing: border-box; /* Inclut le padding dans les calculs de largeur */
}

/* Style pour l'image */
.image-textec img {
    width: 450px; /* Taille de l'image (réduite) */
    height: auto; /* Conserve les proportions */
    border-radius: 8px; /* Coins arrondis de l'image */
}

/* Style pour le titre */
.text-contentec h1 {
    font-size: 25px; /* Taille du titre */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style pour le texte */
.image-textec p {
    font-size: 16px; /* Taille du texte */
    line-height: 1.5; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime les marges par défaut */
    padding: 20px 0; /* Espacement vertical */
}

/* Style pour les liens */
.text-contentec a {
    font-size: 16px; /* Taille du texte des liens */
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Enlève la décoration par défaut */
}

/* Changement de couleur pour les liens au survol */
.text-contentec a:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline; /* Souligne le lien au survol */
}

/* Timeline - Navigation */
.timeline-nav {
    padding: 70px 0;
    margin-top: 70px;
}

/* Responsivité pour les écrans jusqu'à 768px */
@media (max-width: 768px) {
    .timeline-nav {
        padding: 50px 0; /* Réduit le padding pour les écrans plus petits */
        margin-top: 50px; /* Ajuste le margin-top */
        font-size: 12px;
    }
}

/* Responsivité pour les écrans jusqu'à 480px */
@media (max-width: 480px) {
    .timeline-nav {
        padding: 70px 0; /* Réduit encore le padding pour les très petits écrans */
        margin-top: 50px; /* Ajuste encore le margin-top */
    }
}


/* Style général de la timeline */
.timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 10px;
    margin: 0;
    position: relative;
}

/* Ligne horizontale après chaque élément de la timeline */
.timeline li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    top: 3%;
    left: 5%;
    z-index: 1;
    transform: translateX(25%);
}

.timeline li:last-child::after {
    content: none;
}

/* Style des liens dans la timeline */
.timeline li a {
    display: block;
    background: #c9a96d; /* Couleur de fond gris clair */
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 12px;
}

.timeline li a:hover {
    background: #186e1f; /* Couleur de fond verte au survol */
}



/* Responsivité pour les écrans jusqu'à 768px */
@media (max-width: 768px) {
    .timeline {
        flex-direction: row; /* Garde les éléments horizontalement */
        justify-content: center; /* Centre les éléments horizontalement */
        align-items: center;
    }

    .timeline li {
        position: relative;
        margin-bottom: 10px; /* Espacement entre les éléments */
    }

    .timeline li::after {
        width: 100%;
        left: 0; /* Ligne horizontale s'étend sur toute la largeur */
        transform: none; /* Enlève le déplacement de la ligne */
    }

    .timeline li a {
        width: auto; /* Garde la largeur des éléments non limitée */
        padding: 10px;
    }

}

/* Responsivité pour les écrans jusqu'à 480px */
@media (max-width: 480px) {
    .timeline {
        padding:auto;
        flex-direction: row; /* Reste horizontal sur les très petits écrans */
    }

    .timeline li {
        margin-bottom: 5px; /* Réduit l'espace entre les éléments */
    }

    .timeline li a {
        padding: 8px; /* Réduit le padding des éléments */
    }

    
}
/************************************************************/
/* Section Produit */
.product-section {
    padding: 20px 20px; /* Augmentation de l'espacement intérieur pour plus de confort */
    background-color: #ffffff; /* Couleur blanche pour un fond épuré */
    border-bottom: 1px solid #cccccc; /* Bordure discrète pour séparer les sections */
    margin-top: 20px; /* Augmentation de l'espacement supérieur pour séparer les sections */
    /* box-sizing: border-box; Inclure le padding et la bordure dans les dimensions totales (commenté pour le moment) */
}

/* Titre de la section Produit */
.product-section h2 {
    color: #442d2d; /* Couleur du titre principale */
    font-size: 2rem; /* Augmentation de la taille pour plus de visibilité */
    margin-bottom: 15px; /* Réduction de l'espace sous le titre */
   /* font-weight: bold; /* Mise en gras pour un accentuation supplémentaire */
    font-family: 'Arial', sans-serif; /* Police sans-serif moderne */
}

/* Paragraphe de la section Produit */
.product-section p {
    color: #555; /* Couleur gris foncé pour une bonne lisibilité */
    line-height: 1.8; /* Espacement entre les lignes pour améliorer la lecture */
    font-size:  1rem; /* Taille de police augmentée pour une meilleure lisibilité */
    text-align: justify; /* Justifie le texte pour un alignement propre */
    font-family: 'Arial', sans-serif; /* Police sans-serif pour cohérence */
}

/* Liste d'éléments de la section Produit */
.product-section li {
    color: #555; /* Couleur gris foncé pour une bonne lisibilité */
    line-height: 1.8; /* Espacement entre les lignes pour améliorer la lecture */
    font-size: 1rem; /* Taille de police augmentée pour une meilleure lisibilité */
    text-align: justify; /* Justifie le texte pour un alignement propre */
    font-family: 'Arial', sans-serif; /* Police sans-serif pour cohérence */
    text-transform: uppercase; /* Texte en majuscules */
}

/* Titre principal (h1) de la section Produit */
.product-section h1 {
    color: #333; /* Couleur légèrement plus foncée pour le titre principal */
    font-size: 2.5rem; /* Augmentation de la taille du titre principal */
    line-height: 1.6; /* Hauteur de ligne confortable */
    text-align: left; /* Alignement du texte à gauche pour un style plus naturel */
    font-weight: bold; /* Met en valeur le titre principal */
    font-family: 'Arial', sans-serif; /* Police sans-serif */
}


/* Responsive Design : Ajustement des tailles sur petits écrans */
@media (max-width: 768px) {
    #intro-contre, .image-textec {
        flex-direction: column; /* Empile l'image et le texte sur les petits écrans */
        gap: 10px; /* Réduit l'espace entre l'image et le texte */
    }

    .image-textec img {
        width: 80%; /* Réduit la taille de l'image sur les petits écrans */
    }

    .text-contentec h1 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    .image-textec p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    .text-contentec a {
        font-size: 14px; /* Réduit la taille des liens */
    }
}

/**/

/* Styliser la section globale */

/* Section globale */
#valeurs22 {
    background-color: #f5f5f5; /* Couleur de fond douce */
    padding: 40px 0; /* Espacement en haut et en bas */
    text-align: center; /* Centrer le contenu horizontalement */
}

/* Conteneur général */
.container {
    max-width: 700px;
    margin: 0 auto; /* Centrer horizontalement */
    padding: 0 15px; /* Espacement latéral */
}
/* Responsive pour les écrans de moins de 768px (tablettes et petits écrans) */
@media (max-width: 768px) {
    .container {
        max-width: 20%; /* Laisser la largeur se redimensionner automatiquement */
        padding: 0 20px; /* Augmenter l'espacement latéral pour plus de confort sur les petits écrans */
    }
}

/* Responsive pour les écrans de moins de 480px (smartphones) */
@media (max-width: 480px) {
    .container {
        max-width: 50%; /* Laisser la largeur se redimensionner pour les petits écrans */
        padding: 0 10px; /* Réduire légèrement l'espacement latéral pour les petits écrans */
    }
}
/* Disposition des colonnes */
.row2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Espacement uniforme entre les colonnes */
    align-items: flex-start; /* Alignement des éléments au début */
}

/* Styles pour chaque colonne */
.col-62 {
    flex: 1 1 30%; /* Largeur de 30% pour trois colonnes alignées */
    box-sizing: border-box;
    margin-bottom: 20px; /* Espacement entre les lignes */
    text-align: center; /* Centrer le texte dans la colonne */
}

/* Style pour les images dans les colonnes */
.col-62 img {
    width: 300px; /* Largeur de l'image */
    height: 300px; /* Hauteur égale pour un cercle */
    border-radius: 50%; /* Transforme l'image en cercle */
    object-fit: cover; /* Ajuste l'image pour remplir l'espace du cercle */
    border: 2px solid #ddd; /* Bordure grise autour de l'image */
    transition: transform 0.3s ease; /* Animation douce pour l'effet de zoom */
}

.col-62 img:hover {
    transform: scale(1.05); /* Agrandissement de l'image au survol */
}

/* Style du texte sous les images */
.col-62 p {
    font-weight: bold;
    font-size: 25px; /* Taille du texte */
    margin: 10px 0; /* Espacement vertical */
    color: #333; /* Couleur du texte */
}

/* Eviter le soulignement des liens */
a {
    text-decoration: none;
}

/* Media query pour les écrans de largeur maximale 768px */
@media (max-width: 768px) {
    .col-62 {
        flex: 1 1 48%; /* Deux colonnes sur les écrans plus petits */
    }
}

/* Media query pour les écrans de largeur maximale 480px */
@media (max-width: 480px) {
    .col-62 {
        flex: 1 1 100%; /* Une seule colonne pour les très petits écrans */
    }
}

/**/
/* Section générale */
#valeurs {
    padding: 20px;
    background-color: #f9f9f9; /* Couleur de fond douce */
    min-height: 700px;
    width: 100%; /* Assure que le header prend toute la largeur */
}

/* Conteneur */
.container {
    max-width: 1300px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centre le conteneur */
    font-size: 1.5em;
}

/* Disposition des lignes */
.row {
    display: flex; /* Utilise Flexbox pour l'alignement */
    flex-wrap: wrap;
    justify-content: space-between; /* Distribue les éléments sur la ligne */
    gap: 20px;
}

/* Colonnes de base */
.col-10 {
    flex: 0 0 30%; /* Chaque colonne prend 30% de la largeur */
    max-width: 30%;
    text-align: center;
}

.col-10 p {
    font-size: 2em; /* Augmente la taille de la police */
    margin-bottom: 10px; /* Espace en dessous du texte */
}

.col-10 img {
    width: 100%; /* Ajuste la largeur de l'image */
    height: auto; /* Garde les proportions de l'image */
    border-radius: 8px; /* Arrondit les bords de l'image */
    transition: transform 0.3s; /* Transition pour l'effet de zoom */
}

.col-10 img:hover {
    transform: scale(1.05); /* Effet de zoom au survol */
}

/* Masquer les colonnes par défaut */
.hidden {
    display: none; /* Masque les colonnes cachées */
}

/* Affiche les colonnes cachées si besoin */
.show {
    display: block; /* Affiche les colonnes masquées */
}

/* Media Query pour les écrans de 768px et moins */
@media (max-width: 768px) {
    .col-10 {
        flex: 0 0 45%; /* Ajuste les colonnes à 45% pour les écrans de taille moyenne */
        max-width: 45%; /* Limite la largeur maximale à 45% */
    }
    .container {
        font-size: 1.2em; /* Réduit légèrement la taille de la police */
    }
}

/* Media Query pour les écrans de 480px et moins */
@media (max-width: 480px) {
    .col-10 {
        flex: 0 0 100%; /* Passe les colonnes à 100% pour les petits écrans */
        max-width: 100%; /* Limite la largeur maximale à 100% */
    }
    .container {
        font-size: 1em; /* Réduit encore la taille de la police pour les petits écrans */
    }
}


/* Style général pour la page de contact */
/* 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 */
    }
}
/********icon*****/
/* Style de base pour le logo */


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



/***********page grum************************/

/* Section #grum */
#grum {
    background-image: url('image/grusap.jpg'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir tout le conteneur */
    background-position: center; /* Centre l'image */
    padding: 150px; /* Espacement autour du contenu */
    height: 50vh; /* Hauteur de la section = hauteur de la fenêtre */
    border-radius: 8px; /* Ajoute des coins arrondis */
    color: white; /* Assure que le texte soit visible sur un fond potentiellement sombre */
    margin-top: 70px;
}

/* Section introgrum */
.introgrum {
    display: flex; /* Utilise Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    /*text-align: center; /* Centre le texte à l'intérieur */
    padding: 20px; /* Ajoute un espacement autour du contenu */
    background-color: #faf7f4; /* Optionnel : couleur de fond douce */
    border-radius: 8px; /* Optionnel : coins arrondis */
    margin: 20px auto; /* Centre la section dans la page */
    max-width: 800px; /* Limite la largeur pour un meilleur affichage */
    font-family: 'Arial', sans-serif; /* Police simple et professionnelle */
}

/* Style des paragraphes dans introgrum */
.introgrum p {
    font-size: 18px; /* Taille de texte ajustée */
    line-height: 1.6; /* Espacement entre les lignes */
    color: #333; /* Couleur du texte */
   

}

/* Style des images dans introgrum */
.introgrum img {
    width: 90px; /* Taille des logos */
    height: auto; /* Maintient les proportions */
}

/* Responsivité pour les petits écrans */
@media (max-width: 768px) {
    /* Section #grum */
    #grum {
        padding: 80px; /* Réduit l'espacement sur petits écrans */
        height: auto; /* Ajuste la hauteur automatiquement */
    }

    /* Section introgrum */
    .introgrum {
        max-width: 100%; /* Permet à la section de s'étirer */
        padding: 15px; /* Réduit l'espacement */
    }

    /* Style des paragraphes dans introgrum */
    .introgrum p {
        font-size: 18px; /* Réduit la taille du texte */
    }

    /* Style des images dans introgrum */
    .introgrum img {
        width: 70px; /* Réduit la taille des logos */
    }
}

/* Responsivité pour les très petits écrans */
@media (max-width: 480px) {
    /* Section #grum */
    #grum {
        padding: 50px; /* Réduit davantage l'espacement */
        height: auto; /* Ajuste la hauteur automatiquement */
    }

    /* Section introgrum */
    .introgrum {
        max-width: 100%; /* Permet à la section de s'étirer */
        padding: 10px; /* Réduit l'espacement */
    }

    /* Style des paragraphes dans introgrum */
    .introgrum p {
        font-size: 16px; /* Réduit encore la taille du texte */
    }

    /* Style des images dans introgrum */
    .introgrum img {
        width: 50px; /* Réduit la taille des logos */
    }
}


/******************************************** page sapelli*******************************/
/* Section #grume */
#grume {
    background-color: #8b4513;
    margin-top: 10px;
}

/* Section .Grume */
.Grume {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: background-image 1s ease-in-out; /* Transition douce pour changer d'image */
    margin-top: auto;
   
}

/* Section hero-Grume */
.hero-Grume {
    color: white;
    background-color: rgba(180, 173, 173, 0.5); /* Fond semi-transparent pour une meilleure lisibilité */
    background-size: cover; /* Assure le bon rendu des images */
    background-position: center; /* Centre l'image */
    transition: background-image 0.3s ease; /* Transition fluide entre les images */
    
}

/* Styles pour le texte dans .hero-Grume */
.hero-Grume h1 {
    font-size: 48px; /* Taille du texte */
    margin-bottom: 20px; /* Espace sous le titre */
    color: #fff; /* Couleur blanche pour contraster avec l'image */
}

.hero-Grume p {
    font-size: 24px;
    margin-bottom: 30px; /* Espace sous le paragraphe */
    color: #fff;
}

/* Conteneurs d'images */
.image-container12, .image-container13 {
    margin-right: 10px;
}

.image-container12 img, .image-container13 img {
    width: 400px; /* Largeur de l'image */
    height: auto; /* Hauteur automatique pour conserver les proportions */
}

/* Conteneur de droite */
.right-container {
    display: flex; /* Active le modèle flexbox */
    justify-content: flex-end; /* Aligne le contenu à droite */
    width: 100%; /* Assurez-vous que le conteneur prend toute la largeur */
}

/* Lien dans right-container */
.right-container a {
    color: #f8f4f4; /* Couleur du texte */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold; /* Met le texte en gras */
}

/* Responsivité pour les petits écrans */
@media (max-width: 768px) {
    /* Ajustements pour la section .Grume */
    .Grume {
        height: auto; /* Ajuste la hauteur de la section */
        padding: 10px 10px; /* Réduit l'espacement pour les petits écrans */
    }

    /* Ajustements pour le texte */
    .hero-Grume h1 {
        font-size: 36px; /* Réduit la taille du titre */
    }

    .hero-Grume p {
        font-size: 18px; /* Réduit la taille du paragraphe */
    }

    /* Ajustements pour les images */
    .image-container12 img, .image-container13 img {
        width: 100%; /* Les images prennent toute la largeur du conteneur */
        max-width: 350px; /* Limite la taille des images */
        height: auto; /* Garde les proportions */
    }

    /* Ajustement de la disposition du conteneur à droite */
    .right-container {
        justify-content: center; /* Centre les éléments à droite sur petits écrans */
        margin-top: 20px;
    }

    /* Ajustements pour les liens */
    .right-container a {
        font-size: 16px; /* Réduit la taille du texte */
    }
}

/* Responsivité pour très petits écrans */
@media (max-width: 480px) {
    /* Ajustements pour la section .Grume */
    .Grume {
        height: auto; /* Ajuste la hauteur automatiquement */
        padding: 30px 5px; /* Réduit l'espacement pour les très petits écrans */
    }

    /* Ajustements pour le texte */
    .hero-Grume h1 {
        font-size: 28px; /* Réduit davantage la taille du titre */
    }

    .hero-Grume p {
        font-size: 16px; /* Réduit davantage la taille du paragraphe */
    }

    /* Ajustements pour les images */
    .image-container12 img, .image-container13 img {
        width: 100%; /* Les images prennent toute la largeur du conteneur */
        max-width: 250px; /* Limite encore plus la taille des images */
        height: auto; /* Maintient les proportions */
    }

    /* Ajustement de la disposition du conteneur à droite */
    .right-container {
        justify-content: center; /* Centre les éléments à droite sur très petits écrans */
        margin-top: 10px;
    }

    /* Ajustements pour les liens */
    .right-container a {
        font-size: 14px; /* Réduit la taille du texte */
    }
}


/***/
/* Section #valeurs11 */
#valeurs11 {
    padding: 20px;
    background-color: #f9f9f9; /* Couleur de fond douce */
}

/* Conteneur principal .container11 */
.container11 {
    max-width: 1200px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centre le conteneur */
}

/* Ligne .row */
.row {
    display: flex; /* Utilise le modèle flexbox */
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne si nécessaire */
    justify-content: space-between; /* Espace entre les éléments */
}

/* Colonne .col-11 */
.col-11 {
    flex: 0 0 calc(33.33% - 20px); /* Chaque colonne prend environ un tiers de la largeur disponible moins l'espace */
    max-width: calc(40% - 50px); /* Limite la largeur maximale */
    text-align: center; /* Centre le texte */
    margin-bottom: 20px; /* Espace en dessous des colonnes */
}

/* Style pour les titres dans les colonnes */
.col-11 h1 {
    font-size: 1.5em; /* Augmente la taille de la police */
    margin-bottom: 10px; /* Espace en dessous du texte */
    font-family: 'Arial', sans-serif; /* Police simple et professionnelle */}

/* Style pour les images dans les colonnes */
.col-11 img {
    width: 105%; /* Ajuste la largeur de l'image */
    height: 500px; /* Fixe la hauteur des images */
    object-fit: cover; /* S'assure que l'image couvre la zone sans déformation */
    border-radius: 8px; /* Arrondit les bords de l'image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
}

/* Responsivité pour petits écrans */
@media (max-width: 768px) {
    .col-11 {
        flex: 0 0 calc(50% - 20px); /* Chaque colonne prend la moitié de la largeur */
        max-width: calc(50% - 20px); /* Limite la largeur maximale à la moitié */
    }

    .col-11 img {
        height: 300px; /* Réduit la hauteur des images */
    }

    .col-11 h1 {
        font-size: 1.5em; /* Réduit la taille du titre */
    }
}

/* Responsivité pour très petits écrans */
@media (max-width: 480px) {
    .col-11 {
        flex: 0 0 100%; /* Chaque colonne prend toute la largeur de l'écran */
        max-width: 100%; /* Limite la largeur à 100% */
    }

    .col-11 img {
        height: 200px; /* Réduit encore plus la hauteur des images */
    }

    .col-11 h1 {
        font-size: 1.2em; /* Réduit la taille du titre pour les petits écrans */
    }
}

/**/
/* Section principale #produitsfinii */
#produitsfinii {
    background-color: #c2b17b;
    color: #1a1919;
    padding: 40px 20px;
}

/* Section produitsfini */
.produitsfini {
    text-align: center;
    margin-bottom: 50px;
    padding: 20px;
}

/* Titre h2 dans produitsfini */
.produitsfini h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #eeece4;
    font-size: 60px;
}

/* Flexbox pour les images et texte */
.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Permet aux éléments de se réorganiser en fonction de l'espace */
}

/* Conteneur d'image (premier) */
.image-container1 {
    flex: 1;
    margin-right: 20px;
}

.image-container1 img {
    width: 100%; /* Ajuste l'image à la largeur du conteneur */
    height: auto; /* Maintient les proportions */
}

/* Conteneur de texte (premier) */
.text-container1 {
    flex: 2;
    text-align: left;
}

.text-container1 h1 {
    font-size: 35px;
    line-height: 1.6;
}

.text-container1 p {
    font-size: 25px;
    line-height: 1.6;
}

/* Flexbox pour les images et texte inversés (deuxième partie) */
.flex-container2 {
    display: flex;
    flex-direction: row-reverse; /* Inverse l'ordre des éléments */
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    flex-wrap: wrap; /* Permet aux éléments de se réorganiser en fonction de l'espace */
}

/* Conteneur d'image (deuxième) */
.image-container2 {
    flex: 1;
    margin-left: 5px; /* Réduit l'espace entre l'image et le texte */
}

.image-container2 img {
    width: 100%; /* Ajuste l'image à la largeur du conteneur */
    height: auto; /* Maintient les proportions */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre pour l'effet de profondeur */
}

/* Conteneur de texte (deuxième) */
.text-container2 {
    flex: 2;
    text-align: left; /* Alignement à gauche pour le texte */
    padding: 50px;
    border-radius: 5px;
}

.text-container2 p {
    font-size: 25px;
    line-height: 1.6;
    margin: 0; /* Enlève la marge par défaut du paragraphe */
}

.text-container2 h1 {
    font-size: 35px;
    line-height: 1.6;
    margin: 0; /* Enlève la marge par défaut du paragraphe */
}

/* Responsivité pour petits écrans */
@media (max-width: 768px) {
    .flex-container, .flex-container2 {
        flex-direction: column; /* Empile les éléments sur les petits écrans */
        text-align: center; /* Centre le texte */
    }

    .image-container1, .image-container2 {
        margin: 0 0 20px 0; /* Réduit l'espace entre les images et le texte */
    }

    .image-container1 img, .image-container2 img {
        width: 100%; /* L'image prend toute la largeur du conteneur */
        height: auto; /* Maintient les proportions */
    }

    .text-container1, .text-container2 {
        padding: 20px; /* Réduit l'espacement autour du texte */
    }

    .text-container1 h1, .text-container2 h1 {
        font-size: 28px; /* Réduit la taille du titre */
    }

    .text-container1 p, .text-container2 p {
        font-size: 20px; /* Réduit la taille du texte */
    }
}

/* Responsivité pour très petits écrans */
@media (max-width: 480px) {
    .produitsfini h2 {
        font-size: 40px; /* Réduit la taille du titre principal */
    }

    .text-container1 h1, .text-container2 h1 {
        font-size: 25px; /* Réduit la taille du titre */
    }

    .text-container1 p, .text-container2 p {
        font-size: 18px; /* Réduit la taille du texte */
    }
}

 
/*********************************************sapelii Structure et Panneaux*********************************************************/


/* Style de base */


#StructureetPanneaux {
    background-image: url('image/porte.jpg'); /* Chemin de l'image */
    background-size: cover; /* Ajuste l'image pour couvrir tout le conteneur */
    background-position: center; /* Centre l'image */
    padding:  300px; /* Espacement autour du contenu */
    border-radius: 8px; /* Ajoute des coins arrondis */
    color: white; /* Assure que le texte soit visible sur un fond potentiellement sombre */
 
}




/* Responsivité pour les tablettes */
@media (max-width: 768px) {
    #StructureetPanneaux{
        padding: 200px; /* Réduit le padding sur les tablettes pour éviter un excédent d'espace */
    }
}

/* Responsivité pour les mobiles */
@media (max-width: 480px) {
    #StructureetPanneaux {
        padding: 90px; /* Réduit encore le padding sur les petits écrans */
    }
}


/* Section de séparation */
.separation {
    flex-basis: 50%;
    background-color: rgb(65, 53, 28); /* Ajoute un fond semi-transparent pour rendre le texte lisible */
    padding: 40px;
    border-radius: 10px; /* Arrondit les coins du conteneur */
    width: 50%; /* Définit une largeur maximale pour le conteneur */
    height: auto;
    margin: 0 auto; /* Centre le conteneur */
    box-sizing: border-box;
}

/* Style des paragraphes dans la section séparation */
.separation p {
    color: #f0f0f0;
    font-size: 20px;
    padding-left: 0px;
    text-align: center;
    line-height: 2;
    margin: 0 10px; /* Ajoute un espace entre les éléments */
}

/* Style des titres dans la section séparation */
.separation h1 {
    color: #fdf9f9;
    line-height: 2;
    font-size: 40px;
    padding-left: 0px;
    text-align: center;
    margin: 0 10px; /* Ajoute un espace entre les éléments */
}

/* Responsivité pour les tablettes (écrans <= 768px) */
@media (max-width: 768px) {
    #introduction {
        padding: 300px 20px; /* Réduit le padding pour les écrans plus petits */
        margin-top: 50px; /* Réduit la marge supérieure */
    }

    .separation {
        width: 80%; /* Réduit la largeur à 80% du conteneur pour les tablettes */
        padding: 60px; /* Réduit le padding pour plus de lisibilité */
        margin-top: 30px; /* Espace au-dessus de la section */
    }

    .separation h1 {
        font-size: 30px; /* Réduit la taille du titre pour les tablettes */
    }

    .separation p {
        font-size: 16px; /* Réduit la taille du texte */
    }
}

/* Responsivité pour les écrans mobiles (écrans <= 480px) */
@media (max-width: 480px) {
    #introduction {
        padding: 20px 10px; /* Réduit encore le padding pour les petits écrans */
        margin-top: 30px; /* Réduit la marge supérieure */
    }

    .separation {
        width: 90%; /* Réduit la largeur à 90% du conteneur pour les mobiles */
        padding: 40px; /* Réduit le padding pour un meilleur ajustement */
        margin-top: 20px; /* Espace au-dessus de la section */
    }

    .separation h1 {
        font-size: 24px; /* Réduit la taille du titre pour les petits écrans */
    }

    .separation p {
        font-size: 14px; /* Réduit la taille du texte pour une meilleure lisibilité */
    }
}





/****/



.texteimag {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

/* Style pour l'image */
.texteimag img {
    width: 100%; /* L'image occupe toute la largeur disponible dans son conteneur */
    max-width: 500px; /* Limite la largeur maximale de l'image */
    height: auto; /* Maintient les proportions de l'image */
    margin-bottom: 20px; /* Ajoute de l'espace sous l'image */
}

    
/* Style pour .texte-droite */
.texte-droite {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    margin-left: 20px;
}
.texte-droite p{
    font-size: 18px;
}
/****/

@media (max-width: 768px) {
    .texteimag {
        flex-direction: column; /* Aligne les éléments verticalement */
        padding: 10px; /* Réduit le padding pour un meilleur ajustement */
    }

    .texteimag img {
        max-width: 100%; /* L'image occupe toute la largeur disponible */
    }

    .texte-droite {
        margin-left: 0; /* Enlève la marge à gauche de la section texte */
        padding: 15px;
    }
}

/* Responsivité pour les mobiles (écrans <= 480px) */
@media (max-width: 480px) {
    .texteimag {
        padding: 5px; /* Réduit encore le padding pour un affichage optimal sur les petits écrans */
    }

    .texteimag img {
        max-width: 100%; /* L'image occupe toute la largeur disponible */
    }

    .texte-droite {
        margin-left: 0; /* Aucune marge à gauche */
        padding: 10px; /* Réduit le padding pour s'ajuster à l'écran */
    }

    .asterisques {
        padding-left: 20px; /* Réduit l'indentation de la liste pour l'adapter aux petits écrans */
       
    }
}

/**



 .sss li{  
margin: 10px;
text-align: left;
font-size: 12px;
 }

*/


/* Section de contenu */
#definierpann {
    background-color: #f9f9f9;      /* Couleur de fond légère */
    padding: 20px;                 /* Espace interne autour du contenu */
    border: 1px solid #ddd;        /* Bordure légère */
    border-radius: 8px;            /* Coins arrondis */
    max-width: 800px;              /* Limite la largeur de la section */
    margin: 20px auto;             /* Centre la section horizontalement */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre douce */
}

/* Liste avec puces */
.defpa ul {
    list-style-type: disc;         /* Liste avec puces classiques */
    padding-left: 40px;            /* Ajoute un retrait pour les puces */
    margin: 0;                     /* Supprime les marges */
}

/* Élément de liste */
.defpa ul li {
    margin-bottom: 15px;           /* Espace entre chaque ligne */
    font-size: 18px;               /* Taille de la police */
    color: #333;                   /* Couleur du texte */
    line-height: 1.6;              /* Espacement entre les lignes */
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase; /* Texte en majuscules */
}

/* Style pour les éléments en gras */
.defpa ul li strong {
    color: #030608;                /* Couleur du texte en gras */
    font-weight: 600;              /* Accentue l'épaisseur du texte */
}

/* Responsive pour les écrans jusqu'à 768px (tablettes) */
@media (max-width: 768px) {
    #definierpann {
        padding: 15px; /* Réduit l'espace interne */
        max-width: 90%; /* Largeur max de la section réduite */
    }

    .defpa ul li {
        font-size: 16px; /* Réduit la taille de la police sur tablettes */
    }
}

/* Responsive pour les écrans jusqu'à 480px (smartphones) */
@media (max-width: 480px) {
    #definierpann {
        padding: 10px; /* Réduit l'espace interne */
        max-width: 95%; /* Largeur max de la section réduite davantage */
    }

    .defpa ul li {
        font-size: 14px; /* Réduit encore la taille de la police */
        margin-bottom: 10px; /* Réduit l'espace entre les lignes */
    }
}

.sss u {

    color: #0a0909;

    font-size: 40px;
    padding-left: 0px;
   /* text-align: center;*/
       margin: 0 10px; /* Ajoute un espace entre les éléments */
    }



.sss p{
    font-size: 30px;
    /*padding-left: 0px;*/
   text-align: center;
    /*margin: 0 10px; */
    margin-bottom: 20px;
}


.sss ul{

    font-size: 30px;
    padding-left: 0px;
  /* text-align:center;*/
       margin: 0 10px; 
       
    
}
.sss a{
    flex-basis: 25%;
    min-width: 200px;
    padding: 15px;
    transition: transform 0.5s;
    margin: 20PX;
}

.code img {

    width: 100px; /* Ajustez la largeur selon vos besoins */
    height: 100px; /* Maintient les proportions de l'image */
    margin-left: 1800px;
    padding: 5px; /* Padding ajusté pour l'espacement autour de l'image */


}

@media (max-width: 768px) {
    #StructureetPanneaux {
        padding: 300px; /* Réduit l'espace autour du contenu pour les écrans plus petits */
    }

    .separation {
        padding: 50px; /* Réduit l'espacement */
        max-width: 100%; /* Adapte la largeur au conteneur parent */
    }

    .texteimag img {
        width: 80%; /* Ajuste la taille de l'image pour être plus adaptable */
        height: auto; /* Maintient les proportions */
    }

    .texte-droite p {
        font-size: 12px; /* Réduit la taille du texte sur petits écrans */
        padding: 20px; /* Réduit l'espacement */
    }

    #definierpann {
        padding: 15px; /* Réduit l'espacement interne */
        max-width: 100%; /* Rendre la section responsive */
    
    }

    .sss p {
        font-size: 12px; /* Réduit la taille de police */
    }

    .sss ul {
        font-size: 12px; /* Réduit la taille des éléments de liste */
    }

    .sss a {
        flex-basis: 100%; /* Lien occupe toute la largeur sur petits écrans */
        margin: 10px 0; /* Espacement vertical */
    }

    .code img {
        width: 50px; /* Réduit la taille de l'image */
        height: 50px;
        margin-left: 0; /* Réinitialise le marge de l'image */
    }
}

@media (max-width: 480px) {
    .separation h1 {
        font-size:20px; /* Réduit la taille du titre */
    }

    .texte-droite p {
        font-size: 18px; /* Réduit encore la taille de texte */
    }

    .texte-droite h2 {
        font-size: 1em; /* Taille ajustée pour le titre */
    }

    .sss p {
        font-size: 12px; /* Réduit la taille de texte */
    }
}

/*****/
/* Styles de base pour les paragraphes dans .defMENUISERIE */
/* Formater le texte pour une meilleure lisibilité sur les petits écrans */
.defMENUISERIE p {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

/* Liste responsive */
.asterisques {
    list-style-type: disc;
    padding-left: 40px;
    margin-top: 0;
}

/* Élément de liste : ajuste le texte pour la lisibilité */
.asterisques li {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}

/* Responsive pour les écrans jusqu'à 768px (tablettes) */
@media (max-width: 768px) {
    .defMENUISERIE p {
        padding: 15px; /* Réduit l'espacement intérieur */
        max-width: 100%; /* Le paragraphe occupe toute la largeur de l'écran */
        font-size: 16px; /* Diminution de la taille de la police */
    }

    .asterisques {
        padding-left: 30px; /* Réduit l'espacement avant les puces */
    }

    .asterisques li {
        font-size: 16px; /* Réduit la taille de la police pour les éléments de la liste */
    }
}

/* Responsive pour les écrans jusqu'à 480px (smartphones) */
@media (max-width: 480px) {
    .defMENUISERIE p {
        padding: 10px; /* Réduit encore l'espacement intérieur */
        font-size: 14px; /* Diminution de la taille de la police */
    }

    .asterisques {
        padding-left: 20px; /* Réduit encore l'espacement avant les puces */
    }

    .asterisques li {
        font-size: 14px; /* Réduit la taille de la police pour les éléments de la liste */
    }
}



   /**************Menuisereamenag***************/
   #Meuiserieamenag {
    background-image: url('image/interieur2.jpg'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir tout le conteneur */
    background-position: center; /* Centre l'image */
    padding: 300px;
    border-radius: 8px; /* Ajoute des coins arrondis */
    color: white; /* Assure que le texte soit visible sur un fond potentiellement sombre */
   
}

/* Responsivité pour les tablettes */
@media (max-width: 768px) {
    #Meuiserieamenag {
        padding: 200px; /* Réduit le padding sur les tablettes pour éviter un excédent d'espace */
    }
}

/* Responsivité pour les mobiles */
@media (max-width: 480px) {
    #Meuiserieamenag {
        padding: 90px; /* Réduit encore le padding sur les petits écrans */
    }
}

  /****************************************Consnavale***********************/
  #Consnavale {
    background-image: url('image/naval25.jpg'); /* Remplacez par le chemin de votre image */
    background-size: cover;                    /* L'image couvre tout le conteneur */
    background-position: center;               /* Centre l'image */
    background-repeat: no-repeat;              /* Empêche la répétition de l'image */
    padding: 20% 10%;                          /* Utilisation d'unités relatives pour une meilleure adaptation */
    color: white;                              /* Texte en blanc pour la lisibilité */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7); /* Ombre sur le texte pour le contraste */
    max-width: 100%;                           /* La section occupe toute la largeur disponible */
    border-radius: 8px;                        /* Coins arrondis pour un design moderne */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombre douce autour de la section */
    margin: 20px auto;                         /* Centrer la section horizontalement */
}

/* Styles responsives pour les écrans moyens (tablettes, <= 768px) */
@media (max-width: 768px) {
    #Consnavale {
        padding: 15% 8%;                      /* Ajuste le padding pour les tablettes */
        width: 90%;                           /* Réduit la largeur pour éviter les débordements */
        font-size: 16px;                      /* Taille de texte adaptée pour les tablettes */
    }
}

/* Styles responsives pour les grands écrans (ordinateurs, >= 1024px) */
@media (min-width: 1024px) {
    #Consnavale {
        padding: 10% 5%;                      /* Réduction du padding sur les grands écrans */
        border-radius: 12px;                  /* Coins plus arrondis pour un design élégant */
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); /* Ombre légèrement plus prononcée */
        width: 80%;                           /* Largeur ajustée pour un affichage centré et équilibré */
    }
}

/* Styles responsives pour les petits écrans (<= 480px) */
@media (max-width: 480px) {
    #Consnavale {
        padding: 90% 5%;                      /* Réduction du padding pour économiser de l'espace */
        text-align: center;                   /* Centre le texte pour une meilleure lisibilité */
        border-radius: 5px;                   /* Coins légèrement arrondis pour un design subtil */
        font-size: 14px;                      /* Taille de texte réduite pour s'adapter à l'écran */
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); /* Ombre plus légère pour éviter un effet encombrant */
        width: 90%;                           /* Largeur ajustée pour éviter les débordements */
    }
}



    /********************definir *******************************/
    #definiersappli {
        margin-top: 0px;
        background: radial-gradient(#f0f7f1, #ebf5f0);
        padding: 150px 200px;
        text-align: left;
    }
    
    /* Responsivité pour les tablettes */
    @media (max-width: 768px) {
        #definiersappli {
            padding: 100px 150px; /* Réduit le padding pour les tablettes */
        }
    
        .def ul {
            font-size: 1.5em; /* Ajuste la taille de la police pour les tablettes */
            padding-left: 50px; /* Réduit le padding à gauche */
            padding-right: 50px; /* Réduit le padding à droite */
        }
    }
    
    /* Responsivité pour les petits écrans (mobiles) */
    @media (max-width: 480px) {
        #definiersappli {
            padding: 80px 50px; /* Réduit encore le padding pour les mobiles */
        }
    
        .def ul {
            font-size: 1.2em; /* Réduit la taille de la police sur les mobiles */
            padding-left: 20px; /* Réduit encore le padding à gauche */
            padding-right: 20px; /* Réduit encore le padding à droite */
        }
    }
    
/******************************retour*********************************/
/* Styles de base pour le conteneur "retour" */
.retour {
    width: 100%; /* Utilise toute la largeur disponible */
    overflow: hidden; /* Évite les débordements en cas de contenu trop large */
    margin-top: 0px;
    background: radial-gradient(#b1ad9e, #ebf5f0);
    padding: 150px 200px;
    text-align: left;
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

/* Sections (1, 2, 3) */
.section1, .section2, .section3 {
    width: 32%; /* Chaque section prend environ un tiers de la largeur du conteneur */
    margin-right: 0%; /* Espace entre les sections */
    float: left; /* Aligne les sections côte à côte */
    padding: 40px;
    background-color: #ABDC68;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    text-align: center;
}

/* Section spécifique */
.section1, .section2, .section3 {
    background-color: #98C45C;
}


/* Responsivité pour les tablettes (écrans <= 768px) */
@media (max-width: 768px) {
    .section1, .section2, .section3 {
        width: 48%; /* Chaque section prend environ la moitié de la largeur du conteneur */
        margin-right: 2%; /* Un petit espace entre les sections */
    }

    .section3 {
        margin-right: 0; /* Retirer l'espace à droite de la dernière section */
    }

    .retour {
        padding: 70px 50px; /* Réduit le padding sur les tablettes pour plus de lisibilité */
    }
}

/* Responsivité pour les écrans mobiles (écrans <= 480px) */
@media (max-width: 480px) {
    .section1, .section2, .section3 {
        width: 100%; /* Chaque section prend toute la largeur du conteneur */
        margin-right: 0; /* Pas d'espace entre les sections */
        margin-bottom: 20px; /* Un petit espace entre les sections */
    }

    .retour {
        padding: 60px 20px; /* Réduit encore le padding pour les petits écrans */
    }
}

/* Titres des sections */
.section1 h2, .section2 h2, .section3 h2 {
    color: #f3eaea;
    font-size: 18px;
    padding-left: 0px;
    margin: 0 10px; /* Ajoute un espace entre les éléments */
    width: 100%;
}

/* Ajustement pour la section fixe */
.fixed-size {
    width: 32%; /* Largeur fixe de la section */
    height: 70px; /* Hauteur fixe de la section */
    overflow: hidden; /* Cache tout contenu qui dépasse */
    padding: 20px; /* Espace intérieur */
    border: 1px solid #ddd; /* Bordure (optionnel) */
    text-align: center; /* Centrage du texte */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la taille totale */
    float: left; /* Aligne les sections côte à côte */
   
}

/* Boîte autour des titres */
.boxed-title {
    border: 2px solid #ece8e8; /* Bordure autour du titre */
    padding: 5px; /* Espace entre le texte et la bordure */
    background-color: #98C45C; /* Fond pour le titre */
    display: inline-block; /* Ajuste la taille du cadre à celle du contenu */
    box-shadow: 2px 2px 8px rgba(233, 229, 229, 0.911); /* Ombre pour le relief */
    text-decoration: none; /* Supprime la ligne sous le texte */
    color: inherit; /* Conserve la couleur du texte */
  

}
/* Responsive pour les écrans de moins de 480px (smartphones) */
@media (max-width: 480px) {
    /* Titres des sections */
    .section1 h2, .section2 h2, .section3 h2 {
        font-size: 14px; /* Réduire davantage la taille de la police */
        margin: 0; /* Supprimer les marges inutiles */
    }

    /* Ajustement pour la section fixe */
    .fixed-size {
        padding: 5px; /* Réduire encore plus le padding */
        margin-bottom: 8px; /* Espacement réduit entre les sections */
        border: none; /* Supprimer la bordure pour un design minimaliste */
        box-shadow: none; /* Supprimer l’ombre */
    }

    /* Boîte autour des titres */
    .boxed-title {
        font-size: 12px; /* Police plus petite pour les très petits écrans */
        padding: 8px; /* Ajustement du padding */
        text-align: center; /* Conserver le centrage */
        background-color: #82A94C; /* Ajuster légèrement la couleur de fond pour plus de contraste */
    }
}

/************************************/
/* Pour l'image dans la colonne .col-4 */
.col-4 img {
    width: 100%; /* Ajuste l'image à la largeur de la colonne */
    height: 400px; /* Conserve les proportions de l'image */
}

/* ************* Section Intro Okoumé ************** */
#intro-okume {
    background: radial-gradient(#eedcc0, #c2ab80);
    padding: 20px 0;
}

/* Section Okoumé */
.okume-section {
    flex-basis: 50%;
    background-color: rgba(155, 133, 84, 0.562); /* Fond semi-transparent */
    padding: 50px; /* Espace autour du contenu */
    border-radius: 10px; /* Coins arrondis */
    max-width: 900px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
}

/* Titre de la section Okoumé */
.okume-section h1 {
    color: #382d08;
    line-height: 1.6;
    font-size: 3em;
    text-align: center;
}

/* Paragraphe de la section Okoumé */
.okume-section p {
    color: #0a0909;
    line-height: 1.6;
    font-size: 2em;
    padding-left: 50px;
}

/* Section okoumé avec fond spécifique */
#okum {
    background-color: #8b4513;
}

/* Responsivité pour les tablettes */
@media (max-width: 768px) {
    .okume-section {
        flex-basis: 100%; /* Les sections prennent toute la largeur sur les tablettes */
        padding: 30px; /* Réduit l'espace intérieur */
    }

    .okume-section h1 {
        font-size: 2.5em; /* Réduit la taille du titre */
    }

    .okume-section p {
        font-size: 1.5em; /* Réduit la taille du texte */
        padding-left: 20px; /* Moins de marge à gauche */
    }

    /* Ajustement de l'image */
    .col-4 img {
        height: 300px; /* Moins de hauteur pour les images sur les tablettes */
    }
}

/* Responsivité pour les écrans mobiles */
@media (max-width: 480px) {
    .okume-section {
        padding: 20px; /* Réduit encore le padding */
    }

    .okume-section h1 {
        font-size: 2em; /* Réduit la taille du titre pour les petits écrans */
    }

    .okume-section p {
        font-size: 1.2em; /* Réduit encore la taille du texte */
        padding-left: 10px; /* Moins de padding à gauche */
    }

    /* Ajustement de l'image */
    .col-4 img {
        height: 200px; /* Hauteur réduite sur mobile */
    }
}
/**/
/* Section #definirokoume */
#definirokoume {
    padding: 100px;
    border-radius: 8px; /* Coins arrondis */
    color: white; /* Texte visible sur fond sombre */
}

/* Titre de la section .decripokoum */
.decripokoum h1 {
    color: #85831b;
    line-height: 1.6;
    font-size: 3em;
    text-align: center;
}

/* Sous-titre de la section .decripokoum */
.decripokoum h2 {
    color: #1a1917;
    line-height: 1.6;
    font-size: 2em;
}

/* Paragraphe de la section .decripokoum */
.decripokoum p {
    color: #494946;
    line-height: 2;
    font-size: 2em;
}

/* Styles des images dans .diverses */
.diverses img {
    max-width: 100%; /* Empêche les images de dépasser la largeur du conteneur */
    height: 300px; /* Hauteur fixée pour les images */
    width: 300px;
    object-fit: cover; /* Remplit le conteneur sans déformation */
}

/* Section .diverses */
.diverses {
    text-align: center; /* Centre le texte sous chaque image */
    margin: 60px; /* Espace entre les éléments */
    font-size: 1.5em;
}

/* Paragraphe dans .diverses */
.diverses p {
    color: #0a0a0a;
    line-height: 1.6;
    font-size: 1.5em;
    margin: 30px;
}

/* Responsivité pour les tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #definirokoume {
        padding: 60px; /* Réduit le padding pour les écrans plus petits */
    }

    .decripokoum h1 {
        font-size: 2.5em; /* Réduit la taille du titre */
    }

    .decripokoum h2 {
        font-size: 1.8em; /* Réduit la taille des sous-titres */
    }

    .decripokoum p {
        font-size: 1.8em; /* Réduit la taille du texte */
    }

    /* Ajuste les images */
    .diverses img {
        width: 250px; /* Réduit la largeur des images */
        height: 250px; /* Réduit la hauteur des images */
    }

    .diverses {
        margin: 30px; /* Réduit l'espace entre les éléments */
        font-size: 1.2em; /* Réduit la taille de la police */
    }

    .diverses p {
        font-size: 1.2em; /* Réduit la taille du texte sous les images */
        margin: 15px; /* Réduit la marge autour du texte */
    }
}

/* Responsivité pour les écrans mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #definirokoume {
        padding: 40px; /* Réduit le padding pour les petits écrans */
    }

    .decripokoum h1 {
        font-size: 2em; /* Réduit encore la taille du titre */
    }

    .decripokoum h2 {
        font-size: 1.5em; /* Réduit encore la taille des sous-titres */
    }

    .decripokoum p {
        font-size: 1.5em; /* Réduit la taille du texte */
    }

    /* Ajuste les images */
    .diverses img {
        width: 200px; /* Réduit la largeur des images */
        height: 200px; /* Réduit la hauteur des images */
    }

    .diverses {
        margin: 15px; /* Réduit l'espace entre les éléments */
        font-size: 1em; /* Réduit la taille de la police */
    }

    .diverses p {
        font-size: 1em; /* Réduit la taille du texte sous les images */
        margin: 10px; /* Réduit la marge autour du texte */
    }
}

/*******************PAGE DIVERSES **********************/
/* Section #DIVERSES */
/* Section #DIVERSES */
#DIVERSES {
    background-image: url('image/drive.jpg'); /* Remplacez par le chemin de votre image */
    padding: 200px;
    border-radius: 8px; /* Coins arrondis */
    color: white; /* Texte visible sur fond sombre */
    background-size: contain; /* Assure que l'image est entièrement visible et ajustée */
    background-position: center; /* Centre l'image */
    width: 100%;
    height: 400px; /* Définir une hauteur spécifique pour la section */
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur */
    margin-top: 100px;
}

/* Responsivité pour les tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #DIVERSES {
        padding: 60px; /* Réduit le padding pour les tablettes */
        background-size: contain; /* L'image reste visible et ajustée */
        background-position: center; /* L'image reste centrée */
        height: 10px; /* Réduit la hauteur sur les tablettes */
    }
}

/* Responsivité pour les écrans mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #DIVERSES {
        padding: 30px; /* Réduit le padding pour les petits écrans */
        background-size: contain; /* L'image reste visible et ajustée */
        background-position: center; /* L'image reste centrée */
        height: 100px; /* Réduit la hauteur pour les mobiles */
    }
}

 /*******************************espace client **********************************/

/* Section #espace */
#espace {
    /*min-height: 600px;*/
    width: 100%; /* Assure que la section prend toute la largeur */
   /* background-image: url('/image/espacec.png'); /* Chemin de l'image */
    background-size: cover; /* L'image couvrira toute la section sans se répéter */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image pour un meilleur alignement */
}
.espa h1 {
    text-align: center;
    font-size: 30PX;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
 
    .espa h1 {
        font-size: 3em; /* Réduit la taille de la police pour les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #espace {
        /*min-height: 300px; /* Réduit la hauteur pour les petits écrans */
        width: 100%;
    }
    .espa h1 {
        font-size: 2.5em; /* Réduit la taille de la police pour les mobiles */
    
    }
}

/* Styles de base pour le formulaire */
#login-section {
    background: #c7d1bd;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

#to {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#login-form input {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.password-container {
    display: flex;
    align-items: center;
}

.password-container input {
    width: 90%;
}

.toggle-password {
    cursor: pointer;
    font-size: 20px;
    margin-left: 10px;
}

.forgot-password {
    text-align: center;
}

button {
    padding: 10px;
    font-size: 16px;
    background-color: #98C45C;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.create {
    text-align: center;
    margin-top: 20px;
}

.create a {
    text-decoration: none;
    color: #98C45C;
    font-weight: bold;
}

/* Responsive pour les petits écrans (moins de 768px) */
@media (max-width: 768px) {
    #login-section {
        padding: 20px;
    }

    #to {
        padding: 15px;
        width: 100%;
        max-width: none; /* Utilise toute la largeur disponible */
    }

    #login-form input,
    button {
        font-size: 14px;
    }

    .password-container {
        flex-direction: column;
    }

    .toggle-password {
        margin-top: 10px;
    }
}

/* Responsive pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
    #login-section {
        padding: 10px;
    }

    #to {
        padding: 10px;
    }

    #login-form input,
    button {
        font-size: 12px;
    }
    
    .forgot-password a,
    .create a {
        font-size: 14px;
    }
}

 /**************************creation compte ***********************/
 /* Styles généraux */
/* Section #COMMPTE */
/* Conteneur principal */
/* Conteneur principal */
#COMMPTE {
    background-image: url('image/convc.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 70vh; /* Occupe toute la hauteur de la fenêtre */
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
  }
  
  /* Section formulaire */
  #create-account-section {
    width: 90%; /* Responsive */
    max-width: 800px; /* Limite maximale de largeur */
    padding: 20px;
    background-color: white; /* Couleur de fond blanc */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Ombre subtile */
    margin: auto; /* Centre horizontalement et verticalement */
  }
  
  /* Titres */
  #create-account-section h1, #create-account-section h2 {
    color: #05581a;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    font-size: 30px;
  }
  
  /* Texte */
  #create-account-section p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #555;
    font-size: 1rem;
  }
  
  /* Formulaire */
  #create-account-section form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  /* Champs d'entrée */
  #create-account-section input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  /* Bouton */
  #create-account-section button {
    background-color: #63a85a;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
  }
  
  #create-account-section button:hover {
    background-color: #4b7f47;
  }
  
  /* Cases à cocher */
  .checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: #333;
  }
  
  /* Responsivité */
  @media (max-width: 768px) {
    #COMMPTE {
      padding: 80px 15px;
      height: auto;
    }
  
    #create-account-section {
      padding: 15px;
    }
  
    #create-account-section h1, #create-account-section h2 {
      font-size: 1.5rem;
    }
  
    #create-account-section p {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 480px) {
    #COMMPTE {
      padding: 50px 10px;
    }
  
    #create-account-section {
      padding: 10px;
    }
  
    #create-account-section h1, #create-account-section h2 {
      font-size: 1.2rem;
    }
  
    #create-account-section p {
      font-size: 0.8rem;
    }
  
    .checkbox-group {
      font-size: 0.9rem;
    }
  
    #create-account-section button {
      padding: 12px;
      font-size: 0.9rem;
    }
  }
  
/************Mot de passe oublié********************/
/* Style de la section de mot de passe oublié */
#forgot-password-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    background-color: #fff;
    padding: 20px 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: auto;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-section {
        padding: 15px 8px; /* Réduit le padding pour les tablettes */
        max-width: 400px; /* Réduit la largeur pour les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-section {
        padding: 10px 5px; /* Réduit encore le padding pour les mobiles */
        max-width: 350px; /* Réduit la largeur pour les petits écrans */
    }
}

/* Style du titre */
#forgot-password-section h1 {
    margin-bottom: 16px;
    font-size: 24px;
    color: #333;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-section h1 {
        font-size: 22px; /* Réduit la taille de la police pour les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-section h1 {
        font-size: 20px; /* Réduit encore la taille de la police pour les mobiles */
    }
}

/* Style du paragraphe d'instructions */
#forgot-password-section p {
    margin-bottom: 24px;
    font-size: 16px;
    color: #666;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-section p {
        font-size: 14px; /* Réduit la taille de la police sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-section p {
        font-size: 12px; /* Réduit encore la taille de la police sur les mobiles */
    }
}

/* Style du formulaire */
#forgot-password-form {
    display: flex;
    flex-direction: column;
    width: 90%;
}

/* Style des labels */
#forgot-password-form label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-form label {
        font-size: 14px; /* Réduit la taille de la police des labels sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-form label {
        font-size: 12px; /* Réduit encore la taille de la police des labels sur les mobiles */
    }
}

/* Style des champs de saisie */
#forgot-password-form input[type="email"] {
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-form input[type="email"] {
        padding: 8px; /* Réduit le padding sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-form input[type="email"] {
        padding: 6px; /* Réduit encore le padding sur les mobiles */
    }
}

/* Style du bouton de soumission */
#forgot-password-form button {
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #63a85a;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-form button {
        padding: 10px; /* Réduit le padding pour les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-form button {
        padding: 8px; /* Réduit encore le padding pour les mobiles */
    }
}

#forgot-password-form button:hover {
    background-color: #4b8c4f;
}

/* Style du lien de retour à la connexion */
#forgot-password-section a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #forgot-password-section a {
        font-size: 14px; /* Réduit la taille du texte pour le lien sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #forgot-password-section a {
        font-size: 12px; /* Réduit encore la taille du texte pour le lien sur les mobiles */
    }
}

#forgot-password-section a:hover {
    text-decoration: underline;
}


/***************documents**************/
#documents-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 50vh; /* Hauteur minimale */
    background-color: #f9f9f9; /* Couleur de fond plus neutre et moderne */
    padding: 30px; /* Plus d'espace autour du contenu */
    border-radius: 12px; /* Coins plus arrondis pour un aspect plus doux */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre plus subtile mais plus marquée */
    width: 100%;
    max-width: 1000px; /* Largeur maximale pour maintenir l'équilibre */
    margin: 40px auto; /* Marge plus grande pour centrer et espacer la section */
    height: auto;
    background: linear-gradient(135deg, #ffffff 0%, #f1f1f1 100%); /* Dégradé léger pour plus de profondeur */
}

/* Style du titre */
#documents-section h1 {
    font-size: 32px; /* Taille de texte grande et professionnelle */
    color: #333; /* Couleur sombre pour un bon contraste */
    margin-bottom: 30px; /* Espace conséquent sous le titre pour aérer la section */
    font-weight: 600; /* Poids de police plus élevé pour un aspect plus formel */
    text-align: center; /* Centré pour plus d'équilibre */
    margin: 50px;
}

/* Style du paragraphe */
#documents-section p {
    font-size: 18px; /* Taille plus grande pour un texte lisible et professionnel */
    color: #555; /* Couleur plus douce pour le texte secondaire */
    margin-bottom: 25px; /* Espacement pour aérer le texte */
    line-height: 1.7; /* Espacement entre les lignes pour plus de lisibilité */
    text-align: center;
}

/* Liste des documents */
.document-list {
    list-style-type: none; /* Supprime les puces */
    padding: 0;
    width: 100%;
}

/* Style des éléments de la liste */
.document-list li {
    margin-bottom: 15px; /* Espacement entre les éléments */
    width: 100%;
    display: flex;
    justify-content: space-between; /* Ajout d'une flexbox pour aligner les éléments */
    align-items: center;
    font-size: 16px;
    color: #444;
}

/* Liens des documents */
.document-list a {
    color: #007bff; /* Bleu pour les liens, classique et professionnel */
    text-decoration: none;
    font-size: 16px;
    font-weight: 500; /* Poids de police modéré */
    transition: all 0.3s ease-in-out; /* Transition fluide pour une meilleure interaction */
}

/* Style au survol des liens */
.document-list a:hover {
    text-decoration: underline;
    color: #0056b3; /* Bleu plus foncé au survol */
}

/* Responsive Design */
@media (max-width: 768px) {
    #documents-section {
        padding: 20px;
        min-height: 40vh;
    }

    #documents-section h1 {
        font-size: 28px; /* Réduit la taille sur les écrans moyens */
        margin: 100px;
    }

    .document-list a {
        font-size: 14px; /* Taille réduite sur petits écrans */
    }

    .document-list li {
        flex-direction: column; /* Passe à une disposition verticale pour les petits écrans */
        align-items: flex-start; /* Aligne les éléments à gauche */
    }
}

@media (max-width: 480px) {
    #documents-section {
        padding: 15px;
        min-height: 30vh;
    }

    #documents-section h1 {
        font-size: 24px; /* Taille plus petite pour très petits écrans */
    }

    .document-list a {
        font-size: 12px; /* Taille réduite pour encore plus de lisibilité */
    }

    .document-list li {
        flex-direction: column;
    }
}


/***************************samba **************************/
/* Style pour la section #samba */
#samba {
    background-color: #8b4513; /* Couleur de fond */
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #samba {
        background-color: #8b4513; /* Conserver la couleur même sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #samba {
        background-color: #8b4513; /* Conserver la couleur même sur les mobiles */
    }
}

/* Style pour le bouton .learn-more-right */
.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: #c4c56f;
    position: relative;
    float: right; /* Positionné à droite */
    margin-right: 20px;
    transition: background-color 0.3s ease;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    .learn-more-right {
        font-size: 1.2em; /* Réduit la taille de la police pour les tablettes */
        padding: 8px 25px; /* Ajuste le padding sur les tablettes */
        margin-right: 15px; /* Réduit la marge droite sur les tablettes */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    .learn-more-right {
        font-size: 1em; /* Réduit la taille de la police pour les mobiles */
        padding: 6px 20px; /* Ajuste encore le padding sur les mobiles */
        margin-right: 10px; /* Réduit la marge droite sur les mobiles */
    }
}

/* Style au survol du bouton */
.learn-more-right:hover {
    background-color: #0c240b;
    color: #fff;
}

/* Style pour la section #UTILISATIONSAMBA */
#UTILISATIONSAMBA {
    background-color: #e7d4c2; /* Couleur de fond */
    color: #fff;
    padding: 20px;
    width: 1200px;
    height: 600px;
    box-sizing: border-box; /* Correction de box-sizing pour un meilleur contrôle */
    margin-left: 300px;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    #UTILISATIONSAMBA {
        width: 90%; /* Réduit la largeur pour les tablettes */
        margin-left: 0; /* Supprime la marge gauche */
        height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    #UTILISATIONSAMBA {
        width: 100%; /* Prend toute la largeur de l'écran */
        margin-left: 0; /* Supprime la marge gauche */
        padding: 15px; /* Réduit le padding pour les petits écrans */
        height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
    }
}

/* Style pour le titre .UTILISATIONSAMBA h1 */
.UTILISATIONSAMBA h1 {
    color: #555;
    line-height: 1.6;
    font-size: 2em;
    margin: 30px;
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    .UTILISATIONSAMBA h1 {
        font-size: 1.5em; /* Réduit la taille de la police pour les tablettes */
        margin: 20px; /* Réduit la marge autour du titre */
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    .UTILISATIONSAMBA h1 {
        font-size: 1.2em; /* Réduit encore la taille de la police pour les mobiles */
        margin: 15px; /* Réduit la marge autour du titre pour les petits écrans */
    }
}

/* Style pour la section #bahia */
/* Style pour #bahia */
/* Styles globaux */
#bahia {
   /* background-color: #8b4513;*/
    width: 100%;
    height: auto;
    padding: 20px 0;
}

/* Style général pour la présentation */
.presentation {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    font-size: 14px;
    gap: 20px;
    width: 100%;
}

.presentation img {
    width: 500px; /* Taille initiale de l'image */
    height: 500px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

/* Styles pour la zone de texte */
.text-container {
    flex: 1; /* Laisse le texte prendre l'espace disponible */
    padding: 20px;
}

.text-container h2 {
    color: #333;
    margin-top: 0;
    font-size: 24px;
}

.text-container p {
    margin: 10px 0;
    color: #555;
    font-size: 18px;
}

.text-container a {
    display: inline-block;
    margin-top: 10px;
    color: #0b5804;
    font-size: 18px;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border: 1px solid #0b5804;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
}

.text-container a:hover {
    background: #0b5804;
    color: #fff;
}



/* Media query pour les écrans de plus de 768px */
@media (min-width: 768px) {
    .presentation {
        flex-direction: row; /* Les éléments sont disposés en ligne */
        align-items: flex-start; /* Aligne les éléments en haut */
        gap: 30px; /* Augmente l'espace entre les éléments */
        padding: 20px; /* Plus d'espace autour de la section */
        width: 90%; /* Limite la largeur totale de la présentation */
        margin: 0 auto; /* Centre la section sur des écrans larges */

    }

    .presentation img {
        width: 35%; /* Augmente la taille de l'image */
        max-width: 400px; /* Définit une limite pour les images très grandes */
        margin: 0; /* Supprime le margin-auto */
        height: 300px;
    }

    .text-container {
        padding: 30px; /* Plus d'espace pour le texte */
    }

    .text-container h2 {
        font-size: 28px; /* Texte plus grand pour les titres */
    }

    .text-container p {
        font-size: 20px; /* Augmente légèrement la taille du texte */
    }

    .text-container a {
        font-size: 18px; /* Taille plus importante pour les liens */
        padding: 12px 20px; /* Liens plus larges et confortables à cliquer */
    }
}

/* Responsivité pour tablettes (max-width: 768px) */
@media (max-width: 768px) {
    .presentation {
        flex-direction: column; /* Les éléments passent en colonne */
        align-items: center; /* Centrage des éléments */
        padding: 15px;
    }

    .presentation img {
        width: 20%; /* L'image occupe plus d'espace */
    }

    .text-container h2 {
        font-size: 20px; /* Taille réduite du titre */
    }

    .text-container p {
        font-size: 16px; /* Réduction de la police */
    }

    .text-container a {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/* Responsivité pour mobiles (max-width: 480px) */
@media (max-width: 480px) {
    .presentation img {
        width: 40%; /* L'image occupe presque toute la largeur */

    }

    .text-container h2 {
        font-size: 18px;
    }

    .text-container p {
        font-size: 14px;
    }

    .text-container a {
        font-size: 14px;
        padding: 6px 10px;
    }
}


     /**********fraké*************/
/* Style pour les sections avec des images de fond */
#frake, #koto {
    background-color: #8b4513;
   
}

/* Style pour la section #utlitrav */
/* Style de base pour #utlitrav */
#utlitrav {
    background-image: url('image/travaux.jpg'); /* Chemin de l'image */
    background-size: cover; /* L'image couvre tout le conteneur */
    background-position: center; /* Centre l'image */
    padding: 300px; /* Espacement initial */
    border-radius: 8px; /* Coins arrondis */
    color: white; /* Texte blanc pour un bon contraste */
    text-align: center; /* Centre le texte */
    box-sizing: border-box; /* Assure que padding et bordures soient inclus */
    width: 100%; /* Largeur complète */
}

/* Styles pour écrans de plus de 1200px (grands écrans) */
@media (min-width: 1200px) {
    #utlitrav {
        padding: 350px; /* Plus d'espace pour les grands écrans */
        border-radius: 12px; /* Coins plus arrondis */
        font-size: 20px; /* Texte légèrement plus grand */
    }
}

/* Styles pour écrans entre 768px et 1200px (tablettes et petits ordinateurs) */
@media (min-width: 768px) and (max-width: 1199px) {
    #utlitrav {
        padding: 250px; /* Espacement réduit pour s'adapter */
        border-radius: 10px; /* Coins légèrement arrondis */
        background-size: cover; /* L'image continue de couvrir tout le conteneur */
        font-size: 18px; /* Texte adapté pour une bonne lisibilité */
    }
}

/* Styles pour écrans entre 480px et 767px (smartphones horizontaux et tablettes) */
@media (min-width: 480px) and (max-width: 767px) {
    #utlitrav {
        padding: 200px; /* Espacement adapté pour tablettes */
        border-radius: 8px; /* Coins standards */
        font-size: 16px; /* Texte adapté à la taille de l'écran */
        background-size: cover; /* L'image couvre toujours le conteneur */
    }
}

/* Styles pour écrans de moins de 480px (smartphones verticaux) */
@media (max-width: 479px) {
    #utlitrav {
        padding: 150px; /* Espacement réduit pour petits écrans */
        border-radius: 6px; /* Coins légèrement arrondis */
        font-size: 14px; /* Taille de texte réduite pour la lisibilité */
        background-size: cover; /* L'image couvre tout le conteneur */
        background-position: center; /* Centre l'image */
    }
}



/* Style pour la section #amengexterieur */
#amengexterieur {
    background-image: url('image/AménagementextérieurLoisir.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.986);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: background-image 1s ease-in-out; /* Transition douce pour changer d'image*/
    }
    

/* Responsivité pour les écrans jusqu'à 768px */
@media (max-width: 768px) {
    #amengexterieur {
        height: auto; /* Ajuste la hauteur pour les écrans plus petits */
        padding: 150px 20px; /* Réduit le padding */
        background-position: top center; /* Ajuste la position de l'image de fond */
    }
}

/* Responsivité pour les écrans jusqu'à 480px */
@media (max-width: 480px) {
    #amengexterieur {
        height: auto; /* Ajuste la hauteur pour les très petits écrans */
        padding: 100px 10px; /* Réduit encore le padding */
        background-position: top center; /* Positionne l'image de manière optimale pour les petits écrans */
    }
}







/* Style pour la section #presentationyards */
#presentationyards {
    background-image: url('image/wymexp.png');
    background-size: cover;
    background-position: center;
    height: 60vh; /* Hauteur relative de la section */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 100px;
}

#presentationyards {
    background-image: url('image/wymex.png');
    background-size: cover; /* Couvrir toute la section */
    background-position: center center; /* Centrer horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
    height: 60vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 0px;
}

/* Responsive pour les écrans de moins de 768px (tablettes et petits écrans) */
@media (max-width: 768px) {
    #presentationyards {
        height: 50vh; /* Réduire la hauteur pour s'adapter à l'écran */
        padding: 20px;
        width: 100%;
        background-size: contain; /* Utiliser "contain" pour afficher l'image entière */
        background-position: center center; /* Centrer l'image */
        background-repeat: no-repeat; /* Éviter la répétition de l'image */
    }
}

/* Responsive pour les écrans de moins de 480px (smartphones) */
@media (max-width: 480px) {
    #presentationyards {
        height: 40vh; /* Réduire davantage la hauteur pour les petits écrans */
        margin-top: 50px;
        padding: 5px;
        width: 100%;
        background-size: cover; /* Ajuster l'image pour couvrir tout l'espace */
        background-position: center center; /* Centrer l'image */
        background-repeat: no-repeat;
    }
}


/* Style pour les images dans la section .ymx */
.ymx {
    max-width: 1500px;
    margin: 0 auto;
    padding: 50px;
    text-align: center; /* Centrer le contenu dans .ymx */
}

.ymx img {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Utilisation de 100% pour occuper toute la largeur disponible */
    height: auto;
    border-radius: 10px; /* Ajouter des coins arrondis pour un effet moderne */
    transition: transform 0.3s ease; /* Ajouter une animation lors du survol */
}

.ymx img:hover {
    transform: scale(1.05); /* Légère augmentation de la taille au survol pour un effet interactif */
}

/* Responsivité pour les images dans .ymx */
@media (max-width: 768px) {
    @media (max-width: 768px) {
        .ymx img {
            max-width: 700PX; /* Augmenter la taille de l'image pour les petits écrans */
          /*  width: 100%; /* Faire en sorte que l'image occupe 100% de la largeur disponible */
            margin-bottom: 20px; /* Espacement sous l'image pour une meilleure présentation */
        }
    }
}
@media (max-width: 480px) {
    .ymx img {
        max-width: 300px; /* L'image occupe toute la largeur disponible */
        width: 150%; /* Assurez-vous que l'image occupe toute la largeur */
        margin-bottom: 20px; /* Espacement sous l'image */
    }
}

/* Style pour les boutons */
.btn-primary {
    background-color: #ff7300;
    color: white;
    margin-top: 50px;
}

.btn-primary:hover {
    background-color: #2b240d;
}

.btn-secondary {
    background-color: #73d15c;
    color: white;
}

.btn-secondary:hover {
    background-color: #2b240d;
}
.popup {
    position: fixed;                      /* Position fixe pour rester visible même en scrollant */
    top:50%;                             /* Centre verticalement */
   /* right: 20px;                          /* Positionne la popup à 20px de la droite */
   left: 20px;
    transform: translateY(-50%);          /* Ajuste pour centrer verticalement par rapport au milieu de la popup */
    width: 300px;                         /* Largeur de la popup */
    background: rgba(255, 255, 255, 0.9); /* Fond semi-transparent */
    border: 1px solid #ccc;               /* Bordure grise */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce */
    border-radius: 8px;                   /* Coins arrondis */
    display: none;                        /* Cacher par défaut */
    z-index: 1000;                        /* S'assurer que la popup est au-dessus des autres éléments */
}

.popup-content {
    padding: 15px;
    text-align: center;
}

.popup-content p {
    margin-bottom: 15px;
    font-size: 16px;
}

.popup-content a {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    display: inline-block;
}

.popup-content a:hover {
    background-color: #218838;
}

.close-btn {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
}

.close-btn:hover {
    background-color: #c82333;
}

/* Responsivité pour le popup */
@media (max-width: 768px) {
    .popup {
        width: 250px; /* Réduit la largeur du popup pour les écrans plus petits */
    }
}