/* ============================================================
   zoom.css · la fenêtre de zoom, partagée par tout le site
   Extraite de projet.css : l'accueil s'en sert aussi, pour ses
   visuels posés dans la ligne, et il n'a rien à faire du reste.
   ============================================================ */

/* ============================================================
   Zoom des visuels · overlay réutilisable (PROJ-05)
   Toutes les captures des pages projet s'ouvrent en grand. Quand
   plusieurs visuels forment un même ensemble (un comparatif, une
   trajectoire, un filmstrip), l'overlay devient un carrousel.
   Le voile reste clair, comme le reste des pages.
   ============================================================ */

/* l'affordance : la loupe au survol, et un vrai curseur */
.zoomable{cursor:zoom-in}
/* on ne touche qu'au positionnement : forcer un display casserait les
   conteneurs qui sont déjà en flex (les tickets, les scènes) */
.zoomable-wrap{position:relative}
/* le bloc glissé autour d'une image quand son parent porte autre chose */
.zoomable-box{position:relative;display:block}
/* Quand ce bloc s'intercale dans un conteneur de hauteur fixe, l'image
   perd sa référence : son height:100% tombe sur un parent en hauteur
   automatique et elle repart à sa taille réelle. Le bloc doit donc
   épouser la hauteur qu'il vient de masquer. */
.cx-shot-wrap > .zoomable-box,
.em-cframe > .zoomable-box{height:100%}
.zoomable-wrap::after,.zoomable-box::after{
  content:"";position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c26' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 6px 18px rgba(28,28,38,.16);
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.zoomable-wrap:hover::after,.zoomable-wrap:focus-within::after,
.zoomable-box:hover::after,.zoomable-box:focus-within::after{opacity:1;transform:none}
/* Sans survol (tactile), la loupe ne s'afficherait jamais : on la laisse
   visible en permanence, c'est la seule indication que l'image s'ouvre. */
@media (hover:none){
  .zoomable-wrap::after,.zoomable-box::after{opacity:1;transform:none}
}

.zoom{
  /* trois bandes de hauteur fixe : la barre, le visuel, la légende. Sans
     ça, une légende de trois lignes remonte le visuel et fait sauter les
     flèches d'un écran à l'autre. */
  position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;
  background:color-mix(in srgb,var(--cream) 92%,transparent);
  /* Fermée, la fenêtre est retirée du rendu (display:none). Un calque
     plein écran avec un flou d'arrière-plan reste sinon composité en
     permanence sous le pointeur, et le curseur ne se met plus à jour
     ailleurs que sur les bords des éléments. */
  display:none;opacity:0;transition:opacity .28s ease;
}
.zoom.ready{display:grid}
.zoom.on{opacity:1}

.zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,28px);flex:0 0 auto}
.zoom-count{font-size:13px;letter-spacing:.06em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.zoom-close{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:14.5px;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid rgba(28,28,38,.12);border-radius:999px;padding:9px 17px;cursor:pointer;
  transition:background .2s,border-color .2s}
@media (hover:hover){
  .zoom-close:hover{background:#fff;border-color:rgba(28,28,38,.3)}
}
.zoom-close i{font-style:normal;font-size:16px;line-height:1}

/* De l'air en haut et en bas : l'ombre du visuel centré descend de cent
   pixels, et venait sinon buter dans la légende. */
.zoom-stage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);padding:10px clamp(12px,3vw,28px) 22px}
/* le visuel prend la place qui reste : sans ce cadre, son max-width se
   calcule sur toute la largeur et pousse les flèches hors de l'écran */
.zoom-frame{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.zoom-img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:12px;
  background:#fff;border:1px solid rgba(28,28,38,.10);
  box-shadow:0 30px 70px rgba(28,28,38,.18);
  transition:opacity .2s ease}
.zoom.swap .zoom-img{opacity:0}
/* la page entière : elle remplit la largeur et se parcourt de haut en bas,
   au lieu d'être réduite à une bande calée sur la hauteur de l'écran */
