/* A&J Tech' · système « Atelier » (clair et sombre)
   Couleurs : uniquement via les variables ci-dessous. Coins de 4 à 10 px, aucune pilule. */

@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/plus-jakarta-sans-latin-var.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --bg:#F7F8FA;--sf:#FFFFFF;--fg:#0E1726;--mu:#5B6577;--ln:#E3E6EC;--ac:#2850F0;--ac-fg:#FFFFFF;--soft:#E8EDFF;--ok:#12805C;--wa:#B25A00;--err:#B42318;
  --foot-bg:#0E1726;--foot-fg:#EEF2F8;--foot-mu:#B7C0CF;--foot-ac:#6D8CFF;--foot-ln:#26324A;
  --star:#D9910B;--il-ink:#0E1726;--il-ac:#2850F0;--il-paper:#FFFFFF;--il-1:#EEF1F6;--il-2:#E3E9FF;--il-3:#A9BBFF;--il-mu:#8A93A4;--il-wa:#E07B1F;--il-line:#DDE2EA;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-s:4px;--r:8px;--r-l:10px;--gut:clamp(16px,4vw,40px);--max:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1018;--sf:#131A25;--fg:#EEF2F8;--mu:#99A3B5;--ln:#243042;--ac:#6D8CFF;--ac-fg:#0B1018;--soft:#17213D;--ok:#4CC9A0;--wa:#FFB45E;--err:#FF8A80;
  --foot-bg:#070B12;--foot-ln:#1E2838;
  --star:#F2B53A;--il-ink:#E6EBF3;--il-ac:#6D8CFF;--il-paper:#131A25;--il-1:#1A2331;--il-2:#1C2747;--il-3:#3A4F9E;--il-mu:#7D879A;--il-wa:#FFB45E;--il-line:#2A3546;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1018;--sf:#131A25;--fg:#EEF2F8;--mu:#99A3B5;--ln:#243042;--ac:#6D8CFF;--ac-fg:#0B1018;--soft:#17213D;--ok:#4CC9A0;--wa:#FFB45E;--err:#FF8A80;
  --foot-bg:#070B12;--foot-ln:#1E2838;
  --star:#F2B53A;--il-ink:#E6EBF3;--il-ac:#6D8CFF;--il-paper:#131A25;--il-1:#1A2331;--il-2:#1C2747;--il-3:#3A4F9E;--il-mu:#7D879A;--il-wa:#FFB45E;--il-line:#2A3546;
  color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--font);overflow-x:hidden}
h1,h2,h3,p,ul,figure{margin:0}
img,svg{max-width:100%}
a{color:var(--ac);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:var(--r-s)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:var(--r);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- Typographie ---------- */
.h1{font-weight:800;letter-spacing:-.04em;line-height:1.04;font-size:clamp(34px,6vw,58px);text-wrap:balance}
.h1.m{font-size:clamp(30px,4.6vw,46px)}
.h2{font-weight:800;letter-spacing:-.035em;line-height:1.1;font-size:clamp(26px,3.4vw,36px);text-wrap:balance}
.h3{font-weight:700;font-size:18px;letter-spacing:-.015em;line-height:1.3}
.lead{color:var(--mu);font-size:clamp(17px,1.6vw,19px);max-width:56ch}
.mu{color:var(--mu)}
.small{font-size:14px;color:var(--mu)}
/* Donnée à fournir par le client : visible et signalée */
.val{font-style:normal;color:var(--mu);border-bottom:1.5px dashed currentColor;white-space:nowrap}
.tbc{font:600 11.5px var(--font);color:var(--wa);letter-spacing:.02em;white-space:nowrap}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px 10px;flex-wrap:wrap;min-height:48px;padding:12px 22px;border-radius:var(--r);border:1.5px solid var(--ac);background:var(--ac);color:var(--ac-fg);font:700 16px/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn small{font-weight:500;font-size:13px;opacity:.9}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--ln)}
.btn.ghost:hover{border-color:var(--fg);filter:none}
.btn.ink{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.sm{min-height:44px;padding:10px 16px;font-size:15px}
.btn svg{width:18px;height:18px;flex:none}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- En-tête ---------- */
.hd{background:var(--sf);border-bottom:1px solid var(--ln);position:relative;z-index:20}
.hd .wrap{display:flex;align-items:center;gap:18px;min-height:76px;padding-block:10px}
.brand{color:var(--fg);text-decoration:none;flex:none;border-radius:var(--r-s)}
.nav{margin-inline:auto}
.nav ul{list-style:none;padding:0;display:flex;gap:4px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--mu);font-weight:600;font-size:15px;text-decoration:none;border-radius:var(--r-s)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ac)}
.hd-act{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ln);border-radius:var(--r);background:transparent;cursor:pointer;color:var(--fg)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none}

