/* =====================================================
   BIEN DANS MES PATTES · Page des photos
   =====================================================
   Une page de commémoration. Elle ne cherche pas à faire
   de l'effet : ce sont les photos qui en font, et tout
   ici est au service de leur lisibilité.

   Trois décisions tiennent la page :

   1. LE PODIUM EST UN VRAI PODIUM. L'ordre du document
      est 1 · 2 · 3, pour qui lit à la voix ou sans CSS ;
      l'ordre visuel est 2 · 1 · 3, avec le premier au
      centre et plus haut. C'est `order` qui les réconcilie,
      et des socles de hauteurs différentes qui font
      comprendre le classement sans le lire.

   2. LES TUILES RÉSERVENT LEUR PLACE. `aspect-ratio` sur
      la tuile plus `width`/`height` sur l'image fixent la
      hauteur avant que l'image n'arrive. Sans cela,
      `loading="lazy"` fait sauter la page à chaque image
      qui se pose, et sur trois cents photos on n'arrive
      jamais à lire quoi que ce soit.

   3. LE TÉLÉCHARGEMENT SE VOIT. C'est la raison d'être de
      la page pour beaucoup de gens : retrouver SA photo et
      l'emporter. Le bouton est posé sur la tuile, visible
      au survol sur un ordinateur, et TOUJOURS visible au
      doigt, où il n'y a pas de survol.
   ===================================================== */

/* ---------- En-tête ---------- */

/* Le bas de l'en-tête est court EXPRÈS. La section qui suit apporte déjà
   son propre espace de section (jusqu'à 120 px) : additionner les deux
   creusait 250 px de vide entre le dernier chiffre de l'en-tête et le
   titre « Les podiums ». Un blanc se remarque quand il ne sépare rien. */
.ph-hero {
  padding: clamp(96px, 12vw, 150px) 0 clamp(22px, 2.6vw, 34px);
  background:
    radial-gradient(1100px 420px at 50% -10%, var(--bdmp-cream-alt), transparent 70%),
    var(--bdmp-cream);
  text-align: center;
}

/* Et la première section n'a pas à repayer l'espace que l'en-tête vient
   de poser. Les sections suivantes gardent le leur : c'est entre elles
   qu'il sert. */
.ph-hero + .section,
.ph-editions + .section {
  padding-top: clamp(42px, 4.4vw, 62px);
}

.ph-hero__inner { display: grid; justify-items: center; gap: 14px; }

.ph-hero h1 {
  margin: 0;
  font-family: var(--bdmp-font-display);
  font-size: var(--bdmp-h2);
  font-weight: 800;
  letter-spacing: var(--bdmp-tracking-display);
  color: var(--bdmp-ink);
  line-height: 1.08;
}
/* L'année en plus gros et en orange quand le nom ne la porte pas déjà :
   c'est le repère qu'on cherche en arrivant sur un album. */
.ph-hero__annee { color: var(--bdmp-orange); }

.ph-hero__sous {
  max-width: 58ch;
  margin: 0;
  color: var(--bdmp-ink-soft);
  font-size: 1.02rem;
  line-height: var(--bdmp-leading);
}

.ph-hero__faits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- Le choix de l'édition ---------- */

/* Une barre, pas un menu déroulant : deux ou trois éditions se lisent
   d'un coup d'oeil, et une liste déroulante cacherait qu'il y a une
   histoire. Elle colle en haut quand on descend dans l'album, pour
   qu'on puisse changer d'année sans remonter trois cents photos. */
.ph-editions {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 0;
  background: color-mix(in srgb, var(--bdmp-cream) 92%, transparent);
  border-bottom: 1px solid var(--bdmp-border);
  backdrop-filter: blur(8px);
}

.ph-editions__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ph-editions__titre {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: var(--bdmp-tracking-label);
  text-transform: uppercase;
  color: var(--bdmp-ink-muted);
}

