/* =====================================================================
   Belife – Landing (CSS COMPLET)
   - Kind Sans local (OTF)
   - Desktop: hero zoom visuel + shift, lower semi-transparent + overlap
   - Mobile: correction superpositions (stack en flow, modèle recadré)
===================================================================== */

/* =========================
   Kind Sans (local)
   Chemins relatifs depuis /css/styles.css -> ../assets/fonts/kindsans/...
========================= */
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansLight.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansMedium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansSemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Kind Sans";
  src: url("../assets/fonts/kindsans/KindSansBlack.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* =========================
   Variables
========================= */
:root{
  --orange-1:#ff5a2a;
  --orange-2:#f24b1b;
  --orange-stroke:#f7a11b;

  --maroon-1:#6b0f0f;
  --maroon-2:#7a1111;

  --ink:#121212;
  --white:#ffffff;

  /* Split écran (zéro scroll desktop) */
  --hero-split: 70%;

  --logo-max: 240px;

  --wave-width: 74%;
  --wave-left: 0%;

  --center-left-desktop: 50%;
  --center-top-desktop: 26%;
  --center-shift-y: 12vh;
  --coming-scale: .90;

  --left-x: clamp(70px, 5vw, 110px);
  --left-y: clamp(45px, 5vh, 90px);

  --hero-contact-gap: clamp(18px, 3vh, 40px);

  /* lower semi-transparent */
  --lower-alpha: .90;

  /* bande orange réseaux */
  --lower-social-strip-h: 56px;

  /* overlap (desktop) */
  --hero-overlap: 44px;

  /* “zoom visuel” hero (desktop) */
  --hero-visual-shift-x: -14px;
  --hero-visual-shift-y: 10px;
  --hero-visual-scale: 1.04;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

/* =========================
   Base page
========================= */
body.belife-page{
  margin:0;
  font-family: "Kind Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:#fff;

  height: 100vh;
  height: 100dvh;
  overflow: hidden;              /* desktop: pas de scroll */
  display: flex;
  flex-direction: column;
}

/* =========================
   HERO (haut)
========================= */
.hero{
  position: relative;
  flex: 0 0 var(--hero-split);
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  overflow: visible;
  z-index: 1; /* hero derrière le lower (lower aura z-index >) */
}

.hero-inner{
  position: relative;
  height: 100%;
  overflow: visible;
}

/* Wave */
.hero-wave{
  position:absolute;
  top:0; bottom:0;
  left: var(--wave-left);
  width: var(--wave-width);
  height: 100%;
  z-index: 1;
  pointer-events:none;

  transform: translate(var(--hero-visual-shift-x), var(--hero-visual-shift-y))
             scale(var(--hero-visual-scale));
  transform-origin: 50% 50%;
}
.hero-wave .wave-fill{ fill:#fff; }
.hero-wave .wave-stroke{
  fill:none;
  stroke: url(#waveStrokeGrad);
  /*stroke-width: 18;*/
  stroke-width: clamp(12px, 1.2vw, 14px);
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Bloc gauche (desktop absolute) */
.hero-left{
  position: absolute;
  left: var(--left-x);
  top:  var(--left-y);
  z-index: 60;
  padding: 0;
  max-width: 520px;
}

.brand-block{ width:100%; max-width: var(--logo-max); }
.brand-logo{ width:100%; height:auto; display:block; }

/* Tagline */
.tagline{
  margin-top: clamp(10px, 1.8vh, 18px);
  color:#1c1c1c;
  font-weight: 700;
  line-height: 1.05;
}
.tagline-line{
  font-size: clamp(22px, 2.5vw, 44px);
  letter-spacing: -0.2px;
}
.tagline-accent{
  color: var(--orange-2);
  font-style: italic;
  font-weight: 900;
  margin-left: .35rem;
}
.tagline-underline{
  margin-top: clamp(10px, 1.6vh, 14px);
  width: clamp(90px, 9vw, 120px);
  height: 6px;
  background: var(--orange-2);
  border-radius: 999px;
}

/* Centre (desktop absolute) */
.hero-center{
  position: absolute;
  z-index: 60;
  left: 0; right: 0;
  top: calc(46% + var(--center-shift-y));
  transform: translateY(-50%);
  padding: 0 18px;
}

.coming{
  width: min(760px, 92vw);
  margin: 0 auto;
  color: #fff;
  text-align: center;
  text-shadow: 0 10px 25px rgba(0,0,0,.22);

  transform: scale(var(--coming-scale));
  transform-origin: center;
}
.coming-title{
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 92px);
  letter-spacing: -1.2px;
  line-height: .95;
}
.coming-sub{
  margin-top: 6px;
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 34px);
  letter-spacing: 1.6px;
  text-transform: lowercase;
  opacity: .95;
}

/* Modèle (desktop) */
.hero-model{
  position:absolute;
  right: clamp(0px, 2vw, 22px);
  top: 0;

  height: calc(100% + clamp(80px, 12vh, 220px));
  width: auto;
  max-width: none;

  transform:
    translate(
      var(--hero-visual-shift-x),
      calc(var(--hero-visual-shift-y) + clamp(8px, 2.5vh, 40px))
    )
    scale(var(--hero-visual-scale));
  transform-origin: 90% 20%;

  object-fit: contain;
  z-index: 20;
  pointer-events:none;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.25));
}

/* Bandeau contact (desktop absolute) */
.hero-contact{
  position: absolute;
  left: 0; right: 0;
  bottom: var(--hero-contact-gap);
  z-index: 80;
  padding: 0 18px;
}

.contact-shell{
  width: min(980px, 78vw);
  margin: 0 auto;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  padding: 10px;
  box-shadow: 0 18px 30px rgba(0,0,0,.22);
}
.contact-inner{
  border-radius: 16px;
  background: linear-gradient(135deg, #ff6a2f, #f0521f);
  padding: clamp(12px, 1.8vh, 18px) clamp(14px, 2vw, 22px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.contact-text{
  color:#fff;
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 22px);
}
.contact-actions{
  display:flex;
  gap: 14px;
  align-items:center;
}
.contact-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 900;
  text-transform: none;
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}
.contact-btn-wa{ background:#f5b64a; color:#3a2a10; }
.contact-btn-wa i{ font-size: 18px; }
.contact-btn-cc{ background:#f2a53a; color:#3a2a10; }

/* =========================
   LOWER (bas)
========================= */
.lower{
  position: relative;
  flex: 1 1 auto;

  background: linear-gradient(
    135deg,
    rgba(107, 15, 15, var(--lower-alpha)),
    rgba(122, 17, 17, var(--lower-alpha))
  );

  overflow: hidden;

  /* IMPORTANT: lower AU-DESSUS du hero pour l’effet “hero derrière” */
  z-index: 0;

  padding-bottom: var(--lower-social-strip-h);

  /* overlap (desktop) */
  margin-top: calc(-1 * var(--hero-overlap));
  padding-top: var(--hero-overlap);
}

.lower::before{
  content:"";
  position:absolute;
  left:-40px;
  top:0;
  bottom:0;
  width: 26%;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  clip-path: polygon(0 0, 70% 0, 35% 50%, 70% 100%, 0 100%);
  opacity: .8;
  z-index: 0;
}

.lower::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: var(--lower-social-strip-h);
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  z-index: 1;
  pointer-events:none;
}

.lower-inner{
  position: relative;
  z-index: 0;
  height: 100%;

  padding-top: clamp(8px, 1.6vh, 16px);
  padding-bottom: clamp(8px, 1.6vh, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lower-kicker{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  letter-spacing: .4px;
  margin-bottom: 10px;
}

.lower-title{
  color:#fff;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 14px 0;
}

.lower-cta{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  background:#fff;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 14px 24px rgba(0,0,0,.25);
}
.lower-cta-play{
  width: 0; height: 0;
  border-left: 12px solid #111;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  display:inline-block;
}
.lower-cta-text{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
  color:#111;
}
.lower-cta-small{
  font-size: 10px;
  letter-spacing: .8px;
  font-weight: 900;
  opacity: .65;
}
.lower-cta-strong{
  font-size: 16px;
  font-weight: 900;
}

/* Devices */
.devices-wrap{
  position: relative;
  height: clamp(150px, 22vh, 240px);
  margin-top: 6px;
}
.device{
  position:absolute;
  right: 0;
  bottom: -10px;
  height: 100%;
  width: auto;
  object-fit: contain;
  pointer-events:none;
}
.device-back{
  right: 92px;
  height: 92%;
  opacity: .95;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.22));
}
.device-front{
  right: 0;
  height: 100%;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
}

/* Social */
.fab-stack{
  position:absolute;
  right: 18px;
  bottom: 14px;
  display:flex;
  gap: 8px;
  z-index: 3;
}
.fab{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 14px rgba(0,0,0,.18);
}
.fab i{ font-size: 14px; }

/* =========================
   Desktop placement maquette
========================= */
@media (min-width: 1200px){
  :root{ --logo-max: 200px; }

  .hero-center{
    left: var(--center-left-desktop);
    top: calc(var(--center-top-desktop) + var(--center-shift-y));
    transform: none;
    width: min(720px, 46vw);
    padding: 0;
    right: auto;
  }

  .coming{
    width: 100%;
    text-align: left;
    margin: 0;
    transform-origin: left center;
  }
}

/* =========================================================
   ALIGNEMENT MAQUETTE (desktop)
========================================================= */
@media (min-width: 1200px){
  :root{
    --shell-w: clamp(320px, 78vw, 980px);
    --shell-left: calc((100vw - var(--shell-w)) / 2);
  }

  .hero-contact .contact-shell{
    width: var(--shell-w);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-left{
    left: var(--shell-left) !important;
    transform: none !important;
  }

  .lower-inner.container{
    max-width: none;
    width: 100%;
    padding-left: var(--shell-left);
    padding-right: var(--shell-left);
  }

  .lower-inner .col-lg-7{
    padding-left: 0 !important;
  }
}

/* ===================================================================
   MOBILE (correction superpositions)
   Objectif: plus de collision entre logo / “Bientôt…” / bandeau contact / lower
=================================================================== */
@media (max-width: 1199.98px){

  :root{
    /* on réduit l’agressivité du zoom/shift */
    --hero-visual-scale: 1.00;
    --hero-visual-shift-x: -6px;
    --hero-visual-shift-y: 6px;

    /* overlap beaucoup plus discret (sinon ça écrase le contenu) */
    --hero-overlap: 14px;

    /* split un peu plus grand pour respirer */
    --hero-split: 66%;
  }

  /* Sur mobile, on autorise un peu de scroll si besoin (évite “écrasement” sur petits écrans) */
  body.belife-page{
    overflow: auto;
    height: auto;
    min-height: 100dvh;
  }

  /* HERO: on passe en "stack" */
  .hero{
    flex: 0 0 auto;
    min-height: 72vh;
  }

  .hero-inner{
    /* empilement vertical */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 14px;
  }

  /* wave garde le rôle décor (pas de zoom qui mange tout) */
  .hero-wave{
    transform: translate(var(--hero-visual-shift-x), var(--hero-visual-shift-y)) scale(1);
  }

  /* Bloc gauche déjà “relative” dans ton ancien mobile — on le garde + on respire */
  .hero-left{
    position: relative;
    left: 0; top: 0;
    padding: 18px 18px 0 18px;
    max-width: none;
  }

  /* Le texte central devient en flow (FIN des superpositions avec bandeau contact) */
  .hero-center{
    position: relative;
    left: 0; right: 0;
    top: auto;
    transform: none;
    padding: 0 18px;
    margin-top: 2px;
  }

  /* Ajuste la taille des titres sur mobile */
  .coming{
    width: 100%;
    margin: 0;
    text-align: left;
    transform: none;              /* pas de scale sur mobile */
  }
  .coming-title{
    font-size: clamp(34px, 9vw, 52px);
    line-height: .95;
  }
  .coming-sub{
    font-size: clamp(14px, 4.2vw, 20px);
    letter-spacing: 1.1px;
  }

  /* Modèle: recadrage + z-index derrière le texte */
  .hero-model{
    position: absolute;
    right: -28px;
    top: 56px;
    height: 66%;
    transform: none;
    z-index: 10;                  /* derrière textes (60/80), au-dessus du fond */
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.18));
  }

  /* Bandeau contact passe en flow (FIN collision avec “Bientôt…”) */
  .hero-contact{
    position: relative;
    left: auto; right: auto;
    bottom: auto;
    padding: 0 18px;
    margin-top: 6px;
  }

  .contact-shell{
    width: 100%;
    border-radius: 18px;
  }

  .contact-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px;
  }

  .contact-text{
    font-size: 16px;
  }

  .contact-actions{
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }

  .contact-btn{
    padding: 12px 14px;
  }

  /* LOWER: overlap discret + pas d’écrasement */
  .lower{
    margin-top: calc(-1 * var(--hero-overlap));
    padding-top: var(--hero-overlap);

    /* un peu plus opaque sur mobile (sinon ça “sale” le texte) */
    --lower-alpha: .94;
  }

  /* Devices: évite qu’ils montent sur les textes */
  .devices-wrap{
    height: clamp(160px, 26vh, 260px);
    margin-top: 14px;
  }

  .device{
    bottom: -6px;
  }

  /* Social: garde sur bande orange */
  .fab-stack{
    right: 12px;
    bottom: 12px;
  }
}

/* (Option) Extra-small : sécurise encore sur très petits téléphones */
@media (max-width: 390px){
  .coming-title{ font-size: 34px; }
  .contact-btn{ width: 100%; justify-content: center; }
  .hero-model{ right: -40px; height: 60%; }
}