/* ============================================================
   THE DIGITAL CO-HOST — v2 · feuille de styles commune
   Palette marine & or
   ============================================================ */
:root{
  --bg:#FBF8F1; --surf:#FFFFFF; --surf-2:#F5F1E8;
  --ink:#14212C; --ink-soft:#3C4C59; --mut:#78838D; --line:#E6DFD2;
  --band:#16324A; --band-2:#1B3D59; --band-ink:#F3EFE6; --band-mut:#A9BCCB;
  --acc:#8A6A28; --acc-2:#A9853A; --acc-band:#D8B978;
  --nav:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; margin:0; letter-spacing:.005em}
.wrap{width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.wrap-w{width:100%; max-width:1520px; margin:0 auto; padding:0 clamp(20px,4vw,44px)}
.wrap-n{width:100%; max-width:980px; margin:0 auto; padding:0 clamp(20px,5vw,56px)}
section{position:relative}
.pad{padding:clamp(72px,10vw,132px) 0}
.pad-s{padding:clamp(52px,7vw,92px) 0}

.lab{display:flex; align-items:center; gap:14px; font-size:.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--acc); margin-bottom:22px}
.lab::before{content:""; width:34px; height:1px; background:currentColor; opacity:.7}
.lab.mid{justify-content:center}
.lab.mid::after{content:""; width:34px; height:1px; background:currentColor; opacity:.7}
h2.big{font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.12; font-weight:300; letter-spacing:-.01em}
h2.big em{color:var(--acc); font-style:italic}
.on-band .lab{color:var(--acc-band)}
.on-band h2.big{color:var(--band-ink)}
.on-band h2.big em{color:var(--acc-band)}
.lede{max-width:62ch; color:var(--ink-soft); font-size:1.02rem; margin:20px 0 0}
.on-band .lede{color:var(--band-mut)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:Manrope,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:13px 26px; border-radius:1px; border:1px solid transparent;
  cursor:pointer; transition:.32s cubic-bezier(.2,.7,.25,1); white-space:nowrap}
.btn-fill{background:var(--acc); color:#fff; border-color:var(--acc)}
.btn-fill:hover{background:var(--acc-2); border-color:var(--acc-2); transform:translateY(-2px)}
.btn-fill[disabled]{opacity:.34; cursor:default; transform:none}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px)}
.btn-dark{background:var(--band); color:var(--band-ink); border-color:var(--band)}
.btn-dark:hover{background:var(--band-2); border-color:var(--band-2); transform:translateY(-2px)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--acc); color:var(--acc)}
.btn-light{background:#fff; color:var(--band); border-color:#fff}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,0,0,.5)}
.btn-line{background:transparent; color:var(--band-ink); border-color:rgba(255,255,255,.4)}
.btn-line:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.75)}
.tlink{display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acc);
  border-bottom:1px solid currentColor; padding-bottom:5px; transition:.3s}
.tlink:hover{gap:15px}
.on-band .tlink{color:var(--acc-band)}

/* ---------- Navigation ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:90; height:var(--nav);
  display:flex; align-items:center; transition:background .4s, box-shadow .4s, height .4s}
.nav.on,.nav.solid{background:rgba(255,255,255,.97); box-shadow:0 1px 0 var(--line); height:74px; backdrop-filter:blur(12px)}
.nav .wrap-w{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px}
.brand{justify-self:start; display:flex; align-items:center}
.brand img{height:52px; width:auto; transition:height .4s}
.nav.on .brand img,.nav.solid .brand img{height:44px}
.brand .lw{display:block} .brand .ld{display:none}
.nav.on .brand .lw,.nav.solid .brand .lw{display:none}
.nav.on .brand .ld,.nav.solid .brand .ld{display:block}
.nav-links{justify-self:center; display:flex; gap:clamp(14px,1.9vw,30px); align-items:center}
.nav-links a{font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.92); position:relative; padding:6px 0; transition:color .3s; white-space:nowrap}
.nav.on .nav-links a,.nav.solid .nav-links a{color:var(--ink-soft)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--acc); transition:width .3s}
.nav-links a:hover::after,.nav-links a.cur::after{width:100%}
.nav-links a:hover,.nav-links a.cur{color:var(--acc)}
.nav-right{justify-self:end; display:flex; align-items:center; gap:12px}
.nav .btn{padding:12px 20px; font-size:.64rem}
.nav:not(.on):not(.solid) .navcta{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.nav:not(.on):not(.solid) .navcta:hover{background:rgba(255,255,255,.14)}
.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:#fff}
.nav.on .burger,.nav.solid .burger{color:var(--ink)}
.burger span{display:block; width:22px; height:1.4px; background:currentColor; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:1.4px; background:currentColor}
.burger span::before{top:-7px} .burger span::after{top:7px}
@media(max-width:1140px){
  .nav .wrap-w{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .burger{display:flex}
  .nav .navcta{display:none}
  .brand img{height:44px} .nav.on .brand img,.nav.solid .brand img{height:38px}
}
.mpanel{position:fixed; top:0; left:0; right:0; z-index:89; background:var(--surf);
  padding:100px clamp(20px,6vw,40px) 30px; transform:translateY(-102%);
  transition:transform .45s cubic-bezier(.2,.7,.25,1); box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.mpanel.open{transform:translateY(0)}
.mpanel a{display:block; font-family:"Cormorant Garamond",serif; font-size:1.6rem; padding:14px 0; border-bottom:1px solid var(--line)}
.mpanel .btn{margin-top:20px; width:100%}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; width:100%}
.hero.short{min-height:clamp(440px,62svh,640px)}
.slides{position:absolute; inset:0; z-index:0; background:#0B1620}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease}
.slide.on{opacity:1}
.slide.ph{background-size:cover; background-position:center; transform:scale(1.02); transition:opacity 1.5s ease, transform 8s linear}
.slide.ph.on{transform:scale(1.1)}
.slide video{width:100%; height:100%; object-fit:cover; display:block}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,16,24,.66) 0%,rgba(8,16,24,.38) 34%,rgba(8,16,24,.54) 72%,rgba(8,16,24,.8) 100%)}
.hero-in{position:relative; z-index:2; width:100%; max-width:1040px; padding:130px clamp(20px,5vw,40px) 100px}
.hero.short .hero-in{padding:150px clamp(20px,5vw,40px) 70px}
.hero-lab{font-size:.66rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.82); display:flex; align-items:center; justify-content:center; gap:16px; margin:0}
.hero-lab::before,.hero-lab::after{content:""; width:38px; height:1px; background:rgba(255,255,255,.5)}
.hero h1{color:#fff; font-size:clamp(2rem,4.1vw,3.5rem); line-height:1.16; font-weight:300;
  margin:26px 0 0; text-shadow:0 2px 40px rgba(0,0,0,.35); text-wrap:balance}
.hero h1 em{font-style:italic}
.hero p.sub{color:rgba(255,255,255,.9); font-size:clamp(.98rem,1.4vw,1.08rem); max-width:62ch;
  margin:24px auto 0; text-shadow:0 1px 20px rgba(0,0,0,.45)}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px}
.cue{position:absolute; left:50%; transform:translateX(-50%); bottom:32px; z-index:2;
  color:rgba(255,255,255,.8); font-size:.58rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
.cue svg{width:15px; height:15px; animation:bob 2.2s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.dots{position:absolute; z-index:2; bottom:34px; right:clamp(20px,5vw,48px); display:flex; gap:8px}
.dots i{width:22px; height:2px; background:rgba(255,255,255,.34); display:block; transition:.4s; cursor:pointer}
.dots i.on{background:var(--acc-band); width:34px}

/* ---------- Bandeau chiffres ---------- */
.stats{background:var(--band); color:var(--band-ink); width:100%}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr); align-items:center}
.stats .it{padding:clamp(34px,4.4vw,56px) 16px; text-align:center; position:relative}
.stats .it + .it::before{content:""; position:absolute; left:0; top:24%; height:52%; width:1px; background:rgba(255,255,255,.17)}
.stats .n{font-family:"Cormorant Garamond",serif; font-size:clamp(2.1rem,3.6vw,3rem); font-weight:300; line-height:1; color:#fff}
.stats .k{font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--band-mut); margin-top:12px}
@media(max-width:780px){.stats .grid{grid-template-columns:repeat(2,1fr)}
  .stats .it:nth-child(2n+1)::before{display:none}
  .stats .it:nth-child(3),.stats .it:nth-child(4){border-top:1px solid rgba(255,255,255,.14)}}

