/* ------------------ HERO FIXE ------------------ */
/* ----------------------------------------------------------- */
/* 1)  on définit la hauteur réelle de la barre de navigation   */
:root{
  --nav-h: 70px;            /* adapte si ta barre est plus haute  */
}

/* ----------------------------------------------------------- */


.hero {
    /* pousse visuellement le bloc vers le haut de la valeur du header  */
  margin-top: calc(-1 * var(--nav-h));

  /* et lui redonne cette hauteur en plus pour qu’il couvre toujours 100vh */
  min-height: calc(60vh + var(--nav-h));
  background-image: url("images/jardin-ecologique.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* Fige l'image lors du scroll */
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  color: white;
  padding: 2rem;
}

/* Voile sombre pour lisibilité */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.3rem;
  line-height: 1.6;
}


/* ------------------ DEFINITION ------------------ */
.definition-eco-paysagiste {
  background: #f6fdf5;
  padding: 2em;
  margin: 4em auto;
  max-width: 1100px;
  border-left: 5px solid #74a05c;
  color: #2f3d2e;
}

.definition-container {
  display: flex;
  gap: 2em;
  align-items: stretch;
  flex-wrap: wrap;
}

.image-colonne {
  flex: 1 1 300px;
  max-width: 350px;
}

.image-colonne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.texte-colonne {
  flex: 2 1 600px;
}

.texte-colonne h2 {
  color: #3c5c3a;
  font-size: 1.6em;
  margin-bottom: 1em;
}

.texte-colonne p {
  line-height: 1.7;
  margin-bottom: 1.2em;
  font-size: 1.05em;
}



/* === SECTION THÉMATIQUES ÉCOLOGIQUES ================================= */

.thematiques-eco{
  position: relative;
  /* image fixe */
  background: url("images/jardin-ecologique.webp") center / cover no-repeat fixed;
  min-height: 80vh;            /* ↖️ hauteur suffisante pour percevoir le scroll */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* contenu commence en haut */
  padding: 6rem 2rem 4rem;
  overflow: hidden;
  z-index: 0;
}

/* voile clair (pour lisibilité) qui défile AVEC le contenu */
.thematiques-eco::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.65);  /* ajuste l’opacité */
  z-index:-1;                         /* derrière le texte, devant l’image */
}

.thematiques-eco h2{
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  color: #1a3d2f;
  margin-bottom: 3rem;
}

/* Grille responsive --------------------------------------------------- */
.eco-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2.2rem;
  max-width:1100px;
  margin:0 auto;
}

/* Carte individuelle -------------------------------------------------- */
.eco-item {
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  padding:2.2rem 2rem 2.4rem;
  position:relative;
  transition:transform .28s ease, box-shadow .28s ease;
}
.eco-item:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

/* Titres avec emoji/icône -------------------------------------------- */
.eco-item h3{
  font-size:1.25rem;
  color:#2e5c41;
  margin:0 0 1rem 0;
  line-height:1.3;
}
/* Icône ronde verte --------------------------------------------- */
.ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:70px;height:70px;
  border-radius:50%;
  background:#e6f4ea;          /* rond vert pâle */
  margin-bottom:1.2rem;
  
  margin:0 auto 1rem;  
}

.ico svg{
  width:36px;height:36px;
  fill:#58a57d;                /* vert principal */
}
/* Texte descriptif ---------------------------------------------------- */
.eco-item p,
.eco-item ul{
  font-size:.98rem;
  color:#444;
  line-height:1.65;
  margin-bottom:1.1rem;
}
.eco-item ul{
  list-style:disc inside;
  padding-left:0;
}
.eco-item ul li{margin:.4rem 0}

/* Responsive petits écrans ------------------------------------------- */
@media(max-width:600px){
  .thematique-eco{padding:3rem 1rem}
  .eco-item{padding:1.8rem 1.6rem}
  .eco-item h3{font-size:1.15rem}
}

/* ------------------ FOCUS PROJET ------------------ */
.focus-projets{
  padding:4rem 2rem;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

/* —— Titre principal —— */
.focus-projets h2{
  font-size:2.4rem;
  font-weight:700;
  color:#1a3d2f;
  margin-bottom:2rem;
  position:relative;
}

/* petite barre verte sous le H2 */
.focus-projets h2::after{
  content:"";
  display:block;
  width:80px;
  height:4px;
  background:#28a745;
  margin:1rem auto 0;
  border-radius:2px;
}

/* —— Sous-titre du projet —— */
.focus-projets h3{
  font-size:1.5rem;
  color:#28a745;
  font-weight:600;
  margin-bottom:1rem;
  letter-spacing:.5px;
}

/* —— Paragraphe descriptif —— */
.focus-projets p{
  font-size:1.1rem;
  line-height:1.6;
  color:#444;
  max-width:800px;
  margin:0 auto 2.5rem;
}

.focus-projets article{
  background:#fff;border-left:6px solid var(--vert-clair);
  padding:1.5rem 1.5rem 1.5rem 1.3rem;
  box-shadow:var(--ombre);
  border-radius:8px;
}

/* conteneur */
.hotspots{
  position:relative;
  max-width:900px;            /* adapte à ton layout */
  margin:2rem auto;
}
.hotspots img{display:block;width:100%;height:auto}

/* point cliquable / survolable */
.spot{
  --size:22px;                /* diamètre du point */
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:var(--size); height:var(--size);
  border:3px solid #fff;
  border-radius:50%;
  background:#58a57d;
  box-shadow:0 0 0 4px #58a57d55, 0 4px 10px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .2s ease;
}

/* pulser doucement */
.spot::after{
  content:\"\"; position:absolute; inset:0;
  border-radius:50%; background:inherit;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.8);opacity:0}
}

