/* =============================================================
   LA SOLUTION ISOLATION · LP ITE « form court »
   Surcouche de styles.css. Aucun token nouveau : on reprend ceux
   du design system LSI, on ajoute les composants propres au hero
   scindé et au questionnaire d'estimation.
   ============================================================= */

/* ---------- TYPOGRAPHIE ----------
   Fontes fournies par le client, converties en WOFF2 et sous-ensemblées
   au latin étendu. Auto-hébergées : plus aucun appel à Google Fonts.
   Asap est la typo du logo d'après les guidelines (Asap Regular & Bold),
   elle porte donc les titres. DM Sans, également fournie, prend le texte
   courant. `?police=asap` remet Asap partout, comme le site principal. */
@font-face{font-family:'Asap LSI';src:url('assets/fonts/asap-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Asap LSI';src:url('assets/fonts/asap-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Asap LSI';src:url('assets/fonts/asap-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Asap LSI';src:url('assets/fonts/asap-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Asap LSI';src:url('assets/fonts/asap-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans LSI';src:url('assets/fonts/dmsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans LSI';src:url('assets/fonts/dmsans-500.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans LSI';src:url('assets/fonts/dmsans-700.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --display:'Asap LSI',system-ui,-apple-system,sans-serif;
  --body:'DM Sans LSI','Asap LSI',system-ui,-apple-system,sans-serif;
  /* Vert des montants gagnes. Il repond au vert de la classe A de
     l'etiquette DPE sans en reprendre la saturation, qui serait illisible
     en texte. 4,9:1 sur le fond creme des cartes. */
  --gain:#1B7A4B;
}
body{font-family:var(--body)}
/* Variante « tout Asap », alignée sur lasolution-isolation.fr */
body.police-asap{--body:'Asap LSI',system-ui,-apple-system,sans-serif}

/* ---------- Surfaces navigateur : ce qu'on ne dessine pas porte aussi la DA ---------- */
::selection{background:var(--brand);color:#1F2733}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--brand-deep) #EDE7E2}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#EDE7E2}
*::-webkit-scrollbar-thumb{background:var(--brand-deep);border-radius:100px;border:3px solid #EDE7E2}
*::-webkit-scrollbar-thumb:hover{background:var(--brand-2)}

/* ---------- Hero scindé : argumentaire à gauche, estimateur à droite ---------- */
.heroF{padding:20px 20px 20px;background:#fff}

/* ---------- Barre de navigation : bloc service client + deux actions ----------
   styles.css donne 16px de padding à droite contre 22 à gauche : le bouton
   dépassait la grille de 6px. On rétablit la symétrie ici seulement, pour
   ne pas toucher au rendu de index.html.                                  */
.tb-card{padding-right:22px}

.tb-svc{display:inline-flex;align-items:center;gap:12px;padding:6px 4px 6px 6px;min-height:44px}
.tb-svc-txt{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.tb-svc-txt .lab{font-size:13px;color:var(--muted)}
.tb-svc-txt .num{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);letter-spacing:normal}
.tb-svc-ic{width:40px;height:40px;border-radius:50%;background:#1F2733;color:#FEFDFA;flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.tb-svc:hover .tb-svc-ic{background:var(--brand);color:#1F2733;transform:translateY(-1px)}

.tb-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;
  font-weight:800;font-size:14px;letter-spacing:.5px;text-transform:uppercase;
  padding:13px 22px;min-height:48px;white-space:nowrap;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.tb-btn.line{background:#fff;color:#1F2733;border-color:rgba(31,39,51,.28)}
.tb-btn.line:hover{border-color:#1F2733;background:#FBF7F5;transform:translateY(-1px)}
.tb-btn.solid{background:var(--brand);color:#1F2733;border-color:var(--brand)}
.tb-btn.solid:hover{background:var(--brand-2);border-color:var(--brand-2);transform:translateY(-1px)}

@media(max-width:1080px){.tb-btn.line{display:none}}
@media(max-width:820px){.tb-svc-txt{display:none}}
@media(max-width:620px){
  .tb-btn.solid{font-size:13px;padding:11px 16px;min-height:44px}
  .tb-svc{gap:0;padding:0}
  .tb-svc-ic{width:44px;height:44px}
}
/* Sous 390px, logo + pastille + bouton ne tiennent plus dans la carte de
   nav : le bouton sortait du cadre. La barre basse porte déjà les deux
   actions, on retire donc le CTA de l'en-tête plutôt que de le rogner. */
@media(max-width:389px){
  .tb-btn.solid{display:none}
  .tb-card{padding-left:16px;padding-right:16px}
  .tb-logo{height:34px}
  /* « MON ESTIMATION » passait sur deux lignes dans la barre basse. */
  .mcta a{font-size:13.5px;letter-spacing:.3px;padding:13px 10px}
  .mcta a.ghost{flex:0 0 44%}
}
.heroF-card{
  --bg:#141A23; --bg2:#19212C; --surface:#1F2733; --surface2:#28323F;
  --ink:#FFFFFF; --soft:#E4E8EE; --muted:#98A2B0; --faint:#8A94A5;
  --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.22);
  --card-shadow:none; --brand-text:#F8A923;
  --brand-tint:rgba(248,169,35,.13); --brand-line:rgba(248,169,35,.42);
  --ok:#7FCB9B; --gain:#6FC795;
  /* Rayon plus généreux que les cartes courantes : la carte hero est
     la plus grande surface de la page, 25px y paraissent coupés net. */
  position:relative;overflow:hidden;border-radius:36px;background:var(--surface);color:var(--ink)}
.heroF-bg{position:absolute;inset:0;z-index:0}
.heroF-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Voile allégé : la photo source est en plein soleil, il n'y a pas de
   raison de l'éteindre. Le dégradé ne reste dense que sous la colonne
   de texte, et lâche complètement à droite où la carte blanche gère
   son propre contraste. */
.heroF-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(17,22,30,.76) 0%,rgba(17,22,30,.62) 32%,rgba(20,26,35,.30) 54%,rgba(20,26,35,.08) 74%,rgba(20,26,35,.03) 100%)}
/* La carte occupe la hauteur d'écran moins son encart : plus de bande
   blanche sous la ligne de flottaison sur un portable. */
.heroF-card{min-height:clamp(560px,70vh,740px);display:flex;align-items:center}
/* width:100% est indispensable : .heroF-card est en flex, sans quoi le
   .wrap se dimensionne sur son contenu (610px) et son margin auto le
   recentre — le titre décrochait alors de 253px par rapport au logo. */
.heroF .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:clamp(56px,6vw,76px)}
/* La photo garde toute la largeur : le texte occupe la moitié gauche,
   le sujet de l'image vit à droite, et l'estimateur vient chevaucher
   le bas de la carte au lieu de la recouvrir. */
.heroF-grid{display:block;width:100%}
.heroF-top,.heroF-bot{max-width:610px}
.qz-float{position:relative;z-index:3;margin-top:-456px;display:grid;
  grid-template-columns:1fr minmax(390px,468px);gap:clamp(28px,4vw,56px);align-items:start}
/* Le bandeau légal occupe la colonne laissée libre par le formulaire.
   Il n'est plus une bande beige pleine largeur coincée entre deux
   sections : il devient une carte, alignée bas avec l'estimateur. */
.qz-float .frbar{align-self:end;transform:translateY(-120px);background:var(--surface2);
  border:1px solid var(--line);border-radius:18px}
.qz-float .frbar a{padding:20px 22px;gap:16px;max-width:none;font-size:14.5px;line-height:1.55}
.qz-float .frbar .fr-logo{height:46px}
.qz-float .qz{width:100%}
.heroF h1{font-size:clamp(32px,4.5vw,50px);font-weight:800;margin:0;text-wrap:balance;line-height:1.2}
/* Surlignage incliné, partagé par le titre du hero et celui du bloc
   « À propos ». Aplat de marque, texte navy, comme les boutons LSI. */
.heroF h1 .em,.about h2 .em,.head h2 .em,.stack-card h3 .em,.cmp-vrai .em{display:inline-block;background:var(--brand);color:#1F2733;
  padding:.04em .22em .1em;border-radius:.24em;
  transform:rotate(-1.4deg);transform-origin:center}
/* Dans les cartes le titre est plus petit : rayon et inclinaison suivent. */
.stack-card h3 .em{padding:.03em .18em .08em;border-radius:.22em;transform:rotate(-1.1deg)}
/* Dans la phrase sous l'avant/après, le corps est petit : même réglage que les cartes. */
.cmp-vrai .em{padding:.02em .2em .06em;border-radius:.22em;transform:rotate(-1.1deg)}
.heroF .sub{font-size:clamp(15.5px,1.7vw,18px);line-height:1.5;color:var(--soft);margin:20px 0 0;max-width:46ch}

.heroF-rating{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;color:var(--soft);flex-wrap:wrap}
.heroF-rating .g-mark{width:19px;height:19px;flex:none}
.heroF-rating .g{font-weight:800;font-family:var(--display);font-size:17px;color:var(--ink)}
.heroF-rating .stars{color:var(--brand);letter-spacing:1.5px}


/* Bénéfices du hero : coche simple, sans pastille, sous la description.
   Ils parlent du résultat des travaux — aucun recoupement avec la rangée
   de confiance, qui parle de la façon de travailler. */
.heroF-pts{list-style:none;display:flex;flex-direction:column;gap:11px;margin:22px 0 0}
.heroF-pts li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.45;color:var(--ink);font-weight:500}
.heroF-pts svg{color:var(--brand);flex:none;margin-top:1px}

.heroF-tel{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:13px 24px 13px 15px;
  border-radius:100px;background:rgba(255,255,255,.07);border:1px solid var(--line2);
  transition:background .2s,border-color .2s,transform .2s}
.heroF-tel:hover{background:rgba(255,255,255,.12);border-color:var(--brand-line);transform:translateY(-2px)}
.heroF-tel .ic{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#1F2733;display:flex;align-items:center;justify-content:center;flex:none}
.heroF-tel .lab{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--brand)}
.heroF-tel .num{display:block;font-family:var(--display);font-weight:800;font-size:19px;color:#fff;line-height:1.25}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Statut horaire : tenu sur une seule ligne, le texte est raccourci
   pour cette page dans estimation.js (section 7). */
.heroF-status{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:13.5px;color:var(--soft);line-height:1.45;white-space:nowrap}
.heroF-status .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:pulse 2.4s infinite}
.heroF-status.closed .pulse{background:var(--brand);animation:none}
/* display:flex l'emporte sur l'attribut hidden : il faut le dire. */
.heroF-status[hidden]{display:none}

/* ---------- Estimateur : carte claire posée sur le navy ---------- */
.qz{
  --surface:#FFFFFF; --bg:#F6F3EE; --bg2:#EFEAE4; --ink:#1F2733; --soft:#39434F;
  --muted:#5C6675; --faint:#656E7B; --line:rgba(31,39,51,.14); --line2:rgba(31,39,51,.26);
  --brand-text:#8F5D0A;
  background:#fff;color:var(--ink);border-radius:var(--r-card);padding:clamp(22px,2.4vw,28px);
  border:1px solid rgba(248,169,35,.6);
  box-shadow:0 0 0 4px rgba(248,169,35,.09),0 36px 80px -38px rgba(0,0,0,.8);position:relative}
.qz-h{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,22px);line-height:1.3;color:var(--ink)}
.qz-sub{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}

.qz-prog{display:flex;align-items:center;gap:12px;margin:20px 0 22px}
.qz-rail{flex:1;height:5px;border-radius:100px;background:var(--bg2);overflow:hidden}
/* Progression en scaleX plutôt qu'en width : pas de recalcul de layout
   à chaque étape, l'animation reste sur le compositeur. */
.qz-bar{height:100%;width:100%;border-radius:100px;background:var(--brand);
  transform:scaleX(.25);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.qz-count{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}

.qz-step{display:none}
.qz-step.on{display:block;animation:qzin .42s cubic-bezier(.2,.8,.2,1)}
@keyframes qzin{from{opacity:0;transform:translateX(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.qz-q{font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink);margin-bottom:14px;line-height:1.35}

.qz-opts{display:grid;gap:10px}
.qz-opts.two{grid-template-columns:1fr 1fr}
.qz-opt{background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:15px 14px;cursor:pointer;
  display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);font-size:15px;font-weight:600;
  font-family:var(--body);min-height:56px;width:100%;transition:border-color .18s,background .18s,transform .18s}
.qz-opts.two .qz-opt{flex-direction:column;justify-content:center;text-align:center;gap:9px;padding:20px 12px;min-height:128px}
.qz-opt:hover{border-color:var(--brand-line);background:var(--brand-tint);transform:translateY(-2px)}
.qz-opt.on{border-color:var(--brand-2);background:var(--brand-tint);box-shadow:0 0 0 3px rgba(248,169,35,.24)}
.qz-opt .ic{color:var(--brand-text);flex:none;display:flex}
.qz-opt small{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}

.qz-back{background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:12px 4px;min-height:44px;margin-top:4px;transition:color .18s}
.qz-back:hover{color:var(--brand-text)}
.qz-foot{margin-top:14px;font-size:12.5px;color:var(--faint);line-height:1.5;text-align:center}

/* Étape coordonnées : reprend .fld de styles.css, resserre les marges */
.qz .fld{margin-bottom:12px}
.qz .fld label{font-size:12.5px}
.qz .fld input,.qz .fld select{border-radius:12px}
.qz .consent{margin:14px 0 16px;font-size:12.5px}
.qz .cta{width:100%}

/* Signature humaine : une personne réelle, nommée, sans visage inventé.
   Les initiales reprennent le traitement des avatars d'avis. */
.qz-human{display:flex;align-items:flex-start;gap:13px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.qz-ini{width:42px;height:42px;border-radius:50%;flex:none;background:var(--brand-tint);
  border:1px solid var(--brand-line);color:var(--brand-text);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:14px}
.qz-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--brand);background:var(--surface2)}
.qz-human p{font-size:13.5px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column}
.qz-human b{color:var(--ink);font-family:var(--display);font-weight:800;font-size:15px;line-height:1.25}
.qz-role{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--brand-text);margin-top:2px}
.qz-mot{margin-top:7px;color:var(--muted);line-height:1.5}
.qz-reass{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px}
.qz-reass li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--soft)}
.qz-reass svg{color:var(--brand-text);flex:none}
.qz.done .qz-human,.qz.done .qz-reass{display:none}

/* Copropriété : sortie honnête, pas un cul-de-sac */
.qz-note{background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:18px 17px;margin-bottom:14px}
.qz-note p{font-size:14.2px;color:var(--soft);line-height:1.6}
.qz-note p+p{margin-top:9px}

/* Résultat */
.qz-res{display:none}
.qz.done .qz-res{display:block;animation:qzin .5s cubic-bezier(.2,.8,.2,1)}
.qz.done .qz-body,.qz.done .qz-prog{display:none}
.qz-res .tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-text);background:var(--brand-tint);border:1px solid var(--brand-line);
  border-radius:100px;padding:6px 13px}
.qz-price{font-family:var(--display);font-weight:800;font-size:clamp(29px,4vw,40px);line-height:1.1;color:var(--ink);margin:14px 0 2px;letter-spacing:normal}
.qz-price span{font-size:.5em;font-weight:700;color:var(--muted)}
.qz-recap{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px}
.qz-recap b{color:var(--ink);font-weight:700}
.qz-legal{font-size:12.5px;color:var(--faint);line-height:1.55;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.qz-res .cta{margin-top:18px}
.qz-tel{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;min-height:52px;
  border-radius:100px;border:1px solid var(--line2);font-weight:700;font-size:15px;color:var(--ink);transition:.2s}
.qz-tel:hover{border-color:var(--brand-2);background:var(--brand-tint);color:var(--brand-text)}

/* ---------- Comparateur avant / après ----------
   Le vrai geste de la page : on tire la poignée et la façade change
   sous les yeux, au lieu de comparer deux vignettes côte à côte. */
.cmp{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--card-shadow);
  background:var(--surface2);line-height:0;touch-action:pan-y}
.cmp-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cmp-clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.cmp-clip .cmp-img{height:100%}

.cmp-tag{position:absolute;top:15px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;line-height:1;transition:opacity .25s}
.cmp-tag.before{left:15px;background:rgba(20,26,35,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);color:#fff}
.cmp-tag.after{right:15px;background:var(--brand);border:1px solid var(--brand);color:#16202B}

.cmp-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(20,26,35,.22);pointer-events:none}
.cmp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;color:#1F2733;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(20,26,35,.35);transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s}
.cmp:hover .cmp-grip{transform:translate(-50%,-50%) scale(1.08)}
.cmp-range:active~.cmp-bar .cmp-grip,.cmp-range:focus-visible~.cmp-bar .cmp-grip{background:var(--brand);transform:translate(-50%,-50%) scale(1.12)}

.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:none}
.cmp-range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:100%;cursor:ew-resize}
.cmp-range::-moz-range-thumb{width:60px;height:100%;border:0;cursor:ew-resize;background:none}
.cmp-range:focus-visible{outline:none}
.cmp:has(.cmp-range:focus-visible){outline:2px solid var(--brand-2);outline-offset:3px}

.cmp-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:13.5px;color:var(--faint)}
.cmp-hint svg{color:var(--brand-text)}

/* La phrase qui répond à la question que se pose le visiteur devant un
   avant/après trop beau. Elle porte plus que la légende technique
   au-dessus, moins qu'un titre de section. */
.cmp-vrai{max-width:46ch;margin:24px auto 0;text-align:center;
  font-size:clamp(17.5px,1.9vw,21px);line-height:1.5;font-weight:700;color:var(--ink)}

/* Le tableau budget déborde forcément à 375px : un dégradé sur le bord
   droit dit qu'il reste quelque chose à voir, la barre seule ne suffit pas. */
.tbl-wrap{position:relative}
@media(max-width:620px){
  .tbl-wrap::after{content:"";position:absolute;top:1px;right:0;bottom:12px;width:40px;pointer-events:none;
    border-radius:0 var(--r-card) var(--r-card) 0;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--surface))}
  /* Trois onglets sur une ligne plutôt que deux : à 375px il manquait
     une dizaine de pixels. */
  .ap-tabs{gap:6px}
  .ap-tab{padding:10px 15px;font-size:14px}
  .cmp-grip{width:44px;height:44px}
  .cmp-tag{font-size:11.5px;padding:6px 11px;top:11px}
  .cmp-tag.before{left:11px}.cmp-tag.after{right:11px}
}


.trustrow .tr-ic{width:80px;height:80px;background:rgba(255,255,255,.55);border:1.5px solid var(--brand);
  color:var(--brand-text);margin-bottom:16px}
.trustrow .tr-ic svg{width:32px;height:32px}
.trustrow .tr-c b{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);line-height:1.25;max-width:16ch}
.trustrow .tr-c>span:last-child{font-size:14.5px;color:var(--soft);line-height:1.6;max-width:26ch;margin-top:6px}
.trustrow .tr-grid{gap:34px 28px}
@media(max-width:460px){
  .trustrow .tr-ic{width:64px;height:64px;margin-bottom:12px}
  .trustrow .tr-ic svg{width:26px;height:26px}
  .trustrow .tr-c b{font-size:16px}
  .trustrow .tr-c>span:last-child{font-size:13.5px}
}

