/* ---------- NAVBAR VIN ÉLÉGANTE ---------- */


.navbar-custom {
  background-color: #000;
  padding: 0.8rem 0;
}

/* Logo / Nom du site */
.navbar-custom .navbar-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}

/* Boutons en version mobile */
@media (max-width: 767.98px) {
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;              /* empêche tout dépassement */
    max-width: 320px;         /* limite propre */
    text-align: center;
    font-size: 1rem;
    padding: 12px 18px;
  }
}

/* HERO SECTION - mobile portrait + paysage */
@media (max-width: 767.98px) {
  .hero-section {
    padding: 40px 20px;        /* réduit pour les petits écrans */
    text-align: center;
  }

  /* Titre adaptatif */
  .hero-section h1.display-4 {
    font-size: 1.6rem;         /* taille plus petite */
    line-height: 1.25;
    color: white;
    word-wrap: break-word;     /* coupe proprement */
  }

  /* Sous texte / accroche */
  .hero-section p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 10px;
    word-wrap: break-word;
  }
}

/* Mobile paysage (encore plus écrasé en hauteur) */
@media (max-height: 480px) and (max-width: 820px) {
  .hero-section {
    padding: 20px 15px;
  }

  .hero-section h1.display-4 {
    font-size: 1.3rem;   /* encore plus petit en paysage */
    line-height: 1.2;
  }

  .hero-section p {
    font-size: 0.85rem;
  }

  .hero-buttons .btn {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
}



/* Version mobile : écrans < 768px */
@media (max-width: 767.98px) {
  .navbar-custom .navbar-brand {
    font-size: 0.8rem; /* plus petit sur mobile */
  }
}

.navbar-custom .navbar-brand:hover {
  color: #f8d7da; /* Rosé clair */
}

/* Liens du menu */
.navbar-custom .nav-link {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0.6rem;
  transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: #f5e0c3 !important;
}

/* Burger menu blanc sur mobile */
.navbar-custom .navbar-toggler-icon {
  filter: invert(1);
}

/* Liens normaux et visités */
.navbar-custom .nav-link,
.navbar-custom .nav-link:visited {
  color: #fff !important; /* texte blanc par défaut */
}

/* Lien actif */
.navbar-custom .nav-link.active {
  color: #f5e0c3 !important; /* texte beige clair pour l'onglet actif */
  background-color: transparent !important; /* pas de fond */
}

/* Corps du texte */
body {
  font-family: 'Lora', serif;
  font-size: 1rem;
  color: #2b2b2b;
  line-height: 1.7;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* Liens généraux */
a {
  color: #800020;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #b03040;
}

/* ---------- TITRES ---------- */

/* Titre principal (ex : page d’accueil, nom de domaine) */
h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  color: #fff !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Sous-titre principal */
h2 {
  font-family: 'Spectral', serif;
  font-size: 2rem;
  color: #4a4a4a;
  margin-bottom: 0.75rem;
}

/* Titres de sections */
h3 {
  font-family: 'Spectral', serif;
  font-size: 1.6rem;
  color: #5c5c5c;
  margin-bottom: 0.5rem;
}

/* Titres secondaires */
h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  color: #800020;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sous-sections */
h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #6c757d;
  font-weight: 500;
}

/* Petits titres */
h6 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: #999;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ---------- PARAGRAPHES ---------- */

p {
  font-family: 'Lora', serif;
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Citation ou mise en avant */
blockquote {
  font-family: 'Spectral', serif;
  font-style: italic;
  color: #555;
  border-left: 4px solid #800020;
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Petits textes */
small {
  font-size: 0.85rem;
  color: #777;
}

/* ---------- AUTRES ÉLÉMENTS ---------- */

.border-style {
  border: thick double #800020;

}

/* Boutons */
.btn-custom {
  font-family: 'Montserrat', sans-serif;
  background-color: #800020;
  color: white;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  transition: background-color 0.3s ease;
}

.btn-custom:hover {
  background-color: #b03040;
  color: #fff;
}

/* Titres de section stylés */
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  color: #800020;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #800020;
  margin: 0.5rem auto;
}

/* ---------- SECTION HERO ---------- */


.hero-section {
  height: calc(100vh - 65px); /* 100% de la fenêtre, moins la navbar (~80px) */
  width: 100%;
  background-image: url('../img/t2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}


/* Contenu centré */
.hero-content {
  max-width: 800px;
  padding: 0 20px;
}

.hero-section {
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll;
  }
}



/* .hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(128, 0, 32, 0.65) 0%,
    rgba(192, 181, 150, 0.45) 40%,
    rgba(192, 181, 150, 0.3) 70%,
    rgba(0, 0, 0, 0.4) 100%
  );


  z-index: 1;
} */

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

.hero-services {
  position: relative;
  height: 60vh;
  background: url('../img/nos-services-hero-2.jpg') center/cover no-repeat;
  background-attachment: fixed; /* effet parallax */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* Superposition légère pour lisibilité */
.hero-services .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(128, 0, 32, 0.65) 0%,     /* bordeaux semi-transparent */
    rgba(192, 181, 150, 0.45) 40%, /* beige doré adouci */
    rgba(192, 181, 150, 0.3) 70%,  /* beige clair fondu */
    rgba(0, 0, 0, 0.4) 100%        /* noir doux en fin */
  );  z-index: 1;
}

/* Contenu centré */
.hero-services .content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

/* Responsive : texte adapté */
@media (max-width: 768px) {
  .hero-services h1 {
    font-size: 2rem;
  }
  .hero-services p {
    font-size: 1rem;
  }
}


/* HERO ÉQUIPE */
.hero-equipe {
  position: relative;
  height: 60vh;
  background: url('../img/notre-equipe.jpg') center/cover no-repeat;
  background-attachment: fixed; /* effet parallax */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.hero-equipe .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(128, 0, 32, 0.65) 0%,     /* bordeaux semi-transparent */
    rgba(192, 181, 150, 0.45) 40%, /* beige doré adouci */
    rgba(192, 181, 150, 0.3) 70%,  /* beige clair fondu */
    rgba(0, 0, 0, 0.4) 100%        /* noir doux en fin */
  );
   z-index: 1;
}

.hero-equipe .content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

/* HERO */
.hero-vignerons {
  height: 60vh;
  background: url('../img/bg-partenaire.jpg') center/cover no-repeat;
  background-attachment: fixed; /* effet parallax */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-vignerons .overlay {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  background: linear-gradient(
    to right,
    rgba(128, 0, 32, 0.65) 0%,     /* bordeaux semi-transparent */
    rgba(192, 181, 150, 0.45) 40%, /* beige doré adouci */
    rgba(192, 181, 150, 0.3) 70%,  /* beige clair fondu */
    rgba(0, 0, 0, 0.4) 100%        /* noir doux en fin */
  );}
.hero-vignerons .content { position: relative; z-index:2; }

/* Vignerons */
.vignerons .section-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #800020;
}
.vignerons .text-bordeaux { color: #800020; }

/* ===========================
   Cartes Vignerons
=========================== */

.vignerons .vigneron-card {
  position: relative;
  border-radius: 1rem;
  overflow: visible; /* permet à l'image partenaire de dépasser */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.vignerons .vigneron-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Centrer le contenu des cards vignerons */
.vigneron-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ou center si tu veux centrer verticalement l'ensemble */
  align-items: center; /* centre horizontalement tout le contenu */
  text-align: center; /* centre le texte */
}

.vigneron-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center; /* centre les éléments dans le card-body */
  text-align: center; /* centre le texte */
}

/* Si tu veux que le bouton occupe toute la largeur mais reste centré */
.vigneron-card .btn-decouvrir {
  align-self: center;
}

/* ===========================
   Image wrapper
=========================== */

.card-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===========================
   Image partenaire
=========================== */

.partenaire-img {
  position: absolute;
  bottom: 170px; /* position par défaut desktop */
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  border: 3px solid #C0B596;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}




.btn-bordeaux {
  background-color: #800020;
  color: #fff;
  border: none;
}
.btn-bordeaux:hover {
  background-color: #5a0015;
}


/* ÉQUIPE */
#equipe .team-card {
  background: #fff;
  border: 1px solid rgba(128, 0, 32, 0.1);
  border-radius: 15px;
  transition: all 0.4s ease;
}

#equipe .team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(128, 0, 32, 0.15);
}

