/* ==========================================================================
   Groupe RENOX : site v2. Direction Picasso (8 oct. 2026), base maquette A.
   TOUS les jetons sont dans :root. Clair + sombre via data-theme (appareil par défaut, bascule manuelle mémorisée ; palette charbon, aucun marine).
   ========================================================================== */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-regular.woff2?v=19800878b9) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-medium.woff2?v=755de400d4) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-semibold.woff2?v=fc000a72c3) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-bold.woff2?v=038f854d65) format("woff2")}
:root{
  color-scheme:light dark;
  --bg:#F7F4EE; --surface:#FFFFFF; --surface-2:#EFEBE3; --border:#E2DDD3; --border-strong:#CFC8BA;
  --title:#000000; --text:#1A1A1A; --text-muted:#5F6066; --gris:#888A92;
  --accent:#FFC700; --accent-hover:#E6B300; --accent-active:#CC9F00; --accent-soft:#FFF4CC; --on-accent:#000000;
  --focus:#000000; --danger:#B42318; --success:#1E7B4F;
  --font:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-legal:var(--font); /* t1983 (Mikaël) : Poppins partout, y compris les mentions (était Quicksand) */
  --radius-sm:12px; --radius-card:20px; --radius-photo:30px; --radius-pill:999px;
  --container:1200px; --pad-x:32px; --gutter:24px; --sec-y:112px; --hero-y:96px; --head-gap:48px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --shadow-1:0 1px 2px rgba(0,0,0,.04); --shadow-hover:0 12px 32px rgba(0,0,0,.08); --shadow-tag:0 2px 8px rgba(0,0,0,.08);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur:250ms; --dur-reveal:600ms; --dur-slow:900ms;
  --nav-h:76px; --nav-h-s:64px;
}
@media (max-width:959px){:root{--radius-photo:20px;--gutter:16px;--pad-x:20px;--sec-y:64px;--hero-y:48px;--head-gap:32px;--nav-h:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--haut-top) + var(--nav-h) + 12px);background-color:var(--bg);color-scheme:light dark}
/* t487 : Safari 26 teinte la status bar et la barre d'adresse avec le fond de la page (html/body, mis à jour en direct) quand AUCUN élément fixed/sticky
   pleine largeur ne touche le bord. Les barres du site sont donc des pilules de verre qui ne touchent pas les bords : voir le bloc « t487 » en fin de fichier et NOTES.md. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
/* t1983 : Poppins sur absolument tout (les champs de formulaire, tableaux, code, SVG text et pseudo-éléments n'héritent pas toujours de body) */
html,*,*::before,*::after{font-family:var(--font)}
::placeholder{font-family:var(--font)}
::file-selector-button{font-family:var(--font)}
button,input,select,textarea,optgroup{font-family:var(--font)}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--title);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:calc(var(--container) + 2 * var(--pad-x));margin-inline:auto;padding-inline:var(--pad-x)}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--title);text-wrap:balance}
h1{font:700 clamp(2.25rem,1.4rem + 3.6vw,3.5rem)/1.08 var(--font);letter-spacing:-.02em;max-width:18ch}
h2{font:600 clamp(1.75rem,1.2rem + 2.2vw,2.5rem)/1.15 var(--font);letter-spacing:-.015em}
h3{font:600 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.3 var(--font);letter-spacing:-.01em}
h4{font:600 clamp(1.125rem,1.08rem + .2vw,1.25rem)/1.35 var(--font)}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);line-height:1.6;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.small{font-size:.875rem;line-height:1.5}
.legal-note{font:500 13px/1.55 var(--font-legal);color:var(--text-muted)}
.u{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 88%/100% .16em;padding-bottom:.04em}
section{padding-block:var(--sec-y)}
.sec-head{max-width:720px;margin-bottom:var(--head-gap)}
.sec-head p{margin-bottom:0}
.alt{background:var(--surface-2)} .white{background:var(--surface)}
.tbd{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font:600 11px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--text);background:var(--surface);border:1px dashed var(--text-muted);border-radius:var(--radius-pill);padding:5px 9px;margin-left:6px;white-space:nowrap}
.tbd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--danger)}

/* pastille */
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 14px 8px 12px;font:500 14px/1 var(--font);letter-spacing:.01em;color:var(--text);margin-bottom:20px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.tag.on-photo{position:absolute;left:16px;bottom:16px;margin:0;border:0;box-shadow:var(--shadow-tag)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;height:auto;padding:12px 28px;border-radius:var(--radius-pill);font:600 16px/1.25 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out);white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.btn:hover{transform:translateY(-1px)} .btn:hover svg.arr{transform:translateX(4px)} .btn:active{transform:none}
.btn-y{background:var(--accent);color:var(--on-accent)}
.btn-y:hover{background:var(--accent-hover)} .btn-y:active{background:var(--accent-active)}
.btn-o{border-color:var(--title);color:var(--title);background:transparent}
.btn-o:hover{background:var(--surface)} .btn-o:active{background:var(--surface-2)}
.btn-w{background:var(--surface);color:var(--title)} .btn-w:hover{background:var(--bg)}
/* Conteneurs de boutons (héros, appels à l'action, menu mobile, barre du bas) : un seul espacement de 12 px, empilés ou côte à côte */
.ctas,.acts,.mnav-cta,.mbar{display:flex;flex-wrap:wrap;gap:12px}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.link{font-weight:600;color:var(--title);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/100% 2px;padding-bottom:3px;transition:background-size 200ms var(--ease-out)}
.link:hover{background-size:100% 6px}
@media (max-width:959px){.btn{min-height:48px}}

/* navigation */
.top{position:fixed;z-index:40} /* géométrie et verre : bloc t487 en fin de fichier */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);transition:height var(--dur) var(--ease-out)}
.top.scrolled .wrap{height:var(--nav-h-s)}
.logo{display:block;flex:none}.logo img{height:32px;width:auto}
.nav{display:none}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a,.nav button{position:relative;font:500 15px/1 var(--font);color:var(--text-muted);text-decoration:none;padding:12px 12px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-fast)}
.nav>ul>li>a::after,.nav>ul>li>button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.nav>ul>li>a:hover,.nav>ul>li>button:hover,.nav a[aria-current=page],.nav .dd.cur>button{color:var(--title)}
.nav>ul>li>a:hover::after,.nav>ul>li>button:hover::after,.nav>ul>li>a[aria-current=page]::after,.nav .dd.cur>button::after{transform:scaleX(1)}
.nav .dd{position:relative}
.nav .dd>button svg{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:270px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-hover);padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 200ms}
.nav .dd:hover .dd-menu,.nav .dd:focus-within .dd-menu,.nav .dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.nav .dd:hover>button svg,.nav .dd.open>button svg{transform:rotate(180deg)}
.dd-menu a{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:3px!important;padding:12px 14px!important;border-radius:var(--radius-sm);color:var(--title)!important;font-weight:600!important}
.dd-menu a:hover,.dd-menu a[aria-current=page]{background:var(--bg)}
.dd-menu small{color:var(--text-muted);font-weight:400;font-size:13px}
.top-actions{display:flex;align-items:center;gap:14px}
.top .btn-cta{display:none}
/* Header : jamais de wrap ; menu complet ≥1100 ; hamburger sous 1100 (évite débordement 1024) */
.top .nav a,.top .nav button,.top .tel,.top .btn-cta,.top .tel-num{white-space:nowrap}
.top .tel{display:none;align-items:center;gap:8px;font-weight:600;color:var(--title);text-decoration:none;font-size:15px}
.top .tel-ic{display:none;width:18px;height:18px;flex:none}
.top .tel-ic svg{width:18px;height:18px;display:block}
@media (min-width:1100px){
  .nav{display:block}
  .burger,.mnav{display:none}
  .top .btn-cta{display:inline-flex}
  .top .tel{display:inline-flex}
  .mbar{display:none}
}
@media (min-width:1100px) and (max-width:1179px){
  .top .nav a,.top .nav button{padding:10px 7px;font-size:13.5px}
  .top .nav>ul{padding:0 2px;gap:0}
  .top .tel-num{display:none}
  .top .tel-ic{display:block}
  .top .tel{gap:0;padding:0 4px}
  .top .top-actions{gap:10px}
  .top .top-actions:has(.btn-cta){padding:0 4px 0 12px}
  .top .btn-cta{padding:0 12px 0 14px;font-size:13px;min-height:34px;height:34px}
  .theme-toggle,.theme-track{width:64px;height:34px}
}
@media (min-width:1180px){
  .top .tel-ic{display:none}
  .top .tel-num{display:inline}
}

.burger{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--title);border-radius:2px;transition:transform var(--dur) var(--ease-out),background var(--dur-fast)}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
/* Menu bureau ≥1100 : après .burger{display:grid} pour gagner la cascade */
@media (min-width:1100px){
  .nav{display:block}
  .burger,.mnav{display:none}
  .top .btn-cta{display:inline-flex}
  .top .tel{display:inline-flex}
  .mbar{display:none}
}
.mnav{
  /* Fermé : hors couche fixed qui touche les bords (sinon Safari 26 Liquid Glass
     échantillonne ce fixed 100 % → barre d'adresse opaque #bg, contenu coupé net). */
  position:absolute;left:0;right:0;top:0;height:0;z-index:39;
  margin:0;padding:0;border:0;background:transparent;
  overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease-out),visibility var(--dur)}
