/* Fond de page */
.home-header {
  margin-top: 50px;
    background-attachment: fixed;
      background-position: center;
    background-size: cover;
   height: clamp(70vh, 165vw, 100vh);  /* min 60vh, max 100vh */
  background-color: #FF8904;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  position:relative;
}


.photo-stack {
  top: 28px;
  position: relative;
  width: 95%;          /* prend toute la largeur du parent */
  max-width: 450px;     /* limite la taille max */
  height: clamp(60vh, 150vw, 100vh);  /* min 60vh, max 100vh */
}

.photo-stack .photo {
  
  position: absolute;
  
  top: 50%; left: 50%;
  width: 80%;           /* taille relative au conteneur */
  height: auto;         /* conserve le ratio */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  border: 12px solid #FEFCE8;
  opacity: 0;
  animation: appear 1.5s ease forwards;
  transform: translate(-50%, -50%) rotate(0deg);
}

@keyframes appear-loop {
  0%, 20%   { opacity: 0; }
  25%, 75%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* Exemple de rotations différentes */
.photo-stack .photo:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0s; }
.photo-stack .photo:nth-child(2) { transform: translate(-50%, -50%) rotate(8deg); animation-delay: 2s; }
.photo-stack .photo:nth-child(3) { transform: translate(-50%, -50%) rotate(-5deg); animation-delay: 4s; }
.photo-stack .photo:nth-child(4) { transform: translate(-50%, -50%) rotate(15deg); animation-delay: 6s; }
.photo-stack .photo:nth-child(5) { transform: translate(-50%, -50%) rotate(-12deg); animation-delay: 8s; }
.photo-stack .photo:nth-child(6) { transform: translate(-50%, -50%) rotate(3deg); animation-delay: 10s; }
.photo-stack .photo:nth-child(7) { transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0s; }
.photo-stack .photo:nth-child(8) { transform: translate(-50%, -50%) rotate(8deg); animation-delay: 2s; }
.photo-stack .photo:nth-child(9) { transform: translate(-50%, -50%) rotate(-5deg); animation-delay: 4s; }
.photo-stack .photo:nth-child(10) { transform: translate(-50%, -50%) rotate(15deg); animation-delay: 6s; }
.photo-stack .photo:nth-child(11) { transform: translate(-50%, -50%) rotate(-12deg); animation-delay: 8s; }
.photo-stack .photo:nth-child(12) { transform: translate(-50%, -50%) rotate(3deg); animation-delay: 10s; }

/* Flèche de scroll*/
.scroll-down {
  position: absolute;
  bottom: clamp(20px, 5vw, 80vh);  /* positionne en bas de la section */
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;        /* taille de la flèche */
  color: black;         /* couleur visible sur le fond */
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 1000;            /* pour être au-dessus des images */
}

/* Animation simple de rebond */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}



.main-content-home {
    position: relative;
    z-index: 1;
}
/* Section description */
.introduction {
    display: flex;
    flex-direction: column; /* pour empiler image + texte verticalement */
    padding: 90px 48px 48px 48px; /* padding-top + padding horizontal + padding-bottom */
    align-items: center; 
    justify-content: flex-start; /* contenu en haut */
    background-color: #FEFCE8;
    height: auto; /* supprime la hauteur fixe */
}

.intro-image {
  display: block;          /* nécessaire pour centrer avec margin auto */
  width: 100%;             /* responsive, s'adapte à l'écran */
  max-width: 350px;        /* taille maximale */
  height: auto;            /* garde les proportions */
  margin: 0 auto 20px auto; /* centre horizontalement et espace en bas */
}

.text-introduction p {
  text-align: center;
   padding-left: clamp(0px, 2vw, 340px);
  padding-right: clamp(0px, 2vw, 340px);
    font-size: clamp(1.2rem, 6vw, 3rem);
}
.button-introduction {
  display: flex;
  justify-content: center; /* centre le bouton horizontalement */
  margin-top: 80px;
  margin-bottom: 48px;
  font-size: 1.25rem;
}

/* Cartes */

.cards-section {
    padding: 48px 0;
        background-color: #FEFCE8;
}
.cards-section h2 {
     font-size: clamp(2.5rem, 10vw, 4rem);
 
    padding-left: 2rem;   /* rem au lieu de px, plus responsive */
    margin-bottom: 20px;
    font-weight: bold;
  font-family: "Pacifico", cursive;
  font-weight: 400;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: center;
    padding: 48px;
    box-sizing: border-box; /* <-- évite que le padding fasse déborder */
    max-width: 100%;        /* <-- sécurité */
    overflow-x: hidden;     /* <-- évite le scroll horizontal si jamais */
}

