/* Désactive le défilement horizontal */
body {
  overflow-x: hidden;
}

.btn {
  width: 122px;
}

/* Définit la hauteur du logo tout en maintenant la largeur proportionnelle */
.custom-logo {
  height: 100px;
  width: auto;
}

/* Limite la largeur maximale de l'image du logo et ajuste la hauteur proportionnellement */
.custom-logo-link img {
  max-width: 100px;
  height: auto;
}

.flex-row-reverse-custom {
  display: flex;
  flex-direction: row-reverse;
}

/* Change la couleur du texte de la classe 'question' au survol */
.question:hover {
  color: #93452a; /* Utilise la couleur Custom Cara */
}

/* Fixe la largeur des boutons à 172px */
.btn-width {
  width: 172px;
}

/* Sous-menu masqué par défaut */
.group-hover\:block {
  display: none;
}

/* Cible uniquement les éléments des sous-menus */
.submenu-item .inline-block::after {
  content: none;
}

/* Overlay Configuration */
#overlayDevis,
#overlayReservation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 90vh; /* Limite la hauteur */
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%); /* Cache en dessous de l'écran */
  z-index: 50;
}

#overlayDevis.active,
#overlayReservation.active {
  transform: translateY(0); /* Remonte l'overlay */
}

/* Assure l'espacement entre les éléments de menu */
nav ul.flex > li {
  margin-right: 32px;
}

nav ul.flex > li:last-child {
  margin-right: 0;
  /* Évite un surplus de marge sur le dernier élément */
}

/*select form*/
select[name="motif"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #fff; /* Pour s'assurer qu'il est visible */
  color: #000;
}

/* Styles personnalisés pour le select */
.custom-select {
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: white;
  color: black;
  height: 40px;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  appearance: none;
}

/* Assure un fond blanc et un texte noir pour les options du select */
.custom-select option {
  background-color: white;
  color: black;
}

.w-full {
  width: 100%;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.border {
  border: 1px solid #d1d5db;
} /* Ajustez la couleur si nécessaire */
.border-gray-300 {
  border-color: #d1d5db;
}
.rounded {
  border-radius: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.bg-customCara {
  background-color: #yourCustomColor;
}
.text-white {
  color: #ffffff;
}

/*Taille menu Desktop */
@media (min-width: 768px) {
  #mobile-menu {
    width: 509px !important;
    height: 100% !important;
  }
}

.submenu-regular {
  font-weight: 400; /* Police Regular */
}

/* Applique une hauteur équivalente à 5 lignes au text-area du formulaire*/
.textarea-5-rows {
  height: 10em; /* Ajuste cette valeur pour correspondre à 5 lignes de hauteur */
}

/*nav bar*/

nav ul li:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 5px; /* Ajuste selon la taille de la flèche */
}

/*index photo*/
@media (min-width: 768px) {
  .force-height-md {
    height: 320px !important;
  }
}

/*img page à propos*/

.img-fonda {
  height: 450px;
}

/*masquer captchat*/
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Titre caché (SEO / accessibilité) */
.hero-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-weight: 500;
}

/* Hero Nichée – base = DESKTOP */

#hero-nichee {
  background-color: #93452a; /* fond rouille */
  height: 573px; /* desktop */
  padding: 0 58px; /* 58 de chaque côté desktop */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

#hero-nichee-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: row; /* image gauche / texte droite desktop */
  align-items: center;
  justify-content: space-between;
  gap: 58px;
}

#hero-nichee-image {
  border-radius: 14px; /* desktop */
  overflow: hidden;
  width: 570px; /* desktop */
  height: 457px; /* desktop */
  margin: 0;
  background-color: rgba(0, 0, 0, 0.05);
}

#hero-nichee-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloc texte + boutons */
#hero-nichee-content {
  color: #fff;
  max-width: 430px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px; /* 32px entre titre et bloc boutons */
  align-items: center; /* titre & boutons centrés */
  text-align: center;
}

#hero-nichee-title {
  font-family: "Marcellus", serif;
  font-size: 32px; /* desktop */
  line-height: 1.3;
  margin: 0;
  font-weight: 500;
  text-align: center;
}

/* Bloc boutons */
#hero-nichee-buttons {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 320px;
  align-items: center; /* boutons centrés */
}

/* Bouton plein */
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 20px;
  border-radius: 8px;
  background-color: #fcf7f0; /* customBtnW */
  color: #93452a; /* customCara */
  border: 1px solid #fcf7f0;
  font-family: "Marcellus", serif;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