/* ---------- Logo 3 « Écran validé » ---------- */
.lg3{display:inline-flex;align-items:center;gap:calc(var(--s)*.3);color:inherit}
.lg3 svg{width:var(--s);height:var(--s);flex:none;overflow:visible}
.lg3 .a{fill:none;stroke:var(--ac);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.lg3 .b{fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round}
.lg3 .wm{display:grid;line-height:1;font-weight:800;font-size:calc(var(--s)*.58);letter-spacing:-.04em;white-space:nowrap}
.lg3 .wm i{font-style:normal;color:var(--ac)}
.lg3 .wm small{font-size:.3em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-top:.55em}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(48px,7vw,88px)}
.sec.alt{background:var(--sf);border-block:1px solid var(--ln)}
.sec.tight{padding-block:clamp(32px,4.5vw,56px)}
.sec.pro{background:var(--soft)}
.top{display:grid;gap:10px;margin-bottom:30px;max-width:64ch}
.col{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.split.s{align-items:start}
.split.faqs{grid-template-columns:.8fr 1.2fr}
.split.rev>.col{order:2}
.split>*,.grid>*{min-width:0}
.field select{max-width:100%;text-overflow:ellipsis}
.grid{display:grid;gap:16px}
.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}

/* ---------- Hero ---------- */
/* Horizon (hero.js) : un sol quadrillé file vers un horizon lumineux, sous le texte. Jour : ciel clair, grille encre bleue ; nuit : ciel sombre, grille lumineuse */
.hero{--sky:linear-gradient(#F7F8FA 0%,#E6ECFF 62%,#F7F8FA 100%);--glass:rgba(255,255,255,.78);--glass-ln:rgba(40,80,240,.22);--glass-sh:0 0 0 6px rgba(40,80,240,.06),0 18px 40px rgba(14,23,38,.12);
  position:relative;overflow:hidden;min-height:min(820px,100svh);display:grid;align-items:start;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(170px,22vw,280px);background:var(--sky)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{--ac:#7B97FF;--mu:#A3ADBF;--sky:linear-gradient(#0B1018 0%,#0E1730 60%,#0B1018 100%);--glass:rgba(19,26,37,.72);--glass-ln:rgba(157,180,255,.28);--glass-sh:0 0 0 6px rgba(123,151,255,.06),0 20px 50px rgba(0,0,0,.45)}}
:root[data-theme="dark"] .hero{--ac:#7B97FF;--mu:#A3ADBF;--sky:linear-gradient(#0B1018 0%,#0E1730 60%,#0B1018 100%);--glass:rgba(19,26,37,.72);--glass-ln:rgba(157,180,255,.28);--glass-sh:0 0 0 6px rgba(123,151,255,.06),0 20px 50px rgba(0,0,0,.45)}
.hero .wrap{display:grid;justify-items:center}
.hero-txt{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:20px}
.hero .h1{max-width:16ch}
.hero .lead{max-width:58ch}
.hero .cb{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--glass-ln);box-shadow:var(--glass-sh)}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Garanties sous le formulaire : une ligne de faits courts, chacun avec sa coche */
.sure{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.sure li{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--fg);white-space:nowrap}
.sure svg{flex:none;width:18px;height:18px;color:var(--ac)}

/* ---------- Déroulé : la conversation entre le client et Tony ---------- */
.talk{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.talk li{display:flex;gap:12px;align-items:flex-end;max-width:min(720px,82%)}
.talk li.me{margin-left:auto;flex-direction:row-reverse}
.talk .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--soft);color:var(--ac)}
.talk .me .av{background:var(--ac);color:var(--ac-fg)}
.talk .bu{padding:14px 18px;border-radius:18px 18px 18px 4px;background:var(--bg);border:1px solid var(--ln);font-size:17px;line-height:1.5}
.talk .me .bu{border-radius:18px 18px 4px 18px;background:var(--soft);border-color:transparent}
.talk .bu small{display:block;font-size:13px;font-weight:700;color:var(--ac);margin-bottom:2px}

/* ---------- Qui intervient : la carte de visite ---------- */
.idsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
.idcard{background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:28px;display:grid;gap:18px;box-shadow:0 24px 50px -28px color-mix(in srgb,var(--fg) 35%,transparent);rotate:-2deg}
.idcard .who{display:flex;gap:16px;align-items:center}
.idcard .shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 40%;border-radius:10px;background:var(--ln)}
.idcard b{display:block;color:var(--fg);font-size:22px;letter-spacing:-.02em}
.idcard .who span{color:var(--mu);font-size:15px}
.idcard .facts{display:grid;gap:10px;font-size:15px;color:var(--mu);border-top:1px solid var(--ln);padding-top:16px}
.idcard .facts div{display:flex;gap:10px;align-items:center}
.idcard .facts svg{flex:none;width:20px;height:20px;color:var(--ac)}
.idcard .facts a{font-weight:800;color:var(--fg)}
.idsplit .lines{display:grid;gap:12px}
.idsplit .lines p{font-size:17px;color:color-mix(in srgb,var(--fg) 82%,var(--bg))}
.idsplit .lines b{color:var(--fg);font-weight:700}

/* ---------- Avis : un avis en grand, la note à côté ---------- */
.review{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,5vw,64px);align-items:center}
.rv-list{display:grid;gap:28px}
.rv-list figure{margin:0;display:grid;gap:14px}
.rv-list blockquote{margin:0;font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.25;text-wrap:balance}
.rv-list blockquote::before{content:"\201C";display:block;font-size:72px;line-height:.6;color:var(--ac);margin-bottom:4px}
.rv-list figcaption{color:var(--mu)}
.js-rv .rv-list figure:not(.on){display:none}
.rv-nav{display:flex;gap:8px;align-items:center}
.rv-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ln);display:grid;place-items:center;color:var(--fg)}
.rv-nav button:hover{border-color:var(--ac);color:var(--ac)}
.rv-nav button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.rv-nav svg{width:20px;height:20px}
.rv-nav span{color:var(--mu);font-size:14px;margin-left:6px}
.score{display:grid;gap:8px;justify-items:start;padding:24px;border-radius:var(--r-l);background:var(--sf);border:1px solid var(--ln)}
.score .v{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1}
.score .stars{width:110px;height:20px}
.score .mu{color:var(--mu)}
.score a{font-weight:700;color:var(--ac);font-size:15px}

