/* ============================= */
/* HERO PRODUITS */
/* ============================= */

.prodotti-bandeau{
  width:100%;
  overflow:hidden;
  line-height:0; /* supprime espace sous image */
  
}

.prodotti-bandeau-inner{
  width:100%;
  padding:0;
}

.prodotti-bandeau-image{
  width:100%;
  height:auto;
  display:block;
}

.prodotti-bandeau-image{
  width:100%;
  height:auto;
  display:block;
  transition:transform 8s ease;
}

.prodotti-bandeau:hover img{
  transform:scale(1.03);
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */



/* ============================= */
/* AJUSTEMENT DESKTOP – COLLER LE BANDEAU AU HEADER */
/* ============================= */

@media (min-width: 1025px) {
  .prodotti-bandeau {
    margin-top: -140px;
  }
}

/* ============================= */
/* SECTION INTRO PRODUITS */
/* ============================= */

.prodotti-intro {
  background-color: #faf8f4; /* blanc chaud comme l’image */
  padding: 120px 0 140px;
}

.prodotti-intro-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}

/* TITRE */
.prodotti-intro-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  color: #1e1e1e;
  margin-bottom: 40px;
}

/* TEXTE */
.prodotti-intro-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.9;
  color: #3a3a3a;
  max-width: 900px;
}
/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 1024px) {

  .prodotti-intro {
    padding: 100px 0 120px;
  }

  .prodotti-intro-container {
    padding: 0 40px;
  }

  .prodotti-intro-text {
    font-size: 17px;
  }
}

@media (max-width: 768px) {

  .prodotti-intro {
    padding: 80px 0 100px;
  }

  .prodotti-intro-container {
    padding: 0 20px;
  }

  .prodotti-intro-title {
    font-size: 34px;
  }

  .prodotti-intro-text {
    font-size: 16px;
    line-height: 1.7;
  }
}
/* ============================= */
/* GRID PRODOTTI */
/* ============================= */

.prodotti-grid-section {
  background-color: #ffffff;
  padding: 120px 0 140px;
}

.prodotti-grid {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 60px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
/* ============================= */
/* CARD PRODOTTO */
/* ============================= */

.prodotto-card {
  background: #f4f2ef;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.prodotto-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* IMAGE */
.prodotto-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* TEXTE */
.prodotto-content {
  padding: 28px;
  text-align: center;
}

.prodotto-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #1e1e1e;
}
/* ============================= */
/* RESPONSIVE */
/* ============================= */

/* TABLET */
@media (max-width: 1024px) {
  .prodotti-grid {
    grid-template-columns: repeat(3, 1fr); /* 🔥 reste à 3 colonnes */
    gap: 36px;
    padding: 0 40px;
  }

  .prodotto-image img {
    height: 280px;
  }
}


/* MOBILE */
@media (max-width: 768px) {
  .prodotti-grid-section {
    padding: 90px 0 110px;
  }

  .prodotti-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 24px;
  }

  .prodotto-image img {
    height: 260px;
  }

  .prodotto-content h3 {
    font-size: 17px;
  }
}
/* ============================= */
/* SECTION SERVIZI – IMAGE FULL */
/* ============================= */

.prodotti-servizi-image {
  width: 100%;
  background-color: #5b3519; /* cohérence Ortomì */
  overflow: hidden;
}

.prodotti-servizi-image img {
  width: 100%;
  height: auto;          /* 🔥 image jamais déformée */
  display: block;        /* supprime espaces blancs */
  max-width: 100%;
}
/* ============================= */
/* MOBILE – IMAGE COMPLÈTE */
/* ============================= */

@media (max-width: 768px) {
  .prodotti-servizi-image {
    background-color: transparent; /* 🔥 pas de bande marron */
  }

  .prodotti-servizi-image img {
    height: auto;
    object-fit: contain; /* 🔥 image ENTIEREMENT visible */
  }
}
@media (max-width: 1024px) {
  .prodotti-servizi-image img {
    height: auto;
    object-fit: contain;
  }
}