/* Bouton contour */
.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background-color: transparent;
  color: #fffefa; /* customW */
  border: 1px solid #fffefa;
  font-family: "Marcellus", serif;
  font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 20px;
}

.hero-btn-primary svg,
.hero-btn-secondary svg {
  flex-shrink: 0;
}

/* Titre caché pour SEO / accessibilité */
.hero-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- MOBILE ---------- */
@media (max-width: 1023px) {
  #hero-nichee {
    height: auto;
    padding: 40px 22px 48px;
    align-items: center;
  }

  #hero-nichee-inner {
    flex-direction: column;
    gap: 32px; /* ⬅ espace global plus petit */
    width: 100%;
    align-items: center;
  }

  /* On "aplatit" la colonne texte */
  #hero-nichee-content {
    display: contents;
  }

  /* 1. Titre en haut */
  #hero-nichee-title {
    order: 1;
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 4px; /* ⬅ très léger espace dessous */
  }

  /* 2. Image au milieu */
  #hero-nichee-image {
    order: 2;
    border-radius: 8px;
    width: 100%;
    max-width: 384px;
    margin: 0 auto;
    height: auto; /* ⬅️ important : on écrase le 457px desktop */
    background-color: rgba(0, 0, 0, 0.05);
  }

  #hero-nichee-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 384 / 265;
    object-fit: cover;
    display: block;
  }

  /* 3. Boutons en bas */
  #hero-nichee-buttons {
    order: 3;
    width: 100%;
    max-width: 320px;
    /* ⬇️ plus de margin-top ici */
    margin-top: 0;
    align-items: center;
    gap: 24px; /* ⬅ espace entre les deux boutons */
  }
}

/* Groupe des boutons (stack col, centrés) */
.cta-group-nichee {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* Bouton de base */
.cta-nichee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 8px;
  font-family: "Marcellus", serif;
  font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;
}

.cta-nichee-btn svg {
  flex-shrink: 0;
}

/* Variante pleine (bouton principal) */
.cta-nichee-btn--primary {
  background-color: #93452a; /* clair */
  color: #ffffff; /* rouille */
}

.cta-nichee-btn--primary:hover {
  background-color: #9f482a;
}

/* Variante contour (secondaire) */
.cta-nichee-btn--secondary {
  background-color: transparent;
  color: #93452a;
  border: 1px solid #93452a;
}

.cta-nichee-btn--secondary:hover {
  background-color: #d1d1d1;
}

/* Option : en ligne sur les grands écrans */
@media (min-width: 768px) {
  .cta-group-nichee {
  }
}

/*CARD ACCUEIL*/
/* SECTION SERVICES : spacing global */
.section-services-nichee {
  /* au cas où Tailwind ne s'applique pas comme prévu */
  margin-top: 48px;
  margin-bottom: 72px; /* évite que le footer colle aux cards */
}

