:root{
  --sea:#0E3B3C; --sea2:#12514f; --ink:#14201F; --ink2:#4A5754; --mist:#EEF2F0; --mint:#CFE5DD;
  --sun:#F0A63A; --white:#fff; --line:#DCE5E1;
  --display:'Fraunces',Georgia,serif; --body:'DM Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(27px,4vw,40px);margin-bottom:14px}
h3{font-size:18px}
section{padding:64px 0}
section.alt{background:var(--mist)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sea);font-weight:700;margin-bottom:10px}
p.big{font-size:17px;max-width:62ch;color:var(--ink2)}
.btn{display:inline-block;background:var(--sun);color:var(--ink);font-weight:700;padding:16px 26px;border-radius:999px;
     text-decoration:none;border:none;font-size:16px;font-family:inherit;cursor:pointer;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.btn.ghost{background:transparent;border:2px solid var(--mint);color:var(--mint)}
/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sea);white-space:nowrap}
.logo .sym{flex:none;display:block}
.logo .wm{font-family:var(--display);font-weight:300;font-size:21px;letter-spacing:-.015em;line-height:1}
.logo .wm b{font-weight:600}
@media(max-width:420px){.logo .wm{font-size:18px}.logo .sym{width:28px;height:28px}}
nav .links{display:none;gap:22px;font-size:15px;font-weight:500}
nav .links a{text-decoration:none}
@media(min-width:860px){nav .links{display:flex}}
nav .tel{font-weight:700;color:var(--sea);text-decoration:none;font-size:15px;white-space:nowrap}
/* hero */
.hero{background:var(--sea);color:var(--white);padding:60px 0 56px}
.hero .grid{display:grid;gap:36px}
@media(min-width:900px){.hero .grid{grid-template-columns:1.15fr .85fr;align-items:center}}
.hero h1{font-size:clamp(34px,6vw,64px);font-weight:300;max-width:13ch}
.hero h1 em{font-style:italic;font-weight:600;color:var(--sun)}
.hero p.lead{margin:20px 0 28px;font-size:17px;max-width:46ch;color:var(--mint)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:13px;color:var(--mint);margin-top:18px;max-width:44ch}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
.card,.step,form,table{min-width:0}
body{overflow-x:hidden}
.card{background:var(--white);color:var(--ink);border-radius:18px;padding:20px 18px}
.card .who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);font-weight:700}
.card .price{font-family:var(--display);font-size:clamp(38px,7vw,54px);font-weight:600;line-height:1;margin:6px 0 8px}
.card .price small{font-size:15px;font-family:var(--body);font-weight:500}
.card .inc{font-size:13.5px;color:var(--ink2);line-height:1.5}
/* bandeau */
.strip{background:var(--sea2);color:var(--mint);font-size:13.5px;padding:14px 0}
.strip .wrap{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;text-align:center}
/* colonnes */
.two{display:grid;gap:26px}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr;align-items:start}}
.steps{display:grid;gap:16px}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps.q{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px}
section.alt .step{background:var(--white)}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;
         font-weight:700;font-size:14px;margin-bottom:10px}
