/* Responsive Connexion */
@media (max-width: 600px) {
  .bloc-connexion {
    max-width: 98vw;
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    border-radius: 12px;
  }
  .section-title {
    font-size: 1.1rem;
  }
  .form-input {
    font-size: 0.98rem;
    padding: 0.6rem 0.7rem;
  }
}

/* Responsive Vidéo */
@media (max-width: 700px) {
  .bloc-videos {
    max-width: 98vw;
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    border-radius: 12px;
  }
  .video-bloc {
    max-width: 98vw;
  }
  #mainVideo {
    border-radius: 10px;
  }
}

/* Responsive Poème */
@media (max-width: 600px) {
  .bloc-poeme {
    max-width: 98vw;
    padding: 1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.98rem;
  }
  .bloc-poeme blockquote {
    font-size: 1rem;
  }
}

/* Responsive Footer */
@media (max-width: 700px) {
  #mainFooter {
    padding: 1.2rem 0.3rem 0.8rem 0.3rem;
  }
  #contact-section {
    max-width: 98vw;
    padding: 0 0.2rem;
  }
  #contact-section ul {
    gap: 0.7rem;
  }
  #contact-section ul li a img {
    width: 28px;
    height: 28px;
  }
}

/* Responsive Galerie (complément) */
@media (max-width: 700px) {
  .bloc-galerie {
    padding: 1.2rem 0.2rem;
    border-radius: 1rem;
    max-width: 98vw;
  }
  .galerie-item img {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .galerie-grid {
    grid-template-columns: 1fr;
  }
  .bloc-galerie {
    padding: 0.7rem 0.1rem;
    border-radius: 0.7rem;
  }
}

/* Photos carrées sur tablettes et ordinateurs */
@media (min-width: 701px) {
  .galerie-item img {
    height: 220px;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}

@media (min-width: 1025px) {
  .galerie-item img {
    height: 260px;
    aspect-ratio: 1/1;
    object-fit:cover;
  }
}

/* Afficher 6 photos max sur mobiles et tablettes */
@media (max-width: 1024px) {
  .galerie-item {
    display: none;
  }
  .galerie-item:nth-child(-n+6) {
    display: block;
  }
}

/* Fix mobile: prevent bottom nav from touching the Snap’ixel logo in the header */
@media (max-width: 700px) {
  /* Add extra bottom padding to the header using the dynamic nav height variable */
  body > header.header-container {
    padding-bottom: calc(var(--bottom-nav-h, 56px) + 12px);
  }
}
/* Fond noir sur grands écrans */
@media (min-width: 1025px) {
  body {
    background: #1a1a1a !important;
  }
}