:root{
  --paper:#f5f2f0;
  --paper-2:#ebe7e5;
  --ink:#111214;
  --muted:#6e6d72;
  --line:#17181b;
  --cyan:#14a99b;
  --cyan-dark:#08766e;
  --violet:#7a67b3;
  --pink:#d43d91;
  --silver:#d8d9dd;
  --good:#098861;
  --bad:#c6284e;
  --shadow:0 16px 42px rgba(18,18,20,.12);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  background:
    linear-gradient(rgba(17,18,20,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.025) 1px,transparent 1px),
    var(--paper);
  background-size:32px 32px;
}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.shell{
  width:min(100%,1180px);
  min-height:100vh;
  margin:auto;
  padding:20px clamp(18px,4vw,56px) 42px;
}
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  border-bottom:2px solid var(--line);
  padding-bottom:12px;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:-.8px;
  line-height:.9;
}
.brand strong{font-family:"Archivo Black",sans-serif;font-size:20px}
.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:4px;color:var(--muted)}
.brand-chip{
  width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink));
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:6px 11px;
  border:1.5px solid var(--line);border-radius:99px;
  background:rgba(245,242,240,.84);
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1.25px;
}
.hero{
  min-height:calc(100vh - 98px);
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:clamp(28px,6vw,88px);
  align-items:center;
  padding:42px 0 32px;
}
.hero-copy{align-self:center}
.kicker{
  display:flex;align-items:center;gap:14px;
  font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:28px;
}
.kicker:before{content:"";width:38px;height:2px;background:var(--ink)}
h1,h2,.display{font-family:"Archivo Black",Impact,sans-serif;text-transform:uppercase}
h1{
  font-size:clamp(58px,9.8vw,142px);
  letter-spacing:-6px;line-height:.82;
  margin:0;
}
.holo-text{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  background:linear-gradient(90deg,var(--cyan-dark),var(--violet),var(--pink));
  -webkit-background-clip:text;background-clip:text;
}
.byline{
  display:flex;align-items:center;gap:12px;
  margin:21px 0 28px;
  font-size:13px;font-weight:900;letter-spacing:3px;text-transform:uppercase;
}
.byline:after{content:"";height:1px;flex:1;max-width:180px;background:var(--ink)}
.hero-lead{
  max-width:670px;
  font-size:clamp(17px,2vw,24px);
  line-height:1.35;font-weight:650;letter-spacing:-.35px;
  margin:0 0 30px;
}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.hero-side{
  border-left:2px solid var(--line);
  padding-left:clamp(22px,4vw,45px);
}
.logo-frame{
  position:relative;
  background:#fff;border:2px solid var(--line);
  padding:18px;margin-bottom:23px;box-shadow:12px 12px 0 var(--ink);
}
.logo-frame:before{
  content:"HHUT / 2026";position:absolute;left:12px;top:-11px;
  background:var(--paper);padding:2px 8px;font-size:9px;font-weight:900;letter-spacing:1.7px;
}
.logo-frame img{display:block;width:100%;height:auto}
.hero-data{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--line);border-bottom:2px solid var(--line);
}
.hero-data div{padding:15px 7px;border-right:1px solid var(--line)}
.hero-data div:last-child{border-right:0}
.hero-data b{display:block;font-family:"Archivo Black";font-size:23px;line-height:1}
.hero-data span{display:block;margin-top:7px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.card{
  width:min(100%,820px);
  margin:34px auto 0;
  background:rgba(255,255,255,.58);
  border:2px solid var(--line);
  padding:clamp(20px,4vw,42px);
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 10px;
  font-size:clamp(33px,5.5vw,68px);
  line-height:.94;letter-spacing:-2.4px;
}
.muted{color:var(--muted);line-height:1.55}
.btn{
  border:2px solid var(--line);
  min-height:54px;padding:14px 18px;
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1.15px;
  cursor:pointer;transition:.16s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn.primary{
  background:linear-gradient(110deg,var(--cyan),var(--violet) 54%,var(--pink));
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.card>.btn{width:100%;margin-top:10px}
.input{
  width:100%;height:62px;padding:0 17px;margin:16px 0 5px;
  border:2px solid var(--line);background:#fff;color:var(--ink);
  font-size:20px;font-weight:800;outline:none;
}
.input:focus{box-shadow:5px 5px 0 var(--cyan)}
.steps{display:flex;gap:7px;margin:25px auto 0;width:min(100%,820px)}
.steps i{height:7px;flex:1;background:#cbc6c4;border:1px solid var(--line)}
.steps i.on{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:23px}
.option{
  min-height:130px;padding:17px;text-align:left;
  border:2px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;transition:.15s ease;
}
.option:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.option.active{
  background:linear-gradient(135deg,rgba(20,169,155,.18),rgba(122,103,179,.16),rgba(212,61,145,.18));
  box-shadow:6px 6px 0 var(--ink);
}
.option b{display:block;font-family:"Archivo Black";font-size:17px;text-transform:uppercase;margin-bottom:9px}
.option small{color:var(--muted);font-weight:600;line-height:1.45}
.progress{
  width:min(100%,920px);height:11px;margin:20px auto 0;
  border:2px solid var(--line);background:#fff;
}
.progress div{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}
.event-card{
  width:min(100%,920px);padding:0;display:grid;grid-template-columns:.8fr 1.2fr;
  overflow:hidden;background:#fff;
}
.art{
  min-height:540px;padding:27px;
  display:flex;align-items:flex-end;position:relative;
  border-right:2px solid var(--line);
  background:
    linear-gradient(180deg,transparent 35%,rgba(7,8,10,.92)),
    radial-gradient(circle at 20% 18%,rgba(20,169,155,.95),transparent 32%),
    radial-gradient(circle at 85% 34%,rgba(212,61,145,.8),transparent 36%),
    linear-gradient(145deg,var(--violet),#1b1b1f 65%);
}
.art:before{
  content:"HIPHOP LEGACY";position:absolute;top:20px;left:20px;
  color:#fff;font-size:9px;font-weight:900;letter-spacing:2px;
  writing-mode:vertical-rl;
}
.art b{font-family:"Archivo Black";font-size:clamp(34px,5vw,66px);line-height:.9;color:#fff;text-transform:uppercase;letter-spacing:-2px}
.body{padding:clamp(22px,4vw,42px);display:flex;flex-direction:column;justify-content:center}
.choice{
  width:100%;margin-top:9px;text-align:left;
  background:var(--paper);color:var(--ink);
}
.choice small{display:block;color:var(--muted);font-size:10px;letter-spacing:0;text-transform:none;margin-top:5px;font-weight:600}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.stat{padding:11px 12px;background:#fff;border:1.5px solid var(--line)}
.stat-head{display:flex;justify-content:space-between;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.65px;margin-bottom:8px}
.bar{height:7px;background:#d8d3d1;border:1px solid var(--line)}
.bar div{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}
.mini{
  width:min(100%,920px);margin:14px auto 0;
  display:grid;grid-template-columns:repeat(8,1fr);
  background:#fff;border:2px solid var(--line);
}
.mini div{text-align:center;padding:10px 4px;border-right:1px solid var(--line)}
.mini div:last-child{border-right:0}
.mini b{display:block;font-family:"Archivo Black";font-size:18px}
.mini span{display:block;font-size:7px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.45px;margin-top:4px}
.effects{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.effect{padding:8px 10px;border:1.5px solid var(--line);background:#fff;font-size:10px;font-weight:900;text-transform:uppercase}
.good{color:var(--good)}.bad{color:var(--bad)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.meta div{padding:13px;border:1.5px solid var(--line);background:#fff}
.meta small{display:block;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.75px;margin-bottom:5px}
.ending{text-align:center}
.final-logo{width:min(290px,80%);margin:0 auto 18px;display:block}
.ring{
  --score:50;width:152px;height:152px;margin:22px auto;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--cyan) 0 calc(var(--score)*.36%),var(--violet) calc(var(--score)*.36%) calc(var(--score)*.72%),var(--pink) calc(var(--score)*.72%) calc(var(--score)*1%),#d5d0ce 0);
  position:relative;border:2px solid var(--line);
}
.ring:before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.ring b{position:relative;font-family:"Archivo Black";font-size:46px}
.quote{text-align:left;border-left:5px solid var(--cyan);padding:2px 0 2px 16px;line-height:1.65;font-weight:650}
.footer{text-align:center;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-top:18px}

@media(max-width:760px){
  .shell{padding:14px 14px 28px}
  .top{min-height:50px}
  .brand strong{font-size:15px}
  .hero{grid-template-columns:1fr;min-height:auto;padding:34px 0 26px}
  h1{font-size:clamp(57px,19vw,94px);letter-spacing:-4px}
  .hero-side{border-left:0;border-top:2px solid var(--line);padding:28px 0 0}
  .logo-frame{max-width:390px;margin-left:auto;margin-right:auto}
  .hero-data{max-width:390px;margin:auto}
  .card{margin-top:23px;padding:20px}
  .card h2{font-size:38px;letter-spacing:-1.5px}
  .grid{grid-template-columns:1fr}
  .option{min-height:105px}
  .event-card{display:block}
  .art{min-height:290px;border-right:0;border-bottom:2px solid var(--line)}
  .art b{font-size:40px}
  .body{padding:20px}
  .mini{grid-template-columns:repeat(4,1fr)}
  .mini div:nth-child(4){border-right:0}
  .mini div:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:1fr}
}


/* V2 — carrière, ventes, crédibilité, qualité et palmarès */
.career-dashboard{
  width:min(100%,920px);margin:16px auto 20px;padding:15px;
  border:2px solid var(--line);background:rgba(255,255,255,.8);
  display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;gap:12px;
}
.money-live{
  padding:13px;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;min-height:82px;
}
.money-live span{font-size:9px;font-weight:900;letter-spacing:1.2px}
.money-live b{font-family:"Archivo Black";font-size:25px;margin-top:7px}
.career-gauge{padding:11px;border:1.5px solid var(--line);background:#fff}
.gauge-head{display:flex;justify-content:space-between;gap:8px;font-size:9px;font-weight:900;text-transform:uppercase;line-height:1.35}
.gauge-head b{white-space:nowrap}
.gauge-track{height:12px;margin:10px 0 7px;background:#d8d3d1;border:1.5px solid var(--line);overflow:hidden}
.gauge-track i{display:block;height:100%;background:linear-gradient(90deg,#c7a64a,#e8d276,#fff0a1)}
.gauge-track.street i{background:linear-gradient(90deg,#25272b,#08766e,#14a99b)}
.gauge-track.quality i{background:linear-gradient(90deg,var(--violet),var(--pink))}
.career-gauge small{display:block;font-size:7.5px;line-height:1.35;color:var(--muted);font-weight:800}
.section-label{
  margin:24px 0 10px;font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;
  border-bottom:2px solid var(--line);padding-bottom:8px;
}
.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.achievement{min-height:76px;padding:11px;border:1.5px solid var(--line);background:#e5e1df;opacity:.58}
.achievement.unlocked{opacity:1;background:linear-gradient(135deg,rgba(20,169,155,.18),rgba(122,103,179,.18),rgba(212,61,145,.18));box-shadow:3px 3px 0 var(--ink)}
.achievement span{display:block;font-size:7px;font-weight:900;letter-spacing:1px;color:var(--muted);margin-bottom:8px}
.achievement b{font-size:11px;text-transform:uppercase}
.project-release{text-align:left}
.release-score{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line);margin:20px 0 12px}
.release-score div{padding:17px;border-right:1.5px solid var(--line);background:#fff}
.release-score div:last-child{border-right:0}
.release-score small{display:block;font-size:8px;font-weight:900;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.release-score b{font-family:"Archivo Black";font-size:clamp(20px,3vw,31px)}
.project-sales-bar{height:18px;border:2px solid var(--line);background:#d8d3d1;overflow:hidden}
.project-sales-bar i{display:block;height:100%;background:linear-gradient(90deg,#c7a64a,var(--cyan),var(--violet),var(--pink))}
.award-row,.nomination-callout{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid var(--line);background:#fff;padding:13px;margin:8px 0;
}
.award-row span,.nomination-callout span{font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--pink)}
.nomination-callout{display:grid;grid-template-columns:auto 1fr}
.nomination-callout small{grid-column:2;color:var(--muted)}
@media(max-width:900px){
  .career-dashboard{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .career-dashboard{grid-template-columns:1fr}
  .achievement-grid{grid-template-columns:1fr 1fr}
  .release-score{grid-template-columns:1fr}
  .release-score div{border-right:0;border-bottom:1.5px solid var(--line)}
  .release-score div:last-child{border-bottom:0}
}


/* V3 — pochettes générées et choix détaillés */
.project-layout{
  display:grid;
  grid-template-columns:minmax(220px,340px) 1fr;
  gap:28px;
  align-items:center;
  margin-bottom:24px;
}
.project-info h2{margin-top:14px}
.generated-cover{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  border:2px solid var(--line);
  box-shadow:10px 10px 0 var(--ink);
  color:#fff;
  background:
    radial-gradient(circle at 75% 23%,var(--c3),transparent 25%),
    linear-gradient(var(--angle),var(--c1),var(--c2) 58%,var(--c3));
}
.generated-cover:before,
.generated-cover:after{
  content:"";
  position:absolute;
  border:2px solid rgba(255,255,255,.72);
  transform:rotate(-13deg);
}
.generated-cover:before{width:72%;height:72%;left:-18%;top:9%;border-radius:50%}
.generated-cover:after{width:58%;height:58%;right:-22%;bottom:-12%;border-radius:50%}
.cover-noise{
  position:absolute;inset:0;opacity:.23;mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 7px);
}
.cover-ring{
  position:absolute;width:46%;aspect-ratio:1;border:16px double rgba(255,255,255,.55);
  border-radius:50%;right:9%;top:15%;transform:rotate(12deg);
}
.cover-code{
  position:absolute;top:16px;left:16px;font-size:8px;font-weight:900;letter-spacing:1.5px;
  writing-mode:vertical-rl;
}
.cover-initials{
  position:absolute;left:15px;bottom:78px;
  font-family:"Archivo Black";font-size:clamp(54px,8vw,104px);line-height:.8;
  color:transparent;-webkit-text-stroke:2px #fff;opacity:.9;
}
.cover-bottom{
  position:absolute;left:16px;right:16px;bottom:16px;border-top:2px solid rgba(255,255,255,.85);
  padding-top:10px;
}
.cover-bottom small{display:block;font-size:7px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.cover-bottom b{display:block;font-family:"Archivo Black";font-size:clamp(18px,3vw,31px);line-height:.95;text-transform:uppercase;margin-top:5px}
.choice small{font-size:10px;line-height:1.45}
@media(max-width:700px){
  .project-layout{grid-template-columns:1fr}
  .generated-cover{width:min(100%,360px);margin:auto}
}

/* V4 — certifications, classiques, discographie */
.reward-unlocked{margin:14px 0;padding:16px 18px;border:1px solid rgba(20,169,155,.45);background:linear-gradient(135deg,rgba(20,169,155,.14),rgba(122,103,179,.08));display:flex;flex-direction:column;gap:5px}
.reward-unlocked span{font-size:10px;letter-spacing:.16em;font-weight:800;opacity:.72}
.reward-unlocked b{font-size:20px}
.reward-unlocked small{opacity:.7;line-height:1.4}
.reward-unlocked.classic{border-color:rgba(240,199,94,.58);background:linear-gradient(135deg,rgba(240,199,94,.14),rgba(212,61,145,.08))}
.discography-list{display:grid;gap:10px;margin:14px 0 24px}
.discography-row{display:grid;grid-template-columns:minmax(180px,1.4fr) 80px 130px minmax(180px,1fr);gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025)}
.discography-row div{display:flex;flex-direction:column;gap:3px}.discography-row small{opacity:.55;text-transform:uppercase;letter-spacing:.08em}.discography-row b{font-size:16px}.discography-row span{font-weight:750}.discography-row em{font-style:normal;font-size:12px;line-height:1.35;opacity:.78}
.career-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 26px}
.career-stat-grid>div{padding:15px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:7px}.career-stat-grid small{opacity:.58;text-transform:uppercase;letter-spacing:.07em}.career-stat-grid b{font-size:15px;overflow-wrap:anywhere}
@media(max-width:760px){.discography-row{grid-template-columns:1fr 90px}.discography-row em{grid-column:1/-1}.career-stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.discography-row,.career-stat-grid{grid-template-columns:1fr}.discography-row em{grid-column:auto}}

/* V5 — pochettes dynamiques par identité artistique */
.generated-cover{isolation:isolate;overflow:hidden;background:linear-gradient(145deg,var(--c1),var(--c2) 58%,var(--c3));}
.generated-cover:before,.generated-cover:after{display:none}
.generated-cover>div{position:absolute}
.cover-code,.cover-initials,.cover-bottom{z-index:20}
.cover-noise{inset:0;z-index:15;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.cover-city{left:0;right:0;bottom:22%;height:42%;background:linear-gradient(90deg,transparent 0 4%,var(--c3) 4% 10%,transparent 10% 14%,var(--c3) 14% 21%,transparent 21% 27%,var(--c3) 27% 36%,transparent 36% 42%,var(--c3) 42% 49%,transparent 49% 54%,var(--c3) 54% 67%,transparent 67% 72%,var(--c3) 72% 82%,transparent 82% 88%,var(--c3) 88% 96%,transparent 96%);opacity:.22;clip-path:polygon(0 100%,0 62%,7% 62%,7% 28%,13% 28%,13% 55%,20% 55%,20% 12%,28% 12%,28% 66%,38% 66%,38% 35%,45% 35%,45% 51%,55% 51%,55% 18%,64% 18%,64% 59%,74% 59%,74% 31%,83% 31%,83% 49%,91% 49%,91% 20%,100% 20%,100% 100%)}
.cover-tape{z-index:5;background:#eee;color:#111;padding:6px 18px;font:900 11px Inter;letter-spacing:2px;transform:rotate(-10deg);left:-12px;top:22%}
.cover-stamp{right:9%;top:14%;border:3px solid var(--c3);color:var(--c3);padding:8px 10px;font:900 12px Inter;transform:rotate(8deg);opacity:.7}
.cover-silhouette{left:31%;bottom:13%;width:38%;height:67%;background:linear-gradient(var(--c3),#000);clip-path:polygon(39% 0,61% 0,67% 9%,74% 18%,70% 36%,88% 51%,80% 100%,20% 100%,12% 51%,30% 36%,26% 18%,33% 9%);opacity:.88}
.cover-paper{inset:8% 9% 12%;background:var(--c1);box-shadow:0 16px 40px #0006;transform:rotate(-3deg);border:1px solid #0003}
.cover-lines{inset:14% 14% 22%;background:repeating-linear-gradient(to bottom,transparent 0 16px,var(--c2) 17px 18px);opacity:.25;transform:rotate(-3deg)}
.cover-quote{left:16%;top:24%;width:70%;font:900 clamp(22px,4vw,42px) Georgia,serif;color:var(--c2);line-height:.92;transform:rotate(-3deg);z-index:6}
.cover-pen{right:11%;bottom:23%;font-size:76px;color:var(--c3);transform:rotate(-20deg);z-index:7}
.cover-orbit{border:8px solid var(--c3);border-radius:50%;mix-blend-mode:screen;opacity:.55}
.cover-orbit.o1{width:72%;height:72%;left:-14%;top:2%}.cover-orbit.o2{width:48%;height:48%;right:-8%;bottom:8%;border-color:var(--c2)}
.cover-eye{left:26%;top:28%;width:48%;height:25%;border-radius:70% 10% 70% 10%;background:var(--c3);transform:rotate(45deg);box-shadow:0 0 50px var(--c3)}
.cover-eye:after{content:"";position:absolute;width:42%;height:42%;border-radius:50%;background:var(--c1);left:29%;top:29%;box-shadow:inset 0 0 0 9px var(--c2)}
.cover-liquid{left:-12%;right:-12%;bottom:-8%;height:42%;background:radial-gradient(circle at 20% 20%,var(--c3) 0 12%,transparent 13%),radial-gradient(circle at 62% 40%,var(--c2) 0 16%,transparent 17%),linear-gradient(130deg,var(--c2),var(--c3));filter:blur(2px);border-radius:50% 50% 0 0;opacity:.75}
.cover-flash{width:34%;height:34%;background:var(--c3);clip-path:polygon(50% 0,58% 40%,100% 50%,58% 60%,50% 100%,42% 60%,0 50%,42% 40%);filter:drop-shadow(0 0 18px var(--c3))}.cover-flash.f1{left:8%;top:9%}.cover-flash.f2{right:4%;bottom:20%;transform:scale(.65)}
.cover-star{left:34%;top:25%;font-size:110px;color:var(--c2);text-shadow:8px 8px 0 var(--c3);transform:rotate(-12deg)}
.cover-gloss{inset:-30% 42% -30% 22%;background:#fff5;transform:rotate(18deg);filter:blur(16px)}
.cover-grid{inset:0;background:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px);background-size:24px 24px;transform:perspective(250px) rotateX(58deg) translateY(38%);transform-origin:bottom}
.cover-wave{left:6%;right:6%;top:42%;height:18%;background:repeating-linear-gradient(90deg,var(--c3) 0 3px,transparent 3px 9px);clip-path:polygon(0 50%,3% 35%,6% 75%,10% 15%,14% 80%,18% 45%,22% 55%,26% 20%,31% 90%,36% 35%,42% 70%,47% 12%,53% 85%,58% 38%,64% 58%,70% 25%,76% 75%,82% 33%,88% 63%,94% 42%,100% 50%)}
.cover-meter{right:8%;top:11%;font:900 12px monospace;color:var(--c3);border:1px solid var(--c3);padding:5px 8px}
.cover-bars{left:12%;bottom:21%;width:58%;height:18%;background:linear-gradient(90deg,var(--c3) 0 7%,transparent 7% 10%,var(--c3) 10% 22%,transparent 22% 25%,var(--c3) 25% 30%,transparent 30% 34%,var(--c3) 34% 49%,transparent 49% 53%,var(--c3) 53% 61%,transparent 61% 66%,var(--c3) 66% 86%);opacity:.65}
.template-1 .cover-bottom{left:8%;right:8%;text-align:right}.template-2 .cover-initials{font-size:84px;transform:rotate(-90deg);left:-6%;top:36%}.template-3 .cover-code{writing-mode:vertical-rl;right:7%;left:auto;top:8%}.template-4 .cover-bottom{background:#000b;padding:10px}.template-5{filter:saturate(1.25) contrast(1.08)}
.identity-writer .cover-initials{opacity:.08;color:var(--c2)}.identity-psychedelic .cover-initials{mix-blend-mode:overlay}.identity-street .cover-bottom{border-left:4px solid var(--c3);padding-left:10px}

.legacy-callout{margin:20px 0;padding:22px;border:1px solid rgba(109,244,224,.35);background:linear-gradient(135deg,rgba(30,218,201,.12),rgba(141,77,255,.12));text-align:left}
.legacy-callout span{display:block;font-size:11px;letter-spacing:.18em;opacity:.72}.legacy-callout b{display:block;font-size:22px;margin:6px 0}.legacy-callout small{opacity:.75;line-height:1.5}
.gauge-track.happy i{background:linear-gradient(90deg,#e99b37,#f5cf65)}

/* V9 MOBILE — ergonomie tactile et petits écrans */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;overscroll-behavior-y:none}
img,svg,canvas{max-width:100%}
.btn,.option{touch-action:manipulation}

@media (hover:none) and (pointer:coarse){
  .btn:hover,.option:hover{transform:none;box-shadow:none}
  .btn:active,.option:active{transform:scale(.985);opacity:.92}
}

@media(max-width:760px){
  body{background-size:22px 22px}
  .shell{
    width:100%;
    padding:calc(10px + env(safe-area-inset-top)) 12px calc(26px + env(safe-area-inset-bottom));
  }
  .top{
    position:sticky;top:0;z-index:50;
    margin:calc(-10px - env(safe-area-inset-top)) -12px 12px;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:rgba(245,242,240,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .brand{min-width:0}
  .brand strong{font-size:14px;letter-spacing:-.5px;white-space:nowrap}
  .brand small{font-size:7px;letter-spacing:1.4px}
  .brand-chip{width:21px;height:21px;flex:0 0 auto}
  .pill{min-height:29px;padding:5px 8px;font-size:8px;letter-spacing:.7px;white-space:nowrap;max-width:58vw;overflow:hidden;text-overflow:ellipsis}

  .hero{gap:24px;padding:24px 0 18px}
  .kicker{margin-bottom:18px;font-size:9px}
  h1{font-size:clamp(49px,18.5vw,78px);line-height:.86;letter-spacing:-3.5px}
  .byline{font-size:10px;letter-spacing:2px;margin:16px 0 20px}
  .hero-lead{font-size:16px;line-height:1.45;margin-bottom:22px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .hero-actions .btn{width:100%}
  .hero-side{padding-top:22px}
  .logo-frame{box-shadow:7px 7px 0 var(--ink);padding:13px}
  .hero-data b{font-size:19px}.hero-data span{font-size:7px}

  .card{width:100%;margin-top:16px;padding:18px 15px;box-shadow:0 10px 26px rgba(18,18,20,.1)}
  .card h2{font-size:clamp(31px,10vw,43px);line-height:.96;overflow-wrap:anywhere}
  .muted{font-size:14px;line-height:1.55}
  .input{height:58px;font-size:18px}
  .btn{min-height:56px;padding:14px 13px;font-size:11px;line-height:1.25;letter-spacing:.75px;border-width:2px}
  .choice{min-height:66px;margin-top:10px}
  .choice small{font-size:11px;line-height:1.4;margin-top:7px}
  .option{min-height:112px;padding:15px}
  .option b{font-size:16px}.option small{font-size:12px}
  .steps{margin-top:14px;gap:4px}.steps i{height:6px}
  .progress{margin-top:12px;height:10px}

  .career-dashboard{margin:10px auto 14px;padding:10px;grid-template-columns:1fr 1fr;gap:8px}
  .money-live{grid-column:1/-1;min-height:68px;padding:11px}
  .money-live b{font-size:22px;margin-top:5px}
  .career-gauge{padding:9px;min-width:0}
  .gauge-head{font-size:7.5px;letter-spacing:.2px;display:block}
  .gauge-head b{display:block;margin-top:3px;white-space:normal;font-size:11px}
  .gauge-track{height:10px;margin:8px 0 5px}
  .career-gauge small{font-size:7px}

  .event-card{margin-top:12px}
  .art{min-height:215px;padding:20px}
  .art:before{top:14px;left:13px;font-size:7px}
  .art b{font-size:clamp(34px,11vw,47px);max-width:92%;overflow-wrap:anywhere}
  .body{padding:18px 14px 16px}
  .body>.pill{align-self:flex-start}

  .mini{position:relative;grid-template-columns:repeat(4,1fr);margin-top:10px}
  .mini div{padding:9px 2px;min-width:0}
  .mini b{font-size:16px}.mini span{font-size:6px;overflow-wrap:anywhere}

  .stats{gap:8px}.stat{padding:10px}.stat-head{font-size:9px}
  .meta{grid-template-columns:1fr;gap:8px}
  .meta div{padding:12px;overflow-wrap:anywhere}
  .effects{gap:6px;margin:14px 0}.effect{font-size:9px;padding:7px 8px}

  .achievement-grid{grid-template-columns:1fr 1fr;gap:7px}
  .achievement{min-height:70px;padding:9px}.achievement b{font-size:10px}
  .release-score{margin-top:15px}
  .release-score div{padding:14px}
  .award-row,.nomination-callout{align-items:flex-start;padding:11px}

  .project-layout{gap:20px;margin-bottom:16px}
  .generated-cover{width:min(88vw,330px);box-shadow:7px 7px 0 var(--ink)}
  .cover-bottom{left:12px;right:12px;bottom:12px}
  .cover-bottom b{font-size:clamp(19px,7vw,27px)}
  .cover-code{top:12px;left:12px}
  .cover-initials{font-size:clamp(48px,22vw,84px);left:12px;bottom:68px}

  .discography-row{grid-template-columns:1fr!important;gap:8px;padding:12px;border-color:rgba(17,18,20,.18);background:#fff}
  .discography-row em{grid-column:auto!important}
  .career-stat-grid{grid-template-columns:1fr 1fr;gap:7px}
  .career-stat-grid>div{padding:12px;border-color:rgba(17,18,20,.18);background:#fff}
  .legacy-callout{padding:17px}.legacy-callout b{font-size:19px}
  .ring{width:135px;height:135px}.ring b{font-size:40px}
  .quote{font-size:14px}
  .final-logo{width:min(230px,72%)}
  .footer{padding-bottom:env(safe-area-inset-bottom)}
}

@media(max-width:390px){
  .shell{padding-left:9px;padding-right:9px}
  .top{margin-left:-9px;margin-right:-9px;padding-left:9px;padding-right:9px}
  .brand strong{font-size:12.5px}
  .pill{font-size:7.5px;padding-inline:7px}
  .card{padding:16px 12px}
  .career-dashboard{grid-template-columns:1fr}
  .money-live{grid-column:auto}
  .achievement-grid,.career-stat-grid{grid-template-columns:1fr}
  .mini{grid-template-columns:repeat(2,1fr)}
  .mini div:nth-child(2n){border-right:0}
  .mini div:nth-child(n){border-bottom:1px solid var(--line)}
  .mini div:nth-last-child(-n+2){border-bottom:0}
}

@media(orientation:landscape) and (max-height:500px) and (max-width:950px){
  .top{position:relative}
  .art{min-height:180px}
  .hero{grid-template-columns:1.25fr .75fr;align-items:start}
  .hero-side{border-top:0;border-left:2px solid var(--line);padding:0 0 0 22px}
}


/* V10 — présentation publique */
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#111214;color:#fff;transition:opacity .55s ease,visibility .55s ease}
.is-ready .splash{opacity:0;visibility:hidden;pointer-events:none;transition-delay:.65s}
.splash-inner{text-align:center;width:min(76vw,340px)}
.splash-inner img{width:min(72vw,300px);display:block;margin:0 auto 22px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.35))}
.splash-inner strong{display:block;font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(27px,7vw,48px);line-height:.9;letter-spacing:-1.5px}
.splash-inner span{display:block;margin-top:10px;font-size:10px;font-weight:900;letter-spacing:4px;color:#b9b4bd}
.splash-line{height:4px;margin:25px auto 0;overflow:hidden;background:#33343a;border-radius:99px}
.splash-line i{display:block;width:45%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));animation:splashload 1.1s ease-in-out infinite}
@keyframes splashload{from{transform:translateX(-110%)}to{transform:translateX(235%)}}
.home-menu{display:grid;gap:10px;width:min(100%,430px);margin-top:28px}
.home-menu .btn{width:100%}
.home-version{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.modal-backdrop{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px;background:rgba(10,10,13,.78);backdrop-filter:blur(6px)}
.modal-panel{width:min(100%,520px);max-height:88vh;overflow:auto;background:var(--paper);border:2px solid var(--line);box-shadow:12px 12px 0 rgba(255,255,255,.18);padding:24px}
.modal-panel h2{margin:0 0 12px;font-family:"Archivo Black";font-size:34px;text-transform:uppercase;line-height:.95}
.modal-panel p,.modal-panel li{line-height:1.55;color:var(--muted);font-size:14px}
.modal-actions{display:grid;gap:9px;margin-top:20px}
.privacy-note{font-size:9px!important;text-transform:uppercase;letter-spacing:.6px;border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
@media (max-width:720px){
  .hero-actions{display:none}
  .home-menu{margin-top:22px}
  .hero-side{margin-top:8px}
  .hero-data b{font-size:20px}
  .modal-panel{padding:20px 17px}
}


/* V10.1 — retour permanent à l'accueil */
.restart-career-footer{margin:28px auto 8px;padding:22px 0 calc(12px + env(safe-area-inset-bottom));border-top:2px solid var(--line);text-align:center}
.restart-career-footer .restart-career-btn{width:min(100%,520px);background:transparent;color:var(--ink);border:2px solid var(--line);box-shadow:none}
.restart-career-footer .restart-career-btn:hover,.restart-career-footer .restart-career-btn:focus-visible{background:var(--ink);color:#fff;transform:translateY(-1px)}
.restart-career-footer small{display:block;max-width:520px;margin:9px auto 0;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;line-height:1.45}
@media(max-width:720px){.restart-career-footer{margin-top:22px;padding-left:2px;padding-right:2px}.restart-career-footer .restart-career-btn{min-height:54px;font-size:11px}}

/* V13.1 — HUD mobile compact : la question reste immédiatement visible */
.dashboard-icon,.dashboard-label-short{display:none}
.dashboard-label-full{display:inline}

@media(max-width:760px){
  .career-dashboard{
    width:100%;
    margin:6px auto 10px;
    padding:5px 4px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    border-width:1.5px;
    background:rgba(255,255,255,.94);
    box-shadow:0 4px 14px rgba(18,18,20,.08);
  }
  .career-dashboard .dashboard-item,
  .career-dashboard .money-live,
  .career-dashboard .career-gauge{
    grid-column:auto;
    min-width:0;
    min-height:61px;
    margin:0;
    padding:5px 2px 4px;
    border:0;
    border-right:1px solid rgba(18,18,20,.15);
    background:transparent;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }
  .career-dashboard .dashboard-item:last-child{border-right:0}
  .career-dashboard .gauge-head{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    text-align:center;
    line-height:1;
  }
  .career-dashboard .dashboard-icon{
    display:block;
    height:18px;
    margin-bottom:2px;
    font-size:15px;
    line-height:18px;
  }
  .career-dashboard b,
  .career-dashboard .money-live b,
  .career-dashboard .gauge-head b{
    display:block;
    width:100%;
    margin:0 0 3px;
    overflow:hidden;
    color:var(--ink);
    font-family:"Archivo Black",Inter,Arial,sans-serif;
    font-size:clamp(9px,2.8vw,12px);
    line-height:1.05;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .career-dashboard .dashboard-label-full{display:none}
  .career-dashboard .dashboard-label-short{
    display:block;
    width:100%;
    color:var(--muted);
    font-size:clamp(5.5px,1.65vw,7px);
    font-weight:900;
    line-height:1.05;
    letter-spacing:.15px;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .career-dashboard .gauge-track,
  .career-dashboard small{display:none}
  .event-card{margin-top:8px}
}

@media(max-width:360px){
  .career-dashboard{gap:1px;padding-left:2px;padding-right:2px}
  .career-dashboard .dashboard-item,
  .career-dashboard .money-live,
  .career-dashboard .career-gauge{padding-left:1px;padding-right:1px}
  .career-dashboard .dashboard-icon{font-size:14px}
}

/* V13.2 — interface mobile générale plus compacte et question prioritaire */
@media(max-width:760px){
  /* Réduit l'encombrement général de chaque écran */
  .shell{
    padding-left:8px;
    padding-right:8px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .top{
    min-height:42px;
    margin-left:-8px;
    margin-right:-8px;
    margin-bottom:6px;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:6px;
    gap:7px;
    border-bottom-width:1.5px;
  }
  .brand{gap:6px}
  .brand-chip{width:18px;height:18px;border-width:1.5px}
  .brand strong{font-size:11.5px;letter-spacing:-.3px}
  .brand small{font-size:6.5px;letter-spacing:1.1px;margin-top:2px}
  .pill{min-height:23px;padding:4px 7px;font-size:7px;letter-spacing:.55px;border-width:1px}

  /* HUD : une vraie petite barre d'informations */
  .career-dashboard{
    margin:3px auto 6px;
    padding:3px 2px;
    gap:1px;
    border-radius:8px;
  }
  .career-dashboard .dashboard-item,
  .career-dashboard .money-live,
  .career-dashboard .career-gauge{
    min-height:49px;
    padding:3px 1px 2px;
  }
  .career-dashboard .dashboard-icon{
    height:14px;
    margin-bottom:1px;
    font-size:12px;
    line-height:14px;
  }
  .career-dashboard b,
  .career-dashboard .money-live b,
  .career-dashboard .gauge-head b{
    margin-bottom:2px;
    font-size:clamp(8px,2.55vw,10.5px);
  }
  .career-dashboard .dashboard-label-short{
    font-size:clamp(5px,1.45vw,6.2px);
    letter-spacing:0;
  }

  /* La question devient le premier grand contenu visible */
  .event-card{
    display:flex;
    flex-direction:column;
    margin-top:5px;
    border-width:1.5px;
    box-shadow:0 7px 18px rgba(18,18,20,.08);
  }
  .event-card .body{
    order:1;
    padding:12px 10px 11px;
  }
  .event-card .art{
    order:2;
    min-height:72px;
    padding:10px 12px;
    border-right:0;
    border-top:1.5px solid var(--line);
  }
  .event-card .art:before{display:none}
  .event-card .art b{
    max-width:100%;
    font-size:20px;
    line-height:.95;
    letter-spacing:-.8px;
  }
  .event-card .body>.pill{margin-bottom:5px}
  .event-card h2,
  .card h2{
    margin-bottom:6px;
    font-size:clamp(25px,8.3vw,35px);
    line-height:.98;
    letter-spacing:-1.2px;
  }
  .muted{font-size:12px;line-height:1.38}

  /* Choix moins hauts, sans perdre la lisibilité tactile */
  .btn{
    min-height:46px;
    padding:10px 10px;
    font-size:9.5px;
    line-height:1.2;
    letter-spacing:.45px;
  }
  .choice{
    min-height:49px;
    margin-top:6px;
    padding:9px 10px;
  }
  .choice small{
    margin-top:4px;
    font-size:9px;
    line-height:1.25;
  }
  .effects{margin:9px 0;gap:4px}
  .effect{padding:5px 6px;font-size:7.5px;border-width:1px}
  .meta{margin:10px 0;gap:5px}
  .meta div{padding:8px}
  .meta small{font-size:7px;margin-bottom:3px}

  /* Écrans génériques et menus plus serrés */
  .card{
    margin-top:8px;
    padding:12px 10px;
    border-width:1.5px;
  }
  .card>.btn{margin-top:6px}
  .grid{gap:7px;margin-top:12px}
  .option{min-height:82px;padding:10px}
  .option b{font-size:13px;margin-bottom:5px}
  .option small{font-size:10px;line-height:1.3}
  .input{height:48px;margin:9px 0 3px;padding:0 11px;font-size:16px}
  .steps{margin-top:8px}.steps i{height:4px}
  .progress{margin-top:7px;height:7px}

  .mini{margin-top:6px;border-width:1.5px}
  .mini div{padding:6px 2px}
  .mini b{font-size:13px}
  .mini span{font-size:5.5px;margin-top:2px}
  .stats{margin-top:10px;gap:5px}
  .stat{padding:7px;border-width:1px}
  .stat-head{font-size:7.5px;margin-bottom:5px}
  .bar{height:5px;border-width:1px}

  .restart-career-footer{margin-top:12px;padding-top:12px}
  .restart-career-footer .restart-career-btn{min-height:44px}
  .restart-career-footer small{margin-top:5px;font-size:7px}
}

@media(max-width:390px){
  .shell{padding-left:6px;padding-right:6px}
  .top{margin-left:-6px;margin-right:-6px;padding-left:6px;padding-right:6px}
  .career-dashboard .dashboard-label-short{font-size:4.8px}
  .event-card .body{padding:10px 8px}
  .choice{padding:8px;min-height:46px}
}