/* ---------- Rangée de confiance : sans titre ----------
   Le titre répétait ce que les quatre colonnes disent déjà. Le bloc est
   posé entre « Pourquoi isoler par l'extérieur » et « À propos » : les
   engagements viennent après les bénéfices, juste avant l'entreprise. */
/* Engagements posés sur un bloc pastel encarté, coins arrondis comme la
   carte hero. La section « À propos » qui suit reste sur fond blanc, la
   séparation se voit sans qu'on ait besoin d'un trait. */
.trustrow{margin:clamp(14px,2vw,24px) 20px 0;padding:clamp(38px,4.5vw,58px) 0 clamp(34px,4vw,52px);
  background:linear-gradient(180deg,#FDF4E3,#FBF7F2);border-radius:36px}
.about-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(20px,3vw,40px)}
/* Le bloc « À propos » vit seul, avant les engagements. Les avant/après
   forment leur propre section, titrée comme sur le site. */
.real-sec{padding-top:clamp(40px,5vw,72px)}
.real-sec .cmprail{margin-top:0}
@media(max-width:620px){.trustrow{margin:12px 12px 0;border-radius:24px}}
@media(max-width:460px){
  /* Deux colonnes plutôt qu'une : empilés, les quatre engagements
     mangeaient un écran entier de haut sur un téléphone. */
  .trustrow .tr-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .trustrow .tr-ic{width:52px;height:52px;margin-bottom:2px}
  .trustrow .tr-ic svg{width:22px;height:22px}
  .trustrow .tr-c b{font-size:15.5px;line-height:1.3}
  .trustrow .tr-c>span:last-child{font-size:13px;max-width:22ch}
}

/* ---------- Bloc « À propos » ----------
   Titre à gauche, texte à droite : la colonne de titre sert de respiration
   et supprime le grand vide qui suivait le hero. */
.about{display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.about-tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:#FEFDFA;background:var(--ink);border-radius:100px;padding:6px 14px;margin-bottom:16px}
.about h2{font-size:clamp(30px,4.4vw,46px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:0}
.about p{font-size:clamp(14.5px,1.35vw,16px);line-height:1.7;color:var(--muted);margin:0;padding-top:8px;max-width:56ch}
.about p b{color:var(--ink);font-weight:700}
@media(max-width:860px){.about{grid-template-columns:1fr;gap:20px}}

/* ---------- Carrousel de chantiers ----------
   Défilement continu, pleine largeur, masqué sur les bords. Chaque
   vignette reste un comparateur : la piste se fige au survol, au focus
   clavier et au doigt pour ne pas lutter contre le geste de l'utilisateur. */
.cmprail{position:relative;overflow:hidden;margin-top:clamp(34px,4.5vw,56px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cmprail-track{display:flex;gap:16px;width:max-content;padding:4px 0;
  animation:cmpdefile 52s linear infinite}
.cmprail:hover .cmprail-track,
.cmprail:focus-within .cmprail-track,
.cmprail.fige .cmprail-track{animation-play-state:paused}
.cmprail-item{flex:none;width:clamp(280px,32vw,440px)}
.cmprail .cmp{border-radius:20px}
@keyframes cmpdefile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}

@media(prefers-reduced-motion:reduce){
  .cmprail{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .cmprail-track{animation:none}
  .cmprail-item{scroll-snap-align:center}
}

/* ---------- Mosaïque de chantiers : la preuve par le nombre ---------- */
/* ---------- Cartes qui s'empilent au scroll ----------
   Chaque carte est `sticky` avec un `top` décalé de 16px par rang : la
   suivante glisse par-dessus et laisse dépasser le bord de la précédente.
   Les cartes sont opaques, sinon l'empilement se voit par transparence. */
.stack-sec{padding-bottom:clamp(60px,8vw,110px)}
.stack-h{font-size:clamp(28px,4.2vw,52px);line-height:1.15;letter-spacing:-.01em;
  max-width:27ch;margin:0 0 clamp(34px,4.5vw,60px)}
.rev-mot{color:var(--line2);transition:color .45s ease}
.rev-mot.vu{color:var(--ink)}

.stack-list{display:flex;flex-direction:column;gap:22px}
.stack-card{position:sticky;top:calc(132px + var(--i) * 16px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.5vw,48px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(26px,3vw,40px);box-shadow:var(--card-shadow);overflow:hidden}
.stack-num{display:inline-block;font-family:var(--display);font-weight:800;font-size:14px;
  letter-spacing:.06em;color:var(--brand-text);background:var(--brand-tint);
  border:1px solid var(--brand-line);border-radius:100px;padding:5px 13px;margin-bottom:16px}
.stack-card h3{font-size:clamp(21px,2.5vw,29px);line-height:1.22;margin-bottom:14px}
.stack-txt>p{font-size:15.5px;line-height:1.65;color:var(--muted);max-width:46ch}
.stack-pts{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.stack-pts li{display:flex;align-items:flex-start;gap:10px;font-size:14.8px;line-height:1.5;color:var(--soft)}
.stack-pts svg{color:var(--brand-text);flex:none;margin-top:3px}

@media(max-width:860px){
  .stack-card{grid-template-columns:1fr;gap:22px;position:static}
  .stack-media{order:-1}
  .stack-list{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .stack-card{position:static}
  .rev-mot{color:var(--ink);transition:none}
}

/* ---------- Déroulé de chantier ----------
   Accordéon numéroté à gauche, photo qui suit l'étape ouverte à droite.
   Fond crème plutôt que navy : la bande sombre coupait la page en deux,
   et la section se lit mieux dans le même registre clair que le reste. */
.deroule-sec{background:var(--bg2)}
.deroule-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:start}
.etps{display:flex;flex-direction:column;gap:12px}

.etp{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--card-shadow);transition:border-color .25s}
.etp[open]{border-color:var(--brand-line)}
.etp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:20px 22px;min-height:44px}
.etp summary::-webkit-details-marker{display:none}
.etp-n{font-family:var(--display);font-weight:800;font-size:20px;color:var(--brand-text);
  width:30px;flex:none;line-height:1}
.etp-t{font-family:var(--display);font-weight:700;font-size:18.5px;color:var(--ink);line-height:1.25}
.etp-j{margin-left:auto;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.etp-chev{flex:none;color:var(--muted);display:flex;transition:transform .3s}
.etp[open] .etp-chev{transform:rotate(180deg);color:var(--brand-text)}

/* Liste à puces reliées par un filet, comme le modèle. */
.etp-pts{list-style:none;margin:0 22px 24px 44px;padding-left:22px;position:relative}
.etp-pts::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1.5px;background:var(--brand-line)}
.etp-pts li{position:relative;padding:7px 0;font-size:14.8px;line-height:1.45;color:var(--soft);font-weight:500}
.etp-pts li::before{content:"";position:absolute;left:-22px;top:14px;width:9px;height:9px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface)}

/* Photo en forme d'arche, elle change avec l'étape ouverte. */
.deroule-photo{margin:0;overflow:hidden;background:var(--surface2);
  border-radius:clamp(60px,13vw,170px) 26px 26px clamp(60px,13vw,170px)}
.deroule-photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block;
  transition:opacity .35s ease}
.deroule-photo.change img{opacity:0}

@media(max-width:900px){
  .deroule-grid{grid-template-columns:1fr;gap:24px}
  .deroule-photo{order:-1;border-radius:28px}
  .deroule-photo img{aspect-ratio:16/10}
}
@media(max-width:620px){
  .etp summary{padding:17px 18px;gap:11px}
  .etp-t{font-size:16.5px}
  .etp-j{display:none}
  .etp-pts{margin:0 18px 20px 40px}
}
@media(prefers-reduced-motion:reduce){.deroule-photo img{transition:none}}

/* ---------- Avis : une seule ligne qui défile ---------- */
/* Pleine largeur (la piste est sortie du .wrap) et dégradé resserré :
   on voit plus d'avis d'un coup sans hack de viewport units. */
.revrail{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.revrail-track{display:flex;gap:18px;width:max-content;padding:6px 0;
  animation:revdefile 72s linear infinite}
/* Seconde rangée décalée d'une demi-carte et lancée en sens inverse :
   la densité du modèle sans inventer d'avis qui n'existent pas. */
.revrail-track.sens2{margin-top:18px;margin-left:-210px;animation-direction:reverse;animation-duration:86s}
.revrail:hover .revrail-track,.revrail:focus-within .revrail-track{animation-play-state:paused}
.revrail .rev{width:420px;flex:none;margin:0;padding:26px 26px 24px}
/* Photo de profil Google, servie depuis leur CDN. build-avis.py l'insere
   a la place des initiales quand l'auteur en a une. */
.rev-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--surface2)}
.revrail .rev q{font-size:15.5px;line-height:1.6}
@keyframes revdefile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}

/* Transition douce vers la section suivante */
.section.avis{position:relative}
.section.avis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,247,245,0) 0%,var(--bg) 100%)}

