/*
Theme Name: PROTERAT
Theme URI: https://www.proterat.fr
Author: PROTERAT
Description: Thème one-page pour PROTERAT Hygiène 3D, dératisation, désinsectisation et désinfection en Île-de-France. Page d'accueil complète, formulaire de devis avec photo (envoi par e-mail et archivage dans l'admin), coordonnées réglables dans Apparence > Personnaliser.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: proterat
*/
:root{
  --forest:#0E1410; --forest-2:#14301F; --forest-3:#1B2A20;
  --bg:#F3F6F1; --mint:#E3ECE4; --mint-2:#F3F6F1; --mint-3:#CFDDD2; --white:#FFFFFF;
  --ink:#0F1712; --muted:#56635A; --muted-2:#56635A;
  --leaf:#1F7A45; --leaf-d:#17633A; --leaf-t:#DDEFE3; --terra:#2FA35A; --sprout:#DDEFE3; --sprout-h:#EAF6EE; --hl-d:#6FD394;
  --olive-t:#E3ECE4; --olive-tx:#14301F;
  --on-f:#F3F6F1; --on-f-m:#B9C6BC; --line-f:rgba(221,239,227,.18);
  --gold:#C9A13B;
  --r:20px; --r-lg:30px; --r-xl:40px;
  --sh:0 2px 6px rgba(10,18,13,.04),0 18px 40px -20px rgba(10,18,13,.2);
  --sh-lg:0 4px 12px rgba(10,18,13,.06),0 40px 80px -34px rgba(8,20,12,.42);
  --head:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:12px}
.dark :focus-visible,.hero :focus-visible,footer :focus-visible,.mbar :focus-visible{outline-color:var(--sprout)}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--forest);color:#FFFFFF;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}