/* ---------- Expertises : mosaïque illustrée ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mosaic a{position:relative;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:18px 18px 20px;border-radius:var(--r-l);background:var(--sf);border:1px solid var(--ln);color:inherit;text-decoration:none;transition:border-color .2s ease-out,transform .2s ease-out}
.mosaic a:hover,.mosaic a:focus-visible{border-color:var(--ac);transform:translateY(-2px)}
.mosaic .il{max-height:170px;border-radius:var(--r)}
.mosaic .txt{display:grid;gap:6px;align-content:end}
.mosaic .h3{font-size:19px;padding-right:28px}
.mosaic p{color:var(--mu);font-size:15px}
.mosaic .go{position:absolute;right:18px;bottom:20px;display:grid;color:var(--ac);transition:transform .2s ease-out}
.mosaic .go svg{width:20px;height:20px}
.mosaic a:hover .go,.mosaic a:focus-visible .go{transform:translateX(4px)}
.mosaic .big{grid-column:span 2;grid-row:span 2}
.mosaic .big .il{max-height:none}
.mosaic .big .h3{font-size:26px}
.mosaic .wide{grid-column:span 2;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.mosaic .wide .il{order:2;max-height:150px}
.cb{display:flex;gap:6px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l);padding:6px;width:min(100%,500px)}
.cb input{flex:1;min-width:0;border:0;background:transparent;padding:0 12px;min-height:48px;font-size:16px}
.cb{transition:border-color .2s ease-out,box-shadow .2s ease-out}
.cb input:focus-visible{outline:none}
/* le champ est sans bordure : c'est le cadre du formulaire qui montre le focus, en discret */
.cb:has(input:focus-visible){border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.cb-msg{font-size:14.5px;color:var(--mu)}
.cb-msg:empty{margin-block:-11px}
.cb-msg.err{color:var(--err)}.cb-msg.ok{color:var(--ok)}
.hero .tel{font-size:16px;color:var(--mu)}
.hero .tel a{font-weight:800;color:var(--fg);font-size:18px;white-space:nowrap}
.proof{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu)}
.stars{display:block;width:88px;height:16px;flex:none;color:var(--star)}



