:root{
  --bg-overlay: rgba(0,0,0,.25);
  --panel: rgba(0,0,0,.6);
  --card: rgba(0,0,0,.4);
  --text-shadow: 0 0 8px rgba(0,0,0,.8);
  --radius: 12px;
  --gap: 20px;
  --max: 1400px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:#fff;
  text-shadow: var(--text-shadow);
}
body::before{
  content:"";
  position:fixed; inset:0;
  /* PLUS AUCUNE IMAGE DE FOND */
  background: var(--bg-overlay);
  z-index:0;
}

/* En-tete / pied */
.panel{
  background:var(--panel);
  padding:1rem;
  text-align:center;
  position:relative;
  z-index:1;
}
nav{ display:inline-flex; gap:.5rem; align-items:center; }
.sep{ opacity:.6; }
.linklike{ background:none; border:0; color:#fff; padding:0; font:inherit; cursor:pointer; }
.linklike:hover{ text-decoration:underline; }

/* Contenu */
main{
  flex:1;
  display:flex;
  justify-content:center;
  padding:2rem;
  position:relative;
  z-index:1;
}

/* Grille a colonnes fixes */
.gallery{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fill, 260px);
  justify-content:center;
  gap: var(--gap);
  width:100%;
  max-width: var(--max);
}

/* Carte */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:260px;
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.5);
  transition: transform .3s ease;
  text-decoration:none;
  color:#fff;
}
.card:hover{ transform: scale(1.03); }

/* Image recadree */
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  background: rgba(0,0,0,.25);
}

figure{ margin:0; width:100%; }
figcaption{
  width:100%;
  padding:.6rem 1rem;
  text-align:center;
  font-weight:700;
  background:rgba(0,0,0,.5);
  color:#fff;
}

.price{
  margin:.6rem 0 1rem;
  font-style:italic;
}

/* Liens */
.gallery a:link,
.gallery a:visited,
.gallery a:hover,
.gallery a:active{
  color:#fff;
  text-decoration:none;
}
.gallery a:hover{ text-decoration:underline; }

/* Dropdown */
.dropdown{
  max-height:0; overflow:hidden;
  margin:1rem auto 0; padding:0 1rem;
  background: rgba(0, 0, 0, .7);
  border-radius:10px; text-align:center;
  width:min(800px,95%);
  transition: max-height .35s ease, padding .35s ease;
}
.dropdown.show{ max-height:220px; padding:1rem; }
.dropdown p{ margin:.4rem 0; }

/* Responsive */
@media (max-width: 420px){
  .gallery{
    grid-template-columns: repeat(auto-fill, 220px);
  }
  .card{ width:220px; }
  .card img{ height:150px; }
}

/* Accessibilite motion */
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover{ transform:none; }
  .dropdown{ transition:none; }
}