/* =============================================================================
   La galerie : des photos au même endroit, les points qui disent où l'on est,
   les flèches du survol, et le plein écran. La mécanique, et ses raisons, sont
   dans javascript/galerie.js.

   La galerie prend la hauteur qu'on lui donne : la page qui la pose la fixe
   (voir .annonce__galerie dans css/bazar.css). Les photos s'y montrent
   entières et centrées ; celles du Bazar sont carrées, elles remplissent une
   galerie carrée.
   ============================================================================= */

.galerie {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-2, #ecebe8);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* La piste défile d'une photo à l'autre et s'arrête sur chacune, une à la
   fois même d'un geste vif. Sa barre ne se montre pas : les points disent déjà
   où l'on est. */
.galerie__piste {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.galerie__piste::-webkit-scrollbar {
  display: none;
}

.galerie__piste:focus-visible {
  outline: 2px solid var(--accent, #2f6fd6);
  outline-offset: -3px;
}

.galerie__vue {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.galerie__vue img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* ---- les flèches du survol ---------------------------------------------------

   Elles ne s'attrapent pas : c'est tout le tiers qui répond au clic, la flèche
   dit seulement ce qu'il fera. Sans souris, elles ne paraissent pas — on fait
   glisser. */
.galerie__fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: rgb(255 255 255 / .94);
  color: #1c1917;
  box-shadow: 0 2px 12px rgb(0 0 0 / .24);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.galerie__fleche--prec {
  left: .85rem;
}

.galerie__fleche--suiv {
  right: .85rem;
}

/* La flèche du bord survolé se lit sur son parent direct : elle sert à toute
   bande qui en porte — une galerie, les aperçus d'un logiciel — sans qu'une
   bande n'allume les flèches d'une autre posée dedans. */
[data-survol="prec"] > .galerie__fleche--prec,
[data-survol="suiv"] > .galerie__fleche--suiv {
  opacity: 1;
  transform: none;
}

.galerie[data-survol="prec"],
.galerie[data-survol="suiv"] {
  cursor: pointer;
}

.galerie[data-survol="milieu"] {
  cursor: zoom-in;
}

@media (hover: none) {
  .galerie__fleche {
    display: none;
  }
}

/* ---- les points -------------------------------------------------------------

   Au pied de la photo, sur un voile dégradé plutôt que dans une pastille : ils
   restent lisibles sur un ciel clair comme sur une nuit, sans ajouter de cadre
   à l'image. Le point de la photo qu'on regarde s'allonge en trait, et le trait
   glisse d'une photo à l'autre. Les points sont petits, leurs cibles non :
   chaque bouton fait vingt pixels de haut.

   Le voile laisse passer les clics — un clic au pied de la photo change de
   photo ou ouvre le plein écran, comme ailleurs — ; seuls les points
   répondent. */
.galerie__points {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.4rem .75rem .5rem;
  background: linear-gradient(to top, rgb(0 0 0 / .34), rgb(0 0 0 / .1) 60%, transparent);
  pointer-events: none;
}

.galerie__point {
  position: relative;
  flex: none;
  width: 16px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transition: width .32s cubic-bezier(.2, .8, .2, 1);
}

.galerie__point::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / .55);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transform: translate(-50%, -50%);
  transition: width .32s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}

.galerie__point:hover::before {
  background: rgb(255 255 255 / .85);
}

.galerie__point[aria-current="true"] {
  width: 30px;
}

.galerie__point[aria-current="true"]::before {
  width: 18px;
  background: #fff;
}

.galerie__point:focus-visible {
  outline: none;
}

.galerie__point:focus-visible::before {
  box-shadow: 0 0 0 2px var(--accent, #2f6fd6), 0 1px 3px rgb(0 0 0 / .3);
}

/* ---- la mosaïque -------------------------------------------------------------

   Les photos d'un écran large, d'un coup d'œil : la couverture en grand, les
   deux suivantes à côté, « +2 » s'il en reste (bazar_mosaique(), dans
   php/bazar_annonces.php). En 3:2, avec des colonnes de deux tiers et d'un
   tiers, la couverture et les petites cases sont presque carrées : des photos
   carrées n'y perdent rien.

   Une ou deux photos ne remplissent pas la mosaïque : elles s'y posent entières
   (contain), sur un fond flou tiré d'elles-mêmes, plutôt que coupées ou
   entourées de vide. Chaque case est un bouton, qui ouvre le plein écran sur sa
   photo. */
.mosaique {
  display: grid;
  gap: .4rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-card, 14px);
  background: var(--surface-2, #ecebe8);
}

.mosaique--2,
.mosaique--3 {
  grid-template-columns: 2fr 1fr;
}

.mosaique--3 {
  grid-template-rows: 1fr 1fr;
}

.mosaique--3 .mosaique__case:first-child {
  grid-row: 1 / 3;
}

.mosaique__case {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--surface-2, #ecebe8);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.mosaique__photo,
.mosaique__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mosaique__photo {
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.mosaique--1 .mosaique__photo,
.mosaique--2 .mosaique__photo {
  object-fit: contain;
}

.mosaique__fond {
  object-fit: cover;
  filter: blur(26px) saturate(1.2);
  opacity: .7;
  transform: scale(1.2);
}

/* Le survol : la photo s'avance à peine, et un voile léger dit qu'on peut
   cliquer. Le voile porte aussi l'anneau du focus, au-dessus de « +2 ». */
.mosaique__case::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(0 0 0 / 0);
  transition: background-color .2s ease;
  pointer-events: none;
}

.mosaique__case:hover .mosaique__photo {
  transform: scale(1.04);
}

.mosaique__case:hover::after {
  background: rgb(0 0 0 / .06);
}

.mosaique__case:focus-visible {
  outline: none;
}

.mosaique__case:focus-visible::after {
  box-shadow: inset 0 0 0 3px var(--accent, #2f6fd6);
}

/* « +2 » : les photos qui ne tiennent pas, sur la dernière case. */
.mosaique__plus {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgb(20 16 12 / .5);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: .01em;
  transition: background-color .2s ease;
}

.mosaique__case:hover .mosaique__plus {
  background: rgb(20 16 12 / .58);
}

/* ---- le plein écran ---------------------------------------------------------- */

/* Toute la fenêtre du navigateur, pas l'écran, et le voile des fenêtres du
   site : l'encre translucide et le flou qu'on voit derrière une annonce
   ouverte (--voile, --voile-flou, dans la charte). Un fond noir plein faisait
   une pièce rapportée — une visionneuse d'ailleurs — et coupait de la page
   qu'on regardait. */
.galerie-plein {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--voile, rgb(20 16 12 / .55));
  -webkit-backdrop-filter: var(--voile-flou, blur(3px));
  backdrop-filter: var(--voile-flou, blur(3px));
  overscroll-behavior: contain;
  animation: galerie-plein .2s ease-out;
}

.galerie--plein {
  position: absolute;
  inset: 0;
  background: transparent;
}

.galerie--plein[data-survol="milieu"] {
  cursor: zoom-out;
}

.galerie--plein .galerie__fleche--prec {
  left: 1.2rem;
}

.galerie--plein .galerie__fleche--suiv {
  right: 1.2rem;
}

.galerie--plein .galerie__points {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: none;
}

.galerie-plein__fermer {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease;
}

.galerie-plein__fermer:hover {
  background: rgb(255 255 255 / .22);
}

.galerie-plein__fermer:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes galerie-plein {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galerie__fleche,
  .galerie__point,
  .galerie__point::before,
  .galerie-plein__fermer,
  .mosaique__photo,
  .mosaique__case::after,
  .mosaique__plus {
    transition: none;
  }

  .galerie-plein {
    animation: none;
  }
}