/* ============================= */
/* HERO MELONE */
/* ============================= */

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

/* picture + img full width */
.melone-hero picture,
.melone-hero img {
  width: 100%;
  display: block;
}

/* ===== DESKTOP ===== */
.melone-hero img {
  width: 100%;
  height: auto;              /* ✅ laisse l’image garder sa hauteur naturelle */
  object-fit: contain;       /* ✅ image entière, jamais coupée */
  display: block;
}


/* ============================= */
/* MOBILE + TABLET */
/* ============================= */
@media (max-width: 1024px) {

  .melone-hero {
    background-color: transparent; /* 🔥 pas de bande marron */
  }

  .melone-hero img {
    height: auto;
    min-height: unset;
    object-fit: contain; /* image entière */
  }
}
/* ============================= */
/* TITRE HERO MELONE – CENTRÉ */
/* ============================= */

.melone-hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 🔥 centrage parfait */

  z-index: 5;

  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;

  color: #5b3519; /* marron Ortomì */
  text-align: center;

  font-size: clamp(70px, 8vw, 180px);


  pointer-events: none;
}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1024px) {

  .melone-hero-title {
    font-size: clamp(70px, 9vw, 120px);
    letter-spacing: 3px;
  }

}

/* ============================= */
/* MOBILE – AJUSTEMENT FIN (PLUS HAUT + PLUS GRAND) */
/* ============================= */

@media (max-width: 768px) {

  .melone-hero-title {
    top: 30%;                 /* 🔥 remonte encore vers le haut */
    font-size: 52px;          /* 🔥 titre plus impactant */
    letter-spacing: 2.5px;
  }

}
/* ============================= */
/* BANDEAU CALENDARIO MELONE */
/* ============================= */

.melone-calendario-section {
  position: relative;
  background-color: #5b3519;
  padding: 110px 0 180px;
  overflow: hidden;
}

/* CONTENEUR */
.melone-calendario-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  text-align: center;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

/* ============================= */
/* ICÔNE CALENDRIER (PURE CSS) */
/* ============================= */

.calendar-icon {
  width: 90px;
  height: 80px;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
}

/* barre du haut */
.calendar-top {
  height: 18px;
  background: #5b3519;
  border-radius: 10px 10px 0 0;
}

/* grille */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
}

.calendar-grid span {
  width: 10px;
  height: 10px;
  background: #5b3519;
  border-radius: 2px;
}

/* ============================= */
/* TEXTE */
/* ============================= */

.melone-calendario-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 10px;
}

.melone-calendario-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: 2px;
}

/* ============================= */
/* FIN ONDULÉE (IDENTIQUE RICETTA) */
/* ============================= */

.melone-calendario-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
   bottom: -3px;

  height: 160px;
  background: #ffffff;
  z-index: 1;

  clip-path: path(
    "M0,40 C200,120 400,0 720,50 1000,100 1200,140 1440,60 L1440,160 L0,160 Z"
  );
}

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

@media (max-width: 1024px) {
  .melone-calendario-section {
    padding: 90px 0 200px;
  }
}

@media (max-width: 768px) {
  .melone-calendario-section {
    padding: 80px 0 180px;
  }

  .melone-calendario-container {
    padding: 0 20px;
  }

  /* sécurité anti ligne blanche */
  .melone-calendario-section::after {
    bottom: -2px;
  }
}
/* ============================= */
/* SECTION DESCRIZIONE MELONE */
/* ============================= */

.melone-descrizione-section {
  background-color: #ffffff;
  padding: 70px 0 120px; /* 🔥 contenu remonté */
}

.melone-descrizione-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ============================= */
/* TEXTE */
/* ============================= */

.melone-descrizione-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.9;
  color: #333;
}

.melone-descrizione-text strong {
  color: #5b3519;
}

/* ============================= */
/* IMAGE */
/* ============================= */

.melone-descrizione-image img {
  width: 100%;
  max-width: 460px;
  display: block;
  margin: 0 auto;
}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1024px) {

  .melone-descrizione-container {
    gap: 60px;
    padding: 0 40px;
  }

  .melone-descrizione-text p {
    font-size: 17px;
  }
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 768px) {

  .melone-descrizione-section {
    padding: 70px 0 100px;
  }

  .melone-descrizione-container {
    grid-template-columns: 1fr;   /* 🔥 texte puis image */
    gap: 50px;
    padding: 0 20px;
  }

  .melone-descrizione-text {
    text-align: center;
  }

  .melone-descrizione-text p {
    font-size: 16px;
    line-height: 1.7;
  }
}
/* ============================= */
/* FIX iPAD – SUPPRESSION LIGNE ENTRE SECTIONS */
/* ============================= */