.team-photo img {
  width: 100%;
  object-fit: contain; /* <-- ici on change */
  background-color: #f5f5f5; /* optionnel, pour combler le vide autour de l'image */
}

/* TITRE DE SECTION */
.section-title {
  color: #800020;
  font-weight: 700;
  margin-bottom: 1rem;
}





.service-card {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}


/* Titres hero */
.hero-section h1 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-section p {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* ---------- BOUTONS HERO ---------- */

.hero-buttons .btn {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 0 0.5rem !important;

}

.btn {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 0 0.5rem !important;

}

/* Bouton bordeaux */
.btn-bordeaux {
  background-color: #800020 !important;
  color: #fff !important;
  display: inline-block !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 500 !important;
font-size: 1rem !important;
padding: 0.6rem 1.5rem !important;
border-radius: 50px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
margin: 0 0.5rem !important;

}

.btn-bordeaux:hover {
  background-color: #b03040;
  color: #fff;
}

.btn-decouvrir {
  border-radius:50px !important;
  width:100%;
}

/* Bouton beige */
.btn-beige {
  background-color: #f5e0c3 !important;
  color: #000;
}

.btn-beige:hover {
  background-color: #e0caa7;
  color: #000;
}

/* Responsive : réduire la taille des titres sur petits écrans */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 3rem;
  }
  .hero-section p {
    font-size: 1rem;
  }
  .hero-buttons .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1.2rem;
  }
}

