/* body */

body {
    font-family: 'Noto Sans', sans-serif;
}

/* top-bar */

.top-bar {
    background-color: #f8f9fa; /* Couleur de fond de la barre */
    color: #333; /* Couleur du texte */
}
  
.top-bar a {
    color: #333; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Effet de transition pour le changement de couleur */
}
  
.top-bar a:hover {
    color: #18AB2F; /* Couleur des liens au survol */
}

.top-bar i {
    margin-right: 5px; /* Espacement entre les icônes et le texte */
}

/* petite barre verticale de séparation */

.divider {
    height: 15px; /* Ajustez la hauteur selon vos besoins */
    width: 0.7px; /* Largeur de la barre de démarcation */
    background-color: #ccc; /* Couleur de la barre, ajustez selon le thème de votre site */
    display: inline-block; /* Permet à l'élément de s'aligner avec les liens */
    margin-left: 20px; /* Espacement avant la barre */
    margin-right: 10px; /* Espacement après la barre */
    margin-top:5px;
}

/* header */

.header-container {
    background-color: #fff; /* Couleur de fond du header */
    padding-left: 5%; /* Augmente l'espace à gauche */
    padding-right: 5%; /* Augmente l'espace à droite */
    padding-top: 20px; /* Augmentez selon vos besoins */
    padding-bottom: 20px; /* Augmentez selon vos besoins */
}
  
.logo {
    max-height: 120px; /* Ajustez selon la taille de votre logo */
    margin-left:20px;
}
  
.search-bar {
    position: relative;
    flex-grow: 1;
    max-width: 500px; /* Ajustez la largeur de la barre de recherche */
    margin: 0 20px; /* Ajout d'un peu d'espace autour de la barre de recherche */
}
  
.search-input {
    width: 100%;
    padding: 10px 40px; /* Ajout de padding à gauche pour l'icône */
    border: 2px solid #ccc;
    border-radius: 0; /* Angles droits */
    font-size:16px;
}
  
.search-btn {
    position: absolute;
    left: 2px; /* Position à gauche à l'intérieur de la barre */
    top: 2px;
    padding: 10px;
    border: none;
    background-color: transparent; /* Fond transparent pour intégrer dans la barre */
    color: #333;
    cursor: pointer;
}
  
.btn-custom {
    background-color: #18AB2F; /* Couleur verte */
    border-color: #18AB2F; /* Pour s'assurer que le bord est de la même couleur */
    color: #fff; /* Couleur du texte */
    padding: 10px 10px; /* Ajustez le padding pour augmenter la taille du bouton */
    margin-right:20px;
    transition: background-color 0.3s ease;
    font-size:18px;
}
  
.btn-custom:hover {
    background-color: #159a28; /* Un peu plus foncé au survol */
    border-color: #159a28;
    color: #fff; /* Garde le texte en blanc au survol */
}
  
.search-btn:focus {
    outline: none; /* Supprime l'outline par défaut lors du focus */
    box-shadow: none; /* Supprime l'ombre de la boîte si elle est appliquée */
}

/* Barre de navigation */

.navbar {
  background-color: #f8f9fa; /* Couleur existante */
  padding-top: 10px; /* Augmentez selon vos besoins pour augmenter l'épaisseur */
  padding-bottom: 10px; /* Augmentez selon vos besoins */
}

.navbar-nav {
  align-items: center; /* Centre verticalement les liens et séparateurs */
}

.nav-link {
  color: #333; /* Couleur noire pour les liens */
  transition: color 0.3s ease; /* Animation existante */
  font-size: 20px; /* Augmentez la taille de la police pour de plus grands liens */
}

.nav-link:hover, .nav-link:focus {
  color: #18AB2F; /* Couleur verte au survol */
}

nav.navbar .navbar-brand {
  color: #18AB2F; /* Couleur verte pour 'José Clôtures' */
}

nav.navbar .navbar-brand:hover {
  color: #146c30; /* Une teinte légèrement plus foncée de vert au survol */
}

.nav-divider {
  height: 20px;
  width: 1px;
  background-color: #ccc;
  display: block; /* Change en block pour aligner correctement entre les éléments */
  margin: auto 10px; /* Espacement autour du séparateur */
}

.sticky-top {
  position: -webkit-sticky; /* Pour Safari */
  position: sticky;
  top: 0;
  z-index: 1020; /* S'assure qu'elle reste au-dessus des autres contenus */
}

@media (max-width: 992px) {
  .navbar-nav {
      flex-direction: column;
  }

  .nav-item {
      padding: 0.5rem 0; /* Ajoute de l'espace autour des liens pour un toucher plus facile */
  }
}
/* Index dernière réalisation */

