/*
 * Les 4 Saisons — surcharges de design (maquette Figma)
 * ---------------------------------------------------------------
 * styles.css est un export Tailwind statique (pas de build actif ici) :
 * il ne contient que les classes déjà utilisées dans le site d'origine.
 * Les valeurs de la maquette (couleurs rgba précises, radius 30px, etc.)
 * n'y existent donc pas -> on les définit ici en CSS classique.
 */

/* ============================================================ */
/* Fond fixe (image "fond.jpg") + voile assombrissant            */
/* ============================================================ */
/* Vrai background CSS sur le conteneur racine : reste fixe au scroll
   (background-attachment) sans passer par une balise <img> positionnée
   (qui posait problème : un élément position:fixed sans z-index se
   retrouve peint au-dessus du panier, qui lui est en position statique). */
#l4s-app {
  background-image: url("fond.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}
.l4s-veil {
  background-color: rgba(0, 0, 0, 0.56);
}

/* ============================================================ */
/* Titres "Panier" / "Options sélectionnées"                     */
/* ============================================================ */
.l4s-cart-title {
  font-weight: 700;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.56);
}

/* ============================================================ */
/* Mini-sélecteur de formule (2 boutons Basique / Premium)       */
/* ============================================================ */
.l4s-mini-switch {
  background-color: rgba(179, 179, 179, 0.2);
  border-radius: 40px;
}
.l4s-mini-switch-btn {
  border-radius: 30px;
}
.l4s-mini-switch-btn.is-active {
  background-color: #fff;
}
.l4s-mini-switch-icon {
  width: 28px;
  height: 24px;
  object-fit: contain;
}

/* ============================================================ */
/* Bloc "Options sélectionnées" (panier)                         */
/* ============================================================ */
.l4s-options-box {
  background-color: rgba(0, 0, 0, 0.06);
}
.l4s-option-price {
  font-weight: 700;
}

/* Carte option active (étape "Sélectionnez vos options")
   !important : l'élément garde sa classe Tailwind statique "bg-card"
   (fond blanc par défaut) ; il faut la surcharger explicitement ici. */
.l4s-option-selected {
  /*background-color: rgba(255, 255, 255, 0.75) !important;*/
  opacity: 0.45 !important;
}

/* ============================================================ */
/* Ligne "Frais de déplacement" (visible uniquement à l'étape 4) */
/* ============================================================ */
.l4s-fee-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.l4s-fee-highlight-value {
  font-weight: 700;
  color: var(--card-foreground);
}

/* "Frais de déplacement" / "Nombre d'invités" : gras, sans majuscules
   (remplace le style "font-bold uppercase" d'origine) */
.l4s-field-label {
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* ============================================================ */
/* Icône "i" cliquable + info-bulle (plat / options)              */
/* ============================================================ */
.l4s-tooltip-wrap {
  /*position: relative;*/
  cursor: pointer;
}
.l4s-tooltip-bubble {
  display: none;
  position: absolute;
  z-index: 50;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1b1b1b;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.l4s-tooltip-wrap.is-open .l4s-tooltip-bubble {
  display: block;
}

/* ============================================================ */
/* Calendrier — points colorés (Vendredi midi / Dimanche soir)   */
/* ============================================================ */
.l4s-day-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}
.l4s-day-dot-orange { background-color: #f97316; }
.l4s-day-dot-blue { background-color: #3b82f6; }

/* Date déjà passée : grisée (opacité réduite) mais couleur du statut
   conservée (avantageuse/standard) - non sélectionnable (bouton désactivé
   côté JS). */
.l4s-cal-day-past {
  opacity: .45;
  cursor: not-allowed;
}
.l4s-cal-day-past:hover {
  transform: none;
}

/* Points de légende (ronds, différents des pastilles carrées existantes) */
.l4s-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 2px;
}
.l4s-legend-dot-orange { background-color: #f97316; }
.l4s-legend-dot-blue { background-color: #3b82f6; }

/* ============================================================ */
/* Info-bulle riche du calendrier (remise 7%)                     */
/* Un seul élément partagé : positionné en JS au survol (desktop),*/
/* fixé en bas de l'écran sur mobile (voir media query plus bas). */
/* ============================================================ */
.l4s-cal-info-tooltip {
  display: none;
  z-index: 1000000;
  width: 260px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.35);
}
.l4s-cal-info-tooltip.is-visible {
  display: block;
}
.l4s-cal-info-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.l4s-cal-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: rgba(147, 51, 234, 0.12);
  color: #9333ea;
  flex-shrink: 0;
}
.l4s-cal-info-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: #9333ea;
  margin: 0;
}
.l4s-cal-info-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}
.l4s-cal-info-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.l4s-cal-tag {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.l4s-cal-tag-orange { background: rgba(249, 115, 22, 0.12); color: #c2410c; }
.l4s-cal-tag-blue { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

/* Mobile (< 1024px, sous le breakpoint lg de Tailwind) : l'info-bulle
   reste fixée en bas de l'écran tant qu'on est sur l'étape "Date",
   au lieu d'apparaître au survol (le survol n'existe pas au tactile). */
@media (max-width: 1023px) {
  .l4s-cal-info-tooltip.is-mobile-fixed {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    max-height: 45vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.3);
  }
}