/* ============================= */ /* GRILLE PRINCIPALE */ /* ============================= */ 

  .grille-encart { 
    display: grid; 
    grid-template-columns:
    repeat(8, 1fr); 
    gap: 20px; 
    box-sizing: border-box; 
    width: 100%; max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 10px; 
  } 
  
  /* --- ENCARDS --- */ 

  .encart1 { grid-column: 1 / span 4; grid-row: 1; } 
  .encart2 { grid-column: 5 / span 4; grid-row: 1; } 
  .encart3 { grid-column: 1 / span 8; grid-row: 2; } 
  
  /* --- STYLE GENERAL DES ENCARDS --- */ 
  
  .encart { 
    background-color: #fff; 
    border-radius: 16px; 
    padding: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.07); 
    box-sizing: border-box; } 
    
  .encart h2 { 
    margin-top: 0; 
    margin-bottom: 8px;
   }
  
  h2 { 
    margin-bottom: 10px; 
    font-size: clamp(1rem, 2.5vw, 1.3rem); 
    color: #7dc8e5; 
    text-align: left; 
  } 
  
  h3 { 
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); 
  } 
  
  .encart img { 
    width: 100%; 
    height: auto; 
    display: block; 
  } 
    
/* ============================= */
/*      GALERIE FANS MASONRY     */
/* ============================= */

/* Container Masonry */
.masonry-grid {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* === Masonry responsive avec gutter fixe === */

/* Desktop 3 colonnes */
.grid-sizer,
.photo-item {
  width: calc(33.33% - 6.66px); /* 3 colonnes avec gutter 10px */
  margin-bottom: 15px;           /* espacement vertical */
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
}

/* Images */
.photo-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

/* Tablette 2 colonnes */
@media (max-width: 900px) {
  .grid-sizer,
  .photo-item {
    width: calc(50% - 5px); /* 2 colonnes avec gutter 10px */
  }
}

/* Mobile 1 colonne */
@media (max-width: 600px) {
  .grid-sizer,
  .photo-item {
    width: 100%; /* 1 colonne */
  }
}

/* ============================= */
/*         LIGHTBOX               */
/* ============================= */
#lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
  color: #fff;
}

#lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  margin-bottom: 10px;
}

#lightbox-info {
  font-size: 1rem;
}

#lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 2rem;
  cursor: pointer;
  color: #fff;
}

#lightbox {
display: none;
pointer-events: auto;
}


.lightbox-content {
pointer-events: none;
}


.lightbox-content * {
pointer-events: auto;
}
  
  /* ===== formulaire dlydf ===== */  
  
  .fans-photo-form {
     width: 100%; 
     font-size: clamp(0.8rem, 1.5vw, 0.87rem); 
  } 
    
  /* Blocs label + champ */ 
  
  .fans-photo-form label { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    margin-bottom: 14px; 
    font-size: inherit; 
  } 
    
  /* Champs texte, email & fichier */ 
  .fans-photo-form input[type="text"], 
  .fans-photo-form input[type="email"], 
  .fans-photo-form input[type="file"], 
  .fans-photo-form textarea { 
    width: 100%; 
    box-sizing: border-box; 
    font-size: inherit; 
    padding: 10px 12px; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
  } 
  
  /* Textarea */ 
  
  .fans-photo-form textarea { 
    resize: vertical; 
  }
  
  /* Questions (fieldset) – si tu en ajoutes plus tard */ 
  
  .fans-photo-form fieldset { 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 16px; 
    font-size: inherit; 
  } 
  
  /* Titre des questions */ 
  .fans-photo-form legend { 
    font-weight: bold; 
    padding: 0 6px; 
    font-size: inherit; } /* Radios / checkbox */ 
    
  .fans-photo-form input[type="radio"], 
  .fans-photo-form input[type="checkbox"] { 
    margin-right: 6px; } /* Bouton */ 
  
  .fans-photo-form button { 
    width: 100%; 
    font-size: inherit; 
    padding: 12px; 
    border-radius: 8px; 
    border: none; 
    cursor: pointer; 
    background-color: #007bff; /* couleur bouton */ 
    color: #fff; 
    } 
    
    /* Message de confirmation */ 
      
    #confirmation-message { 
      color: #000000; 
      font-weight: normal; 
      font-size: clamp(0.8rem, 1.5vw, 0.87rem); 
      margin-bottom: 20px; 
      text-align: center; }


    /* ============================= */
/*      TABLETTE ET MOBILE       */
/* ============================= */

@media (max-width: 992px) {
  .grille-encart {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }

  /* Ordre tablette */
  .encart1 { order: 1; }
  .encart2 { order: 2; }
  .encart3 { order: 3; }


@media (max-width: 600px) {
  .grille-encart {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }

  /* Ordre mobile identique à tablette */
  .encart1 { order: 1; }
  .encart2 { order: 2; }
  .encart3 { order: 3; }

    }
  }