/* VELYON — design system Liquid Glass (jetons, verre, composants) et tableau de bord.
   Chargé après les styles d'origine : les autres écrans gardent leur mise en page et reçoivent seulement la palette. */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---------- 1. Jetons ---------- */
:root:root:root{
  /* Palette relevée sur la vidéo de référence (sélecteur renforcé : ces jetons priment sur les thèmes d'origine) */
  --vl-corail:#D8432E; --vl-corail-c:#E8664C; --vl-corail-f:#BC3522; --vl-sable:#EFDFD2; --vl-creme:#F8EEE5; --vl-brun:#2B1A12; --vl-brun-2:#5B4336; --vl-terre:#A65C46; --vl-noir:#17100C;
  --vl-texte:#2B1A12; --vl-texte-2:#5B4336; --vl-texte-3:#6F5647; --vl-blanc-2:rgb(255 255 255 / .86);
  /* Verre */
  --vl-verre:linear-gradient(145deg,rgb(255 246 238 / .74),rgb(250 232 218 / .56));
  --vl-verre-fort:linear-gradient(145deg,rgb(255 248 241 / .86),rgb(250 234 221 / .72));
  --vl-flou:blur(22px) saturate(150%);
  --vl-bord:rgb(255 255 255 / .58);
  --vl-ombre:0 1px 1px rgb(70 30 10 / .08),0 14px 34px -10px rgb(70 30 10 / .34);
  --vl-ombre-haut:0 2px 2px rgb(70 30 10 / .08),0 26px 50px -14px rgb(70 30 10 / .44);
  --vl-reflet:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 -1px 0 rgb(120 60 30 / .10),inset 1px 0 0 rgb(255 255 255 / .22);
  /* Formes et rythme */
  --vl-r1:24px; --vl-r2:18px; --vl-r3:13px; --vl-g:16px;
  --vl-rail:252px; --vl-rail-p:70px; --vl-marge:14px;
  --vl-ressort:cubic-bezier(.22,1.14,.36,1); --vl-sortie:cubic-bezier(.16,1,.3,1);
  /* Passerelle : les écrans non encore refondus reçoivent la palette VELYON sans changer de structure */
  --bg:transparent; --surface:rgb(255 248 241 / .82); --sunken:rgb(247 232 220 / .7); --fg:#2B1A12; --muted:#5B4336; --line:rgb(120 70 40 / .2);
  --hero:#CC3F2A; --hero-fg:#fff; --hero-muted:rgb(255 255 255 / .86); --hero-track:rgb(255 255 255 / .26); --hero-chip:rgb(255 255 255 / .16);
  --font-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --glass-bg:rgb(255 246 238 / .68); --glass-border:rgb(255 255 255 / .58); --glass-edge:rgb(90 45 20 / .14); --glass-hi:rgb(255 255 255 / .8); --glass-gloss:rgb(255 255 255 / .4);
  --glass-shadow:0 6px 18px rgb(70 30 10 / .16),0 1px 2px rgb(70 30 10 / .08);
  color-scheme:light;
}
:root:root:root:not([data-palette="tendre"]){--accent:#C93A26;--accent-text:#A92E1D;--accent-fg:#fff;--accent-soft:rgb(216 67 46 / .13)}
html{background:#A97C5C}
body{background:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--vl-texte)}
.app-bg{display:none!important}

/* ---------- 2. Fond : pièce chaude et floue, dont les masses sombres passent derrière le verre ---------- */
.vl-fond{position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict;
  background:radial-gradient(62% 46% at 82% 8%,#F4E2CF 0,rgb(244 226 207 / 0) 72%),radial-gradient(42% 50% at 102% 62%,#EFD2B9 0,rgb(239 210 185 / 0) 70%),radial-gradient(40% 36% at 42% 100%,#D9B190 0,rgb(217 177 144 / 0) 75%),linear-gradient(128deg,#A5775A 0,#BE9272 44%,#C9A183 70%,#AE8265 100%)}
.vl-fond i{position:absolute;display:block;border-radius:50%;will-change:transform;transform:translate(var(--px,0),var(--py,0));transition:transform 1.1s var(--vl-sortie)}
.vl-fond .a{width:46vw;height:42vh;left:30%;top:22%;background:radial-gradient(closest-side,rgb(52 28 18 / .62),rgb(52 28 18 / 0))}
.vl-fond .b{width:40vw;height:46vh;left:-8%;top:58%;background:radial-gradient(closest-side,rgb(40 20 12 / .72),rgb(40 20 12 / 0));transition-duration:1.5s}
.vl-fond .c{width:34vw;height:30vh;left:64%;top:-6%;background:radial-gradient(closest-side,rgb(92 52 32 / .5),rgb(92 52 32 / 0));transition-duration:1.9s}
.vl-fond::after{content:"";position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 3. Verre ---------- */
.vl-verre{position:relative;background:var(--vl-verre);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--vl-bord);box-shadow:var(--vl-reflet),var(--vl-ombre);border-radius:var(--vl-r1)}
/* Reflet qui suit la souris (ordinateur) */
.vl-spec{position:relative}
.vl-spec::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .28s ease;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / .42),rgb(255 255 255 / 0) 68%)}
.vl-spec:hover::before{opacity:1}
.vl-spec > *{position:relative;z-index:1}
.vl-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .36s var(--vl-ressort),box-shadow .3s ease}
.vl-tilt:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--vl-reflet),var(--vl-ombre-haut)}
.vl-tilt:active{transform:perspective(900px) translateY(-1px) scale(.985);transition-duration:.09s}
.vl-onde{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .7),rgb(255 255 255 / 0));pointer-events:none;z-index:3}

