/*
 * Feuille des pages d'événement — la planche-contact et la loupe.
 *
 * Ces pages sont fabriquées par outils/build-evenements.mjs depuis un seul
 * gabarit : elles portaient donc cinq fois le même CSS, à l'octet près. Il
 * vit ici, chargé après style.css et par elles seules — la liste des
 * événements et les autres pages n'en ont pas l'usage.
 *
 * Se modifie ici, pas dans le gabarit : celui-ci n'a plus de <style>.
 */

/* Un brun cuivré profond plutôt qu'un noir : le pied garde son rôle de
   point final, mais dans la famille chaude du site. C'est aussi le fond
   qui sert le mieux le blason — l'intérieur crème s'éclaire et l'anneau
   bleu s'y pose, là où le cuivre franc le faisait jurer. */
/* ─── Page d'événement ────────────────────────────────────────────────
   Une ligne de repères, l'affiche en grand, puis la planche des photos
   s'il y en a. Aucun composant nouveau : les repères reprennent
   l'étiquette, l'affiche reprend le cadre d'une carte. */
.ev-reperes {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: -4px 0 var(--saut-titre);
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.ev-reperes .ev-date {
  color: var(--accent-strong);
}
.ev-reperes .ev-cle {
  color: var(--accent-strong);
  margin-right: 4px;
}
.ev-texte p {
  margin: 0 0 14px;
  max-width: var(--mesure);
  color: var(--muted);
  line-height: var(--lh-prose);
}
.ev-texte p:last-child {
  margin-bottom: 0;
}
.ev-flyer {
  margin: 0;
  padding: 10px;
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  text-align: center;
}
/* L'ancre s'ajuste à l'image et non l'inverse : un flyer de 629 px était
   étiré à 1080, donc mou. On ne dépasse jamais sa taille naturelle. */
.ev-flyer a {
  display: inline-block;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
  transition:
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) ease;
}
.ev-flyer a:hover,
.ev-flyer a:focus-visible {
  transform: scale(1.01);
  box-shadow: 0 10px 22px rgba(18, 14, 11, 0.18);
}
.ev-flyer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ev-flyer img {
  max-width: 100%;
  height: auto;
}
.ev-flyer figcaption {
  margin-top: 10px;
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-strong);
}
/* ─── La planche-contact ───────────────────────────────────────────────
   Une pellicule posée à plat, vue par vue. Les rangées gardent une
   hauteur constante et chaque vue prend la largeur que lui donne son
   orientation — aucune photo n'est recadrée. Sans JavaScript, la feuille
   reste une grille de liens : le moteur de rangées améliore, il ne
   conditionne pas. */
.planche-repere {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 16px;
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-strong);
}
.planche-repere .compte {
  color: var(--muted);
  font-weight: 500;
}
.feuille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  padding: 10px;
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
/* Une fois les rangées composées, la feuille cesse d'être une grille :
   chaque rangée gère sa propre hauteur. */
.feuille.est-composee {
  display: block;
}
.rangee {
  display: flex;
  gap: 6px;
}
.rangee + .rangee {
  margin-top: 6px;
}
.vue {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(23, 21, 18, 0.05);
  cursor: zoom-in;
  transition:
    transform var(--dur-hover) var(--ease-out),
    filter var(--dur-hover) ease,
    box-shadow var(--dur-hover) ease;
}
/* Dans la grille de repli, les vues gardent un format régulier ; une fois
   composées en rangées, c'est la rangée qui impose la hauteur. */
.feuille:not(.est-composee) .vue {
  aspect-ratio: 3 / 2;
}
.feuille.est-composee .vue {
  flex-basis: 0;
  min-width: 0;
}
.vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le survol soulève la vue de la feuille, comme on décolle un tirage. */
.vue:hover,
.vue:focus-visible {
  z-index: 2;
  transform: scale(1.018);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(18, 14, 11, 0.18);
}
.vue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ─── La loupe ─────────────────────────────────────────────────────────
   Le geste que la planche appelle : on pose la loupe sur une vue.
   <dialog> apporte le piégeage du focus, la fermeture par Échap et
   l'inertie de l'arrière-plan sans qu'on ait à les réécrire. */
.loupe {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.loupe::backdrop {
  background: rgba(10, 9, 8, 0.97);
}
.loupe[open] {
  animation: loupeEntree 260ms var(--ease-out) both;
}
@keyframes loupeEntree {
  from { opacity: 0; }
  to { opacity: 1; }
}
.loupe-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 64px 68px 76px;
}
.loupe-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  animation: loupePose 320ms var(--ease-out) both;
}
@keyframes loupePose {
  from { opacity: 0; scale: 0.985; }
  to { opacity: 1; scale: 1; }
}
.loupe-bouton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background var(--dur-hover) ease,
    color var(--dur-hover) ease,
    transform var(--dur-hover) var(--ease-out);
}
.loupe-bouton:hover,
.loupe-bouton:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.loupe-bouton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.loupe-bouton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loupe-fermer {
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
}
.loupe-prec,
.loupe-suiv {
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
}
.loupe-prec { left: 12px; }
.loupe-suiv { right: 12px; }
.loupe-prec:hover { transform: translateX(-2px); }
.loupe-suiv:hover { transform: translateX(2px); }
.loupe-bouton[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.loupe-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0 24px;
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.loupe-pied .titre {
  color: rgba(255, 255, 255, 0.92);
}
.ev-retour {
  display: inline-block;
  margin-top: var(--saut-region);
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--filet, rgba(184, 122, 62, 0.4));
}
.ev-retour:hover,
.ev-retour:focus-visible {
  color: var(--ink);
}
@media (max-width: 840px) {
  .feuille {
    padding: 7px;
  }

  .loupe-scene {
    padding: 58px 14px 68px;
  }

  .loupe-prec,
  .loupe-suiv {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }

  .loupe-prec { left: 8px; }
  .loupe-suiv { right: 8px; }
}
/* À l'impression la page est composée sans défilement : une entrée liée
   au défilement resterait figée sur son premier état, donc invisible. */
@media print {
  .loupe {
    display: none !important;
  }
}