:root{
  --white:#f7f8f3;
  --acid:#73e6ad;
  --line:rgba(255,255,255,.28);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  height:100%;
}

body{
  background:#07100c;
  color:var(--white);
  font-family:"Space Grotesk",sans-serif;
}

.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* IMAGE */

.hero-image{
  position:absolute;
  inset:-3%;
  z-index:-3;

  background:
    url("assets/images/BET_URBA_02.png")
    center center / cover no-repeat;

  transform:scale(1.08);
  animation:heroArrival 2.8s cubic-bezier(.18,.7,.2,1) forwards;
}

@keyframes heroArrival{
  to{
    transform:scale(1.025);
  }
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(3,13,8,.58) 0%,
      rgba(3,13,8,.32) 28%,
      rgba(3,13,8,.08) 52%,
      rgba(3,13,8,0) 76%
    ),
    linear-gradient(
      0deg,
      rgba(2,10,6,.42) 0%,
      transparent 42%
    );
}

/* HEADER */

.header{
  position:absolute;
  z-index:5;
  top:0;
  left:0;

  width:100%;
  height:120px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 4.5vw;

  border-bottom:1px solid var(--line);
}

.logo{
  display:block;
  width:245px;
}

.logo img{
  display:block;
  width:100%;
  height:auto;

  /* le PNG ayant un fond blanc,
     on l'intègre comme une petite plaque technique */
  background:transparent;
  padding:0;
  border-radius:0;
}

.header-meta{
  display:flex;
  align-items:center;
  gap:13px;

  font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;
  letter-spacing:.15em;

  color:rgba(255,255,255,.72);
}

.header-meta i{
  display:block;
  width:34px;
  height:1px;
  background:var(--acid);
}

/* HERO */

.hero-content{
  min-height:100svh;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    160px
    4.5vw
    75px;

  max-width:1200px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:15px;

  margin-bottom:30px;

  font-family:"IBM Plex Mono",monospace;
  font-size:.65rem;
  letter-spacing:.18em;

  color:rgba(255,255,255,.72);
}

.eyebrow-line{
  display:block;
  width:45px;
  height:1px;
  background:var(--acid);
}

h1{
  max-width:1050px;

  font-size:clamp(3.8rem,6.6vw,7.7rem);
  line-height:.91;

  font-weight:300;
  letter-spacing:-.065em;
}

h1 span{
  display:block;
  font-weight:500;
}

.hero-footer{
  display:flex;
  align-items:flex-end;
  gap:95px;

  margin-top:64px;
}

.expertises{
  display:flex;
  flex-direction:column;

  padding-left:15px;

  border-left:1px solid var(--acid);

  font-family:"IBM Plex Mono",monospace;
  font-size:.69rem;
  line-height:1.7;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.status{
  display:flex;
  align-items:center;
  gap:10px;

  padding-bottom:2px;

  font-family:"IBM Plex Mono",monospace;
  font-size:.64rem;
  letter-spacing:.09em;
  text-transform:uppercase;

  color:rgba(255,255,255,.68);
}

.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--acid);

  box-shadow:0 0 14px rgba(115,230,173,.9);
}

/* DETAILS TECHNIQUES */

.coordinates{
  position:absolute;
  right:4.5vw;
  bottom:74px;

  display:grid;
  grid-template-columns:auto 150px auto;
  align-items:center;
  gap:12px;

  font-family:"IBM Plex Mono",monospace;
  font-size:.58rem;
  letter-spacing:.12em;

  color:rgba(255,255,255,.55);
}

.coordinates div{
  height:1px;
  background:rgba(255,255,255,.38);
}

.scroll{
  position:absolute;
  right:4.5vw;
  top:50%;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  font-family:"IBM Plex Mono",monospace;
  font-size:.58rem;

  color:rgba(255,255,255,.55);
}

.scroll div{
  width:1px;
  height:72px;
  background:linear-gradient(
    var(--acid),
    rgba(255,255,255,.15)
  );
}

/* MOBILE */

@media(max-width:760px){

  .header{
    height:95px;
    padding:0 22px;
  }

  .logo{
    width:190px;
  }

  .header-meta,
  .coordinates,
  .scroll{
    display:none;
  }

  .hero-image{
    background-position:62% center;
  }

  .hero-overlay{
    background:
      linear-gradient(
        0deg,
        rgba(2,10,6,.94) 0%,
        rgba(2,10,6,.52) 55%,
        rgba(2,10,6,.12) 100%
      );
  }

  .hero-content{
    justify-content:flex-end;
    padding:120px 22px 42px;
  }

  h1{
    font-size:clamp(3rem,14vw,5.2rem);
  }

  .hero-footer{
    margin-top:38px;
    gap:30px;
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ===== V2 — LISIBILITÉ HERO ===== */

/* Image plus lumineuse */
.hero-image{
  filter: brightness(1.13) saturate(1.04);
}

/* Zone de protection discrète derrière le logo */
.logo{
  position:relative;
  width:270px;
  padding:12px 18px 12px 0;
}

.logo::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-24px;
  left:-35px;
  width:340px;
  height:100px;
  background:radial-gradient(
    ellipse at 35% 50%,
    rgba(4,14,10,.60) 0%,
    rgba(4,14,10,.34) 48%,
    rgba(4,14,10,0) 76%
  );
  pointer-events:none;
}

.logo img{
  position:relative;
  width:100%;
  background:transparent;
  padding:0;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.30))
    drop-shadow(0 0 8px rgba(0,0,0,.20));
}

/* Informations techniques plus présentes */
.header-meta{
  font-size:.78rem;
  font-weight:500;
  color:rgba(255,255,255,.94);
}

.eyebrow{
  font-size:.78rem;
  font-weight:500;
  color:rgba(255,255,255,.94);
}

.eyebrow-line{
  width:58px;
  height:2px;
}

.expertises{
  font-size:.80rem;
  font-weight:500;
  color:rgba(255,255,255,.96);
}

.status{
  font-size:.73rem;
  font-weight:500;
  color:rgba(255,255,255,.88);
}

.coordinates{
  font-size:.70rem;
  font-weight:500;
  color:rgba(255,255,255,.86);
}

.coordinates div{
  background:rgba(255,255,255,.72);
}

.scroll{
  font-size:.68rem;
  color:rgba(255,255,255,.82);
}

@media(max-width:760px){
  .logo{
    width:215px;
  }
}


/* ===== LOGO V3 ===== */

.logo{
  position:relative;
  width:270px;
  padding:0;
  background:transparent !important;
}

.logo::before,
.logo::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

.logo img{
  display:block;
  width:100%;
  height:auto;
  padding:0;
  background:transparent !important;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:none;
}

@media(max-width:760px){
  .logo{
    width:215px;
  }
}



/* ===== LOGO FINAL ===== */

.logo{
  width:215px !important;
  padding:0 !important;
  background:none !important;
}

.logo::before,
.logo::after{
  display:none !important;
  content:none !important;
}

.logo img{
  display:block;
  width:100%;
  height:auto;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

@media(max-width:760px){
  .logo{
    width:175px !important;
  }
}