/* Boutons */
.vl-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid transparent;font:600 13.5px/1 var(--font-body);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;overflow:hidden;transition:transform .26s var(--vl-ressort),background .2s,box-shadow .2s;position:relative}
.vl-pill svg{width:16px;height:16px;flex:none}
.vl-pill:active{transform:scale(.96)!important;transition-duration:.08s}
.vl-pill.noir{background:var(--vl-noir);color:#fff;box-shadow:0 8px 20px -6px rgb(20 10 5 / .6),inset 0 1px 0 rgb(255 255 255 / .18)}
.vl-pill.noir:hover{background:#2A1C14}
.vl-pill.blanc{background:#fff;color:var(--vl-corail-f);box-shadow:0 8px 18px -8px rgb(60 15 5 / .6)}
.vl-pill.contour{background:rgb(255 255 255 / .1);color:#fff;border-color:rgb(255 255 255 / .55)}
.vl-pill.contour:hover{background:rgb(255 255 255 / .2)}
.vl-pill.contour-sombre{background:rgb(255 248 241 / .75);color:var(--vl-texte);border-color:rgb(120 70 40 / .3)}
:focus-visible{outline:2.5px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgb(30 15 8 / .75)!important}

/* Groupes à indicateur « liquide » */
.vl-ind{position:absolute;left:0;top:0;display:block;transform-origin:0 0;pointer-events:none;opacity:0}
.vl-seg,#app .filter{position:relative;display:inline-flex;gap:0;padding:4px;border-radius:999px;background:rgb(255 248 241 / .5);border:1px solid rgb(255 255 255 / .5);box-shadow:inset 0 1px 2px rgb(70 30 10 / .12);flex:none}
.vl-seg .vl-ind,#app .filter > .vl-ind{top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--vl-noir);box-shadow:0 4px 10px -2px rgb(20 10 5 / .5);z-index:0}
.vl-seg button,#app .filter button{position:relative;z-index:1;background:none!important;border:0!important;box-shadow:none!important;min-height:32px;padding:0 13px;border-radius:999px;font:600 12.5px/1 var(--font-body);color:var(--vl-texte-2);cursor:pointer;transition:color .2s;white-space:nowrap;-webkit-backdrop-filter:none;backdrop-filter:none}
.vl-seg button[aria-pressed="true"],#app .filter button[aria-pressed="true"]{color:#fff}
#app .filter button span{background:none!important;color:inherit;opacity:.72;font-variant-numeric:tabular-nums;font-weight:600;padding:0;min-width:0}
.vl-rond{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgb(255 255 255 / .72);border:1px solid rgb(255 255 255 / .7);box-shadow:0 2px 8px rgb(70 30 10 / .14);color:var(--vl-texte);cursor:pointer;transition:transform .25s var(--vl-ressort)}
.vl-rond svg{width:16px;height:16px}.vl-rond:hover{transform:scale(1.08)}.vl-rond:active{transform:scale(.94)}

/* Compteurs à rouleaux */
.vl-rl{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:baseline;margin-bottom:-.06em;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.vl-rl-c{display:block}.vl-rl-c b{display:block;height:1em;line-height:1;font-weight:inherit}
[data-vl-n]{font-variant-numeric:tabular-nums}

/* ---------- 4. Navigation latérale ---------- */
#vl-rail{position:fixed;left:var(--vl-marge);top:var(--vl-marge);bottom:var(--vl-marge);width:var(--vl-rail);z-index:6;display:none;flex-direction:column;gap:10px;padding:14px 12px;border-radius:var(--vl-r1);color:#fff;overflow:hidden;
  background:linear-gradient(172deg,rgb(172 96 72 / .78),rgb(124 66 48 / .74));-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border:1px solid rgb(255 255 255 / .26);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 22px 44px -16px rgb(50 20 8 / .6);transition:width .46s var(--vl-ressort)}
#vl-dock{display:none}
.vl-r-tete{display:flex;align-items:center;gap:10px;min-height:40px;padding-left:4px}
.vl-r-tete img{flex:none;border-radius:11px;box-shadow:0 4px 10px rgb(40 15 5 / .4)}
#vl-rail .tx{white-space:nowrap;transition:opacity .22s ease;min-width:0}
.vl-r-tete .tx b{display:block;font-size:14px;letter-spacing:.09em;font-weight:750}.vl-r-tete .tx small{display:block;font-size:11px;color:var(--vl-blanc-2)}
.vl-r-plier{margin-left:auto;width:26px;height:26px;flex:none;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:var(--vl-terre);cursor:pointer;box-shadow:0 2px 8px rgb(40 15 5 / .35);transition:transform .35s var(--vl-ressort)}
.vl-r-plier svg{width:14px;height:14px}.vl-r-plier:hover{transform:scale(1.1)}
.vl-r-cherche{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 11px;border-radius:12px;border:1px solid rgb(255 255 255 / .22);background:rgb(70 30 18 / .28);color:#fff;font:500 13px var(--font-body);cursor:pointer;transition:background .2s;flex:none}
.vl-r-cherche:hover{background:rgb(70 30 18 / .42)}
.vl-r-cherche .ic{display:grid;place-items:center;width:20px;flex:none}.vl-r-cherche svg{width:17px;height:17px}
.vl-r-cherche kbd{margin-left:auto;font:600 10.5px var(--font-body);padding:3px 6px;border-radius:6px;background:rgb(255 255 255 / .16);color:#fff}
.vl-r-grp{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.vl-r-grp::-webkit-scrollbar{display:none}
.vl-r-t{margin:12px 0 4px 10px;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--vl-blanc-2)}
.vl-nav{position:relative;z-index:1;display:flex;align-items:center;gap:11px;min-height:38px;padding:0 11px;border-radius:12px;border:0;background:none;color:#fff;text-decoration:none;font:500 13.5px var(--font-body);cursor:pointer;overflow:hidden;flex:none;transition:color .2s,background .18s,transform .22s var(--vl-ressort);text-align:left;width:100%;box-sizing:border-box}
.vl-nav:hover{background:rgb(255 255 255 / .12)}.vl-nav:active{transform:scale(.97)}
.vl-nav .ic{display:grid;place-items:center;width:20px;flex:none}.vl-nav svg{width:18px;height:18px}
.vl-nav[aria-current="page"]{color:var(--vl-brun);font-weight:650}
.vl-nav[aria-current="page"]:hover{background:none}
.vl-nav em{margin-left:auto;font:700 10.5px var(--font-body);min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#fff;color:var(--vl-corail-f)}
#vl-r-grp > .vl-ind{left:0;right:0;width:100%;border-radius:12px;z-index:0;background:rgb(255 255 255 / .94);box-shadow:0 6px 16px -4px rgb(40 15 5 / .5),inset 0 1px 0 #fff}
.vl-refraction #vl-r-grp > .vl-ind{background:linear-gradient(180deg,rgb(255 255 255 / .86),rgb(255 255 255 / .74));-webkit-backdrop-filter:url(#vl-refr) blur(2px) saturate(1.5);backdrop-filter:url(#vl-refr) blur(2px) saturate(1.5)}
.vl-r-pied{display:flex;align-items:center;gap:10px;padding:8px 2px 0 4px;border-top:1px solid rgb(255 255 255 / .18);flex:none}
.vl-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 11.5px var(--font-body);background:rgb(255 255 255 / .22);border:1px solid rgb(255 255 255 / .42);color:#fff}
.vl-r-pied b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.vl-r-pied small{display:block;font-size:11px;color:var(--vl-blanc-2)}
body.vl-rail-plie #vl-rail{width:var(--vl-rail-p)}
body.vl-rail-plie #vl-rail .tx{opacity:0;pointer-events:none}
body.vl-rail-plie .vl-r-t{height:1px;margin:7px 8px;background:rgb(255 255 255 / .2);overflow:hidden;color:transparent;opacity:1!important}
body.vl-rail-plie .vl-r-plier{position:absolute;right:-1px;top:48px;transform:rotate(180deg);width:22px;height:22px}
body.vl-rail-plie .vl-nav em{position:absolute;right:3px;top:2px;margin:0;min-width:15px;height:15px;font-size:9.5px;padding:0 3px}
body.vl-rail-plie .vl-r-tete{padding-left:5px}
body.vl-rail-plie .vl-r-cherche{padding:0 11px;justify-content:flex-start}

@media (min-width:1024px){
  body.vl-pret #vl-rail{display:flex}
  body.vl-pret #app{margin-left:calc(var(--vl-rail) + var(--vl-marge));transition:margin-left .46s var(--vl-ressort)}
  body.vl-pret.vl-rail-plie #app{margin-left:calc(var(--vl-rail-p) + var(--vl-marge))}
}
@media (min-width:821px) and (max-width:1023.98px){
  body.vl-pret #vl-rail{display:flex;width:var(--vl-rail-p)}
  body.vl-pret #vl-rail .tx{opacity:0;pointer-events:none}
  body.vl-pret .vl-r-t{height:1px;margin:7px 8px;background:rgb(255 255 255 / .2);overflow:hidden;color:transparent;opacity:1!important}
  body.vl-pret .vl-r-plier{display:none}
  body.vl-pret #app{margin-left:calc(var(--vl-rail-p) + var(--vl-marge))}
}
/* Barre flottante au pouce (téléphone) */
@media (max-width:820.98px){
  body.vl-pret #vl-dock{display:block;position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;width:min(calc(100vw - 24px),430px)}
  .vl-d-grp{position:relative;display:flex;justify-content:space-between;padding:6px;border-radius:26px;background:rgb(70 34 22 / .78);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgb(255 255 255 / .25);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 16px 34px -10px rgb(30 12 4 / .7)}
  .vl-d-grp > .vl-ind{top:6px;height:calc(100% - 12px);border-radius:20px;background:#fff;left:0}
  .vl-d-grp button{position:relative;z-index:1;flex:1;min-height:48px;border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:20px;font:600 10px var(--font-body);cursor:pointer}
  .vl-d-grp button svg{width:20px;height:20px}.vl-d-grp .ic{display:grid;place-items:center}
  .vl-d-grp button[aria-current="page"]{color:var(--vl-brun)}
  .vl-d-grp button:active{transform:scale(.94)}
  body.vl-pret #app{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body:has(input:focus,textarea:focus,select:focus) #vl-dock,body:has(#sheet-root .sheet) #vl-dock{display:none}
}
.vl-test #vl-dock{display:none!important}
.vl-test body.vl-pret #app{padding-bottom:0}

/* ---------- 5. En-tête du tableau de bord ---------- */
#app header.vl-tete{position:relative;top:auto;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#app .vl-tete .wrap,#app main.vl-tab.wrap{max-width:1420px}
#app .vl-tete .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-block:18px 8px}
.vl-titre{flex:1 1 280px;min-width:0}
#app .vl-salut{margin:0 0 3px;font-size:13px;font-weight:550;color:var(--vl-noir)}
#app .vl-tete h1{margin:0;font:700 clamp(28px,2.8vw,38px)/1.08 var(--font-display);letter-spacing:-.03em;color:var(--vl-noir);text-align:left}
.vl-mot{display:inline-block}
.vl-tete-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#app .vl-tete .icon-btn{width:40px;height:40px;background:rgb(255 248 241 / .6);border:1px solid rgb(255 255 255 / .6);color:var(--vl-texte);box-shadow:0 2px 8px rgb(70 30 10 / .14)}
#app .vl-tete .sync{background:rgb(255 248 241 / .6);color:var(--vl-texte);border:1px solid rgb(255 255 255 / .55)}
.vl-test-pill{min-height:30px;padding:0 11px;border-radius:999px;border:1px dashed rgb(43 26 18 / .55);background:rgb(255 225 120 / .78);color:#3a2605;font:650 11.5px var(--font-body);cursor:pointer}

/* ---------- 6. Mise en page ---------- */
#app main.vl-tab{display:flex;flex-direction:column;gap:var(--vl-g);padding-bottom:40px;padding-top:6px}
.vl-rangee{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:var(--vl-g)}
.vl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vl-g)}
.vl-graphes{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:var(--vl-g)}
.vl-priorites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--vl-g);align-items:start}
.vl-cartes{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--vl-g)}

/* Résumé en verre corail */
#app .vl-hero{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:26px 28px;border-radius:var(--vl-r1);color:#fff;overflow:hidden;margin:0;background:linear-gradient(128deg,#CE3E2A 0,#C93A26 46%,#AE3220 100%);border:1px solid rgb(255 255 255 / .32);box-shadow:inset 0 1px 0 rgb(255 255 255 / .42),0 26px 50px -18px rgb(120 30 10 / .7)}
#app .vl-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 90% at 84% -12%,rgb(255 180 150 / .42),transparent 70%),radial-gradient(60% 80% at 92% 110%,rgb(70 10 0 / .22),transparent 70%)}
.vl-hero-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vl-badge{display:inline-flex;align-items:center;gap:7px;min-height:24px;padding:0 10px;border-radius:999px;background:rgb(255 255 255 / .2);font:600 11.5px var(--font-body);text-transform:capitalize}
.vl-badge i{width:6px;height:6px;border-radius:50%;background:#fff}
#app .vl-hero h2{margin:2px 0 0;font:650 clamp(24px,2.5vw,34px)/1.12 var(--font-display);letter-spacing:-.025em;color:#fff}
.vl-hero-sous{margin:0;font-size:14px;line-height:1.45;color:#fff;max-width:58ch}.vl-hero-sous b{font-weight:650}
.vl-hero-chiffres{display:flex;flex-wrap:wrap;row-gap:8px;margin:6px 0 4px}
.vl-hero-chiffres > div{padding:0 20px;border-left:1px solid rgb(255 255 255 / .34)}
.vl-hero-chiffres > div:first-child{padding-left:0;border:0}
.vl-hero-chiffres b{display:block;font:650 24px/1.1 var(--font-display);letter-spacing:-.02em}
.vl-hero-chiffres span:not(.vl-rl):not(.vl-rl-s){display:block;font-size:11.5px;color:#fff;margin-top:2px}
.vl-hero-cta{display:flex;flex-wrap:wrap;gap:8px}
.vl-ring{--tr:clamp(150px,13vw,190px);position:relative;width:var(--tr);height:var(--tr);flex:none;margin:18px 24px}
.vl-ring-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 8px 14px rgb(90 15 0 / .4))}
.vl-ring-svg circle{fill:none;stroke-width:8}
.vl-ring-svg .fond{stroke:rgb(255 255 255 / .24)}.vl-ring-svg .val{stroke:#fff;stroke-linecap:round}
.vl-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18%}
.vl-ring-c b{font:650 clamp(26px,2.6vw,34px)/1 var(--font-display);letter-spacing:-.03em}.vl-ring-c small{font-size:.5em;font-weight:600}
.vl-ring-c > span{font-size:10.5px;line-height:1.2;margin-top:4px;color:#fff}
.vl-orbite{position:absolute;inset:0;pointer-events:none}
.vl-bulle{--o:calc(var(--tr) / 2 + 1px);position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;padding:0;pointer-events:auto;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;cursor:pointer;color:var(--vl-corail-f);background:#FFF3EB;box-shadow:0 6px 14px -3px rgb(80 15 0 / .55);transform:rotate(var(--a)) translateX(var(--o)) rotate(calc(var(--a) * -1));transition:transform .3s var(--vl-ressort),box-shadow .2s}
.vl-bulle b{display:block;font:700 12px var(--font-body)}
.vl-bulle:hover{transform:rotate(var(--a)) translateX(calc(var(--o) + 4px)) rotate(calc(var(--a) * -1)) scale(1.16);z-index:2}
.vl-bulle:active{transform:rotate(var(--a)) translateX(var(--o)) rotate(calc(var(--a) * -1)) scale(.94)}

/* Carte du jour */
.vl-jour{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--vl-verre-fort)}
.vl-jour-tete{display:flex;align-items:center;gap:12px}
.vl-jour-n{font:700 44px/1 var(--font-display);letter-spacing:-.04em;color:var(--vl-corail-f)}
.vl-jour-tete strong{display:block;font-size:14.5px;font-weight:650;text-transform:capitalize}.vl-jour-tete div span{display:block;font-size:12px;color:var(--vl-texte-2);text-transform:capitalize}
.vl-jour-tete .vl-rond{margin-left:auto}
.vl-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.vl-sem span{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 8px;border-radius:11px;color:var(--vl-texte-2);background:rgb(255 255 255 / .34)}
.vl-sem small{font-size:9.5px;font-weight:600;text-transform:uppercase}.vl-sem b{font-size:13px;font-weight:650;color:var(--vl-texte)}
.vl-sem i{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%}.vl-sem i.plein{background:var(--vl-corail)}
.vl-sem span.on{background:linear-gradient(170deg,var(--vl-corail-c),var(--vl-corail-f));color:#fff;box-shadow:0 6px 12px -4px rgb(150 40 20 / .7)}
.vl-sem span.on b{color:#fff}.vl-sem span.on i.plein{background:#fff}
.vl-jour-l{margin:2px 0 -4px;font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--vl-texte-2)}
.vl-jour-list{display:flex;flex-direction:column;gap:6px}
.vl-evt{position:relative;overflow:hidden;display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:8px 10px;border-radius:12px;border:1px solid rgb(255 255 255 / .55);background:rgb(255 255 255 / .55);cursor:pointer;color:var(--vl-texte);transition:transform .24s var(--vl-ressort),background .18s}
.vl-evt:hover{background:rgb(255 255 255 / .8);transform:translateX(3px)}
.vl-evt time{font:650 12px var(--font-body);color:var(--vl-corail-f);font-variant-numeric:tabular-nums;padding-right:10px;border-right:2px solid var(--vl-corail)}
.vl-evt b{display:block;font-size:13px;font-weight:600;line-height:1.25}.vl-evt small{display:block;font-size:11.5px;color:var(--vl-texte-2);line-height:1.25}
.vl-vide-mini{margin:0;font-size:13px;color:var(--vl-texte-2)}

/* Chiffres clés */
.vl-stat{display:flex;flex-direction:column;padding:16px;min-height:158px;border-radius:var(--vl-r1);box-sizing:border-box;will-change:auto}
.vl-stat-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgb(255 255 255 / .78);color:var(--vl-texte);box-shadow:0 2px 8px rgb(70 30 10 / .14)}
.vl-stat-ic svg{width:17px;height:17px}
.vl-stat-v{margin-top:12px;font:680 clamp(26px,2.5vw,34px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--vl-noir)}
.vl-stat-l{margin-top:4px;font-size:13px;font-weight:650;color:var(--vl-texte)}
.vl-stat-s{font-size:11.5px;color:var(--vl-texte-2);line-height:1.3}
.vl-tend{position:absolute!important;top:16px;right:16px;font:700 11px var(--font-body);padding:4px 8px;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--vl-corail-f)}
.vl-accent{color:#fff;background:linear-gradient(145deg,#CE3E2A,#B93422);border:1px solid rgb(255 255 255 / .3);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 18px 34px -12px rgb(130 30 10 / .7)}
.vl-accent .vl-stat-v,.vl-accent .vl-stat-l,.vl-accent .vl-stat-s{color:#fff}
.vl-accent .vl-stat-ic{color:var(--vl-corail-f);background:#fff}
.vl-mini{margin-top:auto;padding-top:10px;min-height:38px;display:flex;align-items:flex-end}
.vl-m-barres{display:flex;align-items:flex-end;gap:4px;height:34px;width:100%}
.vl-m-barres i{flex:1;max-width:18px;height:var(--h);min-height:3px;border-radius:4px 4px 1px 1px;background:var(--vl-corail);transform-origin:bottom}
.vl-m-jauge{width:100%;height:8px;border-radius:5px;background:rgb(90 45 20 / .16);overflow:hidden}
.vl-m-jauge i{display:block;width:var(--p);height:100%;border-radius:5px;background:var(--vl-corail);transform-origin:left}
.vl-m-points{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-end}
.vl-m-points i{width:10px;height:10px;border-radius:50%;background:var(--vl-corail)}.vl-m-points i.ok{background:var(--vl-brun-2)}
.vl-spark{width:100%;height:34px;overflow:visible}.vl-spark path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* Raccourcis */
#app .vl-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin:0;padding:0;background:none;border:0}
#app .vl-actions .hm-tile{position:relative;overflow:hidden;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;min-height:56px;padding:9px 14px 9px 10px;border-radius:999px;background:var(--vl-verre);border:1px solid var(--vl-bord);box-shadow:var(--vl-reflet),0 8px 18px -8px rgb(70 30 10 / .35);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);color:var(--vl-texte);cursor:pointer;transition:transform .28s var(--vl-ressort),background .2s,box-shadow .2s}
#app .vl-actions .hm-tile:hover{transform:translateY(-2px);background:var(--vl-verre-fort)}
#app .vl-actions .hm-tile:active{transform:scale(.97);transition-duration:.08s}
#app .vl-actions .hm-tile .gi{grid-row:1 / 3;width:34px;height:34px;margin:0;display:grid;place-items:center;border-radius:50%;background:rgb(255 255 255 / .82);color:var(--vl-corail-f);border:0;box-shadow:0 2px 6px rgb(70 30 10 / .16);-webkit-backdrop-filter:none;backdrop-filter:none}
#app .vl-actions .hm-tile .gi svg{width:17px;height:17px;color:var(--vl-corail-f);stroke:currentColor;filter:none}
#app .vl-actions .hm-tile .t{font:650 13px/1.2 var(--font-body);color:var(--vl-texte);margin:0;white-space:normal}
#app .vl-actions .hm-tile .s{font:400 11.5px/1.25 var(--font-body);color:var(--vl-texte-2);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .ia-barre{border-radius:var(--vl-r2);margin:0;background:linear-gradient(100deg,#21130C,#3B2115 55%,#6B3620);box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 14px 26px -12px rgb(30 10 4 / .7);color:#fff;border:0;transition:transform .28s var(--vl-ressort)}
#app .ia-barre:hover{transform:translateY(-2px)}

/* Graphiques */
.vl-graphe,.vl-repart{padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:var(--vl-verre-fort)}
.vl-graphe header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
#app .vl-graphes h2{margin:0;font:650 16px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--vl-texte)}
.vl-graphes p{margin:2px 0 0;font-size:12.5px;color:var(--vl-texte-2)}
.vl-courbe{position:relative;display:grid;grid-template-columns:38px 1fr;grid-template-rows:230px 22px}
.vl-y{position:relative}.vl-y span{position:absolute;right:8px;transform:translateY(50%);font-size:11px;color:var(--vl-texte-2);font-variant-numeric:tabular-nums}
.vl-plot{position:relative;cursor:crosshair;touch-action:pan-y}
.vl-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vl-grille i{position:absolute;left:0;right:0;height:1px;background:rgb(90 45 20 / .13)}
.vl-plot .ligne{fill:none;stroke:var(--vl-corail);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vl-croix i{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:rgb(43 26 18 / .4)}
.vl-croix u{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--vl-corail);border:2px solid #fff;box-shadow:0 2px 6px rgb(70 30 10 / .4);box-sizing:border-box}
.vl-info{position:absolute;z-index:2;transform:translate(-50%,-100%);margin-top:-6px;padding:6px 10px;border-radius:10px;background:var(--vl-noir);color:#fff;pointer-events:none;white-space:nowrap;box-shadow:0 8px 18px -6px rgb(20 10 5 / .7)}
.vl-info small{display:block;font-size:10.5px;color:rgb(255 255 255 / .84);text-transform:capitalize}.vl-info b{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.vl-x{grid-column:2;position:relative}.vl-x span{position:absolute;top:6px;transform:translateX(-50%);font-size:11px;color:var(--vl-texte-2);white-space:nowrap}
.vl-x span:first-child{transform:none}.vl-x span:last-child{transform:translateX(-100%)}
.vl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.vl-donut{display:flex;flex-direction:column;gap:12px;align-items:center}
.vl-d-rond{position:relative;width:170px;height:170px}
.vl-d-rond svg{width:100%;height:100%;display:block;overflow:visible}
.vl-d-rond g{transform-origin:80px 80px;transform:rotate(-90deg)}
.vl-d-rond .seg{fill:none;stroke-width:17;cursor:pointer;transition:opacity .2s}
.vl-d-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 34px;pointer-events:none}
.vl-d-c b{font:680 18px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--vl-noir)}.vl-d-c span{font-size:10.5px;line-height:1.2;color:var(--vl-texte-2);margin-top:2px}
.vl-d-leg{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:2px}
.vl-d-leg li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;font-size:12.5px;cursor:default;transition:opacity .2s,background .2s}
.vl-d-leg li:hover{background:rgb(255 255 255 / .5)}
.vl-d-leg i{width:10px;height:10px;border-radius:3px;flex:none}.vl-d-leg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vl-texte)}
.vl-d-leg b{font-weight:650;font-variant-numeric:tabular-nums;color:var(--vl-texte)}
.vl-eteint{opacity:.32}

/* Priorités : on réutilise les composants d'origine, restylés */
#app .vl-priorites .alertes,#app .vl-priorites .pending{margin:0;padding:16px;border-radius:var(--vl-r1);background:var(--vl-verre-fort);border:1px solid var(--vl-bord);box-shadow:var(--vl-reflet),var(--vl-ombre);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
#app .vl-priorites .section-head{margin:0 0 8px}
#app .vl-priorites .section-head h2{font:650 16px/1.25 var(--font-display);color:var(--vl-texte)}
#app .vl-priorites .pending-card{background:rgb(255 255 255 / .55);border:1px solid rgb(255 255 255 / .55);border-radius:12px;box-shadow:none;transition:transform .24s var(--vl-ressort),background .18s}
#app .vl-priorites .pending-card:hover{transform:translateX(3px);background:rgb(255 255 255 / .8)}
.vl-charger-test{align-self:flex-start}

/* Liste des chantiers */
.vl-liste-tete{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 0}
#app .vl-liste-tete .search{flex:1 1 240px;width:auto;min-height:40px;border-radius:999px;background:rgb(255 248 241 / .66);border:1px solid rgb(255 255 255 / .55);color:var(--vl-texte);padding-inline:16px;font-size:14px;margin:0}
#app .vl-liste-tete .search::placeholder{color:var(--vl-texte-3)}
.vl-carte{position:relative;min-width:0}
#app .vl-cartes .card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;margin:0;text-align:left;overflow:hidden;border-radius:22px;color:var(--vl-texte);background:linear-gradient(145deg,rgb(255 248 241 / .94),rgb(250 234 221 / .88));border:1px solid var(--vl-bord);box-shadow:var(--vl-reflet),var(--vl-ombre);-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer}
.vl-c-visuel{position:relative;display:block;height:124px;overflow:hidden;flex:none;color:rgb(255 255 255 / .55);background:linear-gradient(135deg,#C96A4F,#8E4B35 62%,#5E3423)}
.vl-c-visuel[data-cat="Plomberie"]{background:linear-gradient(135deg,#B8664D,#7D432F 60%,#4F2C1E)}
.vl-c-visuel[data-cat="Chauffage"]{background:linear-gradient(135deg,#E4704F,#B23E28 60%,#6E2415)}
.vl-c-visuel[data-cat="Sanitaire"]{background:linear-gradient(135deg,#6F9AA1,#4C7379 58%,#334F54)}
.vl-c-visuel[data-cat="Ventilation"]{background:linear-gradient(135deg,#94917F,#6B6A5A 58%,#46463B)}
.vl-c-visuel[data-cat="Climatisation"]{background:linear-gradient(135deg,#7E9EB2,#577689 58%,#3A5262)}
.vl-c-visuel[data-cat="Construction"]{background:linear-gradient(135deg,#C49A63,#946F40 58%,#5F4628)}
.vl-c-visuel[data-cat="Rénovation"]{background:linear-gradient(135deg,#B58A6E,#86624C 58%,#553D2E)}
.vl-c-scene{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s var(--vl-sortie)}
.vl-c-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--vl-sortie)}
.card:hover .vl-c-scene,.card:hover .vl-c-img{transform:scale(1.06)}
.vl-c-tags{position:absolute;left:10px;top:10px;right:44px;display:flex;flex-wrap:wrap;gap:5px}
.vl-c-cat,.vl-c-gen{font:650 10.5px/1 var(--font-body);padding:5px 8px;border-radius:999px}
.vl-c-cat{background:rgb(255 255 255 / .94);color:var(--vl-brun)}
.vl-c-gen{background:rgb(20 10 5 / .62);color:#fff}
.vl-c-corps{display:flex;gap:10px;padding:13px 15px 12px;flex:1;align-items:flex-start;min-width:0}
#app .vl-cartes .cd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .vl-cartes .cd-top h2{margin:0;font:650 15.5px/1.25 var(--font-display);letter-spacing:-.012em;color:var(--vl-texte)}
#app .vl-cartes .cd-sub{display:block;font-size:12px;line-height:1.3;color:var(--vl-texte-2)}
#app .vl-cartes .cd-step{font-size:12px;line-height:1.3;color:var(--vl-texte-2);margin-top:3px}
#app .vl-cartes .cd-warn{color:var(--vl-corail-f);font-weight:650}
.vl-c-pct b{font:680 19px/1 var(--font-display);letter-spacing:-.02em;color:var(--vl-noir);white-space:nowrap}.vl-c-pct small{font-size:.58em;font-weight:600}
.vl-c-barre{display:block;height:4px;background:rgb(90 45 20 / .14);flex:none}
.vl-c-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--vl-corail-c),var(--vl-corail-f));transform-origin:left;border-radius:0 3px 3px 0}
.vl-c-photo{position:absolute;right:9px;top:9px;z-index:2;width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:rgb(20 10 5 / .55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .24s var(--vl-ressort),background .2s,opacity .2s}
.vl-c-photo svg{width:15px;height:15px}.vl-c-photo:hover{transform:scale(1.12);background:rgb(20 10 5 / .78)}
@media (hover:hover){.vl-c-photo{opacity:0}.vl-carte:hover .vl-c-photo,.vl-c-photo:focus-visible{opacity:1}}
.vl-tab .empty{color:var(--vl-brun);background:rgb(255 248 241 / .6);border-radius:var(--vl-r2);padding:18px;margin:0;grid-column:1 / -1}

/* Corrections de cascade : les styles d'origine imposaient colonne et centrage sur ces blocs */
#app .vl-hero{flex-direction:row;text-align:left}
#app .vl-cartes .card{align-items:stretch;justify-content:flex-start}
.vl-c-visuel,.vl-c-barre,.vl-c-corps{width:100%;box-sizing:border-box}
#app .vl-liste-tete{flex-direction:row;justify-content:flex-start}
#app .vl-liste-tete .search{height:40px;max-height:40px;align-self:center}
#app .vl-actions .hm-tile{grid-column:auto!important;width:auto}
#app .vl-actions .hm-tile .t,#app .vl-actions .hm-tile .s{display:block;grid-column:2;text-align:left;max-width:100%;align-self:end}
#app .vl-actions .hm-tile .s{align-self:start}
#app .vl-tete .icon-btn svg{color:var(--vl-texte);stroke:currentColor}
#app .vl-tete .icon-btn .gi,#app .vl-tete .icon-btn::before{display:none}
#app .vl-tab .install,#app .vl-tab .install > *{background:none}
#app .vl-tab .install{background:var(--vl-verre-fort);border:1px solid var(--vl-bord);border-radius:var(--vl-r2);box-shadow:var(--vl-reflet),var(--vl-ombre);color:var(--vl-texte)}
#app .vl-tab .install *{color:var(--vl-texte)}
#app .vl-tab .install .btn,#app .vl-tab .install button.primary{background:var(--vl-noir);color:#fff;border:0}
#app .vl-priorites .section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#app .vl-priorites .section-head h2{flex:0 1 auto}
#app .vl-priorites .count{flex:none;width:auto;background:var(--vl-noir);color:#fff;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;display:inline-grid;place-items:center;border-radius:11px;font-size:12px;font-weight:650}
#app .vl-priorites .alerte.done .ln-titre,#app .vl-priorites .alerte.done *{color:var(--vl-texte-2)}
#app .vl-cartes .vl-c-scene,.vl-morph-v svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;position:absolute;inset:0}
#app .vl-priorites .section-head h2{text-transform:none;letter-spacing:-.01em}
#app .vl-priorites .pending-card span:not(.lpill){color:var(--vl-texte-2)}
#app .vl-priorites .pending-card b{color:var(--vl-texte)}

#app .vl-priorites .pending-card > div{min-width:0;flex:1}
#app .vl-priorites .pending-card > div > *{white-space:normal;overflow-wrap:anywhere}

/* ---------- 7. Palette de commandes ---------- */
.vl-palette-fond{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgb(30 14 6 / .38);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.vl-palette{width:min(620px,100%);border-radius:var(--vl-r1);overflow:hidden;background:linear-gradient(150deg,rgb(255 248 241 / .92),rgb(250 234 221 / .84));-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border:1px solid rgb(255 255 255 / .7);box-shadow:var(--vl-reflet),0 40px 80px -20px rgb(30 12 4 / .7);color:var(--vl-texte)}
.vl-p-champ{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgb(90 45 20 / .15)}
.vl-p-champ svg{width:19px;height:19px;flex:none;color:var(--vl-texte-2)}
.vl-p-champ input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px var(--font-body);color:var(--vl-texte)}
.vl-p-champ input::placeholder{color:var(--vl-texte-3)}
.vl-palette kbd{font:600 11px var(--font-body);padding:4px 7px;border-radius:6px;background:rgb(90 45 20 / .12);color:var(--vl-texte-2)}
#vl-p-res{list-style:none;margin:0;padding:6px;max-height:min(52vh,420px);overflow-y:auto}
#vl-p-res li{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;cursor:pointer}
#vl-p-res li[aria-selected="true"]{background:var(--vl-noir);color:#fff}
#vl-p-res li[aria-selected="true"] small{color:rgb(255 255 255 / .82)}
#vl-p-res .ic{display:grid;place-items:center;width:20px;flex:none}#vl-p-res svg{width:17px;height:17px}
#vl-p-res .tx{flex:1;min-width:0}#vl-p-res b{display:block;font-size:13.5px;font-weight:600}#vl-p-res small{display:block;font-size:11.5px;color:var(--vl-texte-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vl-p-res em{font:650 12px var(--font-body);font-variant-numeric:tabular-nums}
#vl-p-res .vide{color:var(--vl-texte-2);cursor:default}

/* ---------- 8. Transitions ---------- */
@property --vl-r{syntax:"<length>";inherits:false;initial-value:0px}
.vl-iris{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;background:#0E0806;--vl-r:0px;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--vl-r) - 120px),#000 var(--vl-r));mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--vl-r) - 120px),#000 var(--vl-r))}
.vl-iris-marque{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.vl-iris-marque span{font:600 14px var(--font-body);letter-spacing:.42em;color:#F1E3D8;padding-left:.42em}
.vl-fantome{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.vl-fantome *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.vl-morph{position:fixed;inset:0;z-index:30;pointer-events:none;background:linear-gradient(128deg,#CE3E2A,#C93A26 46%,#AE3220);will-change:clip-path}
.vl-morph-v{position:absolute;inset:0;color:rgb(255 255 255 / .22)}
.vl-morph-v svg,.vl-morph-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl-morph-v img{opacity:.4}
.vl-morph-t{position:fixed;z-index:31;color:#fff;pointer-events:none;transform-origin:0 0;font-family:var(--font-display);letter-spacing:-.012em}

/* Préchauffage sous le voile d'ouverture : le processeur graphique prépare flou et verre avant que l'écran ne se dévoile */
.vl-chauffe .vl-seq{filter:blur(8px);opacity:.99}

/* ---------- 9. Écran de code ---------- */
#lock.lock{background:radial-gradient(70% 60% at 50% 18%,#6A3B27,#26140D 72%,#150B07)!important}
#lock .lock-card{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#lock .lock-logo{background:none;box-shadow:none;border:0}
#lock h1{color:#fff;font:600 19px var(--font-display);letter-spacing:.36em;padding-left:.36em}
#lock .lock-sub{color:#F1E3D8}
#lock .keypad button{background:linear-gradient(150deg,rgb(255 255 255 / .2),rgb(255 255 255 / .07));border:1px solid rgb(255 255 255 / .28);color:#fff;font-family:var(--font-body);font-weight:500;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 8px 18px -8px rgb(0 0 0 / .6);transition:transform .22s var(--vl-ressort),background .15s}
#lock .keypad button:hover{background:linear-gradient(150deg,rgb(255 255 255 / .3),rgb(255 255 255 / .12))}
#lock .keypad button:active{transform:scale(.93);transition-duration:.07s}

/* ---------- 10. Passerelle des autres écrans ---------- */
#app .hero-band{background:linear-gradient(128deg,#CE3E2A,#C93A26 46%,#AE3220)!important;border-radius:var(--vl-r1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),0 22px 40px -16px rgb(120 30 10 / .7)}
#app > header.top:not(.vl-tete){background:rgb(255 244 234 / .72)!important;border-bottom:1px solid rgb(255 255 255 / .45);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%)}
#app main:not(.vl-tab) :is(.suivi,.lignes,.totals,.tabs,.pt-bar,.panel,.pli-seul,.tab-corps > .pli,.install){background:linear-gradient(145deg,rgb(255 248 241 / .9),rgb(250 234 221 / .82))!important;border-color:rgb(255 255 255 / .6);-webkit-backdrop-filter:blur(18px) saturate(115%)!important;backdrop-filter:blur(18px) saturate(115%)!important;color:var(--vl-texte)}
#app .hero-band .cursor{--c-fill:#fff;--c-thumb:var(--vl-corail-f);--c-track:rgb(255 255 255 / .28)}
#app .hero-band .cursor .fill{box-shadow:none}
#app .hero-band :is(.eyebrow,.hero-addr,.hero-addr a,.hero-foot,.hero-foot span){color:#fff}
#app .hero-band .map{background:rgb(255 255 255 / .2);color:#fff}
#app .hero-band h2,#app .hero-band .ring span,#app .hero-band .ring small{color:#fff}
#app main:not(.vl-tab) .section-head h2{color:var(--vl-noir)}
#app .hero-band .ring svg circle:last-of-type{stroke:#fff}

/* ---------- 11. Adaptations ---------- */
@media (max-width:1180px){
  .vl-rangee,.vl-graphes{grid-template-columns:minmax(0,1fr)}
  .vl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vl-jour-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
  .vl-donut{flex-direction:row;flex-wrap:wrap;justify-content:center}.vl-d-leg{flex:1 1 220px;width:auto}
}
@media (max-width:640px){
  :root{--vl-g:12px;--vl-r1:20px}
  #app .vl-hero{flex-direction:column;align-items:stretch;padding:20px}
  .vl-ring{--tr:150px;align-self:center;margin:26px auto 22px}
  .vl-bulle{width:34px;height:34px;margin:-17px 0 0 -17px}
  .vl-hero-chiffres > div{padding:0 14px}
  .vl-nouveau span{display:none}.vl-nouveau{padding:0;width:36px;min-height:36px;height:36px}
  #app .vl-tete .wrap{flex-wrap:wrap;padding-block:12px 4px;gap:6px}
  .vl-titre{flex:1 1 0;min-width:170px}
  .vl-tete-act{gap:5px;flex-wrap:nowrap}
  .vl-test-pill{position:absolute;right:16px;top:2px;min-height:20px;font-size:10px;padding:0 7px}
  #app .vl-tete .icon-btn{width:36px;height:36px}
  #app .vl-tete h1{font-size:26px}
  #app .vl-salut{font-size:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vl-stat{min-height:146px;padding:14px}
  .vl-c-visuel{height:104px}
  .vl-seg button{padding:0 10px}
  .vl-courbe{grid-template-rows:180px 22px;grid-template-columns:32px 1fr}
  .vl-graphe,.vl-repart{padding:15px}
  #app .filter{width:100%;box-sizing:border-box}#app .filter button{flex:1}
}
@media (max-width:360px){
  #app .filter button{padding:0 6px;font-size:12px}
  .vl-hero-chiffres > div{padding:0 10px}
  .vl-seg button{padding:0 8px;font-size:12px}
}
/* Appareils modestes : moins de flou, jamais de lecture dégradée */
.vl-leger .vl-verre,.vl-leger #app .vl-cartes .card,.vl-leger #app .vl-actions .hm-tile,.vl-leger #vl-rail,.vl-leger .vl-priorites > *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--vl-creme)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vl-verre,#app .vl-cartes .card,#app .vl-actions .hm-tile{background:var(--vl-creme)}#vl-rail{background:#8E4C38}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .vl-tilt:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){.vl-verre,#app .vl-cartes .card,#app .vl-actions .hm-tile{background:var(--vl-creme);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){.vl-ind{background:Highlight!important}.vl-verre,#app .vl-hero,.vl-stat{border:1px solid CanvasText}}