/* grille — feuille du module grille.js (PHOTOS-GRILLE-3009). Chargée APRÈS les feuilles de la page (heritage, filtres, examiner, gomme)
 * et préfixée « html main[data-decouvrir="photos"] » : à poids égal elle gagne par l'ordre, et le préfixe de plus lui donne le
 * dessus même si une feuille future est posée après elle. Aucune couleur n'est écrite ici : les boutons gardent celles de leur
 * ambiance (--card, --line, --dim, --brass), seuls la FORME, la TAILLE et la typographie sont alignées.
 * 1.0.0 (30/09/2026). */

/* ═══ 1. GRILLE À COLONNES STABLES ═══ */
/* invisible jusqu'à la première pose (grille.js pose data-mz), avec un filet : sans le script, visible après 1,8 s comme avant */
html main[data-decouvrir="photos"] #dv #gal:not([data-mz]) { visibility: hidden; animation: ftv-gr-secours 0s linear 1.8s forwards; }
@keyframes ftv-gr-secours { to { visibility: visible; } }
html main[data-decouvrir="photos"] #dv #gal[data-mz="1"] { position: relative; display: block; column-count: auto; columns: auto; column-gap: 0; }
html main[data-decouvrir="photos"] #dv #gal[data-mz="1"] .card {
	position: absolute; inset-block-start: 0; inset-inline-start: 0; margin: 0; box-sizing: border-box;
	content-visibility: visible; contain-intrinsic-size: none; }
/* avant l'arrivée de l'image : une boîte 4/5 ; après : son rapport réel. Elle ne fait plus « sauter » la carte de zéro à sa taille. */
html main[data-decouvrir="photos"] #dv #gal[data-mz="1"] .card .ph { aspect-ratio: auto 4 / 5; height: auto; }

/* ═══ 2. BOUTONS : la forme de l'en-tête et de Clips (pilule), une seule hauteur ═══ */
html main[data-decouvrir="photos"] #dv .propose,
html main[data-decouvrir="photos"] #dv .tb-compact .fpop > summary.chip,
html main[data-decouvrir="photos"] #dv .fpop-p .frow .chip,
html main[data-decouvrir="photos"] #dv #galall {
	border-radius: 999px; font-size: 13px; line-height: 1.2; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
html main[data-decouvrir="photos"] #dv .propose { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; font-weight: 650; }
html main[data-decouvrir="photos"] #dv .propose .gr-ico { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html main[data-decouvrir="photos"] #dv .tb-compact .fpop > summary.chip { min-height: 44px; padding: 8px 18px; gap: 8px; }
html main[data-decouvrir="photos"] #dv .fpop-p .frow .chip { min-height: 40px; padding: 8px 16px; font-weight: 650; }
/* cible tactile : 44 px au téléphone (la feuille heritage les avait déjà à 44, on ne les fait pas redescendre) */
@media (max-width: 760px) { html main[data-decouvrir="photos"] #dv .fpop-p .frow .chip { min-height: 44px; } }
html main[data-decouvrir="photos"] #dv #galall { min-height: 44px; padding: 8px 20px; font-weight: 650; }
/* survol et clavier : le même liseré partout */
html main[data-decouvrir="photos"] #dv .propose:hover,
html main[data-decouvrir="photos"] #dv .tb-compact .fpop > summary.chip:hover,
html main[data-decouvrir="photos"] #dv .fpop-p .frow .chip:not(.on):hover,
html main[data-decouvrir="photos"] #dv #galall:hover { border-color: var(--brass, var(--accent, currentColor)); }
html main[data-decouvrir="photos"] #dv .propose:focus-visible,
html main[data-decouvrir="photos"] #dv .tb-compact .fpop > summary.chip:focus-visible,
html main[data-decouvrir="photos"] #dv .fpop-p .frow .chip:focus-visible,
html main[data-decouvrir="photos"] #dv #galall:focus-visible { outline: 2px solid var(--brass, var(--accent, currentColor)); outline-offset: 2px; }

/* ═══ 3. LA BARRE DE FILTRES : une pilule qui contient des pilules (comme la barre de menus de l'en-tête) ═══ */
html main[data-decouvrir="photos"] #dv .toolbar.tb-compact { padding: 5px; border-radius: 30px; }
/* le compteur « N affichées / total » : sur une seule rangée il n'a pas à porter le filet de tête de la version en grille,
   qui n'y dessinait qu'un trait coupé au-dessus du texte ; en grille (téléphone) le filet de séparation reste. */
@media (min-width: 761px) {
	html main[data-decouvrir="photos"] #dv .toolbar.tb-compact .gcount { border-top: 0; padding: 0 16px 0 0; margin-block: 0; margin-inline-start: auto; }
}