/* ============================================================
   awwwards.css — Animations Awwwards inspirées de nos composants
   du catalogue (aw-obys, aw-akaru, aw-cuberto, aw-unseen,
   aw-14islands, aw-basement). Recréées en CSS/JS vanilla, 0 CDN,
   100% offline. Honore prefers-reduced-motion.
   ============================================================ */

/* ---- 1) MENU PLEIN ÉCRAN XXL + STAGGER (aw-obys / aw-akaru) ---- */
.overlay-menu{position:fixed;inset:0;z-index:80;background:var(--encre);
  clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1);
  display:flex;flex-direction:column;justify-content:center;visibility:hidden;
  height:100vh;height:100dvh;overflow-y:auto;padding:88px 0 28px}
.overlay-menu.open{clip-path:inset(0 0 0% 0);visibility:visible}
.overlay-menu .om-inner{padding:0 28px;max-width:1560px;margin:auto auto 0;width:100%}
.overlay-menu .om-link{display:block;overflow:hidden;padding:2px 0}
.overlay-menu .om-link a{display:inline-block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(2.2rem,8vw,5.5rem);line-height:1.08;letter-spacing:-.02em;color:var(--chaux);
  transform:translateY(110%);transition:transform .8s cubic-bezier(.76,0,.24,1),color .3s;will-change:transform}
.overlay-menu.open .om-link a{transform:translateY(0)}
.overlay-menu.open .om-link:nth-child(1) a{transition-delay:.10s}
.overlay-menu.open .om-link:nth-child(2) a{transition-delay:.16s}
.overlay-menu.open .om-link:nth-child(3) a{transition-delay:.22s}
.overlay-menu.open .om-link:nth-child(4) a{transition-delay:.28s}
.overlay-menu.open .om-link:nth-child(5) a{transition-delay:.34s}
.overlay-menu .om-link a:hover{color:var(--or-l)}
.overlay-menu .om-link a .idx{font-family:var(--ff-body);font-size:.9rem;font-weight:600;
  vertical-align:super;color:var(--sanguine);margin-right:14px;letter-spacing:.05em}
.overlay-menu .om-foot{margin-top:48px;padding:0 28px;max-width:1560px;width:100%;margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
  opacity:0;transition:opacity .5s ease .5s}
.overlay-menu.open .om-foot{opacity:1}
.overlay-menu .om-foot a,.overlay-menu .om-foot span{color:rgba(244,236,221,.7);font-size:.86rem;letter-spacing:.04em}
.overlay-menu .om-foot a:hover{color:var(--or-l)}
/* bouton burger toujours au-dessus de l'overlay */
.burger{z-index:90}
.nav .burger span{background:var(--chaux)}
body.menu-open{overflow:hidden}
@media(min-width:900px){.overlay-menu{display:none}}

/* ---- 2) BOUTONS MAGNÉTIQUES (aw-cuberto) ---- */
.magnetic{position:relative;will-change:transform}
.magnetic > span.mag-in{display:inline-flex;align-items:center;gap:10px;will-change:transform;pointer-events:none}
@media(hover:none),(pointer:coarse){.magnetic{transform:none!important}.magnetic>span.mag-in{transform:none!important}}

/* ---- 3) SPLIT-TEXT REVEAL ligne par ligne (aw-unseen) ---- */
.split-rt .sline{display:block;overflow:hidden}
.split-rt .sline > span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1);will-change:transform}
.split-rt.in .sline > span{transform:translateY(0)}
.split-rt.in .sline:nth-child(2) > span{transition-delay:.09s}
.split-rt.in .sline:nth-child(3) > span{transition-delay:.18s}
.split-rt.in .sline:nth-child(4) > span{transition-delay:.27s}
.reduce .split-rt .sline > span{transform:none!important}

/* ---- 4) HOVER DISTORSION / TRANSITION D'IMAGE (aw-14islands / aw-robin-noguier) ---- */
/* renforce .folio : zoom + clip reveal de l'image B + glissement de teinte */
.folio .ph{position:relative}
.folio .ph::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(120deg,rgba(156,86,56,.0),rgba(177,138,74,.0));
  mix-blend-mode:multiply;opacity:0;transition:opacity .6s}
.folio a:hover .ph::after{opacity:1;background:linear-gradient(120deg,rgba(156,86,56,.22),rgba(177,138,74,.16))}
.folio .ph .img-b{clip-path:inset(0 0 0 100%);opacity:1;transform:scale(1.04);
  transition:clip-path .7s cubic-bezier(.76,0,.24,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.folio a:hover .ph .img-b{clip-path:inset(0 0 0 0%);transform:scale(1)}
.folio .ph .reveal-num{position:absolute;right:14px;bottom:12px;z-index:3;
  font-family:var(--ff-display);font-size:1rem;font-weight:600;color:var(--chaux);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.folio a:hover .ph .reveal-num{opacity:.9;transform:translateY(0)}

/* ---- 5) PARALLAX data-speed doux (aw-locomotive / aw-exoape) : géré en JS, juste will-change ---- */
[data-speed]{will-change:transform}
/* sur-dimensionne légèrement les images parallax en conteneur cover pour éviter tout filet vide */
.media img[data-speed],.band img[data-speed]{height:118%;top:-9%;position:relative}

/* ---- LIGNE-MARQUEE survol distordu (aw-basement) : pause + accent au survol ---- */
.marquee:hover .track{animation-play-state:paused}
.marquee .track span:hover{color:var(--or-l)}

@media(prefers-reduced-motion:reduce){
  .overlay-menu,.overlay-menu .om-link a,.split-rt .sline>span,.folio .ph .img-b{transition:none!important}
  .overlay-menu .om-link a{transform:none}
}