/* ============================================================
   GLOBAL
   ============================================================ */
.navbar {
  z-index: 5;
  background-color: transparent;
}

.navbar-brand,
.navbar-nav .nav-link {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.navbar-brand:hover,
.navbar-nav .nav-link:hover {
  color: #f8f9fa;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.navbar button {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.navbar button:hover {
  color: #fff;
  text-shadow: none;
}

.navbar-nav .nav-item.active .nav-link {
  background-color: #007bff;
  color: #fff;
  text-shadow: none;
}


/* ============================================================
   HOME — Carousel
   ============================================================ */
.cover-container {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cover-container .carousel-inner,
.cover-container .carousel-item {
  height: 100%;
}

@media (max-width: 768px) {
  .cover-container {
    height: 60vh;
    max-height: 70vh;
  }
}


/* ============================================================
   HERO SECTION — Conteneur principal
   Desktop : plein viewport
   Mobile  : hauteur dictée par aspect-ratio → jamais de zones grises
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .hero-section {
    height: auto;
    aspect-ratio: 4 / 3; /* ✏️ ajuste au ratio réel de ton image */
  }
}

@media (max-width: 576px) {
  .hero-section {
    height: auto;
    aspect-ratio: 3 / 4; /* portrait pour voir plus de l'image */
  }
}


/* ============================================================
   COUCHE 1 — Image de fond
   Toujours cover : remplit le conteneur sans zones grises
   ============================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/cover/Lobbyhome.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}


/* ============================================================
   COUCHE 2 — Contenu
   ============================================================ */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}


/* ============================================================
   TITRE
   ============================================================ */
.hero-title {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  color: white;
  font-family: Classico, cursive;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: bold;
  letter-spacing: 0.04em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  white-space: normal;
  line-height: 1.2;
}

@media (max-width: 576px) {
  .hero-title {
    top: 30%;
    font-size: clamp(1.6rem, 8vw, 3rem);
  }
}


/* ============================================================
   HERO ITEM (blockquote...)
   ============================================================ */
.hero-item {
  position: absolute;
  bottom: 42%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  max-width: 90vw;
  white-space: normal;
  line-height: 1.2;
}


/* ============================================================
   HERO-BADGES-MOBILE — wrapper invisible, ancre les badge-items
   ============================================================ */
.hero-badges-mobile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}


/* ============================================================
   HERO-BADGE-ITEM — positionné librement par son id
   ============================================================ */
.hero-badge-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}

/* Pulse sur le SVG uniquement — la card n'est pas affectée */
.hero-badge-item svg {
  display: block;
  animation: pulse 2.5s infinite ease-in-out;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.hero-badge-item:hover svg {
  animation-play-state: paused;
  transform: scale(1.18);
  filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.35));
}

@keyframes pulse {
  0%, 100% { transform: scale(0.9); }
  50%       { transform: scale(1); }
}


/* ============================================================
   POSITIONNEMENT PAR ID
   ============================================================ */

#hero-coffee   { top: 40%; right: 85%; }
#hero-speaker  { top: 55%; right: 65%; }
#hero-terrasse { top: 50%; right: 5%;  }

/* Tablette — badges gauche basculent en left pour éviter le débord */
@media (max-width: 991.98px) {
 
  #hero-coffee   { right: auto; left: 10%; }
  #hero-speaker  { right: auto; left: 30%; }
  #hero-terrasse { right: 5%; }
}

/* Mobile — regroupement en ligne sous "Coffee and Chill" */
@media (max-width: 576px) {
  .hero-badges-mobile {
    inset: auto;
    /* "Coffee and Chill" est à bottom:42%, on place les badges juste en dessous */
    bottom: 18%;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1.4rem;
    align-items: center;
    width: max-content;
  }

  .hero-badge-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .hero-badge-item svg {
    width: 28px;
    height: 28px;
  }
}


/* ============================================================
   BADGE-CARD — apparaît au hover
   ============================================================ */
.badge-card {
  position: absolute;
  z-index: 10;
  width: 220px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, margin-top 0.22s ease;

  top: calc(100% + 10px);
  left: 0;
  margin-top: 6px;

  /* Isolation totale du pulse parent */
  animation: none !important;
  transform: none !important;
  will-change: opacity;
}

.hero-badge-item:hover .badge-card {
  opacity: 1;
  pointer-events: auto;
  margin-top: 0;
}

/* Card vers la gauche */
.hero-badge-item.card-left .badge-card {
  left: auto;
  right: 0;
}

/* Card vers le haut */
.hero-badge-item.card-top .badge-card {
  top: auto;
  bottom: calc(100% + 10px);
  margin-top: 0;
  margin-bottom: 6px;
}