/* ---------- Cartes, pictos ---------- */
.card{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l);padding:20px;display:grid;gap:10px;align-content:start;position:relative}
.card p{color:var(--mu);font-size:15px}
a.card{color:inherit;text-decoration:none}
a.card:hover{border-color:var(--ac)}
.card .more{font-size:14px;font-weight:700;color:var(--ac);margin-top:4px}
.pic{display:inline-grid;place-items:center;width:calc(var(--ps,28px)*1.6);height:calc(var(--ps,28px)*1.6);border-radius:var(--r);background:var(--soft)}
.pic svg{width:var(--ps,28px);height:var(--ps,28px)}
.pic .a,.pic .b{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pic .a{stroke:var(--ac)}.pic .b{stroke:var(--fg)}
.facts{display:grid;gap:9px;list-style:none;padding:0;font-size:16px}
.facts li{display:flex;gap:12px;align-items:baseline}
.facts li::before{content:"";width:8px;height:8px;flex:none;background:var(--ac);border-radius:2px;transform:translateY(-2px)}
.note{font-size:15px;color:var(--mu);border-left:3px solid var(--ac);padding-left:14px;max-width:54ch}
.note b{color:var(--fg)}
.step{display:grid;gap:6px;align-content:start;border-top:2px solid var(--ac);padding-top:14px}
.step b{font:600 13px var(--font);color:var(--ac)}
.step p{font-size:15px;color:var(--mu)}

/* Emplacements (photo, logos officiels) */
.ph{border-radius:var(--r-l);border:1.5px dashed color-mix(in srgb,var(--mu) 60%,transparent);display:grid;place-items:center;text-align:center;padding:16px;color:var(--mu);font-size:14px;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--mu) 8%,transparent) 10px 11px)}
.sap-logos img{width:auto;height:76px}
.sap-logos .cesu{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px var(--ln)}
.ghostlogo{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px dashed var(--mu);border-radius:var(--r);font:600 12px var(--font);color:var(--mu)}

/* Avis */

/* ---------- Illustrations des expertises ---------- */
.ills{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l);padding:18px 18px 10px;display:grid;gap:6px}
.il{display:block;width:100%;height:auto}
:where(.il) *{fill:none}
.il .fp{fill:var(--il-paper)}.il .f1{fill:var(--il-1)}.il .f2{fill:var(--il-2)}.il .f3{fill:var(--il-3)}.il .fa{fill:var(--il-ac)}.il .fk{fill:var(--il-ink)}.il .fw{fill:var(--il-wa)}.il .fmu{fill:var(--il-mu)}
.il .keys rect{fill:var(--il-1)}
.il .k,.il .a,.il .w,.il .ck,.il .ln,.il .hair,.il .hair2,.il .dash,.il .dots{stroke-linecap:round;stroke-linejoin:round}
.il .k{stroke:var(--il-ink);stroke-width:3.2}.il .a{stroke:var(--il-ac);stroke-width:3.2}.il .w{stroke:var(--il-wa);stroke-width:3.2}.il .ck{stroke:var(--il-paper);stroke-width:3.4}
.il .ln{stroke:var(--il-line);stroke-width:8}.il .ln.l2{stroke:var(--il-3);opacity:.55}
.il .thin{stroke-width:2.4}.il .thick{stroke-width:8}.il .lt{stroke-width:6}.il .thin6{stroke-width:5}.il .sm{stroke-width:2.4}
.il .hair{stroke:var(--il-line);stroke-width:2}.il .hair2{stroke:var(--il-mu);stroke-width:1.5;stroke-dasharray:2 5}.il .dash{stroke:var(--il-mu);stroke-width:1.6;stroke-dasharray:3 6}.il .dots{stroke:var(--il-ac);stroke-width:4.5;stroke-dasharray:0 11}
.il .o2{opacity:.18}.il .o3{opacity:.35}.il .o6{opacity:.65}
/* Animation des illustrations (anim.js) : Motion écrit ces variables, la feuille les compose.
   Au repos elles valent zéro : le dessin montre l'état « réparé ». */
