/* Site vitrine MyUniko : accueil, fonctionnalités, tarifs, pages d'information. Couleurs et polices de la charte (myuniko.css). */
.v-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.v-skip{position:absolute;left:-9999px;top:8px;background:var(--nuit);color:#fff;padding:10px 14px;border-radius:8px;z-index:20}.v-skip:focus{left:8px}
a.btn{text-decoration:none}
/* ---- en-tête */
.v-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.v-top-in{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.v-brand{display:flex;align-items:center;gap:10px;font:700 22px var(--font-h);color:var(--nuit);text-decoration:none}.v-brand b i{font-style:normal;color:var(--teal)}
.v-nav{display:flex;gap:4px;margin-left:12px;flex:1}
.v-nav a{padding:9px 12px;border-radius:9px;color:var(--nuit);font-weight:600;font-size:14px;text-decoration:none}
.v-nav a:hover{background:var(--brume)}.v-nav a[aria-current=page]{background:var(--menthe);color:#0B5453}
.v-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ambre);outline-offset:2px}
/* ---- accueil : première partie */
.v-hero{background:var(--brume);padding:56px 0 64px;overflow:hidden}
.v-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.v-hero h1{font:700 clamp(36px,5.4vw,60px)/1.04 var(--font-h);letter-spacing:-.02em;color:var(--nuit);max-width:14ch}
.v-lead{font-size:18px;line-height:1.55;color:var(--txt2);max-width:52ch;margin:18px 0 0}
.v-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.v-cta .btn.lg{width:auto;padding:0 26px}
.v-ticks{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:8px 22px;flex-wrap:wrap;font-weight:700;font-size:13.5px;color:var(--nuit)}
.v-ticks li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ambre);margin-right:8px}
.v-shot{margin:0}
/* maquette du planning */
.v-plan-mock{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 22px;box-shadow:0 30px 70px -20px rgba(16,41,45,.28)}
.v-pm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.v-pm-head b{font:700 17px var(--font-h)}.v-pm-head span{font-size:12.5px;color:var(--txt2);font-weight:600}
.v-pm-days,.v-pm-row{display:grid;grid-template-columns:42px 1fr;align-items:center}
.v-pm-days{grid-template-columns:42px repeat(7,1fr);font-size:11.5px;font-weight:700;color:var(--txt2);text-align:center;margin-bottom:6px}
.v-pm-row{margin-top:8px}.v-pm-row em{font:700 13px var(--font);font-style:normal;color:var(--nuit)}
.v-pm-track{position:relative;height:36px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--brume) 0 calc(100%/7 - 2px),#fff calc(100%/7 - 2px) calc(100%/7))}
.v-pm-track s{position:absolute;top:4px;bottom:4px;border-radius:8px;background:var(--c);color:#fff;text-decoration:none;display:flex;align-items:center;padding:0 10px;font-size:12.5px;font-weight:700;overflow:hidden;white-space:nowrap}
.v-pm-track s span{overflow:hidden;text-overflow:ellipsis}
.b1{left:0;width:57.14%}.b2{left:14.28%;width:57.14%}.b3{left:28.57%;width:42.85%}.b4{left:57.14%;width:42.86%}
.v-pm-grow{position:absolute;top:-9px;left:calc(14.28% + 57.14% - 4px);transform:translateX(-100%);background:var(--nuit);color:#fff;text-decoration:none;font:700 11px var(--font);padding:3px 8px;border-radius:999px}
.v-pm-toast{position:absolute;right:-14px;bottom:-22px;display:flex;align-items:center;gap:10px;background:var(--nuit);color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 14px 30px rgba(16,41,45,.35)}
.v-pm-toast .ic{width:22px;height:22px;color:var(--ambre)}.v-pm-toast b{color:#fff}
@keyframes v-grow{from{width:28.57%}to{width:57.14%}}
@keyframes v-pop{from{opacity:0}to{opacity:1}}
.b2{animation:v-grow 1.2s .9s cubic-bezier(.3,.7,.2,1) both}.v-pm-grow{animation:v-pop .4s 1.9s both}
@media (prefers-reduced-motion:reduce){.b2,.v-pm-grow{animation:none}}
/* ---- bande « sur le terrain » */
.v-field{background:var(--nuit);color:#fff;padding:64px 0}
.v-field h2{font:700 clamp(26px,3.4vw,38px)/1.12 var(--font-h);max-width:22ch;color:#fff}
.v-field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:34px}
.v-field-grid h3{font:700 21px var(--font-h);color:var(--ambre);margin-bottom:8px}.v-field-grid p{margin:0;color:#C9DDDA;line-height:1.6;font-size:15.5px}
.v-field-grid>div+div{border-left:1px solid #2B4A4F;padding-left:40px}
/* ---- sections */
.v-sec{padding:72px 0}.v-tint{background:var(--menthe)}.v-tight{padding-top:40px}
.v-sec h2,.v-faq-wrap h2,.v-end h2{font:700 clamp(26px,3.2vw,36px)/1.12 var(--font-h);letter-spacing:-.01em}
.v-sub{margin:8px 0 0;font-size:16px}
.v-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.v-split-head p{margin:12px 0 22px;font-size:16px;max-width:36ch}
.v-rows{list-style:none;margin:0;padding:0}
.v-rows li{border-top:1px solid var(--line2)}.v-rows li:last-child{border-bottom:1px solid var(--line2)}
.v-rows a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;padding:20px 4px;text-decoration:none;color:var(--nuit)}
.v-rows a:hover{background:#fff}.v-rows b{font:700 18px var(--font-h)}.v-rows span{color:var(--txt2);font-size:14.5px;line-height:1.5}
.v-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.v-steps li{display:flex;gap:16px;padding:0 28px 0 0}
.v-steps span{flex:0 0 40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font:700 18px var(--font-h);display:flex;align-items:center;justify-content:center}
.v-steps b{font:700 18px var(--font-h)}.v-steps p{margin:6px 0 0;color:var(--txt2);font-size:14.5px}
/* ---- tarifs */
.v-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin-top:30px;border:1px solid var(--line2);border-radius:16px;background:#fff;overflow:hidden}
.v-plan{padding:26px 24px;display:flex;flex-direction:column;gap:14px}.v-plan+.v-plan{border-left:1px solid var(--line2)}
.v-plan.is-main{background:var(--menthe)}
.v-plan h3{font:700 21px var(--font-h)}.v-tag{font:700 11.5px var(--font);background:var(--ambre);color:var(--nuit);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:6px}
.v-price{margin:0;color:var(--txt2);font-weight:600}.v-price b{font:700 30px var(--font-h);color:var(--nuit)}.v-price small{font-size:13px}
.v-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;flex:1}
.v-plan li::before{content:"";display:inline-block;width:12px;height:7px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg) translateY(-2px);margin-right:10px}
.v-plan .btn{margin-top:6px}
.v-note{margin:16px 0 0;color:var(--txt2);font-size:14px}
/* ---- questions */
.v-faq-wrap{max-width:820px}.v-faq{margin-top:22px;border-top:1px solid var(--line2)}
.v-faq details{border-bottom:1px solid var(--line2)}
.v-faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 2px;font:700 17px var(--font-h);position:relative}
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary::after{content:"+";position:absolute;right:6px;top:14px;font:500 26px var(--font);color:var(--teal)}
.v-faq details[open] summary::after{content:"\2212"}
.v-faq p{margin:0 0 20px;color:var(--txt2);line-height:1.65;max-width:68ch}
/* ---- formulaire, fin de page */
.v-wait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.v-wait .muted{font-size:16px;margin-top:10px;max-width:42ch}
.v-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}.v-form h3{font:700 22px var(--font-h);margin-bottom:6px}
.v-trap{position:absolute;left:-9999px}
.v-end .btn.lg{width:auto;padding:0 26px}.v-end{text-align:left}.v-end .muted{margin:8px 0 18px;font-size:16px}
/* ---- pages intérieures */
.v-page-head{background:var(--brume);padding:56px 0 44px}.v-page-head h1{font:700 clamp(30px,4.4vw,46px)/1.08 var(--font-h);letter-spacing:-.015em;max-width:20ch}
.v-feat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding-top:44px;padding-bottom:72px}
.v-toc{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:2px}
.v-toc a{padding:8px 10px;border-radius:8px;color:var(--txt2);font-weight:600;font-size:14px;text-decoration:none}.v-toc a:hover{background:var(--brume);color:var(--nuit)}
.v-feat-body section{padding:0 0 44px;margin-bottom:44px;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.v-feat-body h2{font:700 28px var(--font-h);margin-bottom:16px}
.v-feat-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:70ch}
.v-feat-body li{line-height:1.6;color:var(--txt2)}.v-feat-body li b{color:var(--nuit)}
.v-legal{padding-top:48px;padding-bottom:64px;max-width:820px}.v-legal h1{font:700 clamp(28px,4vw,40px) var(--font-h);margin-bottom:6px}
/* ---- pied de page */
.v-foot{background:var(--nuit);color:#C9DDDA;padding:48px 0 28px}
.v-foot .v-brand{color:#fff}.v-foot .v-brand b i{color:var(--teal-clair)}
.v-foot-top{display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #2B4A4F}.v-foot-top p{margin:0;max-width:46ch;font-size:14px}
.v-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0}
.v-foot-cols nav{display:flex;flex-direction:column;gap:9px}.v-foot-cols b{color:#fff;font:700 14px var(--font)}
.v-foot-cols a{color:#C9DDDA;font-weight:500;font-size:14px;text-decoration:none}.v-foot-cols a:hover{color:#fff;text-decoration:underline}
.v-copy{margin:0;font-size:13px;color:#8FB0AD}
/* ---- petits écrans */
@media (max-width:900px){
 .v-hero{padding:36px 0 56px}.v-hero-in{grid-template-columns:1fr;gap:40px}.v-hero h1{max-width:none}
 .v-field-grid{grid-template-columns:1fr;gap:24px}.v-field-grid>div+div{border-left:0;padding-left:0;border-top:1px solid #2B4A4F;padding-top:24px}
 .v-split,.v-wait{grid-template-columns:1fr;gap:28px}.v-rows a{grid-template-columns:1fr;gap:4px}
 .v-steps{grid-template-columns:1fr;gap:22px}
 .v-plan+.v-plan{border-left:0;border-top:1px solid var(--line2)}
 .v-feat{grid-template-columns:1fr;gap:20px}.v-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.v-toc a{background:var(--brume)}
 .v-nav{order:3;flex:1 0 100%;margin:0;overflow-x:auto}.v-top-in{gap:10px}
 .v-sec{padding:52px 0}
}
@media (max-width:560px){.v-wrap{padding:0 16px}.v-login{display:none}.v-pm-toast{right:6px;bottom:-26px}.v-foot-cols{grid-template-columns:1fr 1fr}.v-cta .btn.lg{width:100%}}

/* Page de démonstration */
.demo{padding-bottom:40px}
.demo-note{margin:0 0 22px;padding:14px 18px;border-radius:12px;background:#eef7f6;border:1px solid #cfe6e4}
.demo-note ul{margin:6px 0 0;padding-left:20px}
.demo-group{margin:26px 0}.demo-group h2{margin:0 0 12px}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.demo-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #dfe5e8;border-radius:14px;background:#fff;color:inherit;text-decoration:none}
.demo-card p{margin:0 0 8px;color:#55666d;font-size:14px;flex:1}
.demo-card .btn{align-self:flex-start}
.demo-cta{margin:36px 0 0;padding:26px;border-radius:16px;background:#14343a;color:#fff;text-align:center}
.demo-cta p{color:#cfe0e2}