/* CONTENEUR DES CARDS */
.section-services-nichee .services-grid {
  display: flex !important; /* override du 'grid' Tailwind */
  flex-direction: column; /* mobile : en colonne */
  gap: 24px; /* espace vertical entre les cards */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Desktop : cards en ligne */
@media (min-width: 1024px) {
  .section-services-nichee .services-grid {
    flex-direction: row; /* en ligne */
    gap: 32px; /* ton fameux gap de 32px */
    align-items: stretch;
  }

  /* chaque card prend 1/3 de la ligne */
  .section-services-nichee .services-grid > div {
    flex: 1 1 0;
  }

  .section-services-nichee {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .services-grid {
    margin-top: 0 !important;
  }
}

/* SECTION SERVICES : marge globale pour l'air avec le footer */
.section-services-nichee {
  margin-top: 48px;
  margin-bottom: 72px;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Conteneur de cards : flex + colonne sur mobile */
.section-services-nichee .services-grid {
  display: flex !important; /* écrase le grid */
  flex-direction: column;
  align-items: center; /* centre les cards */
  gap: 32px;
  width: 100%;
}

/* Chaque card = bloc de 384px max, centré */
.section-services-nichee .services-grid > div {
  width: 100%;
  max-width: 384px; /* ⬅ largeur des cards */
}

/* Le bloc coloré interne prend toute la largeur dispo */
.section-services-nichee .services-grid > div > a > div {
  width: 100%;
}

/* Desktop : cards en ligne, wrap si pas assez de place */
@media (min-width: 1024px) {
  .section-services-nichee .services-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px; /* gap de 32px sur desktop */
  }
}

/* Conteneur des cards : colonne sur mobile, ligne sur desktop */ /* Nos services – cards uniquement */
.card-service {
  /* largeur stricte */
  width: 384px !important;
  min-width: 384px;
  max-width: 384px;

  /* hauteur fixe */
  height: 540px !important;

  /* layout interne */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* image / texte / bouton alignés */
  align-items: center;
  gap: 24px; /* même espace partout */

  margin: 0 auto; /* centrage dans la colonne du grid */
}

.services-grid h3 {
  display: none;
}

/* SECTION "Vous avez une question ?" */
.nichee-contact-question {
  padding-bottom: 70px; /* 70px haut/bas, un peu de marge latérale */
  background-color: #fffefa; /* même fond que la page */
}

.nichee-contact-question__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* écart entre icône, titre, texte, bloc contact */
}

/* Icône ronde */
.nichee-contact-question__icon {
  padding: 38px 53px;
  width: 158.52px;
  height: 126px;
  border-radius: 110px;
  background-color: #fcf7f0; /* halo doux */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Titre */
.nichee-contact-question__title {
  font-family: "Arima", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif; /* adapte si besoin à ta font */
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: #93452a; /* rouille */
  margin: 0;
}

/* Texte */
.nichee-contact-question__text {
  margin: 0;
  font-family: "Marcellus", serif; /* adapte si besoin */
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

/* Bloc téléphone + mail (vertical, avec 16px entre les deux) */
.nichee-contact-question__infos {
  display: flex;
  flex-direction: column;
  gap: 16px; /* écart téléphone / mail */
  align-items: center;
}

/* Chaque ligne (téléphone / mail) */
.nichee-contact-question__info {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* icône / texte */
  font-family: "Marcellus", serif;
  font-size: 16px;
  color: #000;
  text-decoration: none;
}

.nichee-contact-question__info:hover {
  text-decoration: underline;
  color: #93452a;
}

/* ===== NAV + BOUTON DESKTOP ===== */
@media (min-width: 768px) {
  /* Liste principale du menu */
  .main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  /* Empêche les intitulés de se couper sur 2 lignes */
  .main-nav li a span {
    white-space: nowrap;
  }

  /* Bouton Réserver une table */
  .reservation-btn {
    padding: 8px 20px;
    border-radius: 8px;
    background-color: #93452a; /* rouille */
    color: #ffffff;
    font-family: "Marcellus", serif;
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .reservation-btn:hover {
    background-color: #9f482a;
  }

  .reservation-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  }
}

/* Bouton "Réserver une table" */
.reservation-btn {
  display: inline-flex; /* pour que gap marche bien */
  align-items: center; /* aligne le picto et le texte */
  gap: 8px; /* espace entre le SVG et le texte (à ajuster) */
}

/* Par défaut : caché (mobile) */
.reservation-btn {
  display: none;
}

/* À partir du desktop : affiché */
@media (min-width: 768px) {
  .reservation-btn {
    display: inline-flex; /* ou flex si tu préfères */
    align-items: center;
    gap: 8px; /* écart SVG / texte */
  }
}

.card-privatiser {
  width: 384px;
}

.menu-cote {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.btn-menu-cote {
  width: fit-content;
}

.menu-fleche {
  display: flex;
  align-items: center;
}

.credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 204px;
  height: 60px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
  padding-top: 8px;
  background-color: #ffffff;

  border: 1px solid #93452a;
  border-radius: 9px;

  text-decoration: none;
  box-sizing: border-box;
}

.credit-badge__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.credit-badge__name {
  color: #93452a;
  font-family: "Marcellus"; /* ou mets Marcellus/ta font */
  font-size: 16px; /* ajuste */
  line-height: 1;
  white-space: nowrap;
}

/* Optionnel : hover/focus propre */
.credit-badge:hover {
  background: rgba(255, 255, 255, 0.8);
}

.credit-badge:focus-visible {
  outline: 3px solid rgba(147, 69, 42, 0.35);
  outline-offset: 3px;
}

#credit-mobile {
  background-color: #fcf7f0;
  width: 353px;
  margin: auto;
  padding-bottom: 16px;
  padding-top: 16px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.main-nav a img {
  display: none !important;
}