:root{
  --red:#C41E2A; --red-2:#E5303D; --red-soft:#FBEAEC; --red-dark:#8C1420;
  --ink:#0A0A0A; --coal:#1C1C1C; --grey:#6B6763; --line:#E6E2DD;
  --bg:#FAF9F7; --white:#fff; --cream:#F3F0EB;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1360px; --gut:clamp(20px,5vw,72px); --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
::selection{background:var(--red);color:#fff}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1;letter-spacing:-.015em}
h1{font-size:clamp(40px,5.4vw,84px)}
h2{font-size:clamp(38px,5.4vw,86px)}
h3{font-size:clamp(24px,2.4vw,36px)}
em{font-style:italic;font-weight:500}
strong{font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lead{font-size:clamp(17px,1.3vw,19px);color:var(--grey);max-width:56ch;line-height:1.7}
.tag{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:22px;font-weight:600}
.tag::before{content:"";width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
.pad{padding:clamp(90px,12vw,170px) 0}
section{position:relative}
.head{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.head .lead{justify-self:end;padding-bottom:10px}
@media(max-width:900px){.head{grid-template-columns:1fr}.head .lead{justify-self:start}}

/* cursor follower — native cursor stays visible */
.cur2{position:fixed;left:0;top:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--red);pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .3s,opacity .3s;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.08em;color:#fff;opacity:0}
.cur2.on{opacity:1}
.cur2.hov{width:72px;height:72px;background:rgba(196,30,42,.85);border-color:transparent}
.cur2.hov::after{content:"VOIR"}
@media(hover:none){.cur2{display:none}}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0);z-index:200}

/* preloader */
.pre{position:fixed;inset:0;background:var(--ink);z-index:900;display:grid;place-items:center;color:#fff}
.pre .in{text-align:center}
.pre .logo{background:#fff;padding:18px 26px;border-radius:10px;display:inline-block;transform:translateY(20px);opacity:0}
.pre .logo img{height:64px}
.pre .n{font-family:var(--serif);font-size:72px;font-weight:600;line-height:1;margin-top:28px;font-variant-numeric:tabular-nums}
.pre .bar{height:2px;background:rgba(255,255,255,.2);width:240px;margin:20px auto 0;overflow:hidden}
.pre .bar i{display:block;height:100%;background:var(--red-2);transform:scaleX(0);transform-origin:left}
.pre .curtain{position:absolute;inset:0;background:var(--red)}

/* buttons */
.btn{white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 30px;font-weight:600;font-size:14px;border-radius:999px;overflow:hidden;isolation:isolate;transition:color .3s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);z-index:-1;transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{color:#fff}
.btn.dark{background:var(--ink);color:#fff}.btn.dark::before{background:var(--red)}
.btn.line{border:1px solid rgba(0,0,0,.2);color:var(--ink)}.btn.line:hover{color:#fff}
.btn.white{background:#fff;color:var(--ink)}.btn.white::before{background:var(--red)}.btn.white:hover{color:#fff}
.btn.glass{border:1px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px)}.btn.glass::before{background:#fff}.btn.glass:hover{color:var(--ink)}
.btn .ar{width:18px;height:18px;transition:transform .4s var(--ease)}.btn:hover .ar{transform:translateX(5px)}
.ar path{stroke:currentColor;stroke-width:1.8;fill:none}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s;transform:translateY(-100%)}
header.scrolled{background:rgba(250,249,247,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
header.scrolled .nav ul a,header.scrolled .nav .tel{color:var(--grey)}
header.scrolled .nav ul a:hover{color:var(--red)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:32px}
.nav .logo{background:#fff;padding:8px 14px;border-radius:8px;display:block;flex:none}
.nav .logo img{height:40px;width:auto}
.nav ul{display:flex;gap:4px;list-style:none}
.nav ul a{display:block;padding:10px 16px;font-size:14px;font-weight:500;color:#fff;border-radius:999px;white-space:nowrap;transition:background .3s,color .3s}
.nav ul a:hover{background:var(--red-soft);color:var(--red)}
.nav .right{display:flex;align-items:center;gap:22px}
.nav .tel{font-size:14px;color:#fff;white-space:nowrap;font-weight:500}
.nav .btn{padding:14px 22px;font-size:13px}
@media(max-width:1060px){.nav ul,.nav .tel{display:none}}

/* hero — full-bleed video */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:130px 0 70px;overflow:hidden;background:var(--ink);color:#fff}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero .poster{background:url(https://serelys-securite85.fr/wp-content/uploads/2026/07/serelys-alarme-intrusion-risco-2-00.webp) center/cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.78) 100%)}
.hero .veil2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 60%)}
.hero .beam{position:absolute;left:-30%;right:-30%;top:10%;height:26vmax;background:linear-gradient(90deg,transparent 10%,var(--red) 45%,var(--red-2) 60%,transparent 92%);transform:rotate(-14deg);clip-path:polygon(0 0,100% 0,100% 100%,0 52%);opacity:.28;mix-blend-mode:screen}
.hero .wrap{position:relative;z-index:2}
.hero .kicker{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:26px;font-weight:600}
.hero .kicker::before{content:"";width:44px;height:1px;background:var(--red-2)}
.hero h1{max-width:16ch}
.hero h1 em{color:var(--red-2)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .w span{display:inline-block}
.hero .under{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;margin-top:36px}
.hero .lead{color:rgba(255,255,255,.85);font-size:16px;max-width:60ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.25);padding-top:22px}
.hero .meta b{font-family:var(--serif);font-size:clamp(30px,3.2vw,48px);font-weight:600;display:block;line-height:1}
.hero .meta b sup{font-size:.45em;color:var(--red-2);vertical-align:top;position:relative;top:.3em}
.hero .meta span{font-size:13px;color:rgba(255,255,255,.7);display:block;margin-top:6px}
.scroll-cue{position:absolute;right:var(--gut);bottom:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:12px;z-index:2}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(#fff,transparent);display:block;animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero .vbtn{position:absolute;left:var(--gut);bottom:28px;z-index:2;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero .vbtn i{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-style:normal;font-size:12px}
@media(max-width:900px){.hero .under{grid-template-columns:1fr}.scroll-cue{display:none}}

/* partners marquee */
.partners{background:#fff;border-bottom:1px solid var(--line);padding:34px 0;overflow:hidden}
.partners p{text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:26px;font-weight:600}
.ptrack{display:flex;gap:64px;width:max-content;align-items:center;will-change:transform}
.ptrack img{height:44px;width:auto;opacity:.7;filter:grayscale(1);transition:opacity .3s,filter .3s}
.ptrack img:hover{opacity:1;filter:none}

/* about */
.about{background:var(--bg)}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.agrid .txt p{color:var(--grey);margin-bottom:20px;line-height:1.7;font-size:16px}
.agrid .txt p strong{color:var(--ink)}
.ph{position:relative;overflow:hidden;background:#111;border-radius:22px}
.ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;will-change:transform}
.ph .curtain{position:absolute;inset:0;background:var(--bg);z-index:3;transform-origin:top}
.ph .lbl{position:absolute;left:22px;bottom:20px;z-index:2;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;display:flex;gap:10px;align-items:center;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ph .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red-2);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(229,48,61,.7)}100%{box-shadow:0 0 0 12px rgba(229,48,61,0)}}
.agrid .ph{aspect-ratio:1/1}
.agrid .ph.small{position:absolute;width:44%;aspect-ratio:4/3;right:-8%;bottom:-10%;border:6px solid var(--bg);z-index:4}
.agrid .vis{position:relative}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.kpis>div{padding:36px 24px 36px 0;border-right:1px solid var(--line);position:relative}
.kpis>div:last-child{border-right:0}
.kpis>div:not(:first-child){padding-left:24px}
.kpis b{font-family:var(--serif);font-size:clamp(52px,6vw,104px);font-weight:600;line-height:.9;display:block;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpis b sup{font-size:.4em;color:var(--red);vertical-align:top;top:.3em;position:relative}
.kpis>div>span{display:block;margin-top:14px;color:var(--grey);font-size:14px}
@media(max-width:900px){.agrid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}.kpis>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}}

/* services — pinned horizontal */
.svc{background:var(--cream);overflow:hidden}
.svc .head{padding-top:clamp(90px,12vw,170px)}
.hwrap{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden}
.htrack{display:flex;gap:28px;padding:0 var(--gut);will-change:transform}
.hcard{flex:none;width:min(80vw,1000px);height:min(74vh,640px);display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.3)}
.hcard .ph{border-radius:0}
.hcard .txt{padding:clamp(28px,3.4vw,56px);display:flex;flex-direction:column;justify-content:center}
.hcard .idx{font-family:var(--serif);font-size:15px;color:var(--red);letter-spacing:.1em;margin-bottom:18px}
.hcard h3{font-size:clamp(28px,3vw,46px);max-width:14ch}
.hcard p{color:var(--grey);margin:18px 0 26px;max-width:46ch;line-height:1.65;font-size:15px}
.hcard.end{width:min(60vw,640px);background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:28px;padding:40px}
.hcard.end h3{font-size:clamp(30px,3.6vw,56px);max-width:12ch}
.hcard.end h3 em{color:var(--red-2)}
.hprog{position:absolute;left:var(--gut);right:var(--gut);bottom:32px;height:2px;background:rgba(0,0,0,.12)}
.hprog i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
@media(max-width:900px){.hwrap{height:auto;display:block;padding:0 0 60px}.htrack{flex-direction:column;transform:none!important}.hcard{width:auto;height:auto;grid-template-columns:1fr}.hcard .ph{min-height:240px}.hcard.end{width:auto}.hprog{display:none}}

/* split particuliers / pros */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:70vh}
.split a{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(32px,4vw,64px);color:#fff;min-height:420px}
.split a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.split a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8));transition:background .5s}
.split a:hover img{transform:scale(1)}
.split a>*{position:relative;z-index:2}
.split .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--red-2);margin-bottom:14px}
.split h3{font-size:clamp(32px,3.6vw,56px);margin-bottom:22px}
.split .go{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:14px}
.split .go i{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.split a:hover .go i{background:var(--red);color:#fff;transform:rotate(-45deg)}
.split .go svg{width:14px;height:14px}
@media(max-width:800px){.split{grid-template-columns:1fr}}

/* collectivités */
.coll{background:#fff}
.cgrid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.cgrid2 .ph{aspect-ratio:4/5;position:sticky;top:120px}
.cgrid2 p.lead{margin:22px 0 32px}
.cgrid2 p.lead strong{color:var(--ink)}
.pts{list-style:none;counter-reset:p}
.pts li{counter-increment:p;padding:26px 0 26px 64px;border-top:1px solid var(--line);position:relative}
.pts li:last-child{border-bottom:1px solid var(--line)}
.pts li::before{content:"0" counter(p);position:absolute;left:0;top:26px;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--red)}
.pts h3{font-size:clamp(22px,2vw,28px);margin-bottom:8px}
.pts p{color:var(--grey);font-size:15px;line-height:1.65}
@media(max-width:900px){.cgrid2{grid-template-columns:1fr}.cgrid2 .ph{position:relative;top:0;aspect-ratio:16/10}}

/* différence */
.diff{background:var(--ink);color:#fff;overflow:hidden}
.diff .state{font-size:clamp(32px,5vw,80px);max-width:18ch;line-height:1.02}
.diff .state .wd{color:#3a3a3a;transition:color .3s}
.diff .state .wd.on{color:#fff}
.diff .state .wd.on.ac{color:var(--red-2)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(56px,7vw,100px)}
.dcard{background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:36px 32px 40px;position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column}
.dcard::before{content:"";position:absolute;width:60%;aspect-ratio:1;right:-25%;top:-30%;background:radial-gradient(circle,rgba(196,30,42,.35),transparent 60%);filter:blur(20px);opacity:0;transition:opacity .6s}
.dcard:hover::before{opacity:1}
.dcard .n{font-family:var(--serif);font-size:clamp(48px,5vw,84px);font-weight:600;line-height:.9;color:var(--red-2);letter-spacing:-.03em;margin-bottom:auto}
.dcard p{color:#cfcfcf;font-size:15px;line-height:1.7;margin-top:36px;position:relative}
@media(max-width:900px){.dgrid{grid-template-columns:1fr}.dcard{min-height:0}}

/* avis */
.rev{background:var(--bg);overflow:hidden}
.rev .head{align-items:end}
.rtrack{display:flex;gap:22px;width:max-content;will-change:transform;padding:8px 0 20px}
.rcard{flex:none;width:min(80vw,400px);background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 30px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .5s var(--ease),box-shadow .5s}
.rcard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.25)}
.rcard .stars{color:#F5B301;letter-spacing:2px;font-size:15px}
.rcard p{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:500;flex:1}
.rcard .who{display:flex;align-items:center;gap:12px;font-size:13px}
.rcard .who i{width:38px;height:38px;border-radius:50%;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.rcard .who b{display:block;font-size:14px}
.rcard .who span{color:var(--grey)}
.gbadge{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--grey);border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:#fff}
.gbadge b{color:var(--ink)}

/* final */
.final{background:var(--ink);color:#fff;padding:clamp(120px,16vw,220px) 0;overflow:hidden;text-align:center;position:relative}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;transform:scale(1.1)}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(196,30,42,.35),transparent 70%)}
.final .wrap{position:relative;z-index:2}
.final .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--red-2);margin-bottom:24px}
.final h2{font-size:clamp(44px,7.2vw,112px);line-height:.95;max-width:14ch;margin:0 auto}
.final p{color:rgba(255,255,255,.8);max-width:52ch;margin:26px auto 0;font-size:17px;line-height:1.65}
.final .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:44px}

/* footer */
footer{background:#fff;border-top:1px solid var(--line);padding:72px 0 30px}
.fgrid2{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:48px}
.fgrid2 .brand img{height:56px}
.fgrid2 h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;font-weight:600}
.fgrid2 ul{list-style:none;display:grid;gap:12px;font-size:15px}
.fgrid2 ul a{position:relative}
.fgrid2 ul a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.fgrid2 ul a:hover::after{transform:none;transform-origin:left}
.fgrid2 .tel{font-family:var(--serif);font-size:32px;font-weight:600;display:block;margin-bottom:6px}
.fgrid2 p{font-size:14px;color:var(--grey);line-height:1.7}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;transition:background .3s,color .3s,border-color .3s}
.soc a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--grey)}
@media(max-width:900px){.fgrid2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== shared additions ===== */
.nav .logo{background:#fff;padding:8px 14px;border-radius:8px}
header.light .nav ul a,header.light .nav .tel{color:var(--grey)}
header.light .nav ul a:hover{color:var(--red)}
.nav li{position:relative}
.mega{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;grid-template-columns:repeat(4,200px);gap:12px;opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--ease);box-shadow:0 40px 80px -30px rgba(0,0,0,.35)}
.nav li:hover .mega,.nav li:focus-within .mega{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.mega a{display:block!important;padding:0!important;border-radius:14px!important;overflow:hidden;color:var(--ink)!important;background:var(--bg)!important;white-space:normal!important}
.mega a .im{height:110px;overflow:hidden}
.mega a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mega a:hover img{transform:scale(1.06)}
.mega a b{display:block;padding:12px 14px 4px;font-family:var(--serif);font-size:18px;font-weight:600}
.mega a span{display:block;padding:0 14px 14px;font-size:12px;color:var(--grey)}
.mega.small{grid-template-columns:repeat(2,220px)}
.mega.small a{padding:14px 16px!important}
.mega.small a b{padding:0 0 4px}.mega.small a span{padding:0}
.nav ul a.act{color:var(--red)!important}

/* page hero (interior) */
.phero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:160px 0 64px;overflow:hidden;background:var(--ink);color:#fff}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.phero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2) 40%,rgba(0,0,0,.8))}
.phero .beam{position:absolute;left:-30%;right:-30%;top:10%;height:26vmax;background:linear-gradient(90deg,transparent 10%,var(--red) 45%,var(--red-2) 60%,transparent 92%);transform:rotate(-14deg);clip-path:polygon(0 0,100% 0,100% 100%,0 52%);opacity:.25;mix-blend-mode:screen}
.phero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.phero .crumb{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:22px;font-weight:600}
.phero .crumb b{color:var(--red-2)}
.phero h1{font-size:clamp(40px,5.4vw,84px);max-width:19ch}
.phero .side{display:flex;flex-direction:column;gap:22px;align-items:flex-start;justify-self:end}
.phero .side p{color:rgba(255,255,255,.8);max-width:40ch;font-size:16px}
@media(max-width:900px){.phero .wrap{grid-template-columns:1fr}.phero .side{justify-self:start}.phero{min-height:70vh;padding-top:130px}}

/* intro */
.intro{background:var(--bg)}
.igrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.igrid h2{position:sticky;top:120px;font-size:clamp(34px,4.4vw,68px)}
.igrid .txt p{color:var(--grey);line-height:1.75;margin-bottom:20px;font-size:16px}
.igrid .txt p strong{color:var(--ink)}
.igrid .txt p.big{font-family:var(--serif);font-size:clamp(22px,2vw,30px);color:var(--ink);line-height:1.3;margin-bottom:28px}
@media(max-width:900px){.igrid{grid-template-columns:1fr}.igrid h2{position:static}}

/* feature rows */
.feats{background:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.frow:first-of-type{border-top:0}
.frow:nth-child(even) .ph{order:2}
.frow .ph{aspect-ratio:4/3}
.frow .n{font-family:var(--serif);color:var(--red);font-size:15px;letter-spacing:.1em;margin-bottom:16px}
.frow h3{font-size:clamp(28px,3vw,46px);margin-bottom:18px}
.frow p{color:var(--grey);line-height:1.75;max-width:52ch}
@media(max-width:900px){.frow{grid-template-columns:1fr}.frow:nth-child(even) .ph{order:0}}

/* points forts (dark) */
.pf{background:var(--ink);color:#fff}
.pf .head .lead{color:#bdbdbd}
.pf .tag{color:var(--red-2)}.pf .tag::before{background:var(--red-2)}

/* faq */
.faq{background:var(--bg)}
.fgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px}
.fgrid h2{position:sticky;top:120px;font-size:clamp(34px,4.4vw,68px)}
.acc{list-style:none}
.acc li{border-top:1px solid var(--line)}
.acc li:last-child{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:28px 0;font-family:var(--serif);font-size:clamp(22px,2.1vw,30px);font-weight:600;line-height:1.1;transition:color .3s,padding-left .4s var(--ease)}
.acc button:hover{color:var(--red);padding-left:10px}
.acc button i{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.2);display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-size:22px;font-weight:300;transition:transform .5s var(--ease),background .3s,border-color .3s,color .3s}
.acc li.open button i{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.acc .body{max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.acc li.open .body{max-height:700px}
.acc .body p,.acc .body ul{color:var(--grey);padding:0 0 26px;max-width:56ch;line-height:1.7}
.acc .body ul{padding-left:20px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr}.fgrid h2{position:static}}

/* gallery marquee */
.gal{background:#fff;padding:clamp(60px,8vw,110px) 0;overflow:hidden}
.gtrack{display:flex;gap:18px;width:max-content;will-change:transform}
.gtrack .ph{width:min(70vw,420px);aspect-ratio:4/3;flex:none}
.gtrack .ph:nth-child(odd){margin-top:40px}

/* autres solutions */
.others{background:var(--cream)}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ocard{position:relative;border-radius:22px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff}
.ocard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.ocard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85))}
.ocard:hover img{transform:scale(1)}
.ocard>*{position:relative;z-index:2}
.ocard h3{font-size:clamp(26px,2.4vw,36px);margin-bottom:8px}
.ocard p{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:18px}
.ocard .go{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
.ocard .go i{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .5s var(--ease),background .3s,color .3s}
.ocard:hover .go i{background:var(--red);color:#fff;transform:rotate(-45deg)}
.ocard .go svg{width:13px;height:13px}
@media(max-width:900px){.ogrid{grid-template-columns:1fr}}

/* team */
.team{background:#fff}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tcard{background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.tcard .ph{aspect-ratio:4/5;border-radius:0}
.tcard .b{padding:22px 22px 26px}
.tcard h3{font-size:24px;margin-bottom:4px}
.tcard .r{color:var(--red);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.tcard p{color:var(--grey);font-size:14px;line-height:1.6}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr}}
.plus{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.plus li{padding:18px 0 18px 30px;border-top:1px solid var(--line);position:relative;font-size:15px;color:var(--grey)}
.plus li::before{content:"";position:absolute;left:0;top:26px;width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
@media(max-width:700px){.plus{grid-template-columns:1fr}}

/* conseils */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:clamp(40px,5vw,72px)}
.cat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--ease),box-shadow .5s}
.cat:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.25)}
.cat b{font-family:var(--serif);font-size:22px;font-weight:600}
.cat span{font-size:13px;color:var(--grey)}
.cat i{font-style:normal;color:var(--red);font-size:12px;font-weight:700;letter-spacing:.1em}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.art:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.25)}
.art .ph{aspect-ratio:16/10;border-radius:0}
.art .b{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .c{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
.art h3{font-size:22px;line-height:1.15}
.art p{color:var(--grey);font-size:14px;flex:1}
.art .m{font-size:12px;color:var(--grey)}
@media(max-width:1000px){.cats{grid-template-columns:1fr 1fr}.arts{grid-template-columns:1fr}}

/* contact */
.cwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.cinfo{display:grid;gap:0}
.cinfo>div{padding:22px 0;border-top:1px solid var(--line)}
.cinfo>div:last-child{border-bottom:1px solid var(--line)}
.cinfo h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;font-weight:600}
.cinfo a.big{font-family:var(--serif);font-size:clamp(28px,3vw,42px);font-weight:600;display:block;line-height:1.1;word-break:break-word}
.cinfo p{color:var(--grey);font-size:15px;line-height:1.7}
.cform{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(26px,3vw,44px)}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cform .f{margin-bottom:22px;position:relative}
.cform label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;font-weight:600}
.cform input,.cform select,.cform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #CFC9C2;padding:12px 0;color:var(--ink);font:inherit;font-size:17px;border-radius:0}
.cform .f::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cform .f:focus-within::after{transform:none}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0}
.cform textarea{min-height:110px;resize:vertical}
.cform .btn{width:100%;justify-content:center;margin-top:8px}
.cform .rg{font-size:12px;color:var(--grey);margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;margin:0;transition:background .3s,border-color .3s,color .3s;background:#fff}
.chips label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.chips input{width:auto;display:none}
.map{border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--cream)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
@media(max-width:900px){.cwrap{grid-template-columns:1fr}.cform .row{grid-template-columns:1fr}}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.choice a{position:relative;border-radius:22px;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff}
.choice a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.choice a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85))}
.choice a:hover img{transform:scale(1)}
.choice a>*{position:relative;z-index:2}
.choice .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-2);font-weight:700;margin-bottom:8px}
.choice h3{font-size:clamp(26px,2.6vw,38px)}
@media(max-width:700px){.choice{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.step b{font-family:var(--serif);font-size:40px;color:var(--red);display:block;line-height:1;margin-bottom:12px}
.step h3{font-size:20px;margin-bottom:6px}
.step p{font-size:14px;color:var(--grey)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}

/* ===== charte jaune (sécurité incendie) ===== */
body.fire{--red:#C99700;--red-2:#F2B705;--red-soft:#FFF4CC;--red-dark:#9A7400}
body.fire .btn.red{background:#F2B705;color:var(--ink)}
body.fire .btn.red::before{background:var(--ink)}
body.fire .btn.red:hover{color:#fff}
body.fire .btn.dark::before{background:#F2B705}
body.fire .btn.dark:hover{color:var(--ink)}
body.fire .btn.white::before{background:#F2B705}
body.fire .btn.white:hover{color:var(--ink)}
body.fire .btn.line::before{background:#F2B705}
body.fire .btn.line:hover{color:var(--ink)}
body.fire .cur2{border-color:#F2B705}
body.fire .cur2.hov{background:rgba(242,183,5,.9);color:var(--ink)}
body.fire .prog,body.fire .kpis .ul{background:#F2B705}
body.fire .phero .beam{background:linear-gradient(90deg,transparent 10%,#C99700 45%,#F2B705 60%,transparent 92%)}
body.fire .dcard::before{background:radial-gradient(circle,rgba(242,183,5,.35),transparent 60%)}
body.fire .dcard .n,body.fire .pf .tag,body.fire .split .k,body.fire .final .k,body.fire .final h2 em{color:#F2B705}
body.fire .final::after{background:radial-gradient(60% 60% at 50% 50%,rgba(242,183,5,.3),transparent 70%)}
body.fire .ocard .go i{background:#F2B705;color:var(--ink)}
body.fire .split .go i{background:#F2B705;color:var(--ink)}
body.fire .nav ul a:hover{background:var(--red-soft);color:var(--red-dark)}
body.fire .nav ul a.act{color:var(--red-dark)!important}
body.fire .acc li.open button i{background:#F2B705;border-color:#F2B705;color:var(--ink)}
body.fire .cform .f::after{background:#F2B705}

/* ===== contact : formulaire compact ===== */
.cwrap{align-items:stretch}
.cwrap .cinfo{position:sticky;top:110px;align-self:start}
.cform.compact{padding:clamp(24px,2.6vw,36px)}
.cform.compact .f{margin-bottom:14px}
.cform.compact input,.cform.compact select,.cform.compact textarea{padding:9px 0;font-size:15px}
.cform.compact label{font-size:11px;margin-bottom:4px}
.cform.compact textarea{min-height:70px}
.cform.compact .chips label{padding:7px 12px;font-size:12px}
.cform.compact .btn{padding:14px 24px}
.cform.compact .rg{margin-top:10px;font-size:11px}
.cform.compact .tag{margin-bottom:12px}
.mapfull{margin-top:clamp(28px,4vw,56px)}
.mapfull .map{aspect-ratio:21/7}
@media(max-width:900px){.cwrap .cinfo{position:static}.mapfull .map{aspect-ratio:16/10}}

/* ===== lignes rouges animées (sections noires) ===== */
.rlines{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rlines i{position:absolute;top:-25%;height:150%;width:1px;background:linear-gradient(180deg,transparent 0%,var(--red-2) 50%,transparent 100%);transform:rotate(-22deg);opacity:.55;animation:rlDrift linear infinite}
.rlines i:nth-child(1){left:8%;animation-duration:14s}
.rlines i:nth-child(2){left:22%;animation-duration:19s;animation-delay:-6s;opacity:.35}
.rlines i:nth-child(3){left:41%;animation-duration:11s;animation-delay:-3s;width:2px;filter:blur(.5px)}
.rlines i:nth-child(4){left:63%;animation-duration:17s;animation-delay:-9s;opacity:.3}
.rlines i:nth-child(5){left:78%;animation-duration:13s;animation-delay:-1s}
.rlines i:nth-child(6){left:92%;animation-duration:21s;animation-delay:-12s;opacity:.25}
@keyframes rlDrift{0%{transform:rotate(-22deg) translateX(-120px)}100%{transform:rotate(-22deg) translateX(120px)}}
.rlines b{position:absolute;left:-40%;width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--red-2) 50%,transparent);animation:rlSweep 6s cubic-bezier(.4,0,.2,1) infinite;opacity:.9}
.rlines b:nth-child(7){top:28%}
.rlines b:nth-child(8){top:64%;animation-delay:-3s;animation-duration:8s}
@keyframes rlSweep{0%{left:-40%}100%{left:100%}}
.rlines svg{position:absolute;inset:0;width:100%;height:100%}
.rlines svg path{fill:none;stroke:var(--red-2);stroke-width:1.2;stroke-dasharray:6 14;opacity:.45;animation:rlDash 3s linear infinite}
.rlines svg path:nth-child(2){animation-duration:4.5s;opacity:.3;stroke-dasharray:2 10}
.rlines svg path:nth-child(3){animation-duration:2.2s;opacity:.55;stroke-dasharray:40 260;stroke-width:2}
@keyframes rlDash{to{stroke-dashoffset:-300}}
.rlines .glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,rgba(196,30,42,.28),transparent 60%);filter:blur(30px);animation:rlGlow 9s ease-in-out infinite alternate}
@keyframes rlGlow{0%{transform:translate(-20%,-30%)}100%{transform:translate(30%,10%)}}
.diff .wrap,.hcard.end>*:not(.rlines){position:relative;z-index:2}
.hcard.end{position:relative}
@media(prefers-reduced-motion:reduce){.rlines *{animation:none!important}}

/* preloader safety: hidden unless JS runs, and self-destructs after 4s anyway */
.pre{display:none}
html.js .pre{display:grid;animation:preKill 0s 4s forwards}
@keyframes preKill{to{visibility:hidden;pointer-events:none;opacity:0}}
html:not(.js) body{overflow:auto!important}
html:not(.js) header{transform:none;background:rgba(0,0,0,.5)}


/* ===== v5 : retours Kevin/David ===== */
body.fire{--red:#f8ac16;--red-2:#f8ac16;--red-soft:#FFF4CC;--red-dark:#c98a00}
body.fire .btn.red{background:#ffd700;color:var(--ink)}
body.fire .btn.dark::before,body.fire .btn.white::before,body.fire .btn.line::before{background:#ffd700}
body.fire .btn.dark:hover,body.fire .btn.white:hover,body.fire .btn.line:hover{color:var(--ink)}
body.fire .rlines i,body.fire .rlines b{background:linear-gradient(180deg,transparent,#f8ac16 50%,transparent)}
body.fire .rlines b{background:linear-gradient(90deg,transparent,#f8ac16 50%,transparent)}
body.fire .rlines svg path{stroke:#f8ac16}
body.fire .rlines .glow{background:radial-gradient(circle,rgba(248,172,22,.3),transparent 60%)}
body.fire .final::after{background:radial-gradient(60% 60% at 50% 50%,rgba(248,172,22,.3),transparent 70%)}
body.fire .dcard::before{background:radial-gradient(circle,rgba(248,172,22,.35),transparent 60%)}
body.fire .cform .f::after,body.fire .prog,body.fire .kpis .ul{background:#f8ac16}
body.fire .phero .beam{background:linear-gradient(90deg,transparent 10%,#c98a00 45%,#ffd700 60%,transparent 92%)}
.diff .wrap,.final .wrap,.hcard.end>*:not(.rlines){position:relative;z-index:2}
.final{position:relative}.final>img{z-index:0}.final .rlines{z-index:1}
/* curseur contextuel */
.cur2.fire{border-color:#f8ac16}.cur2.hov.fire{background:rgba(248,172,22,.92);color:var(--ink)}
.cur2.red{border-color:#C41E2A}.cur2.hov.red{background:rgba(196,30,42,.9);color:#fff}
/* carrousel : contour au survol */
.hcard{transition:border-color .4s,box-shadow .5s}
.hcard:hover{border-color:#C41E2A;box-shadow:0 30px 60px -40px rgba(196,30,42,.6)}
.hcard[data-theme=fire]:hover{border-color:#f8ac16;box-shadow:0 30px 60px -40px rgba(248,172,22,.6)}
.hcard[data-theme=fire] .idx,.hcard[data-theme=fire] .lbl::before{color:#f8ac16;background:#f8ac16}
.hcard[data-theme=fire] .idx{background:none}
.hcard[data-theme=fire] .btn.line::before{background:#ffd700}.hcard[data-theme=fire] .btn.line:hover{color:var(--ink)}
/* autres solutions : rond-flèche selon thème */
.ocard[data-theme=fire]:hover .go i{background:#ffd700!important;color:var(--ink)!important}
.ocard[data-theme=red]:hover .go i{background:#C41E2A!important;color:#fff!important}
/* split particuliers / pros : expansion au survol */
.split{display:flex;min-height:70vh}
.split a{flex:1;min-height:420px;transition:flex 1s var(--ease),filter .8s var(--ease)}
.split a .k,.split a h3,.split a .go{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.split:hover a{flex:.75;filter:brightness(.4)}
.split:hover a .k,.split:hover a h3,.split:hover a .go{opacity:0;transform:translateY(16px)}
.split a:hover{flex:1.7;filter:none}
.split a:hover .k,.split a:hover h3,.split a:hover .go{opacity:1;transform:none}
@media(max-width:800px){.split{flex-direction:column}.split:hover a{flex:1;filter:none}.split:hover a .k,.split:hover a h3,.split:hover a .go{opacity:1;transform:none}}
/* footer : icônes sociales */
.soc a{width:40px;height:40px}
.soc svg{width:17px;height:17px;fill:currentColor}
.soc a:hover{background:#C41E2A;border-color:#C41E2A;color:#fff}
body.fire .soc a:hover{background:#ffd700;border-color:#ffd700;color:var(--ink)}
/* équipe */
.tcard .r.fire{color:#f8ac16}
.tcard .noph{aspect-ratio:4/5;background:var(--cream);display:grid;place-items:center;font-family:var(--serif);font-size:64px;color:#C9C3BB;font-weight:600;position:relative}
.tcard .noph small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#A39D95}
.tcard.todo{border-style:dashed}
.kevin{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;margin-top:32px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:22px}
.kevin .ph{aspect-ratio:4/5;border-radius:14px}
.kevin h3{font-size:26px;margin-bottom:4px}
.kevin .r{color:var(--red);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.kevin p{color:var(--grey);font-size:14px;line-height:1.6}
.igrid>div:first-child{position:sticky;top:120px}.igrid h2{position:static}
@media(max-width:900px){.igrid>div:first-child{position:static}.kevin{grid-template-columns:1fr}}
/* conseils : incendie en jaune */
.art[data-theme=fire] .c,.cat[data-theme=fire] i{color:#f8ac16}
/* contact : carte plus grande, noir et blanc */
.mapfull .map{aspect-ratio:21/8;min-height:440px}
.mapfull .map iframe{filter:grayscale(1) contrast(1.08)}

/* ===== sticky contact latéral ===== */
.stk{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;padding:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-right:0;border-radius:18px 0 0 18px;box-shadow:0 20px 50px -25px rgba(0,0,0,.35)}
.stk a{display:flex;align-items:center;gap:0;width:48px;height:48px;border-radius:12px;background:var(--ink);color:#fff;overflow:hidden;transition:width .5s var(--ease),background .3s;white-space:nowrap;padding:0}
.stk a svg{width:20px;height:20px;flex:none;margin:0 14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stk a span{font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;padding-right:18px}
.stk a:hover{width:200px;background:#C41E2A}
.stk a:hover span{opacity:1}
.stk a.tel{background:#C41E2A}.stk a.tel:hover{background:var(--ink)}
body.fire .stk a:hover,body.fire .stk a.tel{background:#ffd700;color:var(--ink)}
body.fire .stk a.tel:hover{background:var(--ink);color:#fff}
@media(max-width:800px){.stk{top:auto;bottom:16px;right:16px;transform:none;flex-direction:row;border-radius:999px;border-right:1px solid var(--line);padding:6px}.stk a{width:46px;height:46px;border-radius:999px}.stk a:hover{width:46px}.stk a span{display:none}.stk a svg{margin:0 13px}}

.frow ul.pts2{list-style:none;margin:14px 0 16px;max-width:52ch}
.frow ul.pts2 li{padding:9px 0 9px 22px;border-top:1px solid var(--line);font-size:15px;color:var(--grey);line-height:1.6;position:relative}
.frow ul.pts2 li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}
.frow ul.pts2 li b{color:var(--ink)}
.frow p.small{font-size:14px;color:var(--grey)}

body.fire .rcard .stars{color:#f8ac16}
body.fire .rcard .who i{background:#FFF4CC;color:#c98a00}
.rev .gbadge:hover{border-color:var(--red);color:var(--red)}

/* ===== devis unifié ===== */
.seg{display:flex;gap:6px;background:var(--cream);padding:5px;border-radius:999px;width:fit-content;max-width:100%;flex-wrap:wrap}
.seg button{padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--grey);transition:background .3s,color .3s}
.seg button.on{background:var(--ink);color:#fff}
.seg button:hover:not(.on){color:var(--ink)}
#devis .only-part,#devis .only-pro,#devis .only-coll{display:none}
#devis[data-p=part] .only-part,#devis[data-p=pro] .only-pro,#devis[data-p=coll] .only-coll{display:grid}
#devis[data-p=pro] label.only-pro,#devis[data-p=coll] label.only-coll{display:inline-flex}
#devis .chips label.only-pro.only-coll{display:none}
#devis[data-p=pro] .chips label.only-pro,#devis[data-p=coll] .chips label.only-coll{display:inline-flex}

/* ===== FAQ ===== */
.fswitch{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.fswitch .seg button small{margin-left:6px;font-size:11px;opacity:.6}
.fsearch{position:relative;flex:1;min-width:280px;max-width:520px}
.fsearch input{width:100%;padding:14px 120px 14px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:15px}
.fsearch input:focus{outline:0;border-color:var(--red)}
.fsearch span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--grey)}
.fgrid2x{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.ftoc{position:sticky;top:110px;display:flex;flex-direction:column;gap:4px}
.ftoc a{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:500;color:var(--grey);transition:background .3s,color .3s}
.ftoc a:hover{background:#fff;color:var(--ink)}
.ftoc a span{font-size:11px;background:var(--cream);padding:3px 8px;border-radius:999px}
.ftoc a.fire{color:#c98a00}
.fchap{margin-bottom:clamp(40px,5vw,64px);scroll-margin-top:110px}
.fchap-h{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.fchap-h h3{font-size:clamp(26px,2.6vw,36px)}
.fchap-h span{font-size:12px;color:var(--grey);letter-spacing:.1em;text-transform:uppercase}
.fchap.fire .fchap-h{border-color:#f8ac16}
.fchap.fire .acc li.open button i{background:#ffd700;border-color:#ffd700;color:var(--ink)}
.fchap.fire .acc button:hover{color:#c98a00}
.fchap .acc button{font-size:clamp(18px,1.6vw,22px);padding:20px 0}
.fchap .acc .body p,.fchap .acc .body ul{font-size:15px;padding-bottom:18px}
.fchap .acc .body ul{padding-left:22px}
.fchap .acc li.open .body{max-height:2000px}
@media(max-width:900px){.fgrid2x{grid-template-columns:1fr}.ftoc{position:static;flex-direction:row;flex-wrap:wrap}}
/* ===== Actualités ===== */
.afilt{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.afilt button{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--grey);transition:all .3s}
.afilt button small{opacity:.6;margin-left:4px}
.afilt button.on,.afilt button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.afilt button[data-theme=fire].on,.afilt button[data-theme=fire]:hover{background:#ffd700;color:var(--ink);border-color:#ffd700}
.arts4{grid-template-columns:repeat(4,1fr)}
.arts4 .art h3{font-size:19px}
.arts4 .art p{font-size:13px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1100px){.arts4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.arts4{grid-template-columns:1fr}}
.phero .crumb a:hover{color:var(--red-2)}
/* ===== Article ===== */
.artwrap{display:grid;grid-template-columns:1fr 340px;gap:clamp(40px,6vw,80px);align-items:start}
.artbody{max-width:720px}
.artbody p{color:var(--grey);line-height:1.8;margin-bottom:22px;font-size:17px}
.artbody p.big{font-family:var(--serif);font-size:clamp(22px,2vw,28px);color:var(--ink);line-height:1.35;margin-bottom:36px}
.artbody h2{font-size:clamp(26px,2.6vw,36px);margin:40px 0 16px}
.artbody ul{margin:0 0 22px 22px;color:var(--grey);line-height:1.8}
.artbody blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.3;border-left:4px solid var(--red);padding:8px 0 8px 28px;margin:36px 0;color:var(--ink)}
body.fire .artbody blockquote{border-color:#f8ac16}
.todo-body{border:1px dashed var(--line);border-radius:18px;padding:28px;background:#fff}
.artside{position:sticky;top:110px;display:grid;gap:20px}
.asidebox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px}
.asidebox p{font-size:14px;color:var(--grey);margin-bottom:18px;line-height:1.6}
.asidebox .btn{width:100%;justify-content:center}
.relart{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.relart img{width:72px;height:54px;object-fit:cover;border-radius:10px;flex:none}
.relart b{display:block;font-size:14px;line-height:1.3}
.relart small{font-size:12px;color:var(--grey)}
.relart:hover b{color:var(--red)}
@media(max-width:900px){.artwrap{grid-template-columns:1fr}.artside{position:static}}

.fgrid2x[hidden]{display:none!important}

/* maillage interne */
a.il{font-weight:700;color:#C41E2A;border-bottom:1px solid currentColor;transition:opacity .3s}
a.il:hover{opacity:.7}
body.fire a.il{color:#c98a00}
.hero a.il,.phero a.il,.diff a.il,.final a.il,.hcard.end a.il{color:#fff;border-color:rgba(255,255,255,.5)}
body.fire .hero a.il,body.fire .phero a.il{color:#ffd700}
.frow p.rv+p.rv{margin-top:14px}