*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0}img{max-width:100%;height:auto}[hidden]{display:none!important}
:root{
  --encre:#1d1838; --encre-2:#3a3261; --creme:#fbf7ee; --papier:#ffffff; --sable:#f3ecdc;
  --soleil:#f5b301; --soleil-2:#ffd34d; --violet:#4a238f; --vert:#2f7d4f;
  --gris:#5f5a73; --ligne:#e6dfcd;
  --f-titre:"Fraunces",Georgia,serif; --f-corps:"DM Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
body{background:var(--creme);color:var(--encre);font-family:var(--f-corps);font-size:17px;line-height:1.65}
h1,h2,h3{font-family:var(--f-titre);line-height:1.12;margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 14px}
a{color:var(--violet)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.etroit{max-width:760px}

.bandeau{background:var(--encre);color:#e9e4ff;font-size:.84rem;text-align:center;padding:7px 12px}
.bandeau a{color:var(--soleil-2);font-weight:700}
.top{background:var(--papier);border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;padding-block:12px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);font-family:var(--f-titre);font-weight:700;font-size:1.25rem}
.marque svg{flex:none}
.marque small{display:block;font-family:var(--f-corps);font-weight:500;font-size:.75rem;color:var(--gris);letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:2px}
nav a{text-decoration:none;color:var(--encre-2);font-size:.92rem;padding:6px 10px;border-radius:8px}
nav a:hover{background:var(--sable)}
nav a[aria-current="page"]{background:var(--sable);color:var(--encre);font-weight:700}
@media (max-width:900px){.top .wrap{justify-content:center}nav{justify-content:center}}

.hero{background:radial-gradient(120% 90% at 85% 0%,#ffe9a8 0%,rgba(255,233,168,0) 55%),var(--creme);padding:56px 0 40px}
.hero .surtitre{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--violet)}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:10px 0 16px;max-width:22ch}
.hero .chapo{font-size:1.15rem;color:var(--encre-2);max-width:60ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--soleil);color:var(--encre);font-weight:700;text-decoration:none;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;font-family:var(--f-corps);cursor:pointer}
.btn:hover{background:var(--soleil-2)}
.btn.ligne{background:transparent;border:2px solid var(--encre);}
.btn.ligne:hover{background:var(--encre);color:#fff}
a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

section{padding:48px 0}
section.alt{background:var(--papier);border-block:1px solid var(--ligne)}
h2{font-size:clamp(1.55rem,3.4vw,2.2rem);margin-bottom:16px}
h3{font-size:1.25rem;margin:22px 0 8px}
.article p,.article li{max-width:70ch}
.article ul,.article ol{padding-left:22px;margin:0 0 16px}
.article li{margin-bottom:8px}

.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:22px 0}
.chiffre{background:var(--papier);border:1px solid var(--ligne);border-radius:16px;padding:18px}
.alt .chiffre{background:var(--creme)}
.chiffre b{display:block;font-family:var(--f-titre);font-size:2rem;line-height:1.1;color:var(--violet)}
.chiffre span{display:block;font-size:.95rem;color:var(--encre-2);margin-top:6px}
.chiffre a{font-size:.8rem;color:var(--gris)}

.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.atout{background:var(--papier);border:1px solid var(--ligne);border-left:5px solid var(--soleil);border-radius:12px;padding:16px 18px}
.atout h3{margin:0 0 6px;font-size:1.1rem}
.atout p{margin:0;color:var(--encre-2);font-size:.98rem}

.encadre{background:#fff7dc;border:1px solid #f1dc95;border-radius:14px;padding:16px 18px;margin:18px 0}
.encadre.info{background:#eef3ff;border-color:#cdd9fb}
.encadre p:last-child{margin:0}

table{border-collapse:collapse;width:100%;margin:12px 0 18px;font-size:.96rem;background:var(--papier)}
th,td{border:1px solid var(--ligne);padding:10px;text-align:left;vertical-align:top}
th{background:var(--sable)}
.tableau{overflow-x:auto}

.etapes{counter-reset:e;list-style:none;padding:0!important}
.etapes li{counter-increment:e;position:relative;padding:14px 16px 14px 62px;background:var(--papier);border:1px solid var(--ligne);border-radius:14px;margin-bottom:12px;max-width:none!important}
.etapes li::before{content:counter(e);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--encre);color:var(--soleil-2);display:grid;place-items:center;font-weight:700;font-family:var(--f-titre)}
.etapes li b{display:block;font-size:1.05rem}

/* Simulateur */
.simu{background:var(--encre);color:#fff;border-radius:22px;padding:24px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
@media (max-width:860px){.simu{grid-template-columns:1fr}}
.simu h2{color:#fff;margin-bottom:6px}
.simu .sous{color:#cfc8ee;font-size:.95rem}
.simu form{display:grid;gap:12px;margin-top:10px}
.simu label{display:grid;gap:4px;font-size:.9rem;color:#e4defc;font-weight:500}
.simu input,.simu select{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #5a4f8f;background:#2a2450;color:#fff;width:100%}
.simu .deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.simu .deux{grid-template-columns:1fr}}
.res{background:#2a2450;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.res .k{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #443b78;padding-bottom:8px;font-size:.95rem;color:#d9d3f5}
.res .k b{color:var(--soleil-2);font-family:var(--f-titre);font-size:1.3rem}
.res .note{font-size:.8rem;color:#b9b1e0;margin:0}
.res .btn{justify-content:center;margin-top:4px}

.solynk{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:linear-gradient(140deg,#1c0f3a,#3b1a78);color:#fff;border-radius:20px;padding:22px}
.solynk img{width:190px;height:auto;border-radius:12px}
.solynk h2{color:#fff}
.solynk p{color:#e5dcff}
.solynk .btn{margin-top:4px}
@media (max-width:640px){.solynk{grid-template-columns:1fr}}

.sources{font-size:.85rem;color:var(--gris)}
.sources ul{padding-left:18px}
.maj{font-size:.85rem;color:var(--gris)}
footer{background:var(--encre);color:#d8d2f2;font-size:.9rem;padding:28px 0;margin-top:40px}
footer a{color:var(--soleil-2)}
footer .wrap{display:grid;gap:8px}