.latest-work {
    padding: 40px 0;
  }
  
  .latest-work img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  .latest-work h2 {
    margin-bottom: 20px;
  }
  
  .latest-work p {
    margin-bottom: 20px;
  }
  
  /* Responsive design adjustments */
  @media (max-width: 768px) {
    .latest-work .row {
      flex-direction: column-reverse;
    }
  
    .latest-work img {
      margin-bottom: 20px;
    }
  }

/* Index cloture */

.fence-section {
    padding: 40px 0;
    background-color: #f8f9fa; /* Couleur de fond identique à la barre de navigation et la top-bar */
  }
  
  .fence-section h2 {
    margin-bottom: 20px;
  }
  
  .fence-section p {
    margin-bottom: 20px;
  }
  
  .fence-section img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* Ajoutez un espace en dessous de l'image pour les écrans plus petits */
  }
  
  @media (max-width: 991px) {
    .fence-section .row {
      flex-direction: column-reverse;
    }
  }

/* Partout */

/* Sections avec fond coloré */
.fence-section, .occultants-section, .gallery-section {
    background-color: #f8f9fa;
  }
  
  /* Sections avec fond blanc */
  .latest-work, .portail-section, .footer {
    background-color: #fff;
  }

/* Portails */

.portail-section {
    padding: 40px 0;
  }
  
  .portail-section h2 {
    margin-bottom: 20px;
  }
  
  .portail-section p {
    margin-bottom: 20px;
  }
  
  .portail-section img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* Espace en dessous de l'image pour les écrans plus petits */
  }
  
  /* Pour les écrans plus petits, l'image sera placée au-dessus de la description */
  @media (max-width: 991px) {
    .portail-section .row {
      flex-direction: column;
    }
  }

/* Occultants */

.occultants-section {
    padding: 40px 0;
  }
  
  .occultants-section h2 {
    margin-bottom: 20px;
  }
  
  .occultants-section p {
    margin-bottom: 20px;
  }
  
  .occultants-section img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* Ajoutez de l'espace sous l'image pour les écrans plus petits */
  }
  
  /* Pour les écrans plus petits, l'image sera placée en dessous de la description */
  @media (max-width: 991px) {
    .occultants-section .row {
      flex-direction: column-reverse;
    }
  
    /* Assurez-vous que l'ordre est correct sur les petits écrans */
    .occultants-section .order-lg-1 {
      order: 1;
    }
  
    .occultants-section .order-lg-2 {
      order: 2;
    }
  }

/* Autres services */

/* Autres services */

.other-services-section {
  padding: 40px 0;
  background-color: #fff; /* Fond blanc pour cette section */
}

.other-services-section h2 {
  margin-bottom: 20px;
}

.other-services-section p {
  margin-bottom: 20px;
}

.others-services-section img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* Ajoutez de l'espace sous l'image pour les écrans plus petits */
}

.autres-item img {
  width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
  height: 350px; /* Définit une hauteur fixe pour toutes les images */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
  display: block; /* Élimine l'espace supplémentaire sous l'image */
  margin-bottom: 0; /* Retire l'espace sous les images */
}

/* Pour les écrans plus petits, l'image sera placée en dessous de la description */
@media (max-width: 991px) {
  .other-services-section .row {
      flex-direction: column-reverse;
  }

  /* Assurez-vous que l'ordre est correct sur les petits écrans */
  .other-services-section .order-lg-1 {
      order: 1;
  }

  .other-services-section .order-lg-2 {
      order: 2;
  }
}


/* Galerie */

.gallery-section {
  padding: 40px 0;
}

.gallery-item {
  padding: 5px; /* Réduit l'espace entre les images */
}

.gallery-item img {
  width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
  height: 200px; /* Définit une hauteur fixe pour toutes les images */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
  display: block; /* Élimine l'espace supplémentaire sous l'image */
  margin-bottom: 0; /* Retire l'espace sous les images */
}

.cloture-item img{
  width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
  height: 350px; /* Définit une hauteur fixe pour toutes les images */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
  display: block; /* Élimine l'espace supplémentaire sous l'image */
  margin-bottom: 0; /* Retire l'espace sous les images */
}

.occultant-item img{
  width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
  height: 350px; /* Définit une hauteur fixe pour toutes les images */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
  display: block; /* Élimine l'espace supplémentaire sous l'image */
  margin-bottom: 0; /* Retire l'espace sous les images */
}

.portail-item img{
  width: 100%; /* Assure que l'image prend toute la largeur de son conteneur */
  height: 350px; /* Définit une hauteur fixe pour toutes les images */
  object-fit: cover; /* Assure que l'image couvre toute la zone sans déformation */
  display: block; /* Élimine l'espace supplémentaire sous l'image */
  margin-bottom: 0; /* Retire l'espace sous les images */
}

