/* ============================================================
   HOTELLA · BRAND TOKENS (site web)
   Source : claude.ai/design — « Hotella Design System »
   (tokens/colors.css, tokens/gradients.css, tokens/typography.css)

   Chargé APRÈS la feuille de chaque page : ne remplace que des
   variables et quelques règles de boutons. Aucune mise en page,
   aucun espacement, aucune section n'est modifié ici.
   ============================================================ */

:root {
  /* ---- Primitives du design system ---- */
  --hotella-navy-abyss:   #04050F;
  --hotella-navy-900:     #070B1C;
  --hotella-navy-800:     #0E1730;
  --hotella-cyan-200:     #9BE4FF;
  --hotella-cyan-300:     #7FE6FF;
  --hotella-cyan-400:     #35D6FF;
  --hotella-electric:     #0BA9EE;
  --hotella-azure:        #116BC7;
  --hotella-teal:         #0574A0;
  --hotella-ink-100:      #F4FAFF;
  --hotella-ink-200:      #D6E8FF;
  --hotella-ink-white:    #EAF3FF;
  --hotella-on-accent:    #03121F;
  --hotella-gold:         #E8B65A;

  --gradient-brand:       linear-gradient(90deg, #0574A0 0%, #0BA9EE 50%, #35D6FF 100%);
  --gradient-azure:       linear-gradient(135deg, #1447C9 0%, #116BC7 45%, #0BA9EE 100%);
  --gradient-accent-text: linear-gradient(90deg, #7FE6FF 0%, #35D6FF 50%, #0BA9EE 100%);
  --ease-hotella:         cubic-bezier(.16, 1, .3, 1);

  /* ---- Remappage des variables du thème existant ---- */
  /* Noir de marque → navy Hotella */
  --color-rich-black:         var(--hotella-navy-abyss);
  --color-background-6:       var(--hotella-navy-900);

  /* Bleus → famille teal / electric / cyan (pas de violet) */
  --color-vivid-blue:         var(--hotella-electric);
  --color-electric-blue:      var(--hotella-cyan-400);
  --color-absolute-zero-blue: var(--hotella-azure);
  --color-primary-50:         var(--hotella-ink-white);
  --color-primary-100:        var(--hotella-ink-white);
  --color-primary-200:        var(--hotella-cyan-200);
  --color-primary-300:        var(--hotella-cyan-300);
  --color-primary-400:        var(--hotella-cyan-400);
  --color-primary-500:        var(--hotella-electric);
  --color-primary-600:        var(--hotella-teal);
  --color-water:              var(--hotella-ink-200);

  /* Traits cyan translucides */
  --color-stroke-5:           rgba(53, 214, 255, 0.10);
  --color-stroke-6:           rgba(53, 214, 255, 0.15);
  --color-stroke-7:           rgba(53, 214, 255, 0.20);

  /* Accents du template hors charte (vert, violet, rose) → cyan / ink */
  --color-ns-green:           var(--hotella-cyan-400);
  --color-ns-green-light:     var(--hotella-ink-200);
  --color-ns-cyan:            var(--hotella-cyan-300);
  --color-ns-cyan-light:      var(--hotella-ink-white);
  --color-opai-purple:        var(--hotella-azure);
  --color-gradient-1:         var(--gradient-azure);
  --color-gradient-6:         linear-gradient(#7FE6FF 0%, #0BA9EE 100%);
  --color-gradient-7:         linear-gradient(#fff 0%, #7FE6FF 100%);
  --color-gradient-8:         linear-gradient(156deg, #fff 32.92%, #35D6FF 91%);
  --color-gradient-9:         linear-gradient(156deg, #EAF3FF 32.92%, #9BE4FF 91%);
  --color-gradient-13:        linear-gradient(156deg, #fff 32.92%, #9BE4FF 91%);

  /* Mouvement : easing officiel */
  --default-transition-timing-function: var(--ease-hotella);
}

/* ---- Boutons pleins : dégradé de marque, texte encre ---- */
.btn-primary,
.btn-primary-v2 {
  background-image: var(--gradient-brand);
  border-color: transparent;
  color: var(--hotella-on-accent);
}

.btn-primary-v2 .btn-v2-icon {
  fill: var(--hotella-on-accent);
}

/* ---- Accessibilité : focus cyan 2px, sélection de texte ---- */
:focus-visible {
  outline: 2px solid var(--hotella-cyan-400);
  outline-offset: 2px;
}

::selection {
  background-color: rgba(53, 214, 255, 0.30);
  color: inherit;
}

/* ---- Utilitaire absent de main.css : 3 cartes tarifs sur une ligne (lg) ---- */
@media (min-width: 64rem) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
}

/* ---- Utilitaires utilisés par les pages mais absents des CSS compilés ---- */
.max-w-\[567px\] { max-width: 567px; }
@media (min-width: 64rem) {
  .lg\:py-36 { padding-block: calc(var(--spacing, .25rem) * 36); }
  .lg\:py-12 { padding-block: calc(var(--spacing, .25rem) * 12); }
  .lg\:min-h-\[496px\] { min-height: 496px; }
  .lg\:pb-\[8px\] { padding-bottom: 8px; }
}
@media (min-width: 80rem) {
  .xl\:pb-\[10px\] { padding-bottom: 10px; }
}

/* ---- Espacement vertical standard des sections (aligné sur Guest App / Kiosque) ---- */
.hotella-section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 48rem) { .hotella-section { padding-top: 64px; padding-bottom: 64px; } }
@media (min-width: 64rem) { .hotella-section { padding-top: 88px; padding-bottom: 88px; } }
@media (min-width: 80rem) { .hotella-section { padding-top: 100px; padding-bottom: 100px; } }

/* ---- Fenêtre modale « Demande de devis » (page Tarifs) ---- */
.hotella-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hotella-modal.est-ouverte,
.hotella-modal:target { display: flex; }
.hotella-modal__fond {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 15, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hotella-fondu .3s var(--ease-hotella) both;
}
.hotella-modal__boite {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 24px;
  padding: 28px 20px;
  box-shadow: 0 30px 80px -20px rgba(4, 5, 15, 0.45);
  animation: hotella-apparition .4s var(--ease-hotella) both;
}
@media (min-width: 48rem) { .hotella-modal__boite { padding: 40px; } }
.hotella-modal__fermer {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--color-secondary, #04050F);
  background: rgba(4, 5, 15, 0.06);
  transition: background .2s;
}
.hotella-modal__fermer:hover { background: rgba(4, 5, 15, 0.12); }
@keyframes hotella-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes hotella-apparition { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Écrans de la Guest App (accueil, section « Pas d'application ») ---- */
.hotella-phones {
  display: flex;
  gap: 16px;
  margin-top: 48px;
  padding: 8px 4px 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hotella-phones::-webkit-scrollbar { display: none; }
.hotella-phone {
  flex: 0 0 62%;
  max-width: 260px;
  margin: 0;
  scroll-snap-align: center;
  text-align: center;
}
.hotella-phone__ecran {
  overflow: hidden;
  border-radius: 28px;
  border: 6px solid #0E1730;
  background: #0E1730;
  box-shadow: 0 24px 50px -24px rgba(4, 5, 15, 0.45);
  aspect-ratio: 720 / 1358;
}
.hotella-phone__ecran img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hotella-phone figcaption {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hotella-phone__etape {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--hotella-electric, #0BA9EE);
}
.hotella-phone__titre {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-secondary, #04050F);
}
@media (min-width: 48rem) {
  .hotella-phone { flex-basis: 34%; }
}
@media (min-width: 64rem) {
  .hotella-phones {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
    overflow: visible;
    align-items: start;
  }
  .hotella-phone { max-width: none; }
  .hotella-phones { padding-bottom: 8px; }
}

/* ---- Animation d'apparition des écrans Guest App (cascade + blur-in) ---- */
.hotella-anim-pret .hotella-phones .hotella-phone {
  opacity: 0;
  transform: translateY(48px) scale(.96);
  filter: blur(10px);
  transition:
    opacity .9s var(--ease-hotella),
    transform .9s var(--ease-hotella),
    filter .9s var(--ease-hotella);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.hotella-anim-pret .hotella-phones.est-visible .hotella-phone {
  opacity: 1;
  transform: none;
  filter: none;
}
.hotella-phone__ecran { transition: transform .5s var(--ease-hotella), box-shadow .5s var(--ease-hotella); }
@media (hover: hover) {
  .hotella-phone:hover .hotella-phone__ecran {
    transform: translateY(-8px);
    box-shadow: 0 34px 60px -24px rgba(11, 169, 238, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hotella-anim-pret .hotella-phones .hotella-phone { opacity: 1; transform: none; filter: none; transition: none; }
  .hotella-phone__ecran { transition: none; }
}