.hero-badge-item.card-top:hover .badge-card {
  margin-bottom: 0;
}

/* Mobile — card centrée AU-DESSUS de l'icône pour ne pas être coupée */
@media (max-width: 576px) {
  .badge-card {
    width: 170px;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    margin-bottom: 6px;
  }

  .hero-badge-item:hover .badge-card {
    transform: translateX(-50%) !important;
    margin-bottom: 0;
  }
}


/* ============================================================
   TERRASSE BG
   Même logique que hero-section : aspect-ratio sur mobile
   pour que le titre reste dans l'image
   ============================================================ */
.terrasse-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .terrasse-section {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 576px) {
  .terrasse-section {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

.terrasse-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/cover/Terrasses.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

@media (max-width: 576px) {
  .terrasse-bg {
    background-image: url('images/cover/terrasse_mobile.jpg');
  }
}

.terrasse-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
}


/* ============================================================
   LAYOUT
   ============================================================ */
#title-block2  { margin-left: 30%; }
#title-right   { margin-left: 60%; }
#title-left    { margin-left: 23%; }

.card-group .card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .card-group .card img {
    height: 150px;
  }
}


/* ============================================================
   ANIMATIONS SCROLL
   ============================================================ */
.scroll-section {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 1.2s;
}

.scroll-section.animate {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================================
   ACCORDION CUSTOM
   ============================================================ */
.accordion-item-made {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-header-made {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-content-made {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item-made.active .accordion-header-made {
  background-color: #e0e0e0;
}

.accordion-item-made.active .accordion-content-made {
  max-height: 100%;
}

/* Images des rooms — ratio responsive, plus de hauteur fixe */
.room-img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* ✏️ ajuste au ratio de tes photos de chambres */
  object-fit: cover;
}

/* ============================================================
   DIVERS
   ============================================================ */
.fsblock  { height: 100vh; }
.homeimg  { padding: 30px 60px 40px; }
.bg-1     { background-color: #1e0f0f; }
.bg-3     { background-color: #56483b; }


/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.section-title {
  position: relative;
  padding: 0.6em;
  font-family: Classico, cursive;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: bold;
  font-style: normal;
  color: white;
  z-index: 3;
}

.section-title2 {
  font-family: Classico, cursive;
  font-size: clamp(1rem, 3vw, 2.5rem);
  font-weight: bold;
  font-style: normal;
  color: white;
}
.section-title3 {
  font-family: Classico, cursive;
  font-size: clamp(1.5rem, 5vw, 4rem);
  font-weight: bold;
  font-style: normal;
  color: white;
}

.acc-title {
  font-family: Classico, cursive;
  font-weight: bold;
  font-style: normal;
}

.section-text {
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
  color: white;
}

@media (max-width: 576px) {
  .section-title  { font-size: clamp(1.6rem, 8vw, 3rem); }
  .section-text   { font-size: clamp(0.7rem, 8vw, 1rem); }
}


/* ============================================================
   Q&A
   ============================================================ */
.qa {
  background-color: #f7f7f7;
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.question { font-size: 1.5em; margin-bottom: 10px; }
.answer   { font-size: 1.2em; }


/* ============================================================
   FOOTER
   ============================================================ */
footer {
  margin-top: 0;
  padding-top: 0;
  background-image: url("./images/cover/footer.png");
  background-size: cover;
  background-position: center;
}


/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'Dancing';
  src: url('./font/Dancing.ttf') format('truetype');
}

@font-face {
  font-family: 'Classico';
  src: url('./font/Classico/Other Font Files/ClassicoBold.woff2') format('woff2'),
       url('./font/Classico/Other Font Files/ClassicoBold.woff') format('woff'),
       url('./font/Classico/Other Font Files/ClassicoBold.ttf') format('truetype'),
       url('./font/Classico/Other Font Files/ClassicoBold.svg#ClassicoBold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Classico';
  src: url('./font/Classico/Other Font Files/ClassicoRegular.woff2') format('woff2'),
       url('./font/Classico/Other Font Files/ClassicoRegular.woff') format('woff'),
       url('./font/Classico/Other Font Files/ClassicoRegular.ttf') format('truetype'),
       url('./font/Classico/Other Font Files/ClassicoRegular.svg#ClassicoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Satisfy";
  src: url('./font/Satisfy.ttf') format('truetype');
}

@font-face {
  font-family: "Lobster";
  src: url('./font/Lobster.ttf') format('truetype');
}

@font-face {
  font-family: "Caveat";
  src: url('./font/Caveat.ttf') format('truetype');
}