@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');


.probootstrap-video-section {
  width: 100%;
  max-width: 1200px; /* largeur max pour rester propre */
  margin: 60px auto;
  padding: 0;
  position: relative;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  border-radius: 12px;

  /* Fade-in simple */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInVideo 1s forwards;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes fadeInVideo {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Suppression des paddings par défaut */
.probootstrap-slider .probootstrap-text-intro.no-padding {
  padding: 0 !important;
  height: 100%;
}

/* Centrage vertical et horizontal via flexbox */
.probootstrap-slider .container.h-100,
.probootstrap-slider .row.h-100 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* empile les éléments verticalement */
}

/* Logo agrandi et responsive */
.slider-logo {
  max-width: 600px;   /* plus gros que la version précédente */
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  animation: fadeIn 1.2s ease-in-out;
}

/* Sous-titre */
.probootstrap-sub-wrap {
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
}

/* Bouton */
.btn-ghost-white {
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  transition: 0.3s;
}

.btn-ghost-white:hover {
  background: #fff;
  color: #000;
  text-decoration: none;
}

/* Ajustements responsive */
@media (max-width: 768px) {
  .slider-logo { max-width: 400px; }
  .probootstrap-sub-wrap { font-size: 22px; }
}

@media (max-width: 480px) {
  .slider-logo { max-width: 250px; }
  .probootstrap-sub-wrap { font-size: 18px; }
}

/* Fade-*



/* Video 
*/
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
  box-shadow: 0 0 20px rgba(255, 64, 90, 0.4), 0 0 40px rgba(36, 123, 160, 0.2);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease, box-shadow 0.5s ease;
  animation: fadeInVideo 1s forwards;
}

/* Hover subtil : léger flottement et glow animé */
.video-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(255, 64, 90, 0.6), 0 0 60px rgba(36, 123, 160, 0.35);
}

/* Animation glow pulsé */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 64, 90, 0.4), 0 0 40px rgba(36, 123, 160, 0.2); }
  50% { box-shadow: 0 0 30px rgba(255, 64, 90, 0.6), 0 0 60px rgba(36, 123, 160, 0.35); }
}

/* Active le pulse en continu */
.video-wrapper {
  animation: fadeInVideo 1s forwards, pulseGlow 4s ease-in-out infinite;
}

.video-wrapper iframe {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:0;
  border-radius: 20px;
}