.ph-editions__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ph-editions__lien {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 15px;
  border: 1px solid var(--bdmp-border);
  border-radius: var(--bdmp-r-pill);
  background: var(--bdmp-white);
  color: var(--bdmp-ink-soft);
  text-decoration: none;
  line-height: 1.2;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ph-editions__lien strong { font-size: .95rem; font-weight: 700; }
.ph-editions__lien small  { font-size: .72rem; color: var(--bdmp-ink-muted); }

.ph-editions__lien:hover {
  border-color: var(--bdmp-orange);
  color: var(--bdmp-orange-dark);
}
.ph-editions__lien.is-active {
  background: var(--bdmp-orange);
  border-color: var(--bdmp-orange);
  color: #fff;
  box-shadow: var(--bdmp-shadow-btn-sm);
}
.ph-editions__lien.is-active small { color: rgba(255, 255, 255, .82); }

/* ---------- Les podiums ---------- */

/* LES CARTES ONT UNE LARGEUR MAXIMALE, ET SE CENTRENT.
   Avec `1fr`, deux podiums seuls s'étiraient chacun sur la moitié de la
   page : deux cartes de six cents pixels pour une boîte qui en demande
   trois cent cinquante, et tout le reste en blanc. Une largeur plafond
   plus un centrage donne la même rangée pleine quand il y a huit
   catégories, et deux cartes de taille normale quand il n'y en a que
   deux. */
.ph-podiums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 360px));
  justify-content: center;
  gap: 22px;
}

.ph-podium { padding: 24px 20px 20px; }

.ph-podium__titre {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--bdmp-font-display);
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: var(--bdmp-tracking-display);
  color: var(--bdmp-ink);
}

/* La boîte : les places alignées sur leur BASE, pas sur leur sommet.
   C'est ce qui fait qu'on voit un podium et pas trois cartes côte à côte.
   `min-height` donne à toutes les catégories la même hauteur, pour que
   les cartes s'alignent quel que soit le nombre de vainqueurs. */
.ph-podium__boite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 190px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Le sol. Sans lui, les marches flottent dans le blanc de la carte et
     l'illusion du podium se défait. */
  border-bottom: 2px solid var(--bdmp-border-input);
}

.ph-podium__place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  /* `1 1 0` répartit la largeur également, et `max-width` évite qu'une
     catégorie à deux vainqueurs n'étire deux colonnes démesurées. */
  flex: 1 1 0;
  max-width: 112px;
  min-width: 0;
  text-align: center;
}
/* L'ordre visuel du podium, sans toucher à l'ordre du document. */
.ph-podium__place--1 { order: 2; }
.ph-podium__place--2 { order: 1; }
.ph-podium__place--3 { order: 3; }