.menu-open{overflow:hidden}
.menu-open .mnav{
  position:fixed;left:0;right:0;top:calc(var(--haut-top) + var(--pil-h) + 8px);bottom:0;height:auto;
  background:var(--bg);padding:16px var(--pad-x) calc(var(--bas-gap,8px) + var(--pil-h,48px) + 12px + 56px + 28px);overflow:auto;
  visibility:visible;opacity:1;pointer-events:auto}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav li a{display:block;padding:10px 0;font:600 28px/1.2 var(--font);color:var(--title);text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);transition-delay:calc(var(--i,0) * 40ms)}
.mnav li a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:6px}
.menu-open .mnav li a{opacity:1;transform:none}
.mnav .grp{font:500 13px/1 var(--font);color:var(--text-muted);padding:20px 0 6px}
.mnav .sub a{font-size:20px;padding:8px 0}
.mnav-cta{margin-top:28px}
.mnav-cta .btn{flex:1 1 100%}

/* héros */
.hero{padding-block:var(--hero-y) var(--sec-y)}
.hero .grid{display:grid;gap:40px;align-items:center}
.hero .ctas{margin:32px 0 16px}
.hero .meta{font-size:14px;color:var(--text-muted);margin:0}
.ph{position:relative;margin:0;border-radius:var(--radius-photo);overflow:hidden;background:var(--surface-2);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.r45{aspect-ratio:4/5}.ph.r43{aspect-ratio:4/3}.ph.r11{aspect-ratio:1/1}.ph.r169{aspect-ratio:16/9}
@media (max-width:959px){.hero .ph.r45{aspect-ratio:4/3}}
.page-hero{padding-block:var(--hero-y) calc(var(--sec-y) * .75)}
.crumbs{font-size:14px;color:var(--text-muted);margin-bottom:20px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--title)}

/* bandeau de confiance */
.trust{background:var(--surface-2);border-block:1px solid var(--border)}
.trust ul{list-style:none;margin-inline:auto;padding-block:28px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.trust li{padding:12px 16px;font-size:14px;line-height:1.45;color:var(--text-muted);border-left:1px solid var(--border)}
.trust li:nth-child(odd){border-left:0;padding-left:0}
.trust li strong{display:block;color:var(--title);font-size:16px;font-weight:600;margin-bottom:2px}

/* grilles et cartes */
.grid-c{display:grid;gap:var(--gutter)}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.card p{color:var(--text-muted);margin-bottom:0}
.card h4{margin-bottom:8px}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin-bottom:20px;color:var(--title)}
.card .ic svg{width:24px;height:24px}
.card .more{margin-top:auto;padding-top:20px}
.card .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card.media{padding:0;overflow:hidden}
.card.media .ph{border-radius:0;aspect-ratio:4/3}
.card.media .ph img{transition:transform 600ms var(--ease-out)}
.card.media .in{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
@media (hover:hover){
  .card.hov:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
  .card.hov:hover .ph img{transform:scale(1.03)}
  .card.hov:hover .link{background-size:100% 6px}
}
@media (max-width:959px){.card{padding:24px}}

.split{display:grid;gap:40px;align-items:center}
.checks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.checks li svg{width:22px;height:22px;color:var(--success);margin-top:2px}

/* encadrés prix / financement */
.price{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px 28px 28px 34px;overflow:hidden}
.price::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}
.price .from{font-size:15px;color:var(--text-muted);margin:0}
.big{font:700 clamp(2.5rem,2.2rem + 1vw,3rem)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--title);margin:6px 0 10px}
.fin-box{background:var(--accent-soft);border-radius:var(--radius-card);padding:24px}
.fin-box .big{font-size:40px}

/* étapes */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:28px;position:relative}
.steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.steps .n{width:44px;height:44px;border-radius:50%;border:2px solid var(--title);display:grid;place-items:center;font-weight:600;background:var(--bg);position:relative;z-index:1;transition:background 400ms var(--ease-out)}
.steps.is-in .n{background:var(--accent);transition-delay:calc(var(--i,0) * 300ms + 300ms)}
.steps h4{margin:8px 0 4px}
.steps p{color:var(--text-muted);margin:0;font-size:16px}
.steps .bar{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--border)}
.steps .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1200ms var(--ease-in-out)}
.steps.is-in .bar::after{transform:none}

/* avis */
.quote{margin:0}
.quote .stars{display:flex;gap:3px;margin-bottom:16px;color:var(--accent)}
.quote .stars svg{width:18px;height:18px}
.quote blockquote{margin:0 0 20px;color:var(--text);flex:1}
.quote figcaption{font-weight:600;color:var(--title);font-size:15px}
.quote figcaption span{display:block;font-weight:400;color:var(--text-muted);font-size:14px}
.brands{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.brands li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:10px 20px;font-weight:600;font-size:15px;color:var(--title)}

/* FAQ */
.faq{display:grid;gap:12px;max-width:760px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);transition:border-color var(--dur)}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{list-style:none;cursor:pointer;padding:22px 64px 22px 24px;font-weight:600;color:var(--title);position:relative;border-radius:var(--radius-card)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:26px;top:50%;width:16px;height:2px;background:var(--title);transition:transform 300ms var(--ease-out)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 300ms var(--ease-out),opacity 300ms var(--ease-out)}
.faq details[open] .ans{grid-template-rows:1fr;opacity:1}
.faq .ans>div{overflow:hidden;padding:0 24px}
.faq .ans>div>:last-child{margin-bottom:22px}
.faq .ans p{color:var(--text-muted)}

/* formulaires */
.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(24px,3vw,40px);display:grid;gap:20px;box-shadow:var(--shadow-1)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend,.field>span{font:500 14px/1.3 var(--font);color:var(--title);margin-bottom:10px;padding:0}
.field{display:grid;gap:8px}
.field>span{margin:0}
.field .opt{color:var(--text-muted);font-weight:400}
.field input,.field textarea,.field select{font:400 16px/1.4 var(--font);color:var(--text);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;min-height:52px;width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px rgba(255,199,0,.35)}
.field textarea{min-height:120px;resize:vertical}
.field .err{display:none;color:var(--danger);font-size:14px}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--danger)}
.field.bad .err{display:block}
.row2{display:grid;gap:20px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{position:relative}
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--border);border-radius:var(--radius-pill);font:500 15px/1 var(--font);color:var(--text);background:var(--surface);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.choices span:hover{border-color:var(--border-strong)}
.choices input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.choices input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font:500 13px/1.55 var(--font-legal);color:var(--text-muted)}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:#000}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form .btn{width:100%}
.form-err{display:none;color:var(--danger);font-size:14px;background:#FDF0EE;border-radius:var(--radius-sm);padding:12px 14px}
.form-err.on{display:block}
.form-ok{display:none;background:var(--accent-soft);border-radius:var(--radius-card);padding:28px;gap:14px;grid-template-columns:32px 1fr;align-items:start}
.form-ok svg{width:32px;height:32px;color:var(--success)}
.form-ok p{margin:0;color:var(--text)}
.form.sent>:not(.form-ok){display:none}
.form.sent .form-ok{display:grid;animation:fadein 400ms var(--ease-out)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* coordonnées */
.coord{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:16px}
.coord li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center}
.coord .ic{width:48px;height:48px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--title)}
.coord svg{width:22px;height:22px}
.coord a{font-weight:600;color:var(--title);text-decoration:none}
.coord small{display:block;color:var(--text-muted);font-size:14px}

/* CTA final */
/* CTA final : marge haute nette ; section précédente sans gros padding bas */
.cta{padding-block:48px;background:var(--bg)}
@media (max-width:959px){.cta{padding-block:32px}}
section:has(+ .cta){padding-bottom:0}
.cta .box{background:var(--accent);border-radius:var(--radius-photo);padding:clamp(32px,5vw,64px);display:grid;gap:24px;align-items:center}
.cta h2{margin:0 0 8px}
.cta p{margin:0;color:var(--on-accent)}
.cta .acts{align-items:center}
.cta .tel{font-weight:600;color:var(--title);text-decoration:none;font-size:17px}