/* vignette cachée par défaut */
.spot img, .spot span{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.spot img{width:180px;height:auto}
.spot span{
  background:#fff; padding:.6rem .9rem;
  font-size:.9rem; color:#333; text-align:center;
  min-width:140px; line-height:1.4;
}

/* affichage au survol / focus ---------------------------------- */
.spot:hover img,
.spot:hover span,
.spot:focus img,
.spot:focus span{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}
.spot:hover{transform:translate(-50%,-50%) scale(1.15)}


/* Positionne l’image légèrement au-dessus du point */
.spot-img{
  position:absolute;
  left:50%; top:-50px;       /* 10 px au-dessus du centre */
  transform:translateX(-50%); /* centré horizontalement */
  width:220px;                       /* plus grand */
  height:150px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  border-radius:8px; 
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  z-index:2;
  object-fit:cover;
}

/* Place le texte SOUS le point */
.spot-label{
  position:absolute;
  left:50%; top:calc(100% + 100px); /* 10 px sous le cercle */
  transform:translateX(-50%);
  background:#ffffff;
  padding:.6rem .9rem;
  width:200px;         
  border-radius:8px;
  font-size:.9rem;
  color:#333;
  text-align:center;
  line-height:1.3;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:2;
  
  
  /* limite à 2 lignes + ellipsis */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Affiche les deux au survol */
.spot:hover .spot-img,
.spot:hover .spot-label,
.spot:focus .spot-img,
.spot:focus .spot-label{
  opacity:1;
}

/* Option : légère remontée de l’image en hover */
.spot:hover .spot-img{
  transform:translate(-50%,-6px);
}


/* ------------------ POUR-TONTE (réassurance) ------------------ */
.pour-tonte{background:var(--gris-fond)}
.pour-tonte p{margin-bottom:1.2rem;text-align:center;max-width:800px;margin-left:auto;margin-right:auto}

/* ------------------ CTA ------------------ */
.cta{
  background:var(--vert-fonce);
  color:#fff;text-align:center;
  padding:4rem 2rem
}
.cta .btn{
  display:inline-block;
  background:var(--vert-clair);
  color:#000;font-weight:600;
  padding:.9rem 1.8rem;
  border-radius:40px;
  text-decoration:none;
  margin-top:1.6rem;
  transition:background .25s;
}
.cta .btn:hover{background:#7db573}

/* ------------------ ACCESSIBILITÉ ------------------ */
a:focus,
button:focus{outline:2px dashed var(--vert-clair);outline-offset:2px}

/* === SECTION « STYLE-ÉCO » ======================================= */
.style-eco {
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 3rem 2rem;
  margin: 4rem 0;
  max-width: 1200px;
  margin-inline: auto; 
  background: #f6fdf5;
}

.style-eco__container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

/* -------- Colonne image ----------------------------------------- */
.style-eco__image {
  flex:1 1 380px;
  max-width:450px;
}
.style-eco__image img{
  width:100%;height:auto;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}

/* -------- Colonne texte ----------------------------------------- */
.style-eco__texte {
  flex: 1 1 550px;
}

.style-eco__title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  border-left: 6px solid #28a745;
  padding-left: 1rem;
  color: #1a3d2f;
}
.style-eco__icon{flex:0 0 auto}

.style-eco__non,
.style-eco__oui {
  font-size: 1.2rem;
  margin: 1rem 0;
  line-height: 1.6;
}

.style-eco__non span {
  font-weight: bold;
  font-size: 1.4rem;
  color: #d9534f;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.style-eco__oui span {
  font-weight: bold;
  font-size: 1.4rem;
  color: #28a745;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.style-eco__list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  line-height: 1.6;
  font-size: 1.1rem;
  color: #444;
}

.style-eco__list li {
  margin-bottom: 0.8rem;
}

.style-eco__conclusion {
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
  margin-top: 2rem;
}

.style-eco__image {
  flex: 1 1 300px;
  margin: 0;
  text-align: center;
}

.style-eco__image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0,0,0,0.08);
}