.ph-podium__nom {
  font-size: .86rem;
  font-weight: 700;
  color: var(--bdmp-ink);
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.ph-podium__place--1 .ph-podium__nom { font-size: .95rem; }

.ph-podium__chien {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .74rem;
  color: var(--bdmp-orange-dark);
}
/* LE DOSSARD, DESSINÉ COMME UN DOSSARD.
   C'est le numéro épinglé sur le maillot ce jour-là : une pastille
   claire, cerclée, en chiffres à chasse fixe. Écrit en texte simple, il
   se lisait comme une durée ou un classement ; encadré, il se reconnaît
   au premier coup d'oeil, même sans le mot « dossard ». */
.ph-podium__dossard {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--bdmp-badge-border);
  border-radius: var(--bdmp-r-pill);
  background: var(--bdmp-badge-bg);
  color: var(--bdmp-orange-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Le « o » de « No » est une abréviation, pas une puissance : il se pose
   sur la ligne des chiffres, en plus petit, sans les décaler. */
.ph-podium__dossard sup {
  font-size: .78em;
  vertical-align: .35em;
  line-height: 0;
}

/* LA MARCHE DU PODIUM.
   C'est elle qui porte le classement : trois hauteurs franches, trois
   teintes de médaille, et le chiffre posé dessus. Les socles pâles et
   presque égaux de la première version se lisaient comme un défaut
   d'alignement plutôt que comme un podium. */
.ph-podium__socle {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
}
/* Le chiffre est DANS la marche : on a mis la médaille au sommet du
   socle plutôt qu'au-dessus du nom, là où l'oeil la cherche sur un vrai
   podium. */
.ph-podium__socle::after {
  content: attr(data-rang);
  position: absolute;
  inset: 8px 0 auto 0;
  font-family: var(--bdmp-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 2px rgba(80, 50, 10, .3);
}

.ph-podium__place--1 .ph-podium__socle {
  height: 84px;
  background: linear-gradient(180deg, #F3C45A, #DCA02C);
  border-color: #D79A28;
}
.ph-podium__place--2 .ph-podium__socle {
  height: 60px;
  background: linear-gradient(180deg, #D3D8DE, #AAB2BB);
  border-color: #A3ABB4;
}
.ph-podium__place--3 .ph-podium__socle {
  height: 42px;
  background: linear-gradient(180deg, #DDA678, #BD7C46);
  border-color: #B67743;
}

/* La médaille au-dessus du nom ne sert plus à rien : le chiffre est sur
   la marche. On la garde hors écran pour les lecteurs d'écran, qui
   annoncent ainsi le rang avant le nom. */
.ph-podium__medaille {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- La grille de photos ---------- */

.ph-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 14px;
}

.ph-tuile {
  position: relative;
  margin: 0;
  border-radius: var(--bdmp-r-card-sm);
  overflow: hidden;
  background: var(--bdmp-cream-alt);
  box-shadow: var(--bdmp-shadow-card-soft);
}

/* La place est réservée AVANT que l'image n'arrive : sans cela, trois
   cents images qui se posent l'une après l'autre font sauter la page en
   permanence et on ne peut rien lire. */
.ph-tuile__lien {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ph-tuile__lien img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ph-tuile:hover .ph-tuile__lien img { transform: scale(1.05); }

.ph-tuile__dl {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bdmp-r-pill);
  background: rgba(28, 18, 10, .62);
  color: #fff;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.ph-tuile:hover .ph-tuile__dl,
.ph-tuile__dl:focus-visible { opacity: 1; transform: none; }
.ph-tuile__dl:hover { background: var(--bdmp-orange); }

/* Au doigt, il n'y a pas de survol : le bouton reste visible. Le cacher
   rendrait la fonction principale de la page introuvable sur le seul
   appareil depuis lequel on regarde vraiment des photos. */
@media (hover: none) {
  .ph-tuile__dl { opacity: 1; transform: none; }
}

.ph-tuile__legende {
  padding: 9px 12px 11px;
  font-size: .82rem;
  color: var(--bdmp-ink-soft);
  background: var(--bdmp-white);
}

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

.ph-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: rgba(20, 13, 8, .93);
}
.ph-viewer.is-open { display: flex; }

.ph-viewer__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
}
.ph-viewer__figure img {
  max-width: 100%;
  /* La place du pied sous l'image est retirée de la hauteur disponible,
     sinon le bouton de téléchargement sort de l'écran sur un portable
     tenu à l'horizontale. */
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: var(--bdmp-r-card-sm);
}
.ph-viewer__figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  color: rgba(255, 255, 255, .88);
  font-size: .9rem;
  text-align: center;
}
.ph-viewer__compte {
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.ph-viewer__x,
.ph-viewer__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--bdmp-r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.ph-viewer__x:hover,
.ph-viewer__nav:hover { background: rgba(255, 255, 255, .24); }

.ph-viewer__x {
  position: absolute;
  top: 18px;
  right: 18px;
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 720px) {
  .ph-editions { position: static; }
  .ph-editions__inner { gap: 10px; }
  .ph-grille { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .ph-podium__boite { gap: 5px; }
  .ph-podium__nom { font-size: .82rem; }

  /* Les flèches sortent du flux et se posent sur l'image : à cette
     largeur, trois colonnes laisseraient à la photo la moitié de
     l'écran. Le balayage reste le geste principal. */
  .ph-viewer { padding: 12px; }
  .ph-viewer__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }
  .ph-viewer__nav--prev { left: 8px; }
  .ph-viewer__nav--next { right: 8px; }
  .ph-viewer__figure img { max-height: calc(100vh - 190px); }
}

/* Quelqu'un qui a demandé moins d'animation n'a pas demandé moins de
   photos : on retire le mouvement, pas la fonction. */
@media (prefers-reduced-motion: reduce) {
  .ph-tuile__lien img,
  .ph-tuile__dl { transition: none; }
  .ph-tuile:hover .ph-tuile__lien img { transform: none; }
}