.step h3{margin-bottom:6px}
.step p{font-size:14.5px;color:var(--ink2)}
ul.check{list-style:none;display:grid;gap:10px;margin-top:14px}
ul.check li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ink2)}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--sea);font-weight:700}
ul.check li b{color:var(--ink);display:block}
/* tableau prix */
table{width:100%;border-collapse:collapse;margin-top:18px;background:#fff;border-radius:14px;overflow:hidden}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:var(--sea);color:#fff;font-weight:700;font-size:13.5px}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.total td{font-weight:700;background:var(--mist);border-bottom:none}
p.small{font-size:13.5px;color:var(--ink2);margin-top:12px;max-width:70ch}
/* formulaire */
form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.f{margin-bottom:14px}
.f label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.f input,.f select{width:100%;padding:13px 12px;border:1.5px solid var(--line);border-radius:11px;font-size:16px;
  font-family:inherit;background:#fff;color:var(--ink)}
.fg{display:grid;gap:14px}
@media(min-width:640px){.fg{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink2)}
.consent input{width:18px;height:18px;flex:none;margin-top:2px}
.result{display:none;margin-top:18px;background:var(--mist);border-radius:14px;padding:18px}
.result .big{font-family:var(--display);font-size:34px;font-weight:600;color:var(--sea);line-height:1.1}
.result p{font-size:15px;color:var(--ink2);margin-top:8px}
.result ul{margin:10px 0 0 18px;font-size:14.5px;color:var(--ink2)}
/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}
details summary{font-weight:700;cursor:pointer;font-size:16px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--sea);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin-top:10px;font-size:15px;color:var(--ink2)}
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.cities span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--ink2)}
/* pied */
footer{background:var(--ink);color:#B9C6C2;padding:40px 0;font-size:13.5px}
footer .wrap{display:grid;gap:14px}
footer b{color:#fff}
footer a{color:var(--mint)}
.mentions{font-size:12.5px;color:#8FA09B;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* --- guide / articles --- */
.fnav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.fnav a{color:var(--mint)}
.fil{font-size:13px;color:var(--ink2);margin-bottom:18px}
.fil a{color:var(--sea)}
article{max-width:720px;margin:0 auto}
article h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:16px}
article .chapo{font-size:19px;color:var(--ink2);margin-bottom:8px}
article h2{font-size:clamp(23px,3vw,30px);margin:38px 0 12px}
article h3{font-size:19px;margin:26px 0 8px}
article p{margin-bottom:14px;font-size:17px}
article ul,article ol{margin:0 0 16px 22px}
article li{margin-bottom:8px;font-size:16.5px;color:var(--ink2)}
article li b,article li strong{color:var(--ink)}
.encadre{background:var(--mist);border-left:4px solid var(--sun);border-radius:0 14px 14px 0;padding:18px 20px;margin:24px 0}
.encadre p{margin:0;font-size:16px}
.encadre b{color:var(--sea)}
.meta{font-size:13px;color:var(--ink2);margin-bottom:26px}
.cartes{display:grid;gap:16px;margin-top:24px}
@media(min-width:760px){.cartes{grid-template-columns:repeat(2,1fr)}}
.carte{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:block;text-decoration:none}
.carte:hover{border-color:var(--sea)}
.carte h3{font-family:var(--display);font-size:19px;margin-bottom:6px;color:var(--sea)}
.carte p{font-size:14.5px;color:var(--ink2);margin:0}
.carte .lire{font-size:13px;font-weight:700;color:var(--sun);margin-top:10px;display:block}
table.simple th{background:var(--mist);color:var(--ink)}
.somm{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 8px}
.somm a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;
  font-weight:600;text-decoration:none;color:var(--sea)}
.somm a:hover{border-color:var(--sea)}
.somm a span{color:var(--ink2);font-weight:400}
/* --- déroulé étape par étape --- */
.etapes{margin-top:30px;border-left:2px solid var(--line);padding-left:0}
.etape{display:grid;gap:6px;padding:0 0 30px 22px;position:relative;margin-left:2px}
@media(min-width:820px){.etape{grid-template-columns:170px 1fr;gap:26px}}
.etape::before{content:"";position:absolute;left:-9px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--sun);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.etape .quand b{display:block;font-family:var(--display);font-size:17px;color:var(--sea)}
.etape .quand span{font-size:13px;color:var(--ink2)}
.etape .quoi h3{font-size:19px;margin-bottom:6px}
.etape .quoi h3 .opt{font-family:var(--body);font-size:13px;font-weight:400;color:var(--ink2)}
.etape .quoi>p{font-size:16px;color:var(--ink2);margin-bottom:12px}
.roles{display:grid;gap:10px}
@media(min-width:640px){.roles{grid-template-columns:1fr 1fr}}
.role{border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5}
.role span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.role.nous{background:var(--mist)}.role.nous span{color:var(--sea)}
.role.vous{background:#fdf4e8}.role.vous span{color:#b8770f}