@media screen and (max-width: 768px) {
  .style-eco__container {
    flex-direction: column;
  }

  .style-eco__title {
    font-size: 2rem;
  }

  .style-eco__non span,
  .style-eco__oui span {
    font-size: 1.2rem;
  }
}

/* ===== CTA (nature) ======================================== */
.cta{
  position:relative;
  padding:4rem 2rem;
  text-align:center;
  border:0px solid #cfe5d4;          /* bordure très fine verte */
  border-radius:10px;
  max-width:1000px;
  margin:4rem auto;
  overflow:hidden;                   /* masque l’effet décor */
}

/* — Décor feuillage subtil — */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/feuillage-light.svg") center/cover no-repeat;
  opacity:0.07;                      /* discrétion */
  pointer-events:none;
}

/* — Titre — */
.cta h2{
  font-size:2.2rem;
  color:#1b3e2b;
  line-height:1.3;
  margin-bottom:1rem;
  font-weight:700;
}

/* — Paragraphe — */
.cta p{
  font-size:1.15rem;
  color:#444;
  max-width:700px;
  margin:0 auto 2rem;
  line-height:1.6;
}

/* — Bouton — */
.cta .btn{
  display:inline-block;
  background:linear-gradient(135deg,#28a745,#218838);
  color:#fff;
  padding:0.9rem 2rem;
  font-size:1.05rem;
  font-weight:600;
  border-radius:40px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(40,167,69,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(33,136,56,.35);
}

/* — Responsive — */
@media(max-width:600px){
  .cta{
    padding:3rem 1.5rem;
  }
  .cta h2{
    font-size:1.8rem;
  }
  .cta p{
    font-size:1rem;
  }
}

/* ======================================== */
/* =========  MEDIA QUERIES =============== */
/* Mobile : empile les colonnes & réduit les marges */
@media(max-width:860px){

  /* le conteneur devient un flex-box vertical */
  .definition-container{
    display:flex;
    flex-direction:column;
    gap:2rem;
    align-items:center;   /* centre tous les enfants */
  }

  /* l’image se cale automatiquement au centre */
  .definition-container .image-colonne{
    width:100%;
    display:flex;
    justify-content:center;   /* centre en X */
  }
  .definition-container .image-colonne img{
    max-width:340px;          /* largeur souhaitée */
    width:90%;
    height:auto;
  }
}
@media (max-width: 768px){
  .eco-grid{
    grid-template-columns: repeat(2,1fr) !important; /* 2 colonnes tablette */
    gap:1.5rem !important;
  }
}

@media (max-width: 520px){
  .eco-grid{
    grid-template-columns: 1fr !important;           /* 1 colonne mobile */
    gap:1.25rem !important;
  }
}
@media (max-width: 760px){
  /* le conteneur passe en colonne et centre son contenu */
  .style-eco__container{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;               /* titre + texte centrés */
    gap: 1.75rem;
  }

  /* bloc image : 100 % de la largeur, centré */
  .style-eco__image{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* l’image elle-même : largeur fluide, jamais trop grande */
  .style-eco__image img{
    width: 90%;
    max-width: 320px;     /* ajuste à ta convenance */
    height: auto;
  }
}
/* ======= STYLE-ECO : tablette / mobile paysage (alignement parfait) ======= */
@media (max-width: 1020px){

  /* On remplace le flex-row par un grid 2 colonnes de hauteur identique */
  .style-eco__container{
    display:grid !important;
    grid-template-columns:1fr 40%;   /* texte 60 % – image 40 % */
    align-items:center;              /* centre verticalement les deux cellules */
    gap:1.75rem;
  }

  /* cellule image : on centre le contenu dans la cellule */
  .style-eco__image{
    display:flex !important;
    justify-content:center;          /* centre horizontalement l’img */
  }

  .style-eco__image img{
    width:100%;      /* occupe toute sa colonne 40 % */
    max-width:380px; /* limite absolue ; ajuste si nécessaire */
    height:auto;
  }

  /* on garde le texte aligné à gauche mais on peut le centrer si tu préfères :
     .style-eco__texte{text-align:center;}   */
}
/* =====  MOBILE PORTRAIT STRICT (≤ 760 px) : pile verticale garantie  ===== */
@media (max-width:760px){
  /* 1️⃣ on annule Grid / Flex et on redevient un simple bloc empilé */
  .style-eco__container{
    display:block !important;     /* plus de grid/flex */
    text-align:center;            /* texte centré si souhaité */
    margin-inline:auto;           /* garde le centrage horizontal */
  }

  /* 2️⃣ image sous le texte, centrée et dimensionnée */
  .style-eco__image{
    margin:1.5rem auto 0 auto;    /* espace au-dessus & centrage */
    max-width:320px;              /* largeur max — ajuste au besoin */
    width:90%;                    /* largeur fluide */
  }
  .style-eco__image img{
    width:100%;
    height:auto;
  }
}
/* Très grand écran (≥ 1400 px) on élargit un peu */
@media(min-width:1400px){
  :root{ --container-max:1400px }
}