/* Carte Facile — landing publique, charte Margoterp */
.cfl{
  --ink:#1B2A4A; --ink-deep:#0F1A30; --gold:#E8A838; --gold-soft:#F0BC5A;
  --bg:#F3F6FB; --surface:#FFFFFF; --line:#E6EAF2; --text:#1B2A4A; --muted:#5B6B86; --faint:#8696B0;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family:var(--font); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.cfl *{box-sizing:border-box}
.cfl a{color:inherit}
.cfl-wrap{max-width:1040px; margin:0 auto; padding:0 20px}

/* Nav */
.cfl-nav{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.cfl-nav-in{ display:flex; align-items:center; justify-content:space-between; height:64px }
.cfl-nav-brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none; color:var(--ink) }
.cfl-nav-logo{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(145deg,var(--gold-soft),var(--gold)); color:#1B2A4A }
.cfl-nav-links{ display:flex; align-items:center; gap:22px }
.cfl-nav-link{ font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none }
.cfl-nav-link:hover{ color:var(--ink) }
.cfl-nav-login{ font-size:14.5px; font-weight:700; color:var(--ink); text-decoration:none }
.cfl-nav-cta{ padding:10px 18px; font-size:14px }
@media (max-width:640px){ .cfl-nav-link{ display:none } .cfl-nav-links{ gap:12px } .cfl-nav-cta{ padding:9px 14px } }

/* Hero */
.cfl-hero{ background:radial-gradient(120% 120% at 50% -10%, #22365E 0%, #16233F 50%, #0C1428 100%); color:#fff; padding:64px 0 72px; text-align:center }
.cfl-logo{ width:64px; height:64px; border-radius:18px; margin:0 auto 20px; display:grid; place-items:center; background:linear-gradient(145deg,var(--gold-soft),var(--gold)); color:#1B2A4A; box-shadow:0 14px 34px -12px rgba(232,168,56,.6) }
.cfl-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 14px }
.cfl-hero h1{ font-size:clamp(30px,5.2vw,46px); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:0 auto; max-width:16ch; text-wrap:balance }
.cfl-hero p{ font-size:clamp(15px,2.3vw,18px); color:#C3D0E8; margin:18px auto 0; max-width:54ch }
.cfl-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px }
.cfl-btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:13px; font-weight:800; font-size:15.5px; text-decoration:none; border:1.5px solid transparent; transition:transform .1s,filter .15s,background .15s }
.cfl-btn:active{ transform:scale(.97) }
.cfl-btn-gold{ background:var(--gold); color:#10192E; box-shadow:0 14px 30px -12px rgba(232,168,56,.6) }
.cfl-btn-gold:hover{ filter:brightness(1.06) }
.cfl-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22) }
.cfl-btn-ghost:hover{ background:rgba(255,255,255,.16) }
.cfl-note{ margin-top:16px; font-size:12.5px; color:#9FB0C9; display:flex; gap:8px; justify-content:center; align-items:center }
.cfl-note svg{ color:var(--gold) }

/* Sections */
.cfl-sec{ padding:58px 0 }
.cfl-sec h2{ font-size:clamp(24px,3.6vw,32px); font-weight:800; letter-spacing:-.02em; text-align:center; margin:0 auto 10px; text-wrap:balance }
.cfl-sec .cfl-lead{ text-align:center; color:var(--muted); max-width:56ch; margin:0 auto 38px; font-size:15.5px }

/* Features */
.cfl-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.cfl-feat{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 1px 2px rgba(16,26,48,.04),0 14px 30px -20px rgba(16,26,48,.18) }
.cfl-feat-ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:rgba(27,42,74,.06); color:var(--ink); margin-bottom:14px }
.cfl-feat h3{ margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.01em }
.cfl-feat p{ margin:0; font-size:14px; color:var(--muted) }

/* Steps */
.cfl-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step }
.cfl-step{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; position:relative }
.cfl-step::before{ counter-increment:step; content:"0" counter(step); font-size:14px; font-weight:800; color:#10192E; background:linear-gradient(145deg,var(--gold-soft),var(--gold)); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px }
.cfl-step h3{ margin:0 0 6px; font-size:16px; font-weight:800 }
.cfl-step p{ margin:0; font-size:14px; color:var(--muted) }

/* Plans */
.cfl-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start }
.cfl-plan{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden }
.cfl-plan.feature{ border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); box-shadow:0 18px 44px -22px rgba(232,168,56,.5) }
.cfl-plan.feature::before{ content:"Populaire"; position:absolute; top:16px; right:-34px; transform:rotate(45deg); background:var(--gold); color:#10192E; font-size:10px; font-weight:800; padding:4px 38px; letter-spacing:.05em }
.cfl-plan-name{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }
.cfl-plan-price{ display:flex; align-items:baseline; gap:6px }
.cfl-plan-price .amt{ font-size:34px; font-weight:800; letter-spacing:-.02em }
.cfl-plan-price .per{ font-size:14px; color:var(--faint); font-weight:600 }
.cfl-plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.cfl-plan li{ display:flex; align-items:flex-start; gap:10px; font-size:14px }
.cfl-plan li svg{ color:#16A34A; flex-shrink:0; margin-top:2px }
.cfl-plan .cfl-btn{ justify-content:center }
.cfl-plan-ink{ background:var(--ink); color:#fff }
.cfl-plan-ink:hover{ filter:brightness(1.1) }
.cfl-plan-soft{ background:var(--bg); color:var(--ink); border:1.5px solid var(--line) }
.cfl-plans-note{ text-align:center; font-size:12px; color:var(--faint); margin:22px auto 0 }

/* CTA band */
.cfl-band{ background:linear-gradient(135deg,var(--ink),var(--ink-deep)); color:#fff; border-radius:24px; padding:44px 28px; text-align:center; margin:12px 0 }
.cfl-band h2{ color:#fff; margin:0 0 10px }
.cfl-band p{ color:#C3D0E8; margin:0 auto 24px; max-width:48ch }

/* Footer */
.cfl-footer{ border-top:1px solid var(--line); padding:28px 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px }
.cfl-footer-brand{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted) }
.cfl-footer-brand b{ color:var(--text); font-weight:800 }
.cfl-footer-mark{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:linear-gradient(145deg,var(--gold-soft),var(--gold)); color:#1B2A4A; font-weight:800; font-size:13px }
.cfl-footer-by{ margin:0; font-size:12px; color:var(--faint) }
.cfl-footer-by a{ color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent) }

@media (max-width:820px){
  .cfl-features,.cfl-steps,.cfl-plans{ grid-template-columns:1fr }
  .cfl-hero{ padding:48px 0 54px }
  .cfl-sec{ padding:44px 0 }
}
@media (prefers-reduced-motion:reduce){ .cfl *{ transition:none!important } }