/* Galerie : grille, filtres, visionneuse. */
.rsg-galerie { --rsg-cols: 5; }
.rsg-filtres { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 1.4rem; }
.rsg-filtre { cursor: pointer; padding: .4rem 1.1rem; font: inherit; font-size: .9rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; opacity: .75; }
.rsg-filtre:hover, .rsg-filtre:focus-visible { opacity: 1; }
.rsg-filtre.is-active { opacity: 1; color: #fff; background: var(--wp--preset--color--accent-1, #B01828); border-color: var(--wp--preset--color--accent-1, #B01828); }
.rsg-grille { display: grid; grid-template-columns: repeat(var(--rsg-cols), 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.rsg-item { margin: 0; }
.rsg-item[hidden] { display: none; }
.rsg-item a { display: block; overflow: hidden; background: #000; }
.rsg-item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease, opacity .25s ease; }
.rsg-item a:hover img, .rsg-item a:focus-visible img { transform: scale(1.05); opacity: .9; }
.rsg-item a:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1, #B01828); outline-offset: 2px; }
@media (max-width: 900px) { .rsg-grille { grid-template-columns: repeat(min(var(--rsg-cols), 3), 1fr); } }
@media (max-width: 560px) { .rsg-grille { grid-template-columns: repeat(min(var(--rsg-cols), 2), 1fr); gap: 6px; } }

/* Visionneuse */
.rsg-visionneuse { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .94); }
.rsg-visionneuse.is-open { display: flex; }
.rsg-visionneuse figure { display: flex; flex-direction: column; align-items: center; max-width: 94vw; max-height: 94vh; margin: 0; }
.rsg-visionneuse img { max-width: 94vw; max-height: 80vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.rsg-visionneuse figcaption { max-width: 80ch; margin-top: .8rem; padding: 0 1rem; color: #fff; text-align: center; font-size: .95rem; }
.rsg-visionneuse figcaption small { display: block; opacity: .7; margin-top: .2em; }
.rsg-visionneuse button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: #fff; font-size: 28px; line-height: 1; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; cursor: pointer; }
.rsg-visionneuse button:hover, .rsg-visionneuse button:focus-visible { background: var(--wp--preset--color--accent-1, #B01828); outline: 0; }
.rsg-v-fermer { top: 14px; right: 14px; }
.rsg-v-prec { left: 14px; top: 50%; transform: translateY(-50%); }
.rsg-v-suiv { right: 14px; top: 50%; transform: translateY(-50%); }
.rsg-v-compteur { position: absolute; left: 16px; top: 18px; color: #fff; opacity: .7; font-size: .9rem; }
body.rsg-bloque { overflow: hidden; }
@media (max-width: 560px) { .rsg-v-prec, .rsg-v-suiv { top: auto; bottom: 14px; transform: none; } }

/* Mosaïque : deux grilles dans le bloc, une seule visible.
   Ordinateur et tablette : 5 colonnes x 3 rangées. Téléphone (≤ 760px) : 2 colonnes x 7 rangées.
   Dans les deux cas : une photo verticale = 2 cases en hauteur, une photo large = 2 cases en largeur. */
.rsg-galerie--mosaique .rsg-grille { grid-auto-rows: clamp(120px, 14vw, 220px); }
.rsg-galerie--mosaique .rsg-grille--bureau { grid-template-columns: repeat(var(--rsg-cols), 1fr); }
.rsg-galerie--mosaique .rsg-grille--mobile { display: none; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(100px, 27vw, 170px); gap: 6px; }
.rsg-galerie--mosaique .rsg-item a { height: 100%; }
.rsg-galerie--mosaique .rsg-item img { height: 100%; aspect-ratio: auto; }
.rsg-galerie--mosaique .rsg-item--haute { grid-row: span 2; }
.rsg-galerie--mosaique .rsg-item--large { grid-column: span 2; }
@media (max-width: 760px) {
	.rsg-galerie--mosaique .rsg-grille--bureau { display: none; }
	.rsg-galerie--mosaique .rsg-grille--mobile { display: grid; }
}

/* Hauteur des rangées de la mosaïque : proportionnelle à la largeur d'une case, quel que soit le nombre de colonnes (5 sur l'accueil, 3 sur les pages). */
.rsg-galerie--mosaique .rsg-grille--bureau { grid-auto-rows: calc( min( var( --wp--style--global--wide-size, 1200px ), 100vw - 4rem ) / var( --rsg-cols ) * .66 ); }
.rsg-galerie--mosaique .rsg-grille--mobile { grid-auto-rows: calc( ( 100vw - 2.6rem ) / 2 * .72 ); }

/* Bouton « Autres photos » sous la galerie de l'accueil. */
.rsg-autres { margin: 1.6rem 0 0; text-align: center; }
.rsg-autres__bouton { cursor: pointer; padding: .85rem 1.8rem; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.rsg-autres__bouton:hover, .rsg-autres__bouton:focus-visible { color: #fff; background: var(--wp--preset--color--accent-1, #B01828); border-color: var(--wp--preset--color--accent-1, #B01828); }
.rsg-autres__bouton:disabled { opacity: .5; cursor: progress; }
.rsg-galerie.is-chargement .rsg-grille { opacity: .5; transition: opacity .2s ease; }

/* « Autres photos » : la grille sort vers la gauche, la nouvelle entre par la droite (voir view.js). */
.rsg-galerie--mosaique { overflow-x: clip; }
.rsg-galerie.is-glissement .rsg-grille { transition: transform .55s cubic-bezier( .65, 0, .35, 1 ), opacity .55s ease; }
.rsg-galerie .rsg-grille.is-sortie { transform: translateX( -100% ); opacity: 0; }
.rsg-galerie .rsg-grille.is-entree { transform: translateX( 100% ); opacity: 0; transition: none !important; }
@media ( prefers-reduced-motion: reduce ) { .rsg-galerie .rsg-grille { transition: none !important; transform: none !important; } }

/* Bulles de pages (remplacent « Autres photos ») : petits ronds ; zone de toucher confortable (32 px). */
.rsg-pages { display: flex; justify-content: center; gap: .15rem; margin: 1rem 0 0; }
.rsg-bulle { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; }
.rsg-bulle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; opacity: .55; transform: translate( -50%, -50% ); transition: background .3s ease, border-color .3s ease, opacity .3s ease, transform .3s ease; }
.rsg-bulle:hover::before, .rsg-bulle:focus-visible::before { opacity: 1; }
.rsg-bulle.is-active::before { background: var(--wp--preset--color--accent-1, #B01828); border-color: var(--wp--preset--color--accent-1, #B01828); opacity: 1; transform: translate( -50%, -50% ) scale( 1.15 ); }
.rsg-bulle:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1, #B01828); outline-offset: -4px; border-radius: 50%; }
/* Page précédente : la grille part à droite, la nouvelle arrive par la gauche. */
.rsg-galerie.is-retour .rsg-grille.is-sortie { transform: translateX( 100% ); }
.rsg-galerie.is-retour .rsg-grille.is-entree { transform: translateX( -100% ); }
/* Téléphone : la galerie ET ses bulles tiennent toujours dans l'écran (sous la barre du menu). */
@media ( max-width: 760px ) {
	.rsg-galerie--mosaique .rsg-grille--mobile {
		grid-auto-rows: min( calc( ( 100vw - 2.6rem ) / 2 * .72 ), calc( ( 100svh - var( --rs-entete-h, 4.6rem ) - 4.4rem - ( var( --rsg-rangs-mobile, 7 ) - 1 ) * 6px ) / var( --rsg-rangs-mobile, 7 ) ) );
	}
	.rsg-pages { margin-top: .6rem; }
}