/* ---------- Ticker ---------- */
.ticker{background:var(--surf); border-bottom:1px solid var(--line); overflow:hidden; width:100%; padding:18px 0}
.tk-in{display:flex; width:max-content; animation:tk 46s linear infinite}
.tk-in span{font-family:"Cormorant Garamond",serif; font-size:1.16rem; color:var(--ink-soft);
  padding:0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px}
.tk-in span::after{content:"◆"; font-size:.4rem; color:var(--acc); transform:translateY(-3px)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Cartes numérotées ---------- */
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(42px,5vw,64px)}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--surf); border:1px solid var(--line); padding:clamp(26px,2.6vw,38px);
  position:relative; overflow:hidden; transition:.45s cubic-bezier(.2,.7,.25,1)}
.card::before{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--acc); transition:width .55s cubic-bezier(.2,.7,.25,1)}
.card:hover{transform:translateY(-7px); box-shadow:0 30px 60px -38px rgba(20,33,44,.4); border-color:#ded5c2}
.card:hover::before{width:100%}
.card .num{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:2.1rem; color:var(--line); line-height:1; transition:color .45s}
.card:hover .num{color:var(--acc)}
.card h3{font-size:1.42rem; font-weight:500; margin:16px 0 12px; line-height:1.24}
.card p{color:var(--ink-soft); font-size:.94rem; margin:0}
.pill{display:inline-flex; margin-top:22px; font-size:.58rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); border:1px solid var(--line); border-radius:999px; padding:8px 16px; transition:.45s}
.card:hover .pill{border-color:var(--acc); background:color-mix(in srgb,var(--acc) 8%,transparent)}

/* ---------- Les chiffres ---------- */
.figs-sec{width:100%; background-size:cover; background-position:center; position:relative; isolation:isolate}
.figs-sec::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(9,20,31,.9),rgba(9,20,31,.84))}
.figs-cap{display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:.62rem;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--band-mut)}
.figs-cap::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--acc-band)}
.figs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); margin-top:clamp(40px,5vw,60px)}
@media(max-width:860px){.figs{grid-template-columns:1fr}}
.fig{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:clamp(24px,2.5vw,34px); backdrop-filter:blur(6px)}
.fig .k{font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--band-mut)}
.fig .v{font-family:"Cormorant Garamond",serif; font-size:clamp(2.4rem,4.4vw,3.3rem); font-weight:300;
  line-height:1.05; margin:12px 0 4px; color:#fff}
.fig .m{font-size:.86rem; color:var(--band-mut)}
.bars{display:flex; gap:10px; align-items:flex-end; height:46px; margin:20px 0 26px}
.bars .bar{flex:1; background:rgba(255,255,255,.2); position:relative; border-radius:1px 1px 0 0}
.bars .bar.you{background:var(--acc-band)}
.bars small{position:absolute; bottom:-18px; left:0; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-mut); font-weight:700}
.fig .d{display:inline-block; font-size:.92rem; font-weight:800; color:#0F2231; background:var(--acc-band); padding:6px 13px; border-radius:1px}
.src{margin-top:30px; font-size:.74rem; color:rgba(169,188,203,.85); line-height:1.6; max-width:96ch}

/* ---------- Frise ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px); margin-top:clamp(48px,6vw,80px); position:relative}
.steps::before{content:""; position:absolute; top:19px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.step{text-align:center; position:relative}
.step .b{width:38px; height:38px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px; position:relative; z-index:2;
  font-family:"Cormorant Garamond",serif; font-size:1.05rem; color:var(--acc); transition:.4s}
.step:hover .b{background:var(--acc); color:#fff; border-color:var(--acc); transform:scale(1.08)}
.step h3{font-size:1.26rem; font-weight:500; margin-bottom:10px}
.step p{color:var(--ink-soft); font-size:.91rem; margin:0 auto; max-width:30ch}
.step .tag{display:block; margin-top:16px; font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mut)}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)} .steps::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Bandeau photo ---------- */
.photoband{position:relative; width:100%; min-height:clamp(360px,50vw,540px); display:flex; align-items:center;
  justify-content:center; text-align:center; background-size:cover; background-position:center}
.photoband::after{content:""; position:absolute; inset:0; background:rgba(10,18,26,.58)}
.photoband .in{position:relative; z-index:2; padding:clamp(60px,9vw,110px) clamp(20px,5vw,40px); max-width:1000px}
.photoband q{display:block; font-family:"Cormorant Garamond",serif; font-weight:300; color:#fff;
  font-size:clamp(1.7rem,3.7vw,3rem); line-height:1.2; quotes:none}
.photoband q em{color:var(--acc-band); font-style:italic}

/* ---------- Témoignage ---------- */
.testi{background:var(--band); color:var(--band-ink); width:100%}
.tcard{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); padding:clamp(28px,3.4vw,50px);
  margin-top:clamp(36px,4vw,54px); max-width:960px; display:flex; gap:clamp(22px,3vw,40px); align-items:flex-start; flex-wrap:wrap}
