/* ============================================================
   VHYNX — Agence digitale créative · Marrakech
   Direction : Prestige Chrome (noir profond / blanc / chrome)
   FICHIER : layout.css
   ============================================================ */

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s ease,border-color .5s ease,padding .5s ease,backdrop-filter .5s ease;
}
.nav.is-scrolled{
  background:rgba(10,10,10,.72);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
@media (min-width:900px){.nav{padding:22px var(--pad);}.nav.is-scrolled{padding:15px var(--pad);}}
.nav__logo{font-weight:700;letter-spacing:.32em;font-size:17px;padding-left:2px;}
.nav__menu{display:none;align-items:center;gap:32px;}
@media (min-width:900px){.nav__menu{display:flex;}}
.nav__link{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#cfcfcf;position:relative;padding-bottom:2px;transition:color .3s ease;}
.nav__link:hover{color:#fff;}
.nav__link.is-active{color:#fff;}
.nav__link::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:linear-gradient(90deg,#eef0f1,var(--chrome-c));transition:width .4s var(--ease);}
.nav__link:hover::after,.nav__link.is-active::after{width:100%;}
.nav__cta{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#0A0A0A;background:#f0f0f0;padding:9px 20px;border-radius:2px;transition:background .3s ease,transform .3s ease;}
.nav__cta:hover{background:#fff;transform:translateY(-1px);}

/* burger */
.nav__burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:44px;height:44px;margin-right:-6px;}
@media (min-width:900px){.nav__burger{display:none;}}
.nav__burger span{display:block;height:1.5px;width:22px;background:#eaeaea;transition:transform .4s var(--ease),opacity .3s ease;margin-left:auto;}
.nav__burger span:nth-child(2){width:16px;}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:22px;}
body.menu-open .nav__burger span:nth-child(2){opacity:0;}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px;}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(8,8,8,.98);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .5s ease,transform .5s var(--ease),visibility .5s;
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:translateY(0);}
.drawer a{font-weight:600;font-size:clamp(34px,10vw,64px);letter-spacing:-.03em;line-height:1.16;color:#f2f2f2;transition:color .3s ease,padding-left .4s var(--ease);}
.drawer a:hover,.drawer a.is-active{color:#fff;padding-left:14px;}
.drawer .drawer__meta{margin-top:44px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;}
@media (min-width:900px){.drawer{display:none;}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;filter:grayscale(1) contrast(1.04);}
.hero__fallback{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 12%,#151515,#0A0A0A 60%,#050505);}
.hero__grade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.12) 42%,rgba(10,10,10,.82) 100%);}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:0 12vh;}
.hero__inner .wrap{padding-bottom:env(safe-area-inset-bottom);}
.hero__sub{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:22px;margin-top:30px;}
.hero__cue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:#9a9a9a;}
.hero--tall{min-height:100svh;align-items:center;}

/* ---------- Footer ---------- */
.stack{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line);}
.stack__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#5a5a5a;margin-bottom:22px;text-transform:uppercase;}
.stack__row{display:flex;flex-wrap:wrap;gap:10px;}
.stack__i{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line-2);border-radius:3px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#b0b0b0;background:#0c0c0c;transition:color .3s ease,border-color .3s ease,background .3s ease;}
.stack__i:hover{color:#fff;border-color:#3a3a3a;background:#131313;}
.stack__i b{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em;background:linear-gradient(150deg,#f2f3f4,#a9adb2 60%,#7f8183);-webkit-background-clip:text;background-clip:text;color:transparent;}
.footer{padding:72px var(--pad) 40px;background:var(--bg-3);}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-bottom:64px;}
.footer__brand{font-weight:700;letter-spacing:.32em;font-size:22px;margin-bottom:16px;}
.footer__cols{display:flex;flex-wrap:wrap;gap:56px;}
.footer__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#5a5a5a;margin-bottom:18px;}
.footer__list{display:flex;flex-direction:column;gap:11px;font-size:13.5px;color:#b5b5b5;}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#5a5a5a;}