h1,h2,h3,h4{font-family:var(--head);font-weight:700;letter-spacing:-.025em;line-height:1.04;font-optical-sizing:auto}
h2{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.035em;font-weight:750}
h3{font-size:21px;line-height:1.2;font-weight:650}
.hl{color:var(--leaf);font-weight:800}
.dark .hl,.hero .hl{color:var(--hl-d)}
.label{font:600 13px/1.3 var(--body);letter-spacing:.01em;color:var(--muted)}
.pt{display:inline-flex;align-items:center;gap:8px;align-self:start;justify-self:start;font:600 13.5px/1 var(--body);letter-spacing:.01em;color:var(--olive-tx);background:var(--olive-t);padding:9px 15px 9px 12px;border-radius:999px;white-space:nowrap}
.pt::before{content:"";width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 10 10 4 21 3c-.6 11-6.6 17-17 17z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 10 10 4 21 3c-.6 11-6.6 17-17 17z'/%3E%3C/svg%3E") center/contain no-repeat}
.dark .pt,.hero .pt{background:rgba(221,239,227,.14);color:var(--sprout)}
.pt.w{background:#FFFFFF}
.p-forest.deep{background:var(--forest-2)}
.stars{color:var(--terra)!important}.rev:nth-child(2) .stars{color:var(--sprout)!important}
.lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:58ch}
.dark .lead,.hero .lead{color:var(--on-f-m)}
.sec{padding:120px 0}
@media (max-width:760px){.sec{padding:76px 0}}
.panel{margin:0 12px;border-radius:var(--r-xl)}
.p-white{background:#FFFFFF}
.p-mint{background:var(--mint)}
.p-forest{background:var(--forest);color:var(--on-f);position:relative;overflow:hidden;isolation:isolate}
@media (max-width:640px){.panel{margin:0 8px;border-radius:28px}}
.gap{height:12px}
@media (max-width:640px){.gap{height:8px}}
.sec-head{display:grid;gap:18px;margin-bottom:56px;max-width:800px}
.sec-head.c{text-align:center;justify-items:center;margin-left:auto;margin-right:auto}
.sec-head.c .pt{justify-self:center}
.sec-head.c .lead{margin:0 auto}
.note{font:400 13.5px/1.5 var(--body);color:var(--muted-2);margin-top:20px}
.dark .note{color:var(--on-f-m)}

/* logo */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;color:var(--ink)}
.logo .mark{width:34px;height:37px;flex:none}
.wordmark{display:block;font:800 22px/1 var(--head);letter-spacing:.02em}
.wordmark span{color:var(--gold)}
.tagline{display:block;font:600 8.6px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px;white-space:nowrap}
.tagline i{font-style:normal;color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font:600 16px/1.1 var(--body);text-decoration:none;border-radius:999px;padding:16px 26px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
@media (max-width:520px){.btn{white-space:normal;text-align:center} header .btn,.mbar .btn{white-space:nowrap} .pt{white-space:normal;line-height:1.25;text-align:left}}
.btn-leaf{background:var(--leaf);color:#FFFFFF}
.btn-leaf:hover{background:var(--leaf-d);box-shadow:0 10px 24px -12px rgba(143,74,44,.55)}
.btn-sprout{background:var(--sprout);color:var(--forest)}
.btn-sprout:hover{background:var(--sprout-h)}
.btn-ghost{border-color:rgba(241,247,243,.34);color:#FFFFFF;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(241,247,243,.6)}
.btn-soft{background:var(--mint);color:var(--forest)}
.btn-soft:hover{background:var(--mint-3)}
.btn-white{background:#FFFFFF;color:var(--forest)}
.btn-white:hover{background:var(--mint)}

/* strip */
.strip{background:var(--forest-2);color:var(--on-f-m);font:500 13px/1.35 var(--body)}
.strip .wrap{display:flex;justify-content:center;align-items:center;gap:18px;min-height:36px;padding-top:7px;padding-bottom:7px;text-align:center}
.strip b{font-weight:600;color:var(--sprout)}
.strip a{text-decoration:none;font-weight:600;color:#FFFFFF;white-space:nowrap}
@media (max-width:640px){.strip .hide-s{display:none}}

/* header: floating white bar */
header.top{position:sticky;top:0;z-index:50;padding:12px 0}
header.top .bar{display:flex;align-items:center;gap:20px;height:68px;padding:0 10px 0 22px;background:rgba(255,255,255,.97);border-radius:999px;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 40px -18px rgba(10,16,12,.55)}
@supports (backdrop-filter:blur(8px)){header.top .bar{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}}
nav.main{display:flex;gap:2px;margin-left:auto;font-size:15px;font-weight:500}
nav.main a{white-space:nowrap;text-decoration:none;color:var(--muted);padding:9px 13px;border-radius:999px;transition:background .2s,color .2s}
nav.main a:hover{color:var(--forest);background:var(--mint)}
.hd-tel{width:48px;height:48px;padding:0;border-radius:50%}
header .btn-leaf{padding:14px 20px;font-size:15px}
@media (max-width:1240px){nav.main{display:none} .hd-tel{margin-left:auto}}
@media (max-width:560px){.hd-tel{display:none} header .btn-leaf{margin-left:auto;padding:12px 16px;font-size:14.5px} header.top .bar{padding:0 7px 0 16px;height:62px;gap:10px}}
@media (max-width:400px){header .xs-hide{display:none} header .btn-leaf{padding:12px 18px}}
@media (max-width:440px){header .tagline{font-size:6.8px;letter-spacing:.1em} header .wordmark{font-size:19px} header .logo .mark{width:28px;height:31px} header .logo{gap:9px}}

/* image slots: soft mint panels with green line-art */
.slot{position:relative;overflow:hidden;background:var(--mint);border-radius:var(--r-lg);color:#0E1410;margin:0}
.slot .ill{position:absolute;inset:0;width:100%;height:100%}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot img[hidden]{display:none}

/* hero */
.hero{position:relative;margin-top:-92px;padding:156px 0 0;color:var(--on-f);background:linear-gradient(var(--forest) 0, var(--forest) calc(100% - 150px), var(--bg) calc(100% - 150px));isolation:isolate}
.hero-bg{position:absolute;left:0;right:0;top:0;bottom:150px;overflow:hidden;z-index:-1}
.hero-bg svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hero-in{display:grid;justify-items:center;text-align:center}
.hero h1{font-size:clamp(42px,6.3vw,88px);letter-spacing:-.045em;line-height:.98;font-weight:750;max-width:15.5ch;margin:26px 0 26px;color:#FFFFFF;text-wrap:balance}
.hero .lead{margin:0 auto 18px;max-width:60ch}
.motto{display:inline-flex;align-items:center;gap:10px;font:600 17px/1.3 var(--head);color:#FFFFFF;margin-bottom:34px;letter-spacing:-.01em}
.motto svg{width:20px;height:20px;color:var(--sprout)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.proofs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.proofs li{display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;line-height:1.35;color:var(--on-f-m);background:rgba(255,255,255,.06);border:1px solid rgba(221,239,227,.14);padding:12px 18px 12px 12px;border-radius:999px}
.proofs li::before{content:"";width:30px;height:30px;flex:none;border-radius:50%;background:var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336421F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.proofs b{display:block;font:700 16px/1.2 var(--head);color:#FFFFFF;letter-spacing:-.01em}
.hero-stage{position:relative;margin-top:64px;padding-bottom:64px}
.hero-slot{aspect-ratio:21/9;border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
.tag{position:absolute;left:22px;top:22px;z-index:2;font:600 13px/1 var(--body);background:rgba(255,255,255,.95);color:var(--forest);padding:10px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px -8px rgba(10,18,13,.3)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px var(--leaf-t)}
.float-card{position:absolute;left:36px;bottom:20px;z-index:2;width:290px;background:#FFFFFF;border-radius:28px;padding:20px 22px 18px;box-shadow:var(--sh-lg);color:var(--ink);text-align:left}
.float-card .h{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.float-card .h .label:last-child{background:var(--mint);color:var(--leaf-d);padding:4px 9px;border-radius:999px;font-size:11.5px}
.float-card strong{display:block;font:700 17px/1.25 var(--head);letter-spacing:-.015em;margin-bottom:24px}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;height:78px}
.bars span{position:relative;background:var(--forest);border-radius:10px;min-height:6px}
.bars span:nth-child(2){background:var(--forest-3)}
.bars span:nth-child(3){background:var(--leaf)}
.bars span:last-child{background:var(--mint-3)}
.bars em{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font:600 11.5px/1 var(--body);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.bars-x{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;font:600 11.5px/1 var(--body);color:var(--muted-2);text-align:center}
.signs-card{position:absolute;right:36px;top:-36px;z-index:2;width:300px;background:#FFFFFF;color:var(--ink);border-radius:28px;padding:22px 22px 18px;box-shadow:var(--sh-lg);text-align:left}
.signs-card .pt{background:var(--olive-t);color:var(--olive-tx)}
.signs-card h2{font-size:19px;letter-spacing:-.02em;font-weight:700;margin:12px 0 14px;line-height:1.2}
.signs-card ul{list-style:none;display:grid;gap:8px;margin-bottom:14px}
.signs-card li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;font-size:14.5px;line-height:1.3;background:var(--mint-2);border-radius:16px;padding:7px 10px 7px 7px}
.signs-card li span{width:34px;height:34px;border-radius:50%;background:var(--leaf-t);color:var(--leaf-d);display:grid;place-items:center;font:800 14px/1 var(--head)}
.signs-card a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--leaf-d);text-decoration:none;padding:6px 2px}
.signs-card a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){
  .hero-slot{aspect-ratio:16/10}
  .signs-card{top:auto;bottom:20px;right:24px}
  .float-card{left:24px}
}
@media (max-width:760px){
  .hero{padding-top:132px}
  .hero-stage{margin-top:48px;padding-bottom:40px;display:grid;gap:12px}
  .hero-slot{aspect-ratio:4/3.3;border-radius:30px}
  .float-card,.signs-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .float-card{margin:-72px 14px 0}
  .proofs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .proofs li{border-radius:20px;padding:12px}
}
@media (max-width:420px){.proofs li::before{width:24px;height:24px;background-size:12px}.proofs li{gap:9px;font-size:13px}.proofs b{font-size:15px}.cta-row .btn{width:100%}}

/* services bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento .t-img{min-height:380px;border-radius:var(--r-xl)}
.bento .i1{grid-column:8/13;grid-row:1}
.bento .x1{grid-column:1/8;grid-row:1}
.bento .i2{grid-column:1/6;grid-row:2}
.bento .x2{grid-column:6/13;grid-row:2}
.bento .x3{grid-column:1/8;grid-row:3}
.bento .i3{grid-column:8/13;grid-row:3}
.svc{border-radius:var(--r-xl);padding:44px;display:flex;flex-direction:column;gap:20px}
.svc.mintt{background:var(--mint)}
.svc.whitet{background:var(--white);box-shadow:var(--sh)}
.svc.whitet .svc-k .ico{background:var(--mint)}
.svc.dark{background:var(--forest);color:var(--on-f)}
.svc-k{display:flex;align-items:center;gap:12px}
.svc-k .ico{width:52px;height:52px;border-radius:50%;background:#FFFFFF;color:var(--leaf-d);display:grid;place-items:center}
.svc.dark .svc-k .ico{background:rgba(221,239,227,.14);color:var(--sprout)}
.svc-k .ico svg{width:24px;height:24px}
.svc h3{font-size:clamp(34px,3.6vw,48px);letter-spacing:-.04em;font-weight:750}
.svc p{color:var(--muted);max-width:50ch}
.svc.dark p{color:var(--on-f-m)}
.species{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 var(--body);padding:9px 13px;border-radius:999px;background:#FFFFFF;color:var(--forest)}
.svc.dark .chip{background:rgba(255,255,255,.08);color:#FFFFFF}
.svc .btn{align-self:flex-start;margin-top:auto}
@media (max-width:900px){
  .bento{grid-template-columns:1fr}
  .bento .i1,.bento .x1,.bento .i2,.bento .x2,.bento .i3,.bento .x3{grid-column:auto;grid-row:auto}
  .bento .t-img{min-height:0;aspect-ratio:16/10;border-radius:30px}
  .svc{padding:30px 24px;border-radius:30px}
}

/* checks */
.checks{list-style:none;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;line-height:1.45}
.checks li::before{content:"";width:22px;height:22px;margin-top:0;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.svc.dark .checks li::before{background-color:var(--sprout);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336421F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* signs / self-check */
.check-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:20px;align-items:stretch}
.side-fig{display:flex;flex-direction:column;background:var(--forest);color:var(--on-f);border-radius:var(--r-xl);overflow:hidden;margin:0;padding:12px}
.side-fig .slot{flex:1;min-height:320px;border-radius:30px}
.side-fig figcaption{padding:24px 18px 16px;font-size:15.5px;color:var(--on-f-m);line-height:1.55}
.side-fig figcaption b{display:block;font:700 22px/1.2 var(--head);letter-spacing:-.02em;color:#FFFFFF;margin-bottom:8px}
.selfcheck{background:#FFFFFF;border-radius:var(--r-xl);padding:36px;display:grid;gap:22px;box-shadow:var(--sh)}
.selfcheck fieldset{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.selfcheck legend{margin-bottom:12px;float:left;width:100%;font:700 20px/1.2 var(--head);color:var(--ink);letter-spacing:-.02em}
.selfcheck .grp{grid-column:1/-1;font:600 13px/1 var(--body);color:var(--leaf-d);margin:10px 0 2px;display:flex;align-items:center;gap:10px}
.selfcheck .grp::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--mint)}
.sign{position:relative;display:grid;grid-template-columns:40px 1fr 24px;gap:12px;align-items:center;padding:10px 14px 10px 10px;border:1.5px solid transparent;background:var(--mint-2);border-radius:20px;cursor:pointer;transition:border-color .2s,background .2s}
.sign:hover{border-color:var(--mint-3)}
.sign input{position:absolute;opacity:0;width:1px;height:1px}
.sign .ic{width:40px;height:40px;border-radius:50%;background:#FFFFFF;color:var(--leaf-d);display:grid;place-items:center}
.sign .ic svg{width:21px;height:21px}
.sign b{display:block;font-weight:600;font-size:15.5px;line-height:1.3}
.sign small{display:block;color:var(--muted);font-size:13.5px;line-height:1.35}
.sign .box{width:24px;height:24px;border-radius:50%;border:2px solid #C5D3C8;background:#FFFFFF;display:grid;place-items:center;transition:all .2s}
.sign .box svg{width:13px;height:13px;opacity:0;color:#FFFFFF}
.sign:has(input:checked){border-color:var(--leaf);background:var(--leaf-t)}
.sign input:checked ~ .box{background:var(--leaf);border-color:var(--leaf)}
.sign input:checked ~ .box svg{opacity:1}
.sign input:focus-visible ~ .box{outline:3px solid var(--leaf);outline-offset:3px}
.sign.extra{grid-column:1/-1;background:#FFFFFF;border:1.5px dashed var(--mint-3)}
.result{border-radius:26px;padding:24px;background:var(--mint-2);display:grid;gap:14px;transition:background .3s,color .3s}
.result .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lvl{font:600 13px/1 var(--body);padding:9px 13px;border-radius:999px;background:#FFFFFF;color:var(--muted)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter i{height:8px;border-radius:999px;background:var(--mint-3);transition:background .3s}
.result p{font-size:15.5px;line-height:1.5;color:var(--muted)}
.result p b{display:block;font:700 20px/1.25 var(--head);letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.result .btn{justify-self:start}
.result[data-l="1"] .meter i:nth-child(-n+1){background:var(--leaf)}
.result[data-l="1"] .lvl{color:var(--leaf-d)}
.result[data-l="2"]{background:var(--leaf-t)}
.result[data-l="2"] .meter i:nth-child(-n+2){background:var(--leaf)}
.result[data-l="2"] .lvl{background:var(--leaf);color:#FFFFFF}
.result[data-l="3"],.result[data-l="4"]{background:var(--forest);color:var(--on-f)}
.result[data-l="3"] .label,.result[data-l="4"] .label{color:var(--on-f-m)}
.result[data-l="3"] .meter i,.result[data-l="4"] .meter i{background:rgba(255,255,255,.12)}
.result[data-l="3"] .meter i:nth-child(-n+3),.result[data-l="4"] .meter i{background:var(--sprout)}
.result[data-l="3"] .lvl,.result[data-l="4"] .lvl{background:var(--sprout);color:var(--forest)}
.result[data-l="3"] p,.result[data-l="4"] p{color:var(--on-f-m)}
.result[data-l="3"] p b,.result[data-l="4"] p b{color:#FFFFFF}
.result[data-l="3"] .btn,.result[data-l="4"] .btn{background:var(--sprout);color:var(--forest)}
.result[data-l="3"] :focus-visible,.result[data-l="4"] :focus-visible{outline-color:var(--sprout)}
@media (max-width:960px){.check-grid{grid-template-columns:1fr}.side-fig{flex-direction:row;align-items:stretch}.side-fig .slot{min-height:220px;flex:0 0 42%}.side-fig figcaption{align-self:center}}
@media (max-width:640px){.selfcheck fieldset{grid-template-columns:1fr}.side-fig{flex-direction:column}.side-fig .slot{flex:none;min-height:200px}}
@media (max-width:520px){.selfcheck{padding:22px 14px;border-radius:28px}}

/* method: horizontal timeline */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;display:flex;flex-direction:column;gap:22px}
.step .num{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--leaf);color:#FFFFFF;display:grid;place-items:center;font:800 22px/1 var(--head);letter-spacing:-.02em;box-shadow:0 0 0 8px var(--leaf-t)}
.step:last-child .num{background:var(--forest)}
.step:not(:last-child)::before{content:"";position:absolute;top:31px;left:84px;right:-10px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--mint-3) 0 10px,transparent 10px 18px)}
.step-c{background:var(--mint-2);border-radius:28px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.step-c .h{display:flex;align-items:center;gap:12px}
.step .ico{width:40px;height:40px;border-radius:50%;background:#FFFFFF;color:var(--leaf-d);display:grid;place-items:center;flex:none}
.step .ico svg{width:20px;height:20px}
.step h3{font-size:24px;letter-spacing:-.03em}
.step p{color:var(--muted);font-size:15.5px}
.step ul{list-style:none;display:grid;gap:8px;font-size:14.5px;margin-top:4px;margin-bottom:6px}
.step li{display:grid;grid-template-columns:18px 1fr;gap:8px;line-height:1.45}
.step li::before{content:"";width:14px;height:14px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5653F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/14px no-repeat}
.step .t{font:600 13px/1 var(--body);color:var(--leaf-d);background:var(--leaf-t);align-self:flex-start;padding:9px 12px;border-radius:999px;margin-top:auto}
.seal{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:40px}
.seal .slot{min-height:380px;border-radius:var(--r-xl)}
.seal-txt{background:var(--forest);color:var(--on-f);border-radius:var(--r-xl);padding:48px;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative;overflow:hidden;isolation:isolate}
.seal-txt::after{content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:58% 42% 50% 50%/50% 46% 54% 50%;background:var(--forest-3);z-index:-1}
.seal-txt h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.035em;line-height:1.06;color:#FFFFFF}
.seal-txt p{color:var(--on-f-m)}
.seal-txt .big{font:800 64px/1 var(--head);letter-spacing:-.05em;color:var(--sprout)}
.seal-txt .big + span{font-size:14.5px;color:var(--on-f-m)}
@media (max-width:1040px){
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .step:nth-child(2)::before{display:none}
}
@media (max-width:820px){.seal{grid-template-columns:1fr}.seal .slot{min-height:280px}}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;row-gap:20px}
  .step{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
  .step .num{width:52px;height:52px;font-size:18px;box-shadow:0 0 0 6px var(--leaf-t)}
  .step:not(:last-child)::before,.step:nth-child(2)::before{display:block;top:62px;bottom:-14px;left:25px;right:auto;width:3px;height:auto;background:repeating-linear-gradient(180deg,var(--mint-3) 0 10px,transparent 10px 18px)}
  .step-c{padding:22px 18px}
  .seal-txt{padding:30px 22px}
  .seal-txt .big{font-size:52px}
}

/* report */
.rep-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.reasons{list-style:none;display:grid;gap:10px;margin-top:36px}
.reasons li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px;background:#FFFFFF;border-radius:24px}
.reasons .n{width:44px;height:44px;border-radius:50%;background:var(--leaf-t);color:var(--leaf-d);display:grid;place-items:center;font:800 15px/1 var(--head)}
.reasons h3{font-size:19px;margin-bottom:4px}
.reasons p{color:var(--muted);font-size:15.5px}
.report{position:relative;background:#FFFFFF;border-radius:var(--r-xl);padding:36px 36px 28px;box-shadow:var(--sh-lg)}
.report-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:20px;margin-bottom:6px;border-bottom:3px solid var(--forest)}
.report-h .who{display:flex;gap:12px;align-items:flex-start}
.report-h .mark{width:26px;height:29px;flex:none;color:var(--ink);margin-top:2px}
.report-h h3{font-size:24px;letter-spacing:-.03em}
.report-h h3 small{display:block;font:500 14.5px/1.4 var(--body);color:var(--muted);letter-spacing:0;margin-top:6px}
.report-h .ref{font:500 13px/1.6 var(--body);color:var(--muted);text-align:right;flex:none;font-variant-numeric:tabular-nums}
.fict{display:inline-block;margin-top:6px;background:var(--mint);color:var(--leaf-d);font:600 11.5px/1 var(--body);padding:6px 10px;border-radius:999px}
.report dl{display:grid;grid-template-columns:170px 1fr;font-size:15px}
.report dt,.report dd{padding:13px 0;border-bottom:1px solid var(--mint)}
.report dt{font:600 13px/1.7 var(--body);color:var(--muted-2)}
.pill{display:inline-block;font:600 12.5px/1 var(--body);padding:6px 10px;border-radius:999px;vertical-align:1px;background:var(--leaf-t);color:var(--leaf-d)}
.pill.o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--leaf)}
.cons{display:grid;gap:7px;margin-top:2px}
.cons div{display:grid;grid-template-columns:26px 1fr 40px;gap:10px;align-items:center;font:500 12.5px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.cons .tr{height:8px;background:var(--mint-2);border-radius:999px;overflow:hidden}
.cons .tr i{display:block;height:100%;background:var(--sprout);border-radius:999px}
.cons .hi{color:var(--ink);font-weight:700}
.cons .hi .tr i{background:var(--leaf)}
.cons .v{text-align:right}
.report ol{padding-left:18px;display:grid;gap:4px}
.sign-off{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;font:500 12.5px/1.5 var(--body);color:var(--muted-2)}
.stamp{position:absolute;right:32px;top:126px;width:108px;height:108px;border-radius:50%;border:2px solid var(--leaf);color:var(--leaf-d);display:grid;place-items:center;text-align:center;font:700 11px/1.3 var(--head);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-10deg);background:rgba(255,255,255,.9)}
.stamp::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--leaf);opacity:.6}
.plan-card{background:#FFFFFF;border-radius:var(--r-xl);padding:28px;margin-top:16px}
.plan-card .hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.plan-card .hdr .label{background:var(--mint);color:var(--leaf-d);padding:6px 11px;border-radius:999px;font-size:12px}
.plan-card h3{font-size:20px}
.plan-card svg{width:100%;height:auto}
.legend-l{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.legend-l li{display:inline-flex;align-items:center;gap:8px}
.legend-l i{width:14px;height:14px;border-radius:4px;flex:none}
@media (max-width:1000px){.rep-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:560px){.report{padding:24px 18px 20px;border-radius:28px}.report dl{grid-template-columns:1fr}.report dt{border:0;padding-bottom:0}.report-h{flex-direction:column}.report-h .ref{text-align:left}.stamp{display:none}.plan-card{padding:18px 14px;border-radius:28px}.reasons li{padding:16px;grid-template-columns:38px 1fr;gap:12px}.reasons .n{width:38px;height:38px}}

/* eco (forest panel) */
.deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.deco svg{width:100%;height:100%;max-width:none}
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.eco-grid h2{color:#FFFFFF}
.eco-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
.eco-list li{padding:28px 24px;display:flex;flex-direction:column;gap:18px;background:rgba(255,255,255,.055);border:1px solid var(--line-f);border-radius:30px;backdrop-filter:blur(2px)}
.eco-list .ei{width:52px;height:52px;border-radius:50%;background:var(--sprout);color:var(--forest);display:grid;place-items:center}
.eco-list .ei svg{width:23px;height:23px}
.eco-list b{display:block;font:700 19px/1.25 var(--head);letter-spacing:-.02em;margin-bottom:6px;color:#FFFFFF}
.eco-list span{color:var(--on-f-m);font-size:15.5px;line-height:1.5}
.eco-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;margin-top:44px;padding:26px 30px;border-radius:999px;background:rgba(0,0,0,.14)}
.eco-motto{display:flex;align-items:center;gap:14px;font:700 clamp(22px,2.6vw,32px)/1.15 var(--head);letter-spacing:-.03em;color:#FFFFFF}
.eco-motto svg{width:30px;height:30px;color:var(--sprout);flex:none}
.eco-foot .note{margin:0;max-width:44ch}
@media (max-width:1040px){.eco-list{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.eco-grid{grid-template-columns:1fr;gap:24px}.eco-foot{border-radius:28px;padding:24px}}
@media (max-width:560px){.eco-list{grid-template-columns:1fr;margin-top:40px}.eco-list li{padding:22px 20px;border-radius:26px;flex-direction:row;align-items:flex-start;gap:16px}.eco-list .ei{width:46px;height:46px;flex:none}}

/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why div{background:#FFFFFF;border-radius:30px;padding:30px;transition:transform .25s,box-shadow .25s}
.why div:nth-child(3),.why div:nth-child(4){background:var(--mint)}
.why div:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.why .wi{width:52px;height:52px;border-radius:50%;background:var(--leaf-t);color:var(--leaf-d);display:grid;place-items:center;margin-bottom:22px}
.why div:nth-child(3) .wi,.why div:nth-child(4) .wi{background:#FFFFFF}
.why .wi svg{width:23px;height:23px}
.why h3{font-size:21px;margin-bottom:6px;letter-spacing:-.025em}
.why p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}.why div:nth-child(3),.why div:nth-child(4){background:#FFFFFF}.why div:nth-child(2),.why div:nth-child(3){background:var(--mint)}}
@media (max-width:560px){.why{grid-template-columns:1fr}.why div{padding:24px 20px;border-radius:26px}.why div:nth-child(n){background:#FFFFFF}.why div:nth-child(even){background:var(--mint)}}

/* audiences */
.aud{display:grid;grid-template-columns:350px 1fr;gap:16px;align-items:stretch}
.aud-tabs{display:grid;gap:8px;align-content:start}
.aud-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:42px 1fr 22px;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:24px;background:rgba(255,255,255,.6);font:600 16px/1.25 var(--body);transition:background .2s,color .2s,box-shadow .2s}
.aud-tab small{display:block;font:400 13.5px/1.35 var(--body);color:var(--muted);margin-top:3px}
.aud-tab .ti{width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--leaf-d);display:grid;place-items:center}
.aud-tab .ti svg{width:21px;height:21px}
.aud-tab .arr{color:var(--muted);font-size:15px;transition:transform .2s}
.aud-tab:hover{background:#FFFFFF}
.aud-tab[aria-selected="true"]{background:var(--forest);color:#FFFFFF;box-shadow:var(--sh)}
.aud-tab[aria-selected="true"] small{color:var(--on-f-m)}
.aud-tab[aria-selected="true"] .ti{background:var(--sprout);color:var(--forest)}
.aud-tab[aria-selected="true"] .arr{color:var(--sprout);transform:translateX(3px)}
.aud-tab:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.aud-panel{background:#FFFFFF;border-radius:var(--r-xl);padding:42px;display:grid;grid-template-columns:1.35fr 1fr;gap:32px;box-shadow:var(--sh)}
.aud-panel h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.035em;margin-bottom:14px}
.aud-panel p{color:var(--muted);margin-bottom:22px}
.aud-side{background:var(--mint-2);border-radius:28px;padding:26px;display:grid;gap:14px;align-content:start}
.aud-side .big{font:800 46px/1 var(--head);letter-spacing:-.045em;color:var(--leaf-d)}
.aud-side .big + span{display:block;font-size:14px;color:var(--muted);margin-top:8px}
.aud-side hr{border:0;border-top:2px solid var(--mint)}
.aud-side .zones{display:flex;flex-wrap:wrap;gap:6px}
.aud-side .chip{background:#FFFFFF}
.aud-side .btn{justify-self:start}
@media (max-width:1000px){.aud{grid-template-columns:1fr}.aud-tabs{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.aud-panel{grid-template-columns:1fr;padding:26px 20px;border-radius:30px}}
@media (max-width:520px){.aud-tabs{grid-template-columns:1fr}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.gal figure{margin:0;display:flex;flex-direction:column;gap:12px}
.gal .slot{aspect-ratio:4/3;border-radius:30px}
.gal figure:nth-child(1){grid-column:span 7}
.gal figure:nth-child(1) .slot{aspect-ratio:auto;flex:1;min-height:360px}
.gal figure:nth-child(2){grid-column:span 5}
.gal figure:nth-child(3){grid-column:span 5}
.gal figure:nth-child(4){grid-column:span 7}
.gal figure:nth-child(4) .slot{aspect-ratio:auto;flex:1;min-height:300px}
.gal figure:nth-child(2) .slot,.gal figure:nth-child(3) .slot{background:var(--mint-2)}
.gal figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 16px/1.35 var(--head);letter-spacing:-.01em;padding:0 6px}
.gal figcaption span{font:500 13px/1.3 var(--body);color:var(--leaf-d);background:var(--leaf-t);padding:6px 10px;border-radius:999px;text-align:right;letter-spacing:0;white-space:nowrap}
@media (max-width:820px){.gal{grid-template-columns:1fr 1fr}.gal figure{grid-column:span 1!important}.gal figure .slot{aspect-ratio:4/3!important;min-height:0!important;flex:none!important}}
@media (max-width:520px){.gal{grid-template-columns:1fr}.gal figcaption{flex-direction:column;align-items:flex-start;gap:6px}.gal figcaption span{text-align:left}}

/* contract + safety */
.cs{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.card{background:#FFFFFF;border-radius:var(--r-xl);padding:40px}
.card h3{font-size:clamp(26px,2.8vw,32px);letter-spacing:-.035em;margin:18px 0 12px;line-height:1.08}
.card > p{color:var(--muted)}
.cal{margin:30px 0 24px}
.cal-row{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.cal-row span{font:600 12px/1 var(--body);color:var(--muted-2);text-align:center;padding-bottom:8px}
.cal-row i{height:44px;border-radius:14px;background:var(--mint-2);display:grid;place-items:center}
.cal-row i.p{background:var(--leaf)}
.cal-row i.p::after{content:"";width:7px;height:7px;border-radius:50%;background:#FFFFFF}
.cal-row i.u{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--leaf);background-image:repeating-linear-gradient(45deg,var(--leaf-t) 0 4px,transparent 4px 8px)}
.cal-leg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.cal-leg span{display:inline-flex;align-items:center;gap:8px}
.cal-leg i{width:14px;height:14px;border-radius:5px;display:inline-block}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feats div{padding:20px 18px;background:var(--mint-2);border-radius:22px}
.feats b{display:block;font:700 17px/1.25 var(--head);letter-spacing:-.02em;margin-bottom:6px}
.feats p{font-size:14.5px;color:var(--muted);line-height:1.5}
.card.safe{background:var(--mint)}
.card.safe .pt{background:#FFFFFF}
.safe-list{list-style:none;display:grid;gap:8px;margin-top:22px}
.safe-list li{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:14px;background:rgba(255,255,255,.62);border-radius:20px;font-size:15.5px;line-height:1.45}
.safe-list .si{width:42px;height:42px;border-radius:50%;background:#FFFFFF;color:var(--leaf-d);display:grid;place-items:center}
.safe-list .si svg{width:21px;height:21px}
.safe-list b{display:block;font-weight:600}
.safe-list span{color:var(--muted)}
.todo{margin-top:18px;font:500 13px/1.5 var(--body);color:var(--muted);border:1.5px dashed #C5D3C8;padding:12px 14px;border-radius:16px}
@media (max-width:960px){.cs{grid-template-columns:1fr}}
@media (max-width:600px){.card{padding:26px 18px;border-radius:28px}.feats{grid-template-columns:1fr}.cal-row{gap:3px}.cal-row i{height:32px;border-radius:9px}.cal-row span{font-size:10.5px}}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev{background:#FFFFFF;border-radius:30px;padding:32px;display:flex;flex-direction:column;gap:18px;margin:0}
.rev:nth-child(2){background:var(--forest);color:var(--on-f)}
.rev .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stars{display:flex;gap:3px;color:var(--leaf)}
.rev:nth-child(2) .stars{color:var(--sprout)}
.stars svg{width:16px;height:16px}
.rev blockquote{font:500 18px/1.5 var(--body);letter-spacing:-.005em}
.rev blockquote::before{content:"";display:block;width:30px;height:22px;margin-bottom:14px;background:var(--leaf-t);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V12C0 4.5 4 .8 11 0v4.5C7.4 5.3 5.7 7.3 5.5 11H11v11zm18 0V12c0-7.5 4-11.2 11-12v4.5c-3.6.8-5.3 2.8-5.5 6.5H29v11z'/%3E%3C/svg%3E") left/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V12C0 4.5 4 .8 11 0v4.5C7.4 5.3 5.7 7.3 5.5 11H11v11zm18 0V12c0-7.5 4-11.2 11-12v4.5c-3.6.8-5.3 2.8-5.5 6.5H29v11z'/%3E%3C/svg%3E") left/contain no-repeat;background-color:var(--leaf)}
.rev:nth-child(2) blockquote::before{background-color:var(--sprout)}
.rev .who{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:14.5px;padding-top:6px}
.rev .who b{display:block;font-weight:600}
.rev .who span{color:var(--muted);font-size:13.5px}
.rev:nth-child(2) .who span{color:var(--on-f-m)}
.av{width:44px;height:44px;border-radius:50%;background:var(--leaf-t);color:var(--leaf-d);display:grid;place-items:center;font:800 14px/1 var(--head);flex:none}
.rev:nth-child(2) .av{background:var(--sprout);color:var(--forest)}
.ex{font:600 11.5px/1 var(--body);color:var(--muted);background:var(--mint-2);padding:6px 10px;border-radius:999px}
.rev:nth-child(2) .ex{background:rgba(255,255,255,.1);color:var(--on-f-m)}
@media (max-width:900px){.revs{grid-template-columns:1fr}.rev{padding:26px 22px;border-radius:28px}}

/* zone + faq */
.zf{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.zone-map{background:var(--mint-2);border-radius:var(--r-xl);overflow:hidden;margin-top:32px}
.zone-map svg{width:100%;height:auto}
.faq h2{margin:18px 0 28px}
.faq details{background:var(--mint-2);border-radius:24px;margin-bottom:10px;transition:background .2s}
.faq details[open]{background:var(--mint)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 20px 20px 24px;font:600 18px/1.35 var(--head);letter-spacing:-.015em;border-radius:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--forest)}
.faq details p{padding:0 70px 24px 24px;color:var(--muted)}
@media (max-width:900px){.zf{grid-template-columns:1fr;gap:56px}}
@media (max-width:520px){.faq details p{padding:0 18px 20px}.faq summary{font-size:16.5px;padding:16px 14px 16px 18px}}

/* contact (forest panel) */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.contact h2{margin:18px 0 20px;color:#FFFFFF}
.callcard{background:rgba(255,255,255,.06);border:1px solid var(--line-f);border-radius:30px;padding:28px;margin-top:34px}
.callcard .label{color:var(--sprout)}
.callcard a{display:block;font:800 clamp(34px,4.4vw,48px)/1 var(--head);letter-spacing:-.04em;text-decoration:none;margin:12px 0 12px;color:#FFFFFF}
.callcard a:hover{color:var(--sprout)}
.callcard p{font-size:15px;color:var(--on-f-m)}
.hours{display:grid;gap:6px;margin-top:14px;font-size:15px}
.hours div{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;border-radius:16px;background:rgba(0,0,0,.14)}
.hours span:last-child{color:var(--sprout);font-weight:600;font-variant-numeric:tabular-nums}
form.devis{background:#FFFFFF;color:var(--ink);border-radius:var(--r-xl);padding:40px;display:grid;gap:20px;box-shadow:var(--sh-lg)}
form.devis :focus-visible{outline-color:var(--leaf)}
.field{display:grid;gap:8px;border:0;min-width:0}
.field label,.field legend{font:600 14px/1.3 var(--body);color:var(--ink)}
.field legend{margin-bottom:12px}
.field input,.field textarea{font:400 16px/1.4 var(--body);padding:15px 18px;border-radius:18px;border:1.5px solid transparent;background:var(--mint-2);color:var(--ink);width:100%;transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7D7566}
.field input:hover,.field textarea:hover{border-color:var(--mint-3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--leaf);background:#FFFFFF;box-shadow:0 0 0 4px rgba(47,163,90,.2)}
.field input[aria-invalid="true"]{border-color:#A3352B;background:#FFFFFF}
.err{color:#A3352B;font-size:14px;font-weight:600;display:none}
.err.on{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chips-in label{cursor:pointer;position:relative}
.chips-in input{position:absolute;opacity:0;width:1px;height:1px}
.chips-in span{display:inline-block;padding:11px 16px;border-radius:999px;border:1.5px solid transparent;background:var(--mint-2);font:500 15px/1.2 var(--body);color:var(--ink);transition:all .2s}
.chips-in label:hover span{border-color:var(--mint-3)}
.chips-in input:checked + span{background:var(--forest);color:#FFFFFF;border-color:var(--forest)}
.chips-in input:focus-visible + span{outline:3px solid var(--leaf);outline-offset:3px}
.drop{position:relative;display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--mint-3);border-radius:22px;cursor:pointer;background:var(--mint-2);transition:border-color .2s,background .2s}
.drop:hover{border-color:var(--leaf);background:var(--leaf-t)}
.drop:focus-within{outline:3px solid var(--leaf);outline-offset:3px}
.drop .ic{width:48px;height:48px;border-radius:50%;background:#FFFFFF;color:var(--leaf-d);display:grid;place-items:center;flex:none}
.drop b{display:block;font-size:15px;font-weight:600;word-break:break-word}
.drop small{color:var(--muted);font-size:13.5px}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
form .btn{width:100%;padding:19px}
.fine{font-size:13px;color:var(--muted-2);text-align:center}
.form-ok{text-align:center;padding:40px 10px}
.form-ok[hidden]{display:none}
.form-ok .okc{width:68px;height:68px;border-radius:50%;background:var(--leaf);color:#FFFFFF;display:grid;place-items:center;margin:0 auto;box-shadow:0 0 0 10px var(--leaf-t)}
.form-ok h3{font-size:32px;letter-spacing:-.035em;margin:24px 0 8px}
.form-ok p{color:var(--muted)}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){form.devis{padding:24px 16px;border-radius:28px}.two{grid-template-columns:1fr}.callcard{padding:22px}.hours div{padding:12px 14px}}

/* footer */
footer{background:var(--forest-2);color:var(--on-f-m);padding:80px 0 124px;font-size:14.5px;margin-top:12px;border-radius:40px 40px 0 0}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
footer h4{font:700 16px/1 var(--head);letter-spacing:-.01em;color:#FFFFFF;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:#FFFFFF}
.flogo{display:inline-grid;justify-items:start;gap:14px;text-decoration:none;color:#FFFFFF}
.flogo .mark{width:60px;height:66px}
.flogo .wordmark{font-size:38px;letter-spacing:.02em}
.flogo .tagline{font-size:10px;color:var(--on-f-m);margin-top:0}
.motto-f{font:600 21px/1.3 var(--head);letter-spacing:-.02em;color:#FFFFFF;margin-top:22px;max-width:30ch}
.sister{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:11px 16px;background:rgba(255,255,255,.06);border:1px solid var(--line-f);border-radius:999px;font-size:13.5px;color:#d9e4dd}
.sister:hover{background:rgba(255,255,255,.1)}
.sister b{font-weight:800;letter-spacing:.04em;color:#FFFFFF}
.legal{grid-column:1/-1;border-top:1px solid var(--line-f);padding-top:24px;margin-top:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 12.5px/1.5 var(--body)}
@media (max-width:820px){footer{border-radius:28px 28px 0 0;padding-top:60px}footer .wrap{grid-template-columns:1fr 1fr}footer .wrap > div:first-child{grid-column:1/-1}}
@media (min-width:821px){footer{padding-bottom:72px}}

/* mobile bar */
.mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:rgba(14,20,16,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 18px 40px -14px rgba(10,16,12,.55)}
.mbar .btn{padding:14px 8px;font-size:15px}
@media (max-width:820px){.mbar{display:grid}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .btn:hover,.why div:hover{transform:none}
}

/* hero photo background */
.hero-bg{background:#0E1410}
.hero-bg::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1344/752;max-height:100%;background:linear-gradient(rgba(14,20,16,.28),rgba(14,20,16,.28)),url("images/derat-hero-bg.jpg") center top/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
.hero-bg svg{display:none}
.hero h1,.hero .lead{text-shadow:0 2px 24px rgba(0,0,0,.6)}
@media (max-width:900px){.hero-bg::before{right:auto;width:860px;height:480px;aspect-ratio:auto;background-position:left top;background-image:linear-gradient(rgba(14,20,16,.2),rgba(14,20,16,.2)),url("images/derat-hero-bg.jpg")}}

/* section photo backgrounds */
#ecologie,#contact{position:relative;isolation:isolate}
#ecologie::before,#contact::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-size:cover;background-repeat:no-repeat}
#ecologie::before{background-image:linear-gradient(90deg,rgba(20,48,31,.93) 0%,rgba(20,48,31,.7) 45%,rgba(20,48,31,.3) 100%),url("images/derat-eco-bg.jpg");background-position:center}
#contact::before{background-image:linear-gradient(90deg,rgba(14,20,16,.9) 0%,rgba(14,20,16,.55) 45%,rgba(14,20,16,.35) 100%),url("images/derat-contact-bg.jpg");background-position:center 40%}
@media (max-width:900px){#ecologie::before{background-image:linear-gradient(rgba(20,48,31,.78),rgba(20,48,31,.88)),url("images/derat-eco-bg.jpg")}#contact::before{background-image:linear-gradient(rgba(14,20,16,.72),rgba(14,20,16,.88)),url("images/derat-contact-bg.jpg")}}

/* ===== motion layer (decorative, aria-hidden, pointer-events:none) ===== */
.rat-svg{display:block;width:100%;height:100%;max-width:none;overflow:visible;color:var(--rat,#0F1712)}
.r-leg,.r-tail,.r-wh,.r-ear,.r-bob{transform-box:fill-box}
.rat-svg .r-in{fill:var(--rat-in,#56635A)}
.rat-svg .r-eye{fill:var(--rat-eye,#F3F6F1)}
.rat-svg .r-nose{fill:var(--rat-nose,#C9A13B)}
.r-leg{transform-origin:50% 0}
.r-tail{transform-origin:100% 0}
.r-wh{transform-origin:0 50%}
.r-ear{transform-origin:40% 100%}
.r-bob{transform-origin:0 100%}
.flip .rat-svg{transform:scaleX(-1)}
.live .r-tail{animation:rTail 1.5s ease-in-out infinite alternate}
.live .r-wh{animation:rWh 1.1s ease-in-out infinite}
.run .r-l1,.run .r-l4{animation:rLeg .13s linear infinite alternate}
.run .r-l2,.run .r-l3{animation:rLeg .13s linear infinite alternate-reverse}
.run .r-bob{animation:rBob .13s ease-in-out infinite alternate}
.run .r-tail{animation-duration:.26s}
.sniff .r-bob{animation:rSniff .34s ease-in-out infinite}
.sniff .r-wh{animation-duration:.16s}
.sniff .r-ear{animation:rEar 1.1s ease-in-out infinite}
@keyframes rLeg{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}
@keyframes rBob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
@keyframes rTail{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}
@keyframes rWh{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg) scaleX(.92)}}
@keyframes rSniff{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.6deg)}}
@keyframes rEar{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}90%{transform:rotate(4deg)}}

/* hero: large rat over the proof pills + hole + rebouchage */
.hero-lane{position:absolute;left:0;right:0;top:-200px;height:66px;overflow:hidden;pointer-events:none;z-index:2;--rat:#DCE8DF;--rat-in:#AEBDB2;--rat-eye:#0E1410;--rat-nose:#C9A13B;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hl-ground{position:absolute;left:0;right:0;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(221,239,227,.16) 15%,rgba(221,239,227,.16) 85%,transparent)}
.hl-clip{position:absolute;left:0;bottom:4px;height:62px;overflow:hidden;z-index:1}
.hl-rat{position:absolute;left:0;bottom:-5px;width:164px;height:53px;transform:translateX(-200px);will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.hl-hole{position:absolute;bottom:4px;width:64px;height:48px;z-index:2;pointer-events:auto}
.hl-hole svg{width:100%;height:100%}
.hl-patch{position:absolute;left:-9px;bottom:-2px;width:82px;height:58px;opacity:0;transform-origin:50% 100%}
.hl-ok{position:absolute;right:-18px;top:-12px;width:26px;height:26px;opacity:0}
.hl-ok path{stroke-dasharray:16;stroke-dashoffset:16}
.hl-ok.on path{transition:stroke-dashoffset .35s .12s ease-out;stroke-dashoffset:0}
.hl-tag{position:absolute;bottom:10px;font:600 12.5px/1 var(--body);letter-spacing:.01em;color:var(--sprout);background:rgba(14,20,16,.55);border:1px solid rgba(221,239,227,.22);padding:7px 11px;border-radius:999px;white-space:nowrap;opacity:0}
@media (min-width:761px){.hero{padding-top:138px}.hero h1{margin:20px 0 20px}.motto{margin-bottom:26px}.proofs{margin-top:56px}}
@media (max-width:999px){.hl-rat{width:132px;height:43px}.hl-hole{width:54px;height:40px}.hl-patch{left:-8px;width:70px;height:50px}}
@media (max-width:760px){.hero-lane{height:46px}.hl-clip{height:42px}.hl-rat{width:92px;height:30px;bottom:-3px}.hl-hole{width:40px;height:30px}.hl-patch{left:-6px;width:52px;height:37px}.hl-ok{width:22px;height:22px;right:-14px}.proofs{margin-top:52px}}
.hero-in{position:relative;z-index:1}
.hero-bugs{position:absolute;left:0;right:0;top:0;bottom:150px;overflow:hidden;pointer-events:none;z-index:0;visibility:hidden}
.hero-bugs.live{visibility:visible}
.hero-bugs .roach{top:0;width:58px;height:39px;color:#CFDCD2;opacity:.72;transform-origin:50% 50%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
/* slow Ken Burns on the hero photo */
.hero-bg::before{transform-origin:50% 30%;animation:kb 14s ease-in-out infinite alternate;will-change:transform}
.hero.kb-off .hero-bg::before{animation-play-state:paused}
@keyframes kb{from{transform:scale(1.08) translate3d(-1%,0,0)}to{transform:scale(1) translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.hero-bg::before{animation:none!important;transform:none}.hero-bugs{display:none!important}}

/* edge runners (card top edge, footer) */
.edge-lane{position:absolute;left:0;right:0;height:28px;overflow:hidden;pointer-events:none;visibility:hidden}
.edge-lane.live{visibility:visible}
.edge-lane .er-rat{position:absolute;left:0;bottom:-2px;width:74px;height:24px;will-change:transform}
.cs .card{position:relative}
.cs .card .edge-lane{top:-27px;left:28px;right:28px}
footer{position:relative}
footer .edge-lane{top:26px;--rat:rgba(221,239,227,.55);--rat-in:#C9A13B;--rat-eye:#14301F}
@media (max-width:820px){footer .edge-lane{top:18px}}

/* cockroach */
.why{position:relative}
.roach-lane{display:block;position:absolute;left:0;right:0;bottom:-38px;height:32px;overflow:hidden;pointer-events:none;visibility:hidden}
.roach-lane.live{visibility:visible}
.roach{display:block;position:absolute;left:0;top:3px;width:40px;height:27px;will-change:transform;color:#0F1712;opacity:.78}
.roach svg{width:100%;height:100%;max-width:none;overflow:visible}
.roach svg *{transform-box:fill-box}
.roach .lgL{transform-origin:50% 100%}.roach .lgR{transform-origin:50% 0}
.roach .ant{transform-origin:0 50%}
.walk .lgA{animation:cLeg .11s linear infinite alternate}
.walk .lgB{animation:cLeg .11s linear infinite alternate-reverse}
.live .roach .ant{animation:cAnt .7s ease-in-out infinite alternate}
.live .roach .ant2{animation-delay:-.35s}
@keyframes cLeg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes cAnt{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}

/* peeking mouse on the self-check card */
.selfcheck{position:relative}
.peek{position:absolute;right:58px;top:-40px;width:64px;height:40px;overflow:hidden;pointer-events:none}
.peek svg{position:absolute;left:0;bottom:0;width:64px;height:44px;max-width:none;transform:translateY(105%);transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
.peek.up svg{transform:translateY(14%)}
.peek.shy svg{transition:transform .22s cubic-bezier(.6,0,.9,.4);transform:translateY(105%)}
.peek svg *{transform-box:fill-box}
.peek .pk-eye{transform-origin:50% 50%}
.peek.up .pk-eye{animation:pkBlink 3.2s 1s infinite}
.peek .pk-ear{transform-origin:50% 100%}
.peek.up .pk-earL{animation:rEar 2.4s .6s ease-in-out infinite}
.peek .pk-wh{transform-origin:100% 50%}.peek .pk-whR{transform-origin:0 50%}
.peek.up .pk-wh{animation:rWh .9s ease-in-out infinite}
@keyframes pkBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (max-width:520px){.peek{right:26px}}

/* micro-interactions */
.logo .mark *{transform-box:fill-box}
.logo .lg-ear{transform-origin:50% 100%}
.logo .lg-tail{transform-origin:100% 0}
.logo .lg-arc{transform-origin:0 50%}
.logo:hover .lg-ear{animation:lgEar .7s ease-in-out}
.logo:hover .lg-tail{animation:lgTail .7s ease-in-out}
.logo:hover .lg-rat{animation:lgNudge .7s ease-in-out}
.logo:hover .lg-arc{animation:lgArc .7s ease-in-out}
@keyframes lgEar{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg) scale(1.1)}50%{transform:rotate(8deg)}75%{transform:rotate(-10deg)}}
@keyframes lgTail{0%,100%{transform:rotate(0)}30%{transform:rotate(28deg)}60%{transform:rotate(-12deg)}}
@keyframes lgNudge{0%,100%{transform:translateX(0)}35%{transform:translateX(1.6px)}65%{transform:translateX(-.6px)}}
@keyframes lgArc{0%,100%{transform:scaleX(1)}40%{transform:scaleX(1.12)}}
.step-c,.eco-list li,.svc{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s}
.step-c:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.eco-list li:hover{transform:translateY(-4px);background:rgba(255,255,255,.085)}
.svc:hover{transform:translateY(-3px)}
.gal .slot img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover .slot img{transform:scale(1.04)}
.steps.draw .step:not(:last-child)::before{transform-origin:0 50%;animation:lnX .8s cubic-bezier(.6,0,.2,1) both}
.steps.draw .step:nth-child(1)::before{animation-delay:.25s}
.steps.draw .step:nth-child(2)::before{animation-delay:.6s}
.steps.draw .step:nth-child(3)::before{animation-delay:.95s}
.steps.draw .num{animation:numPop .55s cubic-bezier(.3,1.6,.5,1) both}
.steps.draw .step:nth-child(2) .num{animation-delay:.45s}
.steps.draw .step:nth-child(3) .num{animation-delay:.8s}
.steps.draw .step:nth-child(4) .num{animation-delay:1.15s}
@keyframes lnX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lnY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes numPop{from{transform:scale(.6)}to{transform:scale(1)}}
@media (max-width:640px){.steps.draw .step:not(:last-child)::before{transform-origin:50% 0;animation-name:lnY}}

@media (prefers-reduced-motion:reduce){
  .hero-lane,.edge-lane,.roach-lane,.peek{display:none!important}
  .step-c:hover,.eco-list li:hover,.svc:hover,.gal figure:hover .slot img{transform:none}
  .logo:hover *{animation:none!important}
}

/* ---- WordPress ---- */
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
@media (max-width:600px){.admin-bar header.top{top:0}}
.form-err{color:#FFB4A8}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.page-main{padding:72px 0 120px}
.page-main .wrap{max-width:860px}
.page-main h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.035em;margin:18px 0 28px}
.entry{font-size:18px;line-height:1.7}
.entry > * + *{margin-top:1.1em}
.entry h2{font-size:clamp(26px,3vw,36px);margin-top:1.6em}
.entry h3{font-size:24px;margin-top:1.4em}
.entry a{color:var(--leaf)}
.entry ul,.entry ol{padding-left:1.3em}
.entry img{max-width:100%;height:auto;border-radius:var(--r)}
.entry blockquote{border-left:3px solid var(--leaf);padding-left:20px;color:var(--muted)}
.post-list{display:grid;gap:22px;margin-top:20px}
.post-card{background:var(--white);border-radius:var(--r);padding:28px 30px;box-shadow:var(--sh)}
.post-card h2{font-size:28px;margin:6px 0 10px}
.post-card h2 a{color:inherit;text-decoration:none}
.post-card time{color:var(--muted);font-size:14px}
.pagination{margin-top:36px;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px;border-radius:999px;background:var(--white);text-decoration:none;color:var(--ink)}
.pagination .current{background:var(--forest);color:var(--on-f)}
.alignwide{max-width:none}.alignfull{max-width:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ---- Tarifs ---- */
.prices{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.price-card{background:var(--white);border-radius:var(--r-xl);padding:36px 36px 28px;box-shadow:var(--sh)}
.price-card h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em}
.price-sub{color:var(--muted);margin:6px 0 18px;font-size:15px}
.price-card dl{display:grid}
.price-card dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--mint)}
.price-card dt{color:var(--ink)}
.price-card dd{font-weight:700;white-space:nowrap;color:var(--leaf-d)}
.price-card.extra{background:var(--mint)}
.price-card.extra dl div{border-top-color:var(--mint-3)}
.price-cta{text-align:center;margin-top:40px}
@media (max-width:900px){.prices{grid-template-columns:1fr}}
@media (max-width:520px){.price-card{padding:26px 20px 18px}.price-card dl div{flex-wrap:wrap;gap:4px 16px}}

/* ---- Kaio Pro (widget de réservation [kaio_rdv]) ---- */
.kaio-book,.pb-card{
  --kaio-bg:var(--bg); --kaio-surface:var(--white); --kaio-line:var(--mint-3);
  --kaio-text:var(--ink); --kaio-muted:var(--muted);
  --kaio-accent:var(--terra); --kaio-accent-text:var(--leaf-d);
  --kaio-acc:var(--leaf); --kaio-on-acc:#fff; --kaio-acc-h:var(--leaf-d);
  --kaio-sans:var(--body); --kaio-radius:var(--r-lg);
}
.kaio-book .pb-h{font-family:var(--head)}
.contact .rdv{min-width:0}
.contact .kaio-book{border:0;border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-lg)}
.dark .kaio-book p{color:var(--pb-muted)}
.dark .kaio-book .pb-err{color:var(--pb-err)}
.dark .kaio-book :focus-visible{outline-color:var(--leaf)}
@media (max-width:520px){.contact .kaio-book{padding:24px 16px;border-radius:28px}}