/* ================== Accueil ================== */

/* 1) Scroll : bloqué par défaut, autorisé si fenêtre trop basse */
html, body {
  height: 100%;
  overflow: hidden;
}

/* Si la fenêtre est basse, on réactive le scroll vertical */
@media (max-height: 720px) {
  html, body { overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html, body { overflow-y: auto; }
}

/* Le fond global ne doit pas "coller" en mobile */
body {
  background-attachment: scroll !important;
}

/* 2) Logo géant en arrière-plan (décor uniquement) */
.background-logo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;         /* dessous du contenu */
  pointer-events: none;
}
.background-logo svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180%;
  height: auto;
  opacity: 0.25;      /* lisibilité du texte */
}

/* 3) Contenu centré + réserve pour le logo fixe */
.content {
  position: relative;
  z-index: 2;                         /* au-dessus du SVG */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* réserve pour le logo fixe + marge basse safe-area */
  padding: clamp(120px, 18vh, 200px) 1rem max(3.5rem, env(safe-area-inset-bottom));
}

/* Quand la fenêtre est basse, on compacte la réserve et les espacements */
@media (max-height: 720px) {
  .content {
    padding: clamp(80px, 12vh, 140px) 1rem max(2rem, env(safe-area-inset-bottom));
  }
}

/* 4) Logo principal : fixé, centré en haut */
.content .logo {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: clamp(220px, 28vw, 360px);
  margin: 0 !important;
  z-index: 3;         /* au-dessus du SVG */
  display: block;
}
.content .logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 5) Titre */
h1 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 600;
  margin: 0 0 3.2rem;
  line-height: 1.6;
}
@media (max-height: 720px) {
  h1 { margin-bottom: 2.2rem; }
}

/* 6) Boutons : grille fluide centrée, largeur adaptable */
.buttons {
  max-width: 90vw;
  display: flex;
  justify-content: center;
}
.buttons .nav-links {
  display: flex;
  flex-wrap: wrap;         /* retour à la ligne */
  justify-content: center; /* centre toutes les lignes */
  column-gap: 1.2rem;      /* espaces horizontaux */
  row-gap: 1.2rem;         /* espaces verticaux */
}

/* largeur fluide : min 150px, max 200px, proportionnelle entre les deux */
.buttons .nav-links a {
  flex: 0 1 clamp(150px, 40vw, 200px);
  text-align: center;

  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);

  padding: 0.75rem 1rem;
  color: white;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.buttons .nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 7) Mobile/étroit : logo réduit + boutons plus compacts */
@media (max-width: 480px) {
  .content .logo { max-width: 220px; }
  h1 { margin-bottom: 2rem; }

  .buttons .nav-links {
    column-gap: 1rem;
    row-gap: 1rem;
  }
  .buttons .nav-links a {
    flex-basis: clamp(140px, 44vw, 180px);
    font-size: 0.95rem;
    padding: 0.65rem 0.9rem;
  }
}

/* 8) Masquer la nav globale sur l’accueil (on n’affiche que les gros boutons) */
.nav { display: none; }