/* ============ JETONS : sa palette à lui, relevée sur son site. Le reste ne bouge pas. ============ */
:root{
  --nuit:#071427;        /* CHAMP : fond sombre, dérivé de sa couleur principale */
  --nuit-2:#0E2140;
  --marque:#004080;      /* CHAMP : sa couleur principale */
  --action:#A9C46C;      /* CHAMP : la couleur des boutons d'appel, la plus visible de sa palette */
  --action-f:#BCD67F;
  --action-encre:#0D1A04;
  --olive:#3E5220;       /* version foncée de l'action, pour les icônes et petits textes sur fond clair */
  --marque-vert:#556B2F; /* CHAMP : le vert de ses boutons, pour le bloc du titre (texte blanc dessus) */
  --fond:#F4F2EC;
  --papier:#FFFFFF;
  /* Contraste : aucun texte sous 7:1 sur son fond, sauf les très grands titres (4,5:1 minimum).
     Pas de gris moyen. Deux encres sur clair, deux encres sur sombre, c'est tout. */
  --encre:#0A1628;       /* titres sur clair */
  --texte:#1E2939;       /* texte sur clair, 13:1 */
  --texte-2:#334155;     /* texte secondaire sur clair, 9:1 */
  --clair:#FFFFFF;       /* titres et texte sur sombre */
  --clair-2:#E2E8F0;     /* texte secondaire sur sombre, 14:1 */
  --ligne:rgba(10,22,40,.14);
  --or:#F5B325;
  --r-s:12px; --r-m:18px; --r-l:26px;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px;
}
/* ============ SOCLE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:76px}
body{margin:0;background:var(--fond);color:var(--texte);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.fige{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p{margin:0}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.plein{fill:currentColor;stroke:none}
.titre{font-weight:800;font-stretch:108%;color:var(--encre);letter-spacing:-.025em;line-height:1.05;font-size:clamp(31px,4.4vw,60px);text-wrap:balance}
.chapeau{font-size:clamp(17px,1.35vw,19px);color:var(--texte);max-width:60ch;text-wrap:pretty;margin-top:16px}
.num{font-variant-numeric:tabular-nums}
section{position:relative}
.sombre{background:var(--nuit);color:var(--clair-2)}
.sombre .titre{color:var(--clair)}
.sombre .chapeau{color:var(--clair-2)}
.sombre::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pc{display:none}
@media(min-width:980px){.pc{display:inline}}

/* ============ L'ACCENT DANS LES TITRES ============ */
/* Un seul accent par page, sur la promesse qui décide (ici le prix fixé avant le déplacement), sur fond clair.
   Surligné par le bas, le trait se pose quand le titre arrive à l'écran. Un surlignage mis partout ne veut plus rien dire. */