/* ---- Carte ---- */
.card {
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 760px;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    padding: 2%; /* padding relatif */
}

/* ---- Image ---- */
.card-image {
  width: 80%;                     /* largeur du cadre */
  aspect-ratio: 1 / 1.2;          /* ratio fixe du cadre */
  background-color: #FEFCE8;
  border: 0.8em solid #2b1a10;
  border-radius: 8px;
  display: flex;                  /* pour centrer l’image */
  justify-content: center;
  align-items: center;
  margin: 6% auto 0;
  overflow: hidden;               /* évite le débordement */
}

.card-image img {
  height: auto;
  object-fit: contain;             /* garde les proportions */
}

/* différentes tailles visuelles par carte (via width relative) */
.card1 .card-image img { width: 50%; }
.card2 .card-image img { width: 60%; }
.card3 .card-image img { width: 70%; }
.card4 .card-image img { width: 80%; }
.card5 .card-image img { width: 110%; }



/* ---- Titre ---- */
.card-title {
    color: #FFFFE3;
     font-weight: bold;
  font-family: "Pacifico", cursive;
  font-weight: 400;
    font-size: clamp(1.5rem, 2vw, 4rem); /* taille fluide */
    padding: 5% 0 2%;
    text-align: center;
}

/* ---- Texte ---- */
.card-text {
    color: black;
    font-size: clamp(0.9rem, 1.5vw, 2rem); /* taille fluide */
    text-align: center;
    padding: 0 10%;
    line-height: 1.4;
}
.card-text-taille {
  color: black;
     font-weight: bold;
  font-family: "Pacifico", cursive;
  font-weight: 400;
 font-size: clamp(1.5rem, 1.5vw, 3rem); /* taille fluide */
    text-align: center;
    padding: 0 10%;
    line-height: 1.4;
}
.card-text-prix {
  color: black;
   font-weight: bold;
  font-family: "Pacifico", cursive;
  font-weight: 400;
    font-size: clamp(1.5rem, 1.5vw, 3rem); /* taille fluide */
    text-align: center;
    padding: 0 10%;
    line-height: 1.4;
}

/* ---- Responsive ---- */
.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cartes côte à côte */
    gap: 30px;
    justify-content: center;
}