@media (max-width: 1024px) {

  .melone-descrizione-section {
    margin-top: -3px; /* 🔥 clé absolue */
  }

}
/* ============================= */
/* FIX iPAD – CONTINUITÉ PARFAITE DES SECTIONS */
/* ============================= */

.melone-descrizione-section {
  position: relative;
}

/* ============================= */
/* CTA SCOPRI TUTTE LE RICETTE */
/* ============================= */

.cta-ricette {
  background: #ffffff;
  padding: 40px 0 120px;
  display: flex;
  justify-content: center;
}

/* BOUTON */
.cta-ricette-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 22px 64px;
  border-radius: 999px;

  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: #5b3519;
  background: #ffffff;

  border: 2px solid #5b3519;
  text-decoration: none;

  transition: 
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.cta-ricette-button:hover {
  background: #5b3519;
  color: #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {

  .cta-ricette {
    padding: 30px 0 90px;
  }

  .cta-ricette-button {
    padding: 18px 40px;
    font-size: 14px;
    letter-spacing: 1.2px;
  }
}

/* Overlay léger pour lisibilité */
.ricette-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* TEXTE CENTRÉ */
.ricette-hero-title {
  position: relative;
  z-index: 2;

  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 10vw, 140px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;

  color: #ffffff;
  text-align: center;

  text-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

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

@media (max-width: 1024px) {
  .ricette-image-hero {
    height: 80vh;
  }

  .ricette-hero-title {
    letter-spacing: 4px;
  }
}

@media (max-width: 768px) {
  .ricette-image-hero {
    height: 70vh;
  }

  .ricette-hero-title {
    letter-spacing: 2px;
  }
}
/* ============================= */
/* GRID RICETTE */
/* ============================= */

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

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

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

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

.ricette-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* ============================= */
/* IMAGES RICETTE MELONE – VERSION SIMPLE */
/* ============================= */

.ricetta-card {
  display: block;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.ricetta-card img {
  width: 100%;
  height: auto;          /* 🔥 image affichée entièrement */
  object-fit: contain;   /* 🔥 jamais coupée */
  display: block;
}

/* ============================= */
/* GRID RICETTE */
/* ============================= */

.ricette-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;

  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop + iPad */
  gap: 40px;
}

/* ============================= */
/* TABLET (iPad) */
/* ============================= */

@media (max-width: 1024px) {
  .ricette-grid {
    grid-template-columns: repeat(3, 1fr); /* 🔥 toujours 3 */
    padding: 0 40px;
    gap: 30px;
  }
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 768px) {
  .ricette-grid {
    grid-template-columns: 1fr; /* 🔥 1 image par ligne */
    padding: 0 20px;
    gap: 30px;
  }
}

/* ============================= */
/* DECORATION FEUILLE GAUCHE */
/* ============================= */

.decor-leaf-left{
  position: absolute;
  left: -40px;
  top: 40px;

  width: 220px;
  opacity: 0.25;

  pointer-events: none;
  z-index: 1;

  animation: leafFloat 6s ease-in-out infinite;
}

/* animation douce */

@keyframes leafFloat {

  0%{
    transform: translateY(0px) rotate(0deg);
  }

  50%{
    transform: translateY(-12px) rotate(-2deg);
  }

  100%{
    transform: translateY(0px) rotate(0deg);
  }

}

/* ============================= */
/* DECORATION FEUILLE DROITE */
/* ============================= */

.decor-leaf-right{
  position:absolute;
  right:-40px;
  top:40px;

  width:220px;
  opacity:0.25;

  pointer-events:none;
  z-index:1;

  animation:leafFloatRight 7s ease-in-out infinite;
}

@keyframes leafFloatRight{

  0%{
    transform:translateY(0px) rotate(0deg);
  }

  50%{
    transform:translateY(-10px) rotate(2deg);
  }

  100%{
    transform:translateY(0px) rotate(0deg);
  }

}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width:768px){

.decor-leaf-left{
  width:120px;
  left:-20px;
  top:20px;
  opacity:0.18;
}

.decor-leaf-right{
  width:120px;
  right:-20px;
  top:20px;
  opacity:0.18;
}

}