/* Système de design — dérivé du seed, propre à ce site. */
:root{
--m:hsl(182 73% 46%);--md:hsl(182 73% 34%);--ml:hsl(182 73% 62%);
--a:hsl(42 90% 52%);--ad:hsl(42 90% 43%);--ae:hsl(182 40% 12%);
--enc:hsl(182 22% 14%);--encd:hsl(182 12% 38%);--bord:hsl(182 18% 88%);
--voile:hsl(182 60% 96%);--voile2:hsl(182 50% 92%);--fondalt:hsl(182 24% 98%);
--r:4px;--rb:999px;
--os:0 2px 4px rgba(15,23,42,.05);--om:0 6px 18px rgba(15,23,42,.07);--ol:0 14px 36px rgba(15,23,42,.10);
--bs-body-font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--bs-body-color:hsl(182 22% 14%);
--bs-body-bg:#fff;
--bs-primary:hsl(182 73% 46%);
--bs-link-color:hsl(182 73% 34%);
--bs-link-hover-color:hsl(182 73% 46%);
--bs-border-color:hsl(182 18% 88%);
--bs-emphasis-color:hsl(182 22% 14%);
--bs-secondary-color:hsl(182 12% 38%);
}
body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;color:var(--enc);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.display-6{font-family:Verdana, Geneva, system-ui, sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.text-body-secondary{color:var(--encd)!important}
a{text-underline-offset:.18em}

/* ---- En-tete : compact, colle en haut, se lit sur telephone ------------ */
.navbar{background:#fff!important;border-bottom:1px solid var(--bord);
position:sticky;top:0;z-index:1040;box-shadow:var(--os);padding-top:.5rem;padding-bottom:.5rem}
.navbar-brand{font-family:Verdana, Geneva, system-ui, sans-serif;font-weight:800;
color:var(--md)!important;display:inline-flex;align-items:center;gap:.5rem;
font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rovita85{width:1.7em;height:1.7em;flex:0 0 auto;border-radius:calc(var(--r) * .6);
background:linear-gradient(140deg,var(--m),var(--md));color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-weight:800;font-size:.82em;letter-spacing:0}

/* ---- Boutons ---------------------------------------------------------- */
.btn{border-radius:var(--rb);font-weight:650;padding:.62rem 1.15rem;
border-width:1px;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-success,.btn-dark{background:var(--a);border-color:var(--a);color:var(--ae)}
.btn-primary:hover,.btn-success:hover,.btn-dark:hover,
.btn-primary:focus,.btn-success:focus,.btn-dark:focus{background:var(--ad);border-color:var(--ad);color:var(--ae);box-shadow:var(--om)}
.btn-outline-secondary{border-color:var(--bord);color:var(--encd);background:#fff}
.btn-outline-secondary:hover{background:var(--voile);border-color:var(--m);color:var(--md)}
/* ⚠️ Sans cette ligne, le .btn ci-dessus écrase le .btn-sm de Bootstrap
   (même spécificité, déclaré après) : le bouton de l'en-tête passait à la
   taille normale, poussait le menu à la ligne et l'en-tête mangeait un tiers
   de l'écran sur téléphone. */
.btn-sm{padding:.38rem .8rem;font-size:.86rem}
.btn-lg{padding:.85rem 1.4rem;font-size:1.05rem}

/* ---- Hero ------------------------------------------------------------- */
.fakaka37{background:linear-gradient(105deg, hsl(182 73% 34%) 0 58%, hsl(182 73% 46%) 58% 100%);color:#fff;position:relative;overflow:hidden}
.fakaka37 h1{color:#fff;font-size:clamp(1.95rem,5.2vw,3.35rem);line-height:1.07;
letter-spacing:-.028em;font-weight:800;margin-bottom:0.81rem}
.fakaka37 .lead{color:rgba(255,255,255,.86);font-size:clamp(1.02rem,2.2vw,1.19rem);line-height:1.55}
.fakaka37 a{color:#fff}
/* Pastille compacte : inline-flex sur un <p> occupe toute la largeur des
   qu'elle est seule sur sa ligne. max-width:max-content la ramene a la
   taille de son texte, sinon elle forme une bande jaune pleine largeur qui
   entre en concurrence avec le bouton d'action. */
.luta39{display:inline-flex;align-items:center;gap:.45rem;max-width:max-content;
background:var(--a);color:var(--ae);font-weight:700;font-size:.78rem;line-height:1.3;
padding:.34rem .8rem;border-radius:999px;margin-bottom:0.81rem;box-shadow:var(--os)}
.zuro59{margin-top:1.44rem}
/* Note moyenne des professionnels reference sur la commune. Ce n'est PAS un
   avis client -- on n'en invente pas -- mais une agregation de donnees
   publiques reelles, que le corpus demandait sous le nom d'« avis clients ».
   Elle n'apparait qu'a partir de deux fiches notees : une moyenne sur un seul
   avis ne veut rien dire. */
.data72{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
margin:0 0 0.81rem;font-size:.88rem;color:rgba(255,255,255,.86)}
.data72 b{color:#fff}
.data72 .lulu33{color:rgba(255,255,255,.32);font-size:1rem}
.dape31{list-style:none;padding:0;margin:0}
.dape31 li{position:relative;padding-left:1.85rem;margin-bottom:.62rem;
color:rgba(255,255,255,.86);font-size:.97rem;line-height:1.45}
.dape31 li::before{content:"";position:absolute;left:0;top:.16em;
width:1.2rem;height:1.2rem;border-radius:999px;background:var(--a);
-webkit-mask:no-repeat center/.72rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask:no-repeat center/.72rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---- Formulaire : le produit. Il doit paraitre simple et sûr. --------- */
/* ⚠️ La carte REPREND l'encre du corps. Le hero pose color:#fff sur toute la
   section, et cette couleur descend dans la carte blanche : sans ce rappel,
   le titre du formulaire et les questions s'affichent en blanc sur blanc.
   Le HTML est correct, le texte est bien la -- il est juste invisible. */
.dalune51{background:#fff;border:1px solid var(--bord);border-radius:calc(var(--r) + 4px);
box-shadow:var(--ol);padding:1.35rem;color:var(--enc)}
.dalune51 p,.dalune51 .h5,.dalune51 span{color:var(--enc)}
.dalune51 .text-body-secondary,.dalune51 .zumi17{color:var(--encd)}
.dalune51 .form-control{border-radius:var(--r);border-color:var(--bord);
padding:.7rem .85rem;font-size:1rem}
.dalune51 .form-control:focus{border-color:var(--m);box-shadow:0 0 0 .2rem hsl(182 73% 46%)22}
.dalune51 label{font-weight:600;font-size:.9rem;color:var(--encd);margin-bottom:.28rem}

/* Micro-reassurance : une ligne sous le titre, une sous le bouton. Ce sont
   les deux moments ou l'hesitation se produit -- avant de commencer, et juste
   avant d'envoyer ses coordonnees. Les pictogrammes sont des masques SVG en
   ligne : aucune requete tierce, donc aucune URL partagee entre les sites. */
.zumi17{display:flex;align-items:center;gap:.4rem;
color:var(--encd);font-size:.83rem;line-height:1.35;margin:-.35rem 0 0.81rem}
.zumi17::before{content:"";width:.95rem;height:.95rem;flex:0 0 auto;
background:var(--m);
-webkit-mask:no-repeat center/contain var(--ico);mask:no-repeat center/contain var(--ico)}
.zumi17[data-ico="sur"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 2.5 3.2v4.3c0 3.4 2.3 6.5 5.5 7.5 3.2-1 5.5-4.1 5.5-7.5V3.2z' fill='%23000'/%3E%3C/svg%3E")}
.zumi17[data-ico="cle"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V4.8a3.5 3.5 0 1 1 7 0V7H13v8H3V7z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}

/* Bandeau de chiffres sous le hero.
   Des valeurs, pas des promesses : la promesse est deja dans les USP juste
   au-dessus, et la repeter n'ajoute rien. Un chiffre issu du perimetre
   reellement calcule se verifie, une promesse non. */
.roso83{display:grid;grid-template-columns:repeat(2,1fr);gap:0.90rem 1.26rem;
margin-top:1.35rem;padding-top:1.17rem;border-top:1px solid rgba(255,255,255,.22)}
.roso83 div{display:flex;flex-direction:column;gap:.1rem}
.roso83 b{font-family:Verdana, Geneva, system-ui, sans-serif;font-size:1.45rem;font-weight:800;
line-height:1.1;color:#fff}
.roso83 span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
font-weight:600;color:rgba(255,255,255,.86)}
@media (min-width:576px){.roso83{grid-template-columns:repeat(4,1fr)}}

/* Progression : sans elle, un formulaire en 5 etapes parait sans fin. */
.glsn49{display:flex;align-items:center;gap:.4rem;margin-bottom:0.99rem}
.glsn49 span{flex:1 1 0;height:.34rem;border-radius:999px;background:var(--voile2)}
.glsn49 span[data-on]{background:var(--m)}
.vibr24{font-size:.78rem;color:var(--encd);font-weight:600;margin-bottom:.5rem}

/* Options en cartes cliquables : sur telephone, une pastille radio de 16 px
   est une cible trop petite. Toute la carte devient la zone de clic. */
.glzu17{display:block;position:relative;margin-bottom:.55rem}
.glzu17 input{position:absolute;opacity:0;width:0;height:0}
.glzu17 span{display:flex;align-items:center;gap:.7rem;min-height:3rem;
padding:.72rem .9rem;border:1.5px solid var(--bord);border-radius:var(--r);
background:#fff;cursor:pointer;font-weight:550;line-height:1.3;
transition:border-color .12s ease,background-color .12s ease}
.glzu17 span::before{content:"";width:1.15rem;height:1.15rem;flex:0 0 auto;
border-radius:999px;border:2px solid var(--bord);transition:border-width .12s ease}
.glzu17 input:checked + span{border-color:var(--m);background:var(--voile)}
.glzu17 input:checked + span::before{border-color:var(--m);border-width:.38rem}
.glzu17 input:focus-visible + span{outline:2px solid var(--m);outline-offset:2px}

/* ---- Sections --------------------------------------------------------- */
.mika63{padding-top:2.34rem;padding-bottom:2.34rem}
.mika63 + .mika63{border-top:1px solid var(--bord)}
.kafape33{background:var(--fondalt)}
/* Filet court sous le titre de section. Un trait de 2,6rem suffit a poser un
   rythme et a signaler un debut de section -- c'est le detail qui distingue
   une page composee d'une page empilee. */
.miluso26{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:1.17rem;
padding-bottom:0.63rem;position:relative}
.miluso26::after{content:"";position:absolute;left:0;bottom:0;
width:2.6rem;height:3px;border-radius:2px;background:var(--a)}

/* ---- Comment ça marche : etapes numerotees ---------------------------- */
/* Les trois etapes sur une rangee, titre au-dessus. La version precedente
   mettait le titre dans une colonne de gauche : avec une intro d'une phrase,
   la moitie gauche de l'ecran restait vide sur grand ecran. */
.luka31{max-width:62ch;margin-bottom:1.26rem}
.dasnvi67{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:768px){.dasnvi67{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.mivi43{display:flex;gap:.95rem;align-items:flex-start;background:#fff;height:100%;
border:1px solid var(--bord);border-radius:var(--r);padding:0.90rem;box-shadow:var(--os);
margin-bottom:.7rem}
.mivi43 b{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:999px;
background:var(--m);color:#fff;display:flex;align-items:center;justify-content:center;
font-size:.95rem}

/* ---- Bandeau d'appel : coupe la page et relance vers le formulaire ----- */
.data30{background:var(--a);color:var(--ae)}
.data30 a{background:var(--enc);color:#fff;border-color:var(--enc)}
.data30 a:hover{background:#000;border-color:#000;color:#fff}

/* ---- Listing des professionnels --------------------------------------- */
/* Fiches en cartes structurees : nom, pastille de note, adresse et horaires
   precedes d'un pictogramme, le tout sur une grille. Les pictogrammes sont
   des masques SVG en ligne -- aucune police d'icones, donc aucune requete
   tierce ni URL partagee entre les sites du reseau. */
.davilu56 > li{background:#fff;border:1px solid var(--bord);
border-radius:calc(var(--r) + 2px);padding:1.03rem 1.08rem;margin-bottom:.7rem;
box-shadow:var(--os);display:flex;flex-direction:column;gap:.45rem}
.davilu56 > li > div:first-child{font-size:1.02rem;color:var(--md);
line-height:1.35;font-weight:700}
.glzumi62{background:#fff;border:1px solid var(--bord);
border-radius:var(--r);padding:0.85rem;margin-bottom:.6rem;box-shadow:var(--os)}
.rofata76{color:var(--encd);font-size:.86rem}

/* Pastille de note : la note et le nombre d'avis forment un bloc autonome,
   pas une suite de texte gris perdue sous le nom. */
.sone16{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
background:var(--voile);border:1px solid var(--bord);border-radius:999px;
padding:.2rem .6rem;font-size:.8rem;color:var(--encd)}
.sone16 b{color:var(--enc)}

.lulu33{display:inline-block;position:relative;color:var(--bord);
font-size:.92rem;letter-spacing:.08em;vertical-align:-1px}
.lulu33::before{content:"★★★★★"}
.lulu33 b{position:absolute;left:0;top:0;overflow:hidden;color:var(--a);white-space:nowrap}
.lulu33 b::before{content:"★★★★★"}

/* Lignes d'information : un pictogramme cale la colonne, le texte s'aligne. */
.rota72{display:flex;gap:.5rem;align-items:flex-start;font-size:.87rem;color:var(--encd)}
.rota72::before{content:"";width:.92rem;height:.92rem;flex:0 0 auto;margin-top:.18rem;
background:var(--m);opacity:.55;
-webkit-mask:no-repeat center/contain var(--ico);mask:no-repeat center/contain var(--ico)}
.rota72[data-ico="lieu"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a5 5 0 0 0-5 5c0 3.5 5 9 5 9s5-5.5 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z' fill='%23000'/%3E%3C/svg%3E")}
.rota72[data-ico="heure"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.4V8l2.6 1.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Horaires : une ligne par plage, le libelle de jours cale en colonne. */
.tafafa18{font-size:.82rem;color:var(--encd);display:flex;flex-direction:column;gap:.12rem}
.tafafa18 div{display:flex;gap:.5rem}
.tafafa18 span{flex:0 0 5.4rem;font-weight:600;color:var(--enc);opacity:.72}

/* ---- Maillage : meme structure, poids visuel reduit ------------------- */
/* La structure ne change pas -- liens texte separes par des points medians,
   c'est ce que demandent les ressources. Ce qui changeait la page en mur de
   couleur, c'est le poids visuel : taille du corps de texte, interlignage
   double et liens tous soulignes en teinte de marque. */
.zuka20{font-size:.84rem;line-height:1.75;color:var(--encd)}
.zuka20 a{color:var(--encd);text-decoration:none;
border-bottom:1px solid var(--bord);overflow-wrap:anywhere}
.zuka20 a:hover{color:var(--md);border-bottom-color:var(--m)}
.zuka20 .small{opacity:.65;font-size:.78rem}
/* Le bloc des principales communes ne porte que des noms : une grille de
   pastilles se lit d'un coup d'oeil, la ou une phrase continue de liens
   soulignes forme un pave. Le bloc de proximite, lui, garde ses ancres
   variees et ses distances -- ce sont deux blocs qui ne disent pas la meme
   chose, ils ne doivent pas se ressembler. */
.nero91{display:flex;flex-wrap:wrap;gap:.4rem}
/* Les ancres du maillage sont longues par construction (« installation de
   monte-escalier pres de Chalons-en-Champagne ») : la pastille doit pouvoir
   passer a la ligne, sinon elle deborde de l'ecran. D'ou un rayon modere
   plutot qu'une vraie pilule, qui rend mal sur deux lignes. */
.nero91 a{display:inline-block;padding:.32rem .72rem;border-radius:calc(var(--r) + 2px);
background:var(--voile);border:1px solid var(--bord);color:var(--md);
font-size:.83rem;font-weight:600;line-height:1.4;text-decoration:none;
max-width:100%;overflow-wrap:anywhere}
.nero91 a span{font-weight:500;opacity:.6;white-space:nowrap}
.nero91 a:hover{background:var(--m);border-color:var(--m);color:#fff}
.nero91 a:hover span{opacity:.85}

/* ---- FAQ : <details> natifs, aucun JS ---------------------------------- */
.glgl76 details{border:1px solid var(--bord);border-radius:var(--r);
background:#fff;margin-bottom:.55rem;overflow:hidden;box-shadow:var(--os)}
.glgl76 summary{display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:0.85rem 0.95rem;cursor:pointer;list-style:none;
font-family:Verdana, Geneva, system-ui, sans-serif;min-height:3.2rem}
/* La fleche par defaut de Safari et Chrome doit partir, sinon on en a deux. */
.glgl76 summary::-webkit-details-marker{display:none}
.glgl76 summary h3{font-size:1rem;font-weight:650;margin:0;line-height:1.35}
.glgl76 summary::after{content:"";width:.72rem;height:.72rem;flex:0 0 auto;
border-right:2.4px solid var(--encd);border-bottom:2.4px solid var(--encd);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.glgl76 details[open] summary{background:var(--voile);color:var(--md)}
.glgl76 details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);
border-color:var(--m)}
.glgl76 details > div{padding:0 0.95rem 0.95rem;line-height:1.65;color:var(--encd)}
.glgl76 summary:focus-visible{outline:2px solid var(--m);outline-offset:-2px}

/* ---- Bloc SEO : premier dans le DOM, dernier a l'ecran ---------------- */
/* ⚠️ MEME mesure, et en REM, pour les deux blocs.
   L'unite ch depend de la taille de police : 72ch sur le lede (1.06rem) est
   plus large que 72ch sur le corps du texte. Les deux blocs etant centres,
   leurs bords gauches ne tombaient pas au meme endroit et le titre du texte
   SEO demarrait en retrait du paragraphe au-dessus -- ce qui se lit comme un
   defaut d'alignement, pas comme une intention. */
/* ⚠️ Colonne de lecture ALIGNEE A GAUCHE, sur le meme bord que toutes les
   autres sections -- pas centree.
   Centree, elle demarrait 390 px plus a droite que les pastilles du maillage
   juste au-dessus : le regard perdait le fil vertical d'une section a
   l'autre. Une page se tient par la constance de son bord gauche, pas par le
   centrage de chaque bloc. C'est ce que font les references.
   50rem ~ 75 caracteres : la mesure reste confortable a lire. */
/* La colonne de lecture fait desormais 7/12 de la grille : sa mesure est
   donnee par la colonne, pas par un max-width. Le plafond ne sert plus que
   sous 992px, ou la colonne occupe toute la largeur. */
.dabr24{max-width:50rem;font-size:1.06rem}
.zusoda53{max-width:50rem}
/* Sur grand ecran, la colonne de lecture se CENTRE dans sa section. Collee a
   gauche, elle laissait un tiers d'ecran blanc a droite -- le vide se lisait
   comme un manque, pas comme une marge. La section a son propre fond (alt) :
   une colonne centree y parait deliberee, et le mobile n'est pas touche. */
@media (min-width:992px){
.dabr24,.zusoda53{margin-left:auto;margin-right:auto}
}
/* L'illustration reste dans le flux, un peu moins large que la colonne de
   lecture, et recadree pour ne pas occuper un demi-ecran quand le visuel de
   la banque est en portrait. */
/* Meme largeur que le texte : une image plus etroite que la colonne cree un
   decrochage a droite, comme un bloc mal pose. */
.zusoda53 figure{max-width:none}
/* ⚠️ Les <h3> viennent des banques de contenu SANS classe : ils heritaient
   donc du 1.75rem de Bootstrap, plus la graisse 800 posee plus haut sur tous
   les titres. Resultat : un sous-titre presque aussi gros que le titre de
   section, et plus aucune hierarchie de lecture. */
/* Le titre de section a besoin d'air EN DESSOUS aussi : colle au premier
   sous-titre, les deux se lisaient comme un seul pave de titres. */
.zusoda53 h2{font-size:1.42rem;font-weight:700;margin-top:2.16rem;margin-bottom:0.99rem}
.zusoda53 h3{font-size:1.12rem;font-weight:700;letter-spacing:-.005em;
margin-top:1.71rem;margin-bottom:0.45rem}
/* Plus d'air AVANT un titre qu'apres : c'est ce qui le rattache au texte
   qu'il introduit plutot qu'a celui qui precede. */
/* ⚠️ Enfants DIRECTS seulement. Sans le >, ce selecteur matchait chaque h3
   des banques de contenu -- chacun est le premier enfant de son conteneur
   de bloc -- et leur retirait toute marge haute : les sous-titres se
   collaient au paragraphe precedent sur toute la page. */
.zusoda53 > h2:first-child,.zusoda53 > h3:first-child{margin-top:0}
.zusoda53 p{line-height:1.7;margin-bottom:0.85rem;color:var(--enc)}
.zusoda53 p + p{margin-top:0}
.zusoda53 strong{color:var(--md)}

/* ---- Pied de page ----------------------------------------------------- */
.kasoso77{background:var(--enc);color:rgba(255,255,255,.72);
padding-top:2.34rem;padding-bottom:1.62rem;font-size:.9rem}
/* La marque doit se lire sur fond sombre : la teinte de marque, calculee pour
   du texte sur blanc, y passe mal. On bascule en blanc. */
.kasoso77 .navbar-brand{color:#fff!important;font-size:1.05rem}
.kasoso77 a{color:rgba(255,255,255,.86);text-decoration:none}
.kasoso77 a:hover{color:#fff;text-decoration:underline}
.kasoso77 h2{color:rgba(255,255,255,.5);font-size:.76rem;letter-spacing:.09em;
text-transform:uppercase;margin-bottom:.85rem;font-weight:700}
/* Liens en colonne plutot qu'en ligne separee par des points : sur telephone,
   quatre liens colles font une cible tactile impossible. */
.kasoso77 nav{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
/* Communes principales : deux colonnes compactes. Une dizaine de liens, pas
   la centaine -- lister toutes les communes couvertes diluerait exactement ce
   que ce bloc cherche a concentrer. */
.snzusn32{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:.5rem 1rem;font-size:.86rem}
.snzusn32 a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kasoso77 hr{border-color:rgba(255,255,255,.16);opacity:1}

/* ---- Images ----------------------------------------------------------- */
figure{margin:0 0 1.08rem}
/* Les visuels de la banque sont parfois en portrait : sans plafond de
   hauteur, un escalier vertical occupe 450 px au milieu du texte et coupe la
   lecture en deux. On recadre plutot que de laisser filer. */
/* ⚠️ Rapport d'image FIXE plutot qu'un plafond de hauteur.
   max-height combine a height:auto ne recadre pas : il met l'image a
   l'echelle et laisse une bande claire en bas. aspect-ratio + cover
   recadre reellement, et donne le meme format a toutes les pages quelle que
   soit l'orientation du visuel tire de la banque -- portrait ou paysage. */
figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
border-radius:var(--r);box-shadow:var(--om)}
figcaption{color:var(--encd);font-size:.83rem;margin-top:.45rem}

/* ---- Fil d'Ariane ----------------------------------------------------- */
.fatasn81{font-size:.84rem;color:var(--encd);padding:.6rem 0}
.fatasn81 a{color:var(--encd)}

/* ---- Barre d'action mobile -------------------------------------------- */
/* Sous 992px le formulaire quitte le flux sticky et sort de l'ecran des
   qu'on lit la page : ce rappel est la seule facon d'y revenir. */
.sovi30{position:fixed;left:0;right:0;bottom:0;z-index:1050;
padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
border-top:1px solid var(--bord);box-shadow:0 -6px 20px rgba(15,23,42,.09)}
@media (max-width:991.98px){body{padding-bottom:4.9rem}}
@media (min-width:992px){.sovi30{display:none}}

/* Survol : la carte se souleve legerement. Suffisant pour signaler qu'un
   bloc est vivant, sans animation qui distraie du formulaire. */
@media (hover:hover){
.mivi43:hover,.davilu56 > li:hover{transform:translateY(-2px);box-shadow:var(--om)}
}
.mivi43,.davilu56 > li{transition:transform .14s ease,box-shadow .14s ease}

/* Grand ecran : on respire davantage. Le telephone reste la reference, mais
   le meme rythme etire sur 1400 px donne une page tassee. */
@media (min-width:992px){
.mika63{padding-top:3.06rem;padding-bottom:3.06rem}
.fakaka37{padding-top:3.42rem;padding-bottom:3.78rem}
}

/* ---- Grand ecran : occuper la largeur, pas l'etirer ------------------- */
/* Tout est concu pour une colonne etroite. Etire sur 1320 px, une fiche
   d'entreprise fait 1300 px de large pour trois lignes de texte, et le bloc
   de texte reste colle a gauche avec un vide a droite. On repartit. */
@media (min-width:992px){
/* Les fiches passent sur deux colonnes : leur contenu est court, elles n'ont
   aucune raison de traverser l'ecran. */
.davilu56{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:.8rem;align-items:start}
.davilu56 > li{margin-bottom:0}

/* La FAQ aussi : six questions en colonne unique font defiler pour rien. */
.glgl76{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:.6rem 1rem;align-items:start}
.glgl76 details{margin-bottom:0}

/* Le bloc SEO garde sa colonne de lecture -- 74 caracteres, c'est la bonne
   mesure et l'elargir nuirait -- mais on la CENTRE au lieu de la laisser
   collee a gauche : une colonne centree se lit comme un choix, une colonne
   collee a gauche comme un oubli. */


/* L'illustration remonte a cote du texte plutot que de le couper en deux. */
/* Pas de flottant. Habiller le texte autour de l'image faisait passer un
   meme paragraphe d'une colonne etroite a la pleine largeur en cours de
   route -- le lecteur bute a chaque ligne. L'illustration reste un bloc,
   simplement moins large que la colonne de lecture. */

}

/* ---- Mobile d'abord : c'est le rendu qui compte ----------------------- */
.sofami28{min-height:60vh}
.sobr53{position:sticky;top:5rem}
@media (max-width:991.98px){
/* Le formulaire remonte ENTRE le titre et les preuves. La colonne de gauche
   s'efface (display:contents) pour que ses deux blocs deviennent des elements
   de la rangee et puissent etre ordonnes autour de #devis. Sans ce transfert,
   soit le formulaire passe sous les preuves, soit un vide s'ouvre a gauche sur
   grand ecran -- on ne peut pas avoir les deux avec une seule colonne. */
.glluso41{display:contents}
.glbrsn65,.zuro59{width:100%;
padding-left:calc(var(--bs-gutter-x) * .5);padding-right:calc(var(--bs-gutter-x) * .5)}
.glbrsn65{order:0}
#devis{order:1;margin-top:1.17rem}
.zuro59{order:2;margin-top:1.17rem}
.sobr53{position:static}
/* Le bouton de l'en-tete fait doublon avec la barre fixe du bas, qui est
   toujours a l'ecran sous 992px. Deux appels a l'action identiques a 100 px
   d'ecart ne convertissent pas mieux : ils encombrent, et ils poussent la
   marque a la ligne. */
.navbar .btn{display:none}
.navbar-brand{font-size:1rem}
/* Le corps de texte : 17px sur un ecran de 390px fait un mur. */
.dabr24{font-size:1rem;line-height:1.6}
.zusoda53 p{line-height:1.62;font-size:.97rem}
.fakaka37{text-align:left}
.mika63{padding-top:1.62rem;padding-bottom:1.62rem}
.dalune51{padding:1.03rem;border-radius:var(--r)}
.zuka20{line-height:1.95}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}