@property --m-x{syntax:"<length>";inherits:false;initial-value:0px}@property --m-y{syntax:"<length>";inherits:false;initial-value:0px}@property --m-r{syntax:"<angle>";inherits:false;initial-value:0deg}@property --m-s{syntax:"<number>";inherits:false;initial-value:1}@property --m-sx{syntax:"<number>";inherits:false;initial-value:1}
.il [data-m]{transform-box:fill-box;transform-origin:center;transform:translate(var(--m-x,0px),var(--m-y,0px)) rotate(var(--m-r,0deg)) scale(var(--m-s,1)) scaleX(var(--m-sx,1))}
.il [data-m].ol{transform-origin:left center}.il [data-m].obl{transform-origin:0% 100%}
.il [pathLength]{stroke-dasharray:100}
/* Carte de zone interactive (carte.js) */
.carte{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ln);background:var(--il-1)}
.carte .carte-fond{position:absolute;inset:0;opacity:0;transition:opacity .4s ease-out}
.carte.on .carte-fond{opacity:1}
.carte.ko::after{content:"Carte indisponible";position:absolute;inset:0;display:grid;place-items:center;color:var(--mu);font-size:15px}
.carte .legende{position:absolute;left:12px;bottom:12px;display:grid;gap:4px;padding:10px 12px;border-radius:var(--r);background:color-mix(in srgb,var(--sf) 88%,transparent);backdrop-filter:blur(6px);border:1px solid var(--ln);font-size:13.5px;font-weight:600;pointer-events:none}
.carte .legende span{display:flex;align-items:center;gap:8px}
.carte .legende i{width:14px;height:14px;border-radius:50%;flex:none}
.carte .legende .l15{background:color-mix(in srgb,var(--ac) 30%,transparent);border:2px solid var(--ac)}
.carte .legende .l40{border:2px dashed var(--ac)}
.carte .maplibregl-ctrl-group{background:var(--sf);border-radius:var(--r)}
.carte .maplibregl-ctrl-group button+button{border-top-color:var(--ln)}
.carte .maplibregl-ctrl-attrib{font:500 11px var(--font)}
:root[data-theme="dark"] .carte .maplibregl-ctrl-icon{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .carte .maplibregl-ctrl-icon{filter:invert(1)}}
.itin{display:grid;gap:10px;margin-top:18px}
.itin .apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.itin .apps a{display:grid;place-items:center;min-height:48px;padding:10px 8px;border:1px solid var(--ln);border-radius:var(--r);background:var(--sf);color:var(--fg);font-weight:700;font-size:15px;text-align:center;text-decoration:none;transition:border-color .2s ease-out}
.itin .apps a:hover,.itin .apps a:focus-visible{border-color:var(--ac)}
/* Carte de zone (schéma, repli sans JavaScript) */
.map text{font:600 15px var(--font);fill:var(--il-ink)}
.map text.out{fill:var(--mu);font-weight:500}
.map text.c{font-weight:800;font-size:17px}
.map text.r{font:500 13px var(--font);fill:var(--mu)}

/* Sommaire de la page Expertises */
.toc{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin-top:22px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ln);background:var(--sf);border-radius:var(--r);font-size:14.5px;font-weight:700;color:var(--fg);text-decoration:none}
.toc a:hover{border-color:var(--ac);color:var(--ac)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 18px;font-weight:700;font-size:16px;border-radius:var(--r-l)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ac);font-weight:700;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;color:var(--mu);font-size:15.5px}
/* FAQ en conversation (accueil) : sans JavaScript, toute la conversation s'affiche ; app.js en fait un choix de questions */
.faq-talk{display:grid;gap:20px}
.faq-q{display:flex;flex-wrap:wrap;gap:8px}
.faq-q button{min-height:44px;padding:9px 16px;border-radius:18px 18px 18px 4px;border:1px solid var(--ln);background:var(--bg);color:var(--fg);font:600 15px/1.35 var(--font);text-align:left;cursor:pointer;transition:border-color .2s ease-out,color .2s ease-out}
.faq-q button:hover{border-color:var(--ac)}
.faq-q button[aria-pressed="true"]{border-color:var(--ac);color:var(--ac);background:var(--soft)}
.faq-talk .talk li[hidden]{display:none}
.faq-talk .talk.js li{animation:faq-in .3s ease-out backwards}
.faq-talk .talk.js li.me{animation-delay:.2s}
@keyframes faq-in{from{opacity:0;transform:translateY(8px)}}
.faq-talk>.btn{justify-self:start}
@media (max-width:640px){
  .faq-q{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 6px;scrollbar-width:none}
  .faq-q::-webkit-scrollbar{display:none}
  .faq-q button{flex:none;scroll-snap-align:start;white-space:nowrap}
}

/* ---------- Formulaires ---------- */
.field{display:grid;gap:6px;font-size:14px;font-weight:700}
.field .opt{font-weight:500;color:var(--mu)}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1.5px solid var(--ln);background:var(--bg);color:var(--fg);border-radius:var(--r);padding:10px 12px;font-size:16px;font-weight:400}
.field textarea{min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--mu) 60%,var(--ln))}
.field [aria-invalid="true"]{border-color:var(--err)}
.field .err{font-weight:600;font-size:13.5px;color:var(--err)}
.field .err:empty{display:none}
.form{display:grid;gap:14px}
.form .status{font-size:15px;font-weight:600}
.form .status.ok{color:var(--ok)}.form .status.err{color:var(--err)}
.hp{position:absolute;left:-9999px}
.zipf{display:grid;gap:8px}
.zip{display:flex;gap:8px;max-width:360px}
.zip input{flex:1;min-width:0;min-height:48px;border:1.5px solid var(--ln);background:var(--bg);color:var(--fg);border-radius:var(--r);padding:10px 12px;font-size:16px}
.zip input[aria-invalid="true"]{border-color:var(--err)}
.zip-out{min-height:1.5em;font-size:15px;color:var(--mu)}
.zip-out b{color:var(--fg)}

