.maintenance-html,
.maintenance-body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* Styles isolés repris de l'ancien index.css pour que la maintenance garde exactement son ancien rendu
   sans réappliquer tout l'ancien design à la nouvelle page d'accueil. */
.maintenance-page{
  --bg:#0a0a0f;
  --surface:#12121a;
  --surface2:#1c1c28;
  --accent:#e8ff47;
  --accent2:#ff4d6d;
  --accent3:#47c8ff;
  --text:#f0f0f0;
  --muted:#666688;
  --border:#2a2a3a;
  --radius:12px;
  --green:#47ffaa;
}

.maintenance-body{
  padding:0;
  display:block;
}

.maintenance-body::before{
  display:none;
}

.maintenance-page{
  position:fixed;
  inset:0;
  width:100vw;
  max-width:none;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3vw,34px);
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow:hidden;
}

.maintenance-page::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 58% 42% at 15% 20%,rgba(232,255,71,.08) 0%,transparent 62%),
    radial-gradient(ellipse 54% 50% at 84% 82%,rgba(255,77,109,.08) 0%,transparent 62%);
  pointer-events:none;
}

.maintenance-shell{
  position:relative;
  z-index:1;
  width:min(100%,960px);
  max-width:calc(100vw - 36px);
  max-height:calc(100dvh - 36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,4vh,36px);
  text-align:center;
}

.maintenance-logo.logo{
  width:100%;
  max-width:100%;
  margin:0;
  margin-left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.maintenance-logo.logo h1{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0 auto;
  font-family:Syne,sans-serif;
  font-size:clamp(1.35rem,2.6vw,2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  text-align:center;
  overflow:visible;
}

.maintenance-logo.logo h1 span{
  display:inline;
}

.maintenance-logo.logo h1 .u{
  color:#b9d400;
}

.maintenance-logo.logo h1 .r{
  color:var(--pink,#ff4d6d);
}

.maintenance-logo.logo p{
  margin-top:10px;
  color:var(--muted);
  font-family:'Inter',sans-serif;
  font-size:clamp(.64rem,1.4vw,.82rem);
  letter-spacing:clamp(1.6px,.35vw,2.8px);
  text-transform:uppercase;
  line-height:1.35;
}

.maintenance-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:min(720px,100%);
}

.maintenance-copy h2{
  margin:0;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:900;
  font-size:clamp(2rem,5vw,4.15rem);
  line-height:.98;
  letter-spacing:clamp(-2px,-.16vw,-.5px);
}

.maintenance-copy p{
  max-width:560px;
  margin:0;
  color:#a3abc6;
  font-size:clamp(.95rem,2.2vw,1.08rem);
  line-height:1.65;
}

.maintenance-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:2px;
}

.maintenance-time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:12px;
  background:var(--accent);
  color:#0a0a0f;
  font-weight:900;
  box-shadow:0 16px 30px rgba(232,255,71,.14);
}

@media(max-width:560px){
  .maintenance-page{
    padding:18px;
  }

  .maintenance-shell{
    max-width:calc(100vw - 36px);
    max-height:calc(100dvh - 36px);
    gap:clamp(18px,3.8vh,28px);
  }

  .maintenance-logo.logo h1{
    font-size:clamp(1.55rem,8.2vw,2.4rem);
    line-height:.92;
    letter-spacing:clamp(-2.2px,-.48vw,-1px);
  }

  .maintenance-logo.logo p{
    margin-top:9px;
    font-size:.62rem;
    letter-spacing:1.8px;
  }

  .maintenance-copy{
    gap:14px;
  }

  .maintenance-copy h2{
    font-size:clamp(1.75rem,9vw,2.55rem);
    line-height:1;
  }

  .maintenance-time{
    min-height:42px;
    padding:0 16px;
    font-size:.92rem;
  }
}

@media(max-width:480px){
  .maintenance-logo.logo h1{
    font-size:clamp(1.28rem,7.2vw,1.9rem);
    letter-spacing:clamp(-1.4px,-.12vw,-.2px);
  }
}

@media(max-height:620px){
  .maintenance-shell{
    gap:16px;
  }

  .maintenance-logo.logo p{
    margin-top:7px;
  }

  .maintenance-copy{
    gap:12px;
  }
}