@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
--fond:#f6f1e7;--surface:#fffdf8;--texte:#1f1a14;--texte-doux:#4f463b;--ligne:#d9cfbd;
--accent:#b23a12;--accent-fonce:#8f2c0a;--sur-accent:#fff;--signal-ok:#1f6b45;--halo:rgba(178,58,18,.18);
--police-titre:"Bricolage",ui-sans-serif,system-ui,sans-serif;--police-texte:"Bricolage",ui-sans-serif,system-ui,sans-serif;
--rayon-s:14px;--rayon-m:22px;--rayon-l:32px;--rayon-pilule:999px;
--espace-1:8px;--espace-2:16px;--espace-3:24px;--espace-4:40px;--espace-5:64px;
--duree-appui:80ms;--duree-court:150ms;--duree-entree:320ms;--duree-ecart:90ms;--duree-chiffre:1000ms;
--courbe-standard:cubic-bezier(.2,0,0,1);--courbe-entree:cubic-bezier(.05,.7,.1,1);
--glisse:16px;--survol-monte:-2px;--echelle-appui:.96}
*{box-sizing:border-box}
html{color-scheme:light}
body{font:17px/1.6 var(--police-texte);margin:0;color:var(--texte);background:var(--fond)}
main,footer{max-width:820px;margin:0 auto;padding:var(--espace-2)}
h1,h2,h3{font-family:var(--police-titre);line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,3.6rem);font-weight:800;margin:.2em 0}
h2{font-size:1.6rem;font-weight:750;margin-top:var(--espace-4)}
a{color:var(--accent-fonce)}
.lead{font-size:1.12rem;margin:.4rem 0 1rem;color:var(--texte-doux)}
.note{font-size:1rem;color:var(--texte-doux)}
/* héros */
.hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--espace-3);align-items:center;max-width:1120px;margin:0 auto;padding:var(--espace-4) var(--espace-2) var(--espace-3)}
.hero::before{content:"";position:absolute;inset:8% 4% auto auto;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--halo),transparent 68%);z-index:-1}
.pastille{display:inline-block;padding:6px 14px;border-radius:var(--rayon-pilule);background:var(--surface);border:1px solid var(--ligne);font-size:.95rem;font-weight:600;color:var(--signal-ok)}
.sous{font-size:1.2rem;color:var(--texte-doux);margin:0 0 var(--espace-3)}
.chiffre{display:flex;align-items:baseline;gap:12px;margin:var(--espace-2) 0}
.chiffre b{font:800 clamp(4rem,11vw,7rem)/.9 var(--police-titre);color:var(--accent);letter-spacing:-.04em}
.chiffre span{font-size:1rem;color:var(--texte-doux);max-width:24ch;line-height:1.3}
.hero .visual{width:100%;height:auto;max-width:480px;justify-self:center;border-radius:var(--rayon-l);box-shadow:0 30px 60px rgba(60,30,10,.18);animation:entree 480ms var(--courbe-entree) 200ms both}
/* composants */
input,select{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:1rem;color:var(--texte);background:var(--surface);border:1.5px solid #8a7d6a;border-radius:var(--rayon-s);transition:border-color var(--duree-court) var(--courbe-standard),box-shadow var(--duree-court) var(--courbe-standard)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)}
label{display:block;margin:14px 0 4px;font-weight:650}
.btn,button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:var(--espace-2);padding:12px 28px;border:0;border-radius:var(--rayon-pilule);background:var(--accent);color:var(--sur-accent);font:700 1.08rem var(--police-texte);text-decoration:none;cursor:pointer;box-shadow:0 10px 24px var(--halo);transition:transform var(--duree-court) var(--courbe-standard),background-color var(--duree-court) var(--courbe-standard)}
.btn:hover,button:hover{transform:translateY(var(--survol-monte));background:var(--accent-fonce)}
.btn:active,button:active{transform:scale(var(--echelle-appui));transition-duration:var(--duree-appui)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--texte);outline-offset:3px}
.btn-sec{background:transparent;color:var(--accent-fonce);border:2px solid var(--accent);box-shadow:none}
.btn-sec:hover{background:var(--surface)}
.calc,.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-l);padding:var(--espace-3);box-shadow:0 18px 40px rgba(60,30,10,.08)}
.calc details{margin-top:var(--espace-2)}.calc summary{cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center}
#res{background:var(--fond);border-radius:var(--rayon-m);padding:var(--espace-2);margin-top:var(--espace-2)}
#res.listo{animation:entree var(--duree-entree) var(--courbe-entree)}
table{width:100%;border-collapse:collapse}td{padding:8px 0;border-bottom:1px solid var(--ligne)}td:last-child{text-align:right;font-variant-numeric:tabular-nums}
ul li{margin:6px 0}
footer{border-top:1px solid var(--ligne);margin-top:var(--espace-5);padding-bottom:var(--espace-4)}
footer a{display:inline-block;min-height:44px;line-height:44px}
/* mouvement : cascade du premier écran (contenu visible sans script) */
@keyframes entree{from{opacity:0;transform:translateY(var(--glisse))}to{opacity:1;transform:none}}
.cascade>*{animation:entree var(--duree-entree) var(--courbe-entree) both}
.cascade>:nth-child(2){animation-delay:calc(var(--duree-ecart)*1)}
.cascade>:nth-child(3){animation-delay:calc(var(--duree-ecart)*2)}
.cascade>:nth-child(4){animation-delay:calc(var(--duree-ecart)*3)}
.cascade>:nth-child(5){animation-delay:calc(var(--duree-ecart)*4)}
@media (max-width:760px){
.hero{grid-template-columns:1fr;padding-top:var(--espace-3);gap:0}
.hero .visual{order:2;width:100%;max-width:none;height:200px;object-fit:cover;border-radius:28px;margin-top:var(--espace-2)}
.hero h1{font-size:2rem;text-wrap:balance}
.chiffre{margin:var(--espace-1) 0}
.sous{margin-bottom:var(--espace-1)}}
@media (prefers-reduced-motion:reduce){
:root{--glisse:0px;--survol-monte:0px;--echelle-appui:1}
.cascade>*,.hero .visual,#res.listo{animation-duration:150ms;animation-delay:0s}}
.calc input,.calc select{background:#fff;border-radius:20px}
select,select::picker(select){appearance:base-select}
select::picker(select){border-radius:20px;border:1px solid var(--ligne,#e6dccd);background:#fff;padding:6px}