/* ============================================================
   DIRECTED BY WOLF — LE FEED (work.html + extrait home)
   Mur dense : étagères justifiées (hauteur commune par rangée,
   largeur = H × ratio), cartes attachées par un joint fin.
   Le titre vit SUR la carte (fondu au survol) — aucune plaque.
   Verre uniquement sur l'interface (chips, play, durée) — LOI 3.
   ============================================================ */

/* ---------- hero minimal — mur mat, aucune lueur derrière ---------- */
.fhero{position:relative;padding:64px 0 8px;text-align:center}
.fhero .eyebrow2{justify-content:center}
.fhero h1{position:relative;z-index:1;font-family:var(--sans);font-weight:620;font-size:clamp(38px,5vw,68px);
  line-height:1.02;letter-spacing:-.03em;margin:0 auto 18px;max-width:820px;color:var(--bone)}
.fhero p{position:relative;z-index:1;max-width:540px;margin:0 auto 34px;font-size:16px;line-height:1.65;color:var(--stone)}

/* ---------- chips (verre — interface) ---------- */
.fchips{position:sticky;top:64px;z-index:55;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:8px;padding:12px 0;margin-bottom:var(--s5)}
.fchips::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.88) 65%,transparent)}
.fchip{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-2);color:var(--stone);cursor:pointer;
  padding:10px 18px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:var(--glass-hl);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease)}
.fchip:hover{color:var(--bone);transform:translateY(-1px)}
.fchip.on{color:#0B0B0C;background:linear-gradient(180deg,var(--ember-hi),var(--ember) 60%,var(--ember-lo));
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 24px -10px rgba(177,183,180,.6)}
.fcount{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-2);color:var(--stone);margin-left:14px;
  font-variant-numeric:tabular-nums}

/* ---------- conteneur large — le mur remplit l'écran ---------- */
.wrap--wide{max-width:1800px}

/* ---------- étagères — le mur attaché ---------- */
#feed{padding-bottom:var(--s8)}
.shelf{display:flex;gap:10px;align-items:stretch;margin-bottom:10px;
  /* les étagères hors écran ne sont ni layoutées ni peintes — gros gain iPhone ;
     `auto` mémorise la vraie hauteur après le premier rendu (pas de saut de scrollbar) */
  content-visibility:auto;contain-intrinsic-size:auto 260px}
/* filets : une carte seule ne prend JAMAIS toute la largeur */
.shelf .fcard[data-vert]:only-child{flex:0 1 auto;width:min(420px,70%);margin-inline:auto}
.shelf .fcard:not([data-vert]):only-child{flex:0 1 auto;width:min(880px,85%);margin-inline:auto}
/* paire de reels restante (crop 4:5) : deux cartes contenues, centrées — pas d'étalement */
.sh-r2{justify-content:center}
.sh-r2 .fcard{flex:0 1 auto;width:min(420px,44%)}

/* carte = objet mat, tout vit dedans */
.fcard{flex:var(--ar) 1 0;min-width:0;cursor:pointer;position:relative}
.fcard.still{cursor:default}
.fcard .m{position:relative;aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:#0B0B0D;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.fcard .m img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.03) brightness(.92);
  transition:transform .55s var(--ease),filter .55s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .fcard:hover .m{transform:translateY(-3px);border-color:rgba(201,207,204,.4);box-shadow:var(--shadow-lift)}
  .fcard:hover .m img{transform:scale(1.03);filter:saturate(1) contrast(1.03) brightness(1)}
  .shelf:has(.fcard:hover) .fcard:not(:hover){opacity:.6;transition:opacity .35s var(--ease)}
  .fcard{transition:opacity .35s var(--ease)}
}
.fcard:active .m{transform:translateY(-1px) scale(.995)}
.fcard:focus-visible{outline:2px solid var(--white-led);outline-offset:3px;border-radius:12px}

/* pendant le scroll (body.is-scrolling, posé/retiré par feed.js), les
   transitions de survol se taisent : le curseur immobile sur un mur qui
   défile allumait/éteignait des :hover en continu (re-rasterisation des
   covers + dim d'étagère). Au repos, strictement rien ne change. */