.tph{width:78px; height:78px; border-radius:50%; background-size:cover; background-position:center;
  flex-shrink:0; position:relative; border:1px solid rgba(255,255,255,.25)}
.tph .vb{position:absolute; right:-3px; bottom:-3px; width:24px; height:24px; border-radius:50%;
  background:#E31C5F; border:2px solid var(--band); display:flex; align-items:center; justify-content:center}
.tph .vb svg{width:13px; height:13px}
.tbody{flex:1; min-width:250px}
.stars{color:var(--acc-band); letter-spacing:.24em; font-size:.8rem}
.tbody q{display:block; font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:300;
  font-size:clamp(1.18rem,2.1vw,1.62rem); line-height:1.44; color:#fff; margin:16px 0 20px; quotes:none}
.tbody .who{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.tbody .role{font-size:.79rem; color:var(--band-mut); margin-top:5px}

/* ---------- Présentation ---------- */
.pres{background:var(--surf); width:100%; display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); align-items:stretch}
.pres .ph{background-size:cover; background-position:center 22%; min-height:clamp(380px,44vw,620px)}
.pres .tx{padding:clamp(48px,6vw,96px) clamp(24px,5vw,80px)}
.pres h2{font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:300; line-height:1.14; margin-bottom:24px}
.pres h2 em{color:var(--acc); font-style:italic}
.pres p{color:var(--ink-soft); font-size:1rem; margin:0 0 18px; max-width:56ch}
.pres p.strong{color:var(--ink); font-weight:600}
.pres blockquote{margin:26px 0 0; padding-left:20px; border-left:2px solid var(--acc);
  font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.22rem; line-height:1.48; color:var(--ink)}
.pres .sig{margin-top:26px; font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
@media(max-width:900px){.pres{grid-template-columns:1fr} .pres .ph{min-height:56vw}}

/* ---------- Par où commencer ---------- */
.start{background:var(--band-2); color:var(--band-ink); width:100%}
.scards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(42px,5vw,62px)}
@media(max-width:900px){.scards{grid-template-columns:1fr; max-width:560px}}
.scard{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); padding:clamp(26px,2.6vw,38px);
  display:flex; flex-direction:column; transition:.42s cubic-bezier(.2,.7,.25,1)}
.scard:hover{background:rgba(255,255,255,.11); transform:translateY(-6px); border-color:rgba(255,255,255,.35)}
.scard .tagp{align-self:flex-start; font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:7px 15px; color:var(--acc-band)}
.scard h3{font-size:clamp(1.45rem,2.2vw,1.8rem); font-weight:400; margin:22px 0 12px; line-height:1.2; color:#fff}
.scard h3 em{color:var(--acc-band); font-style:italic}
.scard p{color:var(--band-mut); font-size:.92rem; margin:0 0 26px}
.scard .btn{margin-top:auto; align-self:flex-start}
.scard .fine{font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:16px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(260px,.8fr) 1.6fr; gap:clamp(34px,5vw,80px); align-items:start}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:"Cormorant Garamond",serif; font-size:clamp(1.12rem,1.9vw,1.4rem); font-weight:500; transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--acc)}
.acc summary::after{content:""; position:absolute; right:8px; top:50%; width:13px; height:1.5px; background:var(--acc); transform:translateY(-50%)}
.acc summary::before{content:""; position:absolute; right:14px; top:50%; width:1.5px; height:13px; background:var(--acc); transform:translateY(-50%); transition:.3s}
.acc details[open] summary::before{transform:translateY(-50%) rotate(90deg); opacity:0}
.acc p{margin:0 0 26px; color:var(--ink-soft); max-width:74ch; font-size:.95rem}

/* ---------- Dernier mot + formulaire ---------- */
.last{background:var(--surf-2); text-align:center; width:100%}
.last h2{font-size:clamp(1.9rem,4.2vw,3.4rem); font-weight:300; line-height:1.2; max-width:24ch; margin:0 auto; text-wrap:balance}
.last h2 em{color:var(--acc); font-style:italic}
.cform{max-width:880px; margin:clamp(38px,4.4vw,56px) auto 0; text-align:left}
.cform .r{display:flex; gap:clamp(14px,2vw,26px); flex-wrap:wrap; align-items:flex-end}
.cform .f{flex:1 1 200px; min-width:0}
.cform label{display:block; font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.cform input[type=text],.cform input[type=url],.cform input[type=email]{width:100%; padding:10px 2px; border:0;
  border-bottom:1px solid var(--line); background:transparent; font-family:Manrope,sans-serif; font-size:.98rem; color:var(--ink)}
.cform input::placeholder{color:#B9B2A4}
.cform input:focus{outline:none; border-bottom-color:var(--acc)}
.cform .bot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px}
.cform .cons{display:flex; align-items:flex-start; gap:10px; font-size:.78rem; color:var(--mut); max-width:46ch; text-align:left}
.cform .cons input{margin-top:3px; accent-color:var(--acc)}
.cform .mi{font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-top:18px; text-align:center}

/* ---------- Interlocuteur ---------- */
.contactblk{background:var(--bg); width:100%; border-top:1px solid var(--line)}
.cb{display:flex; align-items:center; justify-content:center; gap:clamp(22px,3vw,44px); flex-wrap:wrap; text-align:left}
.cb .ph{width:92px; height:92px; border-radius:50%; background-size:cover; background-position:center 20%; border:1px solid var(--line); flex-shrink:0}
.cb .tx h3{font-size:1.6rem; font-weight:500; margin-bottom:6px}
.cb .tx p{margin:0; color:var(--ink-soft); font-size:.94rem; max-width:44ch}
.cb .links{display:flex; gap:10px; flex-wrap:wrap}
@media(max-width:760px){.cb{flex-direction:column; text-align:center} .cb .tx p{margin:0 auto}}

/* ---------- Pied de page ---------- */
.ft{background:var(--band); color:var(--band-mut); width:100%; padding:clamp(48px,6vw,76px) 0 clamp(26px,3vw,34px)}
.ft-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft img.fl{height:62px; width:auto}
.ft h4{font-family:Manrope,sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--acc-band); margin:0 0 16px}
.ft ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.9rem}
.ft a:hover{color:var(--acc-band)}
.ft .ct{display:flex; align-items:center; gap:10px}
.ft .ct svg{width:15px; height:15px; color:var(--acc-band); flex-shrink:0}
.ft .bar{margin-top:clamp(34px,4vw,54px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.76rem}
.ft .tagline{margin:16px 0 0; font-size:.86rem; max-width:34ch}

/* ---------- Boutons flottants ---------- */
.fab{position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:85; width:52px; height:52px;
  border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.5)}
