/* Sanylio — socle commun des pages publiques (0.29.0) : polices, couleurs, boutons, en-tête, appel final, barre mobile, pied de page. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;src:url(/assets/fonts/manrope-latin-wght.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;src:url(/assets/fonts/dm-sans-latin-wght.woff2) format('woff2');font-display:swap}

:root{--ink:#0d1b2e;--ink2:#22364d;--mint:#3ddbb5;--mint-soft:#e8faf4;--teal:#0b7a6b;--muted:#5a6e80;--line:#e3ebef;--paper:#fff;--wash:#f5f8fa;--r-btn:12px;--r-card:20px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.m{font-family:Manrope,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.skip{position:absolute;left:-9999px;z-index:99}
.skip:focus{left:20px;top:20px;padding:10px 14px;background:#fff;color:var(--ink);border-radius:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:700 16px/1.2 'DM Sans',system-ui,sans-serif;padding:15px 24px;border-radius:var(--r-btn);border:0;cursor:pointer;text-align:center;transition:transform .15s,box-shadow .2s,background-color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(13,27,46,.25)}
.btn-main:hover{background:#18304d;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid #cdd9e0}
.btn-ghost:hover{border-color:var(--ink)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:#5fe6c6;transform:translateY(-2px)}
.lnk{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.topbar :focus-visible,.tile.dark :focus-visible,.plan.pro :focus-visible,.einv :focus-visible,.final :focus-visible{outline-color:var(--mint)}

/* Apparitions : seul le script pose reveal-wait, sur ce qui est encore sous l'écran. */
.reveal-wait{opacity:0;transform:translateY(24px)}
.reveal-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* Bandeau et en-tête */
.topbar{margin:0;background:var(--ink);color:#d8e6ef;font-size:14px;text-align:center;padding:10px 16px;line-height:1.4}
.topbar b{color:var(--mint)}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font:800 25px Manrope,system-ui,sans-serif;letter-spacing:-.06em;color:var(--ink)}
.brand .mark{width:34px;height:34px}
.branddot{color:var(--teal);margin-left:-8px}
.site-nav{display:flex;gap:26px;font-size:15px;font-weight:500;color:var(--ink2)}
.site-nav a{padding:12px 0}
.site-nav a:hover{color:var(--teal)}
.header-actions{display:flex;gap:10px;align-items:center}
.header-actions .btn{min-height:44px;padding:10px 18px;font-size:14.5px}
.mobile-menu{display:none;position:relative}
.mobile-menu summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 14px;border:1.5px solid #cdd9e0;border-radius:var(--r-btn);font-weight:700;font-size:14.5px}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + 8px);width:min(290px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 40px rgba(13,27,46,.16);padding:8px;display:flex;flex-direction:column}
.mobile-menu nav a{padding:12px 14px;border-radius:10px;font-weight:600}
.mobile-menu nav a:hover{background:var(--wash)}

/* Appel final */
.final h2{font-size:clamp(32px,3.8vw,50px);line-height:1.05;letter-spacing:-.04em;margin:0 0 16px;font-weight:800;max-width:15em}
.final-wrap{padding:0 0 80px}
.final{background:var(--ink);color:#fff;border-radius:32px;padding:84px 40px;text-align:center;position:relative;overflow:hidden}
.final::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(61,219,181,.35),transparent 65%);left:50%;top:-260px;transform:translateX(-50%);pointer-events:none}
.final h2{position:relative;margin:0 auto 16px;max-width:14em}
.final p{position:relative;color:#a9bccb;font-size:18px;line-height:1.55;margin:0 auto 32px;max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.final .cta{justify-content:center;position:relative}
.btn-outline{background:transparent;color:#fff;border:1.5px solid #3b5470}
.btn-outline:hover{border-color:#fff}

/* Page introuvable (404) : elle ne charge que ce socle. */
.page-404{min-height:100vh;display:grid;place-items:center;padding:40px 20px;text-align:center;background:linear-gradient(180deg,var(--mint-soft) 0%,#fff 80%)}
.page-404 .brand{justify-content:center}
.page-404 h1{font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.04em;margin:28px 0 14px;font-weight:800}
.page-404 p{color:var(--muted);font-size:18px;line-height:1.6;max-width:32em;margin:0 auto 28px}
.page-404 .cta{justify-content:center}

/* Barre mobile (affichée par site-nav.js une fois les boutons du haut dépassés) */
.mobile-cta{display:none}

/* Pied de page */
.site-footer{background:var(--wash);border-top:1px solid var(--line);padding:64px 0 30px;font-size:15px}
.footer-top{display:grid;grid-template-columns:1fr 2.6fr;gap:40px}
.footer-brand p{color:var(--muted);margin:12px 0 0;max-width:22em;line-height:1.55}
.footer-right{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-right h2{font:800 14px Manrope,system-ui,sans-serif;margin:0 0 10px}
.footer-right a{display:flex;align-items:center;min-height:44px;color:var(--ink2)}
.footer-right a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:22px;color:var(--muted);font-size:13.5px}

@media (max-width:980px){
 .site-nav,.nav-login{display:none}
 .mobile-menu{display:block}
 .footer-top{grid-template-columns:1fr}
}
@media (max-width:600px){
 .footer-right{grid-template-columns:1fr}
 .nav-try{display:none}
 .final{padding:56px 22px;border-radius:24px}
 .mobile-cta{display:flex;justify-content:center;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;min-height:52px;align-items:center;padding:14px 18px;border-radius:var(--r-btn);background:var(--ink);color:#fff;font-weight:700;box-shadow:0 14px 30px rgba(13,27,46,.35);transition:transform .35s var(--ease)}
 .mobile-cta.is-hidden{transform:translateY(160%)}
 .site-footer{padding-bottom:96px}
}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal-wait{opacity:1;transform:none}
}