body.is-scrolling .fcard .m,
body.is-scrolling .fcard .m img,
body.is-scrolling .fcard .ovl,
body.is-scrolling .fplay{transition:none}
@media (hover:hover) and (pointer:fine){
  body.is-scrolling .shelf:has(.fcard:hover) .fcard:not(:hover){opacity:1;transition:none}
}

/* tactile : le verre de la barre de filtres est déjà posé sur un fond
   opaque à 88 % — coupé sur iOS, indiscernable et bien moins cher */
@media (hover:none){
  .fchip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,20,22,.85)}
}

/* ---------- placeholder d'une catégorie à venir (ex. WEDDINGS) ---------- */
.fcard.ph{cursor:default}
.fcard.ph .m{display:flex;align-items:center;justify-content:center;background:#0A0A0C;
  border:1px dashed rgba(255,255,255,.14)}
.fcard.ph:hover .m{transform:none;box-shadow:none;border-color:rgba(201,207,204,.35)}
.fcard.ph:hover .m img{transform:none}
.phx{text-align:center;padding:12px}
.phx b{display:block;font-family:var(--sans);font-weight:640;font-size:15px;letter-spacing:-.01em;color:var(--stone)}
.phx span{display:block;margin-top:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-3);
  color:rgba(239,241,240,.4)}

/* hover-preview — la vidéo monte en fondu par-dessus la cover.
   video local : cover plein cadre · iframe YT/Vimeo : surdimensionné centré.
   z-index 1, sous l'interface et le titre (z-index 2). */
.fcard .m .pv{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border:0;
  object-fit:cover;background:#000;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.fcard .m .pv-if{top:50%;left:50%;width:auto;height:auto;transform:translate(-50%,-50%)}
.fcard .m .pv.on{opacity:1}

/* chip de type — verre (LOI 3) */
.tchip{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-2);
  color:var(--led-hot);padding:5px 11px;border-radius:999px;
  background:rgba(6,6,6,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* play — verre, ember à l'action */
.fplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);z-index:2;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;
  background:radial-gradient(60% 45% at 50% 14%,rgba(255,255,255,.14),transparent 70%),rgba(6,6,6,.55);
  border:1px solid rgba(255,255,255,.3);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
/* le verre du play n'existe QUE quand il est visible (hover) — au repos il
   est à opacity:0 : payer ~93 backdrop-filter invisibles tuait le scroll */
.fcard:hover .fplay{opacity:1;transform:translate(-50%,-50%) scale(1);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fcard:hover .fplay:hover{background:var(--ember);border-color:var(--ember)}
.fdur{position:absolute;top:10px;right:10px;z-index:2;padding:4px 9px;border-radius:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-1);color:var(--bone);
  background:rgba(6,6,6,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-variant-numeric:tabular-nums}
/* tactile : le givré des micro-chips sur covers sombres est invisible mais
   ~230 backdrop-filter tuent le scroll iOS — verre coupé, opacité compensée
   (rendu quasi identique, à valider sur 2-3 covers claires) */
@media (hover:none){
  .tchip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,6,.72)}
  .fdur{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,6,.78)}
}

/* ---------- titre SUR la carte — fondu au survol, dans le coin ---------- */
.ovl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;padding:34px 12px 10px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62) 78%);
  opacity:0;transition:opacity .4s var(--ease)}
.fcard:hover .ovl{opacity:1}
.ovl .ot{min-width:0}
.ovl b{display:block;font-family:var(--sans);font-weight:640;font-size:14.5px;letter-spacing:-.01em;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovl .ot span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.72);
  margin-top:4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovl .of{font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-1);color:rgba(239,241,240,.5);
  flex:0 0 auto;font-variant-numeric:tabular-nums}
@media (hover:none){ .ovl{opacity:1} }

/* ---------- fin de feed — texte seul, aucun rail ---------- */
.endline{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-3);
  color:var(--stone);margin:64px 0 28px}