/* ---------- Simulateur ---------- */
.calc output{display:block;font-weight:800;font-size:40px;color:var(--ac);letter-spacing:-.03em;line-height:1.1}
.calc .amt{display:flex;align-items:center;gap:8px;font-weight:700}
.calc .amt input{width:140px;font-weight:700;font-size:20px}

/* ---------- Fiche de parc (exemple pro) ---------- */
.devis{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l);padding:20px;font-size:15px}
.devis .t{display:flex;justify-content:space-between;gap:12px;font:600 12px var(--font);color:var(--mu);padding-bottom:12px}
.devis .l{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--ln)}
.devis .l span{color:var(--mu)}
.st.ok{color:var(--ok)}.st.wa{color:var(--wa)}

/* ---------- Appel final ---------- */
.cta{background:var(--ac);color:var(--ac-fg)}
.cta .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-block:clamp(32px,5vw,52px)}
.cta .h2{max-width:22ch}
.cta .btn{background:var(--ac-fg);color:var(--ac);border-color:var(--ac-fg)}

/* ---------- Pied de page (toujours encre) ---------- */
.ft{background:var(--foot-bg);color:var(--foot-fg);font-size:15px}
.ft .wrap{display:grid;gap:26px;padding-block:44px 24px}
.ft .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.ft h2{font-size:15px;margin-bottom:8px}
.ft ul{list-style:none;padding:0;display:grid;gap:0}
.ft li:not(:has(a)){padding-block:6px}
.ft li,.ft p{color:var(--foot-mu)}
.ft a{color:var(--foot-fg);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ft a:hover{text-decoration:underline}
.ft .lg3 .a{stroke:var(--foot-ac)}.ft .lg3 .wm i{color:var(--foot-ac)}.ft .lg3 .wm small{color:var(--foot-mu)}
.ft .val{color:var(--foot-mu)}

.ft .legal{border-top:1px solid var(--foot-ln);padding-top:16px;font-size:13.5px;color:var(--foot-mu);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.ft :focus-visible{outline-color:var(--foot-ac)}
.theme-set{display:inline-flex;gap:2px;border:1px solid var(--foot-ln);border-radius:var(--r);padding:2px;margin-left:auto}
.theme-set button{border:0;background:none;color:var(--foot-mu);min-height:44px;min-width:44px;padding:0 12px;border-radius:6px;font-size:13.5px;font-weight:600;cursor:pointer}
.theme-set button[aria-pressed="true"]{background:var(--foot-fg);color:var(--foot-bg)}

/* ---------- Barre d'appel mobile ---------- */
.callbar{display:none}

/* ---------- Pages de texte ---------- */
.prose{max-width:72ch;display:grid;gap:14px}
.prose h2{font-size:22px;letter-spacing:-.02em;margin-top:18px}
.prose p,.prose li{color:var(--mu)}
.prose strong{color:var(--fg)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .idsplit,.review{grid-template-columns:1fr}
  .idcard{rotate:0deg}
  .mosaic{grid-template-columns:1fr 1fr}
  .c4{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:0 8px;font-size:14.5px}
}
@media (max-width:760px){
  .talk li{max-width:100%}
  .mosaic{grid-template-columns:1fr}
  .mosaic .big,.mosaic .wide{grid-column:auto;grid-row:auto}
  .mosaic .wide{grid-template-columns:1fr}.mosaic .wide .il{order:0}
  .split,.split.faqs,.c2,.c3,.c4.one,.ft .g{grid-template-columns:1fr}
  .split.rev>.col{order:0}
  .hd .hd-call{display:none}
  .cb{flex-direction:column}
  .cb input{min-height:48px}
  .btn.full-m{width:100%}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--sf);border-top:1px solid var(--ln);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .callbar .btn{width:100%}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .theme-set{margin-left:0}
  .map text{font-size:19px}.map text.c{font-size:21px}.map text.r{font-size:15px}.map .opt{display:none}
}
@media (max-width:420px){
  .c4{grid-template-columns:1fr}
  .c4.k2{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.hd,.callbar,.cta,.theme-set{display:none!important}body{padding:0}}
/* Section pro : texte, demande de rappel, dessin animé */
.px-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.px-txt{display:grid;gap:22px}
.px-arg{display:flex;gap:14px;align-items:flex-start}
.px-arg svg{flex:none;width:24px;height:24px;color:var(--ac);margin-top:2px}
.px-arg p{display:grid;gap:2px;font-size:17px;line-height:1.5;color:var(--mu)}
.px-arg b{color:var(--fg);font-size:18px}
.px-args{display:grid;gap:18px}
.px-form{display:grid;gap:10px;padding:16px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-l)}
.px-form label{font-size:14px;font-weight:700}
.px-form .f{display:grid;gap:6px}
.px-form input{min-height:48px;width:100%;box-sizing:border-box;border:1.5px solid var(--ln);border-radius:var(--r);background:var(--bg);color:var(--fg);padding:0 14px;font:400 16px var(--font);transition:border-color .2s ease-out}
.px-form input:focus-visible{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.px-form input[aria-invalid="true"]{border-color:var(--err)}
.px-form .btn{width:100%;margin-top:4px}
.px-form .msg{font-size:14.5px;color:var(--mu)}
.px-form .msg:empty{display:none}
.px-form .msg.err{color:var(--err)}.px-form .msg.ok{color:var(--ok)}
.px-form .tel{font-size:14.5px;color:var(--mu)}
.px-form .tel a{font-weight:800;color:var(--fg)}
.px-stage{margin:0;position:relative;border-radius:var(--r-l);background:var(--il-1);border:1px solid var(--ln);overflow:hidden}
.px-stage svg{display:block;width:100%;height:auto}
.px-cap{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;background:var(--sf);border-top:1px solid var(--ln)}
.px-cap p{flex:1;min-width:0;font-weight:700;font-size:15.5px}
.px-prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:0 18px 14px;background:var(--sf)}
.px-prog i{display:block;height:4px;border-radius:2px;background:var(--ln);overflow:hidden}
.px-prog i::after{content:"";display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ac)}
.px-pause{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ln);display:grid;place-items:center;color:var(--fg)}
.px-pause:hover{border-color:var(--ac);color:var(--ac)}
.px-pause:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.px-pause svg{width:14px;height:14px}
.px-pause .pl{display:none}
.px-pause[aria-pressed="true"] .pl{display:block}
.px-pause[aria-pressed="true"] .pa{display:none}
/* Dessin animé de la section pro (pro.js) */
.px-svg .tc{font:700 18px var(--font);fill:var(--il-ink)}
.px-svg .tmo{font:800 22px var(--font);fill:var(--il-ink)}
@media (max-width:980px){.px-split{grid-template-columns:1fr}}

