@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   Tokens, charte v1.1. Mode clair uniquement.
   ============================================================ */
:root{
  --navy:#16243F;
  --laiton:#B89150;
  --creme:#F4EFE4;
  --charbon:#23231F;
  --papier:#FBF8F2;
  --pierre:#E3DBC9;

  --display:'Cormorant Garamond',Garamond,Georgia,'Times New Roman',serif;
  --texte:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --u:8px;
  --max:1080px;
  --r:2px;

  --bg:var(--creme);
  --surface:var(--papier);
  --base:var(--navy);
  --ink:var(--charbon);
  --ink-2:#5C5A52;
  --accent:var(--laiton);
  --on-accent:var(--charbon);
  --hairline:rgba(22,36,63,.20);
  --hairline-2:rgba(22,36,63,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--texte); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 calc(var(--u)*3)}

h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; letter-spacing:.004em}
h1{font-size:clamp(38px,6.2vw,66px); line-height:1.06; font-weight:300}
h2{font-size:clamp(27px,3.4vw,40px); line-height:1.14; font-weight:300}
h3{font-size:19px; line-height:1.3; letter-spacing:0}
p{margin:0 0 calc(var(--u)*1.5)}
a{color:inherit}
ul,ol{margin:0 0 calc(var(--u)*1.5); padding-left:1.2em}
li{margin-bottom:6px}

.lede{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:62ch}
.eyebrow{
  font-family:var(--texte); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-2);
  display:flex; align-items:center; gap:calc(var(--u)*1.5); margin-bottom:calc(var(--u)*1.5);
}
.eyebrow .n{color:var(--accent); font-family:var(--data); letter-spacing:.06em}
.mono{font-family:var(--data); font-size:12.5px; letter-spacing:.02em}
.note{font-size:14.5px; color:var(--ink-2); max-width:68ch}
strong{font-weight:600}
.filet-accent{height:2px; background:var(--accent); width:44px; margin:calc(var(--u)*2) 0}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:calc(var(--u)*3); top:calc(var(--u)*1.5); z-index:60; background:var(--surface); padding:10px 14px; border:1px solid var(--accent)}

/* ============================================================
   Barre haute
   ============================================================ */
.bar{position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--hairline-2)}
.bar .wrap{display:flex; align-items:center; gap:calc(var(--u)*3); min-height:64px}
.bar .logo{width:132px; height:auto; display:block}
.bar nav{margin-left:auto; display:flex; align-items:center; gap:calc(var(--u)*3)}
.bar nav a{font-size:14.5px; text-decoration:none; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.bar .lang{
  font-family:var(--texte); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--hairline); color:var(--ink); padding:7px 12px; border-radius:var(--r);
}
.bar .lang:hover{border-color:var(--accent); color:var(--accent)}
.menu-btn{display:none}

/* ============================================================
   Sections
   ============================================================ */
.hero{padding:calc(var(--u)*11) 0 calc(var(--u)*8); border-bottom:1px solid var(--hairline-2)}
.hero h1{margin:0 0 calc(var(--u)*3); max-width:20ch}
.hero-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--u)*3); margin-top:calc(var(--u)*5); padding-top:calc(var(--u)*3); border-top:1px solid var(--hairline-2)}
.hero-facts dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2)}
.hero-facts dd{margin:6px 0 0; font-family:var(--data); font-size:13px}

.sec{padding:calc(var(--u)*9) 0; border-bottom:1px solid var(--hairline-2)}
.sec:last-of-type{border-bottom:0}
.sec-head{max-width:64ch; margin-bottom:calc(var(--u)*5)}
.sec-head h2{margin-bottom:calc(var(--u)*2)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*3)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--u)*2)}
.stack{display:grid; gap:calc(var(--u)*3)}
.prose{max-width:68ch}
.prose h2{margin:calc(var(--u)*5) 0 calc(var(--u)*2)}
.prose h2:first-child{margin-top:0}

