/* Une seule valeur pilote la taille et le nombre de colonnes.
   100px sur mobile, environ 120px sur iPad, jusqu'à 200px sur Mac. */
:root {
    --thumb-size: clamp(100px, 15vw, 200px);
    --column-gap: 8px;
    --row-gap: 20px;
}
* { box-sizing: border-box; }
body { margin: 0; background: #333; color: #cabb5d; font: 12px 'Century Gothic', Arial, sans-serif; text-align: center; }
a { color: #cabb5d; text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { margin: 0; font-size: clamp(10px, 1.3vw, 15px); font-weight: normal; line-height: 1.3; }

/* Une seule grille pour partager exactement les memes rangées. */
.gallery-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* repli sans JavaScript */
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    padding: 14px 8px 80px;
    align-items: start;
}
/* Les enfants deviennent directement des éléments de la grille principale. */
.concert-grid, .special-grid { display: contents; }
.img { min-width: 0; width: 100%; margin: 0; text-align: center; }
.photo-link { display: block; width: 100%; }
.timbre,
.timbre:hover {
    display: block;
    width: min(100%, var(--thumb-size));
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    border: 1px solid white;
}
.img a:hover .timbre { border-color: #00f; }
.desc { width: 100%; min-width: 0; margin: 7px 0 0; overflow-wrap: anywhere; }
.show-date { display: block; }
#footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #333; border-top: 1px solid silver; padding: 4px 6px; font-size: 11px; }

/* Les iPhone les plus etroits gardent 2 concerts + 1 speciale. */
@media (max-width: 359px) {
    :root { --thumb-size: 88px; --column-gap: 6px; }
    .gallery-layout { padding-left: 5px; padding-right: 5px; }
}