/* ---------- Barre « îlot vitré » : collée en haut, détachée en bloc arrondi dès qu'on descend (classe .flot, defile.js) ---------- */
.hd{position:sticky;top:0;transition:background-color .25s ease-out,border-color .25s ease-out}
.hd .wrap{position:relative;transition:max-width .4s cubic-bezier(.2,.7,.2,1),min-height .4s cubic-bezier(.2,.7,.2,1),margin-top .4s cubic-bezier(.2,.7,.2,1),background-color .25s ease-out,box-shadow .4s ease-out,border-radius .4s ease-out}
.flot .hd{background:transparent;border-bottom-color:transparent}
.flot .hd .wrap{max-width:min(1080px,calc(100% - 24px));min-height:62px;margin-top:10px;padding-block:7px;padding-inline:clamp(12px,2.4vw,28px);gap:12px;background:color-mix(in srgb,var(--sf) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid color-mix(in srgb,var(--ln) 80%,transparent);border-radius:16px;box-shadow:0 10px 30px color-mix(in srgb,var(--fg) 14%,transparent)}
.nav ul{position:relative}
.nav a{position:relative;z-index:1;border-radius:10px;padding:0 14px}
.nav a[aria-current="page"]{box-shadow:none;color:var(--ac)}
.nav-ind{position:absolute;z-index:0;top:0;left:0;width:0;height:44px;border-radius:10px;background:var(--soft);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1),opacity .2s ease-out}
.nav-ind.on{opacity:1}
/* Entre 861 et 1040 px : liens resserrés et bouton d'appel réduit au combiné, pour garder les cinq liens */
@media (min-width:861px) and (max-width:1040px){
  .nav a{padding:0 8px;font-size:14.5px}
  .hd .hd-call{font-size:0;gap:0;padding:0;width:44px}
}
/* Menu repliable jusqu'à 860 px */
@media (max-width:860px){
  .menu-btn{display:inline-grid}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--sf);border-bottom:1px solid var(--ln);padding:8px var(--gut) 16px;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column}
  .nav a{min-height:48px;font-size:17px;padding:0 4px}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ac);padding-left:12px}
  .hd-act{margin-left:auto}
  .nav-ind{display:none}
  .flot .hd .wrap{max-width:calc(100% - 20px);margin-top:8px}
  .flot .nav{top:calc(100% + 8px);border:1px solid var(--ln);border-radius:16px;box-shadow:0 16px 40px color-mix(in srgb,var(--fg) 16%,transparent)}
  .nav a[aria-current="page"]{background:var(--soft);box-shadow:none;padding-left:12px}
}

