:root{--noir:#0C0C0C;--blanc:#F2F2EF;--gris:#8A8F8B;--gris2:#6E7470;--ligne:#1F2427;--sauge:#9FB394;--trait:#5C7F92;--lumiere:#D9E0E3;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--noir);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--blanc);font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;background:linear-gradient(180deg,#04101B 0,#0C0C0C 1400px) var(--noir)}
a{color:inherit}
.wrap{max-width:1480px;margin:0 auto;padding-left:56px;padding-right:56px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--blanc)}
.logo__txt{display:flex;flex-direction:column}
.logo__mot{font-weight:450;line-height:.9;letter-spacing:-.045em}
.logo__sig{font-family:'La Belle Aurore',cursive;line-height:1.05;transform:rotate(-4deg);display:inline-block}
header.wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:36px;padding-bottom:28px}
header nav{display:flex;gap:44px;font-size:14px;font-weight:400}
header nav a{text-decoration:none;opacity:.72;transition:opacity .2s}
header nav a:hover,header nav a[aria-current]{opacity:1}
.btn{display:inline-block;background:var(--blanc);color:var(--noir);text-decoration:none;border-radius:999px;padding:17px 30px;font-size:16px;font-weight:500;border:none;cursor:pointer;font-family:inherit}
.btn--petit{padding:10px 20px;font-size:14px}
.eti{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.eti b{color:var(--sauge);font-weight:500}
h1,h2{margin:0;font-weight:500}
.gris{color:var(--gris2)}
.intro{padding-top:90px;padding-bottom:64px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.intro>div{display:flex;flex-direction:column;gap:24px;max-width:860px}
.intro h1{font-size:clamp(46px,6vw,96px);line-height:.95;letter-spacing:-.05em}
.intro p{margin:0;max-width:420px;font-size:18px;line-height:1.65;color:#B9BDB9}
.outil{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.reglages{padding:40px 40px 44px 0;border-right:1px solid var(--ligne);display:flex;flex-direction:column;gap:34px}
.champ{display:flex;flex-direction:column;gap:10px}
.champ label,.champ .eti{font-size:12px}
.montant{display:flex;border-bottom:1px solid var(--blanc)}
.montant input{flex:1 1 auto;min-width:0;height:60px;border:none;background:transparent;color:var(--blanc);font:400 34px 'Jost',sans-serif;letter-spacing:-.02em}
.montant input:focus{outline:none}
.montant:focus-within{border-bottom-color:var(--sauge)}
.choix{display:flex;flex-direction:column;gap:8px}
.choix--grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pastille{min-height:48px;padding:12px 16px;border:1px solid #2E3438;border-radius:14px;background:transparent;color:var(--blanc);font:400 15px 'Jost',sans-serif;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;transition:border-color .2s,background .2s}
.pastille small{font-size:12px;color:var(--gris)}
.pastille:hover{border-color:#4A5257}
.pastille[aria-pressed="true"]{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.pastille[aria-pressed="true"] small{color:#55595A}
.pastille:focus-visible,.btn:focus-visible{outline:2px solid var(--sauge);outline-offset:3px}
.resultat{padding:40px 0 44px 48px;display:flex;flex-direction:column;gap:44px}
.chiffres{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.chiffres>div{display:flex;flex-direction:column;gap:8px}
.gros{font-size:clamp(64px,7vw,112px);font-weight:500;line-height:.9;letter-spacing:-.055em}
.moyen{font-size:clamp(36px,3.4vw,52px);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--sauge)}
.sous{font-size:15px;color:#B9BDB9}
.barres{display:flex;flex-direction:column;gap:18px}
.barre{display:grid;grid-template-columns:200px minmax(0,1fr) 120px;gap:20px;align-items:center;font-size:15px}
.barre__piste{height:10px;background:#161B1E;border-radius:999px;overflow:hidden}
.barre__plein{height:100%;border-radius:999px;background:var(--trait);transition:width .7s cubic-bezier(.2,.7,.2,1),background .3s}
.barre[data-actif="true"] .barre__plein{background:var(--lumiere);box-shadow:0 0 18px rgba(217,224,227,.45)}
.barre[data-base="true"] .barre__plein{background:var(--sauge)}
.barre__val{text-align:right;font-weight:500}
.source{margin:0;font-size:12px;line-height:1.7;color:var(--gris2)}
.pires{padding-top:130px;padding-bottom:130px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px;align-items:center}
.pires>div:first-child{display:flex;flex-direction:column;gap:24px}
.pires h2{font-size:clamp(38px,4vw,62px);line-height:1;letter-spacing:-.04em}
.pires p{margin:0;font-size:18px;line-height:1.7;color:#B9BDB9}
.stat{border-left:1px solid var(--ligne);padding-left:56px;display:flex;flex-direction:column;gap:14px}
.stat strong{font-size:clamp(90px,10vw,160px);font-weight:500;line-height:.85;letter-spacing:-.06em}
.stat strong span{color:var(--sauge)}
.stat em{font-style:normal;font-size:17px;line-height:1.6;color:#B9BDB9;max-width:360px}
.stat small{font-size:12px;color:var(--gris2)}
.fin{border-top:1px solid var(--ligne)}
.fin .wrap{padding-top:90px;padding-bottom:90px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.fin p{margin:0;font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.1;letter-spacing:-.035em;max-width:760px}
footer{border-top:1px solid var(--ligne)}
footer .wrap{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:36px}
footer p{margin:0;font-size:12px;line-height:1.8;color:var(--gris2);max-width:980px}
@media (max-width:900px){
 .wrap{padding-left:20px;padding-right:20px} header nav{display:none}
 header.wrap{padding-top:22px}
 .intro{padding-top:56px;padding-bottom:40px}
 .outil{grid-template-columns:1fr} .reglages{padding:32px 0;border-right:none;border-bottom:1px solid var(--ligne)} .resultat{padding:32px 0}
 .barre{grid-template-columns:1fr 92px;gap:8px 12px} .barre__piste{grid-column:1/-1;grid-row:2}
 .pires{grid-template-columns:1fr;gap:48px;padding-top:80px;padding-bottom:80px} .stat{border-left:none;padding-left:0;border-top:1px solid var(--ligne);padding-top:40px}
}
@media (prefers-reduced-motion:reduce){.barre__plein{transition:none}}

.onglets{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:28px}
.onglets .pastille{flex-direction:row;align-items:center}
.curseur{width:100%;accent-color:#D9E0E3;height:32px}
.paliers{display:grid;grid-template-columns:52px minmax(0,1fr) 72px;gap:10px 12px;align-items:center;font-size:14px}
.paliers span{color:var(--gris)}
.paliers input,.liste input{height:44px;min-width:0;border:none;border-bottom:1px solid #3A4146;background:transparent;color:var(--blanc);font:400 17px 'Jost',sans-serif;padding:0 2px}
.paliers input:focus,.liste input:focus{outline:none;border-bottom-color:var(--sauge)}
.note{margin:0;font-size:13px;line-height:1.6;color:var(--gris2)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.duo>div{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-top:1px solid var(--ligne)}
.duo .gros{font-size:clamp(48px,5vw,80px)}
.jauge{display:flex;flex-direction:column;gap:14px}
.jauge__haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:16px}
.jauge__piste{height:10px;background:#161B1E;border-radius:999px;overflow:hidden}
.jauge__plein{height:100%;border-radius:999px;background:#D9E0E3;box-shadow:0 0 18px rgba(217,224,227,.4);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.liste{display:flex;flex-direction:column;gap:14px}
.liste label{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:center;font-size:15px}
.liste h3{margin:12px 0 0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.lignes{display:flex;flex-direction:column}
.lignes div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ligne);font-size:16px}
.lignes div:last-child{border-bottom:none;font-size:20px;font-weight:500;color:var(--sauge)}
.avis{position:fixed;inset:0;z-index:50;background:rgba(4,16,27,.72);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.avis[hidden]{display:none}
.avis__boite{max-width:560px;width:100%;background:#0C0C0C;border:1px solid #262626;padding:40px;display:flex;flex-direction:column;gap:16px}
.avis__boite h2{font-size:30px;line-height:1.05;letter-spacing:-.03em}
.avis__boite p{margin:0;font-size:15px;line-height:1.65;color:#B9BDB9}
.avis__boite .btn{align-self:flex-start;margin-top:6px}
@media (max-width:900px){.duo{grid-template-columns:1fr}.liste label{grid-template-columns:1fr 130px}}