/* Section avantages */
#services {
  background-color: #fff; /* beige clair */
  /* padding-top: 4rem; */
  padding-bottom: 2rem;
}

#services h4 {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 0.5rem;
}

#services p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
  font-size: 1rem;
}

#services i {
  color: #800020;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Optionnel : effet hover sur les icônes */
#services .col-md-4:hover i {
  transform: scale(1.2);
  color: #b03040; /* bordeaux clair au hover */
}


/* Section Nos Services sur Mesure */
#nos-services {
  background-color: #f5e0c3; /* beige clair */
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Cartes des services */
.service-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card i {
  color: #800020;
  transition: transform 0.3s ease, color 0.3s ease;
}

.service-card h5 {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.service-card p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
  font-size: 0.95rem;
}

/* Hover dynamique */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.service-card:hover i {
  transform: scale(1.2);
  color: #b03040; /* bordeaux clair */
}

/* Responsive */
@media (max-width: 768px) {
  #nos-services .row {
    row-gap: 2rem;
  }
}


/* Section équipe */
#equipe {
  background-color: #f5e0c3; /* beige clair */
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.team-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom:10px;
}

.team-card img.team-img {
  width: 100%;
  object-fit: contain; /* <-- ici on change */
  background-color: #f5f5f5; /* optionnel, pour combler le vide autour de l'image */
}

.team-card h5 {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.team-card .role {
  font-family: 'Montserrat', sans-serif;
  color: #4a4a4a;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.team-card p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
  font-size: 0.9rem;
}

/* Hover */
.team-card:hover {
  transform: translateY(-10px);
}

/* Swiper navigation - style raffiné */
.swiper-button-next,
.swiper-button-prev {
  color: #d4af37 !important; /* force doré */
  width: 35px;
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3); /* légère profondeur */
  background: transparent;
  transition: transform 0.3s ease, color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: translateY(-50%) scale(1.2);
  color: #f5e0c3 !important; /* doré clair au survol */
}

/* Décalage des flèches du contenu */
.swiper-button-next {
  right: -10px;
}

