:root{
  --bg:#090112;
  --text:#F9F5FF;

  /* Réglages simples */
  --logoY: 44%;                          /* hauteur du logo */
  --logoW: clamp(360px, 92vw, 1400px);   /* taille basée sur la largeur */
}

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

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 4 sections égales */
.page{
  min-height: 100svh;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  justify-items: center;
  position: relative;
  overflow: hidden;
}

/* BACKGROUND BRUT : aucune glow / aucun voile */
.page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-color: var(--bg);
  background-image: url("assets/logo.png");
  background-repeat: no-repeat;
  background-position: center var(--logoY);
  background-size: var(--logoW) auto;

  filter: none !important;
}

/* Si tu as encore l'ancienne div .bg, on évite les doublons */
.bg{ display:none !important; }

/* IMPORTANT : on cache l'img qui te coupe tout */
.logo{ display:none !important; }

/* CTA : placé dans le “bloc 3” (juste sous le logo en général) */
.page > .cta{
 z-index:1;
  grid-row: 4;  /* ← Changé de 3 à 4 */
  align-self: start;  /* ← Changé de end à start */
  justify-self: center;
  
  margin-top: clamp(10px, 2vh, 26px);  /* ← margin-top au lieu de margin-bottom */

  text-decoration:none;
  font-weight: 600;
  font-size: 1rem;

  padding: clamp(14px, 2vh, 18px) clamp(28px, 4vw, 44px);
  border-radius: 0px;

  background-color: #F9F5FF ;
  color: #090112 ;

  transition: transform .3s ease, background .3s ease;
}

.page > .cta:hover{
  background-color: #AA49F9 !important;
  color: #f9F5FF !important;
}

.page > .cta:focus-visible{
  outline: 3px solid rgba(170,73,249,.55);
  outline-offset: 4px;
}

/* Sécurité : si la fenêtre est “basse”, on garantit que le logo ne se coupe jamais */
@media (max-height: 720px){
  .page::before{
    background-size: contain;
    background-position: center 46%;
  }
  .page > .cta{
    grid-row: 4;
    align-self: start;
    margin-top: 12px;
    margin-bottom: 0;
  }
}

/* Mobile : léger ajustement */
@media (max-width: 480px){
  :root{ --logoY: 42%; }
  .page > .cta{
    font-size: 16px;
    padding: 14px 34px;
  }
}

/* Mobile : CTA dans la zone 3, align-end pour bien se positionner */
@media (max-width: 768px){
  :root{ --logoY: 42%; }
  
  .page > .cta{
    grid-row: 3;
    align-self: end;
    margin-top: 0;
    margin-bottom: clamp(10px, 2vh, 26px);
    font-size: 16px;
    padding: 14px 34px;
  }
}