/* Fade-in simple */
@keyframes fadeInVideo {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* Titre de section style “Just Another Hand” */
.probootstrap-section .probootstrap-heading {
  color: #fff;
  font-weight: 700;
  font-size: 70px;
  line-height: 70px;
  font-family: "Just Another Hand", cursive;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

/* Sous-titre */
.probootstrap-sub-wrap {
  font-size: 20px;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

/* Product item */
.product-item {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.product-item figure {
  margin: 0 0 15px 0;
}

.product-item img {
  width: 100%;
  border-radius: 8px;
}

/* Product text */
.product-item .text .heading {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.product-item .text p {
  font-size: 16px;
  color: #eee;
}

/* Boutons */
.product-item .btn-primary {
  background: #e43f5a;
  border-color: #e43f5a;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  transition: 0.3s;
}

.product-item .btn-primary:hover {
  background: #fff;
  color: #e43f5a;
  border-color: #e43f5a;
}

/* Responsive adjustments */
@media(max-width:768px){
  .probootstrap-section .probootstrap-heading { font-size: 50px; line-height: 50px; }
  .probootstrap-sub-wrap { font-size: 18px; margin-bottom: 30px; }
}

@media(max-width:480px){
  .probootstrap-section .probootstrap-heading { font-size: 38px; line-height: 40px; }
  .probootstrap-sub-wrap { font-size: 16px; margin-bottom: 20px; }
}


/* Logo AB ajusté */
.service .icon img.icon-ab {
  width: 45px;          /* plus étroit qu’avant */
  height: auto;         /* garde les proportions */
  display: block;
  margin: 0 0 20px 20px; /* marge en bas et padding-left via margin-left */
}

/* Ajustements responsive */
@media (max-width: 768px) {
  .service .icon img.icon-ab {
    width: 38px;
    margin-left: 15px;
  }
}

@media (max-width: 480px) {
  .service .icon img.icon-ab {
    width: 30px;
    margin-left: 10px;
  }
}





/* Conteneur de mots-clés */
.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 15px;
}

/* Style de base des tags */
.keyword-cloud .kw {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-transform: capitalize;
  padding: 6px 12px;
  border-radius: 18px;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.keyword-cloud .kw:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* 🎨 Couleurs par type de goût */
.kw.floral { background: #d17aff; }        /* floral → violet doux */
.kw.resineux { background: #008060; }      /* résineux → vert profond */
.kw.agrume { background: #f6a623; }        /* agrume → orange vif */
.kw.pamplemousse { background: #ff7b5a; }  /* pamplemousse → saumon */
.kw.epice { background: #c47f00; }         /* épicé → ocre */
.kw.fruitsrouges { background: #b3003c; }  /* fruits rouges → rouge intense */
.kw.melon { background: #ffb84d; }         /* melon → orange clair */
.kw.coco { background: #a1866f; }          /* noix de coco → brun clair */
.kw.mandarine { background: #ff9248; }     /* mandarine → orange doré */

/* Responsive */
@media (max-width: 768px) {
  .keyword-cloud .kw {
    font-size: 13px;
    padding: 5px 10px;
  }
}



/* 

/* ===== FOND DE LA SECTION HOUblon ===== */

.probootstrap-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #f9f7f3 0%, #f3f0eb 100%); /* beige clair et doux */
}

/* En option : effet léger d'ombre sur les cartes */
.product-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Section variétés / racines */
#racines, .section-varietes {
  background-color: #f9f9f4; /* léger fond beige/vert clair */
  padding: 60px 0;
}

/* Titres principaux */
#racines .probootstrap-heading,
.section-presentation .probootstrap-heading {
  color: #B2D430; /* vert profond VentHoublon */
      margin-top: 0px;

}

/* Titres principaux */
#racines .probootstrap-heading,
.section-varietes .probootstrap-heading {
  color: #B2D430; /* vert profond VentHoublon */
      margin-top: 0px;

}

/* Titres principaux */
#pigeon .probootstrap-heading,
.section-varietes .probootstrap-heading {
  color: #B2D430; /* vert profond VentHoublon */
      margin-top: 0px;

}

/* Sous-titres / textes secondaires */
#racines .probootstrap-sub-wrap,
.section-presentation .probootstrap-sub-wrap {
  color: #4b6b4b; /* vert-gris doux */
}


.hop-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.4s ease;

  /* Nouveau : texte sombre et lisible */
  color: #222;          /* gris très foncé / presque noir */
  font-size: 15px;      /* un peu plus lisible */
  line-height: 1.6;     /* pour l'espacement des lignes */
  margin-top: 0;
  padding: 0 10px;      /* petit padding horizontal */
}

.hop-details.show {
  max-height: 500px; /* ajustable selon le contenu */
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
}


.product-item .text p {
  font-size: 14px;
  color: #1d4a25;
}




.logos-container {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; /* espace entre les logos */
  flex-wrap: wrap; /* responsive : logos passent en ligne suivante si écran trop petit */
}

.logo-association {
  max-width: 250px;   /* largeur maximale */
  height: auto;
  display: inline-block;
  transition: transform 0.3s ease;
}

.logo-association:hover {
  transform: scale(1.05); /* léger zoom au survol */




  .probootstrap-bg-light {
    background-color: #faf9f6;
    padding: 80px 0;
  }

  .story-block {
    text-align: center;
  }

  .story-img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }

  .story-img img:hover {
    transform: scale(1.02);
  }

  .story-text {
    padding: 20px;
  }

  .story-title {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    margin-bottom: 15px;
    color: #3b3b3b;
  }

  .probootstrap-sub-heading {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
  }

  .story-title {
  color: #2f2f2f;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  margin-bottom: 10px;
}

.story-text p {
  color: #444;
  line-height: 1.7;
}

.probootstrap-bg-light {
  background-color: #f8f6f3;
}


}


.probootstrap-section {
  font-family: "Open Sans", sans-serif;
  background-color: #fafafa;
  padding: 50px 0 0px 0;
}

.probootstrap-heading {
  font-size: 2.2em;
  font-weight: 600;
  color: #2c2c2c;
  margin-bottom: 10px;
}

.probootstrap-sub-heading {
  color: #666;
  font-size: 1.05em;
  margin-bottom: 60px;
}

/* Disposition deux images côte à côte */
.fermes-ligne {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 60px;
  flex-wrap: wrap;
}

/* Carte individuelle */
.ferme-carte {
  position: relative;
  flex: 1 1 47%;
  max-width: 700px;
  min-width: 350px;
}

.ferme-carte img {
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ferme-carte:hover img {
  transform: scale(1.03);
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

/* Overlay texte en haut */
.ferme-overlay {
  position: absolute;
  top: 25px;                /* <-- accroche en haut */
  left: 25px;
  background: rgba(178, 212, 48, 0.65); /* vert VentHoublon semi-transparent */
  color: #fff;
  padding: 22px 26px;
  border-radius: 14px;
  max-width: 75%;
  text-align: left;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
}

.ferme-carte:hover .ferme-overlay {
  background: rgba(178, 212, 48, 0.8);
  transform: translateY(-3px);
}

.ferme-overlay h3 {
  font-size: 1.15em;
  font-weight: 600;
  margin-bottom: 8px;
}

.ferme-overlay p {
  font-size: 0.95em;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .fermes-ligne {
    flex-direction: column;
    align-items: center;
    gap: 70px;
  }

  .ferme-carte {
    width: 90%;
    max-width: 700px;
  }

  .ferme-overlay {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    margin-bottom: 15px;
    text-align: center;
  }
}




#map-leaflet {
  height: 70vh;
  min-height: 400px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Style compact des popups Leaflet */
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.95); /* blanc légèrement transparent */
  border-radius: 8px;
  padding: 8px 12px; /* moins de padding */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.85rem; /* un peu plus petit */
  color: #333;
}

/* Bordure de la flèche */
.leaflet-popup-tip {
  background: #fff;
}

/* Titre en gras, plus petit */
.leaflet-popup-content strong {
  display: block;
  font-size: 1rem; /* un peu plus petit */
  margin-bottom: 2px;
  color: #2c3e50;
}

/* Bouton "Me localiser" */
#locateBtn {
  font-size: 0.8rem;
  padding: 2px 6px;
}



/* Popups Mas Courbet */
.popup-mas .leaflet-popup-content-wrapper {
  background: rgba(173, 216, 230, 0.95); /* bleu clair */
  border: 2px solid #4a90e2;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Popups Houbleron */
.popup-houb .leaflet-popup-content-wrapper {
  background: rgba(144, 238, 144, 0.95); /* vert clair */
  border: 2px solid #2ecc71;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.leaflet-popup-content strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
  color: #2c3e50;
}

.leaflet-popup-tip {
  background: #fff;
}

#locateBtn {
  font-size: 0.8rem;
  padding: 2px 6px;
}




#pigeon {
  background-color: #f9f9f9;
}

/* Champs du formulaire uniquement */
#pigeon .probootstrap-form input.form-control,
#pigeon .probootstrap-form textarea.form-control {
  background-color: #ffffff !important; /* fond blanc */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-shadow: none;
  color: #333; /* texte visible */
}

/* Placeholder visible */
#pigeon .probootstrap-form input.form-control::placeholder,
#pigeon .probootstrap-form textarea.form-control::placeholder {
  color: #999; /* gris clair pour placeholder */
  opacity: 1;  /* forcer visibilité sur certains navigateurs */
}

/* Focus : bordure verte et texte reste lisible */
#pigeon .probootstrap-form input.form-control:focus,
#pigeon .probootstrap-form textarea.form-control:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 5px rgba(46,204,113,0.3);
  outline: none;
  color: #333; /* assure que le texte reste lisible au focus */
}






#valeurs .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#valeurs .col-lg-4,
#valeurs .col-md-4,
#valeurs .col-sm-6,
#valeurs .col-xs-12 {
  display: flex;
}

#valeurs .service {
  background: #fff; /* si besoin */
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#valeurs .service p:last-child {
  display: flex;
  justify-content: center;
}


#varietes .text p:has(a.btn) {
  text-align: center;
}


/* GESTION IMG MOBILE */



.probootstrap-section.probootstrap-bg {
  position: relative;
  min-height: 60vh; /* desktop */
  display: flex;
  flex-direction: column;      /* pour que le texte se centre verticalement */
  justify-content: center;     /* centre verticalement */
  align-items: center;         /* centre horizontalement */
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 60px 20px;
}

/* Image responsive derrière le contenu */
.section-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Voile sombre */
.probootstrap-section.probootstrap-bg .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}

/* Contenu au-dessus de l'image */
.probootstrap-section.probootstrap-bg > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Logos centrés */
.logos-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

/* Boutons centrés */
.probootstrap-section.probootstrap-bg a.btn {
  display: inline-block;
  margin: 20px auto 0 auto;
}

/* Mobile */
@media (max-width: 768px) {
  .probootstrap-section.probootstrap-bg {
    min-height: 70vh; /* plus grande pour voir le texte */
    padding: 40px 15px;
  }

  .probootstrap-section.probootstrap-bg h2 {
    font-size: 1.5rem;
  }

  .probootstrap-section.probootstrap-bg p.sub-heading {
    font-size: 1rem;
  }

  .logos-container img {
    max-width: 100px;
  }
}



/* Slider : hauteur plein écran */
.probootstrap-slider,
.probootstrap-slider .slides li {
  position: relative;
  width: 100%;
  height: 100svh; /* mobile & desktop */
  overflow: hidden;
}

/* Image de fond */
.slider-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Overlay */
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Contenu du slide */
.slide-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff;
}

/* Logo */
.slider-logo {
  max-width: 600px; /* augmenter la taille du logo */
  margin-bottom: 20px;
}

/* Texte */
.slide-content p {
  font-size: 1.2rem; /* ajuster la taille du texte */
}

/* Bouton */
.slide-content a.btn {
  display: inline-block;
  margin-top: 20px;
}

/* Mobile */
@media (max-width: 768px) {
  .slider-logo {
    max-width: 240px; /* doubler la taille sur mobile (passer de 120px à 240px) */
  }
  
  .slide-content p {
    font-size: 1rem;
  }
}