.swiper-button-prev {
  left: -10px;
}
/* Pagination bullets dorés */
.swiper-pagination-bullet {
  background-color: #d4af37 !important; /* doré */
  opacity: 0.7;              /* un peu transparent par défaut */
  width: 12px;
  height: 12px;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #f5e0c3 !important; /* doré clair pour le bullet actif */
  opacity: 1;
  transform: scale(1.2);
}

.produits-swiper .swiper-pagination {
  margin-bottom: 10px !important;
}


/* SECTION PARTENAIRES */
#partenaires .section-title {
  font-family: 'Cinzel', serif;
  color: #800020;
}

#partenaires p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
}

/* ============================
   SLIDER LOGOS - DÉFILEMENT INFINI
============================ */

.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 1rem 0;
}

.slide-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

/* Dupliquer automatiquement les slides pour un scroll infini */
.slide-track::after {
  content: "";
  display: flex;
  width: 100%;
}

/* Chaque logo */
.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 150px;
  margin: 0 30px;
}

.slide img {
  max-height: 80px;
  filter: grayscale(50%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.slide img:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
  .slide {
    width: 120px;
    margin: 0 20px;
  }
  .slide img {
    max-height: 60px;
  }
}

/* Bouton bordeaux */
.btn-bordeaux {
  display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0 0.5rem;

}

.btn-bordeaux:hover {
  background-color: #b03040 !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Image en background pleine largeur et hauteur */
.clients-bg {
  background-image: url('../img/bg-client.jpg'); /* ton image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%; /* prend toute la hauteur de la colonne */
  min-height: 500px; /* hauteur minimale */
  width: 100%;
}

/* Cartes clients */
.client-banner {
  background: linear-gradient(90deg, rgba(192,181,150,0.2), rgba(192,181,150,0.05));
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-banner i {
  color: #C0B596;
  transition: transform 0.3s ease, color 0.3s ease;
}

.client-banner h5 {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.client-banner p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.client-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.client-banner:hover i {
  transform: scale(1.2);
  color: #b03040;
}

/* Responsive : col ordre sur mobile */
@media (max-width: 768px) {
  #clients .row {
    flex-direction: column-reverse;
  }
  .client-banner {
    justify-content: center;
    text-align: center;
  }
  .client-banner i {
    margin-bottom: 0.5rem;
  }
  .clients-bg {
    min-height: 300px;
  }
}


/* SECTION NOUS CONTACTER */
#contact {
  background-color: #f5f5f5;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#contact .section-title {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 1rem;
}

#contact p {
  font-family: 'Lora', serif;
  color: #4a4a4a;
  font-size: 1rem;
}

#contact form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contact form:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

#contact .form-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #4a4a4a;
}

#contact .form-control,
#contact .form-select {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  font-family: 'Lora', serif;
}

#contact .form-control:focus,
#contact .form-select:focus {
  border-color: #800020;
  box-shadow: 0 0 5px rgba(128,0,32,0.3);
  outline: none;
}

#contact button.btn-bordeaux {
  padding: 0.7rem 2rem;
  font-size: 1rem;
  border-radius: 50px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contact button.btn-bordeaux:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

#contact button.btn-bordeaux:active {
  background-color: beige !important;
  color: #4a4a4a !important;
  transform: scale(0.98) !important;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.1) !important;
}

.nav a.active {
  background-color: beige !important;
  color: #4a4a4a !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}


/* FOOTER */
.footer {
  background-color: #000;
  color: #fff;
  font-family: 'Lora', serif;
}

.footer a {
  color: #C0B596; /* doré clair */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #f5e0c3; /* doré plus clair au hover */
}

.footer-title {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f5e0c3; /* doré clair */
  margin-bottom: 1rem;
}

.footer ul {
  padding-left: 0;
  list-style: none;
}

.footer ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.footer .social-icons a {
  display: inline-block;
  margin-right: 0.7rem;
  font-size: 1.2rem;
  color: #C0B596;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer .social-icons a:hover {
  color: #f5e0c3;
  transform: translateY(-2px);
}

.footer hr {
  border-color: rgba(255,255,255,0.2);
}


.text-bordeaux {
  color: #800020;
}

.service-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  border-left: 5px solid #8000201a;
}

