/* =========================================================
   AUSIEGE · Responsive site shell (v2 — Femme/Homme universes)
   Overrides the fixed-width design artboards into a real
   responsive site driven by site-app.jsx + matchMedia.
   ========================================================= */

html, body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--fg);
  font-family: var(--font-sans);
  min-height: 100vh;
  overflow-x: hidden;
}

#root, .site-root {
  width: 100%;
  min-height: 100vh;
}

/* Screens drop their fixed width and let the layout breathe. */
.d-screen, .t-screen, .screen {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Header behaviour
   - On the neutral home page (no universe, page=home), the split-hero
     is the splash above and the header sits below — in flow then sticks.
   - On every other page the header is fixed at top from the start.
   `position: sticky` works because we forced .d-screen overflow: visible. */
.d-header, .t-header, .m-header {
  position: sticky !important;
  top: 0;
}

/* On the neutral home the split-hero must precede the header naturally,
   so sticky is the right behaviour (header reveals once scrolled past hero). */

/* Sticky chip rows (catalogue) — sit just under the header. */
.d-chiprow { top: 88px !important; }
.t-chiprow { top: 72px !important; }

/* Mobile sticky book bar stays glued to the viewport bottom. */
.m-bookbar { position: fixed !important; }

/* Pad bottom so the floating m-bookbar doesn't clip footer. */
@media (max-width: 719px) {
  .screen { padding-bottom: 88px; }
}

/* Overlay (menu) covers the whole viewport. */
.site-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background: rgba(28, 26, 23, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: site-overlay-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes site-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.site-overlay__panel { min-height: 100vh; position: relative; }

.site-overlay .d-menu,
.site-overlay .t-menu,
.site-overlay .menu { min-height: 100vh; }

.d-menu__li, .t-menu__li, .menu__li,
.d-menu__close, .t-menu__close, .menu__close {
  cursor: pointer;
}

.d-menu__li, .t-menu__li {
  transition: background var(--dur-base) var(--ease);
}
.d-menu__li:hover, .t-menu__li:hover {
  background: rgba(245, 239, 228, 0.04);
}

.d-svccard, .t-svccard,
.d-teamcard, .t-teamcard,
.team-card, .svc-row {
  cursor: pointer;
}

/* On medium screens, soften desktop hero padding so the 124px display
   title doesn't slam against the edge. */
@media (max-width: 1399px) and (min-width: 1200px) {
  .d-hero__inner { padding-left: 56px; padding-right: 56px; }
  .d-hero__title { font-size: 104px; }
  .d-sect { padding-left: 56px; padding-right: 56px; }
  .d-finalcta, .d-intro, .d-testi { padding-left: 56px; padding-right: 56px; }
  .d-header { padding-left: 56px; padding-right: 56px; }
  .d-trustbar__grid { width: auto; padding: 0 56px; }
}

@media (min-width: 1600px) {
  .d-trustbar__grid { width: 1280px; }
  .d-wrap { max-width: 1280px; }
}

/* Focus styles for keyboard navigation. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

/* Smooth scroll for in-page anchors. */
html { scroll-behavior: smooth; }


/* =========================================================
   Universe-themed root reaches all descendants (since site-root
   carries data-universe). universe.css already handles most of
   the theming; we just ensure the override propagates correctly
   without being shadowed by tokens. */
.site-root[data-universe="homme"] { color-scheme: dark; }
.site-root[data-universe="femme"] { color-scheme: dark; }


/* =========================================================
   Gallery — responsive grid
   The design ships only a desktop GalleryD (.d-galwall). On tablet
   we drop to two columns; on mobile to one. */
@media (max-width: 719px) {
  .d-galwall {
    grid-template-columns: 1fr !important;
    padding: 0 var(--margin-mobile);
  }
  .d-galwall__tile.is-featured {
    grid-column: span 1 !important;
    aspect-ratio: 16 / 10;
  }
  .d-galwall__tile.is-tall { aspect-ratio: 3 / 5; }
}
@media (min-width: 720px) and (max-width: 1199px) {
  .d-galwall {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 var(--margin-tablet);
  }
  .d-galwall__tile.is-featured { grid-column: span 2 !important; }
}


/* =========================================================
   Split hero — responsive overrides
   The mobile <Home> already uses .m-hero-split (stacked vertically)
   and the tablet uses .t-hero-split. But if a desktop layout leaks
   to a smaller viewport (e.g. during a resize before re-render), we
   want .d-hero-split to gracefully stack rather than render two
   half-width sides. */
@media (max-width: 719px) {
  .d-hero-split {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr;
    height: 720px;
  }
  .d-hero-split__divider {
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; height: 1px !important;
  }
  .d-hero-split__inner { padding: 24px !important; }
  .d-hero-split__title { font-size: 44px !important; max-width: 280px; }
  .d-hero-split__side--homme .d-hero-split__inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .d-hero-split__side--homme .d-hero-split__cta { align-self: flex-start !important; }
  .d-hero-split__brand { top: 24px !important; left: 24px !important; font-size: 12px !important; }
  .d-hero-split__lang { top: 24px !important; right: 24px !important; }
}

/* Tablet : keep two columns but shrink type & paddings. */
@media (min-width: 720px) and (max-width: 1199px) {
  .d-hero-split { height: 580px; }
  .d-hero-split__inner { padding: 40px; }
  .d-hero-split__title { font-size: 56px; max-width: 320px; }
  .d-hero-split__brand { top: 40px; left: 40px; }
  .d-hero-split__lang { top: 40px; right: 40px; }
}


/* =========================================================
   Home neutral — split hero is the "splash", header reveals on scroll.
   On any non-home page the header is sticky at the top from frame 0
   because it's the first child of the screen wrapper. */
.site-root[data-page="home"]:not([data-universe]) .d-hero-split,
.site-root[data-page="home"]:not([data-universe]) .t-hero-split,
.site-root[data-page="home"]:not([data-universe]) .m-hero-split {
  margin-top: 0;
}

/* Accueil mobile — le header (burger · marque · Réserver) est posé en OVERLAY
   transparent par-dessus le hero split, plutôt que sticky dans le flux (où il
   tombait sous les deux héros empilés). Plus spécifique + !important pour battre
   la règle globale `.m-header { position: sticky !important }`. Un léger voile
   dégradé en haut garantit la lisibilité au-dessus de la photo. */
.site-root[data-page="home"]:not([data-universe]) .m-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(28, 26, 23, 0.6) 0%, rgba(28, 26, 23, 0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}


/* =========================================================
   Universe switcher (header pill) — make sure it doesn't take a
   weird color in light/solid mode. */
.d-header__universe a,
.t-header__universe a { cursor: pointer; }


/* =========================================================
   Hover affordance on home universe doors (hero split). */
.d-hero-split__side { cursor: pointer; }


/* =========================================================
   In tablet/mobile the original .d-svc__cta etc. have grid-column
   positioning that would force them to a third column they don't
   have. Reset to natural flow. */
@media (max-width: 1199px) {
  .d-svc__cta { margin-left: 0 !important; margin-top: 16px; }
}


/* =========================================================
   Footer columns — collapse to fewer columns on small screens
   (defensive — the t-footer and m-footer markup already handle this). */
@media (max-width: 1199px) {
  .d-footer__top {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 719px) {
  .d-footer__top {
    grid-template-columns: 1fr !important;
  }
}