/* ============================================================
   Fromagerie du Pont de Pierre, widgets & mouvement
   ============================================================ */

/* Quand GSAP pilote, on coupe les transitions CSS pour éviter le double mouvement */
html.motion-on .reveal{transition:none}

/* ---------- Barre de progression de lecture ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--green));z-index:100;pointer-events:none}

/* ---------- En-tête compact au scroll ---------- */
header.site{transition:background .25s,box-shadow .25s}
header.site .nav{transition:height .25s}
header.site.shrunk{background:rgba(255,255,255,.95);box-shadow:0 6px 26px rgba(40,40,30,.07)}
header.site.shrunk .nav{height:62px}
header.site.shrunk .brand img{height:40px;transition:height .25s}
header.site .brand img{transition:height .25s}

/* ---------- Bandeau défilant ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .item{display:inline-flex;align-items:center;gap:20px;padding:0 24px;white-space:nowrap;
  font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(1.05rem,1.9vw,1.5rem);
  font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.marquee-track .item .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.marquee-track .item.muted{color:var(--muted)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Lightbox ---------- */
.gallery figure{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(18,15,8,.93);backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(92vw,1180px);max-height:84vh;border-radius:10px;box-shadow:0 40px 90px rgba(0,0,0,.55);
  transform:scale(.97);transition:transform .28s}
.lb.open img{transform:scale(1)}
.lb .cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(255,255,255,.92);
  font-size:.92rem;font-weight:500;padding:0 22px;font-variant-numeric:tabular-nums}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background .2s,transform .2s;font-family:inherit}
.lb button:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.lb .close{top:22px;right:22px;font-size:1.7rem}
.lb .prev{left:24px;top:50%;margin-top:-23px}
.lb .next{right:24px;top:50%;margin-top:-23px}
@media(max-width:640px){.lb .prev{left:10px}.lb .next{right:10px}.lb .close{top:12px;right:12px}}

/* ---------- Micro-interactions ---------- */
.btn{will-change:transform}
.card,.gamme,.news .n,.prod .p{will-change:transform}

/* ---------- Respect du confort visuel ---------- */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;transform:none}
  .progress{display:none}
  .lb img,.lb button{transition:none}
  header.site,header.site .nav,header.site .brand img{transition:none}
}