/* ============================================================
   STUDIO: the dashboard view; panels, career player, content,
   analytics, job fit, monetization, contact. Loaded after base.css.
   ============================================================ */

/* ---------- panels ---------- */
.panel{padding:34px 0 10px;scroll-margin-top:64px}
.panel+.panel{margin-top:clamp(36px,6vh,60px)} /* respiration entre chapitres ; margin (pas padding) pour ne pas décaler les ancres */
.panel-head{margin-bottom:22px}
.h2{font-size:clamp(20px,2.2vw,26px);font-weight:600;color:var(--white);letter-spacing:-.015em}
.h2-sub{font-size:.62em;font-weight:500;color:var(--dim)}

/* overview */
.upload-note{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim);
  margin-bottom:22px;
}
.battles,.pillars{margin-top:26px}
.closer{margin-top:18px;font-style:italic;font-size:14px;color:var(--dim)}

/* why me */
.punchline{
  margin:36px auto 30px;
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size:clamp(20px,2.6vw,30px);line-height:1.25;letter-spacing:-.01em;
  color:#9DC9FF;text-align:center;max-width:26em;
}

/* ---------- the career player ---------- */
.player{
  margin-top:30px;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.screen-wrap{position:relative}
.pscreen{
  position:relative;
  aspect-ratio:16/6.2;
  min-height:280px;
  background:var(--screen-bg);
  overflow:hidden;
}
#pcanvas{position:absolute;inset:0;width:100%;height:100%}
.pscreen::before{ /* scrim de lecteur : la copie reste lisible sur toute scène */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(80deg,rgba(4,5,9,.68) 0%,rgba(4,5,9,.28) 34%,transparent 58%),
    linear-gradient(0deg,rgba(4,5,9,.55) 0%,transparent 40%);
}
.pcontent{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,3vw,36px);
  max-width:720px;
}
.pc-chapter{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--blue-hi)}
.pc-title{
  margin-top:8px;
  font-size:clamp(22px,3vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--white);
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.pc-body{margin-top:8px;font-size:clamp(13.5px,1.4vw,15.5px);color:var(--text);max-width:58ch;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.pc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pc-tags span{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:var(--text);border-radius:100px;padding:3px 10px;
}
/* numéral poster (desktop) : le numéro de chapitre comme image de fond */
.pc-num{
  position:absolute;z-index:1;right:-.04em;bottom:-.21em;
  font-family:var(--mono);font-weight:400;line-height:1;
  font-size:clamp(170px,24vw,320px);letter-spacing:-.04em;
  color:rgba(61,139,255,.04);
  -webkit-text-stroke:1.5px rgba(61,139,255,.32);
  pointer-events:none;
}
.pc-num.num-in{animation:num-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes num-in{
  from{transform:translateX(26px);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .pc-num.num-in{animation:none}
}

.pc-watermark{
  position:absolute;z-index:2;right:16px;top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.35);
}

/* progress bar */
.pbar-wrap{
  display:flex;align-items:center;gap:16px;
  padding:14px 18px 6px;
}
.pbar{
  position:relative;flex:1;height:22px;cursor:pointer;
  display:flex;align-items:center;
}
.pbar::before{
  content:"";position:absolute;left:0;right:0;height:5px;border-radius:3px;
  background:var(--stroke);
}
.pbar-fill{
  position:absolute;left:0;height:5px;border-radius:3px;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
}
.pbar-head{
  position:absolute;left:0%;width:15px;height:15px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,102,220,.35), 0 2px 8px rgba(0,0,0,.6);
  transform:translateX(-7px);
  transition:transform .1s;
}
.pbar:hover .pbar-head{transform:translateX(-7px) scale(1.15)}
.pbar-chapters{position:absolute;inset:0}
.pbar-chapters i{
  position:absolute;top:50%;width:3px;height:9px;margin-top:-4.5px;
  background:rgba(255,255,255,.4);border-radius:2px;
}
.ptime{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
#ptime-cur{color:var(--white)}

/* chapter buttons */
.pchapters{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 18px 18px;
}
.pch{
  font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--dim);background:var(--panel-2);
  border:1px solid var(--stroke);border-radius:100px;
  padding:7px 14px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.pch:hover{color:var(--white);border-color:var(--dim)}
.pch.is-on{color:#fff;background:var(--blue);border-color:var(--blue)}

/* ---------- content videos ---------- */
.vids{display:flex;flex-direction:column;gap:16px}
.vid{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:22px;
  background:var(--panel);
  border:1px solid var(--stroke-soft);
  border-radius:14px;
  padding:16px;
  transition:border-color .2s,transform .2s;
}
.vid:hover{border-color:var(--stroke);transform:translateY(-2px)}
.thumb{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(140deg,#0A2E66,#071426);
}
.th-2{background:linear-gradient(140deg,#092A4E,#0B1B3C)}
.th-3{background:linear-gradient(140deg,#1D1145,#0B0E2A)}
.th-4{background:linear-gradient(140deg,#0B3A3A,#071E26)}
.th-play{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,102,220,.92);color:#fff;
  display:grid;place-items:center;font-size:15px;padding-left:3px;
  box-shadow:0 8px 30px rgba(0,102,220,.5);
  transition:transform .2s;
}
.vid:hover .th-play{transform:translate(-50%,-50%) scale(1.12)}
.th-dur{
  position:absolute;z-index:3;right:8px;bottom:8px;
  font-family:var(--mono);font-size:10px;
  background:rgba(0,0,0,.75);color:#fff;
  padding:3px 7px;border-radius:5px;
}
/* procedural thumb art */
.th-art{position:absolute;inset:0;opacity:.85}
.th-art-chart{background:
  linear-gradient(0deg,transparent 62%,rgba(61,139,255,.25) 62.5%,transparent 63%),
  repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.05) 34px 35px);
}
.th-art-chart::after{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:44%;
  background:linear-gradient(90deg,transparent 0%,transparent 2%,rgba(61,139,255,.9) 2%,rgba(61,139,255,.9) 6%,transparent 6%,transparent 14%,rgba(61,139,255,.7) 14%,rgba(61,139,255,.7) 18%,transparent 18%,transparent 26%,rgba(122,184,255,.8) 26%,rgba(122,184,255,.8) 30%,transparent 30%,transparent 38%,rgba(61,139,255,.5) 38%,rgba(61,139,255,.5) 42%,transparent 42%,transparent 50%,rgba(122,184,255,.95) 50%,rgba(122,184,255,.95) 54%,transparent 54%,transparent 62%,rgba(61,139,255,.65) 62%,rgba(61,139,255,.65) 66%,transparent 66%,transparent 74%,rgba(122,184,255,.85) 74%,rgba(122,184,255,.85) 78%,transparent 78%,transparent 86%,rgba(61,139,255,.75) 86%,rgba(61,139,255,.75) 90%,transparent 90%);
  clip-path:polygon(0 100%,0 55%,8% 62%,16% 40%,24% 48%,32% 22%,40% 35%,48% 12%,56% 28%,64% 8%,72% 20%,80% 5%,88% 14%,100% 0,100% 100%);
  opacity:.6;
}
.th-art-wave::before{content:"";position:absolute;left:-10%;right:-10%;top:38%;height:34%;
  background:radial-gradient(ellipse 48% 90% at 20% 50%,rgba(61,139,255,.5),transparent 60%),
             radial-gradient(ellipse 40% 80% at 55% 40%,rgba(122,184,255,.4),transparent 60%),
             radial-gradient(ellipse 44% 90% at 85% 60%,rgba(0,102,220,.55),transparent 60%);
  filter:blur(6px);
}
.th-art-nodes{background-image:
  radial-gradient(circle at 24% 30%,rgba(154,107,255,.85) 0 4px,transparent 5px),
  radial-gradient(circle at 58% 22%,rgba(122,184,255,.85) 0 4px,transparent 5px),
  radial-gradient(circle at 76% 58%,rgba(154,107,255,.7) 0 4px,transparent 5px),
  radial-gradient(circle at 38% 68%,rgba(122,184,255,.8) 0 4px,transparent 5px),
  linear-gradient(24deg,transparent 47%,rgba(154,107,255,.28) 49%,transparent 51%),
  linear-gradient(-30deg,transparent 47%,rgba(122,184,255,.25) 49%,transparent 51%);
}
.th-art-voice{background-image:
  repeating-linear-gradient(90deg,transparent 0 10px,rgba(49,208,170,.5) 10px 13px,transparent 13px 23px);
  mask-image:radial-gradient(ellipse 70% 46% at 50% 50%,black 40%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 46% at 50% 50%,black 40%,transparent 75%);
}

.vid-t{font-size:clamp(16.5px,1.8vw,20px);font-weight:600;color:var(--white);letter-spacing:-.01em;line-height:1.3}
.vid-ctx{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);margin-top:7px}
.vid-p{margin-top:10px;font-size:14.5px;color:var(--text);max-width:78ch}
.vid-p b{color:var(--white);font-weight:600}
.vid-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vid-tags span{
  font-size:11.5px;font-weight:500;color:var(--dim);
  border:1px solid var(--stroke);border-radius:100px;padding:4px 11px;
}

/* ---------- analytics ----------
   Les tuiles KPI ; la démo live « the year view » vit dans yearview.css. */
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.ana{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.kpi{
  background:var(--panel);border:1px solid var(--stroke-soft);border-radius:14px;
  padding:18px 18px 12px;
  display:flex;flex-direction:column;gap:4px;
}
.kpi-n{
  font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.kpi-l{font-size:12.5px;color:var(--dim);line-height:1.45}

@media (prefers-reduced-motion:reduce){
  .kpi{transition:none}
}

/* ---------- fit ---------- */
.fit{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--stroke-soft);border:1px solid var(--stroke-soft);border-radius:14px;overflow:hidden}
.fit li{
  display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,2fr) 44px;
  gap:18px;align-items:center;
  background:var(--panel);
  padding:15px 20px;
}
.fit li:hover{background:var(--panel-2)}
.fit-req{font-weight:600;font-size:14px;color:var(--white)}
.fit-proof{font-size:13.5px;color:var(--dim)}
.fit-badge{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;
}
.fit-badge.ok{background:rgba(49,208,170,.14);color:var(--mint)}
.fit-badge.warn{background:rgba(255,194,75,.14);color:var(--gold)}
.fit-proof a{color:var(--blue-hi);text-decoration:none}
.fit-proof a:hover{text-decoration:underline}

/* ---------- first 90 days ---------- */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:26px}
.phase{
  background:var(--panel);border:1px solid var(--stroke-soft);border-radius:14px;
  padding:20px;
  border-top:3px solid var(--blue);
}
.phase:nth-child(2){border-top-color:var(--mint)}
.phase:nth-child(3){border-top-color:var(--gold)}
.phase-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--blue-hi)}
.phase:nth-child(2) .phase-k{color:var(--mint)}
.phase:nth-child(3) .phase-k{color:var(--gold)}
.phase-t{margin-top:8px;font-size:17px;font-weight:600;color:var(--white);letter-spacing:-.01em}
.phase ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.phase li{position:relative;padding-left:16px;font-size:13.5px;color:var(--dim);line-height:1.5}
.phase li::before{content:"▸";position:absolute;left:0;top:1px;font-size:11px;color:var(--faint)}

.sec-cta{margin-top:22px;font-size:14.5px;color:var(--dim)}
.sec-cta a{
  color:var(--blue-hi);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(61,139,255,.35);
  transition:color .15s,border-color .15s;
}
.sec-cta a:hover{color:var(--white);border-color:var(--white)}

/* ---------- ten ideas ---------- */
.ideas{
  list-style:none;counter-reset:idea;
  margin-top:26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;
}
.ideas li{
  counter-increment:idea;
  position:relative;
  background:var(--panel);border:1px solid var(--stroke-soft);border-radius:12px;
  padding:16px 18px 16px 56px;
  font-size:14px;color:var(--text);line-height:1.5;
  transition:border-color .2s;
}
.ideas li:hover{border-color:var(--stroke)}
.ideas li::before{
  content:counter(idea,decimal-leading-zero);
  position:absolute;left:18px;top:17px;
  font-family:var(--mono);font-size:12.5px;color:var(--blue-hi);
}

/* ---------- why studio ---------- */
.why-body{max-width:70ch}
.why-body p{font-size:15.5px;color:var(--text);line-height:1.65}
.why-body p+p{margin-top:14px}
.why-body b{color:var(--white);font-weight:600}

/* ---------- six months in ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q{
  background:var(--panel);border:1px solid var(--stroke-soft);border-radius:14px;
  padding:20px;
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size:17.5px;line-height:1.4;color:var(--text);
}
.q::before{content:"“";display:block;font-size:30px;line-height:1;color:var(--blue-hi);margin-bottom:10px}

/* ---------- monetization ---------- */
.mon{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.mon-card{
  background:var(--panel);border:1px solid var(--stroke-soft);border-radius:14px;
  padding:20px;
  border-top:3px solid var(--blue);
}
.mon-card:nth-child(2){border-top-color:var(--mint)}
.mon-card:nth-child(3){border-top-color:var(--gold)}
.mon-card:nth-child(4){border-top-color:var(--red)}
.mon-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--white)}
.mon-card p{margin-top:10px;font-size:14px;color:var(--dim)}
.mon-card b{color:var(--white);font-weight:600}

/* ---------- contact ---------- */
.cta-box{
  background:
    radial-gradient(ellipse 80% 130% at 85% -20%,rgba(0,102,220,.35),transparent 55%),
    var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:clamp(28px,4vw,48px);
}
.cta-t{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--white)}
.cta-p{margin-top:12px;font-size:16px;color:var(--text);max-width:56ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn-solid{
  font-weight:600;font-size:15px;color:#fff;background:var(--blue);
  padding:13px 22px;border-radius:10px;text-decoration:none;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.btn-solid:hover{background:var(--blue-hi);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,102,220,.4)}
.btn-ghost{
  font-weight:600;font-size:15px;color:var(--text);
  border:1px solid var(--stroke);
  padding:13px 22px;border-radius:10px;text-decoration:none;
  transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--dim);color:var(--white)}
.cta-meta{margin-top:18px;font-size:12.5px;color:var(--dim)}

.foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:26px 4px 6px;
  font-size:12px;color:var(--dim);
}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--blue-hi)}

/* reveals */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .vid{grid-template-columns:1fr}
  .fit li{grid-template-columns:1fr;gap:6px}
  .fit-badge{display:none}
  .pscreen{aspect-ratio:auto;min-height:340px}
  .pc-num{display:none} /* le numéral poster est réservé aux résolutions desktop */
  .quotes{grid-template-columns:1fr}
}

/* mobile : la copie quitte l'overlay. Le canvas garde une bande visuelle
   dédiée en haut ; le texte s'empile dessous, posé sur son propre fond
   (le canvas continue de peindre derrière, le dégradé l'éteint). */
@media (max-width:640px){
  .panel+.panel{margin-top:28px}
  .pscreen{aspect-ratio:auto;min-height:0;height:auto}
  .pscreen::before{display:none} /* plus de scrim latéral : le texte n'est plus sur la scène */
  #pcanvas{bottom:auto;height:236px} /* la scène compose dans la bande, pas derrière le texte */
  .pcontent{
    height:auto;
    margin-top:236px; /* la bande de scène visible au-dessus du texte */
    padding:20px 18px 22px;
    max-width:none;
    background:var(--screen-bg);
  }
  .pc-title,.pc-body{text-shadow:none}
}