/* Landing publique (/welcome) — mêmes tokens que styles.css */
.ld{max-width:1080px;margin:0 auto;padding:0 24px 40px}
.ld h2{font-size:28px;letter-spacing:-.01em;margin:0 0 8px;text-align:center}
.ld h3{margin:0 0 6px;font-size:15px}
.ld p{margin:0}
.ld .btn{text-decoration:none}

/* nav */
.ld-nav{height:64px;display:flex;align-items:center;gap:24px}
.ld-links{display:flex;gap:20px;margin-left:auto}
.ld-links a{color:var(--muted);font-weight:500;transition:color .15s}
.ld-links a:hover{color:var(--text)}
.ld-nav-right{display:flex;align-items:center;gap:12px}

/* hero */
.ld-hero{text-align:center;padding:64px 0 24px;animation:ld-fade .7s ease both}
.ld-hero h1{font-size:48px;line-height:1.1;letter-spacing:-.02em;max-width:760px;margin:0 auto 16px;font-weight:700}
.ld-sub{color:var(--muted);font-size:17px;max-width:620px;margin:0 auto 24px}
.ld-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ld-reassure{font-size:13px;margin-top:14px}
.ld-shot{margin:40px auto 0;max-width:960px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-elev);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ld-shot img{display:block;width:100%;height:auto}
.ld-proof{font-size:13px;margin-top:28px;letter-spacing:.02em;text-transform:uppercase}

/* sections */
.ld-section{padding:64px 0 8px}
.ld-section-sub{text-align:center;margin-bottom:32px!important;font-size:15px}
.ld-center{text-align:center;margin-top:20px!important}
.ld-icon{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:rgba(34,184,221,.1);color:var(--accent);flex:none}
.ld-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* steps */
.ld-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.ld-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.ld-step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ld-step-n{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:600;font-size:13px}

/* features */
.ld-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ld-feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:border-color .15s}
.ld-feature:hover{border-color:var(--muted)}
.ld-feature .ld-icon{margin-bottom:14px}
.ld-feature:last-child{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ld-feature:last-child .ld-icon{margin:0}
.ld-feature:last-child h3{margin:0}

/* layouts (vignettes 9:16 en CSS pur) */
.ld-layouts{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ld-layout{text-align:center;font-size:13px;color:var(--muted)}
.lay{aspect-ratio:9/16;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev);margin-bottom:10px;display:flex;flex-direction:column;gap:3px;padding:3px;overflow:hidden;position:relative}
.lay i{display:block;flex:1;border-radius:4px;background:linear-gradient(135deg,rgba(34,184,221,.55),rgba(111,92,245,.55))}
.lay-vertical i:nth-child(n+2),.lay-spotlight i:nth-child(n+2),.lay-centered i:nth-child(n+2),.lay-horizontal i:nth-child(n+2){display:none}
.lay-split i:nth-child(3){display:none}
.lay-spotlight{background:radial-gradient(circle at 50% 40%,rgba(34,184,221,.25),var(--bg-elev) 70%)}
.lay-spotlight i{flex:none;height:40%;margin:auto 12%;}
.lay-centered{background:#1e3a8a;justify-content:center}
.lay-centered i{flex:none;aspect-ratio:1;width:100%}
.lay-horizontal{justify-content:center;background:#000}
.lay-horizontal i{flex:none;aspect-ratio:16/9;width:100%}

/* pricing */
.ld-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ld-plan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px}
.ld-plan.popular{border-color:var(--accent)}
.ld-badge{position:absolute;top:-11px;left:16px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--accent);color:#0e0e11}
.ld-price{font-size:30px;font-weight:700;letter-spacing:-.02em}
.ld-price .muted{font-size:14px;font-weight:400;margin-left:4px}
.ld-plan ul{list-style:none;margin:0 0 8px;padding:0;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.ld-plan li::before{content:"✓";color:var(--success);margin-right:8px}

/* faq */
.ld-faqs{max-width:720px;margin:0 auto}
.ld-faq{border-bottom:1px solid var(--border);padding:14px 0}
.ld-faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary::after{content:"+";color:var(--muted);font-size:18px}
.ld-faq[open] summary::after{content:"−"}
.ld-faq p{margin-top:8px!important}

/* final + footer */
.ld-final{text-align:center;padding:80px 0 56px}
.ld-final p{margin-bottom:20px!important}
.ld-footer{border-top:1px solid var(--border);padding:24px 0 0;display:flex;align-items:center;gap:24px;font-size:13px;color:var(--muted)}
.ld-footer nav{display:flex;gap:16px;margin-left:auto}
.ld-footer nav a{color:var(--muted)}
.ld-footer nav a:hover{color:var(--text)}

/* fade-in au scroll : CSS pur, ignoré si non supporté */
@keyframes ld-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  .ld-section,.ld-final{animation:ld-fade .6s ease both;animation-timeline:view();animation-range:entry 0% entry 25%}
}

/* responsive */
@media (max-width:900px){
  .ld-features{grid-template-columns:repeat(2,1fr)}
  .ld-plans{grid-template-columns:repeat(2,1fr)}
  .ld-layouts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .ld{padding:0 16px 32px}
  .ld-links,.ld-nav .btn{display:none}
  .ld-nav-right{margin-left:auto}
  .ld-hero{padding-top:40px}
  .ld-hero h1{font-size:32px}
  .ld h2{font-size:24px}
  .ld-steps,.ld-features,.ld-plans{grid-template-columns:1fr}
  .ld-footer{flex-wrap:wrap;gap:12px}
  .ld-footer nav{margin-left:0;width:100%}
}