.gallery-section .btn {
  margin-top: 20px; /* Ajoute de l'espace au-dessus du bouton */
}

@media (max-width: 767px) {
  .gallery-item {
      padding: 2px; /* Réduit encore plus l'espace entre les images sur les petits écrans */
  }

  .gallery-item img {
      height: 150px; /* Ajuste la hauteur des images pour les petits écrans */
      margin-bottom: 5px; /* Espace réduit sous les images pour les écrans plus petits */
  }
}

/* Footer + bottom-band*/

.footer {
    padding: 10px 0; /* Réduit le padding vertical pour diminuer la hauteur */
    color: #333;
    text-align: center; /* Centrer le contenu si nécessaire */
  }
  
  .footer a, .footer p {
    font-size: 12px; /* Taille de police plus petite pour économiser de l'espace */
    margin-bottom: 5px;
  }
  
  .footer-logo {
    max-height: 120px;
    width: auto;
  }
  
  .footer-logo, .footer-logo-eu {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  .footer-link, .footer-links a {
    display: block;
    color: #333;
    margin-bottom: 10px;
    text-decoration: none;
  }
  
  .footer-link:hover, .footer-links a:hover {
    color: #18AB2F; /* Couleur des liens au survol, identique à "Nos réalisations" */
    text-decoration: none; /* Supprime le soulignement au survol */
  }
  
  .footer-address {
    display: block;
    color: #333;
    margin-bottom: 20px;
    text-decoration: none;
  }
  
  .footer-contacts a {
    display: block;
    color: #333;
    text-decoration: none;
  }
  
  .footer-contacts a i {
    margin-right: 5px;
  }
  
  .footer-email, .footer-email i {
    color: #18AB2F; /* Le vert utilisé dans le reste du site */
  }
  
  .footer-email:hover, .footer-email:hover i {
    color: #159a28; /* Un vert légèrement plus foncé pour le survol */
    text-decoration: none; /* Supprime le soulignement au survol */
  }
  
  .bottom-band {
    background-color: #f8f9fa; /* Vert un peu plus foncé */
    color: #1A1B19; /* Gris plus clair */
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
  }

  .footer a {
    color: #333; /* Couleur initiale des liens */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Effet de transition douce */
  }
  
  .footer a:hover {
    color: #18AB2F; /* Couleur verte au survol */
    text-decoration: none; /* Garde les liens non soulignés au survol */
  }
  
  .footer-contacts a i, .footer-address i {
    color: #18AB2F; /* Le vert utilisé pour l'icône de l'email */
  }

  .footer-address{
    padding-bottom:5px;
  }
  
  .footer-contacts a:hover i, .footer-address:hover i {
    color: #18AB2F; /* Garde l'icône en vert au survol */
    text-decoration: none; /* Supprime le soulignement au survol */
  }

  /* titre de section sur l'index */

  .section-title {
    display: inline-flex;
    width: 100%;
    position: relative;
    align-items: center;
  }
  
  .section-title::after {
    content: '';
    flex-grow: 1;
    height: 1px; /* Épaisseur du trait */
    background-color: #8D8D8D; /* Couleur gris clair */
    margin-left: 15px; /* Espacement entre le texte du titre et le début du trait */
  }

  /* bouton dans le footer */

  .footer .btn-custom {
    background-color: #18AB2F; /* Couleur de fond */
    border-color: #18AB2F; /* Couleur de la bordure */
    color: #fff; /* Couleur du texte */
    padding: 5px 20px; /* Ajustez le padding pour augmenter la taille du bouton */
    margin-right: 5px; /* Espacement à droite */
    text-decoration: none; /* Supprime le soulignement */
    transition: background-color 0.3s ease; /* Transition pour l'effet au survol */
  }
  
  .footer .btn-custom:hover {
    background-color: #159a28; /* Couleur au survol */
    border-color: #159a28; /* Couleur de la bordure au survol */
    color: #fff; /* Garde la couleur du texte en blanc */
  }

  /* bouton dans l'index (différentes sections) */

  /* Supposons que chaque bouton est dans un div pour le centrage */
.button-container {
    text-align: center; /* Centre le bouton */
    margin: 20px 0; /* Espacement autour du bouton pour la séparation */
  }
  
  .btn-section {
    border: 2px solid #18AB2F; /* Bordure gris foncé */
    color: #18AB2F; /* Texte noir */
    background-color: transparent; /* Fond transparent */
    border-radius: 20px; /* Angles arrondis */
    padding: 10px 30px; /* Agrandit le bouton */
    font-size: 18px; /* Taille de police plus grande */
    transition: all 0.3s ease; /* Transition douce pour les interactions */
    display: inline-block; /* Pour permettre le centrage avec text-align */
    text-decoration: none; /* Enlève le soulignement des liens */
  }
  
  .btn-section:hover {
    background-color: #c8e6c9; /* Légère modification au survol, ajustez selon le besoin */
  }

  /* Appliquez des classes supplémentaires ou des sélecteurs spécifiques si nécessaire pour ajuster le fond en fonction de la section */


.close {
    color: #aaa;
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
  }
  
  .login-button {
    background-color: #18AB2F; /* Vert utilisé sur le reste du site */
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .login-button:hover {
    background-color: #159a28;
  }
  
  .signup-link {
    text-align: center;
    margin-top: 20px;
  }
  
  .signup-link a {
    color: #18AB2F;
    text-decoration: none;
  }
  
  .custom-container {
    max-width: 500px;
    margin: 50px auto; /* Centrage vertical et horizontal */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    background-color: #fff;
  }
  
  .inscription-form {
    display: flex;
    flex-direction: column;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    margin-bottom: 5px;
  }
  
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .form-group form-check {
    margin-bottom: 15px;
  }

  .btn-primary {
    background-color: #18AB2F; /* Vert utilisé sur le reste du site */
    border-color: #18AB2F;
  }
  
  .btn-primary:hover {
    background-color: #159a28;
    border-color: #159a28;
  }
  .modal {
    z-index: 3000;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .modal-dialog {
    max-width: 80%;  /* Ajustez selon la taille générale désirée */
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
  }
  
  .modal-lg {
    max-width: 90%;  /* Si vous voulez différencier, autrement utilisez .modal-dialog */
  }
  
  .modal-realisation-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;  /* Ajustez cette valeur si nécessaire */
  }
  
  .modal-dialog.custom-modal-lg {
    max-width: 90%;  /* Ajustez cette valeur selon les besoins */
  }
  .login-modal {
    display: none; /* Caché par défaut, affiché par JavaScript */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permettre le défilement si nécessaire */
    background-color: rgba(0, 0, 0, 0.4); /* Fond sombre semi-transparent */
    z-index: 1050; /* Assurez-vous qu'elle est au-dessus d'autres éléments */
  }
  
  .login-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centrage vertical et horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Largeur adaptée pour la fenêtre de connexion */
    max-width: 450px; /* Maximum width */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce pour la profondeur */
  }
  
  /* Style pour le bouton de fermeture */
  .login-modal .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .login-modal .close:hover,
  .login-modal .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Styles pour le formulaire et les inputs */
  .login-modal input[type="email"],
  .login-modal input[type="password"] {
    width: calc(100% - 20px); /* Full width - padding */
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .login-modal .form-group {
    margin-bottom: 10px;
  }
  
  .login-modal .login-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  .login-modal .login-button:hover {
    opacity: 0.8;
  }
  
  
  
  /* Style pour les dates */
  .date {
    font-size: smaller;
    color: gray;
  }
  
  .image-container {
    margin: 20px 0;
  }
  
  .localisation-page {
    width: 100%; /* Assure que la page prend toute la largeur */
    min-height: 100vh; /* Assure que le contenu couvre au moins toute la hauteur de la fenêtre */
    padding: 0;
    margin: 0;
  }
  
  .localisation-page .container-fluid { /* Utilisez 'container-fluid' pour une largeur complète */
    max-width: 100%; 
    padding-right: 0;
    padding-left: 0;
  }
  
  .localisation-page .description-map-section {
    background-color: #ffffff; /* Fond blanc pour la description et la carte */
    padding: 20px;
  }
  
  .localisation-page .info-photo-section { /* Regroupe les sections des informations de contact et de la photo d'entrée */
    background-color: #f8f9fa; /* Fond gris clair, comme sur l'index */
    padding: 20px;
  }
  
  .localisation-page .section-divider { /* Barre de séparation */
    border: 0;
    height: 1px;
    background-color: #ccc; /* Couleur de la barre de démarcation */
    margin: 0 20px; /* Ajustez selon vos préférences */
  }
  
  .localisation-page .section-title {
    color: #18AB2F; /* Couleur verte utilisée sur le reste du site */
  }

  .localisation-page .contact-info-section h3{
    margin-top: 20px;
    text-align: center; /* Titres centrés */
  }
  
  .localisation-page .contact-info-section{
    text-align: center; /* Texte centré */
  }
  
  .localisation-page iframe {
    border: none; /* Retire la bordure de l'iframe */
    margin-bottom: 20px; /* Espace après l'iframe */
  }
  
  .localisation-page .contact-info-section p{
    margin-left: auto;
    margin-right: auto; /* Centrage des paragraphes et images */
    display: block; /* Nécessaire pour permettre le centrage des images */
  }
  
  /* Padding uniforme pour les colonnes dans les rows */
  .localisation-page .row > div {
    padding: 15px;
  }