/* Galerie photos */ .galerie { /* Élément flex du : width + min-width sont indispensables, sinon la grille se dimensionne sur son contenu et déborde sur mobile. */ width: 100%; max-width: 1120px; min-width: 0; box-sizing: border-box; margin: 24px auto 50px; padding: 0 18px; text-align: center; } .galerie__titre { font-size: 28px; color: #222; margin: 10px 0 6px; } .galerie__intro { color: #666; margin: 0 0 22px; } .galerie__message { max-width: 520px; margin: 0 auto 18px; padding: 11px 16px; background: #eafaf1; color: #1e7d4f; border-radius: 10px; font-weight: 600; font-size: 14px; } .galerie__message--erreur { background: #fdecec; color: #d33333; } .galerie__ajout { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 620px; margin: 0 auto 26px; padding: 16px 18px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); } .galerie__ajout label { width: 100%; font-weight: 600; color: #444; font-size: 14px; } .galerie__ajout .form-btn { width: auto; margin: 0; padding: 10px 22px; } .galerie__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .galerie__item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); aspect-ratio: 4 / 3; } .galerie__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .galerie__item:hover img { transform: scale(1.04); } /* Bouton de suppression (administrateur). */ .galerie__suppr { position: absolute; top: 8px; right: 8px; margin: 0; } .galerie__suppr button { width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; transition: background-color .2s; } .galerie__suppr button:hover { background: #d33333; } .galerie__vide { color: #888; font-style: italic; padding: 30px 0; } @media (max-width: 600px) { .galerie__grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }