/* ==========================================================================
   Xavier Argeles — Galerie d'un reportage : grille 3 colonnes + visionneuse

   Cette feuille sert aux pages de galerie d'une commande (une page par
   reportage). Elle reprend la grille reguliere de la page Commandes et
   lui ajoute la visionneuse plein ecran.

   Les vignettes sont carrees (assets/.../square/), les photos affichees
   en grand sont les fichiers pleine taille du dossier parent.
   ========================================================================== */

/* La page defile : on ne reprend pas l'overflow:hidden de l'accueil. */
html,
body {
  height: auto;
}

.contenu {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 48px;
}

/* --------------------------------------------------------------------------
   Titre — meme composition que les autres pages
   -------------------------------------------------------------------------- */

.entete-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: calc(var(--hauteur-entete) + 54px) 0 30px;
}

.entete-page__surtitre {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

.entete-page__titre {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 200;
  letter-spacing: -0.005em;
  line-height: 1;
}

.entete-page__compte {
  margin-left: 12px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--gris-inactif);
  vertical-align: super;
}

.entete-page__chapo {
  max-width: 520px;
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--gris-clair);
}

/* Fil d'Ariane : rappelle d'ou l'on vient, la galerie etant une page
   enfant de Commandes. */
.fil-ariane {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

.fil-ariane__lien {
  color: var(--gris-inactif);
  border-bottom: 1px solid transparent;
  transition: color 300ms ease, border-color 300ms ease;
}

.fil-ariane__lien:hover,
.fil-ariane__lien:focus-visible {
  color: var(--blanc);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.fil-ariane__separateur {
  margin: 0 10px;
}

/* Bloc d'informations sur le reportage, cale a droite du titre. */
.fiche {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 26px;
  margin: 0;
  padding: 0 0 8px;
  font-size: 12px;
  line-height: 1.6;
}

.fiche__intitule {
  margin: 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

.fiche__valeur {
  margin: 0;
  color: var(--gris-clair);
}

.fiche__valeur a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: color 300ms ease, border-color 300ms ease;
}

.fiche__valeur a:hover,
.fiche__valeur a:focus-visible {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

/* Plusieurs liens sur une meme ligne — un recit paru en episodes, par
   exemple. Ils passent a la ligne ensemble si la colonne est etroite. */
.fiche__valeur--liens {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.fiche__separateur {
  color: var(--gris-inactif);
}

/* --------------------------------------------------------------------------
   La grille — trois colonnes de vignettes carrees
   -------------------------------------------------------------------------- */

/* Gouttiere large : les photos se lisent une a une plutot qu'en bloc.
   Elle se resserre avec la largeur de l'ecran, ou chaque pixel compte
   davantage pour la photo elle-meme. */
.grille-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 16px 0 110px;
  padding: 0;
  list-style: none;
}

.photo {
  margin: 0;
}

/* Le bouton porte toute la vignette : c'est lui qui ouvre la visionneuse.
   Un bouton plutot qu'un lien, car l'action reste dans la page. */
.photo__declencheur {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--noir-doux);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.photo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.photo__declencheur:hover .photo__image,
.photo__declencheur:focus-visible .photo__image {
  transform: scale(1.045);
}

/* Voile sombre au survol, sur lequel se detache le numero. */
.photo__declencheur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.46);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.photo__declencheur:hover::after,
.photo__declencheur:focus-visible::after {
  opacity: 1;
}

/* La legende au survol, centree sur la vignette assombrie.

   Elle est posee sur toute la surface plutot que calee en bas : le titre
   reste ainsi au centre optique de la vignette quelle que soit sa
   longueur, comme sur le modele de reference. */
.photo__legende {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}

.photo__declencheur:hover .photo__legende,
.photo__declencheur:focus-visible .photo__legende {
  opacity: 1;
}

.photo__titre {
  margin: 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--blanc);
  transform: translateY(8px);
  transition: transform 550ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Le numero passe sous le titre, en petites capitales espacees : il
   situe la photo dans la serie sans concurrencer la legende. */
.photo__numero {
  margin: 13px 0 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.7);
  transform: translateY(8px);
  transition: transform 550ms cubic-bezier(0.2, 0.7, 0.3, 1) 60ms;
}

/* Titre et numero remontent ensemble, le second avec un leger retard. */
.photo__declencheur:hover .photo__titre,
.photo__declencheur:focus-visible .photo__titre,
.photo__declencheur:hover .photo__numero,
.photo__declencheur:focus-visible .photo__numero {
  transform: translateY(0);
}

.photo__declencheur:focus-visible {
  outline: 1px solid var(--blanc);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   La visionneuse

   Masquee par l'attribut hidden tant qu'aucune photo n'est ouverte ; le
   JavaScript ne fait que poser et retirer cet attribut, plus la classe
   est-ouverte qui declenche le fondu.
   -------------------------------------------------------------------------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 8, 0.97);
  opacity: 0;
  transition: opacity 350ms ease;
}

