:root{
  --verge:#F2EADB;--velin:#FAF6EE;--encre:#2A2220;--pierre:#6B5F56;--filet:#D8CBB6;
  --vin:#5E1A28;--vin-texte:#FAF6EE;--sauge:#4A5B47;--or:#9A7B3F;
  --serif:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
  --serif-t:"Libre Caslon Text",Georgia,serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --verge:#1C1816;--velin:#26211E;--encre:#EDE4D6;--pierre:#ADA093;--filet:#3A332E;
  --vin:#D49AA2;--vin-texte:#1C1816;--sauge:#9DB59A;--or:#B8995C;}}
:root[data-theme="dark"]{--verge:#1C1816;--velin:#26211E;--encre:#EDE4D6;--pierre:#ADA093;--filet:#3A332E;
  --vin:#D49AA2;--vin-texte:#1C1816;--sauge:#9DB59A;--or:#B8995C;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--verge);color:var(--encre);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--vin)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* En-tête */
header.top{border-bottom:1px solid var(--filet)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font:400 28px/1 var(--serif);color:var(--encre);text-decoration:none;letter-spacing:.01em}
.logo em{color:var(--vin);font-style:normal}
nav.top a{color:var(--pierre);text-decoration:none;margin-left:24px;font-size:15px}
nav.top a:hover{color:var(--encre)}
nav.top a.btn{color:var(--vin-texte)}
@media(max-width:720px){nav.top a:not(.btn){display:none}}
.btn{display:inline-block;background:var(--vin);color:var(--vin-texte);text-decoration:none;font-weight:600;
  padding:14px 26px;border-radius:4px;border:1px solid var(--vin);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:9px 16px;font-size:15px}
.btn.ghost{background:transparent;color:var(--vin)}
/* Hero */
.hero{padding:88px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero{padding:48px 0}}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pierre);margin:0 0 18px}
.kicker::before{content:"";display:inline-block;width:28px;height:1px;background:var(--or);vertical-align:middle;margin-right:12px}
h1{font:400 clamp(40px,6vw,64px)/1.05 var(--serif);margin:0 0 22px;letter-spacing:-.01em}
h1 em{font-family:var(--serif-t);font-style:italic;color:var(--vin)}
.lead{font-size:20px;color:var(--pierre);max-width:34em;margin:0 0 32px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.note{font-size:14px;color:var(--pierre)}
/* Facture fictive */
.facture{background:var(--velin);border:1px solid var(--filet);padding:32px 32px 28px;font-variant-numeric:tabular-nums;position:relative}
.facture::before{content:"";position:absolute;inset:6px;border:1px solid var(--filet);pointer-events:none}
.facture .entete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.facture .num{font:italic 18px var(--serif-t);color:var(--or)}
.facture .client{font-size:14px;color:var(--pierre)}
.facture table{width:100%;border-collapse:collapse;font-size:15px}
.facture td{padding:9px 0;border-bottom:1px solid var(--filet)}
.facture td:last-child{text-align:right}
.facture tr.total td{border-bottom:3px double var(--encre);font-weight:600;padding-top:14px}
.facture .part{margin-top:22px;display:flex;justify-content:space-between;align-items:baseline}
.facture .part span{font-size:14px;color:var(--pierre)}
.facture .part strong{font:400 40px/1 var(--serif);color:var(--vin)}
.facture .statut{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--sauge);font-weight:600;margin-top:16px}
/* Sections */
section{padding:80px 0;border-top:1px solid var(--filet)}
h2{font:400 clamp(30px,4vw,42px)/1.15 var(--serif);margin:0 0 14px}
.sous{color:var(--pierre);max-width:38em;margin:0 0 48px;font-size:18px}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--filet);border-left:1px solid var(--filet)}
@media(max-width:860px){.grille{grid-template-columns:1fr}}
.carte{padding:30px 28px;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);background:var(--velin)}
.carte .n{font:italic 15px var(--serif-t);color:var(--or)}
.carte h3{font:400 23px/1.25 var(--serif-t);margin:8px 0 8px}
.carte p{margin:0;color:var(--pierre);font-size:16px}
/* Pour qui */
.pourqui{display:flex;flex-wrap:wrap;gap:10px}
.pourqui span{border:1px solid var(--filet);background:var(--velin);padding:8px 16px;border-radius:999px;font-size:15px}
/* Tarif */
.tarif{max-width:520px;margin:0 auto;text-align:center;background:var(--velin);border:1px solid var(--filet);padding:44px 36px;position:relative}
.tarif::before{content:"";position:absolute;inset:6px;border:1px solid var(--filet);pointer-events:none}
.prix{font:400 76px/1 var(--serif);margin:10px 0 4px}
.prix small{font:400 20px var(--sans);color:var(--pierre)}
.tarif ul{list-style:none;padding:0;margin:28px 0 32px;text-align:left}
.tarif li{padding:10px 0 10px 30px;border-bottom:1px solid var(--filet);position:relative}
.tarif li::before{content:"✓";position:absolute;left:4px;color:var(--sauge);font-weight:700}
.mention{font-size:13px;color:var(--pierre);margin-top:16px}
/* FAQ */
details{border-bottom:1px solid var(--filet);padding:18px 0}
details:first-of-type{border-top:1px solid var(--filet)}
summary{cursor:pointer;font:400 20px var(--serif-t);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--vin);font-family:var(--sans)}
details[open] summary::after{content:"−"}
details p{color:var(--pierre);margin:12px 0 0;max-width:46em}
/* Pied */
footer{border-top:3px double var(--filet);padding:40px 0 56px;font-size:14px;color:var(--pierre)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer a{color:var(--pierre);margin-right:18px}
/* Pages légales */
.legal{padding:56px 0 80px}
.legal .wrap{max-width:760px}
.legal h1{font-size:44px}
.legal h2{font-size:26px;margin:40px 0 10px}
.legal p,.legal li{color:var(--encre)}
.legal .maj{color:var(--pierre);font-size:14px}
:focus-visible{outline:2px solid var(--vin);outline-offset:3px}
/* ---- Animations ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.vu{opacity:1;transform:none}
.grille .carte.reveal{transition-delay:calc(var(--i,0)*90ms)}
h1 .mot{display:inline-block;opacity:0;transform:translateY(.45em);animation:monte .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 150ms)}
@keyframes monte{to{opacity:1;transform:none}}
.facture{opacity:0;transform:translateY(30px) rotate(-1.2deg);animation:pose 1.1s .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes pose{to{opacity:1;transform:rotate(-1.2deg)}}
.facture tr{opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s}
.facture tr.ecrit{opacity:1;transform:none}
.facture .trait{height:1px;background:var(--encre);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1);margin-top:2px}
.facture .trait.ecrit{transform:scaleX(1)}
.facture .trait+.trait{margin-top:3px}
.facture .statut{opacity:0;transition:opacity .6s}
.facture .statut.ecrit{opacity:1}
.tampon{position:absolute;right:26px;top:70px;border:2px solid var(--sauge);color:var(--sauge);font:600 13px var(--sans);letter-spacing:.15em;
  text-transform:uppercase;padding:6px 12px;transform:rotate(8deg) scale(2.2);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.tampon.ecrit{transform:rotate(8deg) scale(1);opacity:.85}
.fond-filets{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.fond-filets span{position:absolute;left:-10%;right:-10%;height:1px;background:var(--filet);opacity:.55}
.hero{position:relative;isolation:isolate}
header.top{position:sticky;top:0;z-index:10;background:var(--verge);transition:box-shadow .3s}
header.top.defile{box-shadow:0 1px 0 var(--filet)}
.carte{transition:background .3s,transform .3s}
.carte:hover{transform:translateY(-3px)}
.prix .chiffre{display:inline-block}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.facture,.facture tr,h1 .mot,.facture .statut{opacity:1!important;transform:none!important}
  .facture .trait{transform:none!important}.tampon{opacity:.85;transform:rotate(8deg)}
}
.rassure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:20px 0 0;font-size:14px;color:var(--pierre)}
.rassure li::before{content:"✓ ";color:var(--sauge);font-weight:700}
.vin{color:var(--vin)}
h2 em{font-family:var(--serif-t);font-style:italic;color:var(--vin)}
.probleme h2{font-size:clamp(30px,4.4vw,48px);max-width:20em}
.douleurs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:44px 0 36px}
@media(max-width:860px){.douleurs{grid-template-columns:1fr}}
.douleurs div{border-top:3px double var(--filet);padding-top:18px;color:var(--pierre);transition-delay:calc(var(--i,0)*120ms)}
.douleurs strong{color:var(--encre);font-weight:600}
.bascule{font:400 22px/1.5 var(--serif-t);max-width:36em;margin:0}
.bascule strong{color:var(--vin);font-weight:400;font-style:italic}
.aa{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--filet);margin-top:36px}
@media(max-width:720px){.aa{grid-template-columns:1fr}}
.aa .col{padding:30px 30px 24px}
.aa h3{font:italic 22px var(--serif-t);margin:0 0 14px}
.aa ul{list-style:none;padding:0;margin:0}
.aa li{padding:11px 0 11px 28px;border-top:1px solid var(--filet);position:relative}
.avant{color:var(--pierre)}
.avant li::before{content:"✕";position:absolute;left:2px;color:#A1331F}
.apres{background:var(--velin);border-left:1px solid var(--filet)}
@media(max-width:720px){.apres{border-left:0;border-top:1px solid var(--filet)}}
.apres li::before{content:"✓";position:absolute;left:2px;color:var(--sauge);font-weight:700}
.final{text-align:center}
.final .sous{margin:0 auto 32px}
.signature{font:italic 16px var(--serif-t);color:var(--pierre);margin-top:36px}
.facture td:last-child{white-space:nowrap}
@media(max-width:600px){.tampon{top:auto;bottom:16px;right:18px}.facture{padding:26px 22px}.fond-filets{opacity:.4}}