.fab svg{width:23px; height:23px}
.fab.mail{bottom:calc(78px + env(safe-area-inset-bottom,0px)); right:20px; width:40px; height:40px;
  background:#fff; color:var(--acc); border:1.5px solid var(--line)}
.fab.mail svg{width:17px; height:17px}
@media(min-width:1141px){.fab{display:none}}

/* ---------- Apparition ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.25,1),transform .9s cubic-bezier(.2,.7,.25,1)}
.rv.in{opacity:1; transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
.d4{transition-delay:.36s}.d5{transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none} .slide{transition:opacity .4s} .slide.ph.on{transform:none}
  .tk-in{animation:none} .cue svg{animation:none}
}

/* ============================================================
   ESTIMATION — questionnaire
   ============================================================ */
.wiz{max-width:920px; margin:0 auto; background:var(--surf); border:1px solid var(--line);
  padding:clamp(28px,3.6vw,52px); box-shadow:0 40px 80px -60px rgba(20,33,44,.5)}
.wiz-top{display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.58rem;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mut)}
.wiz-bar{height:2px; background:var(--line); margin:14px 0 clamp(26px,3vw,38px); position:relative}
.wiz-bar i{position:absolute; left:0; top:0; height:100%; background:var(--acc); transition:width .5s cubic-bezier(.2,.7,.25,1)}
.wiz-q{display:none}
.wiz-q.on{display:block; animation:fadeq .5s cubic-bezier(.2,.7,.25,1)}
@keyframes fadeq{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.wiz-q h2{font-size:clamp(1.6rem,3.2vw,2.35rem); font-weight:300; line-height:1.16}
.wiz-q h2 em{color:var(--acc); font-style:italic}
.wiz-q .help{color:var(--mut); font-size:.9rem; margin:12px 0 0}
.opts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(24px,3vw,34px)}
.opts.two{grid-template-columns:repeat(2,1fr)}
.opts.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.opts,.opts.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.opts,.opts.two,.opts.four{grid-template-columns:1fr}}
.opt{background:var(--bg); border:1px solid var(--line); padding:20px 16px; text-align:center; cursor:pointer;
  font-family:Manrope,sans-serif; font-size:.92rem; font-weight:600; color:var(--ink); position:relative;
  transition:.3s cubic-bezier(.2,.7,.25,1); line-height:1.35}
.opt small{display:block; font-weight:500; font-size:.76rem; color:var(--mut); margin-top:5px}
.opt:hover{border-color:var(--acc); transform:translateY(-3px)}
.opt[aria-pressed="true"]{border-color:var(--acc); background:color-mix(in srgb,var(--acc) 7%,var(--bg))}
.opt[aria-pressed="true"]::after{content:"✓"; position:absolute; top:7px; right:10px; font-size:.8rem; color:var(--acc)}
.wiz-nav{display:flex; justify-content:space-between; gap:14px; margin-top:clamp(26px,3vw,36px); flex-wrap:wrap}
.wiz-res{display:none; text-align:center}
.wiz-res.on{display:block; animation:fadeq .6s cubic-bezier(.2,.7,.25,1)}
.res-fig{font-family:"Cormorant Garamond",serif; font-size:clamp(2.2rem,5.4vw,3.8rem); font-weight:300;
  line-height:1.1; margin:14px 0 6px; color:var(--ink)}
.res-eq{font-size:1.02rem; color:var(--ink-soft)}
.res-note{display:inline-block; margin-top:18px; font-size:.58rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:8px 16px}
.res-gain{margin:clamp(26px,3vw,36px) auto 0; max-width:560px; background:var(--band); color:var(--band-ink);
  padding:22px 26px; text-align:left; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.res-gain .g{font-family:"Cormorant Garamond",serif; font-size:2.2rem; color:var(--acc-band); line-height:1}
.res-gain p{margin:0; font-size:.9rem; color:var(--band-mut); flex:1; min-width:200px}
.res-src{margin-top:26px; font-size:.8rem; color:var(--mut); display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap}
.res-src b{color:var(--ink-soft); font-weight:700}
.res-recap{margin-top:14px; font-size:.86rem; color:var(--mut)}

/* ============================================================
   TARIF
   ============================================================ */
.price-hero{text-align:center}
.price-big{font-family:"Cormorant Garamond",serif; font-size:clamp(5rem,15vw,11rem); line-height:.9;
  font-weight:300; color:var(--acc); margin:0}
.price-sub{font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--mut); margin-top:18px}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(44px,5vw,68px)}
@media(max-width:860px){.incl{grid-template-columns:1fr}}
.incl-col h3{font-size:1.5rem; font-weight:500; margin-bottom:6px}
.incl-col .cp{font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:22px}
.incl-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.incl-col li{display:flex; gap:12px; align-items:flex-start; font-size:.96rem}
.incl-col li svg{width:17px; height:17px; flex-shrink:0; margin-top:4px; color:var(--acc)}
.incl-col li small{display:block; color:var(--mut); font-size:.84rem; margin-top:3px}
.incl-col.alt li svg{color:var(--mut)}
.ctable{width:100%; border-collapse:collapse; margin-top:clamp(36px,4vw,56px); font-size:.95rem}
.ctable th,.ctable td{padding:18px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.ctable thead th{font-family:Manrope,sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mut); border-bottom-color:var(--ink)}
.ctable td.us{font-weight:700; color:var(--acc)}
.ctable td.mk{color:var(--mut)}
.ctable tbody tr:hover{background:var(--surf)}
.exemple{background:var(--surf); border:1px solid var(--line); padding:clamp(26px,3vw,44px); margin-top:clamp(36px,4vw,56px)}
.exemple .row{display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem}
.exemple .row:last-child{border-bottom:0; font-weight:800; font-size:1.12rem; color:var(--acc)}
.exemple .row span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap}
.exemple .note{font-size:.78rem; color:var(--mut); margin:18px 0 0}

/* ---------- Champs du formulaire, plus lisibles et réactifs ---------- */
.cform .f{position:relative}
.cform input[type=text],.cform input[type=url],.cform input[type=email]{
  background:var(--surf); border:1px solid var(--line); border-bottom-width:2px; padding:15px 16px;
  border-radius:1px; transition:.3s cubic-bezier(.2,.7,.25,1)}
.cform .f:hover input{border-color:#CFC3A8; transform:translateY(-2px); box-shadow:0 12px 26px -20px rgba(20,33,44,.6)}
.cform input:focus{border-color:var(--acc); border-bottom-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 12%,transparent)}
.cform label{color:var(--ink-soft); transition:color .3s}
.cform .f:hover label,.cform .f:focus-within label{color:var(--acc)}

