html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

.banner {
  position: relative;
  z-index: 1;
  min-height: 40vh;

  /* Dégradé avec étoiles */
  background: /* Etoiles */ radial-gradient(1px 1px at 2% 5%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 6% 18%, rgba(255, 255, 255, 0.7), transparent 2px),
  radial-gradient(1.5px 1.5px at 10% 40%, rgba(255, 255, 255, 0.85), transparent 3px),
  radial-gradient(1px 1px at 14% 70%, rgba(255, 255, 255, 0.6), transparent 2px),
  radial-gradient(1px 1px at 18% 25%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 22% 60%, rgba(255, 255, 255, 0.75), transparent 2px),
  radial-gradient(1px 1px at 26% 10%, rgba(255, 255, 255, 0.8), transparent 2px),
  radial-gradient(1px 1px at 30% 45%, rgba(255, 255, 255, 0.7), transparent 2px),
  radial-gradient(1px 1px at 34% 80%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 38% 20%, rgba(255, 255, 255, 0.6), transparent 2px),
  radial-gradient(1px 1px at 42% 55%, rgba(255, 255, 255, 0.85), transparent 2px),
  radial-gradient(1px 1px at 46% 30%, rgba(255, 255, 255, 0.75), transparent 2px),
  radial-gradient(1px 1px at 50% 75%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 54% 15%, rgba(255, 255, 255, 0.7), transparent 2px),
  radial-gradient(1px 1px at 58% 60%, rgba(255, 255, 255, 0.8), transparent 2px),
  radial-gradient(1px 1px at 62% 35%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 66% 80%, rgba(255, 255, 255, 0.6), transparent 2px),
  radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.85), transparent 2px),
  radial-gradient(1px 1px at 74% 55%, rgba(255, 255, 255, 0.7), transparent 2px),
  radial-gradient(1px 1px at 78% 10%, rgba(255, 255, 255, 0.9), transparent 2px),
  radial-gradient(1px 1px at 82% 45%, rgba(255, 255, 255, 0.75), transparent 2px),
  radial-gradient(1px 1px at 86% 70%, rgba(255, 255, 255, 0.8), transparent 2px),
  radial-gradient(1px 1px at 90% 30%, rgba(255, 255, 255, 0.6), transparent 2px),
  radial-gradient(1px 1px at 94% 15%, rgba(255, 255, 255, 0.85), transparent 2px),
  radial-gradient(1px 1px at 98% 60%, rgba(255, 255, 255, 0.7), transparent 2px),
    /* Voile ciel nocturne */ radial-gradient(ellipse at 50% 0%, rgba(10, 20, 40, 0.6), transparent 60%),
    /* Fond dégradé */ linear-gradient(180deg, #1a2a3a 0%, #2b3f55 40%, #f4e2bd 100%);

  /* Fondre le bas de la bannière pour éviter la ligne de coupe */
  -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
}

.content {
  position: relative;
  z-index: 2;
  min-height: 100vh;

  /* On remonte le bloc pour qu'il chevauche la bannière */
  margin-top: -150px;
  margin-bottom: -90px;
  /* On décale le texte interne pour qu'il ne soit pas collé en haut */
  padding-top: 80px;
  padding-bottom: 60px;
}

.content::before {
  content: "";
  position: absolute;
  inset: 0; /* Remplace top/left/right/bottom: 0 */

  background-color: rgba(244, 226, 189, 0.6);
  background-image: url("img/sable.jpg");

  background-blend-mode: screen;
  background-size: cover;
  background-position: center;

  /* Masque qui crée la transparence sur le haut du sable */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);

  z-index: -1;
}

footer {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  background: linear-gradient(180deg, #f4e2bd 0%, #2b3f55 40%, #1a2a3a 100%);
}

@media (max-width: 1919px) {
  .banner {
    min-height: 41vh;
  }
}

@media (max-width: 1199px) {
  .banner {
    min-height: 42vh;
  }
}

@media (max-width: 767px) {
  .banner {
    min-height: 55vh;
  }

  .content {
    margin-top: -80px;
    padding-top: 50px;
  }
}