/* =====================================================================
   Unik Lodges Annecy — Page d'attente
   Reproduction du design Figma (frame 1920 × 1080)

   Couleurs Figma :
     brand/primary : #f3f1ee   (fond sous l'image)
     texte         : #ffffff
     voile         : rgba(0,0,0,0.05)

   Typographies :
     - Titre "Habiter le temps." : GT Sectra Medium (commerciale, Grilli Type)
       -> fallback gratuit : Fraunces 500 (chargée via Google Fonts dans le HTML)
     - Tout le reste : Public Sans Medium (500), gratuite (Google Fonts)
   ===================================================================== */

/* ---- Police de marque : GT Sectra Medium (self-hosted, licence web Grilli Type) --- */
@font-face {
  font-family: "GT Sectra";
  src: url("assets/fonts/GT-Sectra-Medium.woff2") format("woff2"),
       url("assets/fonts/GT-Sectra-Medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Police de corps : Public Sans Medium (self-hosted, open source OFL) ---------- */
@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Medium.woff2") format("woff2"),
       url("assets/fonts/PublicSans-Medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: #f3f1ee;   /* brand/primary, visible avant chargement de l'image */
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Scène plein écran -------------------------------------------- */
.stage {
  position: relative;
  min-height: 100vh;           /* base */
  min-height: 100svh;          /* gère les barres mobiles là où c'est supporté */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- Fond ---------------------------------------------------------- */
.background {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #2b342a;   /* vert forêt : filet de sécurité si l'image manque */
  background-image: url("assets/bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.background__overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.05);   /* voile Figma */
}

/* ---- Contenu ------------------------------------------------------- */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1316px;           /* largeur du bloc texte dans Figma */
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

/* Logo "unik lodges" — 756px de large dans Figma */
.logo {
  width: 756px;
  max-width: 60vw;
  height: auto;
  display: block;
}

/* "UNIK LODGES ANNECY" */
.eyebrow {
  margin: 61px 0 0;            /* écart logo -> eyebrow */
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: normal;
  text-transform: uppercase;
}

/* "Habiter le temps." */
.title {
  margin: 14px 0 0;           /* écart eyebrow -> titre */
  font-family: "GT Sectra", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 60px;
  letter-spacing: -0.92px;
}

/* Bloc message bas */
.message {
  margin-top: 94px;           /* écart titre -> message */
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
}

.message p {
  margin: 0;
  line-height: 60px;
}

.message p:first-child {
  margin-bottom: 48px;        /* écart Figma entre les deux lignes */
}

/* ---- Tablette ------------------------------------------------------ */
@media (max-width: 900px) {
  .logo     { width: 560px; max-width: 72vw; }
  .eyebrow  { margin-top: 48px; font-size: 18px; }
  .title    { font-size: 38px; line-height: 48px; }
  .message  { margin-top: 64px; font-size: 18px; }
  .message p { line-height: 44px; }
  .message p:first-child { margin-bottom: 32px; }
}

/* ---- Mobile -------------------------------------------------------- */
@media (max-width: 560px) {
  .logo     { width: 78vw; }
  .eyebrow  { margin-top: 36px; font-size: 15px; letter-spacing: 1.5px; }
  .title    { margin-top: 10px; font-size: 30px; line-height: 38px; letter-spacing: -0.6px; }
  .message  { margin-top: 44px; font-size: 16px; }
  .message p { line-height: 32px; }
  .message p:first-child { margin-bottom: 24px; }
}

/* ---- Accessibilité : animations réduites --------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}