.card{background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r); padding:calc(var(--u)*3)}
.card h3{margin-bottom:var(--u)}
.card p:last-child{margin-bottom:0}
.card.accent{border-left:2px solid var(--accent)}

/* Étapes numérotées : l'ordre porte une information, la séquence est réelle */
.steps{counter-reset:step; display:grid; gap:0}
.step{
  counter-increment:step; display:grid; grid-template-columns:64px 1fr; gap:calc(var(--u)*3);
  padding:calc(var(--u)*4) 0; border-top:1px solid var(--hairline-2);
}
.step:before{content:counter(step,decimal-leading-zero); font-family:var(--data); font-size:13px; color:var(--accent); padding-top:5px}
.step h3{margin-bottom:var(--u)}
.step p:last-child{margin-bottom:0}

/* ============================================================
   Boutons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--texte); font-size:14px; font-weight:500;
  padding:13px 22px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--base); color:var(--bg)}
.btn-ghost{border-color:var(--hairline); color:var(--ink); background:none}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ============================================================
   Calculateur
   ============================================================ */
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:calc(var(--u)*4); align-items:start}
.calc-inputs{display:grid; gap:calc(var(--u)*3)}
.field label{display:block; font-size:14.5px; font-weight:500; margin-bottom:8px}
.field .money{display:flex; align-items:center; border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface)}
.field .money span{font-family:var(--data); font-size:14px; color:var(--ink-2); padding:0 0 0 12px}
.field input[type=number]{
  width:100%; border:0; background:none; padding:12px; font-family:var(--data); font-size:16px; color:var(--ink);
  -moz-appearance:textfield;
}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.field .hint{display:flex; gap:8px; align-items:baseline; margin-top:7px; font-size:12.5px; color:var(--ink-2)}
.field .hint b{font-family:var(--data); font-weight:400}
.field .hint button{
  background:none; border:0; padding:0; font-family:var(--texte); font-size:12.5px; color:var(--accent);
  cursor:pointer; border-bottom:1px solid var(--hairline); text-decoration:none;
}
.field .hint button:hover{border-color:var(--accent)}
.slider-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--u)}
.slider-head output{font-family:var(--data); font-size:15px}
input[type=range]{width:100%; accent-color:var(--laiton); margin:10px 0 0}
.range-ends{display:flex; justify-content:space-between; font-family:var(--data); font-size:11.5px; color:var(--ink-2)}

.calc-out{background:var(--surface); border:1px solid var(--hairline-2); border-left:2px solid var(--accent); border-radius:var(--r); padding:calc(var(--u)*3)}
.calc-out .line{display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--u)*2); padding:12px 0; border-bottom:1px solid var(--hairline-2)}
.calc-out .line:first-child{padding-top:0}
.calc-out .line .k{font-size:14.5px}
.calc-out .line .v{font-family:var(--data); font-size:15px; white-space:nowrap}
.calc-out .line.total{border-bottom:0; padding-bottom:0; margin-top:6px}
.calc-out .line.total .k{font-weight:600}
.calc-out .line.total .v{font-size:22px; color:var(--base)}
.calc-out .sub{font-size:12.5px; color:var(--ink-2); margin:-6px 0 0; padding-bottom:12px; border-bottom:1px solid var(--hairline-2); max-width:44ch}
.calc-out .cpa{display:flex; justify-content:space-between; gap:var(--u); margin-top:calc(var(--u)*2); padding-top:calc(var(--u)*2); border-top:1px solid var(--hairline-2); font-size:13px; color:var(--ink-2)}
.calc-out .cpa b{font-family:var(--data); font-weight:400; color:var(--ink)}
.projection{font-size:12.5px; color:var(--ink-2); margin-top:calc(var(--u)*2); line-height:1.5}
.warn{font-size:12.5px; color:var(--base); background:rgba(184,145,80,.14); border-left:2px solid var(--accent); padding:10px 12px; margin-top:calc(var(--u)*2); border-radius:var(--r)}
.warn[hidden]{display:none}