@media(max-width:860px){
  /* Une seule rangée sur écran étroit : deux pistes superposées
     donnaient un mur d'avis illisible au pouce. */
  .revrail-track.sens2{display:none}
}
@media(max-width:620px){
  .revrail .rev{width:300px;padding:22px 20px}
  .revrail-track{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  /* Sans animation, la piste redevient un simple défilement manuel. */
  .revrail{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .revrail-track{animation:none}
  .revrail .rev{scroll-snap-align:center}
}

/* ---------- Tableau budget : la ligne qui correspond au choix ---------- */
table.budget tbody tr{transition:background .4s}
table.budget tbody tr.match{background:var(--brand-tint)}
table.budget tbody tr.match td:first-child{color:var(--brand-text)}
table.budget tbody tr.match td.price{font-size:18px}
.bud-echo{display:none;align-items:center;gap:10px;margin-top:18px;font-size:14.5px;color:var(--soft)}
.bud-echo.on{display:flex;animation:qzin .5s cubic-bezier(.2,.8,.2,1)}
.bud-echo svg{flex:none;color:var(--brand-text)}

/* ---------- Reveal échelonné à l'intérieur d'un groupe ---------- */
.tr-grid .rv.in,.revs .rv.in,.faq .rv.in,.tl .rv.in{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- Bandeau France Rénov' : emplacement du logo officiel ----------
   Prêt à recevoir le SVG du kit ANAH. Remplacer le <span class="fr-ic">
   par <img class="fr-logo" src="assets/logo-france-renov.svg" ...> et
   rien d'autre ne bouge. Le logo réservé à l'État (bloc-marque
   République Française) n'a pas sa place ici : il laisserait entendre
   une caution publique de l'entreprise.                                */
.frbar .fr-logo{flex:none;height:42px;width:auto;display:block}
/* Sur le footer navy, on pose le logo sur une réserve blanche plutôt
   que de le recolorer : la marque garde ses couleurs officielles. */
.ftr .frbar .fr-logo{height:34px;background:#fff;border-radius:8px;padding:5px 8px;box-sizing:content-box}
@media(max-width:620px){
  .frbar .fr-logo{height:34px}
  .ftr .frbar .fr-logo{height:30px}
}

/* ---------- Avis Google : marque officielle en attribution ---------- */
.g-mark{flex:none;display:block}
.rev-badge .g-mark{width:22px;height:22px}
.rev{position:relative}
.rev .rev-g{position:absolute;top:22px;right:22px;width:19px;height:19px;opacity:.9}
.rev q{padding-right:26px}
.rev .ini{background:var(--surface2);border:1px solid var(--line);color:var(--soft);font-weight:700}
.rev-src{font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:6px;margin-top:2px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  /* Une seule colonne : l'estimateur passe devant les bénéfices, il
     doit rester le premier geste possible sur un écran étroit. */
  .qz-float{display:flex;flex-direction:column;gap:26px;margin-top:-90px}
  .qz-float .qz{order:1}
  .qz-float .frbar{order:2;align-self:auto;transform:none}
  .heroF-top,.heroF-bot{max-width:none}
  .heroF-card{min-height:0}
  .heroF .wrap{padding-top:132px;padding-bottom:80px}
  /* Le sujet de la photo est à droite : en portrait on recadre dessus
     et le voile redevient vertical pour garder le texte lisible. */
  .heroF-bg img{object-position:72% 45%}
  .heroF-bg::after{background:linear-gradient(180deg,rgba(17,22,30,.88) 0%,rgba(17,22,30,.72) 42%,rgba(20,26,35,.88) 100%)}
  .heroF .sub{max-width:60ch}
  .heroF-status{white-space:normal}
  .relance{grid-template-columns:1fr}
}
@media(max-width:620px){
  .heroF{padding:12px 12px 12px}
  .heroF-card{border-radius:20px}
  .heroF .wrap{padding-top:114px;padding-bottom:52px}
  .heroF h1{font-size:clamp(30px,7.4vw,38px);margin-top:0}
  /* On resserre l'accroche pour que la première question du
     questionnaire arrive au plus près du premier écran. */
  .heroF-rating{font-size:13.5px;margin-top:18px}
  .heroF-pts{gap:9px;margin-top:18px}
  .heroF-pts li{font-size:14.5px}
  .heroF .sub{font-size:15.5px;margin-top:16px}
  .qz-float{margin-top:-104px;gap:22px}
  .qz{padding:20px 17px;border-radius:20px}
  /* « Ne pas attendre, appeler » passait sur deux lignes. */
  .qz-res .cta{font-size:14px;letter-spacing:.3px;padding:15px 16px}
  .qz-opts.two .qz-opt{min-height:114px;padding:16px 10px}
  .heroF-tel{width:100%}
  /* Le logo et le texte ne tiennent pas côte à côte à 375px : empilés,
     le message garde toute la largeur au lieu de se casser en huit lignes. */
  .qz-float .frbar a{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .qz-float .frbar .fr-logo{height:34px}
}
@media(prefers-reduced-motion:reduce){
  .qz-step.on,.qz.done .qz-res{animation:none}
  .qz-bar{transition:none}
  .heroF-status .pulse{animation:none}
}


/* ---------- FAQ en deux colonnes ----------
   Colonne d'intitulé à gauche, accordéon en cartes à droite. Le « + »
   pivote de 45° à l'ouverture, il devient donc une croix sans second
   picto à charger. */
.faq-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.faq-aside h2{font-size:clamp(28px,3.8vw,44px);line-height:1.14;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.faq-aside p{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.faq-cta{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:8px 8px 8px 22px;
  background:var(--bg2);border:1px solid var(--line);border-radius:100px;min-height:56px;
  font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink);
  transition:background .2s,border-color .2s,transform .2s}
.faq-cta:hover{background:var(--brand-tint);border-color:var(--brand-line);transform:translateY(-2px)}
.faq-cta .ic{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#FEFDFA;flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.faq-cta:hover .ic{background:var(--brand);color:#1F2733}

.faq-sec .faq{max-width:none;margin:0;display:flex;flex-direction:column;gap:12px}
.faq-sec .q{border-bottom:none;background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  transition:background .25s,border-color .25s}
.faq-sec .q[open]{background:var(--surface);border-color:var(--line2)}
.faq-sec .q summary{padding:20px 22px;font-size:17px;font-weight:700;gap:20px}
.faq-sec .q .a{padding:0 22px 22px;max-width:62ch}
.faq-sec .q .pm{font-size:22px;width:26px;text-align:center;flex:none}

@media(max-width:860px){
  .faq-grid{grid-template-columns:1fr;gap:24px}
  .faq-aside p{max-width:none}
}
@media(max-width:620px){
  .faq-sec .q summary{padding:17px 18px;font-size:16px;gap:14px}
  .faq-sec .q .a{padding:0 18px 18px}
}


/* ---------- Visuels de données dans les cartes ----------
   Deux cartes portaient une photo de chantier qui ne disait rien de leur
   titre. Elles montrent maintenant ce dont elles parlent.
   Le mouvement est piloté en JS (section 13 d'estimation.js) : une seule
   classe allumée à la fois, celle que le curseur désigne, et la séquence
   tourne en boucle. Les animations CSS ne servent qu'à l'entrée.        */
.viz{background:var(--bg2);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 22px;display:flex;flex-direction:column}
.viz.rv{transform:none}
.viz-t{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px}
.viz-note{font-size:12.8px;line-height:1.55;color:var(--faint);margin-top:16px}
.viz-gain{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;
  opacity:0;transition:opacity .5s ease}
.viz-gain.on{opacity:1}
.viz-chiffre,.viz-eco{display:flex;flex-direction:column;gap:3px;transition:opacity .4s ease}
.viz-eco.vide{opacity:.3}
.viz-gain b{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,40px);
  line-height:1.05;color:var(--ink);letter-spacing:normal;
  font-variant-numeric:tabular-nums;transition:color .4s ease}
.viz-eco b{color:var(--gain)}
.viz-gain i{font-style:normal;font-size:11.5px;line-height:1.3;color:var(--muted)}
.viz-note b{color:var(--soft);font-weight:700}
.viz-note em{font-style:normal;color:var(--brand-text);font-weight:600}

/* --- Échelle DPE, couleurs de l'étiquette énergie officielle (DPE 2021) ---
   A #009C6D  B #52B153  C #78BD76  D #F4E70F  E #F0B40F  F #EB8235  G #D7221F.
   Lettre en navy très sombre sur A à F, en blanc sur G : c'est ce qui passe
   4,5:1 sur chaque bande. Les couleurs sont portées par le HTML (--c, --t).
   --pas = hauteur de bande + gouttière, le curseur se cale dessus. */
.dpe-corps{position:relative;padding-right:58px;--pas:32px;--bande:26px}
.dpe-echelle{list-style:none;display:flex;flex-direction:column;gap:6px}
.dpe-echelle li{position:relative;height:var(--bande);border-radius:5px 9px 9px 5px;
  background:var(--c);width:var(--w);transform-origin:left center;transform:scaleX(.06);
  opacity:0;display:flex;align-items:center;transition:opacity 1.1s ease}
.viz.in .dpe-echelle li{animation:vizIn .45s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i) * 40ms);opacity:.32}
.viz.in .dpe-echelle li.actif{opacity:1}
@keyframes vizIn{to{transform:scaleX(1)}}
.dpe-l{font-family:var(--display);font-weight:800;font-size:13px;color:var(--t,#10151C);margin-left:11px}

.dpe-curseur{position:absolute;right:2px;top:0;width:44px;height:var(--bande);
  display:flex;align-items:center;justify-content:center;opacity:0;
  background:#fff;border:2px solid var(--ink);border-radius:9px;
  box-shadow:0 4px 14px rgba(20,26,35,.2);
  transform:translateY(calc(var(--pas) * var(--pos, 4)));
  transition:transform 1.4s cubic-bezier(.65,0,.35,1),opacity .4s ease}
.viz.in .dpe-curseur{opacity:1;transition-delay:0s,.3s}
.dpe-curseur::after{content:"";position:absolute;left:-9px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-right-color:var(--ink)}
.dpe-curseur-l{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);line-height:1}

/* --- Valeur verte, barres par classe --- */
.vv-graph{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  align-items:end;height:190px;margin-top:4px}
.vv-graph li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;transition:opacity 1.1s ease;opacity:.32}
.vv-graph li.actif{opacity:1}
.vv-b{width:100%;height:var(--h);border-radius:8px 8px 4px 4px;
  background:var(--c);
  transform:scaleY(0);transform-origin:bottom center}
.viz.in .vv-b{animation:vvIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 40ms)}
@keyframes vvIn{to{transform:scaleY(1)}}
.vv-l{font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--muted);margin-top:9px;
  transition:color 1.1s ease}
.vv-graph li.actif .vv-l{color:var(--ink)}

@media(max-width:620px){
  .dpe-corps{--pas:28px;--bande:22px;padding-right:50px}
  .dpe-curseur{width:38px}
  .vv-graph{height:150px;gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .dpe-echelle li,.vv-b{transform:none;animation:none}
  .viz.in .dpe-echelle li,.vv-graph li{opacity:1}
  .dpe-curseur{transition:none;opacity:1}
  .viz-gain{opacity:1}
}


/* ---------- Confort 4 saisons : deux cartes en opposition ----------
   Reprise de la section du site. Les deux cartes portent le meme poids
   visuel, une par saison : le navy pour l'hiver, l'ocre de marque pour
   l'ete. Elles ne se distinguent que par la couleur, jamais par la taille,
   pour que le lecteur les lise comme deux faces d'un meme benefice. */
/* La section precedente pose deja son propre retrait bas. Cumuler les deux
   creusait un blanc de 150px avant le sur-titre. */
.saisons-sec{padding-top:0}
.saisons{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px)}
.sais{display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,24px);
  border-radius:var(--r-card);padding:clamp(24px,2.6vw,34px)}
.sais-ic{flex:none;display:flex}
.sais h3{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.1vw,23px);
  line-height:1.2;margin:0 0 10px}
