/* Proposition 2 — aux couleurs d'HYVIA Santé.
   Le noir de Sonolix devient le marine du logo HYVIA (#0e375d → #04203a),
   le néon cyan devient l'ambre du site hyvia-sante.fr (#fbc671),
   les titres passent en Outfit comme sur le site du groupe. */
:root{
  --ink:#04203a;--navy:#0a2e50;--card:#0e375d;--panel:#062846;--win:#0b3152;
  --bgc:4,32,58;--fg:255,255,255;--shd:1,12,24;
  --acc:251,198,113;--neon:#fbc671;--on-acc:#2b1d03;--lum-mid:#ffe2b0;
  --white:#F5F8FB;--g-72:rgba(235,243,250,.82);--g-60:#b2c6d9;--g-45:#86a3bd;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.17);
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --title:Outfit,Inter,-apple-system,system-ui,sans-serif;
}
body{background:linear-gradient(180deg,#0e375d 0,#04203a 720px) no-repeat,#04203a}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em}
.cine h1{letter-spacing:-.035em}
.wordmark{font-family:var(--title);font-weight:800;letter-spacing:-.02em}
.lum{background:linear-gradient(100deg,#fff 8%,#ffe2b0 52%,#fbc671 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{color:var(--neon)}
/* une section sur deux un ton plus clair, comme les bandes du site HYVIA */
#probleme,#metiers,#espace,#comment,#tarif{background:linear-gradient(180deg,#062a4a,#0a3050 50%,#062a4a)}
.sec + .sec{border-top-color:rgba(255,255,255,.06)}
.figs{background:linear-gradient(180deg,#04203a,#0e375d 50%,#04203a)}
/* les cartes deviennent des plaques marine, pas du verre noir */
.card,.tile,.step,.vx,.stats > div,.checks div{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.tabs,.fenetre{border-color:rgba(255,255,255,.16)}
.cli{background:rgba(255,255,255,.03)}
/* Zuri garde sa couleur à elle : le cyan reste pour ce qui est « en direct » */
.live{color:#7fe7f7}.live i{background:#7fe7f7;box-shadow:0 0 10px #7fe7f7}
.tx .z em{color:#7fe7f7}
.tx .z{background:rgba(127,231,247,.1);border-color:rgba(127,231,247,.25)}
.av{background:conic-gradient(from 0deg,#fbc671,#7fe7f7,#fbc671)}
/* le titre en Outfit est plus large : on resserre la colonne pour ne pas mordre sur l'agenda de l'image */
.cine.gauche .txt{max-width:560px}
.cine.gauche .cine-veil{background:linear-gradient(90deg,rgba(4,32,58,.96) 0%,rgba(4,32,58,.86) 36%,rgba(4,32,58,.3) 62%,rgba(4,32,58,.12) 100%),linear-gradient(180deg,transparent 60%,var(--ink) 100%)}
@media (max-width:760px){.cine.gauche .cine-veil{background:linear-gradient(180deg,rgba(4,32,58,.15) 0%,rgba(4,32,58,.35) 28%,rgba(4,32,58,.88) 50%,var(--ink) 100%)}}