/* Indispensable : sans cette regle, le display:flex ci-dessus l'emporte
   sur l'attribut hidden et la visionneuse reste posee sur toute la page,
   invisible mais interceptant les clics destines aux vignettes. */
.visionneuse[hidden] {
  display: none;
}

.visionneuse.est-ouverte {
  opacity: 1;
}

.visionneuse__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 84px 96px 96px;
}

.visionneuse__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 250ms ease;
}

/* Pose pendant le changement de photo, pour eviter le saut brutal
   d'une image a l'autre. */
.visionneuse__image.est-en-transition {
  opacity: 0;
}

/* Legende et compteur, en bas de l'ecran. */
.visionneuse__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  padding: 0 96px;
  text-align: center;
}

.visionneuse__titre {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--gris-clair);
}

.visionneuse__compteur {
  margin: 9px 0 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gris-inactif);
}

/* Boutons de la visionneuse : fermeture et navigation. */
.visionneuse__bouton {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-clair);
  cursor: pointer;
  transition: color 300ms ease, opacity 300ms ease;
}

.visionneuse__bouton:hover,
.visionneuse__bouton:focus-visible {
  color: var(--blanc);
}

.visionneuse__bouton:focus-visible {
  outline: 1px solid var(--blanc);
  outline-offset: 4px;
}

.visionneuse__bouton svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.visionneuse__fermer {
  top: 30px;
  right: 40px;
  width: 30px;
  height: 30px;
}

.visionneuse__precedent,
.visionneuse__suivant {
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
}

.visionneuse__precedent {
  left: 34px;
}

.visionneuse__suivant {
  right: 34px;
}

/* En bout de serie, la fleche reste en place mais s'eteint : la position
   de l'image ne bouge pas d'une photo a l'autre. */
.visionneuse__bouton[disabled] {
  opacity: 0.22;
  cursor: default;
}

.visionneuse__bouton[disabled]:hover {
  color: var(--gris-clair);
}

/* Le corps ne defile plus derriere la visionneuse ouverte. */
body.visionneuse-ouverte {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pied de page — identique aux autres pages
   -------------------------------------------------------------------------- */

.pied {
  padding: 40px 0 46px;
  border-top: 1px solid var(--filet);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-inactif);
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .contenu {
    padding: 0 32px;
  }

  .grille-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

@media (max-width: 900px) {
  .entete-page {
    padding-top: calc(var(--hauteur-entete) + 40px);
  }

  .visionneuse__scene {
    padding: 70px 20px 104px;
  }

  /* Les fleches descendent en bas de l'ecran, ou le pouce les atteint,
     et liberent les bords de l'image. */
  .visionneuse__precedent,
  .visionneuse__suivant {
    top: auto;
    bottom: 26px;
    margin-top: 0;
  }

  .visionneuse__precedent {
    left: 26px;
  }

  .visionneuse__suivant {
    right: 26px;
  }

  .visionneuse__legende {
    bottom: 32px;
    padding: 0 76px;
  }

  .visionneuse__fermer {
    top: 22px;
    right: 24px;
  }
}

@media (max-width: 620px) {
  .contenu {
    padding: 0 20px;
  }

  .grille-photos {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .fiche {
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
  }

  /* Une seule colonne : la vignette est large, le titre peut respirer. */
  .photo__titre {
    font-size: 19px;
  }
}

/* Sans survol possible, la legende s'affiche en permanence : le voile est
   alors pose lui aussi, sinon le texte se perdrait sur la photo claire. */
@media (hover: none) {
  .photo__legende {
    opacity: 1;
  }

  .photo__titre,
  .photo__numero {
    transform: none;
  }

  .photo__declencheur::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo__image,
  .photo__legende,
  .photo__titre,
  .photo__numero,
  .photo__declencheur::after,
  .visionneuse,
  .visionneuse__image {
    transition-duration: 1ms;
  }
}