/* ---------- Ruban de progression de lecture ---------- */
.prog{position:fixed; top:0; left:0; height:2px; width:0; background:var(--acc); z-index:95; transition:width .12s linear}

/* ---------- Animations de défilement discrètes ---------- */
.par{will-change:background-position}
.rv-l{opacity:0; transform:translateX(-26px); transition:opacity 1s cubic-bezier(.2,.7,.25,1),transform 1s cubic-bezier(.2,.7,.25,1)}
.rv-l.in{opacity:1; transform:none}
.rv-z{opacity:0; transform:scale(.97); transition:opacity 1.1s cubic-bezier(.2,.7,.25,1),transform 1.1s cubic-bezier(.2,.7,.25,1)}
.rv-z.in{opacity:1; transform:none}
.stats .it{transition:background .5s}
.stats .it:hover{background:rgba(255,255,255,.04)}
@media(prefers-reduced-motion:reduce){.rv-l,.rv-z{opacity:1; transform:none} .prog{display:none}}

/* ---------- Contacts dans le bloc présentation ---------- */
.pres .ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}

/* ---------- Ajustements finaux ---------- */
.nav .navcta{background:var(--band); color:#fff; border-color:var(--band)}
.nav .navcta:hover{background:var(--band-2); border-color:var(--band-2)}
.nav:not(.on):not(.solid) .navcta{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55)}
.nav:not(.on):not(.solid) .navcta:hover{background:rgba(255,255,255,.2)}
.mpanel .btn{background:transparent; color:var(--ink-soft); border-color:var(--line); font-size:.62rem}
.mpanel .btn:hover{border-color:var(--acc); color:var(--acc); transform:none}
.hero h1{font-weight:400; font-size:clamp(2.2rem,4.6vw,3.9rem); letter-spacing:-.005em;
  text-shadow:0 2px 24px rgba(6,14,22,.6), 0 1px 60px rgba(6,14,22,.45)}
.hero p.sub{text-shadow:0 1px 16px rgba(6,14,22,.75)}
.hero::after{background:linear-gradient(180deg,rgba(7,15,23,.72) 0%,rgba(7,15,23,.5) 34%,rgba(7,15,23,.62) 72%,rgba(7,15,23,.84) 100%)}
.hero-cta .btn-fill{background:var(--band); border-color:var(--band)}
.hero-cta .btn-fill:hover{background:var(--band-2); border-color:var(--band-2)}

/* Contact : portrait plein écran, flouté, texte devant */
.contact-sec{position:relative; width:100%; isolation:isolate; overflow:hidden; text-align:center}
.contact-sec .bgph{position:absolute; inset:-40px; z-index:-2; background-size:cover;
  background-position:center 26%; filter:blur(14px) saturate(.85); transform:scale(1.08)}
.contact-sec::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,23,34,.9),rgba(11,23,34,.84))}
.contact-sec h2{color:var(--band-ink)}
.contact-sec h2 em{color:var(--acc-band)}
.contact-sec .lab{color:var(--acc-band)}
.contact-sec .cform label{color:rgba(255,255,255,.78)}
.contact-sec .cform .f:hover label,.contact-sec .cform .f:focus-within label{color:var(--acc-band)}
.contact-sec .cform input{background:rgba(255,255,255,.96); border-color:rgba(255,255,255,.3)}
.contact-sec .cform .f:hover input{border-color:var(--acc-band)}
.contact-sec .cform .cons{color:rgba(255,255,255,.72)}
.contact-sec .cform .mi{color:rgba(255,255,255,.6)}
.contact-sec .btn-fill{background:var(--acc); border-color:var(--acc)}
.contact-ways{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:clamp(30px,3.6vw,44px)}
.contact-ways a{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:1px;
  border:1px solid rgba(255,255,255,.34); color:var(--band-ink); font-size:.76rem; font-weight:600;
  letter-spacing:.06em; transition:.3s cubic-bezier(.2,.7,.25,1)}
.contact-ways a:hover{background:rgba(255,255,255,.12); border-color:var(--acc-band); color:#fff; transform:translateY(-3px)}
.contact-ways svg{width:16px; height:16px; color:var(--acc-band)}

/* ============================================================
   RÉVISION 16 sept. — allègement, ton humain, interactions
   ============================================================ */
/* Bouton d'action du menu : discret sur fond blanc */
.nav.on .navcta,.nav.solid .navcta{background:transparent; color:var(--band); border-color:#C3CEDA}
.nav.on .navcta:hover,.nav.solid .navcta:hover{background:color-mix(in srgb,var(--band) 8%,transparent);
  border-color:var(--band); transform:translateY(-1px)}

/* Étiquette du hero en doré clair */
.hero-lab{color:var(--acc-band); letter-spacing:.32em}
.hero-lab::before,.hero-lab::after{background:color-mix(in srgb,var(--acc-band) 70%,transparent); width:44px}
.hero h1{font-weight:500}
.hero::after{background:linear-gradient(180deg,rgba(6,13,20,.78) 0%,rgba(6,13,20,.56) 34%,rgba(6,13,20,.66) 72%,rgba(6,13,20,.86) 100%)}

/* Cartes qui s'agrandissent au survol */
.card{transform-origin:center}
.card:hover{transform:translateY(-8px) scale(1.03); box-shadow:0 38px 70px -40px rgba(20,33,44,.45); z-index:2}

/* Bouton clair qui bascule en marine au survol */
.btn-soft{background:rgba(255,255,255,.75); color:var(--band); border-color:#D8CFBB; backdrop-filter:blur(4px)}
.btn-soft:hover{background:var(--band); color:#fff; border-color:var(--band); transform:translateY(-2px)}

/* Témoignage allégé */
.testi.slim{padding:clamp(46px,5.4vw,72px) 0}
.testi.slim .tcard{margin-top:22px; padding:clamp(22px,2.4vw,32px); background:transparent; border:0;
  border-left:2px solid var(--acc-band); max-width:880px; gap:22px; align-items:center}
.testi.slim .tph{width:58px; height:58px}
.testi.slim .tph .vb{width:20px; height:20px} .testi.slim .tph .vb svg{width:11px;height:11px}
.testi.slim .tbody q{font-size:clamp(1.06rem,1.8vw,1.34rem); margin:10px 0 14px}
.testi.slim .stars{font-size:.7rem}

/* Ligne de preuve chiffrée sur l'accueil */
.proofline{display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px);
  flex-wrap:wrap; margin-top:clamp(28px,3vw,40px); padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
.proofline b{font-family:"Cormorant Garamond",serif; font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--acc-band); font-weight:400}
.proofline span{color:var(--band-mut); font-size:.94rem}

/* Présentation : photo pleine largeur, floutée, texte devant */
.pres-bg{position:relative; width:100%; isolation:isolate; overflow:hidden; text-align:center}
.pres-bg .bgph{position:absolute; inset:-50px; z-index:-2; background-size:cover; background-position:center 34%;
  filter:blur(7px); transform:scale(1.06)}
.pres-bg::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,21,31,.82),rgba(10,21,31,.9))}
.pres-bg .in{max-width:760px; margin:0 auto}
.pres-bg h2{color:var(--band-ink); font-size:clamp(2rem,4vw,3.1rem); font-weight:300; line-height:1.14}
.pres-bg h2 em{color:var(--acc-band); font-style:italic}
.pres-bg .lab{color:var(--acc-band); justify-content:center}
.pres-bg p{color:rgba(243,239,230,.9); font-size:1.02rem; margin:22px 0 0}
.pres-bg p.lead{font-size:1.12rem; color:#fff}
.pres-bg blockquote{margin:30px auto 0; max-width:60ch; font-family:"Cormorant Garamond",serif;
  font-style:italic; font-size:1.22rem; line-height:1.5; color:var(--acc-band); border:0; padding:0}
.pres-bg .sig{margin-top:26px; font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6)}

