:root{--bleu:#0A88EE;--bleu-fonce:#0356C0;--bleu-clair:#32B2FB;--bleu-pale:#E8F4FE;--encre:#0B2C58;--gris:#55677D;
  --ligne:#D3E6F7;--or:#E8A33D;--vert:#1E8E4E;--rouge:#C0392B;--blanc:#fff;--pad:clamp(1.25rem,5vw,4rem);--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px;overflow-x:clip}
body{margin:0;background:#fff;color:var(--encre);font-family:"Public Sans",system-ui,sans-serif;font-size:clamp(1rem,.97rem + .2vw,1.08rem);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,1rem + 3.4vw,3.3rem)}h2{font-size:clamp(1.45rem,1.1rem + 1.5vw,2.15rem)}h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1rem}a{color:var(--bleu-fonce)}img{display:block;max-width:100%}ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.btn{display:inline-block;padding:.85rem 1.45rem;border-radius:100px;background:var(--bleu);color:#fff;font-weight:700;text-decoration:none;font-size:1rem;border:2px solid var(--bleu);cursor:pointer;font-family:inherit;transition:background-color .2s,border-color .2s}
.btn:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce)}
.btn-ligne{background:#fff;color:var(--bleu-fonce);border-color:var(--bleu-clair)}.btn-ligne:hover{background:var(--bleu-pale);border-color:var(--bleu)}
section{padding-block:clamp(2.4rem,5.5vw,4.5rem)}
.sous{color:var(--gris);max-width:62ch}
/* fil d'Ariane */
.fil{font-size:.88rem;color:var(--gris);padding-top:1.1rem}.fil a{text-decoration:none;color:var(--bleu-fonce)}.fil span{margin:0 .4rem;color:#9FB4CA}
/* héros */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(1.6rem,4vw,3rem) clamp(2.2rem,5vw,4rem);
  background:linear-gradient(168deg,#DCEEFD 0%,#EEF7FE 40%,#fff 100%)}
.hero>.wrap{position:relative;z-index:2}
.bulles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bulles b{position:absolute;top:106%;left:var(--x);width:var(--w);height:var(--w);border-radius:50%;animation:bulle-monte var(--t) linear var(--d) infinite;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98) 0 10%,rgba(50,178,251,.55) 30%,rgba(10,136,238,.32) 58%,rgba(10,136,238,.2) 76%,rgba(3,86,192,.5) 100%);
  border:1px solid rgba(10,136,238,.38);box-shadow:inset 0 -8px 16px rgba(255,255,255,.75),inset 0 5px 12px rgba(10,136,238,.26),0 4px 16px rgba(10,136,238,.22)}
@keyframes bulle-monte{0%{top:106%;opacity:0;transform:translateX(0) scale(.85)}7%{opacity:1}92%{opacity:1}100%{top:-32%;opacity:0;transform:translateX(var(--dx)) scale(1.1)}}
@media(max-width:700px){.bulles b:nth-child(4n){display:none}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:1rem}
.hero .lead{margin:1.1rem 0 0;font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:var(--gris);max-width:56ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero-note{margin:1.1rem 0 0;font-size:.92rem;color:var(--gris)}.hero-note b{color:var(--encre)}.etoiles{color:var(--or);letter-spacing:.05em}
.hero-fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 26px 60px -30px rgba(3,86,192,.45);background:#fff}
.hero-fig img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-fig{order:-1}}
/* inclus */
.inclus{background:#fff}
.inclus-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.coches{list-style:none;display:grid;gap:.7rem}
.coches li{position:relative;padding-left:2rem;color:var(--encre)}
.coches li::before{content:"";position:absolute;left:0;top:.28em;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--bleu);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><path d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
@media(max-width:820px){.inclus-grid{grid-template-columns:1fr}}
/* méthode */
.methode{background:var(--bleu-pale)}
.etapes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.8rem;counter-reset:etape}
.etapes li{background:#fff;border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem;border:1px solid var(--ligne);counter-increment:etape}
.etapes li::before{content:counter(etape);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;margin-bottom:.8rem}
.etapes h3{margin-bottom:.45rem}.etapes p{margin:0;color:var(--gris);font-size:.96rem}
@media(max-width:960px){.etapes{grid-template-columns:1fr 1fr}}@media(max-width:560px){.etapes{grid-template-columns:1fr}}
/* problèmes */
.problemes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 2rem;margin-top:1.6rem}
.problemes-grid h3{margin-bottom:.4rem;color:var(--bleu-fonce)}.problemes-grid p{margin:0;color:var(--gris)}
@media(max-width:820px){.problemes-grid{grid-template-columns:1fr}}
/* avant / après */
.comparo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.comparo figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 18px 40px -26px rgba(3,86,192,.45)}
.comparo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.comparo figcaption{position:absolute;left:.8rem;top:.8rem;background:var(--encre);color:#fff;font-weight:700;font-size:.82rem;padding:.3rem .7rem;border-radius:100px}
.comparo .apres figcaption{background:var(--bleu)}
.comparo-note{margin:.9rem 0 0;color:var(--gris);font-size:.92rem}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.6rem}
.galerie figure{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 18px 40px -26px rgba(3,86,192,.45)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}.galerie figcaption{padding:.7rem .9rem;font-size:.88rem;color:var(--gris)}
@media(max-width:640px){.comparo{grid-template-columns:1fr}}
/* réassurance */
.assur{background:var(--encre);color:#fff;padding-block:1.6rem}
.assur ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem 2rem}
.assur b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem}.assur span{color:#B9D6F3;font-size:.92rem}
/* faq */
.faq details{border-bottom:1px solid var(--ligne);padding:.2rem 0}
.faq summary{cursor:pointer;font-weight:700;padding:.9rem 2rem .9rem 0;list-style:none;position:relative;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;font-size:1.5rem;color:var(--bleu);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1rem;color:var(--gris);max-width:70ch}
/* autres prestations */
.autres ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;margin-top:1.4rem}
.autres a{display:block;padding:.85rem 1rem;border:1.5px solid var(--ligne);border-radius:10px;text-decoration:none;font-weight:600;color:var(--encre);background:#fff}
.autres a:hover{border-color:var(--bleu);color:var(--bleu-fonce)}

/* ---------- devis ---------- */
.devis{background:var(--encre);color:#DCE7F3;padding-block:clamp(2.6rem,6vw,5rem);position:relative;isolation:isolate}
.devis h2{color:#fff;max-width:18ch}
.devis-tete{max-width:56ch;margin-bottom:2rem}
.devis-tete p{color:#9FB4CA;margin-bottom:0}
.devis-grille{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:start}
@media(max-width:860px){.devis-grille{grid-template-columns:1fr}}
.devis-contact{padding-top:.5rem}
.devis-ou{font-weight:600;color:#fff;font-size:.95rem;margin-bottom:.25rem}
.devis-central{font-size:.86rem;color:#9FB4CA;margin:0 0 .9rem}
.devis-contact a{color:#fff;text-decoration:none;font-weight:600;font-size:1.12rem;display:block;margin-bottom:.35rem}
.devis-contact a:hover{color:var(--bleu-clair)}
.devis-contact small{color:#9FB4CA}
.form{background:#fff;color:var(--encre);padding:clamp(1.3rem,3vw,2.2rem);border-radius:10px}
.champ{margin-bottom:1.05rem;position:relative}
.champ label{display:block;font-weight:600;font-size:.91rem;margin-bottom:.35rem}
.champ input,.champ select,.champ textarea{width:100%;font-family:inherit;font-size:1rem;padding:.7rem .8rem;
  border:1.5px solid var(--ligne);border-radius:6px;background:#fff;color:var(--encre)}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(10,136,238,.16)}
.champ textarea{min-height:100px;resize:vertical}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.aide{font-size:.84rem;color:var(--gris);margin:.35rem 0 0}
.cases{display:flex;flex-wrap:wrap;gap:.45rem}
.case input{position:absolute;opacity:0;width:0;height:0}
.case span{display:inline-block;padding:.5rem .85rem;border:1.5px solid var(--ligne);border-radius:20px;
  font-size:.89rem;cursor:pointer;transition:all .12s ease;user-select:none}
.case input:checked + span{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu-fonce);font-weight:600}
.case input:focus-visible + span{outline:3px solid var(--bleu);outline-offset:2px}
.pot{position:absolute;left:-9999px}
.groupe{margin-bottom:1.05rem}
.groupe > .lbl{display:block;font-weight:600;font-size:.91rem;margin-bottom:.4rem}
.groupe .aide{margin:-.15rem 0 .5rem}
.profils{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.profil input{position:absolute;opacity:0;width:0;height:0}
.profil span{display:block;padding:.75rem .8rem;border:1.5px solid var(--ligne);border-radius:10px;
  font-size:.93rem;font-weight:600;text-align:center;cursor:pointer;transition:all .14s ease}
.profil input:checked + span{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu-fonce)}
.profil input:focus-visible + span{outline:3px solid var(--bleu);outline-offset:2px}
.qtes{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.55rem}
.qte{display:none}
.qte.visible{display:block}
.qte label{display:block;font-size:.84rem;font-weight:500;margin-bottom:.2rem;color:#B9CCE0}
.qte input{width:100%;font-family:inherit;font-size:1rem;padding:.55rem .7rem;
  border:1.5px solid var(--ligne);border-radius:9px;background:#fff;color:var(--encre)}
.repli{display:none}
.repli.visible{display:block}
.bascule{display:flex;gap:.7rem;align-items:flex-start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.85rem .95rem;cursor:pointer}
.bascule input{margin:.2rem 0 0;width:1.15rem;height:1.15rem;flex-shrink:0;accent-color:var(--bleu)}
.bascule b{display:block;color:#fff;font-size:.95rem}
.bascule small{color:#9FB4CA;font-size:.85rem;line-height:1.45;display:block;margin-top:.15rem}
.form .btn{width:100%;padding:1rem;font-size:1.05rem;margin-top:.4rem}
.rgpd{font-size:.81rem;color:var(--gris);margin:.9rem 0 0}
.jauge{height:5px;background:var(--bleu-pale);border-radius:99px;overflow:hidden;margin-bottom:.55rem}
.jauge span{display:block;height:100%;width:25%;border-radius:99px;
  background:linear-gradient(90deg,#4E9BE8,#9BCFF7);transition:width .4s cubic-bezier(.4,0,.2,1)}
.jauge-txt{font-size:.84rem;color:var(--gris);margin:0 0 1.15rem}
.jauge-txt b{color:var(--encre);font-weight:600}
.etape{display:none}
.etape.active{display:block}
@media(prefers-reduced-motion:no-preference){.etape.active{animation:etape-arrive .32s ease}}
@keyframes etape-arrive{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.form-nav{display:flex;gap:.7rem;margin-top:1.1rem}
.form-nav .btn{width:auto;flex:1;margin-top:0}
.btn-retour{flex:0 0 auto;background:#fff;border:1.5px solid var(--ligne);color:var(--encre);
  border-radius:10px;padding:.9rem 1.15rem;font:inherit;font-weight:600;cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.btn-retour:hover{border-color:var(--bleu);color:var(--bleu-fonce)}
.form-err{color:var(--rouge);font-size:.86rem;margin:.5rem 0 0;font-weight:600}


/* listes déroulantes à cases (surfaces, options) */
.menu-cases{position:relative}
.menu-cases summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.8rem;cursor:pointer;
  border:1.5px solid var(--ligne);border-radius:10px;padding:.8rem .95rem;background:#fff;font-weight:600;color:var(--gris);
  transition:border-color .2s ease,box-shadow .2s ease}
.menu-cases summary::-webkit-details-marker{display:none}
.menu-cases.rempli summary{color:var(--encre)}
.menu-cases summary:hover,.menu-cases[open] summary{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(10,136,238,.14)}
.menu-cases .menu-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-cases .menu-fleche{width:.7rem;height:.7rem;border-right:2px solid var(--bleu);border-bottom:2px solid var(--bleu);
  transform:rotate(45deg);margin:-.25rem .2rem 0 0;transition:transform .2s ease;flex-shrink:0}
.menu-cases[open] .menu-fleche{transform:rotate(-135deg);margin-top:.3rem}
.menu-liste{margin-top:.45rem;border:1.5px solid var(--ligne);border-radius:10px;background:#fff;padding:.45rem;
  display:grid;gap:.15rem;max-height:17rem;overflow:auto}
.menu-liste .case{display:flex;align-items:center;justify-content:space-between;padding:.62rem .8rem;border:0;border-radius:8px;
  background:transparent;font-weight:500;color:var(--encre);cursor:pointer}
.menu-liste .case:hover{background:var(--bleu-pale)}
.menu-liste .case span,.menu-liste .case input:checked + span{border:0;padding:0;background:transparent;border-radius:0;color:inherit;font-weight:inherit;line-height:1.35}
.menu-liste .case input:focus-visible + span{outline:none}
.menu-liste .case:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:-3px}
.menu-liste .case::after{content:"";width:1.05rem;height:1.05rem;border:1.5px solid var(--ligne);border-radius:5px;flex-shrink:0;margin-left:.8rem;
  background:#fff center/70% no-repeat}
.menu-liste .case:has(input:checked){background:var(--bleu-pale);font-weight:600;color:var(--bleu-fonce)}
.menu-liste .case:has(input:checked)::after{border-color:var(--bleu);background-color:var(--bleu);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>")}

/* le formulaire ne déborde jamais de l'écran, même avec un résumé long */
.devis-grille>*{min-width:0}
.form{min-width:0;max-width:100%}
.menu-cases{min-width:0;width:100%}
.menu-cases summary{width:100%;min-width:0;box-sizing:border-box}
.menu-cases .menu-txt{display:block}
/* cases à cocher (accès, récurrence) : une coche visible, pour qu'on comprenne qu'on peut sélectionner */
.cases .case span{display:inline-flex;align-items:center;gap:.55rem}
.cases .case span::before{content:"";width:1.05rem;height:1.05rem;border:1.5px solid var(--bleu-clair);border-radius:5px;flex-shrink:0;background:#fff;transition:background-color .15s ease,border-color .15s ease}
.cases .case:has(input[type=radio]) span::before{border-radius:50%}
.cases .case input:checked + span::before{border-color:var(--bleu);background:var(--bleu) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat}
.cases .case span:hover{border-color:var(--bleu)}

/* envoi : barre de progression */
.envoi{margin-top:1rem}
.envoi-barre{height:10px;border-radius:99px;background:var(--bleu-pale);overflow:hidden;border:1px solid var(--ligne)}
.envoi-barre span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--bleu-clair),var(--bleu));
  background-size:200% 100%;animation:envoi-brille 1.4s linear infinite;transition:width .35s ease}
@keyframes envoi-brille{from{background-position:0 0}to{background-position:-200% 0}}
.envoi p{margin:.55rem 0 0;font-size:.92rem;color:var(--gris);font-weight:600}

.menu-liste .menu-groupe{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);padding:.6rem .8rem .2rem}
.menu-liste .menu-groupe:not(:first-child){border-top:1px solid var(--ligne);margin-top:.3rem;padding-top:.7rem}
.menu-cases.inactif summary{color:var(--gris);background:var(--bleu-pale);cursor:not-allowed;border-style:dashed}
.menu-cases.inactif .menu-fleche{opacity:.35}

.regions-liens{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.regions-liens p{margin:0 .4rem 0 0;color:var(--gris);font-size:.92rem;width:100%}
.regions-liens a{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--encre);border:1.5px solid var(--ligne);border-radius:100px;padding:.4rem .85rem;background:#fff}
.regions-liens a:hover{border-color:var(--bleu);color:var(--bleu-fonce)}
/* validation en continu */
.form .btn[disabled],.form .btn:disabled{opacity:.45;cursor:not-allowed;background:var(--bleu);border-color:var(--bleu)}
.nav-aide{font-size:.86rem;color:var(--gris);margin:.6rem 0 0}
.champ-msg{color:var(--rouge);font-size:.84rem;font-weight:600;margin:.35rem 0 0}
.form input.invalide,.form textarea.invalide{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(192,57,43,.12)}


.suggestions{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1.5px solid var(--bleu);
  border-top:0;border-radius:0 0 6px 6px;max-height:230px;overflow-y:auto;box-shadow:0 8px 20px rgba(11,44,88,.13)}
.suggestions[hidden]{display:none}
.suggestions button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:.93rem;padding:.6rem .8rem;cursor:pointer;color:var(--encre);border-bottom:1px solid var(--ligne)}
.suggestions button:last-child{border-bottom:0}
.suggestions button:hover,.suggestions button.vise{background:var(--bleu-pale)}
.suggestions .ctx{display:block;font-size:.8rem;color:var(--gris)}

/* photos */
.photos-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.photo-btn{font:inherit;font-size:.92rem;font-weight:600;color:var(--bleu-fonce);background:#fff;
  border:2px dashed var(--ligne);border-radius:8px;padding:.85rem .6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;
  transition:border-color .15s,background .15s}
.photo-btn:hover,.photo-btn.survol{border-color:var(--bleu);background:var(--bleu-pale)}
.photos-actions.plein{display:none}
@media(max-width:430px){.photos-actions{grid-template-columns:1fr}}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem;margin-top:.8rem}
.vignettes:empty{display:none}
.vign{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--bleu-pale)}
.vign img{width:100%;height:100%;object-fit:cover}
.vign button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(11,44,88,.78);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.vign button:hover{background:var(--rouge)}
.compteur{font-size:.84rem;color:var(--gris);margin:.5rem 0 0}
.compteur.plein{color:var(--rouge);font-weight:600}