/* Accueil public « Vio en avant » (maquette Claude, 19/10/2026). Valeurs reprises de la maquette. */
@font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap;src:url('/marque/outfit-400.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url('/marque/outfit-500.ttf') format('truetype')}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url('/marque/outfit-600.ttf') format('truetype')}
:root[data-theme=dark]{--bg:#121419;--bg2:#171A21;--card:#1C2029;--card2:#252A35;--line:#333949;--text:#F4F1EA;--muted:#B6BAC6;--brand:#FF8A5C;--brandInk:#121419;--accent:#FFD166;--sun:#FFD166;--water:#7CC4FF;--lilac:#C3B1FF;--glow:rgba(255,209,102,.13);--bubble:#FFF8EC;--bubbleInk:#1C1E26}
:root[data-theme=light]{--bg:#FBF8F2;--bg2:#F3EEE4;--card:#FFFFFF;--card2:#F6F1E8;--line:#E2DACB;--text:#1C1E26;--muted:#565B68;--brand:#C2462A;--brandInk:#FFFFFF;--accent:#8A5A00;--sun:#8A5A00;--water:#1F67A6;--lilac:#5E45C8;--glow:rgba(255,209,102,.34);--bubble:#FFFFFF;--bubbleInk:#1C1E26}
html{scroll-behavior:smooth}
html[data-theme] body.va-page{margin:0;background:var(--bg);color:var(--text);font-family:Outfit,'Segoe UI',system-ui,sans-serif}
.va-page a{color:inherit}.va-page a:hover{opacity:.85}
.va-page h1,.va-page h2,.va-page h3{margin:0;font-weight:600}
.va-page p{margin:0}
.va-skip{position:absolute;left:-9999px;top:8px;padding:8px 12px;background:var(--card);border-radius:8px;z-index:10}.va-skip:focus{left:8px}
.va-wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.va-muted{color:var(--muted)}
.va-header{border-bottom:1px solid var(--line)}
.va-header-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.va-brand{display:flex;align-items:center;gap:12px;text-decoration:none}.va-brand img:first-child{height:48px;width:auto}.va-brand .va-logo{height:30px;width:auto}
:root[data-theme=dark] .va-logo-light,:root[data-theme=light] .va-logo-dark{display:none}
.va-nav{display:flex;flex-wrap:wrap;gap:24px;font-size:16px;font-weight:500}.va-nav a{text-decoration:none}
.va-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.va-page .va-theme{position:static;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font:500 15px Outfit,'Segoe UI',system-ui,sans-serif;cursor:pointer}
.va-page .va-theme[hidden]{display:none}
.va-link{text-decoration:none;font-size:16px;padding:10px 8px}
.va-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:14px;background:var(--brand);color:var(--brandInk)!important;text-decoration:none;font-weight:600;font-size:16px}
.va-ghost{display:inline-flex;align-items:center;min-height:56px;padding:0 24px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);text-decoration:none;font-weight:600;font-size:18px}
.va-big{min-height:56px;padding:0 26px;border-radius:16px;font-size:18px;gap:10px}
.va-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.va-note{font-size:15px}
.va-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.va-lead{font-size:19px;line-height:1.55;color:var(--muted)}
.va-brand-text{color:var(--brand);font-weight:600}
.va-hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:56px;padding-bottom:88px}
.va-hero-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:22px}
.va-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--card);border-radius:99px;padding:8px 16px;font-size:15px;font-weight:500}
.va-chip-dot{width:9px;height:9px;border-radius:50%;background:var(--brand)}
.va-hero h1{font-size:clamp(46px,6.2vw,80px);line-height:1;letter-spacing:-.03em}.va-hero h1 span{font-weight:600}
.va-hero .va-lead{font-size:20px;max-width:580px}
.va-hero-art{flex:1 1 460px;min-width:0;position:relative;min-height:600px;display:flex;align-items:flex-end;justify-content:center}
.va-glow{position:absolute;left:50%;top:52%;width:520px;height:520px;max-width:100%;transform:translate(-50%,-50%);border-radius:50%;background:var(--glow)}
.va-ring{position:absolute;left:50%;top:52%;width:420px;height:420px;max-width:86%;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed var(--line)}
.va-confetti{position:absolute;border-radius:50%}.va-c1{left:12%;top:34%;width:14px;height:14px;background:#FFD166}.va-c2{right:14%;top:22%;width:10px;height:10px;background:#7CC4FF}.va-c3{right:22%;bottom:18%;width:18px;height:18px;border-radius:6px;background:#C3B1FF;transform:rotate(18deg)}.va-c4{left:22%;bottom:30%;width:9px;height:9px;background:#FF8A5C}
.va-hero-vio{position:relative;width:360px;max-width:78%;height:auto;margin-bottom:20px}
.va-bubble{background:var(--bubble);color:var(--bubbleInk);border-radius:20px;padding:14px 18px;font-size:16px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.18);max-width:320px}
.va-hero-bubble{position:absolute;top:0;left:0;max-width:300px}
.va-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:99px;padding:10px 16px;font-size:15px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.va-t1{right:0;top:150px}.va-t2{right:8px;top:330px}.va-t3{left:0;bottom:70px}.va-t4{right:16px;bottom:24px}
.va-tag-icon{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.va-bg-water{background:#7CC4FF}.va-bg-sun{background:#FFD166}.va-bg-brand{background:#FF8A5C}.va-bg-lilac{background:#C3B1FF}.va-bg-phone{background:#D6EEF0}.va-bg-wash{background:#F6E3C0}.va-bg-laptop{background:#E4DDF2}
.va-section{padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:40px}
#vio.va-section{padding-top:24px}
.va-section-in{display:flex;flex-direction:column;gap:40px}
.va-intro{display:flex;flex-direction:column;gap:14px;max-width:760px}
.va-intro h2,.va-eng h2,.va-final h2{font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.02em}
.va-cards{display:flex;flex-wrap:wrap;gap:24px}
.va-card{flex:1 1 340px;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:16px}
.va-card h3{font-size:24px}.va-card .va-muted{font-size:16px;line-height:1.55}
.va-card-art{width:150px;height:150px;border-radius:26px;background:var(--card2);display:flex;align-items:flex-end;justify-content:center;position:relative}
.va-card-art img{height:145px;width:auto;max-width:100%;display:block}
.va-dot{position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%}.va-dot.va-water{background:#7CC4FF}.va-dot.va-sun{background:#FFD166}.va-dot.va-brand{background:#FF8A5C}.va-dot.va-lilac{background:#C3B1FF}
.va-flip{transform:scaleX(-1)}
.va-status{align-self:flex-start;font-size:13px;font-weight:600;border-radius:99px;padding:4px 12px;border:1.5px solid var(--line)}
.va-status-beta{color:var(--water);border-color:var(--water)}.va-status-soon{color:var(--muted)}
.va-quote{margin-top:auto;display:flex;gap:10px;align-items:flex-start;background:var(--card2);border-radius:16px;padding:12px 14px;font-size:15px;line-height:1.45}.va-quote span:first-child{font-weight:600;color:var(--brand);white-space:nowrap}
.va-band{background:var(--bg2);padding-top:96px;padding-bottom:96px}
.va-demo{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.va-window{flex:999 1 560px;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:28px;overflow:hidden}
.va-window-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.va-window-bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}.va-window-bar em{font-style:normal;margin-left:8px}
.va-window-body{padding:28px;display:flex;flex-direction:column;gap:18px}
.va-window-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.va-window-head div{display:flex;flex-direction:column}.va-hello{font-size:30px;font-weight:600}.va-window-head img{height:71px;width:auto}
.va-tabs{display:flex;flex-wrap:wrap;gap:8px}
.va-tabs button{min-height:44px;padding:0 18px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--text);font:500 15px Outfit,'Segoe UI',system-ui,sans-serif;cursor:pointer}
.va-tabs button[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:var(--brandInk);font-weight:600}
.va-page [data-panel][hidden]{display:none}
.va-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.va-row-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.va-row-icon.va-small{width:40px;height:40px;border-radius:12px}
.va-grow{flex-grow:1;min-width:0;display:flex;flex-direction:column}.va-grow strong{font-size:17px}.va-grow span{font-size:14px;color:var(--muted)}
.va-pill{border:1.5px solid;border-radius:10px;padding:6px 10px;font-size:14px;font-weight:500;white-space:nowrap}.va-pill.va-water{color:var(--water)}.va-pill.va-accent{color:var(--accent)}.va-pill.va-lilac{color:var(--lilac)}
.va-cost{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}.va-cost-top{display:flex;align-items:center;gap:12px}.va-num{font-variant-numeric:tabular-nums}
.va-bar{height:10px;border-radius:99px;background:var(--card2)}.va-bar span{display:block;height:10px;border-radius:99px;background:var(--water)}.va-w62{width:62%}.va-w52{width:52%}.va-w90{width:90%}
.va-small-text{font-size:14px;display:block}
.va-care{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.va-box{width:28px;height:28px;border-radius:8px;border:2px solid;flex-shrink:0}.va-box.va-brand{color:var(--brand)}.va-box.va-water{color:var(--water)}.va-box.va-lilac{color:var(--lilac)}
.va-demo-vio{flex:1 1 300px;min-width:0}.va-demo-vio>div{display:flex;flex-direction:column;align-items:center;gap:18px}.va-demo-vio img{height:246px;width:auto;max-width:100%}
.va-steps{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px}
.va-step{flex:1 1 180px;min-width:0;list-style:none;background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px}.va-step p{font-size:15px;line-height:1.5}
.va-step-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.va-step-head span{width:26px;height:26px;border-radius:50%;border:2px solid;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.va-step-head.va-water{color:var(--water)}.va-step-head.va-sun{color:var(--sun)}.va-step-head.va-accent{color:var(--accent)}.va-step-head.va-muted{color:var(--muted)}.va-step-head.va-lilac{color:var(--lilac)}
.va-step-art{display:flex;justify-content:center}.va-step-art img{height:123px;width:auto;max-width:100%}
.va-eng{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.va-eng-art{flex:1 1 320px;min-width:0;display:flex;justify-content:center}.va-eng-glow{width:300px;height:300px;max-width:100%;border-radius:50%;background:var(--glow);display:flex;align-items:center;justify-content:center}.va-eng-glow img{height:246px;width:auto;max-width:100%}
.va-eng-copy{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.va-list{margin:0;padding:0;display:flex;flex-direction:column;gap:20px}.va-list li{list-style:none;display:flex;gap:14px;align-items:flex-start}.va-list strong{display:block;font-size:20px}.va-list .va-muted{font-size:16px;line-height:1.5}
.va-check{width:36px;height:36px;border-radius:12px;background:var(--brand);color:var(--brandInk);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.va-who{display:flex;flex-wrap:wrap;gap:24px}
.va-who-card{flex:1 1 420px;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:28px;padding:28px;display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.va-who-card>div{flex:1 1 240px;display:flex;flex-direction:column;gap:12px}.va-who-card h3{font-size:28px}.va-who-card .va-muted{font-size:17px;line-height:1.55}.va-who-card p:last-child{font-size:15px}.va-who-card img{height:156px;width:auto}
.va-final-wrap{padding-bottom:96px}
.va-final{background:var(--card);border:1.5px solid var(--line);border-radius:36px;padding:40px 48px;display:flex;flex-wrap:wrap;align-items:center;gap:40px}.va-final img{width:200px;height:auto}.va-final>div{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:16px}
.va-footer{border-top:1px solid var(--line)}.va-footer-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;padding-bottom:28px;font-size:15px;color:var(--muted)}.va-footer nav{display:flex;flex-wrap:wrap;gap:20px}
@keyframes vioFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.vio-float{animation:vioFloat 5s ease-in-out infinite}.va-flip.vio-float{animation:none}
@media (prefers-reduced-motion:reduce){.vio-float{animation:none}html{scroll-behavior:auto}}
@media (max-width:720px){.va-wrap{padding-left:16px;padding-right:16px}.va-nav{display:none}.va-hero{padding-top:32px;gap:24px}.va-hero-art{min-height:440px}.va-tag{font-size:13px;padding:8px 12px}.va-t1{top:120px}.va-t2{top:250px}.va-t4{right:0;bottom:16px}.va-final{padding:28px 20px}.va-section,.va-band{padding-top:64px;padding-bottom:64px}.va-card-art{width:120px;height:120px}.va-card-art img{height:116px}}