/* Variante claire du bandeau de contact (page estimation) */
.contact-sec.light .bgph{display:none}
.contact-sec.light::before{background:var(--surf-2)}
.contact-sec.light h2{color:var(--ink)} .contact-sec.light h2 em{color:var(--acc)}
.contact-sec.light .lab{color:var(--acc)}
.contact-sec.light .cform label{color:var(--ink-soft)}
.contact-sec.light .cform .f:hover label,.contact-sec.light .cform .f:focus-within label{color:var(--acc)}
.contact-sec.light .cform input{background:var(--surf); border-color:var(--line); border-bottom-width:2px}
.contact-sec.light .cform .f:hover input{border-color:var(--acc)}
.contact-sec.light .cform .cons{color:var(--mut)}
.contact-sec.light .cform .mi{color:var(--mut)}

/* Page tarif : le 13 % respire et réagit */
.price-big{line-height:1.02; padding-bottom:.12em; display:inline-block; cursor:default;
  transition:transform .5s cubic-bezier(.2,.7,.25,1), color .5s, text-shadow .5s}
.price-big:hover{transform:translateY(-4px) scale(1.02); color:var(--acc-2);
  text-shadow:0 26px 50px rgba(138,106,40,.22)}
.price-sub{margin-top:6px}

/* Deux colonnes clairement différenciées */
.incl{align-items:start}
.incl-col{background:var(--surf); border:1px solid var(--line); padding:clamp(28px,3vw,44px);
  box-shadow:0 34px 70px -52px rgba(20,33,44,.5)}
.incl-col.alt{background:color-mix(in srgb,var(--band) 5%,transparent); border:0; box-shadow:none;
  padding:clamp(24px,2.6vw,38px)}
.incl-col.alt h3{color:var(--ink-soft)}
.incl-col.alt li{color:var(--mut)}
.incl-col.alt li svg{display:none}
.incl-col.alt li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--mut);
  flex-shrink:0; margin-top:10px}
.incl-col.alt .intro{font-size:.95rem; color:var(--ink-soft); margin:0 0 22px}

/* ============================================================
   RÉVISION 16 sept. (2) — équilibre clair/sombre, chiffres vivants
   ============================================================ */
/* Présentation : photo nette, assombrie, visages reconnaissables */
.pres-bg .bgph{filter:none; transform:scale(1.03); background-position:center 30%}
.pres-bg::before{background:linear-gradient(180deg,rgba(9,18,27,.66) 0%,rgba(9,18,27,.76) 45%,rgba(9,18,27,.84) 100%)}
.pres-bg h2,.pres-bg p.lead{text-shadow:0 2px 26px rgba(5,12,19,.65)}

/* Témoignage en ton clair */
.testi.light{background:var(--surf-2); color:var(--ink)}
.testi.light .lab{color:var(--acc)}
.testi.light .tcard{border-left-color:var(--acc)}
.testi.light .stars{color:var(--acc)}
.testi.light .tbody q{color:var(--ink)}
.testi.light .tbody .role{color:var(--mut)}
.testi.light .tph{border-color:var(--line)}
.testi.light .tph .vb{border-color:var(--surf-2)}
.testi.light .proofline{border-top-color:var(--line)}
.testi.light .proofline b{color:var(--acc)}
.testi.light .proofline span{color:var(--ink-soft)}
.testi.light .tlink{color:var(--acc)}

/* Bandeau photo plus fin */
.photoband{min-height:clamp(260px,32vw,380px)}
.photoband .in{padding:clamp(44px,6vw,72px) clamp(20px,5vw,40px)}
.photoband q{font-size:clamp(1.5rem,3.1vw,2.5rem)}

/* Hero des pages intérieures : titre plus grand et plus contrasté */
.hero.short::after{background:linear-gradient(180deg,rgba(6,13,20,.8) 0%,rgba(6,13,20,.62) 40%,rgba(6,13,20,.78) 100%)}
.hero.short h1{font-size:clamp(2.6rem,5.4vw,4.4rem); font-weight:500}
.hero.short p.sub{color:#fff; font-size:clamp(1rem,1.5vw,1.14rem)}

/* --- Comparatif : trois lignes animées --- */
.cmp{margin-top:clamp(34px,4.4vw,56px); display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px)}
.cmp-row{display:grid; grid-template-columns:minmax(150px,.85fr) minmax(0,2.2fr) minmax(110px,auto);
  gap:clamp(16px,2.4vw,38px); align-items:center; padding:clamp(20px,2.2vw,28px) clamp(18px,2.2vw,30px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  transition:.42s cubic-bezier(.2,.7,.25,1)}
.cmp-row:hover{background:rgba(255,255,255,.12); border-color:rgba(216,185,120,.5); transform:translateY(-3px)}
.cmp-k{font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--band-mut)}
.cmp-k small{display:block; font-size:.74rem; letter-spacing:.02em; text-transform:none; font-weight:500;
  color:rgba(169,188,203,.75); margin-top:6px}
.cmp-bars{display:flex; flex-direction:column; gap:10px; min-width:0}
.cmp-line{display:flex; align-items:center; gap:12px}
.cmp-lab{width:62px; flex-shrink:0; font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55)}
.cmp-track{flex:1; height:12px; background:rgba(255,255,255,.1); position:relative; min-width:0}
.cmp-fill{position:absolute; inset:0 auto 0 0; width:0; background:rgba(255,255,255,.28);
  transition:width 1.4s cubic-bezier(.2,.7,.25,1)}
