/* Proposition 4 — « la nuit de Zuri ».
   Le noir reste (Gautier l'adore), mais il n'est plus celui de Sonolix :
   noir-sarcelle au lieu du bleu-noir, turquoise de la tenue de Zuri (#2dd5dc)
   et menthe de sa bulle (#a1dfda) au lieu du néon cyan, titres ronds en Outfit,
   et un héros construit autour de la bulle de Zuri plutôt qu'une photo plein cadre. */
:root{
  --ink:#03141A;--navy:#061D24;--card:#0A262E;--panel:#05191F;--win:#0A242B;
  --bgc:3,20,26;--fg:255,255,255;--shd:0,6,8;
  --acc:45,213,220;--neon:#2DD5DC;--on-acc:#022426;--lum-mid:#A1DFDA;
  --mint:#A1DFDA;--violet:#A78BFA;
  --white:#F1FAF9;--g-72:rgba(226,246,244,.78);--g-60:#9DBDBA;--g-45:#6E8F8C;
  --line:rgba(161,223,218,.10);--line-2:rgba(161,223,218,.18);
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --title:Outfit,Inter,-apple-system,system-ui,sans-serif;
}
body{background:var(--ink)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em}
.wordmark{font-family:var(--title);font-weight:700;letter-spacing:-.02em}
.lum{background:linear-gradient(100deg,#fff 6%,#BDF4EE 48%,#2DD5DC 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.figs{background:radial-gradient(60% 120% at 50% 50%,rgba(45,213,220,.07),transparent 70%),var(--ink)}
.btn-neon{background:linear-gradient(135deg,#5EE6E3,#2DD5DC 55%,#1FB8C0);box-shadow:0 10px 36px -12px rgba(45,213,220,.7)}
.card,.tile,.step,.vx,.stats > div,.checks div{background:linear-gradient(180deg,rgba(161,223,218,.06),rgba(161,223,218,.015))}
.av{background:conic-gradient(from 0deg,#A1DFDA,#A78BFA,#2DD5DC,#A1DFDA)}
.tx .z{background:rgba(45,213,220,.1);border-color:rgba(161,223,218,.28)}
/* les sections respirent sur un fond qui s'éclaire à peine, comme la lueur de la bulle */
#metiers,#voix,#tarif{background:radial-gradient(70% 60% at 50% 0%,rgba(45,213,220,.06),transparent 70%)}

/* ══ HÉROS : la bulle de Zuri ══ */
.hb{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 97px);display:flex;align-items:center;padding:clamp(40px,6vh,90px) 0}
.hb::before{content:"";position:absolute;right:-10%;top:50%;width:min(1100px,90vw);height:min(1100px,90vw);transform:translateY(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(45,213,220,.16),rgba(167,139,250,.05) 55%,transparent 72%)}
.hb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(161,223,218,.18) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 60% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 70% 50%,#000,transparent 75%)}
.hb .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;max-width:1320px}
.hb h1{font-size:clamp(2.6rem,min(5.2vw,7.6vh),4.8rem);letter-spacing:-.035em;margin-top:20px}
.hb .lead{margin-left:0;max-width:52ch;color:var(--g-72)}
.hb .acts{justify-content:flex-start}
.hb .hint{color:var(--g-60)}
.bulle{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto}
.bulle .ring{position:absolute;border-radius:50%;inset:0;border:1px solid rgba(161,223,218,.22)}
.bulle .ring.r2{inset:9%;border-color:rgba(161,223,218,.12)}
.bulle .orbit{position:absolute;inset:0;border-radius:50%;animation:tourne 26s linear infinite}
.bulle .orbit.o2{inset:9%;animation-duration:18s;animation-direction:reverse}
.bulle .orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px var(--mint)}
.bulle .orbit i:nth-child(1){top:14%;right:14%}
.bulle .orbit i:nth-child(2){bottom:3%;left:50%;width:7px;height:7px;background:var(--violet);box-shadow:0 0 14px var(--violet)}
.bulle .orbit.o2 i:nth-child(1){top:50%;right:-4px;left:auto;background:var(--neon)}
.bulle .disc{position:absolute;inset:19%;border-radius:50%;padding:6px;
  background:conic-gradient(from 200deg,#A1DFDA,#2DD5DC,#A78BFA,#A1DFDA);
  box-shadow:0 0 0 10px rgba(45,213,220,.06),0 0 90px -10px rgba(45,213,220,.55),0 40px 120px -30px rgba(0,0,0,.8)}
.bulle .disc img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 12%;transform:scale(1.18);transform-origin:50% 12%;
  border:3px solid var(--ink);clip-path:circle(50%)}
.bulle .disc .mask{position:absolute;inset:6px;border-radius:50%;overflow:hidden;border:3px solid var(--ink)}
.bulle .disc .mask img{border:0;transform:scale(1.22)}
.bulle .plate{position:absolute;left:50%;top:1.5%;margin:0;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;
  padding:9px 16px;border-radius:999px;background:rgba(5,25,31,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2)}
.bulle .plate b{font-family:var(--title);font-size:1.05rem;font-weight:700}
.bulle .plate span{font-size:.78rem;color:var(--g-60)}
.bulle .call{position:absolute;left:-8%;bottom:6%;width:min(300px,60%);padding:14px 14px 12px}
.bulle .call .tx{min-height:0;padding:10px 0 2px}
.bulle .call .tx li{font-size:.8rem;padding:8px 11px}
.bulle .call .call-top{padding-bottom:10px}
.bulle .call .av{width:36px;height:36px}
.bulle .badge{position:absolute;right:-4%;top:30%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 16px;border-radius:18px;
  background:rgba(5,25,31,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2)}
.bulle .badge b{font-family:var(--title);font-size:1.7rem;line-height:1;letter-spacing:-.03em;color:var(--mint)}
.bulle .badge span{font-size:.7rem;color:var(--g-60);white-space:nowrap}
@media (max-width:980px){
  .hb .grid{grid-template-columns:1fr}
  .hb .vis{order:-1}
  .bulle{width:min(420px,92%)}
  .bulle .call{left:-4%;bottom:2%;width:58%}
}
@media (max-width:560px){
  .hb{padding-top:18px}
  .bulle .call{display:none}
  .bulle .badge{right:0}
}