.object-cover {
  object-fit: cover;
  height: 100%;
}

/* Effet au survol des images */
#nos-services img {
  transition: transform 0.6s ease;
}

#nos-services img:hover {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 768px) {
  .service-detail {
    padding: 2rem 1.5rem;
    border-left: none;
    border-top: 5px solid #8000201a;
  }
  #nos-services img {
    height: 300px;
  }
}

/* Produits Vedettes */
#produits-vedettes .product-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 10px;
}

#produits-vedettes .product-card img.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

#produits-vedettes .product-card h5 {
  font-family: 'Cinzel', serif;
  color: #800020;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

#produits-vedettes .product-card .price {
  font-family: 'Montserrat', sans-serif;
  color: #4a4a4a;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Hover */
#produits-vedettes .product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 768px) {
  #produits-vedettes .product-card img.product-img {
    height: 180px;
  }
}

/* ---------- ICÔNES RONDES DORÉES DU HERO ---------- */

.hero-icons {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.hero-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(245, 224, 195, 0.25), rgba(192,181,150,0.1));
  border: 1.5px solid rgba(245, 224, 195, 0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25), inset 0 2px 6px rgba(255,255,255,0.2);
  color: #f5e0c3;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.35s ease;
}

.hero-icon i {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  color: #f5e0c3;
  transition: color 0.35s ease, transform 0.35s ease;
}

.hero-icon p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.hero-icon:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(192,181,150,0.35);
  border-color: #f5e0c3;
  background: radial-gradient(circle at 30% 30%, rgba(245, 224, 195, 0.35), rgba(192,181,150,0.25));
}

.hero-icon:hover i {
  transform: scale(1.2);
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-icon {
    width: 85px;
    height: 85px;
  }
  .hero-icon i {
    font-size: 1.5rem;
  }
  .hero-icon p {
    font-size: 0.75rem;
  }
}

.marge-card {
  margin-left:5px;
  margin-right:5px;
}

 h5 {
  font-size: 1.20rem !important;
}

.clients-bg {
  height: 100vh; /* prend toute la hauteur de la fenêtre */
  min-height: auto; /* supprime le min-height qui créait de l'espace */
  background-image: url('../img/bg-client.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

/* HERO CONTACT */
/* HERO CONTACT */
.hero-contact {
  height: 60vh;
  background: url('../img/bg-contact.jpg') center/cover no-repeat;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overlay identique sur toutes les pages */
.hero-contact .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(128, 0, 32, 0.65) 0%,     /* bordeaux semi-transparent */
    rgba(192, 181, 150, 0.45) 40%, /* beige doré */
    rgba(192, 181, 150, 0.3) 70%,  /* beige clair */
    rgba(0, 0, 0, 0.4) 100%        /* noir doux */
  );
  z-index: 1;
}

/* Contenu */
.hero-contact .content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  color: #fff;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-contact {
    background-attachment: scroll;
  }
  .hero-contact h1 {
    font-size: 2rem;
  }
  .hero-contact p {
    font-size: 1rem;
  }
}


/* FORMULAIRE CONTACT */
.contact-form .form-label {
  color: #5C0D0D; /* bordeaux */
}
.contact-form .form-control {
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  padding: 0.75rem;
  transition: 0.3s;
}
.contact-form .form-control:focus {
  border-color: #5C0D0D;
  box-shadow: 0 0 0 0.2rem rgba(92,13,13,0.25);
}
.btn-bordeaux {
  background-color: #5C0D0D;
  color: #fff;
  border: none;
  transition: 0.3s;
}
.btn-bordeaux:hover {
  background-color: #7a1313;
  color: #fff;
}
.section-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #5C0D0D;
}