.cmp-line.you .cmp-fill{background:linear-gradient(90deg,var(--acc-band),#EBD39A)}
.cmp-val{font-family:"Cormorant Garamond",serif; font-size:1.34rem; color:#fff; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cmp-line.mkt .cmp-val{color:var(--band-mut); font-size:1.12rem}
.cmp-delta{text-align:right}
.cmp-delta b{display:block; font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:400; color:var(--acc-band); line-height:1}
.cmp-delta span{display:block; font-size:.58rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--band-mut); margin-top:6px}
.cmp-row:hover .cmp-delta b{transform:scale(1.04)}
.cmp-delta b{transition:transform .42s cubic-bezier(.2,.7,.25,1)}
@media(max-width:820px){
  .cmp-row{grid-template-columns:1fr auto; gap:14px 18px; align-items:start}
  .cmp-bars{grid-column:1 / -1}
  .cmp-delta{text-align:left}
  .cmp-delta b{font-size:2.1rem}
}

/* --- Mois type : montants en avant, lignes vivantes --- */
.exemple{padding:clamp(20px,2.4vw,34px)}
.exemple .row{align-items:center; padding:clamp(16px,1.8vw,22px) clamp(14px,1.8vw,20px);
  border-radius:1px; transition:background .35s, transform .35s cubic-bezier(.2,.7,.25,1)}
.exemple .row:hover{background:var(--surf-2); transform:translateX(3px)}
.exemple .row span:first-child{color:var(--ink-soft); font-size:.98rem}
.exemple .row span:last-child{font-family:"Cormorant Garamond",serif; font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:400; color:var(--ink); font-variant-numeric:tabular-nums}
.exemple .row span:last-child i{display:block; font-style:normal; font-family:Manrope,sans-serif;
  font-size:.74rem; color:var(--mut); text-align:right; margin-top:2px}
.exemple .row.total{background:color-mix(in srgb,var(--acc) 8%,transparent); border-bottom:0; margin-top:6px}
.exemple .row.total span:first-child{color:var(--ink); font-weight:700; font-size:1.02rem}
.exemple .row.total span:last-child{color:var(--acc); font-size:clamp(1.9rem,3.4vw,2.6rem)}
.exemple .row.total:hover{background:color-mix(in srgb,var(--acc) 12%,transparent)}

/* --- Questionnaire : icônes --- */
.opt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:104px}
.opt .ic{width:26px; height:26px; color:var(--mut); margin-bottom:4px; transition:.3s}
.opt:hover .ic{color:var(--acc); transform:translateY(-2px)}
.opt[aria-pressed="true"] .ic{color:var(--acc)}
.opt .ic svg{width:100%; height:100%; stroke-width:1.5; fill:none; stroke:currentColor}

/* ================================================================
   Lisibilité mobile des titres de header
   ================================================================ */
@media(max-width:900px){
  .hero h1{font-size:clamp(1.62rem,5.6vw,2.4rem); line-height:1.22; letter-spacing:-.01em}
  .hero p.sub{font-size:clamp(.92rem,3.6vw,1rem); line-height:1.6; max-width:40ch}
  .hero-in{padding:118px clamp(20px,5vw,40px) 86px}
  .hero-lab{font-size:.58rem; letter-spacing:.24em}
  .hero-lab::before,.hero-lab::after{width:26px}
  .hero-cta{gap:10px; margin-top:30px}
  .hero-cta .btn{width:100%; max-width:340px; justify-content:center}
  .hero.short h1{font-size:clamp(1.85rem,6.6vw,2.7rem); line-height:1.18}
  .hero.short .hero-in{padding:124px clamp(20px,5vw,40px) 60px}
}
@media(max-width:400px){
  .hero h1{font-size:1.5rem}
  .hero.short h1{font-size:1.72rem}
}

/* ================================================================
   Bloc "Qui s'occupe de votre bien" — texte devant, visages lisibles
   Trois cadrages (PC / tablette / mobile) pour que les visages et les
   bustes restent visibles quelle que soit la largeur d'écran.
   ================================================================ */
.pres-bg{text-align:center; min-height:clamp(540px,46vw,760px); display:flex; align-items:center}
.pres-bg .bgph{position:absolute; inset:0; z-index:-2; filter:none; transform:none;
  background-image:url('media/duo.jpg'); background-size:cover; background-position:center top}
.pres-bg::before{background:linear-gradient(180deg,
  rgba(9,18,27,.4) 0%, rgba(9,18,27,.3) 26%, rgba(9,18,27,.44) 58%, rgba(9,18,27,.7) 100%)}
.pres-bg .wrap{width:100%}
.pres-bg .in{max-width:760px; margin:0 auto}
.pres-bg .lab{justify-content:center}
.pres-bg blockquote{margin:30px auto 0; max-width:60ch}
.pres-bg h2,.pres-bg p.lead,.pres-bg p,.pres-bg blockquote,.pres-bg .sig{
  text-shadow:0 1px 2px rgba(4,10,16,.95), 0 2px 10px rgba(4,10,16,.9), 0 6px 30px rgba(4,10,16,.8)}
@media(max-width:1100px){
  .pres-bg .bgph{background-image:url('media/duo-t.jpg')}
  .pres-bg{min-height:clamp(560px,72vw,720px)}
}
@media(max-width:560px){
  .pres-bg .bgph{background-image:url('media/duo-m.jpg')}
  .pres-bg{min-height:min(134vw,620px)}
  .pres-bg::before{background:linear-gradient(180deg,
    rgba(9,18,27,.3) 0%, rgba(9,18,27,.24) 22%, rgba(9,18,27,.44) 56%, rgba(9,18,27,.74) 100%)}
}

/* ================================================================
   Bandeau chiffres — séparations nettes et centrées sur mobile
   ================================================================ */
@media(max-width:780px){
  .stats .grid{grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.18)}
  .stats .it{background:var(--band); padding:clamp(28px,7vw,38px) 14px}
  .stats .it + .it::before{display:none}
  .stats .it:nth-child(3),.stats .it:nth-child(4){border-top:0}
  .stats .it:hover{background:var(--band)}
  .stats .n{font-size:2rem}
  .stats .k{font-size:.56rem; letter-spacing:.18em; margin-top:10px}
}

/* Défilement des prestations un peu plus rapide sur mobile */
@media(max-width:900px){
  .tk-in{animation-duration:24s}
  .tk-in span{font-size:1.04rem}
}

/* ================================================================
   Les 4 étapes : fil conducteur vertical sur mobile et tablette
   ================================================================ */