.sais p{margin:0;font-size:15.5px;line-height:1.6}

/* Le rebasage des jetons vaut mieux qu'une couleur en dur : les
   composants poses dans la carte heritent du bon contraste. */
.sais-hiver{--ink:#FFFFFF;--soft:#D9DFE7;
  background:var(--navy);color:var(--ink)}
.sais-hiver h3{color:var(--ink)}
.sais-hiver p{color:var(--soft)}
.sais-hiver .sais-ic{color:#FFFFFF}

.sais-ete{background:var(--brand);color:#1F2733}
.sais-ete h3,.sais-ete p{color:#1F2733}
.sais-ete .sais-ic{color:#FFFFFF}

@media (max-width:860px){
  .saisons{grid-template-columns:1fr}
}


/* ---------- Footer, sur le modele du site ----------
   Carte ocre qui deborde par le haut sur le navy, coordonnees a sa droite,
   copyright et reseaux, bandeau ocre pleine largeur. Les colonnes de liens
   du site ne sont pas reprises : sur une landing page ce sont des sorties.
   La carte a remplace la section « Deux minutes, pas plus ». */
.ftr{padding:0 0 0}
.ftr-haut{display:grid;grid-template-columns:minmax(0,440px) 1fr;
  gap:clamp(28px,4vw,64px);align-items:start}

/* Le debord vers le haut : la carte mord sur la section claire qui precede,
   c'est ce qui articule les deux au lieu de les empiler. */
.ftr-cta{--depasse:clamp(0px,4.4vw,64px);
  margin-top:calc(-1 * var(--depasse));position:relative;z-index:2;
  background:var(--brand);color:#1F2733;border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,34px);
  box-shadow:0 30px 70px -40px rgba(31,39,51,.7)}
.ftr-logo{height:44px;width:auto;display:block;margin-bottom:18px}
.ftr-cta h2{font-family:var(--display);font-weight:800;color:#1F2733;
  font-size:clamp(22px,2.4vw,27px);line-height:1.2;margin:0}
.ftr-cta>p{font-size:14.5px;line-height:1.5;color:#2E3846;margin:6px 0 18px;max-width:40ch}

/* Formulaire du pied, comme sur le site : champs en pilule sur l'ocre,
   deux par ligne, puis le type de projet, le consentement et le bouton. */
.ftr-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ftr-form .plein{grid-column:1 / -1}
.ftr-form input[type=text],.ftr-form input[type=tel],.ftr-form select{
  width:100%;min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:100px;
  background:#FFFBF4;color:#1F2733;font-family:var(--body);font-size:15px;
  transition:border-color .2s,box-shadow .2s}
.ftr-form input::placeholder{color:#5C6675}
.ftr-form select{appearance:none;color:#5C6675;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231F2733' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.ftr-form select:valid{color:#1F2733}
.ftr-form input:focus,.ftr-form select:focus{outline:none;border-color:#1F2733;box-shadow:0 0 0 3px rgba(31,39,51,.18)}
.ftr-form [aria-invalid=true]{border-color:#9B2B14}
.ftr-ok{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:13.5px;color:#1F2733;cursor:pointer}
.ftr-ok input{width:18px;height:18px;flex:none;accent-color:#1F2733}
.ftr-ok a{color:#1F2733;text-decoration:underline;text-underline-offset:3px}
.ftr-err{margin:0;font-size:13px;font-weight:600;color:#7A1F0C}
/* Le bouton plein ne peut pas rester ocre sur un fond ocre. */
.ftr-cta .cta{background:#1F2733;color:#FEFDFA;border:1px solid #1F2733;
  box-shadow:none;width:100%;margin-top:4px;padding-left:16px;padding-right:16px;
  font-size:14.5px;letter-spacing:.2px;white-space:nowrap}
.ftr-cta .cta:hover{background:#2B3543}
.ftr-cta .cta:disabled{opacity:.7;cursor:progress}
.ftr-merci{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;
  background:#FFFBF4;color:#1F2733;font-size:14.5px;line-height:1.5}
.ftr-merci b{font-family:var(--display);font-size:18px}
.ftr-micro{display:block;margin-top:14px;font-size:12.5px;font-weight:600;
  color:#43505F;text-align:center}

/* Colonne de droite : ce qu'il faut pour joindre l'entreprise, rien de plus. */
.ftr-infos{display:grid;grid-template-columns:1fr 1fr;
  gap:24px;padding-top:clamp(30px,3.6vw,48px)}
/* Deux colonnes, comme le pied du site : Notre entreprise d'un côté,
   Mentions légales puis Adresse empilées de l'autre. Liens en clair. */
.ftr-col b{display:block;font-family:var(--display);font-weight:700;
  font-size:18px;color:#FFFFFF;margin-bottom:12px}
.ftr-col .ftr-sous{margin-top:26px}
.ftr-col ul{list-style:none}
.ftr-col a{display:flex;align-items:center;min-height:27px;
  font-size:14px;line-height:1.3;color:#E4E8EE;word-break:break-word}
.ftr-col a:hover{color:var(--brand)}
.ftr-col address{font-style:normal;font-size:14px;line-height:1.95;color:#E4E8EE}

.ftr .frbar{border:1px solid var(--line);border-radius:12px;margin-top:clamp(28px,3.4vw,44px)}
.ftr .frbar a{padding:13px 18px}

.ftr-bas{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:26px}
.ftr-cr{font-family:var(--display);font-weight:700;font-size:14px;color:#FFFFFF}
.ftr-soc{list-style:none;display:flex;gap:8px}
.ftr-soc a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--soft);border:1px solid var(--line);
  transition:background .2s,color .2s,border-color .2s}
.ftr-soc a:hover{background:var(--brand);border-color:var(--brand);color:#1F2733}

/* Les mentions obligatoires restent entieres, au poids d'une note de bas
   de page : elles informent, elles n'argumentent pas. */
.ftr-legal{margin-top:22px;padding:16px 0 30px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint);line-height:1.6}


@media(max-width:900px){
  .ftr-haut{grid-template-columns:1fr}
  .ftr-infos{padding-top:0}
}
@media(max-width:620px){
  .ftr-cta{padding:22px 20px;border-radius:20px}
  .ftr-infos{grid-template-columns:1fr 1fr;gap:22px 16px}
}


/* ---------- Pourquoi isoler par l'extérieur ----------
   Même forme que sur le site : grille de six cartes, grand numéro ocre,
   la carte passe au navy au survol. Le site pose des cartes blanches sur
   un fond crème ; ici la page est blanche, on inverse, cartes crème. */
/* Retrait bas réduit : la rangée de confiance qui suit pose déjà sa marge. */
.pq-sec{padding-bottom:clamp(20px,3vw,40px)}
.pq-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px)}
.pq-c{display:flex;flex-direction:column;gap:10px;background:var(--bg2);
  border-radius:var(--r-card);padding:clamp(24px,2.6vw,34px);
  transition:background-color .2s ease}
/* Numéro en pastille ocre, chiffre navy. Ocre sur crème en texte seul
   tombait à 1,9:1, sous le seuil AA même en grand corps ; navy sur ocre
   passe à 8:1 et reprend le code des boutons LSI. */
.pq-n{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  min-width:54px;height:54px;padding:0 10px;border-radius:16px;background:var(--brand);
  font-family:var(--display);font-weight:800;color:#1F2733;
  font-size:22px;line-height:1;margin-bottom:8px}
.pq-c h3{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,20px);
  line-height:1.25;color:var(--ink);margin:0;transition:color .2s ease}
.pq-c p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);transition:color .2s ease}
@media(hover:hover){
  .pq-c:hover{background:var(--navy)}
  .pq-c:hover h3{color:#FFFFFF}
  .pq-c:hover p{color:rgba(255,255,255,.8)}
}
@media(max-width:900px){.pq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pq-grid{grid-template-columns:1fr}}


/* ---------- CTA contextuels vers l'estimateur ----------
   Posés aux trois moments où le lecteur passe de « est-ce que ça marche »
   à « combien pour moi » : après la preuve avant/après, après le déroulé,
   après les gains chiffrés. Formulaire et téléphone côte à côte, à égalité,
   comme partout ailleurs sur la page. Le déroulé n'en porte pas sur
   téléphone : la barre basse y est déjà, un bouton de plus serait du bruit. */
.ctx-cta{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:clamp(30px,3.6vw,46px) auto 0;text-align:center}
.ctx-cta p{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.7vw,20px);line-height:1.35;color:var(--ink);max-width:40ch}
.ctx-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ctx-tel{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 24px;border-radius:100px;border:1.5px solid var(--ink);
  color:var(--ink);font-family:var(--display);font-weight:800;font-size:17px;
  transition:background .2s,color .2s}
.ctx-tel:hover{background:var(--ink);color:#FEFDFA}
.real-sec .ctx-cta{margin-top:26px}
.real-sec .ap-note{margin-top:22px}

/* FAQ : le lien formulaire sous la pastille téléphone. */
.faq-form{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;
  font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--brand)}
.faq-form:hover{color:var(--brand-text)}

@media(max-width:620px){
  .ctx-desk{display:none}
  .ctx-row{flex-direction:column;align-items:stretch;width:100%}
  .ctx-row .cta,.ctx-tel{width:100%}
  /* Le libellé passait sur deux lignes à 375px, bouton de 83px de haut. */
  .ctx-row .cta{padding-left:14px;padding-right:14px;font-size:14px;letter-spacing:.2px;white-space:nowrap}
  .ctx-cta{margin-top:28px}
}

/* Barre basse mobile masquée quand l'estimateur ou la carte du pied sont
   déjà à l'écran : elle doublait le bouton qu'on a sous le pouce. */
.mcta{transition:transform .25s ease}
.mcta.cache{transform:translateY(110%)}


/* ---------- Revue mobile ----------
   Relevés à 320, 360 et 390px : aucun débordement, mais une échelle de
   titres qui flottait entre 22 et 30px selon la section, des libellés à
   11,5px et des liens de pied à 27px de haut sous le pouce. */
@media(max-width:620px){
  /* Une seule taille de H2 de section sur téléphone. */
  .head h2,.about h2,.stack-h,.faq-aside h2,.avis h2{font-size:28px;line-height:1.16}
  .heroF h1{font-size:31px;line-height:1.16}
  /* Plancher de lecture à 12px. */
  .cmp-tag,.viz-gain i{font-size:12px}
  .ftr-legal{font-size:12px}
  /* Liens de pied : 40px de haut sur un écran tactile. */
  .ftr-col a{min-height:40px}
  .ftr-col .ftr-sous{margin-top:18px}
}
@media(max-width:360px){
  .head h2,.about h2,.stack-h,.faq-aside h2,.avis h2{font-size:26px}
  .heroF h1{font-size:28px}
}


/* ---------- Revue mobile, second passage (captures à 390px) ---------- */
/* L'attribut hidden perdait face à display:flex et display:grid : le
   message de remerciement s'affichait avant tout envoi. */
.ftr-form[hidden],.ftr-merci[hidden],.ftr-err[hidden]{display:none}

/* Consigne du comparateur : la mention du survol ne vaut qu'à la souris. */
@media(hover:none){.hint-souris{display:none}}

@media(max-width:620px){
  /* Six cartes empilées de 250px chacune : le numéro passe à côté du
     titre, la section perd un tiers de sa hauteur. */
  .pq-c{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;
    align-items:center;padding:20px 20px 22px}
  .pq-n{min-width:42px;height:42px;font-size:17px;border-radius:13px;margin:0}
  .pq-c p{grid-column:1 / -1}

  /* Cartes empilées : le texte avant le graphique, sinon on voyait
     l'étiquette DPE avant de savoir de quoi elle parle. La photo de la
     première carte garde sa place en tête. */
  .stack-card:has(.viz) .stack-media{order:1}
  /* Le graphique était encarté deux fois (carte + cadre) : on garde le
     cadre, on rend la largeur. */
  .stack-card .viz{padding:20px 16px 18px;margin:0 -6px}

  /* Avis : au doigt, une piste qui défile toute seule coupe les cartes
     au hasard et ne se laisse pas balayer. Défilement manuel aimanté,
     première carte calée sur la marge. */
  .revrail{overflow-x:auto;-webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x mandatory;scroll-padding-left:22px;scrollbar-width:none}
  .revrail::-webkit-scrollbar{display:none}
  .revrail-track{animation:none;padding:6px 22px}
  .revrail .rev{scroll-snap-align:start;width:82vw;max-width:320px}
  .revrail .rev[aria-hidden="true"]{display:none}
}
@media(max-width:440px){
  /* Placeholders coupés (« Heure de rap… ») à deux champs par ligne. */
  .ftr-form{grid-template-columns:1fr}
}
@media(max-width:360px){
  /* À 320px le libellé du bouton, insécable, poussait la carte 45px hors
     de l'écran. On le laisse passer sur deux lignes et on resserre la carte. */
  .ftr-cta{padding:20px 16px}
  .ftr-cta .cta{white-space:normal;font-size:13.5px;line-height:1.25;min-height:52px}
}

/* Statut « Ouvert maintenant » masqué sur téléphone : la barre basse porte
   déjà l'appel, la ligne ne faisait qu'allonger le hero. Sélecteur doublé
   pour passer devant .heroF-status[hidden]{display:none}. */
@media(max-width:620px){.heroF .heroF-status{display:none}}


/* ---------- Mobile : navbar, estimateur, bénéfices empilés ---------- */
@media(max-width:620px){
  /* La nav flottait en carte arrondie par-dessus le coin arrondi du hero :
     deux rayons superposés. Sur téléphone elle devient une barre blanche
     pleine largeur, posée au-dessus du hero. */
  .topbar{position:relative;top:0;padding:0;background:#fff;pointer-events:auto}
  .tb-card{border-radius:0;box-shadow:none;min-height:64px;padding:8px 12px 8px 16px;
    border-bottom:1px solid var(--line)}
  .heroF{padding:12px 12px 12px}
  .heroF .wrap{padding-top:34px;padding-bottom:118px}

  /* Estimateur aligné sur les bords du hero (il était rentré de 22px de
     chaque côté), plus compact pour que la première réponse arrive vite. */
  .qz-float{padding-left:0;padding-right:0;margin-top:-92px}
  .qz{padding:18px 16px 16px}
  .qz-h{font-size:18.5px}
  .qz-sub{font-size:13.5px;margin-top:4px}
  .qz-prog{margin:14px 0 16px}
  .qz-q{font-size:16.5px;margin-bottom:11px}
  .qz-opts.two{gap:10px}
  .qz-opts.two .qz-opt{min-height:88px;padding:12px 8px;gap:6px;font-size:15px}
  .qz-opts.two .qz-opt .ic svg{width:26px;height:26px}
  .qz-opts .qz-opt{padding:13px 14px}
  /* Le bloc gérant garde nom et rôle, son paragraphe passe à la trappe :
     il doublait les engagements affichés juste dessous. */
  .qz-human{margin-top:16px;padding-top:14px;align-items:center}
  .qz-mot{display:none}
  .qz-ini{width:38px;height:38px}
  .qz-reass{margin-top:12px;gap:6px 12px}
  .qz .fld input,.qz .fld select{min-height:48px}
  .qz-float .frbar{margin:0}

  /* Six bénéfices : les cartes s'empilent au défilement, chacune vient
     recouvrir la précédente en laissant dépasser son en-tête. */
  .pq-sec{padding-top:40px}
  .pq-grid{gap:14px}
  .pq-c{position:sticky;box-shadow:0 -8px 24px -18px rgba(31,39,51,.35),0 1px 0 var(--line);
    border:1px solid var(--line);background:var(--bg2)}
  .pq-c:nth-child(1){top:16px}
  .pq-c:nth-child(2){top:28px}
  .pq-c:nth-child(3){top:40px}
  .pq-c:nth-child(4){top:52px}
  .pq-c:nth-child(5){top:64px}
  .pq-c:nth-child(6){top:76px}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){
  .pq-c{position:static}
}


/* ---------- Par où commencer : bento ----------
   La taille de chaque tuile suit son utilité. Réserver la visite occupe
   quatre cases, appeler deux, les deux canaux en libre-service une
   chacune, et les deux tuiles de lecture ferment la grille en bande
   basse. Aucune ne promet de chiffre : le prix vient après la visite. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.3vw,18px);align-items:start}
.bt{position:relative;display:flex;flex-direction:column;border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);background:var(--bg2);border:1px solid var(--line);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.bt:hover{transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(31,39,51,.5)}
.bt h3{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.bt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.bt-ic{display:flex;color:var(--brand-text);margin-bottom:12px}
.bt-sec:hover{border-color:var(--brand-line)}
.bt-lien{margin-top:auto;padding-top:14px;font-family:var(--display);font-weight:700;
  font-size:15px;color:var(--brand-text)}
.bt-sec:hover .bt-lien{color:var(--ink)}
.bt-num{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:normal}

/* Quatre cases : le geste que l'on veut vraiment. */
.bt-xl{grid-column:span 2;grid-row:span 2;background:var(--brand);border-color:transparent;
  padding:clamp(26px,2.8vw,36px)}
.bt-xl h3{font-size:clamp(23px,2.3vw,29px);color:#1F2733;margin-bottom:10px;padding-right:110px}
.bt-xl p{color:#3A4553;font-size:15.5px;max-width:42ch}
.bt-xl .bt-ic{color:#1F2733}
.bt-pts{list-style:none;margin:18px 0 0;display:grid;gap:8px}
.bt-pts li{position:relative;padding-left:24px;font-size:14.5px;font-weight:600;color:#1F2733}
.bt-pts li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;
  border-left:2.2px solid #1F2733;border-bottom:2.2px solid #1F2733;transform:rotate(-45deg)}
.bt-xl .bt-num{margin-top:auto;padding-top:20px;font-size:clamp(19px,1.9vw,23px);color:#1F2733}
.bt-xl .arr{display:inline-block;transition:transform .2s}
.bt-xl:hover .arr{transform:translateX(4px)}
.bt-tag{position:absolute;top:18px;right:20px;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#FEFDFA;background:#1F2733;border-radius:100px;padding:6px 12px}

/* Deux cases : l'appel, second geste le plus utile. */
.bt-l{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start}
.bt-l .bt-ic{grid-row:span 2;margin:0}
.bt-l h3{font-size:clamp(19px,1.9vw,22px)}
.bt-l .bt-num{grid-column:2;margin-top:10px;font-size:clamp(19px,1.9vw,24px)}
.bt-tel{background:var(--navy);border-color:transparent;--ink:#FFFFFF;--muted:#B9C2CE}
.bt-tel h3{color:#fff}
.bt-tel p{color:#C4CCD8}
.bt-tel .bt-ic,.bt-tel .bt-num{color:var(--brand)}
.bt-tel:hover{border-color:var(--brand)}

/* Une case : les canaux en libre-service. */
.bt-m h3{font-size:17px}
.bt-m p{font-size:14px}

/* Bande basse : on lit, on ne convertit pas. */
.bt-mini{grid-column:span 2;flex-direction:row;align-items:center;gap:14px;
  padding:16px clamp(18px,2vw,24px);background:var(--bg);border-color:var(--line)}
.bt-mini .bt-ic{margin:0;color:var(--brand-text)}
.bt-mini h3{margin:0;font-size:16px}
.bt-mini .bt-fleche{margin-left:auto;display:flex;color:var(--muted);transition:transform .2s,color .2s}
.bt-mini:hover{border-color:var(--brand-line)}
.bt-mini:hover .bt-fleche{color:var(--ink);transform:translateX(3px)}

@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bt-xl,.bt-l,.bt-mini{grid-column:1 / -1}
  .bt-xl{grid-row:auto}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr;gap:12px}
  .bt-l{grid-template-columns:1fr}
  .bt-l .bt-ic{grid-row:auto;margin-bottom:12px}
  .bt-l .bt-num{grid-column:1}
  .bt-tag{position:static;align-self:flex-start;margin-bottom:12px;width:max-content}
  .bt-xl h3{padding-right:0;font-size:22px}
  .bt-mini h3{font-size:15.5px}
}

/* ---------- Formulaire de visite dans le hero ----------
   Il remplace le questionnaire de prix. Mêmes champs que la carte du
   pied, plus le choix du créneau, qui est la vraie contrepartie. */
/* Trois etapes, une seule visible : la carte tient dans l'ecran. */
.rdv-step{display:none}
.rdv-step.on{display:block;animation:qzin .42s cubic-bezier(.2,.8,.2,1)}
.rdv .qz-q{outline:none}
.rdv-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.rdv-opt{min-height:44px;padding:0 16px;border-radius:100px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line2);color:var(--soft);
  font-family:var(--body);font-size:14.5px;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.rdv-opt:hover{border-color:var(--brand-2);background:var(--brand-tint);color:var(--ink)}
.rdv-opt[aria-pressed=true]{background:var(--brand);border-color:var(--brand-2);
  color:#1F2733;font-weight:700;box-shadow:0 0 0 3px rgba(248,169,35,.24)}
.rdv .fld-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rdv .cta{width:100%;margin-top:6px}
.rdv .consent{margin-bottom:14px}

/* Confirmation, à la place du formulaire. */
.rdv-merci{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 20px;border-radius:18px;background:var(--brand-tint);
  border:1px solid var(--brand-line)}
.rdv-merci .tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand-text)}
.rdv-merci-t{margin:0;font-family:var(--display);font-weight:800;font-size:22px;
  line-height:1.2;color:var(--ink)}
.rdv-merci-s{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.rdv-merci .cta{width:100%;margin-top:4px}
.rdv[hidden],.rdv-merci[hidden]{display:none}

@media(max-width:620px){
  .rdv-quand legend{font-size:15px}
  .rdv-opt{min-height:42px;padding:0 13px;font-size:14px}
  .rdv .fld-2{grid-template-columns:1fr}
  .rdv-merci{padding:18px 16px}
  .rdv-merci-t{font-size:20px}
}

@media(prefers-reduced-motion:reduce){.rdv-step.on{animation:none}}


/* ---------- Tuile « bilan de votre maison » ----------
   Trois colonnes sur quatre et deux rangées : c'est l'outil qui
   distingue la page. Les résultats s'ouvrent dans la tuile. */
.bt-bilan{grid-column:span 3;grid-row:span 2;align-self:stretch;background:var(--navy);border-color:transparent;
  --ink:#FFFFFF;--muted:#B9C2CE;padding:clamp(26px,2.8vw,36px)}
.bt-bilan:hover{transform:none;box-shadow:none}
.bt-bilan h3{color:#fff;font-size:clamp(22px,2.3vw,29px);padding-right:210px;margin-bottom:10px;text-wrap:balance}
.bt-bilan>p{color:#C4CCD8;font-size:15.5px;max-width:58ch}
.bt-bilan .bt-tag{background:var(--brand);color:#1F2733}

.bilan-cherche{display:flex;gap:10px;margin-top:22px}
.bilan-champ{position:relative;flex:1}
.bilan-loupe{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;color:#8A94A5;pointer-events:none}
.bilan-champ input{width:100%;min-height:56px;padding:0 16px 0 46px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,.22);background:#fff;color:#1F2733;
  font-family:var(--body);font-size:16.5px}
.bilan-champ input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(248,169,35,.35)}
.bilan-cherche .cta{min-height:56px;white-space:nowrap;flex:none}
.bilan-sugg{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;
  background:#fff;border-radius:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.bilan-sugg li{padding:11px 12px;border-radius:9px;font-size:15px;color:#1F2733;cursor:pointer}
.bilan-sugg li:hover,.bilan-sugg li.on{background:#FFF1D9}
.bilan-rgpd{margin:10px 0 0!important;font-size:12.5px!important;color:#8E99A8!important;max-width:none!important}

.bilan-etat{margin:18px 0 0;padding:12px 16px;border-radius:12px;font-size:14.5px;line-height:1.5;
  background:rgba(255,255,255,.08);color:#E4E8EE}
.bilan-etat.charge::before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.3);border-top-color:var(--brand);border-radius:50%;animation:bilanTourne .8s linear infinite}
.bilan-etat.erreur{background:rgba(232,131,106,.14);color:#F4B6A5}
@keyframes bilanTourne{to{transform:rotate(360deg)}}

.bilan-res{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.bt-bilan .bilan-titre{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:18px;color:#fff}
.bilan-faits{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bf{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1)}
.bf-ic{display:flex;flex:none;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;
  background:rgba(248,169,35,.14);color:var(--brand)}
.bf-l{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8E99A8}
.bf-v{display:block;margin-top:2px;font-family:var(--display);font-weight:800;font-size:16.5px;line-height:1.3;color:#fff}
.bf-n{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:#B9C2CE}
.bf.alerte{border-color:rgba(248,169,35,.45)}
.bf.alerte .bf-ic{background:var(--brand);color:#1F2733}
.bf.ok .bf-ic{background:rgba(111,199,149,.18);color:#6FC795}
.bf-dpe{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 8px;
  border-radius:6px;color:#10151C;font-size:15px}
.dpe-a{background:#009C6D}.dpe-b{background:#52B153}.dpe-c{background:#78BD76}.dpe-d{background:#F4E70F}
.dpe-e{background:#F0B40F}.dpe-f{background:#EB8235}.dpe-g{background:#D7221F;color:#fff}
.bt-bilan .bilan-source{margin:12px 0 0;font-size:12px;line-height:1.5;color:#8E99A8}

.bilan-form{margin-top:20px;padding:20px;border-radius:16px;background:#fff;color:#1F2733}
.bt-bilan .bilan-form-t{margin:0;font-family:var(--display);font-weight:800;font-size:19px;color:#1F2733}
.bt-bilan .bilan-form-s{margin:6px 0 14px;font-size:14px;line-height:1.5;color:#5C6675}
.bilan-form-champs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bilan-form-champs input{width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:1px solid rgba(31,39,51,.2);
  background:#F6F3EE;font-family:var(--body);font-size:15.5px;color:#1F2733}
.bilan-form-champs input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(248,169,35,.25)}
.bilan-form .consent{color:#39434F}
.bilan-form .cta{width:100%;margin-top:12px}
.bilan-err{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#9B2B14}
.bilan-merci{margin-top:20px;padding:18px;border-radius:16px;background:rgba(111,199,149,.12);
  border:1px solid rgba(111,199,149,.35);display:flex;flex-direction:column;gap:6px;color:#E4E8EE;font-size:14.5px;line-height:1.55}
.bilan-merci b{font-family:var(--display);font-size:18px;color:#fff}
.bilan-form[hidden],.bilan-res[hidden],.bilan-merci[hidden],.bilan-etat[hidden],.bilan-sugg[hidden]{display:none}

/* Colonne de droite : les deux tuiles d'une case restent collées l'une
   à l'autre quand le bilan s'ouvre et s'allonge. */
.bt-col{grid-column:4;grid-row:1 / span 2;display:flex;flex-direction:column;gap:clamp(12px,1.3vw,18px)}

@media(max-width:1000px){
  .bt-bilan{grid-column:1 / -1;grid-row:auto}
  .bt-col{grid-column:1 / -1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr}
  .bilan-faits{grid-template-columns:1fr}
}
@media(max-width:620px){
  .bt-bilan h3{padding-right:0;font-size:22px}
  .bilan-cherche{flex-direction:column}
  .bilan-cherche .cta{width:100%}
  .bilan-form-champs{grid-template-columns:1fr}
  .bt-col{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bilan-etat.charge::before{animation:none}}

/* ---------- Verdict de compatibilité ----------
   Le verdict en bandeau, la demande de rappel collée dessous, puis le
   détail des points vérifiés. Couleurs du verdict : vert si rien ne
   bloque, ocre pour la vigilance ou l'accord des Bâtiments de France,
   gris-bleu quand le cas se traite au téléphone. */
.bilan-verdict{display:flex;flex-direction:column;gap:4px;padding:18px 20px 18px 22px;border-radius:16px;
  background:rgba(255,255,255,.07);border-left:5px solid #8E99A8}
.bilan-verdict.ok{background:rgba(111,199,149,.14);border-left-color:#6FC795}
.bilan-verdict.vig,.bilan-verdict.abf{background:rgba(248,169,35,.14);border-left-color:var(--brand)}
.bv-sur{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8E99A8}
.bv-t{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.2vw,26px);line-height:1.2;color:#fff}
.bilan-verdict.ok .bv-t{color:#8FDCB0}
.bilan-verdict.vig .bv-t,.bilan-verdict.abf .bv-t{color:var(--brand)}
.bv-s{font-size:14.5px;line-height:1.5;color:#D3D9E2;max-width:60ch}

.bilan-suite{margin-top:12px}
.bilan-rappel{padding:16px 18px;border-radius:16px;background:#fff;color:#1F2733}
.bt-bilan .bilan-rappel-t{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:17px;color:#1F2733}
.bilan-rappel-ligne{display:flex;gap:8px}
.bilan-rappel-ligne input{flex:1;min-width:0;min-height:50px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(31,39,51,.22);background:#F6F3EE;font-family:var(--body);font-size:16px;color:#1F2733}
.bilan-rappel-ligne input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(248,169,35,.28)}
.bilan-rappel-ligne .cta{min-height:50px;flex:none;white-space:nowrap;padding-left:20px;padding-right:20px}
.bilan-rappel-ok{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12.5px;line-height:1.45;color:#5C6675;cursor:pointer}
.bilan-rappel-ok input{width:16px;height:16px;flex:none;margin-top:1px;accent-color:#1F2733}
.bilan-rappel .bilan-err{margin:8px 0 0}
.bilan-visite{display:inline-flex;align-items:center;min-height:40px;margin-top:4px;font-size:14px;font-weight:700;
  color:#1F2733;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:4px}
.bilan-visite:hover{color:var(--brand-text)}
.bilan-suite .bilan-merci{margin-top:0}

.bt-bilan .bilan-titre{margin:22px 0 10px;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#8E99A8;font-family:var(--body)}
.bilan-points{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vp{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05)}
.vp-ic{display:flex;flex:none;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;margin-top:1px}
.vp.ok .vp-ic{background:rgba(111,199,149,.2);color:#8FDCB0}
.vp.vig .vp-ic{background:var(--brand);color:#1F2733}
.vp.info .vp-ic{background:rgba(255,255,255,.12);color:#C4CCD8}
.vp-l{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8E99A8}
.vp-v{display:block;margin-top:1px;font-family:var(--display);font-weight:800;font-size:15.5px;line-height:1.3;color:#fff}
.vp-n{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:#B9C2CE}
.bilan-suite[hidden],.bilan-rappel[hidden]{display:none}

@media(max-width:1000px){.bilan-points{grid-template-columns:1fr}}
@media(max-width:620px){
  .bilan-verdict{padding:16px}
  .bilan-rappel{padding:14px}
  .bilan-rappel-ligne{flex-direction:column}
  .bilan-rappel-ligne .cta{width:100%}
}


/* ---------- Pastille inclinée sur la carte du hero ----------
   Même surlignage jaune incliné que les titres, posé à cheval sur le coin
   haut droit de la carte blanche. */
.qz{position:relative}
.qz-badge{position:absolute;top:-14px;right:22px;z-index:2;display:inline-block;
  padding:.28em .8em .34em;border-radius:.4em;background:var(--brand);color:#1F2733;
  font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:.01em;
  transform:rotate(3deg);box-shadow:0 8px 18px -8px rgba(31,39,51,.45)}
@media(max-width:620px){.qz-badge{top:-12px;right:14px;font-size:13.5px}}

/* ---------- Moins de blanc entre le hero et « Avant de nous appeler » ----------
   La carte du hero déborde déjà sous la photo : la section suivante n'a
   pas besoin de son retrait haut complet. */
.bento-sec{padding-top:0}
.heroF .qz-float{padding-bottom:clamp(24px,3vw,40px)}


/* ---------- Visuels des tuiles du bento ----------
   Un visuel propre à chaque tuile, pour qu'on les distingue avant de lire.
   SVG et CSS uniquement, animations lentes, coupées si l'utilisateur
   réduit les mouvements. */

/* 1. Compatibilité : maison balayée par un faisceau, trois pastilles. */
.bv-illu{position:absolute;top:70px;right:clamp(22px,2.6vw,34px);width:230px;height:190px;pointer-events:none}
.bv-maison{width:220px;height:170px;display:block;overflow:visible}
.bv-scan{animation:bvScan 4.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes bvScan{0%{transform:translateY(20px)}50%{transform:translateY(142px)}100%{transform:translateY(20px)}}
.bv-rayon{transform-origin:176px 36px;animation:bvRayon 4.2s ease-out infinite}
@keyframes bvRayon{0%{transform:scale(.6);opacity:0}30%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.bv-puce{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#E4E8EE;
  font-size:12px;font-weight:700;white-space:nowrap;opacity:.35;animation:bvPuce 4.2s ease infinite}
.bv-puce i{width:8px;height:8px;border-radius:50%;background:#8E99A8}
.bv-puce.p1{top:98px;left:-12px;animation-delay:.4s}
.bv-puce.p2{top:128px;right:-6px;animation-delay:1.1s}
.bv-puce.p3{bottom:-2px;left:58px;animation-delay:1.8s}
.bv-puce.p1 i,.bv-puce.p2 i{background:#6FC795}
.bv-puce.p3 i{background:var(--brand)}
@keyframes bvPuce{0%,8%{opacity:.35;transform:translateY(4px)}18%,78%{opacity:1;transform:none}100%{opacity:.35}}
.bt-bilan>p{max-width:52ch}
.bt-bilan h3{padding-right:260px}

/* Visuel en tête des tuiles d'une case. */
.bt-visu{display:flex;flex-direction:column;gap:8px;margin:-4px 0 16px;padding:14px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -20px rgba(31,39,51,.4)}

/* 2. WhatsApp : la photo envoyée, nous répondons. */
.wa{background:#EFE7DD}
.wa-bulle{position:relative;display:flex;flex-direction:column;border-radius:12px;font-size:12px}
.wa-bulle.moi{align-self:flex-end;width:74%;padding:4px 4px 3px;background:#D9FDD3;border-top-right-radius:3px}
.wa-bulle.moi img{width:100%;height:auto;aspect-ratio:220/136;object-fit:cover;border-radius:9px;display:block}
.wa-bulle.moi em{align-self:flex-end;font-style:normal;font-size:10.5px;color:#4E5B63;padding:2px 4px 0}
.wa-bulle.lui{align-self:flex-start;flex-direction:row;align-items:center;gap:8px;padding:7px 11px;background:#fff;
  border-top-left-radius:3px;animation:waLui 5s ease infinite}
.wa-bulle.lui b{font-size:11.5px;color:#1F7A55}
.wa-points{display:inline-flex;gap:3px}
.wa-points i{width:5px;height:5px;border-radius:50%;background:#8696A0;animation:waPoint 1.2s ease-in-out infinite}
.wa-points i:nth-child(2){animation-delay:.18s}
.wa-points i:nth-child(3){animation-delay:.36s}
@keyframes waPoint{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes waLui{0%,12%{opacity:0;transform:translateY(6px)}22%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 3. Questionnaire : une question en cours, la sélection change. */
.qu-haut{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}
.qu-barre{flex:1;height:5px;border-radius:100px;background:var(--bg2);overflow:hidden}
.qu-barre i{display:block;height:100%;width:100%;border-radius:100px;background:var(--brand);
  transform-origin:left;animation:quBarre 6s ease-in-out infinite}
@keyframes quBarre{0%,15%{transform:scaleX(.4)}45%,100%{transform:scaleX(.5)}}
.qu-q{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink)}
.qu-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qu-opt{padding:7px 8px;border-radius:9px;border:1px solid var(--line2);background:var(--bg);
  font-size:12px;font-weight:600;color:var(--soft);text-align:center}
.qu-opt.a{animation:quA 6s ease infinite}
.qu-opt.b{animation:quB 6s ease infinite}
@keyframes quA{0%,20%{background:var(--bg);border-color:var(--line2)}28%,52%{background:var(--brand);border-color:var(--brand-2);color:#1F2733}60%,100%{background:var(--bg);border-color:var(--line2)}}
@keyframes quB{0%,58%{background:var(--bg);border-color:var(--line2)}66%,92%{background:var(--brand);border-color:var(--brand-2);color:#1F2733}100%{background:var(--bg)}}

/* 4. Chantiers : vignettes de façades réelles superposées. */
.bt-vigs{display:flex;flex:none;padding-left:8px}
.bt-vigs img{width:38px;height:38px;border-radius:50%;object-fit:cover;margin-left:-8px;
  border:2px solid var(--bg);box-shadow:0 2px 6px rgba(31,39,51,.18);transition:transform .25s}
.bt-mini:hover .bt-vigs img:nth-child(1){transform:translateX(-3px)}
.bt-mini:hover .bt-vigs img:nth-child(3){transform:translateX(3px)}

/* 5. FAQ : trois questions repliées, la première s'ouvre. */
.bt-faq{display:flex;flex-direction:column;gap:3px;flex:none;width:38px;padding:5px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line)}
.bt-faq i{display:block;height:5px;border-radius:3px;background:rgba(31,39,51,.22)}
.bt-faq i:first-child{background:var(--brand);animation:faqOuvre 4s ease-in-out infinite}
@keyframes faqOuvre{0%,20%{height:5px}40%,80%{height:11px}100%{height:5px}}

.bt-mini h3 small{display:block;margin-top:2px;font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted)}
.bt-mini{padding-top:14px;padding-bottom:14px}

@media(max-width:1000px){
  .bv-illu{display:none}
  .bt-bilan h3{padding-right:210px}
}
@media(max-width:620px){
  .bt-bilan h3{padding-right:0}
  .bt-visu{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .bv-scan,.bv-rayon,.bv-puce,.wa-bulle.lui,.wa-points i,.qu-barre i,.qu-opt.a,.qu-opt.b,.bt-faq i:first-child{animation:none}
  .bv-puce{opacity:1}
  .bv-scan{transform:translateY(80px)}
}


/* ---------- Bento, grille finale ----------
   Le vérificateur prend toute la largeur, illustration dans sa propre
   colonne : plus de chevauchement avec le texte, plus de vide quand la
   tuile s'étirait à la hauteur de la colonne voisine. Dessous, les deux
   outils secondaires côte à côte, puis les deux liens de lecture. */
.bt-bilan{grid-column:1 / -1;grid-row:auto;align-self:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:clamp(24px,3vw,48px);align-items:start}
.bt-bilan>*{grid-column:1}
.bt-bilan h3{padding-right:0;max-width:26ch}
.bt-bilan .bt-tag{grid-column:auto}
.bt-bilan .bv-illu{position:relative;top:auto;right:auto;grid-column:2;grid-row:1 / span 4;
  align-self:center;margin-top:34px;height:190px}
.bt-bilan .bilan-cherche{max-width:680px}
.bt-bilan .bilan-etat,.bt-bilan .bilan-res{grid-column:1 / -1}
.bt-col{grid-column:1 / span 2;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.3vw,18px)}
.bt-col2{grid-column:3 / span 2;display:flex;flex-direction:column;gap:clamp(12px,1.3vw,18px)}
.bt-col2 .bt-mini{flex:1;grid-column:auto}

@media(max-width:1000px){
  .bt-bilan{grid-template-columns:1fr}
  .bt-bilan .bv-illu{display:none}
  .bt-col,.bt-col2{grid-column:1 / -1}
}
@media(max-width:620px){
  .bt-col{grid-template-columns:1fr}
}

/* Les deux liens de lecture occupent la hauteur des tuiles voisines, à
   moitié chacun : leur taille reste la moitié d'un outil. */
.bt-col2{align-self:stretch}
.bt-col2 .bt-mini{padding:20px 24px}
.bt-col2 .bt-vigs img{width:52px;height:52px;margin-left:-12px}
.bt-col2 .bt-faq{width:52px;padding:8px;gap:5px}
.bt-col2 .bt-faq i{height:7px}
.bt-col2 .bt-mini h3{font-size:18px}
@keyframes faqOuvre{0%,20%{height:7px}40%,80%{height:15px}100%{height:7px}}
.bv-puce.p1{top:52px;left:-34px}
@media(max-width:1000px){.bt-col2 .bt-mini{padding:16px 20px}}
@media(max-width:620px){
  .bt-col2 .bt-vigs img{width:38px;height:38px;margin-left:-10px}
  .bt-col2 .bt-faq{width:40px;padding:6px}
  .bt-col2 .bt-mini h3{font-size:16px}
}

/* Photo et questionnaire un cran plus grands : la moitié gauche de la
   rangée passe de 50 à 60 %, texte et visuels suivent. */
@media(min-width:1001px){
  .bento{grid-template-columns:1.2fr 1.2fr .8fr .8fr}
}
.bt-col .bt-m{padding:clamp(22px,2.4vw,30px)}
.bt-col .bt-m h3{font-size:clamp(18px,1.6vw,20px)}
.bt-col .bt-m p{font-size:14.8px}
.bt-col .bt-visu{padding:16px}
.bt-col .qu-q{font-size:15px}
.bt-col .qu-opt{padding:9px 10px;font-size:13px}
.bt-col .wa-bulle.moi{width:70%}


/* ---------- Questionnaire animé : trois questions en 12 s ----------
   Chaque diapositive vit un tiers du cycle. Même jeu d'images clés pour
   les trois, décalé de 4 puis 8 s. */
.qu{position:relative;overflow:hidden}
.qu-num{position:relative;display:inline-flex;align-items:baseline;gap:4px}
.qu-num b{font-weight:700;opacity:0;animation:quNum 12s infinite}
.qu-num b.n2,.qu-num b.n3{position:absolute;left:0;top:0}
.qu-num b.n2{animation-delay:4s}
.qu-num b.n3{animation-delay:8s}
@keyframes quNum{0%{opacity:0}2%,31%{opacity:1}33%,100%{opacity:0}}

.qu-barre i{animation:quProg 12s cubic-bezier(.45,0,.2,1) infinite}
@keyframes quProg{
  0%{transform:scaleX(.06)}20%,31%{transform:scaleX(.1)}
  36%{transform:scaleX(.1)}53%,64%{transform:scaleX(.5)}
  69%{transform:scaleX(.5)}86%,97%{transform:scaleX(.7)}100%{transform:scaleX(.06)}}

.qu-slides{position:relative;display:block;height:88px}
.qu-slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;
  opacity:0;animation:quSlide 12s cubic-bezier(.2,.8,.2,1) infinite}
.qu-slide.s2{animation-delay:4s}
.qu-slide.s3{animation-delay:8s}
@keyframes quSlide{
  0%{opacity:0;transform:translateX(28px)}
  4%,29%{opacity:1;transform:none}
  33%,100%{opacity:0;transform:translateX(-28px)}}

.qu .qu-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bg);border-color:var(--line2);color:var(--soft);animation:none}
.qu-coche{display:none}
.qu-opt.on{animation:quChoix 12s ease infinite}
.qu-slide.s2 .qu-opt.on,.qu-slide.s2 .qu-tap,.qu-slide.s2 .qu-onde,.qu-slide.s2 .qu-coche{animation-delay:4s}
.qu-slide.s3 .qu-opt.on,.qu-slide.s3 .qu-tap,.qu-slide.s3 .qu-onde,.qu-slide.s3 .qu-coche{animation-delay:8s}
@keyframes quChoix{
  0%,17%{background:var(--bg);border-color:var(--line2);color:var(--soft);transform:none}
  18%{transform:scale(.95)}
  20%,31%{background:var(--brand);border-color:var(--brand-2);color:#1F2733;transform:none}
  33%,100%{background:var(--bg);border-color:var(--line2);color:var(--soft)}}
.qu-opt.on .qu-coche{display:block;width:0;opacity:0;animation:quCoche 12s ease infinite}
@keyframes quCoche{0%,19%{width:0;opacity:0}22%,31%{width:12px;opacity:1}33%,100%{width:0;opacity:0}}

/* Le doigt arrive, appuie, une onde part de la réponse. */
.qu-tap{position:absolute;left:58%;top:52%;width:0;height:0;pointer-events:none;
  opacity:0;animation:quTap 12s cubic-bezier(.3,.7,.3,1) infinite}
.qu-main{position:absolute;left:-4px;top:-2px;filter:drop-shadow(0 3px 5px rgba(31,39,51,.3))}
@keyframes quTap{
  0%,6%{opacity:0;transform:translate(26px,22px)}
  11%{opacity:1;transform:translate(26px,22px)}
  16%{opacity:1;transform:none}
  18%{opacity:1;transform:scale(.86)}
  21%,25%{opacity:1;transform:none}
  29%,100%{opacity:0;transform:translate(10px,14px)}}
.qu-onde{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--brand-2);opacity:0;animation:quOnde 12s ease-out infinite}
@keyframes quOnde{0%,17%{opacity:0;transform:scale(.3)}18%{opacity:.9;transform:scale(.3)}26%,100%{opacity:0;transform:scale(1.6)}}

@media(prefers-reduced-motion:reduce){
  .qu-slide,.qu-num b,.qu-barre i,.qu-opt.on,.qu-opt.on .qu-coche,.qu-tap,.qu-onde{animation:none}
  .qu-slide.s2,.qu-num b.n2{opacity:1}
  .qu-barre i{transform:scaleX(.5)}
  .qu-slide.s2 .qu-opt.on{background:var(--brand);border-color:var(--brand-2);color:#1F2733}
  .qu-slide.s2 .qu-opt.on .qu-coche{width:12px;opacity:1}
}

/* Bandeau France Rénov' du hero : la carte formulaire a raccourci (trois
   étapes), le bandeau remonté de 120px chevauchait « Ouvert maintenant ».
   Il se pose sous la photo, aligné sur le bas de la carte formulaire. */
@media(min-width:1001px){
  .qz-float .frbar{transform:none;align-self:end}
}

/* Numéro de question : les trois libellés se superposent sans décaler la barre. */
.qu-num{min-width:104px;height:14px}
.qu-num b{white-space:nowrap}
/* La coche se pose dans l'angle, sans pousser le libellé sur deux lignes. */
.qu .qu-opt{padding-left:18px;padding-right:18px;white-space:nowrap}
.qu-opt.on .qu-coche{position:absolute;right:7px;top:50%;margin-top:-6px}
@keyframes quCoche{0%,19%{opacity:0;transform:scale(.4)}22%,31%{opacity:1;transform:none}33%,100%{opacity:0;transform:scale(.4)}}
.qu-opt.on .qu-coche{width:12px}

.qu .qu-opt{padding-left:10px;padding-right:10px;font-size:12.5px}
.qu .qu-opt.on{padding-right:22px;padding-left:10px}
.qu-opt.on .qu-coche{right:6px}


/* ---------- Titre du vérificateur sur deux lignes ---------- */
@media(min-width:621px){.bt-bilan h3{max-width:36ch}}

/* ---------- WhatsApp et questionnaire : visuels de même hauteur ----------
   Titres et textes démarrent ainsi au même niveau dans les deux tuiles. */
.bt-col .bt-visu{height:212px;justify-content:center;box-sizing:border-box}
.bt-col .wa-bulle.moi{width:auto;max-width:78%}
.bt-col .wa-bulle.moi img{width:auto;height:122px;max-width:100%}
.bt-col .bt-visu.qu{padding:22px 18px}

/* ---------- Tuile chantiers : photos plein cadre en fondu ---------- */
.bt-photo{padding:0;overflow:hidden;min-height:220px;justify-content:flex-end;background:var(--navy);border:0;isolation:isolate}
.bp-slides{position:absolute;inset:0;z-index:-2}
.bp-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:bpFondu 15s ease-in-out infinite}
.bp-slides img:nth-child(2){animation-delay:5s}
.bp-slides img:nth-child(3){animation-delay:10s}
@keyframes bpFondu{0%{opacity:0;transform:scale(1.02)}6%,33%{opacity:1}40%,100%{opacity:0;transform:scale(1.12)}}
.bt-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(31,39,51,0) 35%,rgba(31,39,51,.85) 100%)}
.bp-tag{position:absolute;top:16px;left:16px;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.94);
  font-size:12.5px;font-weight:700;color:var(--ink)}
.bp-bas{display:flex;align-items:flex-end;gap:14px;padding:clamp(18px,2vw,24px)}
.bp-bas h3{margin:0;font-size:19px}
.bp-bas small{display:block;margin-top:3px;font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--muted)}
.bp-bas .bt-fleche{margin-left:auto;display:flex;flex:none;width:40px;height:40px;border-radius:50%;
  align-items:center;justify-content:center;transition:transform .2s}
.bt-photo .bp-bas h3{color:#fff}
.bt-photo .bp-bas small{color:#E4E8EE}
.bt-photo .bt-fleche{background:var(--brand);color:#1F2733}
.bt-faqa .bt-fleche{background:var(--bg2);color:var(--ink)}
.bt-photo:hover .bt-fleche,.bt-faqa:hover .bt-fleche{transform:translateX(3px)}
.bp-dots{position:absolute;top:24px;right:18px;display:flex;gap:5px}
.bp-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);animation:bpPoint 15s infinite}
.bp-dots i:nth-child(2){animation-delay:5s}
.bp-dots i:nth-child(3){animation-delay:10s}
@keyframes bpPoint{0%,33%{background:#fff;transform:scale(1.25)}36%,100%{background:rgba(255,255,255,.5);transform:none}}

/* ---------- Tuile FAQ : accordéon miniature ---------- */
.bt-faqa{padding:0;overflow:hidden;background:var(--bg);justify-content:space-between}
.bt-faqa:hover{border-color:var(--brand-line)}
.fq{display:flex;flex-direction:column;gap:6px;padding:clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px) 0}
.fq-q{display:block;padding:8px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);
  animation:fqCarte 12s ease-in-out infinite}
.fq-l{display:flex;align-items:center;gap:10px}
.fq-l b{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fq-pm{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--line2);
  animation:fqPm 12s ease-in-out infinite}
.fq-pm::before,.fq-pm::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.6px;margin:-.8px 0 0 -4px;background:var(--ink);border-radius:1px}
.fq-pm::after{transform:rotate(90deg)}
.fq-r{display:flex;flex-direction:column;gap:5px;max-height:0;overflow:hidden;animation:fqOuvre 12s ease-in-out infinite}
.fq-r em{display:block;flex:none;height:6px;border-radius:3px;background:rgba(31,39,51,.16)}
.fq-r em:first-child{margin-top:9px}
.fq-r em:last-child{width:64%}
.fq-q.q2,.fq-q.q2 .fq-pm,.fq-q.q2 .fq-r{animation-delay:4s}
.fq-q.q3,.fq-q.q3 .fq-pm,.fq-q.q3 .fq-r{animation-delay:8s}
@keyframes fqOuvre{0%,4%{max-height:0}12%,26%{max-height:30px}33%,100%{max-height:0}}
@keyframes fqPm{0%,4%{transform:none;background:#fff;border-color:var(--line2)}10%,26%{transform:rotate(45deg);background:var(--brand);border-color:var(--brand)}33%,100%{transform:none;background:#fff;border-color:var(--line2)}}
@keyframes fqCarte{0%,4%{background:var(--bg2);border-color:var(--line)}10%,26%{background:#fff;border-color:var(--brand-line)}33%,100%{background:var(--bg2);border-color:var(--line)}}
.bt-faqa .bp-bas{align-items:center}

@media(max-width:1000px){.bt-photo{min-height:240px}}
@media(prefers-reduced-motion:reduce){
  .bp-slides img,.bp-dots i,.fq-q,.fq-pm,.fq-r{animation:none}
  .bp-slides img:first-child{opacity:1}
  .fq-q.q1 .fq-r{max-height:30px}
  .fq-q.q1 .fq-pm{transform:rotate(45deg);background:var(--brand);border-color:var(--brand)}
}

/* Titre « Ce que l'isolation… » centré, sur deux lignes. */
.stack-h{text-align:center;max-width:none;margin-left:auto;margin-right:auto;text-wrap:initial}
@media(max-width:700px){.stack-br{display:none}.stack-h{text-wrap:balance}}

/* Bento : les deux colonnes basses prennent la même hauteur. */
.bt-col{align-self:stretch}
.bt-col>.bt{height:100%}
.fq{gap:5px}
.fq-q{padding:7px 12px}

/* Carte du formulaire : l'équipe en vignettes, prises sur nos chantiers. */
.qz-team{display:flex;flex:none;padding-left:10px}
.qz-team>*{width:46px;height:46px;margin-left:-10px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(31,39,51,.18)}
.qz-team img{object-fit:cover}
.qz-team-logo{display:flex;align-items:center;justify-content:center;background:var(--brand-tint)}
.qz-team-logo img{width:20px;height:20px;border:0;box-shadow:none;margin:0;border-radius:0}