/* ==========================================================
   photo.css : pejy Photo (grille + hero slideshow + lightbox)
   ========================================================== */

/* ---------- Hero : slideshow aléatoire en fondu + zoom lent ---------- */
.ph1{position:relative;isolation:isolate}
.ph1.has-bg{padding:clamp(2rem,6vw,4.5rem) clamp(1.2rem,4vw,3.2rem);margin-bottom:1.5rem;border-radius:4px;overflow:hidden}
.hero-bg{position:absolute;inset:-12% 0;z-index:-1;overflow:hidden;background:#0e0f10;will-change:transform}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%);animation:shim 1.8s ease-in-out infinite}
.hero-bg.rdy::before{display:none}
.hero-bg .hs{position:absolute;inset:-4%;background-size:cover;background-position:center 35%;opacity:0;transform:scale(1.02);transition:opacity 2s ease;will-change:opacity,transform}
.hero-bg .hs.on{opacity:1}
.hero-bg .hs.z{animation:heroZoom 14s ease-out forwards}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(14,15,16,.85) 0%,rgba(14,15,16,.65) 30%,rgba(14,15,16,.28) 52%,rgba(14,15,16,0) 72%),
  linear-gradient(0deg,rgba(14,15,16,.4),transparent 30%)}

/* indicateur "scroll" animé (bas-droite du hero) */
.hero-scroll{position:absolute;right:clamp(1.2rem,3vw,2.4rem);bottom:clamp(1rem,2.5vw,1.8rem);z-index:2;display:grid;justify-items:center;gap:.5rem;padding:0;background:none;border:0;color:#fff;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .5s,transform .5s}
.hero-scroll .ms{position:relative;width:26px;height:42px;border:2px solid #fff;border-radius:14px;box-shadow:0 0 14px rgba(0,0,0,.35);transition:border-color .3s}
.hero-scroll .ms::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--o,#ff5a00);animation:heroWheel 1.8s cubic-bezier(.65,0,.35,1) infinite}
.hero-scroll .ch{display:block;width:9px;height:9px;margin-top:-.2rem;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);opacity:0;animation:heroChev 1.8s ease-in-out infinite}
.hero-scroll .sl{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.hero-scroll:hover .ms{border-color:var(--o,#ff5a00)}
.hero-scroll.gone{opacity:0;pointer-events:none;transform:translateY(8px)}
@keyframes heroWheel{0%{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:1;transform:translateY(14px)}100%{opacity:0;transform:translateY(18px)}}
@keyframes heroChev{0%{opacity:0;transform:translateY(-4px) rotate(45deg)}50%{opacity:.9}100%{opacity:0;transform:translateY(6px) rotate(45deg)}}
#bar{scroll-margin-top:110px}
@media(prefers-reduced-motion:reduce){.hero-scroll .ms::before,.hero-scroll .ch{animation:none;opacity:1}}
@media(max-width:700px){.hero-scroll{display:none}}
@keyframes heroZoom{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(var(--tx,0),var(--ty,0),0)}}
.ph1.has-bg h1{color:#fff}
.ph1.has-bg h1 span{-webkit-text-stroke-color:#fff}
.ph1.has-bg p{color:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.hero-bg .hs.z{animation:none}}

/* ---------- Grille ---------- */
.grid{columns:3 280px;column-gap:16px}
.it{display:block;width:100%;position:relative;margin-bottom:16px;break-inside:avoid;background:var(--g);color:#fff;text-align:left;overflow:hidden;border-radius:2px;
  background-size:cover;background-position:center;
  outline:6px solid #0e0f10;outline-offset:-6px;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s}
.it:hover,.it:focus-visible{transform:scale(1.025);z-index:2}
.it .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18);will-change:transform,opacity;user-select:none;-webkit-user-drag:none}
.it::before{content:"";position:absolute;inset:0;margin:10px;border:1px solid rgba(255,255,255,.3);pointer-events:none;z-index:1}
.it .m{position:absolute;left:14px;bottom:12px;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* petite pastille de catégorie (left/bottom remis à auto : c'était eux qui créaient le grand voile noir) */
.it .ct{left:auto;bottom:auto;right:16px;top:16px;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s;background:rgba(14,15,16,.7);padding:.15rem .6rem;border-radius:99px}
.it:hover .ct,.it:focus-visible .ct{opacity:1;transform:none}
.it.out{opacity:0;transform:scale(.92)}
.it[hidden]{display:none}
.cta-end{text-align:center;margin-top:4rem}

/* ---------- Lightbox ---------- */
#lb .lbw{position:relative;width:min(1180px,100%);display:grid;gap:1.1rem;justify-items:center}
#lb .stage{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem)}
.fr{position:relative;flex:0 1 auto;min-width:0;max-width:100%;width:calc(72vh*var(--arn,1.5));aspect-ratio:var(--ar,3/2);margin:0;--c:#fff;--s:34px;padding:14px;background-color:#0e0f10;
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.fr .pic{width:100%;height:100%;background:var(--g);background-size:cover;background-position:center}
.cap{width:min(100%,max(calc(72vh*var(--arn,1.5)),560px));display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem;flex-wrap:nowrap;color:#E9ECEF;
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.cap>div:first-child{min-width:0;flex:1 1 auto}
.cap h3{font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:1.15;margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cap .m{color:var(--o)}
.cap .ex{flex:none;display:grid;gap:.15rem;text-align:right;font-size:.74rem;color:rgba(233,236,239,.75)}

/* transition entre deux photos (fondu + léger zoom) */
#lb .lbw.sw .fr{opacity:0;transform:scale(.98);transition-duration:.25s}
#lb .lbw.sw .cap{opacity:0;transform:translateY(6px);transition-duration:.25s}

/* boutons Précédent / Suivant : de chaque côté de l'image */
#lb .lba{flex:none;display:grid;place-items:center;width:52px;height:52px;padding:0 0 .15rem;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:1.9rem;line-height:1;border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,border-color .3s,transform .3s}
#lb .lba:hover{background:var(--o);border-color:var(--o);transform:scale(1.08)}
#lb .lba:active{transform:scale(.96)}

/* bouton fermer : coin de l'écran */
#lb .x{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:10}

@media(max-width:700px){
  #lb .stage{position:relative;display:block}
  .fr{margin:0 auto;padding:8px;width:min(100%,calc(62vh*var(--arn,1.5)))}
  .cap{width:100%;gap:.8rem}
  .cap .ex{font-size:.66rem}
  #lb .lba{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;font-size:1.5rem;background:rgba(14,15,16,.6)}
  #lb .lba:hover,#lb .lba:active{transform:translateY(-50%)}
  #lb .pv{left:6px}#lb .nx{right:6px}
}

/* ---------- Scroll malama (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---------- Chargement : skeleton + barre de progression ---------- */
.sk{position:relative;display:block;width:100%;margin-bottom:16px;break-inside:avoid;overflow:hidden;border-radius:2px;background:#15171a;outline:6px solid #0e0f10;outline-offset:-6px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);animation:shim 1.7s ease-in-out infinite}
.sk::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid rgba(255,255,255,.14);border-top-color:var(--o,#ff5a00);border-radius:50%;animation:spin 1s linear infinite;z-index:1}
.sk:nth-child(3n+2)::after{animation-delay:.25s}
.sk:nth-child(3n)::after{animation-delay:.5s}
.ldr{display:grid;gap:.7rem;justify-items:center;padding:1.4rem 0 1.8rem}
.ldr[hidden]{display:none}
.ldr .m{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.ldb{width:min(320px,70vw);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.ldb i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--o,#ff5a00),#8b5cf6);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ldr.ind .ldb i{width:35%;transform:none;animation:ind 1.3s cubic-bezier(.65,0,.35,1) infinite}
@keyframes shim{to{transform:translateX(100%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ind{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
@media(prefers-reduced-motion:reduce){.sk::after,.sk::before,.hero-bg::before,.ldr.ind .ldb i{animation:none}}

/* évite le saut de mise en page quand le scroll est bloqué (lightbox ouverte) */
html{scrollbar-gutter:stable}

/* ---------- Bouton "haut de page" : anneau de progression + flèche en boucle ---------- */
.totop{position:fixed;right:clamp(1.1rem,3vw,3rem);bottom:clamp(1.4rem,6vh,3.6rem);z-index:60;width:64px;height:64px;padding:0;border:0;background:none;color:#fff;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(24px) scale(.6);
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s}
.totop.show{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s}
.totop::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--o,#ff5a00);opacity:0;pointer-events:none}
.totop.show::after{animation:ttPing 1.3s ease-out .35s 1}
.tt-in{position:absolute;inset:0;display:block;border-radius:50%;background:rgba(14,15,16,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.tt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.tt-ring circle{fill:none;stroke-width:3}
.tt-ring .tk{stroke:rgba(255,255,255,.14)}
.tt-ring .pg{stroke:url(#ttg);stroke-linecap:round;transition:stroke-dashoffset .15s linear,stroke-width .3s}
.totop:hover .tt-ring .pg{stroke-width:4.5}
.totop .ar{position:absolute;inset:9px;border-radius:50%;overflow:hidden;transition:background .35s,transform .3s}
.totop:hover .ar{background:var(--o,#ff5a00)}
.totop:active .ar{transform:scale(.9)}
.totop .ar svg{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.totop .ar svg+svg{transform:translateY(170%)}
.totop:hover .ar svg:first-child{transform:translateY(-170%)}
.totop:hover .ar svg+svg{transform:none}
.totop .tl{position:absolute;right:calc(100% + .9rem);top:50%;transform:translate(10px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  padding:.4rem .85rem;border-radius:99px;background:var(--o,#ff5a00);color:#fff;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.totop:hover .tl,.totop:focus-visible .tl{opacity:1;transform:translate(0,-50%)}
.totop:focus-visible .tt-in{outline:2px solid #fff;outline-offset:3px}
@keyframes ttPing{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}
@media(max-width:700px){.totop{width:52px;height:52px;right:1rem;bottom:1.2rem}.totop .tl{display:none}.totop .ar{inset:7px}}
@media(prefers-reduced-motion:reduce){.totop,.totop.show{transition:none}.totop.show::after{animation:none}}