/* ============================================================
   Schémas
   ============================================================ */
.schema{margin:calc(var(--u)*4) 0 0; border:1px solid var(--hairline-2); border-radius:var(--r); background:var(--surface); padding:calc(var(--u)*3)}
.schema svg{width:100%; height:auto; display:block}
.schema figcaption{font-size:12.5px; color:var(--ink-2); margin-top:calc(var(--u)*2)}

/* ============================================================
   Formulaire
   ============================================================ */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*3); max-width:760px}
.form .full{grid-column:1 / -1}
.form label{display:block; font-size:14.5px; font-weight:500; margin-bottom:8px}
.form label .req{color:var(--ink-2); font-weight:400; font-size:12.5px}
.form input{
  width:100%; border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface);
  padding:12px; font-family:var(--texte); font-size:15.5px; color:var(--ink);
}
.form input:hover{border-color:var(--accent)}
.form .fhint{margin-top:7px; font-size:12.5px; color:var(--ink-2)}
.form .consent{font-size:13px; color:var(--ink-2); max-width:60ch}
.form .consent a{color:var(--accent)}

.contact-list{list-style:none; padding:0; margin:0; font-size:15px}
.contact-list li{display:flex; gap:calc(var(--u)*2); padding:11px 0; border-top:1px solid var(--hairline-2)}
.contact-list dt,.contact-list .k{min-width:110px; font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); padding-top:3px}
.contact-list .v{font-family:var(--data); font-size:13.5px}
.contact-list a{color:var(--ink)}

/* ============================================================
   Pied de page
   ============================================================ */
footer{padding:calc(var(--u)*6) 0 calc(var(--u)*8); font-size:13px; color:var(--ink-2); border-top:1px solid var(--hairline-2)}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:calc(var(--u)*4); margin-bottom:calc(var(--u)*4)}
footer .logo{width:118px; height:auto; margin-bottom:calc(var(--u)*2)}
footer h4{font-family:var(--texte); font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:500; color:var(--ink-2); margin:0 0 calc(var(--u)*1.5)}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:8px}
footer a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline-2)}
footer a:hover{border-color:var(--accent); color:var(--accent)}
footer .legal{padding-top:calc(var(--u)*3); border-top:1px solid var(--hairline-2); line-height:1.6; max-width:80ch}
footer .legal .mono{display:block; margin-bottom:6px}

/* ============================================================
   Bandeau cookies
   ============================================================ */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--surface);
  border-top:1px solid var(--hairline); padding:calc(var(--u)*2.5) 0;
}
.cookie[hidden]{display:none}
.cookie .wrap{display:flex; align-items:center; gap:calc(var(--u)*3); flex-wrap:wrap}
.cookie .txt{flex:1 1 380px; font-size:13.5px; color:var(--ink-2)}
.cookie .txt b{color:var(--ink); display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; margin-bottom:5px}
.cookie .txt a{color:var(--accent)}
.cookie .acts{display:flex; gap:var(--u)}
.cookie .btn{padding:10px 18px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .calc,.grid-2,.form{grid-template-columns:1fr}
  .grid-4,.hero-facts{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr}
  .hero{padding:calc(var(--u)*7) 0 calc(var(--u)*6)}
  .sec{padding:calc(var(--u)*6) 0}
  .step{grid-template-columns:40px 1fr; gap:calc(var(--u)*2)}
  .bar .wrap{flex-wrap:wrap; padding-top:10px; padding-bottom:10px; min-height:0}
  .bar nav{margin-left:0; width:100%; gap:calc(var(--u)*2); flex-wrap:wrap; row-gap:10px}
  .bar nav a.navlink{font-size:13.5px}
  .bar .lang{margin-left:auto}
}
@media (max-width:560px){
  .hero-facts,.grid-4{grid-template-columns:1fr}
  .cookie .acts{width:100%}
  .cookie .btn{flex:1; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
@media print{.bar,.cookie{display:none} body{background:#fff}}