/* ============================================================================
   LA LOUPE — visionneuse plein écran
   ----------------------------------------------------------------------------
   Sortie de case.css pour être chargeable ailleurs : la page CV en a besoin
   autant que les études de cas. Comportement dans js/loupe.js.
   ==========================================================================*/

/* l'affordance : la vignette dit qu'elle s'ouvre, au repos comme au survol */
figure.agrandissable{position:relative}
figure.agrandissable img{cursor:zoom-in;transition:opacity .25s}
figure.agrandissable::after{
  content:"AGRANDIR";
  position:absolute;left:10px;top:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:-.04em;
  color:var(--fond);background:var(--rose);
  padding:5px 9px;border-radius:2px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .22s,transform .22s;pointer-events:none;
}
figure.agrandissable:hover::after,
figure.agrandissable:focus-within::after{opacity:1;transform:none}
figure.agrandissable:hover img{opacity:.82}
figure.agrandissable img:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

html.loupe-ouverte{overflow:hidden}

.loupe{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;transition:opacity .2s ease-out;
}
.loupe.visible{opacity:1}
.loupe[hidden]{display:none}
/* Pas de backdrop-filter : il casse la composition du fond dans Chromium et le
   flou décoratif n'apporte rien. */
.loupe-fond{
  position:absolute;inset:0;
  background:rgba(20,4,12,.975);
  cursor:zoom-out;
}

.loupe-barre{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px var(--marge);
}
.loupe-barre .actions{display:flex;align-items:center;gap:10px}
.loupe-compte{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.06em;
  color:var(--rose);
}

.loupe-bouton{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  color:var(--encre);background:none;border:1px solid var(--trait-fort);
  border-radius:3px;padding:10px 15px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.loupe-bouton:hover{background:var(--rose);border-color:var(--rose);color:var(--fond)}
.loupe-bouton .ico{width:15px;height:15px}
.loupe-bouton[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);
  color:var(--fond)}

.loupe-nav{
  position:absolute;top:50%;z-index:3;margin-top:-24px;
  width:48px;height:48px;padding:0;justify-content:center;
  background:rgba(46,11,26,.72);
}
.loupe-prec{left:clamp(8px,2vw,24px)}
.loupe-suiv{right:clamp(8px,2vw,24px)}
.loupe-prec .ico{transform:rotate(180deg)}

.loupe-scene{
  position:relative;z-index:2;margin:0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:0 clamp(64px,9vw,110px);
}
.loupe-scene img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:4px;border:1px solid var(--trait);background:none;
  opacity:0;transform:scale(.985);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.loupe-scene img.arrivee{opacity:1;transform:none}

/* Taille réelle : indispensable pour un document dense comme un CV, qu'on ne lit
   pas s'il est réduit à la hauteur de l'écran. La scène devient défilable. */
.loupe.pleine .loupe-scene{
  display:block;overflow:auto;padding:0 clamp(12px,3vw,48px);
  -webkit-overflow-scrolling:touch;
}
.loupe.pleine .loupe-scene img{
  max-width:none;max-height:none;width:auto;margin:0 auto;cursor:grab;
}
.loupe.pleine .loupe-legende{display:none}

.loupe-legende{
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.06em;
  color:var(--encre-2);text-align:center;max-width:64ch;line-height:1.55;margin:0;
}

.loupe-vignettes{
  position:relative;z-index:2;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:16px var(--marge) clamp(18px,3vw,26px);
}
.loupe-vignette{
  width:64px;height:64px;padding:0;border:1px solid var(--trait);
  border-radius:3px;overflow:hidden;background:var(--champ);cursor:pointer;
  opacity:.5;transition:opacity .2s,border-color .2s;
}
.loupe-vignette img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.loupe-vignette:hover{opacity:.85}
.loupe-vignette[aria-selected="true"]{opacity:1;border-color:var(--rose)}

@media(prefers-reduced-motion:reduce){
  .loupe,.loupe-scene img,figure.agrandissable::after,figure.agrandissable img{
    transition:none}
  .loupe-scene img{opacity:1;transform:none}
}
@media(max-width:640px){
  .loupe-scene{padding:0 12px}
  .loupe-nav{width:42px;height:42px;margin-top:-21px}
  .loupe-vignette{width:48px;height:48px}
  figure.agrandissable::after{content:"VOIR";font-size:10px}
  .loupe-bouton{padding:9px 12px;font-size:11px}
}