@media(max-width:860px){
  .steps{grid-template-columns:1fr; gap:0; margin-top:clamp(34px,6vw,48px); position:relative}
  .steps::before{display:block; content:""; position:absolute;
    top:20px; bottom:34px; left:19px; right:auto; width:1px; height:auto;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--acc) 70%,transparent) 0%,
      color-mix(in srgb,var(--acc) 34%,var(--line)) 12%,
      color-mix(in srgb,var(--acc) 34%,var(--line)) 88%,
      color-mix(in srgb,var(--acc) 18%,transparent) 100%)}
  .step{text-align:left; display:grid; grid-template-columns:38px minmax(0,1fr);
    column-gap:20px; align-items:start; padding-bottom:clamp(30px,6vw,42px)}
  .step:last-child{padding-bottom:0}
  .step .b{grid-column:1; grid-row:1 / span 3; align-self:start; margin:0;
    background:var(--surf-2); border-color:color-mix(in srgb,var(--acc) 34%,var(--line))}
  .step h3{grid-column:2; margin:5px 0 8px; font-size:1.18rem}
  .step p{grid-column:2; margin:0; max-width:none}
  .step .tag{grid-column:2; margin-top:12px}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ================================================================
   Bouton "Estimer gratuitement mon bien" — sobre mais distinct
   ================================================================ */
.nav:not(.on):not(.solid) .navcta{background:rgba(216,185,120,.16); color:#EBD39A;
  border-color:rgba(216,185,120,.62)}
.nav:not(.on):not(.solid) .navcta:hover{background:rgba(216,185,120,.32); color:#fff;
  border-color:rgba(216,185,120,.9)}
.nav.on .navcta,.nav.solid .navcta{background:color-mix(in srgb,var(--acc) 9%,transparent);
  color:var(--acc); border-color:color-mix(in srgb,var(--acc) 48%,transparent)}
.nav.on .navcta:hover,.nav.solid .navcta:hover{background:var(--acc); color:#fff; border-color:var(--acc)}

.mpanel a.btn{display:flex; align-items:center; justify-content:center; width:100%;
  box-sizing:border-box; margin-top:30px; padding:18px 22px; border-bottom:0;
  font-family:Manrope,sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  background:color-mix(in srgb,var(--acc) 8%,transparent); color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 48%,transparent); border-radius:1px}
.mpanel a.btn:hover{background:var(--acc); color:#fff; border-color:var(--acc); transform:none}
.mpanel a:not(.btn):last-of-type{border-bottom:0}

/* ================================================================
   Tableau comparatif : lisible sur mobile et tablette
   ================================================================ */
@media(max-width:820px){
  .ctable th,.ctable td{padding:14px 10px; font-size:.88rem}
}
@media(max-width:700px){
  .ctable{display:block; border-collapse:separate; margin-top:30px}
  .ctable thead{display:none}
  .ctable tbody,.ctable tr,.ctable td{display:block; width:100%}
  .ctable tr{border:1px solid var(--line); background:var(--surf);
    padding:6px 0 10px; margin-bottom:14px}
  .ctable tbody tr:hover{background:var(--surf)}
  .ctable td{border-bottom:0; padding:9px clamp(16px,4vw,22px); text-align:left}
  .ctable td:first-child{font-weight:700; color:var(--ink); font-size:.96rem;
    padding-bottom:4px; border-bottom:1px solid var(--line); margin-bottom:6px}
  .ctable td.us,.ctable td.mk{display:flex; align-items:baseline;
    justify-content:space-between; gap:16px; font-size:.9rem}
  .ctable td.us::before,.ctable td.mk::before{flex:0 0 auto; font-size:.55rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--mut)}
  .ctable td.us::before{content:"Nous"; color:var(--acc)}
  .ctable td.mk::before{content:"Marché"}
  .ctable td.us,.ctable td.mk{text-align:right}
}

/* ================================================================
   Icônes du questionnaire : pastille ronde, or à la sélection
   ================================================================ */
.opt .ic{width:44px; height:44px; margin-bottom:8px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--band) 5%,transparent);
  color:var(--band); transition:.32s cubic-bezier(.2,.7,.25,1)}
.opt .ic svg{width:24px; height:24px; stroke-width:1.45; fill:none; stroke:currentColor}
.opt:hover .ic{background:color-mix(in srgb,var(--acc) 12%,transparent); color:var(--acc); transform:translateY(-2px)}
.opt[aria-pressed="true"] .ic{background:var(--acc); color:#fff; transform:none}
.opt{min-height:118px}

/* ================================================================
   Questionnaire : on comprend tout de suite qu'il faut le démarrer
   ================================================================ */
.wiz{position:relative; scroll-margin-top:96px}
.wiz::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px;
  background:linear-gradient(90deg,var(--acc) 0%,#C9A45E 55%,var(--acc) 100%)}
.wiz-head{text-align:center; margin-bottom:clamp(24px,3vw,34px);
  padding-bottom:clamp(22px,2.6vw,30px); border-bottom:1px solid var(--line)}
.wiz-kick{display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc); padding:7px 14px;
  background:color-mix(in srgb,var(--acc) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.wiz-title{font-family:"Cormorant Garamond",serif; font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:300; line-height:1.14; margin:16px 0 0; color:var(--ink)}
.wiz-sub{color:var(--ink-soft); font-size:.95rem; margin:12px auto 0; max-width:48ch}
.wiz-top{font-size:.6rem}
.wiz-top #wizStep{color:var(--acc)}

/* les réponses ressemblent enfin à des boutons */
.opt{box-shadow:0 1px 0 rgba(20,33,44,.05); border-radius:1px}
.opt:hover{border-color:var(--acc); box-shadow:0 14px 26px -18px rgba(20,33,44,.45)}
.opt:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* Boutons du questionnaire : Suivant toujours à droite sur mobile */
.wiz-nav{flex-wrap:nowrap}
@media(max-width:560px){
  .wiz-nav{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:stretch}
  .wiz-nav #btnPrev{grid-column:1; padding-left:16px; padding-right:16px}
  .wiz-nav #btnNext{grid-column:2; justify-content:center}
}

/* Le bouton du hero d'estimation pointe vers le questionnaire */
.hero.short .hero-cta{margin-top:30px}

/* ================================================================
   Menu mobile : le bouton devient une croix visible à l'ouverture
   ================================================================ */
.burger span,.burger span::before,.burger span::after{
  transition:transform .32s cubic-bezier(.2,.7,.25,1), top .32s cubic-bezier(.2,.7,.25,1),
             background .22s ease, opacity .22s ease}
.burger[aria-expanded="true"]{color:var(--ink)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}
.mpanel{padding-top:104px}
/* menu ouvert : logo et bouton passent en sombre, quel que soit l'état de la barre */
.nav.menu .brand .lw{display:none}
.nav.menu .brand .ld{display:block}
.nav.menu .burger{color:var(--ink)}
.nav.menu .navcta{display:none}