@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;700&family=Outfit:wght@400;500;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');

/* ===== Directions graphiques ===== */
/* A : Confiance (marine + vert) */
body,body[data-dir="A"]{
  --bg:#f6f8fc;--surface:#fff;--surface2:#eef3fb;--text:#0b1b3a;--muted:#5b6782;--line:#e2e8f2;
  --primary:#0b2a5b;--primary-ink:#fff;--accent:#16a34a;--accent-ink:#fff;--blue:#2563eb;--soft:#e8f6ee;
  --fh:'Plus Jakarta Sans',sans-serif;--fb:'Plus Jakarta Sans',sans-serif;--r:16px;--hero-bg:linear-gradient(135deg,#0b2a5b,#123e84);--hero-ink:#fff;
}
/* B : Nuit électrique (sombre, bleu électrique + vert néon) */
body[data-dir="B"]{
  --bg:#070b16;--surface:#0f1626;--surface2:#151e33;--text:#eef2fb;--muted:#8d99b5;--line:#1f2a43;
  --primary:#3b82f6;--primary-ink:#fff;--accent:#22c55e;--accent-ink:#04120a;--blue:#60a5fa;--soft:#10261b;
  --fh:'Space Grotesk',sans-serif;--fb:'Inter',sans-serif;--r:14px;--hero-bg:radial-gradient(circle at 80% 20%,#1d3b8a 0,#070b16 60%);--hero-ink:#fff;
}
/* C : Frais (émeraude + bleu ciel, très arrondi) */
body[data-dir="C"]{
  --bg:#f2faf6;--surface:#fff;--surface2:#e3f4ec;--text:#0c2a22;--muted:#56716a;--line:#d7ebe2;
  --primary:#059669;--primary-ink:#fff;--accent:#0ea5e9;--accent-ink:#fff;--blue:#0ea5e9;--soft:#e0f2fe;
  --fh:'Outfit',sans-serif;--fb:'Outfit',sans-serif;--r:28px;--hero-bg:linear-gradient(135deg,#d1fae5,#e0f2fe);--hero-ink:#0c2a22;
}
/* D : Éditorial premium (crème, marine, vert sapin, serif) */
body[data-dir="D"]{
  --bg:#f4f1ea;--surface:#fffdf8;--surface2:#ebe6da;--text:#13294b;--muted:#6b6a64;--line:#ddd6c6;
  --primary:#13294b;--primary-ink:#fff;--accent:#1f5f4a;--accent-ink:#fff;--blue:#13294b;--soft:#e4ece6;
  --fh:'Fraunces',serif;--fb:'Inter',sans-serif;--r:6px;--hero-bg:#13294b;--hero-ink:#f4f1ea;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{overflow-x:clip;font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,.brand{font-family:var(--fh);letter-spacing:-.02em;line-height:1.08}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:700 15px var(--fb);padding:14px 22px;border-radius:calc(var(--r) * 3);background:var(--accent);color:var(--accent-ink);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.pri{background:var(--primary);color:var(--primary-ink)}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--soft);color:var(--accent)}
body[data-dir="B"] .pill{color:#4ade80}
.eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:12px}
body[data-dir="B"] .eyebrow{color:#4ade80}
section{padding:84px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,46px);max-width:660px}
.sec-head p{color:var(--muted);max-width:430px}

/* nav */
nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.brand i{width:36px;height:36px;border-radius:calc(var(--r) * .6);background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-style:normal;font-size:16px}
.brand b{color:var(--accent)}
.brand-logo{width:46px;height:46px;border-radius:10px}
.links{display:flex;gap:26px;font-weight:500;font-size:15px}
.links a:hover{color:var(--accent)}
.nav-cta{display:flex;gap:10px}
.nav-cta .btn{padding:10px 18px;font-size:14px}

/* hero */
.hero{padding:28px 0 0}
.hero-box{background:var(--hero-bg);color:var(--hero-ink);border-radius:calc(var(--r) * 1.6);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:520px;position:relative}
.hero-txt{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero h1{font-size:clamp(34px,4vw,58px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
body[data-dir="A"] .hero h1 em,body:not([data-dir]) .hero h1 em{color:#4ade80}
body[data-dir="D"] .hero h1 em{color:#9fd3b9;font-style:italic}
.hero .sub{font-size:18px;opacity:.82;margin:20px 0 26px;max-width:540px}
.hero-img{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:36px 36px 36px 0}
.hero-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hero-card{background:rgba(255,255,255,.92);color:#0b1b3a;border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;backdrop-filter:blur(8px)}
.hero-card b{font-size:16px}
.hero-card .ok{color:#16a34a;font-weight:700}
.search{background:var(--surface);color:var(--text);border-radius:calc(var(--r) * 1.2);padding:10px;box-shadow:0 24px 50px -24px rgba(0,0,0,.45)}
.tabs{display:flex;gap:6px;padding:4px 4px 10px;flex-wrap:wrap}
.tabs span{font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--muted)}
.tabs span.on{background:var(--primary);color:var(--primary-ink)}
.fields{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px}
.field{background:var(--surface2);border-radius:calc(var(--r) * .8);padding:10px 14px;min-width:0}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field div{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.stats b{display:block;font:800 26px var(--fh)}
.stats span{font-size:13px;opacity:.75}

.trust{padding:22px 0}
.trust .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:700;font-size:14px}
.trust span::before{content:"✓";color:var(--accent);margin-right:8px;font-weight:800}

/* segments + catégories (photos) */
.segs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.seg{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--surface2)}
.seg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.seg:hover img{transform:scale(1.06)}
.seg .lab{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(5,10,25,.85));color:#fff}
.seg .lab b{display:block;font:700 19px var(--fh)}
.seg .lab span{font-size:13px;opacity:.85}
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cats .seg{aspect-ratio:1/1}

/* annonces */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:.2s}
.card:hover{box-shadow:0 24px 40px -28px rgba(0,0,0,.5);transform:translateY(-3px)}
.thumb{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--surface2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.thumb .badges span{background:#fff;color:#0b1b3a;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
.thumb .badges .lez{background:#1f5f4a;color:#fff}
.thumb .badges .lez.warn{background:#b45309}
.thumb .badges .hist-b{background:#13294b;color:#fff}
.thumb .heart{position:absolute;top:10px;right:10px;background:#fff;color:#0b1b3a;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.card .body{padding:14px 16px 16px}
.card h3{font-size:17px}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--muted);margin:6px 0 12px}
.price{display:flex;justify-content:space-between;align-items:end;gap:8px}
.price b{font:800 21px var(--fh)}
.price small{font-size:12px;color:var(--muted);text-align:right}

/* estimation */
.estimate{background:var(--primary);color:var(--primary-ink);border-radius:calc(var(--r) * 1.6);padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
body[data-dir="B"] .estimate{background:var(--surface2);color:var(--text);border:1px solid var(--line)}
.estimate h2{font-size:clamp(30px,4vw,46px)}
.estimate>div>p{opacity:.8;margin-top:14px}
.est-form{background:var(--surface);color:var(--text);border-radius:calc(var(--r) * 1.2);padding:20px}
.est-form .tabs span.on{background:var(--accent);color:var(--accent-ink)}
.est-form .field{margin-bottom:8px}
.est-note{font-size:12px;color:var(--muted);margin:2px 2px 10px}
.est-result{margin-top:12px;padding:16px;border-radius:calc(var(--r) * .8);background:var(--soft);display:flex;justify-content:space-between;align-items:center;gap:10px}
.est-result b{font:800 24px var(--fh)}
.est-pane{display:none}.est-pane.on{display:block}

/* étapes + photos */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.step{padding:24px 20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:800 38px var(--fh);color:var(--accent);display:block;margin-bottom:10px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}
.photo-proto{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shot{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:calc(var(--r) * .6);display:grid;place-items:center;text-align:center;font-size:12px;color:var(--muted);background:var(--surface);padding:6px}
.shot.done{border-style:solid;border-color:var(--accent);color:var(--text);background:var(--soft)}
.proto-list{display:grid;gap:12px}
.proto{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.proto .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-size:20px}
.proto b{display:block}
.proto span{font-size:14px;color:var(--muted)}

/* prestations */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.svc img{aspect-ratio:16/8;object-fit:cover;width:100%}
.svc .in{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc h3{font-size:18px}
.svc p{font-size:14px;color:var(--muted);flex:1}
.svc .from{font-weight:700;font-size:14px;display:flex;justify-content:space-between;border-top:1px dashed var(--line);padding-top:12px}
.svc .from a{color:var(--accent)}

/* partenaires */
.dark-sec{background:#0b1b3a;color:#fff}
body[data-dir="B"] .dark-sec{background:var(--surface)}
body[data-dir="C"] .dark-sec{background:#064e3b}
body[data-dir="D"] .dark-sec{background:#1f5f4a}
.dark-sec .sec-head p{color:rgba(255,255,255,.7)}
.dark-sec .eyebrow{color:#4ade80}
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ptn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:22px}
.ptn .t{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.65}
.ptn h3{font-size:19px;margin:6px 0 10px}
.ptn p{font-size:14px;opacity:.8}
.ptn .deal{margin-top:14px;display:inline-block;background:#22c55e;color:#04120a;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px}
.reco{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reco-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:26px}
.reco-box h3{font-size:22px;margin-bottom:8px}
.reco-box p{opacity:.8}
.reco-box ul{list-style:none;margin:14px 0 20px;display:grid;gap:8px;font-size:14px}
.reco-box li::before{content:"→ ";color:#4ade80;font-weight:800}

/* fidélité */
.loyal{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:start}
.points{background:var(--soft);border-radius:calc(var(--r) * 1.6);padding:30px}
.points h3{font-size:26px;margin-bottom:6px}
.points .bal{background:var(--primary);color:var(--primary-ink);border-radius:var(--r);padding:20px;margin:18px 0;display:flex;justify-content:space-between;align-items:center}
.points .bal b{font:800 34px var(--fh)}
.points ul{list-style:none;display:grid;gap:8px}
.points li{display:flex;justify-content:space-between;background:var(--surface);border-radius:calc(var(--r) * .7);padding:11px 14px;font-size:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;display:flex;flex-direction:column}
.plan.hi{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.plan h3{font-size:20px}
.plan .pr{font:800 32px var(--fh);margin:10px 0 2px}
.plan .pr small{font:500 14px var(--fb);opacity:.7}
.plan .who{font-size:13px;opacity:.7}
.plan ul{list-style:none;margin:14px 0 20px;display:grid;gap:8px;font-size:14px;flex:1}
.plan li::before{content:"✓ ";color:var(--accent);font-weight:800}
.plan.hi li::before{color:#4ade80}

/* carnet */
.app{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.phone{width:300px;margin:0 auto;background:#0b1b3a;border-radius:42px;padding:14px;box-shadow:0 40px 60px -30px rgba(0,0,0,.5)}
.screen{background:#f6f8fc;color:#0b1b3a;border-radius:30px;overflow:hidden;min-height:540px}
.screen img{height:150px;width:100%;object-fit:cover}
.screen .in{padding:14px}
.screen .hd{font:800 19px var(--fh)}
.screen .sm{font-size:12px;color:#5b6782;margin-bottom:10px}
.screen .item{background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.screen .item b{display:block;font-size:13px}
.screen .tag{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:#e8f6ee;color:#15803d}
.screen .tag.warn{background:#fee2e2;color:#b91c1c}
.app ul{list-style:none;display:grid;gap:14px;margin-top:20px}
.app li{display:flex;gap:14px}
.app li .ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.app li b{display:block}
.app li span{font-size:14px;color:var(--muted)}

/* communauté, pro, faq, final, footer */
.comm{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cm{border-radius:var(--r);padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border:1px solid var(--line)}
.cm:first-child{background:var(--accent);color:var(--accent-ink);border:0}
.cm .ic{font-size:28px}
.cm h3{font-size:18px;margin:10px 0 6px}
.cm p{font-size:14px;opacity:.8}
.pro{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) * 1.6);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.pro .in{padding:44px}
.pro h2{font-size:clamp(28px,3.4vw,40px)}
.pro p{color:var(--muted);margin:14px 0 20px}
.pro-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.pro-list div{background:var(--surface2);border-radius:calc(var(--r) * .7);padding:14px;font-size:13px}
.pro-list b{display:block;font-size:14px}
.pro img{height:100%;width:100%;object-fit:cover}
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font:700 18px var(--fh);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--accent);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin-top:10px}
.final{position:relative;overflow:hidden;text-align:center;padding:110px 0;color:#fff}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(5,15,40,.75),rgba(5,15,40,.85));z-index:1}
.final .wrap{position:relative;z-index:2}
.final h2{font-size:clamp(34px,5vw,60px);max-width:820px;margin:0 auto 26px}
footer{background:#0b1b3a;color:#9aa6c1;padding:54px 0 28px;font-size:14px}
body[data-dir="B"] footer{background:#03060d}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot .brand{color:#fff;margin-bottom:12px}
.foot h4{color:#fff;font-size:14px;margin-bottom:12px}
.foot a{display:block;margin-bottom:8px}
.foot a:hover{color:#fff}
.copy{border-top:1px solid #1f2d4f;margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}


/* onglets avec icônes */
.icon-tabs span{display:inline-flex;align-items:center;gap:7px}
.icon-tabs svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* menu mobile */
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--surface)}
.mnav.on{display:block}
.mnav .wrap{display:grid;padding:8px 24px 16px}
.mnav a{padding:13px 4px;border-bottom:1px solid var(--line);font-weight:600}
.mnav a:last-child{border:0}

/* carrousels */
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.rail-nav button:hover{border-color:var(--text)}
.cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none}
.cats::-webkit-scrollbar,.rail::-webkit-scrollbar{display:none}
.cats .seg{flex:0 0 calc((100% - 48px)/5);scroll-snap-align:start}
.swipe-hint{display:none;text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
.lez-note{font-size:12px;color:var(--muted);margin-top:14px}

/* cartes annonces */
.card-acts{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;font-weight:600}
.card-acts .essai{color:var(--accent)}
.cmp-ck{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--muted)}
.cmp-ck input{accent-color:var(--accent);width:16px;height:16px}
.cmp-bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);z-index:90;background:var(--primary);color:var(--primary-ink);border-radius:999px;padding:8px 8px 8px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);transition:transform .3s;font-size:14px;font-weight:600;max-width:calc(100vw - 24px)}
.cmp-bar.on{transform:translate(-50%,0)}
.cmp-bar .btn{padding:10px 18px}
.cmp-bar .btn:disabled{opacity:.5;cursor:not-allowed}
.cmp-x{border:0;background:rgba(255,255,255,.15);color:inherit;width:34px;height:34px;border-radius:50%;cursor:pointer}
.modal{position:fixed;inset:0;z-index:120;background:rgba(5,10,25,.6);display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.modal-in{background:var(--surface);color:var(--text);border-radius:var(--r);padding:24px;max-width:860px;width:100%;max-height:90vh;overflow:auto;position:relative}
.modal-in .cmp-x{position:absolute;top:12px;right:12px;background:var(--surface2)}
.modal-in h3{font-size:24px;margin-bottom:14px}
.modal-in table{width:100%;border-collapse:collapse;font-size:14px}
.modal-in th{text-align:left;color:var(--muted);font-weight:600;padding:10px 8px;white-space:nowrap}
.modal-in td{padding:10px 8px;border-top:1px solid var(--line);vertical-align:top}
.modal-in td img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:6px}

/* outils */
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column}
.tool .mock{background:var(--surface2);border-radius:calc(var(--r) * .8);padding:10px;height:170px;overflow:hidden;font-size:11px;margin-bottom:14px}
.tool h3{font-size:18px;margin-bottom:6px}
.tool p{font-size:13px;color:var(--muted)}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.cmp div{background:var(--surface);border-radius:6px;padding:4px;display:grid;gap:2px}
.cmp img{aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.cmp b{font-size:11px}
.cmp .g{color:#1f5f4a;font-weight:700}.cmp .o{color:#b45309;font-weight:700}
.slots b{display:block;font-size:12px;margin-bottom:8px}
.slots div{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.slots span{background:var(--surface);border-radius:6px;padding:8px 4px;text-align:center;font-weight:600}
.slots span.on{background:var(--accent);color:var(--accent-ink)}
.slots small{color:var(--muted)}
.chat{display:grid;gap:6px}
.chat div{padding:7px 9px;border-radius:10px;max-width:92%}
.chat .me{background:var(--primary);color:var(--primary-ink);justify-self:end}
.chat .them{background:var(--surface)}
.chat i{display:block;font-size:9px;opacity:.7;margin-top:2px}
.hist{display:grid;gap:5px}
.hist .bdg{background:#13294b;color:#fff;font-weight:700;padding:4px 8px;border-radius:999px;justify-self:start}
.hist div{display:flex;justify-content:space-between;background:var(--surface);padding:6px 8px;border-radius:6px}
.offer{background:var(--surface);border-radius:10px;padding:14px;display:grid;gap:4px;text-align:center;height:100%;align-content:center}
.offer b{font:800 30px var(--fh);color:var(--accent)}
.offer em{font-style:normal;font-weight:700;color:var(--blue)}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .tools{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .hero-box,.estimate,.loyal,.app,.pro,.reco,.photo-proto{grid-template-columns:1fr}
  .hero-img{padding:0 20px 20px}
  .links,.hide-m{display:none}
  .burger{display:flex}
  .trust{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .hero-txt,.estimate,.pro .in{padding:26px 20px}
  .fields{grid-template-columns:1fr 1fr}
  .fields .btn{grid-column:1/-1}
  /* onglets : 3 sur la 1re ligne, 2 sur la 2e */
  .icon-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .icon-tabs span{grid-column:span 2;justify-content:center;flex-direction:column;gap:4px;padding:10px 4px;background:var(--surface2);border-radius:12px;font-size:13px}
  .icon-tabs span:nth-child(n+4){grid-column:span 3}
  .icon-tabs span.on{background:var(--primary);color:var(--primary-ink)}
  /* les grilles deviennent des carrousels à glisser */
  .rail{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px}
  .rail>*{flex:0 0 78%;scroll-snap-align:start}
  .segs.rail>*,.cats.rail>*{flex-basis:62%}
  .plans.rail>*{flex-basis:82%}
  .plan.hi{transform:none}
  .swipe-hint{display:block}
  .rail-nav{display:none}
  .wrap{padding:0 20px}
  .est-form .tabs{flex-wrap:nowrap;overflow-x:auto}
  .est-form .tabs span{white-space:nowrap}
  .pro img{max-height:220px}
}
@media (max-width:560px){
  section{padding:56px 0}
  .hero{padding-top:12px}
  .hero-box{border-radius:calc(var(--r) * 1.2)}
  .hero h1{font-size:34px}
  .fields{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(3,1fr)}
  .pro-list{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .estimate{border-radius:var(--r)}
  .nav-cta .btn{padding:9px 14px}

}