/* Les deux cadres qui défilent rognaient l'ombre portée : `overflow:auto`
   découpe à la lettre, et l'ombre du visuel disparaissait au ras du bord.
   On leur réserve donc une marge intérieure, et on y resserre l'ombre :
   celle du cadre centré descend de 100px, ce qui obligerait ici à laisser
   un vide énorme au bas d'une page qu'on parcourt déjà à la main. */
.zoom-frame.haute{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding:16px 34px 40px}
.zoom-frame.haute .zoom-img{flex:0 0 auto}
/* la planche large : on la parcourt de gauche à droite, à toutes les tailles */
.zoom-frame.wide{overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  justify-content:flex-start;padding:16px 34px 40px}
.zoom-frame.wide .zoom-img{flex:0 0 auto}
.zoom-frame.haute .zoom-img,.zoom-frame.wide .zoom-img{
  box-shadow:0 10px 28px rgba(28,28,38,.16)}
/* la hauteur du visuel se mesurait sur le cadre entier : avec la marge
   intérieure, il déborderait de ce qu'on lui a réservé en bas */
.zoom-frame.wide .zoom-img{max-height:100%}

.zoom-nav{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(28,28,38,.12);
  background:rgba(255,255,255,.8);color:var(--ink);cursor:pointer;padding:0;
  display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s}
/* la flèche est un tracé, pas un caractère : un glyphe ne tombe jamais
   pile au centre d'un rond */
.zoom-nav svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .zoom-nav:hover{background:#fff;border-color:rgba(28,28,38,.3);transform:scale(1.06)}
}
.zoom-nav[hidden]{display:none}

.zoom-cap{
  /* hauteur réservée : la légende commence toujours au même endroit,
     qu'elle fasse une ligne ou trois */
  height:clamp(76px,11vh,104px);overflow-y:auto;
  padding:16px clamp(16px,3vw,28px) 0;text-align:center;
  white-space:pre-line;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:76ch;margin:0 auto}

/* petit écran : une capture large tient dans 375px, mais on n'y lit plus
   rien. On la montre donc en grand et on laisse explorer à la main, ce
   qui est le but de ce zoom. */
.zoom-hint{display:none}
@media (max-width:820px){
  .zoom-stage{padding:0 20px}
  /* l'ombre est retirée plus bas : la réserve du desktop mangerait ici
     une place qu'on n'a pas */
  .zoom-frame.haute,.zoom-frame.wide{padding:0}
  /* les flèches passent devant les captures : en clair sur clair elles
     disparaissaient, on les fait sombres et pleines */
  .zoom-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
    background:rgba(28,28,38,.84);border-color:transparent;color:#fff;
    box-shadow:0 6px 20px rgba(28,28,38,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .zoom-nav svg{width:18px;height:18px;stroke-width:1.9}
  .zoom-nav.prev{left:10px}
  .zoom-nav.next{right:10px}
  /* pas de survol au doigt : l'état resterait accroché après l'appui */
  .zoom-nav:hover{background:rgba(28,28,38,.84);border-color:transparent;color:#fff;transform:translateY(-50%)}
  .zoom-cap{font-size:13px;height:clamp(70px,12vh,96px)}
  /* Pas d'ombre portée sur petit écran : sur une capture qu'on parcourt
     à la main, le conteneur qui défile la rogne de tous les côtés, et
     mieux vaut que tous les visuels se ressemblent. Un filet suffit.
     (Le sélecteur long, pour battre l'ombre resserrée des cadres qui
     défilent, posée plus haut avec deux classes de plus.) */
  .zoom-img,.zoom-frame.haute .zoom-img,.zoom-frame.wide .zoom-img{box-shadow:none;border-color:rgba(28,28,38,.16)}
  /* flex-start, sinon le centrage rend le bord gauche inatteignable */
  .zoom-frame.wide{justify-content:flex-start}
  .zoom.is-wide .zoom-hint{display:inline;color:var(--ink-faint);font-size:13px;margin-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .zoom,.zoom-img,.zoomable-wrap::after,.zoomable-box::after{transition:none}
}