/* ============================================================
   DIRECTED BY WOLF — HOME (index.html)
   Demo reel → Selected (marquee) → Studio rental → What I Do
   → Who I Am.  Même doctrine que le feed : mur mat, verre =
   interface, lumière fixée aux structures.
   ============================================================ */

/* ---------- hero compact ---------- */
.fhero--home{padding:84px 0 26px}
.fhero--home p b{color:var(--bone);font-weight:500}

/* ---------- DEMO REEL — placeholder en attendant le film ---------- */
.dreel{margin:10px 0 30px}
.dreel .box{position:relative;max-width:1080px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:#0A0A0C;border:1px dashed rgba(255,255,255,.15);
  transition:border-color .3s var(--ease)}
.dreel .box:hover{border-color:rgba(201,207,204,.4)}
.dreel .pl{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 45% at 50% 14%,rgba(255,255,255,.14),transparent 70%),rgba(6,6,6,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.3)}
.dreel b{font-family:var(--sans);font-weight:640;font-size:15.5px;letter-spacing:-.01em;color:var(--bone)}
.dreel .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-3);color:rgba(239,241,240,.4)}

/* ---------- SELECTED — marquee : défilement continu vers la droite.
   Survol d'une rangée = pause (la vidéo joue en silence sous le curseur). */
.mqrow{--mqh:clamp(150px,13.5vw,235px);overflow:hidden;margin-bottom:10px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.mqtrack{display:flex;width:max-content;animation:mqslide var(--dur,90s) linear infinite}
.mqhalf{display:flex;gap:10px;padding-right:10px}
.mqrow .fcard{flex:0 0 auto;width:calc(var(--mqh)*var(--ar))}
.mqrow .fcard .m{height:var(--mqh);aspect-ratio:auto}
@keyframes mqslide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mqrow:hover .mqtrack{animation-play-state:paused}
.mqrow.rv{opacity:0;transition:opacity .9s var(--ease)}
.mqrow.rv.in{opacity:1}
html.qc .mqtrack{animation:none}
html.qc .mqrow.rv{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  .mqtrack{animation:none}
  .mqrow.rv{opacity:1;transition:none}
}

/* ---------- STUDIO RENTAL (extrait de l'Atelier) ---------- */
.hloc{margin:96px 0 90px}
.hloc .hsec{margin-bottom:18px}

/* ---------- en-têtes de section ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 26px}
.shead .eyebrow2{margin-bottom:0}
#selected{margin-top:6px}
#selected .shead{margin-bottom:30px}

/* ---------- CTA sous l'extrait ---------- */
.feedcta{display:flex;justify-content:center;margin:8px 0 10px}

/* ---------- WHO I AM ---------- */
.habout{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;margin:110px 0 96px}
.habout .hsec{margin-bottom:22px}
.habout p{max-width:56ch;font-size:15.5px;line-height:1.75;color:var(--stone);margin:0 0 16px}
.habout p b{color:var(--bone);font-weight:500}
.habout .btn-line{margin-top:26px}

.hmarks{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-2);color:var(--stone)}
.hmarks span b{color:var(--led);font-weight:500;margin-right:6px}
.hmarks i{width:26px;height:1px;background:var(--seam);flex:0 0 auto}

.hphoto{margin:0}
.hphoto .m{position:relative;aspect-ratio:4/4.6;border-radius:14px;overflow:hidden;background:#0B0B0D;
  border:1px solid rgba(255,255,255,.06)}
.hphoto .m img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.03) brightness(.92)}
.hphoto .m::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.34) 100%)}
.hphoto figcaption{padding:12px 4px 0}

/* ---------- WHAT I DO ---------- */
.hsvc{margin:0 0 90px}
.svcrows{border-top:1px solid var(--seam)}
.srow{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:18px;
  padding:26px 6px;border-bottom:1px solid var(--seam);text-decoration:none;
  transition:background-color .3s var(--ease)}
.srow .num{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-1);color:var(--led);
  font-variant-numeric:tabular-nums}
.srow .tx b{display:block;font-family:var(--sans);font-weight:650;font-size:clamp(19px,2vw,25px);
  letter-spacing:-.02em;color:var(--bone);transition:color .3s var(--ease)}
.srow .tx span{display:block;margin-top:7px;font-size:14px;line-height:1.6;color:var(--stone);max-width:62ch}
.srow .arw{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  color:var(--stone);border:1px solid var(--seam);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .srow:hover .tx b{color:var(--led-hot)}
  .srow:hover .arw{color:#0B0B0C;background:var(--ember);border-color:var(--ember);transform:translate(2px,-2px)}
}

/* ---------- reveals — fondu pur, rien ne monte ---------- */
.habout.rv,.hsvc.rv,.hloc.rv{opacity:0;transform:none;transition:opacity .9s var(--ease)}
.habout.rv.in,.hsvc.rv.in,.hloc.rv.in{opacity:1}
html.qc .habout.rv,html.qc .hsvc.rv,html.qc .hloc.rv{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .habout.rv,.hsvc.rv,.hloc.rv{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .habout{grid-template-columns:1fr;margin:76px 0 64px}
  .hphoto{order:-1}
  .hphoto .m{aspect-ratio:16/10}
}
@media (max-width:640px){
  .fhero--home{padding:46px 0 14px}
  .shead{flex-direction:column;align-items:flex-start;gap:10px}
  .habout{margin:56px 0 48px}
  .srow{grid-template-columns:1fr 40px;gap:12px;padding:22px 2px}
  .srow .num{display:none}
  .hmarks{gap:10px}
  .hmarks i{width:14px}
}