/* ============================================================
   DIRECTED BY WOLF — L'ATELIER (page Studio).
   Vitrine de tous les services. SQUELETTE : chaque exemple est
   un SLOT codé (WEB-01, POD-02…) — Wolf livre les assets plus
   tard avec le code correspondant, on remplace le slot.
   Même doctrine : charbon mat, verre = interface, fondu pur.
   ============================================================ */

.at-nav{position:sticky;top:64px;z-index:55;justify-content:center}

/* ---------- LA VITRINE — les services disponibles, en tête de page ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
  margin:8px 0 26px}
.svc{position:relative;display:block;text-decoration:none;border-radius:14px;padding:18px 18px 16px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background-color .3s var(--ease)}
.svc:hover{transform:translateY(-2px);border-color:rgba(201,207,204,.45)}
.svc .n{font-family:var(--mono);font-size:9px;letter-spacing:var(--ls-2);color:var(--led)}
.svc b{display:block;margin:10px 0 7px;font-family:var(--sans);font-weight:650;font-size:17px;
  letter-spacing:-.01em;color:var(--bone)}
.svc .d{display:block;font-size:12.5px;line-height:1.55;color:var(--stone)}
.svc .go{position:absolute;top:14px;right:16px;color:var(--stone);font-size:14px;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.svc:hover .go{color:var(--led-hot);transform:translate(2px,-2px)}

.atsec{margin:74px 0}
.atsec:first-of-type{margin-top:40px}
.at-t{font-family:var(--sans);font-weight:650;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.02em;color:var(--bone);margin:12px 0 12px}
.at-p{max-width:64ch;font-size:15px;line-height:1.75;color:var(--stone);margin:0 0 26px}
.at-p b{color:var(--bone);font-weight:500}

/* ---------- grilles de slots ---------- */
.at-grid{display:grid;gap:10px}
.g-web{grid-template-columns:repeat(3,1fr)}
.g-pod{grid-template-columns:repeat(4,1fr)}
.g-loc{grid-template-columns:repeat(3,1fr)}
.g-gra{grid-template-columns:repeat(4,1fr)}
.g-pho{grid-template-columns:repeat(4,1fr)}
.g-mkt{grid-template-columns:repeat(3,1fr)}

/* un slot = une carte placeholder codée, à remplacer par l'asset */
.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;aspect-ratio:var(--r,16/9);border-radius:12px;background:#0A0A0C;
  border:1px dashed rgba(255,255,255,.14);transition:border-color .3s var(--ease)}
.slot:hover{border-color:rgba(201,207,204,.4)}
.scode{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--led-hot);
  background:rgba(201,207,204,.08);border:1px solid rgba(201,207,204,.3);border-radius:9px;padding:8px 12px}
.slab{font-family:var(--sans);font-weight:620;font-size:13px;color:var(--bone);
  letter-spacing:.01em;text-align:center;padding:0 10px}
.sfill{font-family:var(--mono);font-size:8.5px;letter-spacing:var(--ls-3);color:rgba(239,241,240,.4)}

/* slots textuels (cas marketing) */
.slot--txt{aspect-ratio:auto;min-height:220px;padding:24px;align-items:flex-start}
.slot--txt .slab{text-align:left;padding:0}
.slot--txt .lines{display:grid;gap:10px;width:100%;margin-top:8px}
.slot--txt .lines i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.05)}
.slot--txt .lines i:nth-child(2){width:82%}
.slot--txt .lines i:nth-child(3){width:64%}

/* ---------- CTA (location Focus) ---------- */
.at-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.at-note{font-family:var(--mono);font-size:9px;letter-spacing:var(--ls-2);color:var(--stone)}

/* ---------- cartes démos web — cliquer ouvre la démo hébergée ici ---------- */
.web-card{position:relative;display:block;text-decoration:none;border-radius:12px;overflow:hidden;
  background:#0B0B0D;border:1px solid rgba(255,255,255,.07);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.web-card:hover{transform:translateY(-2px);border-color:rgba(201,207,204,.45)}
.web-card .shot{display:block;aspect-ratio:16/10;overflow:hidden}
.web-card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  filter:saturate(.92) brightness(.94);transition:filter .4s var(--ease),transform .5s var(--ease)}
.web-card:hover .shot img{filter:none;transform:scale(1.02)}
.web-card .wc-b{display:block;padding:14px 16px 16px}
.web-card .wc-b b{display:block;font-family:var(--sans);font-weight:650;font-size:16px;
  letter-spacing:-.01em;color:var(--bone)}
.web-card .wc-b span{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--stone)}
.web-card .wc-b i{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);
  font-size:8.5px;letter-spacing:var(--ls-2);color:var(--led-hot)}
.web-card .wc-badge{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:8px;
  letter-spacing:var(--ls-2);color:#0B0B0C;background:var(--led);padding:4px 9px;border-radius:999px}

/* ---------- vitrine photoshoot (photos publiées depuis LA RÉGIE) ---------- */
.pho-card{border-radius:12px;overflow:hidden;background:#0B0B0D;border:1px solid rgba(255,255,255,.07)}
.pho-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:saturate(.92) brightness(.94);transition:filter .4s var(--ease)}
.pho-card:hover img{filter:none}

/* ---------- bande vidéo (vraies cartes du mur) ---------- */
.at-vstrip{margin:0 0 14px}

/* ---------- LES ESPACES FOCUS — cartes + fiche ---------- */
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-card{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  background:#0B0B0D;border:1px solid rgba(255,255,255,.07);display:block;text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.sp-card img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) brightness(.88);transition:filter .4s var(--ease),transform .5s var(--ease)}
.sp-card:hover{transform:translateY(-2px)}
.sp-card:hover img{filter:none;transform:scale(1.03)}
.sp-card.on{border-color:var(--ember)}
.sp-card .nm{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:30px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.sp-card .nm b{display:block;font-family:var(--sans);font-weight:650;font-size:15px;
  letter-spacing:-.01em;color:var(--bone)}
.sp-card .nm i{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);
  font-size:7.5px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.65)}
.sp-card:focus-visible{outline:2px solid var(--white-led);outline-offset:3px}

.sp-panel{margin-top:10px;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;
  background:var(--coal-2,#141416);border:1px solid var(--seam);border-radius:16px;padding:24px}
.sp-panel .ph img{width:100%;border-radius:10px;display:block}
.sp-panel h3{font-family:var(--sans);font-weight:650;font-size:24px;letter-spacing:-.02em;
  color:var(--bone);margin:8px 0 10px}
.sp-panel p{font-size:14.5px;line-height:1.7;color:var(--stone);max-width:52ch;margin:0 0 16px}
.sp-specs{display:grid;gap:9px}
.sp-specs span{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-1);color:var(--stone)}
.sp-vids{display:flex;gap:8px}
.sp-vids span{flex:1;aspect-ratio:16/9;border-radius:8px;background:#0A0A0C;
  border:1px dashed rgba(255,255,255,.12)}
.sp-panel .at-cta{margin-top:20px}

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

/* ---------- responsive ---------- */
@media (max-width:960px){
  .g-web,.g-loc,.g-mkt{grid-template-columns:repeat(2,1fr)}
  .g-pod,.g-gra,.g-pho{grid-template-columns:repeat(2,1fr)}
  .sp-grid{grid-template-columns:repeat(2,1fr)}
  .sp-panel{grid-template-columns:1fr}
}
@media (max-width:640px){
  .at-nav{top:56px}
  .atsec{margin:54px 0}
  .g-mkt{grid-template-columns:1fr}
  .sp-panel{padding:16px}
}