/* ============================================================
   LAÏKA DESIGN — Page d'attente
   Référence Figma : fileKey 7GMi8iQ17LQaExPkbqWUbW, node 379:2251
   Frame Figma : 1512x983px
   ============================================================ */

/* ---- FONTS ---- */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Book.woff2') format('woff2'),
       url('assets/fonts/PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
       url('assets/fonts/PPNeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('assets/fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
       url('assets/fonts/PPNeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- RESET / BASE ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  /* Fallback statique (navigateurs sans dvh) */
  height: 100%;
  /* dvh = visual viewport dynamique — suit la barre d'adresse iOS Safari
     (évite le bug iOS où 100vh = hauteur max même barre visible).
     Navigateurs sans support (IE, vieux Android) : fallback height:100% ci-dessus. */
  height: 100dvh;
  overflow: hidden;
}

html {
  /* Empêche l'élargissement du Layout Viewport sur Safari iOS
     (une ligne d'adresse longue peut dépasser la largeur et élargir le viewport,
     décalant les éléments fixed et tronquant le logo à droite). */
  overflow-x: hidden;
}

body {
  position: relative;
  font-family: 'PP Neue Montreal', sans-serif;
  color: #ffffff;
  background: #000;
}

/* ---- CANVAS OGL (fond — remplace la vidéo HTML) ---- */
.canvas-fx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* height:100% sur fixed = visual viewport courant sur iOS Safari (OK).
     100dvh explicite pour cohérence cross-browser. */
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ---- VIDÉO SOURCE (dans le layout, opacity 0 — Chrome doit décoder pour OGL) ---- */
/* NE PAS mettre hors écran ni en 1px : Chrome cesserait de décoder les frames. */
.video-src {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

/* ---- OVERLAY DOM : conteneur capturé par html2canvas ---- */
.overlay-dom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 100dvh : suit le visual viewport dynamique iOS Safari.
     html2canvas utilise window.innerHeight pour la capture → cohérent. */
  height: 100dvh;
  z-index: 2;
  pointer-events: none;
}

.overlay-dom.captured {
  visibility: hidden;
}

/* ---- VOILE BLEU ---- */
/*
 * La bordure vidéo suit l'échelle globale en vh, proportionnelle à la hauteur.
 * Figma : 28px / 983px = 2.848vh. Max 28px sur grand écran, min 8px.
 */
.voile-bleu {
  position: absolute;
  /* dvh : la bordure suit le visual viewport dynamique iOS Safari, cohérent
     avec .contenu qui utilise dvh pour ses calculs de centrage vertical. */
  top: clamp(8px, 2.848dvh, 28px);
  right: clamp(8px, 2.848dvh, 28px);
  bottom: clamp(8px, 2.848dvh, 28px);
  left: clamp(8px, 2.848dvh, 28px);
  background-color: rgba(0, 0, 255, 0.75);
  pointer-events: none;
}

/* ---- CONTENU PRINCIPAL ---- */
/*
 * MÉCANIQUE D'ÉCHELLE FLUIDE — FACTEUR D'ÉCHELLE UNIQUE (Option B)
 * ================================================================
 *
 * Un seul `font-size` pilote TOUTE la composition : logo, textes, gaps.
 * Toutes les dimensions enfants sont en `em` relatifs à ce font-size.
 * Le rapport logo ↔ texte ↔ gaps reste constant à toutes les tailles.
 * Aucun saut : le scaling est continu, zéro media query de hauteur discrète.
 *
 * font-size = clamp(7px, 2.1vh, 21px)
 *   - 21px : valeur Figma de font-contact. Actif pour H ≥ 1000px (desktop large).
 *   - 2.1vh : terme fluide proportionnel à la hauteur (= 21 / 1000 × 100).
 *   - 7px : plancher absolu (fenêtres < ~333px).
 *
 * Coefficient 2.1vh calibré pour H=1000px → terme fluide = 21px exactement.
 * Pour H ≥ 1000px : scale = 21px constant → composition 100% identique Figma.
 * Pour H < 1000px : scale réduit en continu → tout se réduit proportionnellement.
 *
 * Ratios em (frame Figma 983px, base = 21px = font-contact) :
 *   logo-height       = 57   / 21 = 2.7143em
 *   logo-width        = 229  / 21 = 10.9048em
 *   font-studio       = 21.21/ 21 = 1.0100em
 *   font-coming       = 25   / 21 = 1.1905em
 *   font-contact      = 21   / 21 = 1.0000em
 *   gap-logo-studio   = 13   / 21 = 0.6190em
 *   gap-studio-coming = 149  / 21 = 7.0952em
 *   gap-coming-contact= 17   / 21 = 0.8095em
 *
 * POSITIONNEMENT VERTICAL — RECENTRAGE CONTINU (itération 3)
 * ============================================================
 *
 * Problème précédent : padding-top: 47.24vh fixe laissait ~52.76vh pour
 * contenu (≈47vh) + marge basse → marge basse quasi nulle sur fenêtres basses.
 *
 * Nouvelle mécanique :
 *   --scale    = clamp(7px, 2.1vh, 21px)              [= font-size]
 *   --content-h = calc(22.7786 * var(--scale))         [hauteur totale du bloc]
 *   --voile-inset = clamp(8px, 2.848vh, 28px)          [bordure voile bleue]
 *
 *   formule_principale = (100vh - content-h) / 2 + 19.4vh
 *     → centrée + biais calibré pour retomber sur 47.24vh à H=1080
 *     → 19.4vh = 47.24vh − ((100vh − content-h@1080) / 2 en vh)
 *
 *   borne_max = 100vh − content-h − voile-inset − 28px
 *     → garantit une marge basse ≥ 28px à toutes les hauteurs
 *
 *   padding-top = min(formule_principale, borne_max)
 *     → fonction continue (min de deux fonctions continues)
 *     → bascule vers la borne à H ≈ 740px (C0, aucun saut perceptible)
 *
 * Résultats calibrés :
 *   H=1080 : padding-top ≈ 510px (47.25vh) → pixel-identique au précédent
 *   H=900  : marge basse ≈ 35px
 *   H=720  : marge basse ≈ 28px
 *   H=620  : marge basse ≈ 28px
 *   H=500  : marge basse ≈ 28px
 *   H=390  : marge basse ≈ 28px
 *   H=360  : marge basse ≈ 28px
 *
 * Coefficient du bloc 22.7786em détaillé :
 *   bloc-logo : 2.7143 (logo-h) + 0.619 (gap) + 1.010*1.2 (studio) = 4.5453
 *   gap coming-soon : 7.0952
 *   coming-soon : 1.1905*1.2 = 1.4286
 *   gap contact : 0.8095
 *   contact : 1.0*1.78*5 lignes = 8.9
 *   TOTAL : 22.7786em
 */
.contenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* Facteur d'échelle unique — pilote logo + textes + gaps via em.
   * dvh : suit le visual viewport dynamique iOS Safari (évite que le clamp
   * soit calculé sur 100vh statique quand la barre d'adresse est visible). */
  font-size: clamp(7px, 2.1dvh, 21px);

  /*
   * Variables d'ancrage vertical.
   * --scale      : identique au font-size (répété pour le calcul de --content-h).
   * --content-h  : hauteur totale estimée du bloc en px (coefficient calibré = 22.7786).
   * --voile-inset: bordure du voile bleu (identique à .voile-bleu).
   *
   * Toutes les unités vh → dvh : garantit que les calculs utilisent la VRAIE
   * hauteur visible, pas le layout viewport statique iOS (qui vaut toujours la
   * hauteur max = barre cachée, même quand la barre est visible).
   */
  --scale: clamp(7px, 2.1dvh, 21px);
  --content-h: calc(22.7786 * var(--scale));
  --voile-inset: clamp(8px, 2.848dvh, 28px);

  /*
   * Positionnement vertical continu :
   *   - formule principale : centrage + biais 19.4dvh → ≈ 47.24dvh à H=1080
   *   - borne max : garantit marge basse ≥ 28px à toutes les hauteurs
   *     (safe-area-inset-bottom : iPhone notch / Dynamic Island)
   *   - min() des deux : continu, sans saut
   *
   * dvh recalcule automatiquement quand la barre d'adresse iOS collapse →
   * les formules se recalculent avec la vraie hauteur courante → l'email
   * reste dans le viewport quelle que soit l'état de la barre.
   */
  padding-top: min(
    calc((100dvh - var(--content-h)) / 2 + 19.4dvh),
    calc(100dvh - var(--content-h) - var(--voile-inset) - max(24px, env(safe-area-inset-bottom)))
  );

  /* Filet de sécurité basse minimal — respecte la safe area iOS (notch bas) */
  padding-bottom: max(var(--voile-inset), 3dvh, env(safe-area-inset-bottom));
}

/* ---- BLOC LOGO + STUDIO ---- */
.bloc-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.619em; /* 13px / 21px */
}

.logo {
  width: 10.9048em;  /* 229px / 21px */
  height: 2.7143em;  /* 57px / 21px */
  display: block;
  /* Filet de sécurité mobile : logo ≤ 85vw, inchangé sur desktop.
     Exemple desktop 1920px : min(229px, 1632px) = 229px → inchangé.
     Exemple iPhone 390px : min(~90px, 331px) = ~90px (contraint par le em, pas le vw). */
  max-width: min(10.9048em, 85vw);
}

.studio-creation {
  font-weight: 400;
  font-size: 1.010em; /* 21.21px / 21px */
  color: #ffffff;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
}

/* ---- COMING SOON ---- */
.coming-soon {
  font-weight: 700;
  font-size: 1.1905em; /* 25px / 21px */
  color: #ffffff;
  text-align: center;
  margin-top: 7.0952em; /* 149px / 21px */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- CONTACT ---- */
.contact {
  font-weight: 400;
  font-size: 1em; /* 21px / 21px — base de l'échelle */
  color: #ffffff;
  text-align: center;
  font-style: normal;
  margin-top: 0.8095em; /* 17px / 21px */
  line-height: 1.78;
  letter-spacing: 0;
  padding: 0 1em;
  /* Empêche la ligne d'adresse longue de déborder horizontalement sur mobile
     (peut passer sur 2 lignes sur très petits écrans — acceptable). */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- LIEN EMAIL ---- */
.lien-email {
  color: #ffffff;
  text-decoration: none;
  font: inherit;
}

.lien-email:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* .lien-email reste dans le DOM pour la capture html2canvas (email blanc visible).
   La zone de clic est gérée par #email-hit (JS), ancré sur canvasRect × fraction
   mémorisée à la capture — pas de code CSS de zone tactile nécessaire ici. */

/* ============================================================
   RESPONSIVE LARGEUR — MOBILE PORTRAIT (≤ 749px)
   Ajustements latéraux uniquement.
   L'échelle verticale est gérée par le clamp() global sur .contenu.
   ============================================================ */
@media (max-width: 749px) {
  .contact {
    padding: 0 1.5em;
    line-height: 1.65;
  }
}