/* ═══════════════════════════════════════
   Galerie — page /galerie.html
   ═══════════════════════════════════════ */
.gal{position:relative;z-index:3;padding:110px clamp(16px,3vw,32px) 70px;max-width:1600px;margin-inline:auto}
.gal__head{text-align:center;margin-bottom:clamp(26px,4vw,42px)}
.gal__head .lead{margin-inline:auto}

.gal__filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.gal__filters button{
  font:inherit;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 16px;
  color:var(--steel);background:rgba(255,255,255,.03);
  border:1px solid rgba(168,179,189,.18);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:.2s var(--ease);
}
.gal__filters button:hover{color:var(--txt);border-color:var(--c,var(--cyan))}
.gal__filters button[aria-pressed="true"]{
  color:#04121c;background:var(--c,var(--cyan));border-color:var(--c,var(--cyan));font-weight:700;
}

/* Grille : les clichés mis en avant occupent deux colonnes. */
.gal__grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  grid-auto-flow:dense;
}
.gal__state{
  grid-column:1/-1;text-align:center;padding:60px 20px;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:2;
  color:var(--steel);border:1px dashed rgba(84,173,247,.25);
}

.shot{
  position:relative;display:block;padding:0;border:0;cursor:pointer;
  background:#08151f;overflow:hidden;aspect-ratio:3/2;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:transform .4s var(--ease);
}
@media (min-width:760px){.shot--wide{grid-column:span 2}}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.shot:hover img,.shot:focus-visible img{transform:scale(1.06)}
.shot:hover,.shot:focus-visible{transform:translateY(-4px);outline:none}
.shot:focus-visible{box-shadow:0 0 0 2px var(--c)}

.shot__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,8,13,.92) 0%,rgba(3,8,13,.25) 42%,transparent 70%);
}
.shot__info{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:left;
  display:grid;gap:2px;pointer-events:none;
}
.shot__info b{font-weight:600;font-size:.95rem;color:var(--txt);overflow-wrap:anywhere}
.shot__info small{font-size:.78rem;color:var(--steel)}
.shot__tag{
  position:absolute;top:12px;right:12px;padding:3px 10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  font-weight:700;color:#04121c;background:var(--c);pointer-events:none;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}

/* ═══ Visionneuse ═══ */
.lb{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:rgba(2,5,9,.94);backdrop-filter:blur(10px);animation:lbIn .25s;
}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}}
.lb__fig{margin:0;max-width:min(1400px,100%);display:grid;gap:14px;justify-items:center}
.lb__fig img{
  max-width:100%;max-height:74svh;object-fit:contain;display:block;
  border:1px solid color-mix(in srgb,var(--c,#54adf7) 40%,transparent);
}
.lb__cap{text-align:center;max-width:70ch}
.lb__cap h2{font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:1.2rem;margin:0 0 6px}
.lb__cap p{color:var(--steel);font-size:.93rem;line-height:1.7;margin:0}
.lb__cap p[hidden]{display:none}
.lb__meta{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c,var(--cyan));opacity:.85;margin-top:8px!important;
}
.lb__close,.lb__nav{
  position:absolute;cursor:pointer;color:var(--steel);
  background:rgba(255,255,255,.07);border:0;transition:.2s var(--ease);
}
.lb__close{top:18px;right:18px;width:42px;height:42px;font-size:16px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.lb__nav{top:50%;transform:translateY(-50%);width:48px;height:76px;font-size:30px;line-height:1}
.lb__nav--prev{left:12px}
.lb__nav--next{right:12px}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.18);color:var(--txt)}
@media (max-width:700px){
  .lb__nav{width:40px;height:60px;font-size:24px}
  .lb__fig img{max-height:60svh}
}

/* ═══ À la une ═══ */
.gal-hero{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  aspect-ratio:21/9;max-height:62vh;margin-bottom:clamp(20px,3vw,34px);background:#08151f;text-align:left;color:inherit;font:inherit;
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.gal-hero[hidden]{display:none}
@media (max-width:700px){.gal-hero{aspect-ratio:4/3}}
/* Le zoom se fait sur le calque qui contient les images : l'animation
   d'entrée d'une image ne bloque plus la transition du survol. */
.gal-hero__stage{position:absolute;inset:0;transition:transform .9s var(--ease)}
.gal-hero:hover .gal-hero__stage,.gal-hero:focus-visible .gal-hero__stage{transform:scale(1.05)}
.gal-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease)}
.gal-hero__img.is-on{opacity:1;animation:gal-hero-drift 7s ease-out}
@keyframes gal-hero-drift{from{transform:scale(1.07)}to{transform:scale(1)}}
.gal-hero__info.is-in{animation:gal-hero-text .8s var(--ease)}
@keyframes gal-hero-text{from{opacity:0;transform:translateY(10px)}}
/* Petite barre qui se remplit jusqu'au prochain cliché. */
.gal-hero__timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.gal-hero__timer i{display:block;height:100%;width:0;background:var(--c)}
.gal-hero.is-ticking .gal-hero__timer i{animation:gal-hero-timer 5s linear forwards}
.gal-hero:hover .gal-hero__timer i{animation-play-state:paused}
@keyframes gal-hero-timer{to{width:100%}}
.gal-hero__veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.25) 45%,transparent 70%),
             linear-gradient(to right,color-mix(in srgb,var(--c) 22%,transparent),transparent 40%)}
.gal-hero__info{position:absolute;left:clamp(18px,4vw,44px);right:clamp(18px,4vw,44px);bottom:clamp(18px,4vw,40px);
  display:grid;gap:6px;max-width:760px}
.gal-hero__kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--c)}
.gal-hero__title{font-family:'Bai Jamjuree',sans-serif;font-weight:700;font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.01em}
.gal-hero__cap{color:#d8dde8;font-size:clamp(.9rem,1.6vw,1.05rem);opacity:.9}
.gal-hero__cap:empty{display:none}
.gal-hero__meta{color:var(--steel);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em}
.gal-hero__zoom{position:absolute;top:18px;right:22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  padding:6px 10px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);opacity:0;transition:opacity .3s}
.gal-hero:hover .gal-hero__zoom,.gal-hero:focus-visible .gal-hero__zoom{opacity:1}
@media (prefers-reduced-motion:reduce){.gal-hero__img.is-on,.gal-hero__info.is-in{animation:none}.gal-hero__stage{transition:none}}