/* Léon — design system vitrine (style Paul, thème clair). Partagé par toutes les pages publiques. */
:root{
  --nuit:#0d1b2a; --cyan:#01a4e2; --vert:#66bd65; --orange:#ffbd59;
  --gris:#6b7280; --gris-clair:#f1f5f9; --bord:#e2e8f0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',Arial,sans-serif;color:var(--nuit);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}

/* Boutons */
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;font-size:15px;font-family:inherit;border:0;cursor:pointer;transition:transform .08s ease,opacity .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan);color:#fff}
.btn-primary:hover{opacity:.92}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-dark{background:var(--nuit);color:#fff}
.btn-dark:hover{opacity:.92}
/* Bouton clair sur fond clair (pages de contenu) */
.btn-outline{border:1.5px solid var(--bord);color:var(--nuit);background:#fff}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}

/* En-tête */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--nuit)}
.brand svg{display:block;flex:0 0 auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:28px;font-weight:600;font-size:15px}
.nav-links a.muted{color:var(--gris)}
.nav-links a.muted:hover{color:var(--nuit)}
@media(max-width:760px){.nav-links .hide-sm{display:none}}
.leon-eyes-g{transition:opacity .18s ease}

/* Hero (fond bleu nuit) */
.hero{background:radial-gradient(120% 120% at 80% 0%, #12304a 0%, var(--nuit) 55%);color:#fff;padding:84px 0 96px}
.hero.short{padding:64px 0 56px}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.5px}
.hero.short h1{font-size:clamp(30px,5vw,46px)}
.hero .accent{color:var(--cyan)}
.hero p.sub{margin:22px 0 0;font-size:clamp(16px,2.2vw,20px);color:rgba(255,255,255,.78);max-width:640px}
.hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero .fr{margin-top:28px;font-size:14px;color:rgba(255,255,255,.6);font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600}

/* Sections */
section.block{padding:88px 0}
section.block.tight{padding:56px 0}
.eyebrow{color:var(--cyan);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
h2.title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.4px;margin-top:8px}
.lead{color:var(--gris);font-size:17px;margin-top:12px;max-width:620px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .cta{justify-content:center;display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* Grilles + cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:48px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{border:1px solid var(--bord);border-radius:16px;padding:26px;background:#fff;transition:box-shadow .15s ease,transform .15s ease}
.card:hover{box-shadow:0 12px 30px rgba(13,27,42,.08);transform:translateY(-2px)}
a.card{display:block;color:inherit}
.ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;background:rgba(1,164,226,.12)}
.ico.green{background:rgba(102,189,101,.14)}
.ico.orange{background:rgba(255,189,89,.18)}
.ico.dark{background:rgba(13,27,42,.08)}
.card h3{font-size:18px;font-weight:700}
.card p{color:var(--gris);font-size:15px;margin-top:8px}
.alt{background:var(--gris-clair)}

/* Profils "Pour qui" */
.audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:40px}
.aud{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:24px}
.aud b{font-size:17px}
.aud p{color:var(--gris);font-size:15px;margin-top:6px}

/* Étapes numérotées */
.steps{list-style:none;counter-reset:s;margin-top:16px}
.steps li{counter-increment:s;position:relative;padding:9px 0 9px 40px;color:var(--nuit);font-size:15px}
.steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Tarifs */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.price{border:1px solid var(--bord);border-radius:18px;padding:30px;background:#fff;text-align:center}
.price.feature{border-color:var(--cyan);box-shadow:0 16px 40px rgba(1,164,226,.12);position:relative}
.price .name{font-weight:700;font-size:18px}
.price .amount{font-size:40px;font-weight:800;margin:10px 0 2px}
.price .per{color:var(--gris);font-size:14px}
.price ul{list-style:none;text-align:left;margin:20px 0 24px}
.price li{padding:7px 0 7px 26px;position:relative;font-size:15px}
.price li::before{content:'✓';position:absolute;left:0;color:var(--vert);font-weight:800}
.badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}

/* FAQ / accordéon */
.faq{max-width:760px;margin:40px auto 0}
.faq details{border:1px solid var(--bord);border-radius:14px;padding:18px 22px;background:#fff;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--cyan);font-weight:800}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--gris);font-size:15px;margin-top:12px}

/* Prose (mentions légales, textes longs) */
.prose{max-width:760px;margin:0 auto;color:#334155}
.prose h2{font-size:22px;font-weight:800;color:var(--nuit);margin:32px 0 10px}
.prose h3{font-size:17px;font-weight:700;color:var(--nuit);margin:22px 0 6px}
.prose p{margin:10px 0;font-size:15px}
.prose a{color:var(--cyan);font-weight:600}
.prose ul{margin:10px 0 10px 22px}
.prose li{margin:5px 0;font-size:15px}

/* CTA final (encadré sombre) */
.final{background:var(--nuit);color:#fff;border-radius:24px;padding:56px 40px;text-align:center}
.final h2{font-size:clamp(26px,4vw,36px);font-weight:800}
.final p{color:rgba(255,255,255,.72);margin-top:12px;font-size:17px}
.final .cta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Pied de page */
footer{padding:56px 0 40px;border-top:1px solid var(--bord);color:var(--gris);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot a{color:var(--gris)}
.foot a:hover{color:var(--nuit)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}