/* ---------- Apparitions « mise au point » : du flou au net (classe .ap posée par defile.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ap{opacity:0;filter:blur(10px);transform:scale(.97);transition:opacity .8s ease-out var(--ap-d,0ms),filter .8s ease-out var(--ap-d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--ap-d,0ms)}
  .ap.ap-in{opacity:1;filter:none;transform:none}
}

/* Défilement amorti (Lenis 1.1.13, vendor/lenis.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.nav a{white-space:nowrap}


/* Haut de la page Pros : texte et formulaire à gauche, histoires enchaînées à droite */
.hx-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.hx-txt,.hx-head{display:grid;gap:22px}
.hx-fig{margin:0;border-radius:var(--r-l);border:1px solid var(--ln);overflow:hidden;background:var(--sf)}
.hx-stage{background:var(--il-1);aspect-ratio:2/1.15}
.hx-stage svg{display:block;width:100%;height:100%}
.hx-fig .px-cap{padding:10px 12px 10px 18px}
.hx-fig .px-prog{flex:1;padding:0;background:none}
@media (max-width:860px){.hx-in{grid-template-columns:1fr}.hx-stage{aspect-ratio:2/1}}

/* ---------- Actus et conseils (page /actus et bloc de l'accueil, rendus par actus.js) ---------- */
.ac .wrap{display:grid;gap:clamp(28px,4vw,44px)}
.ac-head{display:grid;gap:14px;max-width:760px}
.ac-kick{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.ac ul{list-style:none;padding:0;margin:0}
.ac a{color:var(--fg);text-decoration:none}
.ac a:hover h3,.ac a:focus-visible h3,.ac a:hover .ac-une-t,.ac a:focus-visible .ac-une-t{color:var(--ac)}
.ac p{color:var(--mu)}
.ac-etat{font-size:16px}
.ac-etat a{color:var(--ac);text-decoration:underline}
.ac-ph{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--soft)}
.ac-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--mu);font-variant-numeric:tabular-nums}
.ac-meta span+span::before{content:"·";margin-right:10px;color:var(--ln)}
.ac-t{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ac)}
.ac-t-alerte{background:color-mix(in srgb,var(--wa) 16%,transparent);color:var(--wa)}
.ac-de{font-size:13px;color:var(--mu)}
.ac-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ac)}
.ac-go svg,.ac-top .btn svg{width:16px;height:16px}
.ac-body{display:grid;gap:8px;align-content:start}
.ac-une a{display:grid;border-radius:var(--r-l);overflow:hidden;background:var(--sf);border:1px solid var(--ln)}
.ac-une .ac-ph{aspect-ratio:16/9}
.ac-une .ac-body{padding:clamp(22px,3vw,36px);gap:14px}
.ac-une-t{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ac-card a{height:100%;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);overflow:hidden;background:var(--sf);border:1px solid var(--ln);transition:border-color .2s ease-out,transform .2s ease-out}
.ac-card a:hover,.ac-card a:focus-visible{border-color:var(--ac);transform:translateY(-2px)}
.ac-card .ac-body{padding:16px 18px 20px}
.ac-card p{font-size:15px}
.ac-list{display:grid}
.ac-row{border-top:1px solid var(--ln)}
.ac-row:first-child{border-top:none}
.ac-row a{display:block;padding:14px 0}
.ac-row h3{font-size:17px}
.ac-foot{display:grid;gap:6px;font-size:13.5px;color:var(--mu);border-top:1px solid var(--ln);padding-top:18px}
.ac-foot a{color:var(--mu);text-decoration:underline}
.ac-alerte{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-l);background:color-mix(in srgb,var(--wa) 10%,var(--sf));border:1.5px solid color-mix(in srgb,var(--wa) 45%,transparent)}
.ac-al-i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--wa);color:var(--sf);font-weight:800}
.ac-alerte b{display:block;color:var(--wa);margin-bottom:4px}
.ac-alerte a{font-weight:700}
.ac-alerte a span{color:var(--mu);font-weight:500}
.ac-2col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,48px);align-items:start}
.ac-2col>div{display:grid;gap:18px;min-width:0}
.h2.sm{font-size:clamp(22px,2.4vw,26px)}
.ac-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 24px}
.ac-acc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:860px){
  .ac-2col,.ac-acc,.ac-grid{grid-template-columns:1fr}
}

/* ---------- Avis Google à jour (app.js, /api/avis) ---------- */
.stars-pile{display:inline-grid}
.stars-pile>svg{grid-area:1/1}
.stars-fond{opacity:.25}
.rv-list figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rv-list figcaption .stars{width:88px;height:16px}
.rv-list .rv-seul::before{display:none}
.rv-list .rv-seul .stars{width:160px;height:29px}
.rv-list figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Titre lu par les lecteurs d'écran et les moteurs, invisible à l'écran */
.lu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}