/* ---- Backgrounds ---- */
.card1 { background: #F54927; }
.card2 { background: #C27AFF; }
.card3 { background: #46ECD5; }
.card4 { background: #FFDF20; }
.card5 { background: #E7180B; }

.button-introduction img {
  width: 95%;
  max-width: 350px;

}
/* Section Happening */
.happening {
    display: flex;
    flex-direction: column; /* pour empiler image + texte verticalement */
    padding: 80px 48px 48px 48px; /* padding-top + padding horizontal + padding-bottom */
    align-items: center; 
    justify-content: flex-start; /* contenu en haut */
    background-color: #FEFCE8;
    height: auto; /* supprime la hauteur fixe */
}
.titre-happening {
    padding: 0px 0px 48px;
    color: #2B1A10;
    text-align: center;
    font-size: 3rem;
    font-weight: 300;
}
.text-happening p {
    line-height: 1.4;
    font-weight: 400;
    padding: 0px 0px 48px;
    font-size: 1rem;
     color: #2B1A10;
     text-align: center;
}
.button-happening {
  display: flex;
  justify-content: center; /* centre le bouton horizontalement */
  margin-top: 40px;
  margin-bottom: 48px;
  font-size: 1.25rem;
}
.button-happening a {
  display: inline-flex;          /* aligne texte + image sur une même ligne */
  align-items: center;           /* centre verticalement */
  gap: 8px;                      /* espace entre le texte et le logo */
  text-decoration: none;
}

.button-happening img {
  height: 20px;                  /* ajuste la taille du logo */
  width: auto;
}

/*---- Espace photo -------*/
.photo-scatter {
    position: relative;
    width: 100%;
   height: clamp(300px, 80vw, 1500px); /* hauteur responsive */
    background-color: #FEFCE8; /* optionnel, pour voir la section */
    overflow: hidden;
   
}

.photo-scatter-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ---- Style commun aux photos ---- */
.photo-scatter img.scatter {
    position: absolute;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---- Position et taille individuelle ---- */
.scatter1 { top: 5%; left: 8%; width: 20%; }
.scatter2 { top: 8%; left: 30%; width: 44%; }
.scatter3 { top: 0%;  left: 77%; width: 25%; }
.scatter4 { top: 50%; left: 65%; width: 29%; }
/* .scatter5 { top: 45%;  left: 20%; width: 35%; } */
.scatter6 { top: 45%;  left: 20%; width: 33%; }
/* ---- Responsive mobile < 768px ---- */
.scatter7 { top: 5%;  left: 8%; width: 20%; }
.scatter8 { top: 4%; left: 30%; width: 30%; } 
.scatter9 { top: 0%;  left: 67%; width: 25%; }
.scatter10 { top: 45%;  left: 72%; width: 25%; }
.scatter11 { top: 55%;  left: 15%; width: 25%; }




@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr; /* une carte par ligne */
    }
    .card-title {
    font-size: clamp(1.5rem, 6vw, 3rem); /* taille fluide */
}

/* ---- Texte ---- */
.card-text {
    font-size: clamp(0.7rem, 3.6vw, 2rem); /* taille fluide */
}

}
@media (max-width: 576px) {
  .titre-happening  {
    font-size: 2rem;
       padding: 0px 0px 24px;
  }
  .text-happening p {
 
    padding: 0px 0px 24px;
  }
  .happening {
    padding: 20px 20px;
  }
  .button-happening {
      margin-top: 0px;
  }
.cards-section {
     padding: 24px 0;
}
    .cards-container {
        grid-template-columns: 1fr; /* une carte par ligne */
         padding: 20px;
    }
    .card-title {
    font-size: clamp(1.5rem, 6vw, 3rem); /* taille fluide */
}

/* ---- Texte ---- */
.card-text {
    font-size: clamp(0.5rem, 4vw, 2rem); /* taille fluide */
    padding: 0px;
}
.section-title {
  padding-left: 20px;
}
.introduction {
  padding: 10px 10px;
}
.button-introduction {
text-align:center;
padding: 0px 10px;
margin-top: 30px;
margin-bottom: 30px;
}
.container-introduction {
  padding: 5px;
}
}

/*---------Espace pieds page ----------*/
.main-content-pieds {
    position: relative;
    z-index: 1;
}
/* Section description */
.pieds {
    display: flex;
    flex-direction: column; /* pour empiler image + texte verticalement */
   
    align-items: center; 
    justify-content: flex-start; /* contenu en haut */
    background-color: #FEFCE8;
    height: auto; /* supprime la hauteur fixe */
}

.intro-pieds {
  display: block;          /* nécessaire pour centrer avec margin auto */
  width: 100%;             /* responsive, s'adapte à l'écran */
  max-width: 350px;        /* taille maximale */
  height: clamp(160px, 60vw, 350px); /* hauteur responsive */
  margin: 0 auto 20px auto; /* centre horizontalement et espace en bas */
}

.image-section {
  background-color: #FEFCE8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 60px 0px;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* important pour que le centrage fonctionne */
}

.image-section img {
  max-width: 90%;
  height: auto;
  display: block;
}

/*------------------------------------------*/
.header-contact {
    position: relative; /* nécessaire pour le positionnement absolu du volet */
    display: inline-block;
}

#contact-button {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 2rem);
  color: #fff3e0;
  background-color: #4B2E00;
  width: clamp(120px, 15vw, 400px);
  border: none;
  padding: 0.35rem 1.2em;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.3s;
  min-height: 20px;

}

.contact-info {
    position: absolute; /* le volet descend sans déplacer le bouton */
    top: 100%; /* juste en dessous du bouton */
    left: 50%; /* centre horizontalement */
    transform: translateX(-50%); /* ajuste le centre exact */
    width: 260px; /* largeur fixe */
    text-align: center;
    background-color: #FF8904;
    border-radius: 5px;
    overflow: hidden;
    max-height: 0;
    padding: 0 1em;
    transition: max-height 0.5s ease, padding 0.5s ease;
    z-index: 10;
}


.contact-info.open {
    max-height: 200px; /* ajustable selon le contenu */
    padding: 1em;
    font-size: 1rem;
}