/* pages légales */
.prose{max-width:780px;overflow-wrap:anywhere;font:500 15px/1.7 var(--font-legal);color:var(--text)}
.prose p{max-width:none}
.prose ol,.prose ul{padding-left:1.4em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose strong{font-weight:700;color:var(--title)}
.prose a{text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.prose h2{font:600 1.35rem/1.25 var(--font);margin:2em 0 .7em;color:var(--title)}
.prose h3{font:600 1.1rem/1.3 var(--font);margin:1.6em 0 .5em;color:var(--title)}
.prose hr{border:0;border-top:1px solid var(--border);margin:1.6em 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:14px;line-height:1.5}
.prose th,.prose td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--surface-2);color:var(--title);font-weight:600}
.prose tr:nth-child(even) td{background:rgba(0,0,0,.02)}
.prose mark.a-completer,.prose mark{background:#FFE566;color:#1A1A1A;padding:0 .2em;border-radius:3px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Pages légales — mobile d'abord (cartes Q/R, coordonnées, sommaire) */
.legal-hero{padding-bottom:20px}
.legal-hero h1{margin-bottom:8px}
.legal-ver{margin:0;font:500 14px/1.5 var(--font-legal);color:var(--text-muted)}
.legal-ver mark.a-completer{font-size:inherit}
.legal-body{padding-top:0;padding-bottom:calc(140px + env(safe-area-inset-bottom))}
.legal-prose{max-width:720px}
.legal-toc{margin:0 0 28px;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.legal-toc summary{position:relative;cursor:pointer;list-style:none;padding:14px 46px 14px 18px;font:600 15px/1.3 var(--font);color:var(--title)}
.legal-toc summary::-webkit-details-marker{display:none}
/* t1983 : ＋/－ pleine chasse absents de Poppins → traits dessinés */
.legal-toc summary::before,.legal-toc summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:2px;margin-top:-1px;border-radius:1px;background:var(--text-muted);transition:transform var(--dur-fast)}
.legal-toc summary::after{transform:rotate(90deg)}
.legal-toc[open] summary::after{transform:rotate(0)}
.legal-toc ol{margin:0;padding:0 18px 16px 36px;display:grid;gap:8px;font:500 14px/1.4 var(--font-legal)}
.legal-toc a{text-decoration:none;color:var(--text)}
.legal-toc a:hover{color:var(--title);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.legal-qa{display:grid;gap:12px;margin:0 0 1.4em}
.legal-qa-item{padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.legal-qa-q{margin:0 0 6px;font:600 14px/1.35 var(--font);color:var(--title)}
.legal-qa-a{margin:0;font:500 14px/1.55 var(--font-legal);color:var(--text)}
.legal-card{margin:0 0 1.2em;padding:18px 18px 16px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.legal-card-k{margin:0 0 6px;font:600 12px/1.3 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.legal-card-n{margin:0 0 12px;font:600 16px/1.35 var(--font);color:var(--title)}
.legal-card-l{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:500 15px/1.45 var(--font-legal)}
.legal-card-l a{color:var(--title);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.legal-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em;border:1px solid var(--border);border-radius:16px}
.legal-table table{margin:0;border:0;min-width:100%}
.legal-table th,.legal-table td{border-color:var(--border)}
@media (max-width:639px){
  .legal-table table,.legal-table thead,.legal-table tbody,.legal-table th,.legal-table td,.legal-table tr{display:block}
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .legal-table tr{padding:12px 14px;border-bottom:1px solid var(--border)}
  .legal-table tr:last-child{border-bottom:0}
  .legal-table td{border:0;padding:4px 0}
  .legal-table td:first-child{font-weight:600;color:var(--title);padding-top:0}
}
.prose.legal-prose h2{margin-top:2.2em}
.prose.legal-prose h2:first-of-type{margin-top:1.2em}
.sources-donnees{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--text-muted)}
.sources-donnees h2{font-size:18px;color:var(--title)}
/* hero sans meta RBQ : resserrer l'espace sous le CTA */
.hero .ctas{margin:28px 0 0}
.page-hero .ctas{margin:28px 0 0}

/* pied de page */
.foot{background:var(--surface-2);border-top:1px solid var(--border);padding:64px 0 120px;font-size:15px}
.foot .grid{display:grid;gap:32px}
.foot h4{font-size:16px;margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot a{text-decoration:none;color:var(--text)}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.foot .muted{font-size:15px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
.social a:hover{background:var(--accent);border-color:var(--accent)}
.social svg{width:18px;height:18px}
.legal{border-top:1px solid var(--border);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 13px/1.55 var(--font-legal);color:var(--text-muted)}
.legal a{color:var(--text-muted)}

/* barre mobile */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:38;flex-wrap:nowrap;padding:10px 12px calc(10px + env(safe-area-inset-bottom));transition:transform var(--dur) var(--ease-out)}
.mbar.hide{transform:translateY(110%)}
.mbar .btn{flex:1 1 0;min-width:0;padding:10px 12px;font-size:15px}
.mbar .btn:last-child{flex-grow:1.5}

/* animations (Picasso §5) : .js seulement, coupées par prefers-reduced-motion */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-img img{transform:scale(1.04);opacity:0;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.js .reveal-img.is-in img{transform:none;opacity:1}
.js .u{background-size:0% .16em;transition:background-size 700ms var(--ease-in-out) 200ms}
.js .u.is-in{background-size:100% .16em}
.hero-in .u.is-in,.page-hero .u.is-in{background-size:100% .16em!important}
.hero-in>*{animation:rise var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms)}
.hero-in h1{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .ph.load img{animation:photo var(--dur-slow) var(--ease-out) 240ms both}
@keyframes photo{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal-img img{opacity:1;transform:none}
  .js .u{background-size:100% .16em}
  @view-transition{navigation:none}
}

@media (min-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr 1fr}
  .trust ul{grid-template-columns:repeat(4,1fr)}
  .trust li:nth-child(odd){border-left:1px solid var(--border);padding-left:16px}
  .trust li:first-child{border-left:0;padding-left:0}
}
@media (min-width:960px){
  .hero .grid{grid-template-columns:6fr 6fr;gap:64px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .split.wide-l{grid-template-columns:7fr 5fr}
  .split.rev>:first-child{order:2}
  .steps.h{grid-template-columns:repeat(4,1fr);gap:24px}
  .steps.h li{grid-template-columns:1fr;gap:12px}
  .steps.h .bar{left:22px;right:22px;top:21px;bottom:auto;width:auto;height:2px}
  .steps.h .bar::after{transform:scaleX(0);transform-origin:left}
  .steps.h.is-in .bar::after{transform:none}
  .cta .box{grid-template-columns:1fr auto}
  .contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .foot{padding-bottom:48px}
  .foot .grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  }


/* Carte « Nouveau » (subventions) */
.card-new{border:2px solid var(--accent)}
.badge-new{position:absolute;top:20px;right:20px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-pill);padding:6px 12px;font:600 13px/1 var(--font);letter-spacing:.02em}
.card-new .checks{margin:12px 0 0}
.card-new .checks li{color:var(--text-muted)}
.card-new .btn{max-width:100%;white-space:normal;text-align:center}
/* Formulaires : jamais de débordement à droite sur mobile */
.form{min-width:0;max-width:100%;width:100%}
.form>*,.row2>*,.field{min-width:0}
.field input,.field textarea,.field select{max-width:100%;box-sizing:border-box}
.form .btn{max-width:100%;box-sizing:border-box;white-space:normal}
.contact-grid>*{min-width:0}
/* Bandeau CTA final : le bouton ne force plus la largeur à 360-390 px */
.cta .box>*{min-width:0}
.cta .acts .btn{max-width:100%;white-space:normal;text-align:center}
/* Petits écrans (≤ 400 px) : les boutons longs passent à la ligne au lieu de déborder */
.hero .grid>*,.split>*,.grid-c>*{min-width:0}
@media (max-width:400px){.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}}
/* Boutons empilés : toujours ~12 px d'écart (héros, menu mobile, bandeaux) */
.page-hero .ctas{margin:32px 0 0}
/* Photo de carte (format card_ic) : recadrage cover, coins 30 px, ratio fixe anti-CLS */
.card-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:30px;margin-bottom:20px;background:var(--surface-2)}
/* Adresse = lien d'itinéraire */
.addr-map{color:inherit;text-decoration:none;text-underline-offset:3px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.addr-map:hover,.addr-map:focus-visible{text-decoration:underline;text-decoration-color:var(--border-strong)}
.foot .addr-map{color:var(--text-muted)}
.foot .addr-map:hover,.foot .addr-map:focus-visible{color:var(--title);text-decoration-color:var(--title)}
.legal-card .addr-map{color:var(--text)}
.coord .addr-map{font-weight:600;color:var(--title)}
/* Contact : encadré Loi 25 après le formulaire */
/* Bouton d'estimation seul : pleine largeur sur mobile (héros et bandeau CTA) */
@media (max-width:639px){.ctas .btn,.cta .acts .btn{width:100%}}
/* Images arrondies : 30 px pour une photo seule ; photo de carte en retrait, 4 coins arrondis. Logo et icônes exclus. */
img,picture,.media,.ph{border-radius:30px}
picture,.media,.ph{overflow:hidden}
.ph img,.ph picture{border-radius:inherit}
.logo img,.foot .logo img,.ic img,.social img,.brands img{border-radius:0}
/* Logos (header, programmes) : picture/img sans radius ni overflow qui coupe ;
   la pilule .top .logo garde border-radius:999px (verre givré). */
.top .logo picture,.foot .logo picture,
.prog-logos,.prog-logos picture,.prog-logo{
  overflow:visible!important;border-radius:0!important}
.top .logo img,.foot .logo img,.prog-logos img,.prog-logo img{
  overflow:visible;border-radius:0!important;flex-shrink:0}
.top .logo{border-radius:999px!important;overflow:visible}
.card.media{padding:12px}
.card.media .ph{border-radius:18px}
.card.media .in{padding:20px 16px 16px}
/* Adresse : liste de suggestions (Adresses Québec) */
.field.adr{position:relative}
.field.adr>label>span{font:500 14px/1.3 var(--font);color:var(--title)}
.adr-l{position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:40;-webkit-overflow-scrolling:touch;touch-action:manipulation;list-style:none;margin:0;padding:6px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-hover);max-height:260px;overflow:auto}
.adr-l li{padding:10px 12px;border-radius:8px;font-size:15px;line-height:1.35;cursor:pointer;overflow-wrap:anywhere}
.adr-l li.on,.adr-l li:active{background:var(--accent-soft)}
@media (hover:hover){.adr-l li:hover{background:var(--accent-soft)}}  /* pas de :hover au toucher (iOS : 1er toucher = survol) */
.adr-src{font-size:12px;color:var(--text-muted)}

/* Spinner iOS — Adresses Québec (debounce + fetch) */
.adr-spin{
  position:absolute;right:14px;z-index:3;width:18px;height:18px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--border-strong) 80%,transparent);
  border-top-color:var(--text-muted);box-sizing:border-box;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s;
  /* Centré verticalement sur l'input (label au-dessus ≈ 1.3em + gap) */
  top:calc(1.3em + 18px + (52px - 18px)/2)}
.field.adr.adr-loading .adr-spin,.ch-adr.adr-loading .adr-spin{opacity:1;visibility:visible}
.field.adr.adr-loading input[name=adresse],.ch-adr.adr-loading input[name=adresse]{padding-right:42px}
.ch-adr .adr-spin{top:calc(1.2em + 10px + (44px - 18px)/2)}
@keyframes adr-spin-rot{to{transform:rotate(360deg)}}
@keyframes adr-spin-pulse{0%,100%{opacity:.3}50%{opacity:.95}}
@media (prefers-reduced-motion:no-preference){.adr-spin{animation:adr-spin-rot .7s linear infinite}}
@media (prefers-reduced-motion:reduce){
  .adr-spin{animation:adr-spin-pulse 1.2s ease-in-out infinite;width:8px;height:8px;border:0;background:var(--text-muted);border-radius:50%}
}
html[data-theme="dark"] .adr-spin{border-color:#4A4A4A;border-top-color:#C8C8C8}
.form-hs{margin:10px 0 0!important;font-weight:600}
/* Pastille subvention (carte Accumulateurs de chaleur) */
.card .pill-sub{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;margin:14px 0 0;padding:6px 12px;border-radius:var(--radius-pill);background:#E8F5EC;color:#1E7B34;font:600 13px/1.25 var(--font);white-space:nowrap}
.card .pill-sub svg{width:16px;height:16px;flex:none;color:#1E7B34}
.card .sub-note{margin:8px 0 0;font:500 12px/1.5 var(--font-legal);color:var(--text-muted)}
/* Photo produit détourée (thermostat Sinopé) : contain, fond crème, ~8 % de marge, cadre 30 px */
.ph.prod{background:#EFEBE3;border:0;box-shadow:none}                 /* sur section crème #F7F4EE (défaut) */
.white .ph.prod,.card .ph.prod,.alt .ph.prod{background:#F7F4EE}       /* dans une carte/section blanche, ou sur section #EFEBE3 */
.ph.prod img{object-fit:contain;padding:8%;box-sizing:border-box;background:transparent}
/* Icône mazout → électricité (section « Encore au mazout? ») */
.mz-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mz-ic{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:20px;background:#EFEBE3;flex:none}
.mz-ic svg{width:60px;height:60px}
.mz-ic::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:#FFC700}
.mz-head .tag{margin-bottom:12px}
@media (min-width:960px){.mz-head{flex-direction:row;align-items:center;gap:24px}.mz-head h2{margin-bottom:0}}
.mz-head+p{margin-top:20px}
.mz-ic svg *{vector-effect:non-scaling-stroke}

/* Carte « Après subvention » : liste de prix */
.price,.price *{box-sizing:border-box}
.price{min-width:0}
.price-list{list-style:none;margin:6px 0 10px;padding:0;border-top:1px solid var(--border)}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.price-list li span:first-child{min-width:0}
.price-list .amt{font-weight:600;color:var(--title);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-list li.pl-link{padding:0 0 10px;margin-top:-4px;font-size:14px}
.price-note{font-size:14px;color:var(--text-muted);margin:0 0 16px}
.price .btn{max-width:100%;white-space:normal;text-align:center}
/* Lien externe */
.link-ext{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.link-ext svg.ext{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-1px}
.price-list li.pl-link{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.price{padding:24px 26px}.price .btn{width:100%;padding:12px 18px}}
/* Réalisations : une seule photo pour l'instant, largeur d'une colonne, alignée à gauche */
.grid-c.gal-solo{grid-template-columns:minmax(0,1fr);max-width:440px}
@media (min-width:960px){.grid-c.gal-solo{max-width:calc((100% - 2 * var(--gutter))/3)}}
.nw{white-space:nowrap}
/* Avis : logo de la source en haut à droite, à la hauteur des étoiles (logos officiels, non recolorés, non déformés) */
.q-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.q-top .stars{margin-bottom:0}
/* logos Google/Facebook : officiels, multicolores, SANS fond ni tuile (Mikaël 10 oct.) */
.src-logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;padding:0!important;box-sizing:border-box;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.src-logo svg{width:24px;height:24px;display:block;background:transparent}
.src-logo.sm{width:26px;height:26px;vertical-align:middle}
.src-logo.sm svg{width:22px;height:22px}
.g-note{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--title)}
/* Réalisations : carrousel scroll-snap sur mobile (carte suivante visible), grille sur desktop. Conteneur défilant = .gal (focusable au clavier). */
.gal{position:relative;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:30px}
.gal::-webkit-scrollbar{display:none}
.gal:focus{outline:none}
.gal:focus-visible{outline:2px solid var(--title);outline-offset:-2px}
.gal-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:12px}
.gal-track>li{scroll-snap-align:start;min-width:0}
.gal-track .ph{margin:0}
@media (min-width:640px){.gal-track{grid-auto-columns:calc((100% - 24px)/2.4)}}
@media (min-width:960px){.gal{overflow:visible;scroll-snap-type:none;border-radius:0}.gal-track{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:var(--gutter)}}
@media (min-width:1200px){.gal-track{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){.gal{scroll-behavior:smooth}}

/* Boutons : jamais de texte coupé (hauteur auto, padding vertical) ; un peu plus petits sur mobile */
.btn{overflow:visible}
@media (max-width:600px){.btn{font-size:15px;padding-inline:20px;gap:8px}.btn svg{flex:none}}
@media (max-width:400px){.btn{white-space:normal;line-height:1.25}}
/* Lien multilogement dans la colonne de gauche de la rangée */
.price-list li.pl-multi{align-items:flex-start}
.pl-lbl{display:flex;flex-direction:column;gap:4px;min-width:0}
.pl-lbl .link-ext{font-size:14px;align-self:flex-start}
.more-sm{font-size:14px}

/* Formulaires : la liste d'adresses ne doit jamais être coupée ni passer sous un autre élément */
.form{overflow:visible}
.form.reveal.is-in{transform:none}
.field.adr.open{z-index:40}
.adr-l li{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.field .req{color:var(--danger);font-weight:600}
/* Encadré Bonification (/isolation), style carte subvention */
.card-bonif h3{margin:4px 0 10px;padding-right:120px}
.card-bonif .acts{margin:8px 0 0}
.card-bonif .btn{max-width:100%;white-space:normal;text-align:center}
@media (max-width:600px){.card-bonif h3{padding-right:0;margin-top:40px}.card-bonif .btn{width:100%}}
.bonif-line{font-size:15px;background:var(--accent-soft);border-radius:var(--radius-sm);padding:12px 14px;margin:4px 0 12px}
/* Logo Hydro-Québec à côté de la pastille de subvention (fichier officiel, non recoloré, non déformé) */
.card .sub-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 0}.card .sub-row .pill-sub{min-width:0;margin:0}
.hq-logo{display:block;height:18px;width:auto;border-radius:0!important;flex:none;background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important}
/* Logos de programmes (LogisVert/HQ, Canada) : remplacent l'icône générique, fond transparent */
.prog-logo{display:block;margin:0 0 14px;line-height:0;background:transparent!important;padding:0!important;border:0!important}
.prog-logo img{display:block;height:22px;width:auto;max-width:140px;flex-shrink:0;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important;overflow:visible}
.card.card-new .prog-logo{margin-top:4px}
/* Rangée HQ + LogisVert */
.prog-logos{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 12px;line-height:0;max-width:100%;overflow:visible}
.prog-logos picture{display:block;line-height:0;flex:0 0 auto;overflow:visible;border-radius:0!important}
.prog-logos img{display:block;height:22px;width:auto;max-height:22px;max-width:none;flex-shrink:0;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important;overflow:visible}
.prog-sep{flex:none;width:1px;height:16px;background:var(--border-strong);opacity:.7}
.sub-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:14px 0 0}
.sub-stack .prog-logos{margin:0}
.sub-stack .pill-sub{margin:0;white-space:nowrap}
.card .sub-row{display:none} /* remplacé par .sub-stack */

/* Appel de service : diagnostic, frais, fichiers */
.field.diag-q{display:block}
.field.diag-q .err{margin-top:8px}
.field.bad .err{display:block}
.files-drop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:14px 16px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;font:600 15px/1.3 var(--font);color:var(--title);text-align:center;background:var(--surface)}
.files-drop:hover,.files-drop:focus-within{border-color:var(--title);background:var(--accent-soft)}
.files-drop input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.files-drop svg.up{width:20px;height:20px;flex:none}
.files-aide{font-size:13px;color:var(--text-muted)}
.files-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.files-list:empty{display:none}
.file{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;gap:12px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.file-th{width:56px;height:56px;object-fit:cover;border-radius:10px!important;background:var(--surface-2);display:block}
.file-ph{display:grid;place-items:center;font-size:12px;color:var(--text-muted)}
.file-tx{display:grid;gap:2px;min-width:0;font-size:14px}
.file-n{font-weight:600;color:var(--title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-s{color:var(--text-muted);font-size:13px}
.file-p{display:block;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:4px}
.file-p>span{display:block;height:100%;width:0;background:var(--accent);transition:width 200ms linear}
.file-rm{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:22px;line-height:1;cursor:pointer;color:var(--title)}
.file-rm:hover{border-color:var(--title)}
.form-fic{margin:8px 0 0;font-size:14px}

.adr-l li.adr-msg{cursor:default;color:var(--muted,#5b5b5b);font-size:14px;background:none}

/* Financement : logos des partenaires */
.fin-grid{max-width:880px}
.logo-tile{display:inline-flex;align-items:center;background:#fff;border-radius:10px}
.fin-logo{align-self:flex-start;padding:10px 14px;margin-bottom:18px;border:1px solid var(--border)}
.fin-logo img{display:block;height:34px;width:auto;max-width:200px;border-radius:0!important}
.g-note{display:none}

/* ==========================================================================
   MODE SOMBRE (html[data-theme="dark"]), palette charbon — bouton header + suivi appareil.
   fond #121212 · sections alternées #181818 · cartes #1C1C1C · bordures #333 · titres #FFF · texte #EDEDED · secondaire #A3A4AA
   ========================================================================== */
html[data-theme="dark"]{
    --bg:#121212; --surface:#1C1C1C; --surface-2:#181818; --surface-3:#262626; --border:#333333; --border-strong:#555555;
    --title:#FFFFFF; --text:#EDEDED; --text-muted:#A3A4AA; --gris:#A3A4AA;
    --accent-soft:rgba(255,199,0,.12); --on-accent:#000000;
    --focus:#FFC700; --danger:#FF8A7A; --success:#6FD08C;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 12px 32px rgba(0,0,0,.55); --shadow-tag:0 2px 8px rgba(0,0,0,.5);
  .white{background:var(--surface-2)}
  .skip{color:#000;background:var(--accent)}
  /* pastilles blanches → #262626, texte clair */
  .tag,.brands li,.choices span,.file-rm{background:var(--surface-3)}
  .card .ic,.coord .ic{background:var(--surface-3)}
  /* jaune : toujours texte noir dessus */
  .cta .box{--title:#000;--text:#000;--text-muted:#1A1A1A;color:#000}
  .cta .box .btn-w{background:#000;color:#fff;border-color:#000}
  .cta .box .btn-w:hover{background:#1C1C1C}
  .cta .box :focus-visible{outline-color:#000}
  .steps.is-in .n{color:#000;border-color:var(--accent)}
  .social a:hover{color:#000}
  .prose mark.a-completer,.prose mark{background:#FFE566;color:#1A1A1A}
  .prose th{background:var(--surface-3)}
  .prose tr:nth-child(even) td{background:rgba(255,255,255,.03)}
  .badge-new,.choices input:checked+span{color:#000}
  /* badge vert de subvention */
  .card .pill-sub{background:rgba(30,123,52,.25);color:#6FD08C}
  .card .pill-sub svg{color:#6FD08C}
  /* logos Google/Facebook : fond transparent aussi en sombre (plus de tuile blanche) */
  .src-logo{background:transparent!important;padding:0!important;border-radius:0!important}
  /* logo HQ : fond transparent (clair + sombre) ; version blanche via <picture> */
  .hq-logo{background:transparent!important;padding:0!important;border-radius:0!important;box-sizing:content-box}
  .prog-logo,.prog-logo img{background:transparent!important;padding:0!important}
  .prog-logos img{background:transparent!important;padding:0!important}
  .prog-sep{background:var(--border-strong)}
  .fin-logo{border-color:transparent}
  /* photos produit détourées : tuile #262626 ; icône mazout : tuile #262626, trait clair (currentColor) */
  .ph.prod,.white .ph.prod,.card .ph.prod,.alt .ph.prod{background:var(--surface-3)}
  .mz-ic{background:var(--surface-3);color:var(--title)}
  /* formulaires */
  .field input,.field textarea,.field select{background:#121212;border-color:#4A4A4A;color:var(--text)}
  .field input::placeholder,.field textarea::placeholder{color:#8E8F95;opacity:1}
  .field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,199,0,.3)}
  .consent input{accent-color:var(--accent)}
  .form-err{background:rgba(180,35,24,.22);color:#FFB4A8}
  .adr-l{background:#262626;border-color:#4A4A4A}
  .adr-l li.on,.adr-l li:active{background:rgba(255,199,0,.18)}
  .adr-l li.adr-msg{color:var(--text-muted)}
  .files-drop{background:#121212}
}
@media (hover:hover){html[data-theme="dark"] .adr-l li:hover{background:rgba(255,199,0,.18)}}

/* ---------- t404 : réservation en ligne (formulaire d'estimation) — clair et sombre par les jetons ---------- */
.rdv-opts{display:grid;gap:8px}
.rdv-opt{position:relative;display:block}
.rdv-opt input{position:absolute;opacity:0;width:1px;height:1px}
.rdv-opt-b{display:flex;flex-direction:column;gap:2px;padding:14px 16px 14px 46px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;position:relative;transition:border-color var(--dur-fast),background var(--dur-fast)}
.rdv-opt-b::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface)}
.rdv-opt-b b{font:600 15px/1.3 var(--font);color:var(--title)}
.rdv-opt-b small{font-size:13.5px;line-height:1.4;color:var(--text-muted)}
.rdv-opt input:checked+.rdv-opt-b{border-color:var(--accent);background:var(--accent-soft)}
.rdv-opt input:checked+.rdv-opt-b::before{border-color:var(--title);background:radial-gradient(circle,var(--title) 0 4px,transparent 5px)}
.rdv-opt input:focus-visible+.rdv-opt-b{outline:2px solid var(--focus);outline-offset:3px}
.rdv-cal{margin-top:12px;padding:14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.rdv-cal[hidden]{display:none}
.rdv-msg{margin:0;font-size:14px;color:var(--text-muted)}
.rdv.bad .rdv-msg{color:var(--danger);font-weight:500}
.rdv.chargement .rdv-msg::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--border-strong);border-top-color:var(--title);border-radius:50%;animation:rdvTourne .8s linear infinite;vertical-align:-1px}
@keyframes rdvTourne{to{transform:rotate(360deg)}}
.rdv-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px -14px 0;padding:2px 14px 8px;padding-inline:14px;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rdv-day{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;min-width:62px;padding:8px 6px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font:400 12px/1.25 var(--font);cursor:pointer}
.rdv-day b{font:600 20px/1.2 var(--font);color:var(--title)}
.rdv-day small{font-size:12px;color:var(--text-muted)}
.rdv-day[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.rdv-day[aria-pressed=true] b,.rdv-day[aria-pressed=true] small{color:var(--on-accent)}
.rdv-hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.rdv-jour{grid-column:1/-1;margin:0;font:500 14px/1.3 var(--font);color:var(--title)}
.rdv-h{min-height:44px;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);color:var(--text);font:500 15px/1 var(--font);cursor:pointer}
.rdv-h[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rdv-day:focus-visible,.rdv-h:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover){.rdv-day:hover,.rdv-h:hover,.rdv-opt-b:hover{border-color:var(--border-strong)}}
.form-rdv{margin-top:6px}
html[data-theme="dark"]{
  .rdv-opt input:checked+.rdv-opt-b{background:rgba(255,199,0,.12)}
  .rdv-day,.rdv-h{background:var(--surface-3)}
  .rdv-day[aria-pressed=true],.rdv-h[aria-pressed=true]{background:var(--accent);color:#000}
  .rdv-day[aria-pressed=true] b,.rdv-day[aria-pressed=true] small{color:#000}
}
@media (prefers-reduced-motion:reduce){.rdv.chargement .rdv-msg::before{animation:none}}

/* jours du calendrier : 1re pastille alignée sur le texte de la carte (padding-inline + scroll-padding-inline pour le snap) */

/* motif de repli de la réservation (sous « Me faire appeler ») : note discrète, vide = invisible */
.rdv-repli{margin:2px 4px 4px;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;background:var(--accent-soft);font:500 13px/1.5 var(--font-legal);color:var(--text)}
.rdv-repli:empty{position:absolute;margin:0;padding:0;border:0;background:none}

/* t406 : type de rendez-vous (sur place 30/60 min ou appel 15 min), avant les jours */
.rdv-types{display:grid;gap:8px;margin:0 0 12px}
.rdv-type{position:relative;display:block;cursor:pointer}
.rdv-type input{position:absolute;opacity:0;width:1px;height:1px}
.rdv-type>span{display:block;padding:10px 12px 10px 38px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font:500 14px/1.4 var(--font);color:var(--text);background:var(--bg);position:relative}
.rdv-type>span::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface)}
.rdv-type input:checked+span{border-color:var(--accent);background:var(--accent-soft)}
.rdv-type input:checked+span::before{border:5px solid var(--accent);background:#000}
.rdv-type input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
html[data-theme="dark"]{.rdv-type>span{background:var(--surface-3)}.rdv-type input:checked+span{background:rgba(255,199,0,.12)}}

/* Retrait des textes « Suggestions : Adresses Québec » et « Choisissez un jour… » (10 oct.) : message vide = hors flux (reste annoncé quand il se remplit) ; espacement types → jours = 12 px (marge de .rdv-types) */
.rdv-msg:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rdv-msg:not(:empty){margin-bottom:12px}
.legal .attrib{flex-basis:100%;font-size:12px}

/* ==========================================================================
   t487 (10 oct. 2026) — Barres « Liquid Glass » comme l'app RENOX (soumissions-app/src/client/app.css, html[data-barres="liquid"]) :
   aucun fond de barre, seulement des pilules de verre givré (même verre, mêmes valeurs) ; le contenu défile dessous jusqu'en haut.
   Teinte de Safari 26 (WebKit LocalFrameView::fixedContainerEdges) : Safari teste le point milieu de chaque bord (4 px à l'intérieur).
   S'il tombe dans un élément fixed/sticky ≥ 90 % de la largeur, il fige SA couleur (ou un échantillon de pixels) et ne la recalcule pas
   sur un simple changement de couleur. Sinon, il prend le fond de la page, mis à jour à chaque rendu. Donc :
   - .top : fixed, 4 px sous la zone sûre, 12 px min. (ne touche jamais le bord du haut), transparent, clics seulement sur les pilules ;
   - .mbar : rangée fixed transparente, largeur calc(100% - 56px) (< 90 % : jamais candidate) ; 2 pilules de verre indépendantes (t487b) ;
   - .mnav fermé : pas fixed pleine largeur (absolute height:0) — sinon Safari fige le bas en --bg opaque (t487f, capture Mikaël 10 h 27) ;
   - aucun voile ni flou de bord (t487d) : Safari prend le fond html/body.
   ========================================================================== */
:root{
  --haut-top:max(6px,calc(env(safe-area-inset-top,0px) - 18px)); /* t487e : au niveau du bas des icônes de la status bar (l'app est à zone sûre + 10 px) ; 12 px au bureau */
  /* Header / CTA : débordent un peu hors de la colonne de contenu (Mikaël 10 oct.).
     Mobile : contenu --pad-x 20 → header 12 (--header-outset 8).
     ≥960 : contenu --pad-x 32 → header 12 (--header-outset 20) = +20 px de chaque côté. */
  --header-outset:8px;
  --header-inline:max(12px,calc(var(--pad-x) - var(--header-outset)));
  --pil-h:48px; --bas-gap:max(8px,calc(env(safe-area-inset-bottom,0px) - 10px)); /* t487f : plus près du bas, ≥8 px du bord (hors échantillon Safari) */ /* t487b : pilules du bas plus près du bas, au-dessus de la barre Safari flottante */
  --glass:rgba(255,255,255,.72);--glass-strong:rgba(255,255,255,.78);--glass-hi:rgba(255,255,255,.6);
  --glass-shadow:0 1px 3px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.05),0 20px 56px rgba(0,0,0,.06);--pill-shadow:0 0 1px rgba(0,0,0,.06),0 3px 12px rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.04); /* t487e : plus compacte (la 3e couche de 56 px dessinait un halo) */ /* t487b : 3 couches, grand flou, faible opacité */
  --bas-shadow:0 0 1px rgba(0,0,0,.06),0 -3px 14px rgba(0,0,0,.08),0 -10px 30px rgba(0,0,0,.05); /* t487e : déborde de 11 px max. SOUS la pilule (voir NOTES.md) */
  --glass-blur:blur(24px) saturate(180%)}
html[data-theme="dark"]{
  --glass:rgba(28,28,28,.72);--glass-strong:rgba(28,28,28,.78);--glass-hi:rgba(255,255,255,.12);
  --glass-shadow:0 1px 3px rgba(0,0,0,.12),0 8px 26px rgba(0,0,0,.18),0 22px 60px rgba(0,0,0,.22);--pill-shadow:0 0 1px rgba(0,0,0,.3),0 3px 12px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.18);
  --bas-shadow:0 0 1px rgba(0,0,0,.3),0 -3px 14px rgba(0,0,0,.3),0 -10px 30px rgba(0,0,0,.22)}
body{background-color:var(--bg)}
main{padding-top:calc(var(--haut-top) + var(--pil-h) + 14px)} /* t487e : le header ne prend plus de place dans le flux ; 14 px + interligne ≈ 18 px entre le bas des pilules et le 1er élément, sur toutes les pages */
main>:first-child{padding-top:0!important;margin-top:0!important}
main>:first-child>.wrap>:first-child,main>:first-child .hero-in>:first-child{margin-top:0}
/* t487d : aucun voile ni flou de bord (demande de Mikaël) : le contenu défile net jusqu'aux bords ; seul le verre des pilules floute. */
@media (min-width:960px){:root{--haut-top:12px;--header-outset:20px}}
.top{left:0;right:0;top:var(--haut-top);background:none;border:0;pointer-events:none}
.top .wrap{height:var(--pil-h);align-items:center;
  /* même max-width que .wrap contenu ; padding réduit = débordement de --header-outset de chaque côté */
  padding-left:calc(var(--header-inline) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--header-inline) + env(safe-area-inset-right,0px))}
.top.scrolled .wrap{height:var(--pil-h)}
.top .wrap>*{pointer-events:auto}
.top .logo,.top .burger,.top .nav>ul,.top .top-actions{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-hi),var(--pill-shadow);border-radius:999px}
.top .logo{padding:4px 14px;height:var(--pil-h);display:flex;align-items:center;box-sizing:border-box;overflow:visible}
.top .logo picture{display:flex;align-items:center;line-height:0;overflow:visible;border-radius:0!important}
.top .logo img{height:28px;width:auto;max-height:calc(var(--pil-h) - 8px);display:block;flex-shrink:0}
.top .burger{width:var(--pil-h);height:var(--pil-h);flex:none}
.top .burger:hover{background:var(--glass-strong)}
.top .nav>ul{padding:0 6px;height:var(--pil-h)}
.top .nav a,.top .nav button{padding:10px 12px}
.top .top-actions:has(.btn-cta){padding:0 5px 0 18px;height:var(--pil-h)}
@media (max-width:1099px){.top .top-actions{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}}
/* mnav top: géré dans .menu-open .mnav (t487f) */
/* t487b : deux pilules indépendantes (Appeler / Estimation gratuite), chacune son verre ; .mbar = simple rangée transparente, sans fond ni ::before.
   Largeur calc(100% - 56px) (< 90 %, jamais échantillonnée par Safari). Le padding-bottom porte l'écart du bas,
   donc la hauteur de .mbar (--ch-bas / --tm-bas) place toujours la bulle de chat et le bandeau de témoins au-dessus des pilules. Aucun overflow : l'ombre n'est jamais coupée. */
.mbar{left:0;right:0;margin:0 auto;width:calc(100% - 56px);max-width:420px;bottom:var(--bas-gap);padding:0;background:none;border:0;gap:10px;overflow:visible} /* t487f : bottom ~8 px, largeur < 90 % */
.mbar::before{content:none;display:none}
/* Tailles d'origine (avant 884bcd50) : largeur flexible, Estimation plus large, typo lisible */
.mbar .btn{flex:1 1 0;min-width:0;min-height:var(--pil-h);padding:8px 12px;font:600 15px/1.25 var(--font);white-space:nowrap;border-radius:999px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 var(--glass-hi),var(--bas-shadow)}
.mbar .btn svg{width:18px;height:18px;flex:none}
.mbar .btn:last-child{flex-grow:1.5}
@media (max-width:374px){.mbar .btn{font-size:14px;gap:8px;padding:8px 10px}}
.mbar .btn-o{background:var(--glass);border:.5px solid var(--glass-hi);color:var(--title)}
.mbar .btn-y{background:color-mix(in srgb,var(--accent) 92%,transparent);border:.5px solid rgba(255,255,255,.35);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 1px rgba(0,0,0,.06),0 -3px 14px rgba(255,199,0,.24),0 -10px 30px rgba(255,199,0,.12)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root{--glass:var(--surface);--glass-strong:var(--surface)}}
@media (prefers-reduced-transparency:reduce){:root{--glass:var(--surface);--glass-strong:var(--surface)}}
.hero .ctas:last-child{margin-bottom:0} /* t487e : plus de ligne « Estimation sur place gratuite · R.B.Q. » sous le bouton de l'accueil */


/* ---------- Thème clair/sombre (bouton header) ---------- */
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
.theme-img{display:inline-grid;line-height:0}
.theme-img>img{grid-area:1/1}
html[data-theme="dark"] .theme-img-light{display:none!important}
html[data-theme="light"] .theme-img-dark{display:none!important}
/* Interrupteur clair/sombre — modèle Mikaël : piste pilule, soleil+lune toujours visibles, pastille derrière l'actif */
.theme-toggle{flex:none;width:72px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;align-self:center}
.theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.theme-track{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  width:72px;height:40px;border-radius:999px;box-sizing:border-box;padding:3px;
  /* Même verre que les pilules du header — aucune teinte bleue */
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-hi),var(--pill-shadow);
  overflow:hidden}
html[data-theme="dark"] .theme-track{
  background:var(--glass);border-color:var(--glass-hi);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--pill-shadow)}
/* Pastille neutre site (clair : blanc/crème ; sombre : anthracite) + léger jaune discret */
.theme-thumb{
  position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,var(--accent) 12%);
  box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:0}
html[data-theme="dark"] .theme-thumb{
  transform:translateX(100%);
  background:color-mix(in srgb,var(--surface-3) 90%,var(--accent) 10%);
  box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.theme-ico{
  position:relative;z-index:1;display:grid;place-items:center;height:100%;
  color:var(--text-muted);transition:color .22s ease}
.theme-ico svg{width:18px;height:18px;display:block}
html[data-theme="light"] .theme-ico-sun{color:var(--title)}
html[data-theme="light"] .theme-ico-moon{color:var(--text-muted)}
html[data-theme="dark"] .theme-ico-sun{color:var(--text-muted)}
html[data-theme="dark"] .theme-ico-moon{color:var(--title)}
@media (prefers-reduced-motion:reduce){.theme-thumb{transition:none}}
@media (min-width:960px){
  .theme-toggle,.theme-track{width:68px;height:36px}
  .theme-ico svg{width:16px;height:16px}
}
@media (max-width:959px){.top-actions{gap:8px}}

/* Transition douce au bascule (pas au 1er paint) */
html.theme-anim,html.theme-anim body,html.theme-anim .top .logo,html.theme-anim .top .burger,html.theme-anim .top .nav>ul,html.theme-anim .top .top-actions,html.theme-anim .mbar .btn,html.theme-anim .card,html.theme-anim .tm,html.theme-anim .ch-bul,html.theme-anim .ch-pan{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease!important}
@media (prefers-reduced-motion:reduce){html.theme-anim,html.theme-anim body,html.theme-anim *{transition:none!important}}


/* Header bureau : CTA Estimation — jaune unifié d'origine (#FFC700), flèche + ombre + survol */
@media (min-width:1100px){
  .top .btn-cta{
    min-height:36px;height:36px;padding:0 16px 0 18px;gap:8px;
    font:600 14px/1 var(--font);letter-spacing:.01em;color:var(--on-accent,#000);
    border:0;border-radius:999px;background:var(--accent,#FFC700);
    box-shadow:0 2px 8px rgba(255,199,0,.35),0 6px 18px rgba(255,199,0,.18);
    transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out);
  }
  .top .btn-cta .cta-arr{width:15px;height:15px;flex:none}
  .top .btn-cta:hover{
    transform:translateY(-1px);background:var(--accent-hover,#E6B300);
    box-shadow:0 4px 12px rgba(255,199,0,.42),0 10px 24px rgba(255,199,0,.22);
  }
  .top .btn-cta:active{transform:translateY(0) scale(.97);background:var(--accent-active,#CC9F00)}
  .top .btn-cta:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){
    .top .btn-cta,.top .btn-cta:hover,.top .btn-cta:active{transition:none;transform:none}
  }
}

/* Mikaël 16 h 04 : menu ouvert, les pilules du bas restent fixes et visibles au-dessus du menu (même style, même place) ; la bulle (z 45) et le bandeau (z 44) aussi */
.menu-open .mbar{z-index:41}


/* ---------- t692 : bouton « Connexion » (header + menu mobile) et feuille des 3 espaces ---------- */
.top .login{display:inline-flex;align-items:center;justify-content:center;color:var(--title);text-decoration:none;white-space:nowrap;flex:none;border-radius:999px;transition:background var(--dur-fast)}
.top .login svg{width:18px;height:18px;flex:none}
.top .login:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* libellé pour lecteurs d'écran (et title au survol) : icône seule dans le header, discrète, aucun débordement */
.top .login-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:1100px){.top .login{width:32px;height:32px;margin:0 -6px 0 -8px}.top .login:hover{background:var(--accent-soft)}}
/* sous 1100 : pilule ronde en verre, comme le hamburger */
@media (max-width:1099px){
  .top .login{width:var(--pil-h);height:var(--pil-h);
    background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:.5px solid var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-hi),var(--pill-shadow)}
  .top .login:hover{background:var(--glass-strong)}
}
/* 1180–1279 : le numéro complet débordait déjà (47 px) ; téléphone en icône seule comme à 1100–1179 */
@media (min-width:1180px) and (max-width:1279px){.top .tel-num{display:none}.top .tel-ic{display:block}.top .tel{gap:0;padding:0 4px}}
@media (max-width:359px){.top .login{display:none}} /* très petits écrans : dans le menu seulement */
.mnav .mnav-login{display:inline-flex;align-items:center;gap:10px}
.mnav .mnav-login svg{width:20px;height:20px;flex:none}
/* Feuille : mêmes courbes, durées, fond et geste que la fiche produit (.pc-sheet) — bas d'écran sur mobile, fenêtre centrée sur ordinateur */
.cx{--cx-dur:450ms;--cx-fin:360ms;--cx-courbe:cubic-bezier(.32,.72,0,1);position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88vh;max-height:88dvh;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--surface);color:var(--text);box-shadow:0 -10px 40px rgba(0,0,0,.25);overflow:auto;overscroll-behavior:contain;
  transition:transform var(--cx-dur) var(--cx-courbe),opacity var(--cx-dur) var(--cx-courbe);will-change:transform}
.cx::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity var(--cx-dur) var(--cx-courbe)}
.cx.cx-off{transform:translateY(100%)}
.cx.cx-off::backdrop{opacity:0}
.cx.cx-ferme{transition-duration:var(--cx-fin)}.cx.cx-ferme::backdrop{transition-duration:var(--cx-fin)}
@media (prefers-reduced-motion:reduce){.cx,.cx::backdrop{transition:none!important}}
.cx::before{content:"";display:block;width:38px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--border-strong,#ccc)}
@media (min-width:700px){.cx{inset:0;margin:auto;width:min(440px,92vw);max-height:86vh;border-radius:24px}.cx::before{display:none}.cx.cx-off{transform:translateY(24px) scale(.97);opacity:0}}
html[data-theme="dark"] .cx{background:var(--surface-2)}
html[data-theme="dark"] .cx-l,html[data-theme="dark"] .cx-x{background:var(--surface-3,#2c2c2e)}
.cx-in{padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.cx-in{padding:20px 22px 22px}}
.cx-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-titre{margin:0;font:700 24px/1.2 var(--font);color:var(--title)}
.cx-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-2);color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.cx-x svg{width:16px;height:16px}
.cx-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cx-sous{margin:4px 0 16px;color:var(--text-muted);font-size:15px}
.cx-l{list-style:none;margin:0;padding:0;border-radius:16px;background:var(--bg);overflow:hidden}
.cx-l li+li{border-top:1px solid var(--border)}
.cx-l a{display:flex;align-items:center;gap:14px;padding:12px 16px;color:var(--title);text-decoration:none;min-height:60px;box-sizing:border-box}
@media (hover:hover){.cx-l a:hover{background:var(--accent-soft)}}
.cx-l a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:16px}
.cx-ic{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--on-accent,#000);display:grid;place-items:center;flex:none}
.cx-ic svg{width:20px;height:20px}
.cx-tx{flex:1;min-width:0}
.cx-tx b{display:block;font-weight:600;font-size:16px}
.cx-tx small{display:block;color:var(--text-muted);font-size:13px;line-height:1.35;margin-top:2px}
.cx-arr{width:18px;height:18px;color:var(--text-muted);flex:none}
.cx-note{display:flex;gap:8px;align-items:flex-start;margin:14px 2px 0;font-size:13px;line-height:1.4;color:var(--text-muted)}
.cx-note svg{width:16px;height:16px;flex:none;margin-top:1px}

/* t798 : mention RP discrète (pied de page) + avis de collecte sous les boutons d'envoi */
.legal-rp{flex:1 1 100%;font:500 12px/1.5 var(--font-legal);color:var(--text-muted)}
.legal-rp a{color:var(--text-muted)}
.legal .tm-gerer{font-size:inherit}
.form-avis{margin:10px 0 0;font:500 12px/1.45 var(--font-legal);color:var(--text-muted)}
.form-avis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* t819 : liste « Où avez-vous entendu parler de nous ? » (select natif accessible, chevron du site, clair/sombre) */
.field .sel{position:relative;display:block}
.field .sel select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer}
.field .sel::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);pointer-events:none}
.field select:hover{border-color:var(--border-strong)}
.field select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px rgba(255,199,0,.35)}
.field[hidden]{display:none}
@media (min-width:720px){.src-q:has([data-src-ref][hidden]){grid-template-columns:1fr}}

/* t825 : page avec le formulaire d'estimation = pas de pilules du bas ; pied sans l'espace des pilules (place pour la bulle de chat seulement) */
@media (max-width:899px){.foot.sans-mbar{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
/* Mikaël 12 oct. : consignes dans l'encadré, à côté de l'icône */
.files-drop{justify-content:flex-start;text-align:left}
.files-drop .files-aide{font-weight:400;font-size:13px;line-height:1.4;color:var(--text-muted)}

/* t1114 : pied — © / liens légaux sur une ligne / responsable RP / « Gérer les témoins » seul en bas ; espace sous le pied pour la bulle de chat et les pilules */
.legal{flex-direction:column;flex-wrap:nowrap;gap:8px}
.legal>span{display:block}
.legal-liens{line-height:1.7}
.legal-liens a{white-space:nowrap}
.legal-rp{flex:none}
.foot{padding-bottom:calc(176px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.foot{padding-bottom:104px}}
@media (max-width:899px){.foot.sans-mbar{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}}
/* t1848 : /contact — blocs selon la réponse « Demande d'estimation » / « Envoyer un message » */
.pour{display:contents}.pour[hidden]{display:none!important}
.demande-q{display:block}.demande-q .err{margin-top:8px}
.form-note{margin:-10px 0 0;font:400 13px/1.45 var(--font);color:var(--text-muted)}
/* t1848 : choix coché lisible en sombre (la règle sombre .choices span écrasait le fond jaune) */
html[data-theme="dark"] .choices input:checked+span{background:var(--accent);border-color:var(--accent);color:#000}
/* t1943 (17 oct. 2026, Mikaël) : plus de fond derrière la status bar iOS. Safari 26 teste le point milieu du bord du haut (zone sûre + 4 px) :
   s'il tombe dans un élément fixed pleine largeur (notre .top, transparent), il échantillonne la page une fois et peint une bande opaque figée (#121212 / crème)
   par-dessus la status bar. .top et .wrap ont maintenant une hauteur 0 : seules les pilules (qui débordent vers le bas) existent au toucher et au test,
   le milieu du bord est vide → Safari garde son bord de défilement natif (le contenu passe sous l'heure et la batterie, comme dans l'app).
   En plus, au téléphone, la boîte fixed .top fait 88 % de la largeur (< 90 % : jamais « candidate » pour Safari, même si le point tombe sur une pilule) ;
   la rangée .wrap déborde de 6vw de chaque côté → pilules exactement au même endroit qu'avant. */
.top{height:0}
.top .wrap,.top.scrolled .wrap{height:0;align-items:flex-start}
@media (max-width:959px){.top{left:6vw;right:6vw}.top .wrap{width:auto;margin-left:-6vw;margin-right:-6vw;max-width:none}}

/* t1983 : flèche SVG des liens (remplace « → », absent de Poppins) */
.link .arr{display:inline-block;width:1em;height:1em;margin-left:.35em;vertical-align:-.14em}

/* t2137 : « Dans le secteur à ce moment » : contour et halo jaunes (drapeau seulement) */
.rdv-day.rdv-sect:not([aria-pressed=true]),.rdv-h.rdv-sect:not([aria-pressed=true]),.chat .rdv-sect:not([aria-pressed=true]){border-color:#FFC700;box-shadow:0 0 10px rgba(255,199,0,.28),0 0 22px rgba(255,199,0,.12)}
.rdv-day.rdv-sect{position:relative}.rdv-day.rdv-sect::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#FFC700}
.rdv-h.rdv-sect,.rdv-sect{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rdv-sect small{font:600 10.5px/1.1 var(--font);color:#8a6a00}
.rdv-h[aria-pressed=true] small{color:inherit}
.rdv-sect-l{grid-column:1/-1;margin:6px 0 0;font-size:12.5px;color:var(--text-muted)}
@media (prefers-color-scheme:dark){.rdv-sect small{color:#FFC700}}

/* t2389 : Prénom + Nom côte à côte partout ; champs révélés (Commerce → entreprise, plex/immeuble → logements) */
.row2.row2-nom{grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:640px){.row2.row2-nom{gap:20px}}
.rvl{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 420ms cubic-bezier(.33,1,.68,1),opacity 300ms ease}
.rvl.on{grid-template-rows:1fr;opacity:1}
.rvl-in{min-height:0;overflow:hidden}
.rvl.on .rvl-in{animation:rvl-ov 0s 440ms forwards}
@keyframes rvl-ov{to{overflow:visible}}
fieldset .rvl .field{padding-top:16px}
.nom-bloc .rvl .field{padding-top:20px}
.rvl .field input[type=number]{-moz-appearance:textfield}

/* t2397 : section « Votre propriété » en liste déroulante */
.fs-prop .field-prop{margin:0}
.fs-prop .field-prop>span:first-child{font-size:13px;color:var(--text-muted);font-weight:500}
.field-prop select:invalid,.field-prop select option[value=""]{color:var(--text-muted)}
.field-prop select option{color:var(--text)}


/* t487f-mnav */body:not(.menu-open) .mnav{position:absolute!important;top:0!important;bottom:auto!important;left:0;right:0;height:0!important;margin:0;padding:0!important;border:0;background:transparent!important;overflow:hidden!important;visibility:hidden;opacity:0;pointer-events:none!important}
/* t487f-mbar */.mbar{bottom:var(--bas-gap,max(8px,calc(env(safe-area-inset-bottom,0px) - 10px)))!important;padding-bottom:0!important;background:none!important;width:calc(100% - 56px)!important;max-width:420px!important;margin-left:auto!important;margin-right:auto!important}
/* t2489b : iOS 26 Safari — barre d'adresse flottante par-dessus le bas de la page : pilules du bas (et bulle, via --bas-gap) au-dessus de la barre ;
   cachées (formulaire visible) = entièrement hors écran, sans liseré. */
/* t2489c : iOS 26 — barre Safari déployée : la zone sûre du bas vaut ~0, on reste à 20 px ; réduite (pilule) : zone sûre ~34 px, on passe juste au-dessus de la pilule. */
@media (max-width:899px) and (pointer:coarse) and (display-mode:browser){:root{--bas-gap:calc(env(safe-area-inset-bottom, 0px) + 6px)}.mbar{transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),bottom 220ms var(--ease-out)}}
.mbar.hide{transform:translateY(calc(100% + var(--bas-gap,8px) + 40px))!important;opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),visibility 0s linear var(--dur)}
/* t2490 : refus hors secteur */
.form-hors{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#E5252A 10%,transparent);color:var(--title);font:500 14px/1.4 var(--font)}
.form-hors[hidden]{display:none}
button[type=submit][disabled]{opacity:.5;cursor:not-allowed}
.field.hors input{border-color:#E5252A}
/* t2500 : formulaires (et diagnostic de /appel-de-service) visibles dès le chargement, sans attendre l’apparition au défilement */
.js .form.reveal{opacity:1!important;transform:none!important;transition:none;animation:dgIn var(--dur-reveal) var(--ease-out) both;animation-delay:200ms}
@media(prefers-reduced-motion:reduce){.js .form.reveal{animation:none}}
/* t2499b : « Non » à « installé par Groupe RENOX » → seul le refus reste ; « Oui » → les champs réapparaissent en douceur */
.form.inst-non [data-inst] ~ :not(.form-ok):not(.form-err){display:none!important}
.form.inst-oui [data-inst] ~ :not(.form-ok):not(.form-err){animation:instIn 420ms var(--ease-out) both}
@keyframes instIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form.inst-oui [data-inst] ~ *{animation:none}}

/* t2501 : Diagnostic en 6 points (maquette Picasso) — entrée animée dès le chargement, sans .reveal */
/* ===== DIAGNOSTIC ===== */
.dg{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:24px;margin:8px 0 28px}
.dg-warn{display:flex;gap:14px;align-items:flex-start;background:var(--accent);color:#000;border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 22px}
.dg-warn .ic{width:24px;height:24px;flex:none;margin-top:2px}
.dg-warn p{margin:0;font-size:15px;line-height:1.5}.dg-warn strong{display:block;font-size:17px;font-weight:700;margin-bottom:2px}
.dg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.dg-t{margin:0;font-size:20px;font-weight:700;color:var(--title)}.dg-sub{font-size:13px;color:var(--text-muted)}
.dg-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dg-card{position:relative;background:var(--surface-2);border-radius:var(--radius-sm);padding:16px 16px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:12px;row-gap:10px}
html[data-theme=dark] .dg-card{background:#232323}
.dg-num{width:32px;height:32px;border-radius:999px;background:var(--accent);color:#000;font-weight:700;font-size:15px;display:grid;place-items:center}
.dg-ic{align-self:center;justify-self:end;color:var(--title);opacity:.7}.dg-ic .ic{width:22px;height:22px;display:block}
.dg-card p{grid-column:1/-1;margin:0;font-size:14.5px;line-height:1.5}
.dg-frais{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted)}
@media(max-width:900px){.dg-l{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.dg{padding:16px;border-radius:16px}.dg-l{grid-template-columns:1fr}.dg-card{grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:start}.dg-card p{grid-column:2;grid-row:1;align-self:center}.dg-ic{grid-column:3;grid-row:1;align-self:start;margin-top:5px}.dg-head{flex-direction:column;gap:2px}}
/* entrée */
.dg-warn,.dg-card{animation:dgIn var(--dur-reveal) var(--ease-out) both;animation-delay:calc(120ms + var(--i,0)*60ms)}
.dg-warn{animation-delay:40ms}
@keyframes dgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dg-warn,.dg-card{animation:none}}
.svc-hero .hero-in{max-width:720px;margin-bottom:24px}.svc-form{max-width:760px}