.acc{background-image:linear-gradient(var(--action),var(--action));background-repeat:no-repeat;background-position:0 90%;background-size:100% 36%;padding:0 .06em;margin:0 -.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sombre .acc{color:var(--action);background-size:100% .09em;background-position:0 96%}
.js .acc{background-size:0% 36%;transition:background-size 1s var(--ease) .35s}
.js .sombre .acc{background-size:0% .09em}
.js .vu .acc,.js .vu.acc{background-size:100% 36%}
.js .sombre .vu .acc{background-size:100% .09em}

/* ============ BOUTONS : aucun mouvement au repos, seulement au survol ============ */
.btn-appel{display:inline-flex;align-items:center;gap:14px;background:var(--action);color:var(--action-encre);border-radius:var(--r-m);padding:12px 22px 12px 12px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 28px -14px rgba(0,0,0,.45);transition:transform .25s var(--ease),background .25s}
.btn-appel:hover{background:var(--action-f);transform:translateY(-2px)}
.btn-appel .rond{width:46px;height:46px;border-radius:12px;background:var(--action-encre);color:var(--action);display:grid;place-items:center;flex:none}
.btn-appel small{display:block;font-size:14px;font-weight:700;color:var(--action-encre)}
.btn-appel b{display:block;font-size:22px;font-weight:800;font-stretch:108%;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.btn-sec{display:none;align-items:center;gap:10px;padding:16px 22px;border-radius:var(--r-m);font-weight:700;border:1.5px solid rgba(255,255,255,.5);color:#fff;transition:border-color .25s,background .25s}
.btn-sec:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sec .ico{transition:transform .25s var(--ease)}
.btn-sec:hover .ico{transform:translateX(4px)}
.btn-plein{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:var(--r-s);font-weight:800;background:var(--encre);color:#fff;transition:background .25s}
.btn-plein:hover{background:var(--marque)}
@media(min-width:980px){.btn-sec{display:inline-flex}}

/* ============ EN-TÊTE ============ */
/* ROLE : le numéro reste à l'écran du premier au dernier pixel. Un voile sombre derrière garantit la lecture sur n'importe quelle photo.
   Sur téléphone : logo, bouton d'appel, menu. Dès qu'on quitte la bannière, bandeau d'appel plein. */
.hdr{position:fixed;inset:0 0 auto;z-index:50;padding:12px 0;background:rgba(244,242,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .35s,padding .35s,box-shadow .35s}
.hdr .wrap{display:flex;align-items:center;gap:10px}
.logo{background:#fff;border-radius:12px;padding:6px 10px;display:flex;align-items:center;flex:none;box-shadow:0 0 0 1px var(--ligne)}
.logo img{height:30px;width:auto}
.nav{display:none}
.hdr-dispo{display:none}
.point{width:9px;height:9px;border-radius:50%;background:#5BD37E;box-shadow:0 0 0 4px rgba(91,211,126,.25);flex:none}
.hdr-tel{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--action);color:var(--action-encre);font-weight:800;border-radius:12px;height:46px;min-width:46px;padding:0 12px;white-space:nowrap;transition:background .25s}
.hdr-tel:hover{background:var(--action-f)}
.hdr-tel .txt{display:none}
.burger{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--nuit);border:1.5px solid rgba(255,255,255,.2);flex:none}
/* entre la bannière et la fin du simulateur : l'en-tête clair, sur un fond de verre pour que le contenu ne passe pas dessous à nu */
.hdr.defile{background:rgba(244,242,236,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--ligne)}
.hdr.fixe{background:var(--nuit);padding:10px 0;box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
@media(min-width:560px){.hdr-tel .txt{display:inline}.hdr-tel{padding:0 16px}.logo img{height:34px}}
@media(min-width:980px){
  /* sur ordinateur, l'en-tête ne suit pas : il reste en haut de la page. Seul le bandeau d'appel sombre descend, après le simulateur. */
  .hdr{position:absolute;padding:18px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.defile:not(.fixe){background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.fixe{position:fixed;animation:bandeau .35s var(--ease)}
  @keyframes bandeau{from{transform:translateY(-100%)}to{transform:none}}
  .hdr .wrap{gap:24px}
  .burger{display:none}
  .nav{display:flex;gap:2px;margin-left:auto;background:rgba(7,20,39,.86);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:5px}
  .nav a{padding:9px 16px;border-radius:100px;font-weight:700;font-size:15px;color:#fff;transition:background .25s}
  .nav a:hover{background:rgba(255,255,255,.12)}
  .hdr-tel{margin-left:0}
  .hdr.fixe{padding:10px 0}
  .hdr.fixe .nav{display:none}
  .hdr.fixe .hdr-dispo{display:flex;align-items:center;gap:10px;margin-left:auto;color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
  .hdr-dispo span{color:var(--clair-2);font-weight:500}
}
@media(max-width:1239px){.hdr-dispo span{display:none}}

/* ============ MÉGA MENU (écran large) ============ */
/* ROLE : montrer d'un coup tout ce qu'il sait faire, chaque ligne étant une future page, et garder l'appel à portée de main. */
.nav-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 16px;border-radius:100px;font-weight:700;font-size:15px;color:#fff;transition:background .25s}
.nav-btn:hover,.nav-btn[aria-expanded=true]{background:rgba(255,255,255,.14)}
.nav-btn .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.nav-btn[aria-expanded=true] .ico{transform:rotate(180deg)}
.mega{display:none}
@media(min-width:980px){
  .mega{display:block;position:absolute;top:calc(100% - 22px);left:50%;width:min(1060px,calc(100vw - 40px));transform:translate(-50%,12px) scale(.985);transform-origin:top center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .35s var(--ease),visibility 0s .35s;z-index:70}
  .mega.ouvert{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:opacity .22s,transform .35s var(--ease)}
  .hdr.fixe .mega{display:none}
  .mega-in{background:#fff;border-radius:26px;box-shadow:0 50px 90px -30px rgba(7,20,39,.65),0 0 0 1px rgba(10,22,40,.08);display:grid;grid-template-columns:1fr 300px;overflow:hidden}
  .mg-liste{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start}
  .mg-titre{grid-column:1/-1;padding:8px 14px 10px;font-size:14px;font-weight:800;color:var(--texte-2)}
  .mg-it{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;padding:14px;border-radius:16px;transition:background .2s}
  .mg-it:hover{background:var(--fond)}
  .mg-ic{width:46px;height:46px;border-radius:13px;background:var(--fond);color:var(--encre);display:grid;place-items:center;transition:background .25s,color .25s}
  .mg-it:hover .mg-ic{background:var(--marque-vert);color:#fff}
  .mg-it b{display:flex;align-items:center;gap:8px;color:var(--encre);font-size:16.5px;font-weight:800;line-height:1.25}
  .mg-it span.d{display:block;margin-top:3px;color:var(--texte-2);font-size:14.5px;line-height:1.4}
  .mg-prix{background:var(--action);color:var(--action-encre);font-size:12.5px;font-weight:800;border-radius:100px;padding:3px 9px;white-space:nowrap}
  .mg-cote{background:var(--nuit);color:#fff;padding:28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
  .mg-cote h3,.mg-cote .mg-h{font-size:22px;font-weight:850;font-stretch:106%;line-height:1.15;color:#fff}
  .mg-cote p{font-size:15px;color:var(--clair-2)}
  .mg-cote .btn-appel{margin-top:auto;padding:10px 16px 10px 10px}
  .mg-cote .btn-appel b{font-size:19px}
  .mg-cote .btn-appel .rond{width:40px;height:40px}
  .mg-communes{padding:22px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 26px;align-content:start}
  .mg-communes .mg-titre{padding:0 0 10px}
  .mg-communes a{display:block;padding:7px 0;border-bottom:1px solid var(--ligne);color:var(--encre);font-weight:600;font-size:15.5px;transition:color .2s,padding .25s var(--ease)}
  .mg-communes a:hover{padding-left:6px}
}
/* le même contenu dans le menu du téléphone, en accordéon */
.m-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.14);font-size:24px;font-weight:800;font-stretch:106%}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary .ico{color:var(--action);transition:transform .3s var(--ease)}
.m-acc[open] summary .ico{transform:rotate(180deg)}
.m-acc .m-sous{display:grid;padding:6px 0 10px}
.m-acc .m-sous a{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:0;font-size:17px;font-weight:700;color:var(--clair-2)}
.m-acc .m-sous a span{color:var(--action);font-weight:800;white-space:nowrap}

/* ============ MENU (téléphone et tablette) ============ */
.menu{position:fixed;inset:0;z-index:80;background:var(--nuit);color:#fff;display:flex;flex-direction:column;padding:12px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(-102%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s;overflow-y:auto}
.menu.ouvert{transform:none;visibility:visible;transition:transform .45s var(--ease)}
.menu-haut{display:flex;align-items:center;justify-content:space-between}
.menu nav{margin-top:28px;display:grid}
.menu nav a{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.14);font-size:24px;font-weight:800;font-stretch:106%}
.menu nav a .ico{color:var(--action)}
.menu-bas{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.menu-bas .btn-appel{width:100%}
.menu-bas .btn-rappel{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px;border-radius:var(--r-m);border:1.5px solid rgba(255,255,255,.5);font-weight:800}
.menu-bas p{text-align:center;font-size:15px;color:var(--clair-2)}
@media(min-width:980px){.menu{display:none}}

/* ============ BANNIÈRE ============ */
/* ROLE : en trois secondes, la personne bloquée devant sa porte sait qu'elle est au bon endroit, que c'est près, combien ça coûte, et comment appeler.
   Version claire (test du 23 septembre) : fond de la page, le texte à gauche, la photo du métier dans un encart à droite. */
.hero{background:var(--fond);color:var(--encre);position:relative;overflow:hidden}
.hero .wrap{padding:96px 0 44px;display:grid;gap:34px;align-items:center}
.dispo{display:inline-flex;align-items:center;gap:10px;background:var(--papier);border:1px solid var(--ligne);border-radius:100px;padding:8px 15px 8px 12px;font-size:15px;font-weight:700;color:var(--encre);box-shadow:0 8px 20px -14px rgba(7,20,39,.35)}
.hero-cle{margin-top:0;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--olive);line-height:1.5}
.hero-titre{margin-top:12px;font-weight:850;font-stretch:112%;letter-spacing:-.035em;line-height:1.02;font-size:clamp(46px,min(12.4vw,11vh),92px);color:var(--encre)}
/* le mot qui décide, dans un bloc vert plein, légèrement penché comme une étiquette */
.hero-titre mark{display:inline-block;background:var(--marque-vert);color:#fff;padding:.02em .16em .06em;border-radius:.12em;transform:rotate(-2deg);box-shadow:0 14px 30px -16px rgba(62,82,32,.9)}
.hero-titre .sous{display:block;font-size:clamp(20px,2.6vw,34px);font-weight:700;font-stretch:100%;letter-spacing:-.015em;line-height:1.22;color:var(--encre);margin-top:.6em}
.hero-titre .sous em{font-style:normal;color:var(--olive)}
.hero-sub{margin-top:16px;font-size:16.5px;color:var(--texte);max-width:50ch}
.hero-sub b{color:var(--encre)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.hero-cta .btn-appel{width:100%}
.hero .btn-sec{border-color:var(--encre);color:var(--encre)}
.hero .btn-sec:hover{background:var(--encre);color:#fff}
.g-avis{display:inline-flex;align-items:center;gap:12px;margin-top:18px;background:var(--papier);border:1px solid var(--ligne);border-radius:100px;padding:6px 16px 6px 6px;color:var(--encre);white-space:nowrap;box-shadow:0 8px 20px -14px rgba(7,20,39,.3)}
.g-logo{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--ligne);display:grid;place-items:center;flex:none}
.g-note{display:flex;align-items:center;gap:8px}
.g-note b{font-size:17px;font-weight:850;line-height:1}
.g-txt{font-size:14.5px;color:var(--texte-2);font-weight:600}
.etoiles{display:inline-flex;gap:2px;color:var(--or)}
.etoiles .ico{width:16px;height:16px}
/* l'encart photo : la serrure et les clés, cadrées serré */
.hero-photo{position:relative;border-radius:var(--r-l);overflow:visible}
.hero-photo .cadre{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:var(--nuit);box-shadow:0 40px 80px -40px rgba(7,20,39,.55)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 45%;transform:scale(1.06);transition:transform 2.2s var(--ease)}
/* l'illustration à la place de la photo (essai demandé par Guillaume le 24/09) */
.hero-photo .cadre.picto{background:var(--nuit)}
.picto-svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){
  .picto-svg .pg-cle{transform-box:view-box;animation:pg-cle 6s var(--ease) infinite alternate}
}
@keyframes pg-cle{from{translate:0 0}to{translate:0 -10px}}
.pret .hero-photo img{transform:scale(1)}
/* le badge : verre teinté du vert de la marque, texte foncé, et un point qui émet une onde pour dire « en ce moment » */
.live{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:12px;background:rgba(236,244,222,.84);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-radius:100px;padding:11px 20px 11px 14px;box-shadow:0 20px 40px -18px rgba(7,20,39,.65),inset 0 1px 0 rgba(255,255,255,.9);font-weight:850;font-size:17px;color:var(--encre);white-space:nowrap}
.live .onde{position:relative;width:14px;height:14px;flex:none}
.live .onde::before,.live .onde::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1F9D4C}
.live .onde::after{background:rgba(31,157,76,.45)}
@media(prefers-reduced-motion:no-preference){.live .onde::after{animation:onde 1.8s ease-out infinite}}
@keyframes onde{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
.js .anim{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pret .anim{opacity:1;transform:none}
.pret .d1{transition-delay:.12s}.pret .d2{transition-delay:.24s}.pret .d3{transition-delay:.36s}.pret .d4{transition-delay:.55s}
@media(min-width:640px){.hero-cta .btn-appel{width:auto}}
@media(min-width:980px){
  /* la bannière occupe l'écran (rien ne dépasse en bas), mais son contenu reste calé en haut, près de l'en-tête */
  .hero{min-height:100vh}
  @supports(min-height:100svh){.hero{min-height:100svh}}
  .hero .wrap{grid-template-columns:1.08fr .92fr;gap:64px;padding:104px 0 56px;align-items:start}
  .hero-sub{margin-top:18px;font-size:18px}
  .hero-cta{margin-top:26px}
  .g-avis{margin-top:18px}
  /* la photo s'arrête avant le bas de l'écran, quelle que soit sa hauteur */
  .hero-photo .cadre{aspect-ratio:auto;height:clamp(420px,calc(100vh - 150px),640px)}
  @supports(height:1svh){.hero-photo .cadre{height:clamp(420px,calc(100svh - 150px),640px)}}
  /* sur écran large, la carte de l'heure flotte à cheval sur le bord de l'encart */
  /* sur écran large : à hauteur du paragraphe sur le prix, pas en face du titre, et il déborde à peine de la photo */
  .live{left:-28px;bottom:auto;top:56%;padding:15px 24px 15px 18px;font-size:20px;gap:14px}
}
@media(min-width:980px) and (prefers-reduced-motion:no-preference){
  .pret .live{animation:flotte 7s ease-in-out 1.6s infinite}
  @keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -8px}}
}

/* ============ BANDEAU DE PREUVE ============ */
/* ROLE : quatre raisons de faire confiance, vérifiables, lues avant de descendre. */
.preuves{z-index:5;padding-top:8px}
.preuves-carte{background:var(--papier);border-radius:var(--r-l);box-shadow:0 30px 70px -40px rgba(7,20,39,.5),0 1px 0 var(--ligne);display:grid;grid-template-columns:1fr 1fr}
.p-item{display:flex;flex-direction:column;gap:10px;padding:18px 16px}
.p-item:nth-child(2n){border-left:1px solid var(--ligne)}
.p-item:nth-child(n+3){border-top:1px solid var(--ligne)}
.p-ico{width:44px;height:44px;border-radius:12px;background:#EAF0DA;color:var(--olive);display:grid;place-items:center;flex:none}
.p-ico img{width:44px;height:44px;border-radius:50%}
.p-item b{display:block;color:var(--encre);font-weight:800;font-size:16px;line-height:1.25}
.p-item div>span{display:block;font-size:14.5px;color:var(--texte-2);line-height:1.4;margin-top:3px}
@media(min-width:980px){
  .preuves{padding-top:0}
  .preuves-carte{grid-template-columns:repeat(4,1fr)}
  .p-item{flex-direction:row;align-items:center;gap:16px;padding:26px}
  .p-item+.p-item{border-left:1px solid var(--ligne)}
  .p-item:nth-child(n+3){border-top:0}
  .p-ico,.p-ico img{width:52px;height:52px}
  .p-item b{font-size:17px}
}

/* ============ TARIFS ============ */
/* ROLE : répondre aux deux peurs de l'urgence, le prix qui explose et l'attente. On donne son adresse et son problème, on voit le délai et le prix (le simulateur). */
.tarifs{padding:72px 0}
.t-simu{margin-top:30px}
.t-note{margin-top:20px;font-size:15.5px;color:var(--texte-2);max-width:80ch}
@media(min-width:980px){
  .tarifs{padding:120px 0 110px}
  .t-tete{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
  .t-simu{margin-top:48px}
}

/* ============ LES QUATRE VÉRIFICATIONS ============ */
/* ROLE : la personne a peur de tomber sur un faux dépanneur. On lui donne la grille pour trier, et on la passe devant elle. */
.verif{padding:72px 0}
.v-liste{margin-top:30px;display:grid;gap:12px;counter-reset:v}
.v-row{position:relative;overflow:hidden;padding:22px 18px 20px;border-radius:var(--r-m);background:var(--nuit-2);border:1px solid rgba(255,255,255,.12);transition:border-color .3s}
.v-row::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(169,196,108,.14),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.v-row:hover{border-color:rgba(169,196,108,.5)}
.v-row:hover::before{opacity:1}
.v-n{display:block;font-size:40px;font-weight:850;font-stretch:120%;color:var(--action);line-height:1;letter-spacing:-.03em}
.v-n::before{counter-increment:v;content:"0" counter(v)}
.v-q{margin-top:12px;font-size:20px;font-weight:800;color:#fff;font-stretch:104%;line-height:1.25}
.v-ok{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--action);color:var(--action-encre);font-size:13.5px;font-weight:800;border-radius:100px;padding:5px 11px 5px 8px}
.v-ok .ico{width:16px;height:16px;stroke-width:3}
.v-r{margin-top:10px;color:var(--clair-2);font-size:16.5px}
.v-r b{color:#fff}
@media(min-width:980px){
  .verif{padding:120px 0}
  .v-grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
  .v-gauche{position:sticky;top:110px}
  .v-liste{margin-top:0;gap:14px}
  .v-row{display:grid;grid-template-columns:96px 1fr;gap:10px 24px;padding:28px 30px}
  .v-n{grid-row:span 3;font-size:56px}
  .v-q{margin-top:0;font-size:22px}
  .v-ok{margin-top:4px;justify-self:start}
  .v-r{margin-top:0}
}

/* ============ L'ARTISAN ============ */
/* ROLE : mettre une personne derrière le numéro. Qualification, parole, et quatre qualités prouvées chacune par un client. */
.artisan{padding:72px 0}
.a-photo{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:var(--nuit)}
.a-photo img{width:100%;height:100%;object-fit:cover}
.a-badge{position:absolute;left:12px;bottom:12px;right:12px;display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-m);padding:10px 12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.a-badge img{width:52px;height:52px;flex:none}
.a-badge b{display:block;color:var(--encre);font-weight:800;font-size:16px}
.a-badge span{display:block;color:var(--texte-2);font-size:14px;line-height:1.35}
.a-texte{margin-top:34px}
.a-cite{margin:24px 0 0;padding:4px 0 4px 20px;border-left:4px solid var(--action);font-size:clamp(18px,1.6vw,22px);color:var(--encre);font-weight:600;line-height:1.45}
.a-cite small{display:block;font-size:14.5px;font-weight:600;color:var(--texte-2);margin-top:8px}
.a-piliers{margin-top:28px;display:grid;gap:12px}
.pil{background:var(--papier);border-radius:var(--r-m);padding:20px;box-shadow:0 1px 0 var(--ligne);display:flex;flex-direction:column}
.pil h3{font-size:18px;font-weight:800;color:var(--encre);font-stretch:104%;display:flex;gap:10px;align-items:center}
.pil h3 .ico{color:var(--olive)}
.pil p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--texte)}
.pil .qui{margin-top:auto;padding-top:12px;font-size:14px;color:var(--texte-2);font-weight:700}
@media(min-width:640px){.a-piliers{grid-template-columns:1fr 1fr}}
@media(min-width:980px){
  .artisan{padding:120px 0}
  .a-grille{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}
  .a-photo{position:sticky;top:110px;aspect-ratio:4/5}
  .a-badge{left:20px;right:20px;bottom:20px;padding:14px 16px}
  .a-badge img{width:64px;height:64px}
  .a-texte{margin-top:0}
  .pil{padding:24px}
}

/* ============ AVIS ============ */
/* ROLE : la preuve par le nombre, puis par le détail. Un en-tête au style Google (le même que dans la bannière),
   puis une rangée d'avis entiers : elle défile lentement sur ordinateur et s'arrête au survol, on la fait glisser sur téléphone. */
.avis{padding:64px 0 56px;overflow:hidden}
.av-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.av-tete .titre{max-width:24ch}
.g-grand{display:inline-flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:12px 20px 12px 12px;color:#fff}
.g-grand .g-logo{width:48px;height:48px;border-radius:14px;border:0}
.g-grand b{display:block;font-size:34px;font-weight:850;font-stretch:110%;line-height:1;letter-spacing:-.02em}
.g-grand .etoiles .ico{width:18px;height:18px}
.g-grand small{display:block;margin-top:4px;font-size:15px;font-weight:600;color:var(--clair-2)}
.mur{margin:30px -16px 0;padding:0 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mur::-webkit-scrollbar{display:none}
.piste{display:flex;gap:12px;align-items:stretch}
.clone{display:none}
.av{flex:0 0 86%;scroll-snap-align:center;background:var(--nuit-2);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column}
.av .etoiles .ico{width:15px;height:15px}
.av p{margin-top:12px;color:#fff;font-size:16px;line-height:1.6}
.av footer{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--clair-2)}
.av .ini{width:36px;height:36px;border-radius:50%;background:var(--nuit);color:var(--action);display:grid;place-items:center;font-weight:800;border:1px solid rgba(255,255,255,.2);flex:none}
.av footer b{display:block;color:#fff;font-weight:700}
.glisse{margin-top:10px;font-size:14.5px;color:var(--clair-2);display:flex;align-items:center;gap:8px}
.av-bas{margin-top:26px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.av-bas .btn-appel{width:100%}
.lien{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:3px;transition:border-color .25s}
.lien:hover{border-color:var(--action)}
@media(min-width:640px){.av{flex-basis:46%}.av-bas .btn-appel{width:auto}}
@media(min-width:980px){
  .avis{padding:96px 0 88px}
  .glisse{display:none}
  .mur{margin:44px 0 0;padding:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .piste{width:max-content;gap:18px}
  .av{flex:0 0 380px;padding:26px}
  .clone{display:flex}
  .js .piste{animation:defile 90s linear infinite}
  .mur:hover .piste{animation-play-state:paused}
  @keyframes defile{to{transform:translateX(calc(-50% - 9px))}}
  .av-bas{margin-top:40px}
}

/* ============ ÉTAPES ============ */
/* ROLE : enlever l'inconnu. La personne sait exactement ce qui va se passer après avoir raccroché. */
.etapes{padding:72px 0 56px}
.e-rail{margin-top:30px;display:grid;gap:14px;position:relative}
.e{background:var(--papier);border-radius:var(--r-l);padding:24px 22px;box-shadow:0 1px 0 var(--ligne),0 24px 50px -40px rgba(7,20,39,.5);position:relative;overflow:hidden}
.e-haut{display:flex;justify-content:space-between;align-items:center}
.e-n{width:56px;height:56px;border-radius:50%;background:var(--encre);color:var(--action);display:grid;place-items:center;font-size:24px;font-weight:850;font-stretch:112%}
.e-ic{color:var(--encre);transition:color .25s,transform .35s var(--ease)}
.e:hover .e-ic{color:var(--marque-vert);transform:scale(1.12)}
.e-ic .ico{width:30px;height:30px;stroke-width:1.7}
.e h3{margin-top:20px;font-size:24px;font-weight:850;color:var(--encre);font-stretch:108%;letter-spacing:-.01em}
.e p{margin-top:10px;font-size:17px;color:var(--texte)}
.e .puce{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--encre);color:#fff;border-radius:100px;padding:7px 14px;font-weight:800;font-size:15px}
.e .puce .ico{color:var(--action);width:18px;height:18px}
@media(min-width:980px){
  .etapes{padding:120px 0 100px}
  .e-rail{margin-top:56px;grid-template-columns:repeat(3,1fr);gap:22px}
  .e-rail::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;background:var(--encre);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease);z-index:0}
  .e-rail.vu::before{transform:scaleX(1)}
  .e{padding:32px 30px 34px;z-index:1}
  .e-n{width:64px;height:64px;font-size:26px}
  .e h3{font-size:27px}
  .e p{font-size:18px}
}

/* ============ PRESTATIONS ============ */
/* ROLE : après l'urgence, montrer qu'il fait tout le reste. C'est la deuxième commande, et la future page de chaque prestation.
   Téléphone : la carte d'appel, puis une rangée qu'on fait glisser. */
.presta{padding:40px 0 72px}
.bento{margin-top:30px;display:grid;gap:14px}
.b{background:var(--papier);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--ligne);transition:transform .35s var(--ease),box-shadow .35s}
.b-ic{width:48px;height:48px;border-radius:14px;background:var(--fond);display:grid;place-items:center;color:var(--encre);transition:background .25s,color .25s}
.b:hover .b-ic{background:var(--marque-vert);color:#fff}
.b h3{margin-top:18px;font-size:20px;font-weight:800;color:var(--encre);font-stretch:104%}
.b p{margin-top:8px;font-size:16px;color:var(--texte)}
.b .lien-b{margin-top:auto;padding-top:16px;display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--encre);font-size:15.5px}
.b .lien-b .ico{transition:transform .25s var(--ease)}
.b.grand{padding:0;overflow:hidden;position:relative;color:#fff;min-height:340px;justify-content:flex-end;background:var(--nuit)}
.b.grand .geant{position:absolute;right:-.04em;top:-.1em;font-size:clamp(150px,40vw,280px);font-weight:900;font-stretch:125%;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(169,196,108,.45);pointer-events:none}
.b.grand .b-in{position:relative;z-index:1;padding:24px 20px}
.b.grand h3{color:#fff;font-size:clamp(26px,2.6vw,36px);margin-top:0}
.b.grand p{color:var(--clair-2);font-size:17px;max-width:44ch}
.b.grand .btn-appel{margin-top:20px;width:100%}
.b-petits{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
.b-petits::-webkit-scrollbar{display:none}
.b-petits .b{flex:0 0 76%;scroll-snap-align:start}
@media(min-width:640px){.b-petits .b{flex-basis:44%}.b.grand .btn-appel{width:auto}}
@media(min-width:980px){
  .presta{padding:40px 0 120px}
  .bento{margin-top:52px;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto);gap:16px}
  .b-petits{display:contents}
  .b{padding:28px}
  .b:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(7,20,39,.35)}
  .b:hover .lien-b .ico{transform:translateX(4px)}
  .b.grand{grid-column:span 2;grid-row:span 2;min-height:460px}
  .b.grand .b-in{padding:34px}
}

/* ============ ZONES ============ */
/* ROLE : « est-ce qu'il vient chez moi ? » On tape sa commune, on a la réponse et le numéro dans la même phrase. */
.zones{padding:72px 0}
.z-test{margin-top:26px;background:var(--papier);border-radius:var(--r-l);padding:22px 18px;box-shadow:0 24px 60px -40px rgba(7,20,39,.45)}
.z-test label{font-weight:800;color:var(--encre);font-size:17px}
.z-test input{margin-top:10px;width:100%;font:inherit;font-size:17px;padding:15px 16px;border-radius:var(--r-s);border:2px solid var(--ligne);background:var(--fond);color:var(--encre);outline:none;transition:border-color .2s}
.z-test input::placeholder{color:#475569}
.z-test input:focus{border-color:var(--encre)}
.z-rep{margin-top:14px;min-height:50px;font-size:16.5px;color:var(--texte)}
.z-rep.ok b{color:#1D6B37}
.z-rep a{font-weight:800;color:var(--encre);border-bottom:2px solid var(--action)}
.z-listes{margin-top:30px;display:grid;gap:22px;position:relative}
.z-listes h3{font-size:17px;font-weight:800;color:var(--encre)}
.z-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.z-chips li{background:var(--papier);border:1px solid var(--ligne);border-radius:100px;padding:7px 13px;font-size:15px;font-weight:600;color:var(--encre)}
.js .z-listes.plie{max-height:250px;overflow:hidden}
.js .z-listes.plie::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(0deg,var(--fond),rgba(244,242,236,0))}
.z-plus{display:none;margin-top:14px;font-weight:800;color:var(--encre);border-bottom:2px solid var(--action);padding-bottom:2px}
.js .z-plus{display:inline-block}
.z-note{margin-top:20px;color:var(--texte-2);font-size:15.5px}
@media(min-width:980px){
  .zones{padding:120px 0}
  .z-grille{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  .z-test{margin-top:36px;padding:28px}
  .z-listes{margin-top:0}
  .js .z-listes.plie{max-height:none;overflow:visible}
  .js .z-listes.plie::after,.js .z-plus{display:none}
}

/* ============ QUESTIONS ============ */
/* ROLE : les objections qu'on n'ose pas poser au téléphone, avec la réponse. Et les mots exacts que les gens tapent. */
.faq{padding:24px 0 72px}
.f-liste{margin-top:26px;border-top:1px solid var(--ligne)}
.f-liste details{border-bottom:1px solid var(--ligne);interpolate-size:allow-keywords}
.f-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-size:17.5px;font-weight:800;color:var(--encre);font-stretch:104%}
.f-liste summary::-webkit-details-marker{display:none}
.f-liste summary .plus{width:34px;height:34px;border-radius:50%;border:2px solid var(--ligne);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background .3s,color .3s}
.f-liste details[open] summary .plus{transform:rotate(45deg);background:var(--encre);color:#fff;border-color:var(--encre)}
.f-liste details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.f-liste details[open]::details-content{block-size:auto}
.f-liste .rep{padding:0 0 22px;max-width:68ch;color:var(--texte);font-size:16.5px}
@media(min-width:980px){
  .faq{padding:40px 0 120px}
  .f-grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
  .f-liste{margin-top:0}
  .f-liste summary{font-size:19px;padding:24px 0}
  .f-liste .rep{padding-right:60px}
}

/* ============ APPEL FINAL ============ */
/* ROLE : la dernière chance, et la plus directe. Le numéro en énorme : on le lit de loin, on le touche du pouce. */
.final{padding:80px 0 76px;text-align:center}
.final .titre{font-size:clamp(32px,4.6vw,64px)}
.final .chapeau{margin-inline:auto}
.gros-num{display:inline-block;margin-top:30px;font-size:clamp(38px,11.4vw,140px);font-weight:850;font-stretch:112%;letter-spacing:-.04em;line-height:1;color:#fff;white-space:nowrap;transition:color .3s}
.gros-num:hover{color:var(--action)}
.final-info{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15.5px;color:var(--clair-2)}
.final-info span{display:inline-flex;align-items:center;gap:8px}
.final-info .ico{color:var(--action)}
@media(min-width:980px){.final{padding:130px 0 120px}.gros-num{margin-top:40px}.final-info{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 26px}}

/* ============ PIED ============ */
.pied{background:#040C18;color:var(--clair-2);padding:52px 0 120px;font-size:15.5px}
.pied-grille{display:grid;gap:30px}
.pied h4,.pied .pied-h{margin:0 0 12px;color:#fff;font-size:16px;font-weight:800}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .logo{display:inline-flex}
.pied .col-pc{display:none}
.pied-bas{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
@media(min-width:980px){.pied{padding:70px 0 70px}.pied-grille{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}.pied .col-pc{display:block}}

/* ============ BARRE MOBILE ET RAPPEL ============ */
/* ROLE : sur téléphone, appeler est toujours à un pouce. Sur écran large, la bulle attrape celui qui préfère être rappelé. */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;transform:translateY(110%);transition:transform .35s var(--ease);gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--nuit);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 30px -12px rgba(0,0,0,.4)}
.barre a{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:14px;font-weight:800;font-size:16.5px}
.barre.vue{transform:none}
.barre .b1{background:var(--action);color:var(--action-encre);flex:1}
.barre .b2{border:2px solid rgba(255,255,255,.5);color:#fff;flex:0 0 32%}
.bulle{display:none}
@media(min-width:980px){
  .barre{display:none}
  .bulle{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;align-items:center;gap:10px;background:#fff;color:var(--encre);border-radius:100px;padding:10px 18px 10px 10px;font-weight:800;font-size:15px;box-shadow:0 18px 40px -16px rgba(7,20,39,.55),0 0 0 1px var(--ligne);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease)}
  .bulle.vue{opacity:1;transform:none;pointer-events:auto}
  .bulle .r{width:40px;height:40px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center}
}
.panneau{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:#fff;border-radius:var(--r-l);box-shadow:0 40px 80px -30px rgba(7,20,39,.6);padding:24px 20px calc(20px + env(safe-area-inset-bottom));opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .35s var(--ease);max-height:calc(100vh - 24px);overflow-y:auto}
.panneau.ouvert{opacity:1;transform:none;pointer-events:auto}
@media(min-width:980px){.panneau{left:auto;right:22px;bottom:22px;width:380px;padding:26px}}
.panneau h3,.panneau .p-h{font-size:21px;font-weight:800;color:var(--encre)}
.panneau p{font-size:15.5px;margin-top:4px;color:var(--texte)}
.panneau .fermer{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--fond);color:var(--encre)}
.panneau label{display:block;margin-top:14px;font-size:14.5px;font-weight:800;color:var(--encre)}
.panneau input,.panneau select{margin-top:6px;width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:2px solid var(--ligne);background:var(--fond);color:var(--encre)}
.panneau .btn-plein{width:100%;margin-top:18px}
.panneau .urg{margin-top:14px;font-size:15px;text-align:center}
.panneau .urg a{font-weight:800;color:var(--encre)}
.merci{display:none;padding:10px 0}
.envoye .merci{display:block}.envoye form{display:none}

/* ============ RÉVÉLATIONS AU DÉFILEMENT ============ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.vu{opacity:1;transform:none}
.js .rv.r2{transition-delay:.08s}.js .rv.r3{transition-delay:.16s}.js .rv.r4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .rv,.js .anim{opacity:1;transform:none}
  .hero-photo img{transform:none}
  .js .acc,.js .vu .acc{background-size:100% 36%}
  .js .sombre .acc,.js .sombre .vu .acc{background-size:100% .09em}
  .mur{overflow-x:auto!important;-webkit-mask-image:none!important;mask-image:none!important}
  .clone{display:none!important}
}

/* ============ AJOUTS DU SITE FINAL (24/09/2026) ============ */
.mg-aussi{font-size:14px;color:var(--texte-2);padding-top:10px}
.panneau small{font-weight:600;color:var(--texte-2)}
.merci .p-h{font-size:21px;font-weight:800;color:var(--encre)}
.e-photo{margin:26px auto 0;max-width:320px;text-align:center}
.e-photo img{width:100%;height:300px;object-fit:cover;border-radius:var(--r-l)}
.e-photo figcaption{margin-top:8px;font-size:14.5px;color:var(--texte-2)}
@media(min-width:980px){.e-rail.quatre{grid-template-columns:repeat(4,1fr)}}

/* ============ PAGES INTÉRIEURES (prestations, communes), 24/09/2026 ============ */
.hero-page .wrap{padding-bottom:36px}
.hero-page .hero-photo .cadre img{aspect-ratio:4/3;object-fit:cover}
.bloc{padding:64px 0}
.bloc.clair{background:var(--papier)}
.bloc .titre{max-width:24ch}
.bloc .chapeau{max-width:62ch}
.corps{margin-top:22px;max-width:68ch;display:grid;gap:14px;font-size:17px;color:var(--texte)}
.corps b{color:var(--encre)}
.corps ul,.corps ol{padding-left:22px;display:grid;gap:8px}
.deux{display:grid;gap:30px;align-items:start}
.deux figure img{width:100%;border-radius:var(--r-l);aspect-ratio:3/4;object-fit:cover}
.deux figcaption{margin-top:8px;font-size:14.5px;color:var(--texte-2)}
.photos{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.photos figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-m,14px)}
.photos figcaption{margin-top:6px;font-size:14px;color:var(--texte-2)}
.grille-prix{margin-top:24px;display:grid;gap:10px;max-width:640px}
.grille-prix div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 18px;border-radius:14px;background:var(--papier);box-shadow:0 1px 0 var(--ligne)}
.bloc.clair .grille-prix div{background:var(--fond)}
.grille-prix b{font-size:20px;color:var(--encre);white-space:nowrap}
.grille-prix span{color:var(--texte)}
.provisoire{margin-top:10px;font-size:14.5px;color:var(--texte-2)}
.avis-cites{margin-top:26px;display:grid;gap:14px}
.liens-page{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.liens-page a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:100px;background:var(--papier);color:var(--encre);font-weight:800;box-shadow:0 1px 0 var(--ligne)}
.liens-page a:hover{box-shadow:0 0 0 2px var(--encre)}
.fil{font-size:14px;color:var(--texte-2);margin-bottom:10px}
.fil a{color:var(--texte-2);text-decoration:underline}
@media(min-width:980px){
  .bloc{padding:100px 0}
  .deux{grid-template-columns:1.25fr .75fr;gap:60px}
  .photos{grid-template-columns:repeat(3,1fr)}
  .avis-cites{grid-template-columns:repeat(2,1fr)}
}
.legal{padding-top:130px}
.legal h1.titre{font-size:clamp(32px,4vw,48px)}
.corps h2{font-size:21px;font-weight:850;color:var(--encre);margin-top:14px}
.corps a{text-decoration:underline}
/* communes pas encore publiées : affichées, pas cliquables (construire_site.py, 24/09/2026) */
.lien-bientot{color:var(--texte-2)}
.mg-communes .lien-bientot{display:block;padding:7px 0;border-bottom:1px solid var(--ligne);font-weight:600;font-size:15.5px}
.m-acc .m-sous .lien-bientot{display:block;padding:12px 4px;font-size:17px;font-weight:600;color:var(--clair-2);opacity:1}
.pied .lien-bientot{color:inherit}
.liens-page .lien-bientot{display:inline-flex;padding:11px 16px;border-radius:100px;border:1px dashed var(--ligne);font-weight:700}
.z-chips a{text-decoration:underline;text-underline-offset:3px}
.apres-ouverture{margin-top:64px}
@media(min-width:980px){.apres-ouverture{margin-top:96px}}

/* ============ REFONTE DU 25/09/2026 ============
   Demande de Guillaume : trois sections de suite en encarts blancs, c'est redondant.
   Étapes : une frise, sans encarts. Sécurisation : en sombre, portée par ses photos.
   Artisan : les quatre qualités en liste ouverte. Pied : les communes sur toute la largeur. */

/* Étapes : frise verticale sur téléphone, horizontale sur ordinateur */
.e-rail{gap:30px;margin-top:34px}
.e{background:none;box-shadow:none;border-radius:0;padding:0 0 0 74px;overflow:visible;min-height:56px}
.e-haut{position:absolute;left:0;top:0}
.e-ic{display:none}
.e h3{margin-top:12px;font-size:22px}
.e::after{content:"";position:absolute;left:27px;top:66px;bottom:-24px;width:2px;background:var(--ligne)}
.e:last-child::after{display:none}
.e-suite{margin-top:40px;display:flex;align-items:center;gap:12px;font-size:clamp(18px,1.6vw,21px);font-weight:800;color:var(--encre);font-stretch:104%}
.e-suite .ico{color:var(--olive);flex:none}
@media(min-width:980px){
  .etapes{padding:120px 0 90px}
  .e{padding:0 10px 0 0}
  .e-haut{position:static;display:flex;align-items:center;gap:0}
  .e-ic{display:block;background:var(--fond);padding:0 14px;position:relative;z-index:1}
  .e::after{display:none}
  .e h3{margin-top:26px;font-size:25px}
  .e-rail::before{top:32px;left:32px;right:10%;background:var(--ligne);height:2px}
  .e-n{position:relative;z-index:1}
  .e-suite{margin-top:56px}
}

/* Sécurisation : section sombre, photos de ses interventions */
.securite{padding:72px 0}
.s-tete .titre{max-width:20ch}
.s-rangee{margin:34px -16px 0;padding:0 16px 6px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.s-rangee::-webkit-scrollbar{display:none}
.s-carte{flex:0 0 80%;scroll-snap-align:start;display:flex;flex-direction:column;color:var(--clair-2)}
.s-img{display:block;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:var(--nuit-2)}
.s-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.s-carte:hover .s-img img{transform:scale(1.04)}
.s-carte h3{margin-top:18px;font-size:22px;font-weight:850;color:#fff;font-stretch:106%;display:flex;gap:10px;align-items:center}
.s-carte h3 .ico{color:var(--action);flex:none}
.s-carte p{margin-top:8px;font-size:16.5px;color:var(--clair-2)}
@media(min-width:640px){.s-carte{flex-basis:46%}}
@media(min-width:980px){
  .securite{padding:120px 0}
  .s-tete{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end}
  .s-tete .chapeau{margin-top:0}
  .s-rangee{margin:56px 0 0;padding:0;overflow:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
}

/* Artisan : les quatre qualités sans encarts, séparées par un filet */
.a-piliers{gap:0 32px;margin-top:30px}
.a-piliers .pil{background:none;box-shadow:none;border-radius:0;padding:18px 0 20px;border-top:1px solid var(--ligne)}
.a-piliers .pil p{font-style:italic}

/* Pied de page : les communes sur toute la largeur, en pastilles */
.pied-zones{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.pied-zones ul{display:flex;flex-wrap:wrap;gap:8px}
.pied-zones li a,.pied-zones li .lien-bientot{display:inline-block;padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.22);font-size:14.5px}
.pied-zones li .lien-bientot{border-style:dashed}
.pied-zones li a:hover{border-color:var(--action);text-decoration:none}
@media(min-width:980px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr}}

/* ============ 25/09/2026, deuxième passe : le rythme des fonds ============
   Clair et sombre alternent strictement : bannière crème, prix blanc, étapes sombres,
   sécurisation crème, Ibrahim blanc, avis sombres, zones crème, questions blanc, appel sombre.
   Un seul surlignage sur la page, sur la promesse qui décide : le prix fixé avant de venir. */
.clair{background:var(--papier)}
.tarifs.clair .hsim-etapes{background:var(--fond);box-shadow:none}
.tarifs.clair .hsim-champ input,.tarifs.clair .hsim-in{background:#fff}
.faq.clair{padding:72px 0}
@media(min-width:980px){.faq.clair{padding:120px 0}}

/* Étapes sur fond sombre */
.etapes.sombre{padding:72px 0}
.etapes.sombre .e h3{color:#fff}
.etapes.sombre .e p{color:var(--clair-2)}
.etapes.sombre .e-n{background:var(--action);color:var(--action-encre)}
.etapes.sombre .e::after,.etapes.sombre .e-rail::before{background:rgba(255,255,255,.2)}
.etapes.sombre .e-ic{color:var(--action);background:var(--nuit)}
.etapes.sombre .e:hover .e-ic{color:#fff}
.etapes.sombre .e .puce{background:rgba(255,255,255,.1);color:#fff}
.etapes.sombre .e-suite{color:#fff}
.etapes.sombre .e-suite .ico{color:var(--action)}
@media(min-width:980px){.etapes.sombre{padding:120px 0 110px}}

/* Sécurisation sur fond crème : la photo porte la tuile, une flèche ronde dit qu'on peut cliquer */
.securite{padding:72px 0 64px}
.s-carte{color:var(--texte)}
.s-carte h3{color:var(--encre)}
.s-carte h3 .ico{color:var(--olive)}
.s-carte p{color:var(--texte)}
.s-img{position:relative;background:var(--papier)}
.s-fleche{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--action);color:var(--action-encre);display:grid;place-items:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.55);transition:transform .3s var(--ease)}
.s-carte:hover .s-fleche{transform:translateX(4px)}
@media(min-width:980px){.securite{padding:120px 0 110px}}

/* ============ PAGES DE COMMUNE EN PAGES D'ATTERRISSAGE (25/09/2026) ============
   Fabriquées par _OUTILS/page_commune.py. Rythme : bannière crème, avis locaux sombres,
   prix blanc, la commune crème, étapes sombres, prestations crème, artisan blanc,
   questions crème, autour blanc, appel sombre. */
.hero-faits{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-faits li{display:inline-flex;align-items:center;gap:8px;background:var(--papier);border:1px solid var(--ligne);border-radius:100px;padding:7px 14px 7px 10px;font-size:15px;font-weight:700;color:var(--encre)}
.hero-faits .ico{color:var(--olive);flex:none}
.hero-page .btn-sec{display:inline-flex;border-color:var(--encre);color:var(--encre)}
.hero-page .btn-sec:hover{background:var(--encre);color:#fff}
.hero-page .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* avis des clients de la commune : grandes cartes, au-dessus du mur des autres avis */
.la-grille{margin-top:34px;display:grid;gap:14px}
.la-carte{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);padding:24px 22px;display:flex;flex-direction:column}
.la-carte p{margin-top:12px;color:#fff;font-size:18px;line-height:1.5;font-weight:600}
.la-carte footer{margin-top:auto;padding-top:18px;display:flex;gap:10px;align-items:center;color:var(--clair-2);font-size:14px}
.la-carte footer b{display:block;color:#fff;font-weight:700;font-size:15px}
.la-carte .ini{width:36px;height:36px;border-radius:50%;background:var(--action);color:var(--action-encre);display:grid;place-items:center;font-weight:800;flex:none}
.la-plus{margin-top:44px;color:var(--clair-2);font-size:17px;font-weight:700}
.loc-avis .mur{margin-top:18px}
@media(min-width:760px){.la-grille{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.la-grille{grid-template-columns:repeat(3,1fr)}}

/* la commune : chiffres, logements, quartiers */
.local{padding:72px 0}
.chiffres{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch{border-top:3px solid var(--action);padding-top:14px}
.ch b{display:block;font-size:clamp(34px,4vw,52px);font-weight:850;font-stretch:112%;letter-spacing:-.03em;line-height:1;color:var(--encre)}
.ch span{display:block;margin-top:8px;font-size:15px;color:var(--texte-2);line-height:1.4}
.local-grille{margin-top:40px;display:grid;gap:34px}
.local .corps p{font-size:17.5px;color:var(--texte);margin:0 0 16px}
.local .corps b{color:var(--encre)}
.quartiers{background:var(--papier);border-radius:var(--r-l);padding:24px 20px;box-shadow:0 1px 0 var(--ligne)}
.quartiers h3{font-size:19px;font-weight:850;color:var(--encre);font-stretch:104%}
.q-liste{list-style:none;margin:14px 0 0;padding:0}
.q-liste li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--ligne);font-size:16px}
.q-nom{font-weight:700;color:var(--encre)}
.q-km{color:var(--texte-2);font-variant-numeric:tabular-nums}
.q-ok,.q-plus{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:800;border-radius:100px;padding:4px 10px;white-space:nowrap}
.q-ok{background:#E8F0D6;color:#2F4115}
.q-plus{background:var(--fond);color:var(--encre);border:1px solid var(--ligne)}
.q-note{margin-top:14px;font-size:14.5px;color:var(--texte-2)}
@media(min-width:980px){
  .local{padding:120px 0}
  .chiffres{grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
  .local-grille{grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;margin-top:56px}
  .quartiers{padding:30px 28px;position:sticky;top:110px}
}

/* prestations : quatre tuiles avec leur prix */
.s-prix{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:800;color:var(--olive);text-transform:uppercase;letter-spacing:.05em}
.s-prix+h3{margin-top:6px}
@media(min-width:980px){.s-rangee.quatre{grid-template-columns:repeat(4,1fr);gap:22px}}
@media(min-width:640px) and (max-width:979px){.s-rangee.quatre .s-carte{flex-basis:46%}}

/* questions et autour */
.faq.seule{padding:72px 0}
.autour{padding:64px 0}
.autour .z-chips{margin-top:22px}
@media(min-width:980px){.faq.seule{padding:120px 0}.autour{padding:90px 0}}

/* ============ 25/09/2026, retours sur la page d'Avrillé ============ */
/* Bannière des pages : le h1 « Serrurier à X » en grand, le badge Google comme à l'accueil */
.hero-page .hero-titre{font-size:clamp(40px,min(10vw,10vh),84px)}
.hero-page .hero-titre.long{font-size:clamp(34px,min(7.4vw,8vh),68px)}
.hero-page .hero-titre.long mark{white-space:nowrap}
.hero-page .hero-titre.tres-long{font-size:clamp(32px,min(6.6vw,7.4vh),62px)}
.hero-page .hero-titre.tres-long mark{display:inline;transform:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .12em}
.hero-page .g-avis{margin-top:22px}

/* Avis : un seul style partout, des cartes en verre sur des halos de ses deux couleurs */
.avis{isolation:isolate}
.avis::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px 420px at 10% 18%,rgba(169,196,108,.22),transparent 62%),
             radial-gradient(760px 520px at 90% 85%,rgba(0,64,128,.6),transparent 62%)}
.avis .av{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04));backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 44px -26px rgba(0,0,0,.7)}
.avis .av .ini{background:rgba(255,255,255,.1);color:var(--action);border-color:rgba(255,255,255,.22)}
.av-haut{display:flex;justify-content:space-between;align-items:center;gap:10px}
.av-lieu{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--action-encre);background:var(--action);border-radius:100px;padding:3px 10px 3px 7px;white-space:nowrap}
.avis .av-local{border-color:rgba(169,196,108,.5)}

/* Le déroulé sur fond crème (pages de commune), la commune sur fond blanc */
.etapes.creme{padding:72px 0 64px}
@media(min-width:980px){.etapes.creme{padding:120px 0 100px}}
.local.clair .quartiers{background:var(--fond);box-shadow:none}

/* ============ 25/09/2026 : équilibre conversion et contenu local ============
   Haut de page pour faire appeler, bas de page pour prouver la commune. */
/* Prestations sur fond sombre (pages de commune) */
.prestas.sombre .s-carte h3{color:#fff}
.prestas.sombre .s-carte h3 .ico,.prestas.sombre .s-prix{color:var(--action)}
.prestas.sombre .s-carte p{color:var(--clair-2)}
.prestas.sombre .s-img{background:var(--nuit-2)}
.prestas-cta{margin-top:40px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:28px;border-top:1px solid var(--ligne)}
.prestas-cta p{max-width:52ch;font-size:17px;color:var(--texte)}
.prestas-cta p b{color:var(--encre)}
.prestas.sombre .prestas-cta{border-top-color:rgba(255,255,255,.16)}
.prestas.sombre .prestas-cta p{color:var(--clair-2)}
.prestas.sombre .prestas-cta p b{color:#fff}
@media(min-width:980px){.prestas-cta{flex-direction:row;justify-content:space-between;align-items:center;margin-top:52px}}

/* La commune, compacte : chiffres, un paragraphe, le reste replié, les quartiers en grille */
.local{padding:64px 0}
.local .chiffres{margin-top:26px}
.local .ch b{font-size:clamp(30px,3.2vw,44px)}
.local-grille{margin-top:32px}
.local-plus{margin-top:6px;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.local-plus summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-weight:800;color:var(--encre)}
.local-plus summary::-webkit-details-marker{display:none}
.local-plus summary .ico{flex:none;transition:transform .3s var(--ease)}
.local-plus[open] summary .ico{transform:rotate(45deg)}
.local-plus p{font-size:16.5px}
.q-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.q-liste li{display:block;padding:10px 0;border-bottom:1px solid var(--ligne)}
.q-liste li b{display:block;color:var(--encre);font-size:15.5px;line-height:1.3}
.q-liste li span{display:block;margin-top:2px;font-size:14px;color:var(--texte-2)}
.q-liste em{font-style:normal;font-weight:800}
.q-liste .q-ok{color:#2F4115}
.q-liste .q-plus{color:var(--encre)}
.q-appel{margin-top:18px;padding-top:18px;border-top:1px solid var(--ligne);display:flex;flex-direction:column;gap:12px}
.q-appel p{font-size:15.5px;font-weight:700;color:var(--encre)}
.q-appel .btn-appel{align-self:stretch}
@media(min-width:980px){.local{padding:100px 0}.local-grille{margin-top:44px}.q-liste{grid-template-columns:1fr 1fr}.quartiers{position:static}}
/* quartiers : une ligne par quartier, sans pastille, pour tenir sur un écran de téléphone */
.q-liste .q-ok,.q-liste .q-plus{display:inline;background:none;border:0;padding:0;font-size:inherit}
.q-liste li{padding:8px 0}
.local .corps{align-self:start}
.local-plus{margin-top:0}
@media(max-width:979px){.local .chiffres{gap:18px 12px}.local .ch span{font-size:14px}}
@media(min-width:980px){.local-plus[open]{border:0}.local-plus[open] summary{padding-top:0;font-size:19px}.local-plus[open] summary .ico{display:none}.local-plus[open] summary{pointer-events:none}}

/* ============ PAGES DE PRESTATION EN PAGES D'ATTERRISSAGE (25/09/2026) ============
   Fabriquées par _OUTILS/page_prestation.py. */
/* le prix, cas par cas */
.cas-grille{margin-top:30px;display:grid;gap:14px}
.cas{background:var(--fond);border-radius:var(--r-l);padding:24px 22px;display:flex;flex-direction:column}
.cas-ic{width:46px;height:46px;border-radius:13px;background:var(--papier);color:var(--olive);display:grid;place-items:center}
.cas h3{margin-top:16px;font-size:20px;font-weight:850;color:var(--encre);font-stretch:104%}
.cas-prix{display:block;margin-top:6px;font-size:clamp(30px,3vw,40px);font-weight:850;font-stretch:112%;letter-spacing:-.02em;color:var(--encre);line-height:1.1}
.cas p{margin-top:10px;font-size:16px;color:var(--texte)}
.tarifs .t-note{margin-top:22px}
.tarifs .t-simu{margin-top:44px}
@media(min-width:760px){.cas-grille{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.cas-grille{margin-top:48px;gap:20px}.cas{padding:30px 28px}}

/* les situations : photo et texte en alternance */
.situations{padding:72px 0}
.sit-liste{margin-top:36px;display:grid;gap:44px}
.sit{display:grid;gap:20px;align-items:center}
.sit-img{margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:var(--papier)}
.sit-img img{width:100%;height:100%;object-fit:cover}
.sit-txt h3{font-size:clamp(22px,2.2vw,30px);font-weight:850;color:var(--encre);font-stretch:106%;letter-spacing:-.015em;line-height:1.15}
.sit-txt p{margin-top:12px;font-size:17px;color:var(--texte)}
.sit-txt b{color:var(--encre)}
.sit-ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:e;display:grid;gap:10px}
.sit-ol li{counter-increment:e;position:relative;padding:14px 16px 14px 56px;background:var(--papier);border-radius:var(--r-m);font-size:16.5px;color:var(--texte)}
.sit-ol li::before{content:counter(e);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--action);color:var(--action-encre);display:grid;place-items:center;font-weight:850;font-size:15px}
.situations .prestas-cta{margin-top:52px}
@media(min-width:980px){
  .situations{padding:120px 0}
  .sit-liste{margin-top:60px;gap:72px}
  .sit{grid-template-columns:1fr 1fr;gap:64px}
  .sit.inverse .sit-img{order:2}
  .sit.seul{grid-template-columns:1fr;max-width:820px}
}

/* où, et quoi d'autre */
.ailleurs{display:grid;gap:40px}
.autres h3{font-size:18px;font-weight:850;color:var(--encre);margin-bottom:12px}
.autre{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-m);background:var(--fond);margin-top:10px;color:var(--texte);transition:transform .25s var(--ease)}
.autre:hover{transform:translateX(4px)}
.autre-ic{width:44px;height:44px;border-radius:12px;background:var(--papier);color:var(--olive);display:grid;place-items:center;flex:none}
.autre b{display:block;color:var(--encre);font-weight:800}
.autre span span{display:block;font-size:14.5px;color:var(--texte-2)}
.autre > .ico{margin-left:auto;color:var(--encre);flex:none}
@media(min-width:980px){.ailleurs{grid-template-columns:1.3fr 1fr;gap:70px;align-items:start}}