/* ---------- reveals — fondu pur, rien ne monte ---------- */
.shelf.rv .fcard{opacity:0;
  transition:opacity .8s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.shelf.rv.in .fcard{opacity:1}
/* l'arrivée jouée (.lit posée par feed.js), le hover retrouve sa transition
   courte — sinon le dim d'étagère héritait du .8s + délais étagés du reveal */
.shelf.rv.lit .fcard{transition-duration:.35s;transition-delay:0s}
/* rattrapage tardif (filet feed.js) : la classe .rv-late sur l'hôte coupe
   les transitions le temps du snap — retirée deux frames plus tard */
.rv-late .shelf.rv .fcard{transition:none}
html.qc .shelf.rv .fcard{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  .shelf.rv .fcard{opacity:1;transition:none}
}

/* ---------- MODE ÉDITION — Wolf réorganise le mur lui-même ---------- */
body.editing .fchips{display:none}
body.editing .fcard{cursor:grab}
body.editing .fcard:active{cursor:grabbing}
body.editing .fcard .fplay,body.editing .fcard .ovl,
body.editing .fcard .fdur,body.editing .fcard .tchip{display:none}
/* taille des cartes S/M/L — visible en mode édition seulement */
.szbar{position:absolute;top:8px;right:8px;z-index:3;display:none;gap:4px}
body.editing .szbar{display:flex}
.szbar b{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.06em;cursor:pointer;
  color:var(--stone);background:rgba(6,6,6,.78);border:1px solid rgba(255,255,255,.16);
  padding:5px 8px;border-radius:999px}
.szbar b:hover{color:var(--bone);border-color:rgba(255,255,255,.4)}
.szbar b.on{color:#0B0B0C;background:var(--ember);border-color:var(--ember)}
body.editing .fcard.dragging{opacity:.35}
body.editing .fcard.drop-before .m{box-shadow:-6px 0 0 0 var(--ember)}
body.editing .fcard.drop-after .m{box-shadow:6px 0 0 0 var(--ember)}
.editbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px;white-space:nowrap;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--glass-hl),0 18px 50px -20px rgba(0,0,0,.9)}
.editbar .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-2);color:var(--led-hot)}
.editbar button{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-2);cursor:pointer;
  color:var(--bone);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:9px 14px;border-radius:999px;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.editbar button:hover{background:var(--ember);border-color:var(--ember);color:#0B0B0C}
.editbar button.ghost{background:transparent}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .shelf{gap:8px;margin-bottom:8px}
}
@media (max-width:640px){
  .fhero{padding:40px 0 4px}
  .fhero h1{font-size:34px;letter-spacing:-.02em}
  .fchips{top:56px;gap:6px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    padding:10px 4px;-ms-overflow-style:none;scrollbar-width:none;
    -webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
            mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto;padding:9px 15px}
  .fcount{display:none}
  /* le mur devient une colonne rythmée : 16:9 pleine largeur, reels par paires.
     Les 16:9 passent devant (order) pour que les reels d'une même étagère
     s'apparient — jamais de demi-rangée vide. */
  .shelf{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .fcard{width:auto}
  .fcard[style*="--ar:1.7778"]{grid-column:span 2;order:-1}
  .fcard[style*="--ar:0.8"]{grid-column:span 1}
  /* reel orphelin → pleine largeur en 4:5 (W2/W3 = reel seul ; R3/R5 = l'impair reste seul) */
  .sh-w2 .fcard[style*="--ar:0.5625"],
  .sh-w3 .fcard[style*="--ar:0.5625"],
  .sh-r3 .fcard:nth-child(3):last-child,
  .sh-r5 .fcard[style*="--ar:0.5625"]:nth-child(5):last-child{grid-column:span 2}
  .sh-w2 .fcard[style*="--ar:0.5625"] .m,
  .sh-w3 .fcard[style*="--ar:0.5625"] .m,
  .sh-r3 .fcard:nth-child(3):last-child .m,
  .sh-r5 .fcard[style*="--ar:0.5625"]:nth-child(5):last-child .m{aspect-ratio:4/5}
  .sh-r2 .fcard{width:auto}
  /* reel dépareillé d'une rangée mixte (marqué par le moteur) → pleine largeur 4:5 */
  .fcard.orph{grid-column:span 2}
  .fcard.orph .m{aspect-ratio:4/5}
  .shelf .fcard[data-vert]:only-child{width:auto;margin-inline:0}
  .ovl b{font-size:13px}
  .ovl .of{display:none}
  .editbar{left:10px;right:10px;transform:none;justify-content:center;flex-wrap:wrap;white-space:normal}
}