/* Reset simple */
*{box-sizing:border-box;margin:0;padding:0}

/* Page */
body{
  font-family:'Poppins',sans-serif;
  background:#fff;
  color:#222;
  line-height:1.6;
}

/* En-tête centré */
header{
  text-align:center;
  padding:48px 16px 24px;
}
h1{font-size:2.2rem;margin-bottom:8px}
header p{color:#555;max-width:760px;margin:0 auto}

/* Conteneur principal */
main{max-width:1100px;margin:0 auto;padding:20px}

/* Titres de sections */
h2 {
  font-size: 1.8rem;
  margin-top: 60px;
  margin-bottom: 25px;
  color: #111;
  text-align: center;
  letter-spacing: 1px;
}

/* --- Gallery : utilisation de CSS Grid pour 3 colonnes propres --- */
.gallery{
  display:grid;
  grid-template-columns: repeat(5, 1fr); /* 3 colonnes */
  gap:24px;
  justify-items:center;
  align-items:start;
  padding: 0 12px;
}

/* Chaque image + légende */
figure{
  width:100%;
  max-width:320px;    /* limite la largeur d'une carte */
  text-align:center;
  margin:0;
}

/* Image à l'intérieur d'un figure : ne dépasse jamais sa carte */
figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  object-fit:cover;
  transition:transform .22s ease, box-shadow .22s ease;
}

/* Hover léger */
figure img:hover{ transform:scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,0.08) }

/* Légende sous l'image */
figcaption{
  margin-top:8px;
  font-size:0.92rem;
  color:#666;
}

/* Formulaire & footer */
form{display:flex;flex-direction:column;gap:10px;max-width:480px;margin:0 auto}
input,textarea{padding:10px;border:1px solid #ddd;border-radius:6px;font-size:1rem}
button{background:#111;color:#fff;border:0;padding:10px;border-radius:6px;cursor:pointer}

/* Lightbox si vous avez (conserver si présent dans JS) */
#lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.95);z-index:9999}
#lightbox img{max-width:92%;max-height:92%;border-radius:6px}

/* --- Responsive : 2 colonnes en tablettes, 1 colonne sur petit écran --- */
@media (max-width:900px){
  .gallery{grid-template-columns: repeat(2, 1fr)}
  h2{text-align:center}
}
@media (max-width:520px){
  .gallery{grid-template-columns: 1fr}
  figure{max-width:90%}
}
footer {
  text-align: center;
  padding: 30px 0 10px;
  color: #777;
  font-size: 0.9rem;
}