/* Établissement Gabriel — feuille de style unique.

   Identite propre a cette maison : la ou d autres jouent l artisanat
   chaleureux (rouille, sauge, creme), Gabriel joue
   l'intervention d'urgence — bleu nuit profond, ambre de signalisation,
   neutres froids. Le vocabulaire visuel est celui du dépannage : contraste
   fort, lecture immédiate, aucun ornement inutile.

   Une seule requête CSS, deux polices. */

:root{
  --paper:#FFFFFF;
  --cream:#F7F4EC;
  --sand:#EDE7DA;
  --ink:#152A22;
  --ink-soft:#5B6B63;
  --line:#DFD9CB;
  --nuit:#0E2A22;
  --nuit2:#163A2F;
  --rust:#B7410E;
  --rust-dark:#93340B;
  --rust-soft:#FBEDE6;
  --sage:#2E8B65;
  --sage-dark:#1E6B4C;
  --sage-soft:#E8F4EE;
  --sage-deep:#12503A;
  --sage-deep2:#0E3D2C;
  --rust-vif:#D4550F;
  --live:#22A24C;
  --radius:10px;
  --shadow:0 2px 4px rgba(26,26,26,.04), 0 18px 40px -28px rgba(26,26,26,.35);
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --titre:"Barlow Condensed","Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --wrap:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;padding-bottom:82px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust)}
h1,h2,h3,h4{margin:0;line-height:1.22;font-weight:700;color:var(--ink);text-wrap:balance}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}

/* ---------- en-tête ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
/* Logo : écusson d'atelier, clé plate et millésime 1985.
   Symbole d'artisan, valable pour tous les métiers de la maison. */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.logo svg{flex:0 0 auto;transition:transform .18s}
.logo:hover svg{transform:translateY(-2px)}
.logo .name{
  font-weight:800;font-size:23px;line-height:.9;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);
}
.logo .name small{
  display:block;font-weight:700;font-size:11px;letter-spacing:.34em;
  color:var(--rust);margin-bottom:3px;
}
@media(max-width:420px){ .logo .name{font-size:20px} }
.live-pill{
  display:none;align-items:center;gap:8px;background:var(--live);color:#fff;
  border-radius:100px;padding:6px 15px;font-size:13.5px;font-weight:600;margin:0 auto;
}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;flex:0 0 auto}
.nav{display:none;gap:24px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.nav a:hover{color:var(--rust)}
.head-tel{margin-left:auto}
@media(min-width:1000px){ .live-pill{display:inline-flex} .nav{display:flex} .head-tel{margin-left:0} }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-family:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  padding:15px 30px;border-radius:var(--radius);border:2px solid transparent;
  font-size:16.5px;line-height:1.25;transition:background .16s,color .16s;
}
.btn-call{background:var(--rust);color:#fff}
.btn-call:hover{background:var(--rust-dark)}
.btn-outline{background:transparent;color:var(--sage-dark);border-color:var(--sage)}
.btn-outline:hover{background:var(--sage);color:#fff}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-lg{padding:18px 34px;font-size:19px}
.btn .num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
@media(max-width:620px){ .btn-lg,.hero-actions .btn{width:100%} }

/* ---------- rythme des sections ---------- */
section{padding:74px 0}
@media(max-width:700px){ section{padding:52px 0} }
.cream{background:var(--cream)}
.sand{background:var(--sand)}
.lead{max-width:66ch;margin:0 auto 42px;text-align:center}
.lead.left{margin-left:0;text-align:left}
.lead h2{font-size:clamp(27px,3.6vw,36px);margin-bottom:16px}
.lead p{color:var(--ink-soft);font-size:18px;margin:0}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage-dark);margin-bottom:14px;
}

/* ---------- hero ---------- */
.hero{padding:52px 0 66px;background:var(--paper)}
.hero .wrap{display:grid;gap:36px;align-items:center}
@media(min-width:960px){ .hero .wrap{grid-template-columns:1fr 1fr;gap:60px} .hero{padding:66px 0 80px} }
.hero h1{font-size:clamp(31px,4.6vw,47px);margin-bottom:20px;letter-spacing:-.015em}
.hero .pitch{font-size:17.5px;color:var(--ink-soft);max-width:52ch;margin-bottom:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:22px}
.google-proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stars{color:#F2A100;letter-spacing:2px;font-size:19px;line-height:1}
.google-proof .txt{font-size:14.5px;color:var(--ink-soft)}
.google-proof b{color:var(--ink)}

/* grande photo d'équipe — la preuve artisanale.
   La gouttière de droite accueille la mention légale à la verticale :
   elle est lisible mais ne mord jamais sur l'image. */
.hero-photo{position:relative;padding-right:18px}
.hero-photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;
  background:var(--sand);box-shadow:var(--shadow);
}
.ai-mention{
  position:absolute;right:0;top:2px;bottom:2px;
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:flex-start;
  margin:0;padding:0;background:none;box-shadow:none;
  font-size:11px;line-height:1;letter-spacing:.01em;
  color:var(--ink);opacity:.55;white-space:nowrap;
}
.badge-annee{
  position:absolute;left:-10px;top:22px;background:var(--sage);color:#fff;
  border-radius:6px;padding:9px 15px;font-weight:800;font-size:14px;line-height:1.2;
  box-shadow:var(--shadow);text-align:center;
}
.badge-annee small{display:block;font-weight:600;font-size:11.5px;letter-spacing:.1em;opacity:.9}

/* ---------- bandeau réassurance ---------- */
.trust{background:var(--sage-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:20px 0;display:grid;gap:12px 30px;grid-template-columns:1fr}
@media(min-width:640px){ .trust ul{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .trust ul{grid-template-columns:repeat(4,1fr)} }
.trust li{display:flex;gap:10px;align-items:center;font-size:15.5px;font-weight:600}
.trust svg{flex:0 0 auto;color:var(--sage-dark)}

/* ---------- grille de valeurs ---------- */
.features{display:grid;gap:30px 36px;grid-template-columns:1fr}
@media(min-width:700px){ .features{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .features{grid-template-columns:repeat(3,1fr)} }
.feature .ico{
  width:46px;height:46px;border-radius:10px;background:var(--rust-soft);color:var(--rust);
  display:grid;place-items:center;margin-bottom:14px;
}
.feature h3{font-size:18.5px;margin-bottom:8px}
.feature p{margin:0;color:var(--ink-soft);font-size:16px}

/* ---------- cartes interventions ---------- */
.urgences{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:660px){ .urgences{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .urgences{grid-template-columns:repeat(3,1fr)} }
.urg{
  display:flex;gap:15px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:20px 22px;
  text-decoration:none;color:inherit;transition:box-shadow .16s,border-color .16s,transform .16s;
}
.urg:hover{border-color:var(--rust);box-shadow:var(--shadow);transform:translateY(-2px)}
.urg .ico{flex:0 0 auto;color:var(--rust);margin-top:2px}
.urg h3{font-size:17.5px;margin-bottom:5px}
.urg p{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.urg .go{display:inline-block;margin-top:9px;font-size:14.5px;font-weight:700;color:var(--rust)}
.urg.elec .ico,.urg.elec .go{color:var(--sage-dark)}
.urg.elec:hover{border-color:var(--sage)}

/* ---------- avis ---------- */
.reviews{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:820px){ .reviews{grid-template-columns:repeat(3,1fr)} }
.review{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px 26px;display:flex;flex-direction:column}
.review .stars{margin-bottom:12px}
.review p{font-size:16px;color:var(--ink);line-height:1.7;flex:1}
.review cite{font-style:normal;font-size:14.5px;color:var(--ink-soft);font-weight:700;margin-top:10px}
.reviews-cta{text-align:center;margin-top:34px}

/* ---------- chiffres ---------- */
.stats{display:grid;gap:26px;grid-template-columns:1fr;text-align:center}
@media(min-width:760px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stat .n{font-size:clamp(38px,5vw,54px);font-weight:800;color:var(--rust);line-height:1;letter-spacing:-.02em}
.stat h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);margin:12px 0 8px}
.stat p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* ---------- récit / prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,3.2vw,31px);margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19.5px;margin:28px 0 10px}
.prose p,.prose li{color:var(--ink-soft);font-size:17px}
.prose strong,.prose b{color:var(--ink)}
.prose ul{padding-left:22px;margin-bottom:1.1em}
.prose li{margin-bottom:9px}

/* ---------- deux colonnes récit ---------- */
.duo{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:820px){ .duo{grid-template-columns:repeat(2,1fr);gap:44px} }
.duo-item .ico{
  width:44px;height:44px;border-radius:10px;background:var(--sage-soft);color:var(--sage-dark);
  display:grid;place-items:center;margin-bottom:14px;
}
.duo-item h3{font-size:20px;margin-bottom:9px}
.duo-item p{margin:0;color:var(--ink-soft);font-size:16.5px}

/* ---------- tarifs ---------- */
.pricing{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px}
th{
  text-align:left;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sage-dark);font-weight:700;padding:14px 20px;border-bottom:1px solid var(--line);
  background:var(--sage-soft);white-space:nowrap;
}
td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
td:first-child{color:var(--ink)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:var(--ink)}
.legal-note{font-size:15px;color:var(--ink-soft);margin-top:14px}

/* ---------- étapes ---------- */
.steps{display:grid;gap:24px;grid-template-columns:1fr;counter-reset:s}
@media(min-width:820px){ .steps{grid-template-columns:repeat(3,1fr);gap:36px} }
.step h3{font-size:19px;margin-bottom:9px}
.step p{margin:0;color:var(--ink-soft);font-size:16px}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--rust);color:#fff;font-weight:800;font-size:17px;margin-bottom:14px;
}

/* ---------- zone d'intervention ---------- */
.depts{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-bottom:30px}
@media(min-width:760px){ .depts{grid-template-columns:repeat(4,1fr)} }
.dept{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:15px 17px}
.dept b{display:block;font-size:16.5px}
.dept span{font-size:13.5px;color:var(--ink-soft)}
.zones{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.zones a{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:7px 15px;font-size:14.5px;text-decoration:none;color:var(--ink);font-weight:600;
}
.zones a:hover{border-color:var(--rust);color:var(--rust)}

/* ---------- formulaire ---------- */
.quickform{display:grid;gap:14px}
@media(min-width:640px){ .quickform{grid-template-columns:1fr auto;align-items:center} }
.quickform input{
  font-family:inherit;font-size:19px;padding:17px 18px;border-radius:var(--radius);
  border:2px solid transparent;background:#fff;color:var(--ink);width:100%;
}
.quickform input:focus{border-color:var(--rust)}
.quickform .btn{white-space:nowrap}
@media(max-width:639px){ .quickform .btn{width:100%} }
.mini-legal{font-size:13.5px;color:#DDE7D8;margin:16px 0 0}
.mini-legal a{color:#fff}
.form-status{margin-top:12px;font-weight:700;min-height:1.4em;color:#FFE0B2}
.hp{position:absolute;left:-9999px}

/* ---------- FAQ ---------- */
.faq{max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:18px 34px 18px 0;font-weight:700;cursor:pointer;font-size:17.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;color:var(--rust);font-weight:700;font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding:0 0 18px;color:var(--ink-soft);font-size:16.5px}
.faq .answer p:last-child{margin:0}

/* ---------- bandeau défilant ---------- */
.marquee{background:var(--rust);color:#fff;overflow:hidden;padding:20px 0}
.marquee-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:defile 26s linear infinite}
.marquee span{font-size:clamp(23px,3.4vw,34px);font-weight:800;letter-spacing:-.01em}
.marquee a{color:#fff;text-decoration:none}
@keyframes defile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;justify-content:center;width:100%} }

/* ---------- appel final ---------- */
.final{background:var(--sand);text-align:center}
.final h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:12px}
.final p{color:var(--ink-soft);font-size:18px;margin-bottom:26px}

/* ---------- pied de page ---------- */
.site-foot{background:#20211E;color:#B7B7B0;font-size:15.5px;padding:52px 0 30px}
.site-foot a{color:#E4E0D8;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;gap:32px}
@media(min-width:820px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr} }
.site-foot h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid #35362F;font-size:13.5px;line-height:1.6;color:#8C8C86}

/* ---------- BANDEAU LUMINEUX D'APPEL (bas d'écran, toutes tailles) ----------
   Présent en permanence. Le numéro y est l'élément le plus gros de la page :
   c'est le seul geste qu'on attend du visiteur. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid #EFE6DC;
  box-shadow:0 -10px 38px rgba(26,26,26,.13);
}
.callbar::before{
  content:"";position:absolute;top:-3px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#B7410E,#FF8A3D 30%,#FFC08A 50%,#FF8A3D 70%,#B7410E);
  background-size:200% 100%;
  animation:glisse 5.5s linear infinite;
}
@keyframes glisse{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.callbar-in{
  max-width:var(--wrap);margin:0 auto;padding:13px 18px;
  display:flex;align-items:center;gap:14px;justify-content:center;
}
.callbar-live{
  display:none;align-items:center;gap:10px;font-size:16px;
  color:var(--ink-soft);margin-right:auto;
}
.callbar-live b{color:var(--ink);font-weight:700}
.callbar-live i{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:#17A34A;flex:0 0 auto;
}
.callbar-live i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(23,163,74,.6);
  animation:onde 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}

.callbar-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--rust);color:#fff;text-decoration:none;
  font-weight:800;font-size:clamp(25px,5.6vw,38px);letter-spacing:-.015em;
  padding:14px 32px;border-radius:12px;flex:1 1 auto;
  animation:halo 2.8s ease-out infinite;
}
.callbar-tel:hover{background:var(--rust-dark)}
.callbar-tel .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.callbar-tel svg{flex:0 0 auto}
@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(183,65,14,.42), 0 8px 24px rgba(183,65,14,.28)}
  70%{box-shadow:0 0 0 18px rgba(183,65,14,0), 0 8px 24px rgba(183,65,14,.28)}
  100%{box-shadow:0 0 0 0 rgba(183,65,14,0), 0 8px 24px rgba(183,65,14,.28)}
}
.callbar-alt{
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--sage);color:var(--sage-dark);text-decoration:none;
  font-weight:700;font-size:16.5px;padding:17px 24px;border-radius:12px;
  white-space:nowrap;flex:0 0 auto;background:#fff;
}
.callbar-alt:hover{background:var(--sage);color:#fff;border-color:var(--sage)}

@media(min-width:1000px){
  .callbar-live{display:inline-flex}
  .callbar-tel{flex:0 0 auto}
  .callbar-in{padding:12px 22px}
  body{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  .callbar::before,.callbar-tel,.callbar-live i{animation:none}
}

/* ---------- bandeau cookies ---------- */
.cmp{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:3px solid var(--sage-dark);padding:20px 0;box-shadow:0 -6px 30px rgba(0,0,0,.16)}
.cmp[hidden]{display:none}
.cmp .wrap{display:grid;gap:16px}
@media(min-width:900px){ .cmp .wrap{grid-template-columns:1fr auto;align-items:center;gap:30px} }
.cmp p{margin:0;font-size:15px;color:var(--ink-soft);max-width:74ch}
.cmp p b{color:var(--ink)}
.cmp-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- pages de contenu ---------- */
.page-head{background:var(--cream);border-bottom:1px solid var(--line);padding:46px 0}
.page-head h1{font-size:clamp(28px,4.2vw,42px);margin-bottom:12px}
.page-head p{color:var(--ink-soft);margin:0;max-width:70ch;font-size:18px}
.todo{background:#FFF8E3;border:1px dashed #C79A16;border-radius:8px;padding:16px 20px;margin:0 0 22px;font-size:15.5px;color:#6B5200}
.todo b{color:#4A3800}

/* ============================================================
   PILIERS DE PERSUASION — ajouts
   ============================================================ */

/* --- RARETÉ : bandeau de disponibilité en direct ---
   Pas de clignotement on/off, qui fait daté et fatigue l'œil : un point
   qui respire, deux ondes concentriques décalées, et le chiffre qui
   s'éclaire doucement. L'attention est captée sans agressivité. */
.rarete{
  background:linear-gradient(180deg,var(--sage-deep),var(--sage-deep2));
  color:#EDF3E8;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:11px 0;position:relative;overflow:hidden;
}
.rarete::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,162,77,.95),transparent);
  animation:balayage 5s linear infinite;
}
.rarete .wrap{
  display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;
  justify-content:center;text-align:center;position:relative;z-index:1;
}

/* Étiquette « en direct » : petites capitales espacées, langage de console */
.rarete .live{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:#C6DDB8;
}
.rarete .live i{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:#FFA24D;flex:0 0 auto;box-shadow:0 0 10px rgba(255,162,77,.9);
}
.rarete .live i::before,
.rarete .live i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,162,77,.7);
  animation:onde 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.rarete .live i::after{animation-delay:1.4s}
@keyframes onde{
  0%{transform:scale(1);opacity:.85}
  100%{transform:scale(3.8);opacity:0}
}
@keyframes balayage{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Le chiffre : pastille pleine, chiffres tabulaires, battement discret */
.rarete .compteur{font-size:16px;color:#EDF3E8;font-weight:600;flex:0 0 auto}
.rarete .compteur b{
  display:inline-block;background:var(--rust-vif);color:#fff;
  font-weight:800;font-size:19px;line-height:1;padding:6px 12px;
  border-radius:8px;margin-right:8px;font-variant-numeric:tabular-nums;
  animation:battement 2.6s ease-out infinite;
}
@keyframes battement{
  0%{box-shadow:0 0 0 0 rgba(255,140,60,.55)}
  70%{box-shadow:0 0 0 13px rgba(255,140,60,0)}
  100%{box-shadow:0 0 0 0 rgba(255,140,60,0)}
}
.rarete small{color:#AFC5A2;font-size:13px;display:block;width:100%;margin-top:1px}
@media(min-width:1040px){ .rarete small{display:inline;width:auto;margin:0} }
@media (prefers-reduced-motion:reduce){
  .rarete::after,.rarete .live i::before,.rarete .live i::after,.rarete .compteur b{animation:none}
}

/* --- PREUVE SOCIALE : le chiffre --- */
.preuve{display:grid;gap:32px;align-items:center}
@media(min-width:900px){ .preuve{grid-template-columns:auto 1fr;gap:52px} }
.preuve-chiffre{text-align:center}
.preuve-chiffre .n{
  font-size:clamp(52px,8vw,82px);font-weight:800;color:var(--rust);
  line-height:.95;letter-spacing:-.03em;display:block;
}
.preuve-chiffre .etoiles{color:#F2A100;font-size:23px;letter-spacing:3px;margin-top:12px}
.preuve-chiffre .note{font-size:15px;color:var(--ink-soft);margin-top:6px}
.preuve-txt h2{font-size:clamp(24px,3.4vw,33px);margin-bottom:14px}
.preuve-txt p{color:var(--ink-soft);font-size:17.5px;margin-bottom:10px}
.preuve-txt .src{font-size:14px;color:var(--ink-soft)}

/* --- AVERSION À LA PERTE : le coût d'attendre --- */
.cout{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){ .cout{grid-template-columns:repeat(3,1fr)} }
.cout-item{background:var(--paper);border:1px solid var(--line);border-left:4px solid #C0392B;border-radius:8px;padding:20px 22px}
.cout-item h3{font-size:17.5px;margin-bottom:7px}
.cout-item p{margin:0;font-size:15.5px;color:var(--ink-soft)}

/* --- GARANTIE : réduction du risque --- */
.garantie{
  background:var(--sage-soft);border:2px solid var(--sage);border-radius:14px;
  padding:30px 26px;display:grid;gap:24px;align-items:center;
}
@media(min-width:860px){ .garantie{grid-template-columns:auto 1fr;padding:38px 44px;gap:38px} }
.garantie .sceau{
  width:112px;height:112px;border-radius:50%;background:var(--sage-dark);color:#fff;
  display:grid;place-items:center;text-align:center;line-height:1.1;margin:0 auto;flex:0 0 auto;
}
.garantie .sceau b{display:block;font-size:34px;font-weight:800}
.garantie .sceau span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.garantie h2{font-size:clamp(23px,3.2vw,30px);margin-bottom:12px}
.garantie p{margin:0 0 10px;font-size:17px;color:#3C4A36}
.garantie p:last-child{margin:0}
.garantie strong{color:var(--ink)}

/* --- RÉCIPROCITÉ : l'offre --- */
.offre{
  background:var(--rust);color:#fff;border-radius:14px;padding:30px 26px;text-align:center;
}
@media(min-width:820px){ .offre{padding:42px 48px} }
.offre h2{color:#fff;font-size:clamp(25px,3.6vw,36px);margin-bottom:12px}
.offre p{color:#FBE3D6;font-size:18px;margin:0 auto 24px;max-width:62ch}
.offre .ast{font-size:13.5px;color:#F3C7AF;margin-top:18px;margin-bottom:0}

/* --- LE GRAND NUMÉRO --- */
.tel-geant{background:var(--ink);color:#fff;text-align:center;padding:56px 0}
.tel-geant .sur{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#9C9C96;margin-bottom:14px;
}
.tel-geant a{
  display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:#fff;
  font-size:clamp(31px,7.2vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1.05;
}
.tel-geant a:hover{color:#FFB489}
.tel-geant svg{flex:0 0 auto;color:var(--rust)}
.tel-geant .sous{color:#9C9C96;font-size:16px;margin-top:16px}

/* --- AVERTISSEMENT DE BAS DE PAGE --- */
.avertissement{
  background:#171814;color:#7E7F78;font-size:12.5px;line-height:1.65;
  padding:20px 0 26px;border-top:1px solid #2C2D28;
}
.avertissement p{margin:0;max-width:none}

/* --- RARETÉ : jauge segmentée, lecture instantanée du remplissage --- */
.jauge{display:inline-flex;gap:3px;align-items:center;flex:0 0 auto}
.jauge i{
  width:4px;height:16px;border-radius:2px;background:rgba(255,255,255,.22);
}
.jauge i.on{
  background:#FFA24D;box-shadow:0 0 9px rgba(255,162,77,.85);
  animation:segment 2.6s ease-in-out infinite;
}
.jauge i.on:nth-child(2){animation-delay:.35s}
@keyframes segment{
  0%,100%{opacity:1;transform:scaleY(1)}
  50%{opacity:.5;transform:scaleY(.72)}
}
@media (prefers-reduced-motion:reduce){ .jauge i.on{animation:none} }

/* ============================================================
   FINITION « INSTRUMENT DE MESURE »
   Les zones de stress marketing empruntent le vocabulaire des
   tableaux de bord : chasse fixe, puce LIVE, trame fine, balayage.
   Le contenu éditorial, lui, reste chaud et artisanal.
   ============================================================ */

/* Trame verticale très fine : texture de panneau technique */
.rarete{
  background-image:
    linear-gradient(180deg,var(--sage-deep),var(--sage-deep2)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 16px);
  background-blend-mode:normal;
}

/* Puce LIVE encadrée, en chasse fixe */
.rarete .live{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  border:1px solid rgba(255,162,77,.42);border-radius:5px;
  background:rgba(255,162,77,.10);padding:4px 10px 4px 8px;
}

/* Le chiffre en chasse fixe : lecture d'un relevé, pas d'un slogan */
.rarete .compteur b{font-family:var(--mono);font-size:18px;padding:6px 11px}

/* Ratio brut à côté de la jauge */
.rarete .ratio{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:#B7CCAA;flex:0 0 auto;
}

/* Balayage lumineux sur la jauge */
.jauge{position:relative;overflow:hidden;padding:2px 0}
.jauge::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-140%);animation:scan 4.2s cubic-bezier(.5,0,.5,1) infinite;
  pointer-events:none;
}
@keyframes scan{ 0%{transform:translateX(-140%)} 55%,100%{transform:translateX(1400%)} }

/* ---- bandeau du bas : même famille, vert profond ---- */
.callbar{
  background:
    linear-gradient(180deg,rgba(62,90,51,.97),rgba(51,74,41,.99)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 16px);
  border-top:none;
  box-shadow:0 -10px 40px rgba(26,32,20,.30);
}
.callbar-live{color:#C6DDB8}
.callbar-live b{color:#fff}
.callbar-live i{background:#9BE870;box-shadow:0 0 11px rgba(155,232,112,.85)}
.callbar-live i::after{border-color:rgba(155,232,112,.6)}
.callbar-tag{
  display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:#A9C39A;border:1px solid rgba(255,255,255,.18);border-radius:5px;
  padding:4px 9px;flex:0 0 auto;
}
@media(min-width:1180px){ .callbar-tag{display:inline-block} }
.callbar-tel{background:var(--rust-vif)}
.callbar-tel:hover{background:var(--rust)}
.callbar-alt{
  border-color:rgba(255,255,255,.42);color:#F1F5EE;background:transparent;
}
.callbar-alt:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

@media (prefers-reduced-motion:reduce){ .jauge::after{animation:none;opacity:0} }
.callbar-live{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ============================================================
   VERT FEU VERT + FINITION HAUTE TECHNOLOGIE
   Le vert signale « on peut y aller » ; l'orange, « allez-y
   maintenant ». Chaque bandeau ne porte qu'un seul point orange.
   ============================================================ */
:root{
  /* Gabriel : le bandeau de disponibilité passe du vert au bleu nuit.
     Le vert tire vers le rassurant ; ici on reste dans
     le registre de l intervention, et l ambre garde l exclusivité de
     l action. */
  --vert-feu:#1E6B4C;
  --vert-feu2:#12503A;
  --vert-clair:#CFEBDD;
}

/* ---------- bandeau haut ---------- */
.rarete{
  background-image:
    linear-gradient(180deg,var(--vert-feu),var(--vert-feu2)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 16px);
  color:#FFFFFF;
  border-bottom:1px solid rgba(0,0,0,.10);
  padding:12px 0;
}
.rarete::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.rarete .live{
  color:#FFFFFF;border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);
}
.rarete .live i{background:#FFFFFF;box-shadow:0 0 10px rgba(255,255,255,.9)}
.rarete .live i::before,.rarete .live i::after{border-color:rgba(255,255,255,.75)}
.rarete .compteur{color:#FFFFFF}
.rarete .compteur b{
  background:linear-gradient(180deg,#FF9440,#E2610A);
  box-shadow:0 2px 0 rgba(0,0,0,.14);
}
@keyframes battement{
  0%{box-shadow:0 2px 0 rgba(0,0,0,.14), 0 0 0 0 rgba(255,148,64,.75)}
  70%{box-shadow:0 2px 0 rgba(0,0,0,.14), 0 0 0 14px rgba(255,148,64,0)}
  100%{box-shadow:0 2px 0 rgba(0,0,0,.14), 0 0 0 0 rgba(255,148,64,0)}
}
.rarete .ratio{color:rgba(255,255,255,.82)}
.rarete small{color:var(--vert-clair)}

/* ---------- LA JAUGE, version instrument de précision ---------- */
.jauge{
  display:inline-flex;gap:3px;align-items:flex-end;flex:0 0 auto;
  position:relative;overflow:hidden;padding:0 0 7px;
}
.jauge i{
  position:relative;width:5px;height:18px;border-radius:2.5px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:none;
}
/* graduation : un repère fin tous les quatre segments */
.jauge i:nth-child(4n)::before{
  content:"";position:absolute;left:50%;bottom:-6px;width:1px;height:4px;
  background:rgba(255,255,255,.38);
}
.jauge i.on{
  background:linear-gradient(180deg,#FFD9A8,#FF8A3D);
  box-shadow:0 0 10px rgba(255,158,80,.85), inset 0 0 0 1px rgba(255,255,255,.35);
  animation:segment 2.6s ease-in-out infinite;
}
@keyframes segment{
  0%,100%{opacity:1;transform:scaleY(1)}
  50%{opacity:.72;transform:scaleY(.82)}
}
/* le balayage passe au-dessus des segments */
.jauge::after{
  content:"";position:absolute;top:0;bottom:7px;left:0;width:30px;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.60),transparent);
  transform:translateX(-160%);animation:scan 4.2s cubic-bezier(.5,0,.5,1) infinite;
  pointer-events:none;
}

/* ---------- bandeau bas ---------- */
.callbar{
  background:
    linear-gradient(180deg,var(--vert-feu),var(--vert-feu2)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px);
  box-shadow:0 -10px 40px rgba(10,60,32,.32);
}
.callbar::before{
  background:linear-gradient(90deg,#E2610A,#FF9440 30%,#FFD9A8 50%,#FF9440 70%,#E2610A);
  background-size:200% 100%;
}
.callbar-live{color:var(--vert-clair)}
.callbar-live b{color:#fff}
.callbar-live i{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.95)}
.callbar-live i::after{border-color:rgba(255,255,255,.7)}
.callbar-tag{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.32)}
.callbar-tel{background:linear-gradient(180deg,#F0700F,#D4550F)}
.callbar-tel:hover{background:linear-gradient(180deg,#D4550F,#B7410E)}
@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(255,148,64,.60), 0 10px 26px rgba(0,0,0,.22)}
  70%{box-shadow:0 0 0 20px rgba(255,148,64,0), 0 10px 26px rgba(0,0,0,.22)}
  100%{box-shadow:0 0 0 0 rgba(255,148,64,0), 0 10px 26px rgba(0,0,0,.22)}
}

/* ---------- « ÊTRE RAPPELÉ » : liseré lumineux qui tourne ---------- */
.callbar-alt{
  position:relative;isolation:isolate;border:none;overflow:hidden;
  color:#fff;background:transparent;padding:18px 26px;
}
.callbar-alt::before{
  content:"";position:absolute;inset:-160%;z-index:-2;
  background:conic-gradient(from 0turn,transparent 0 76%,rgba(255,255,255,.95) 86%,transparent 96% 100%);
  animation:tourne 4.4s linear infinite;
}
.callbar-alt::after{
  content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:11px;
  background:linear-gradient(180deg,#1E6B4C,#12503A);
}
.callbar-alt:hover::after{background:rgba(255,255,255,.16)}
@keyframes tourne{ to{transform:rotate(1turn)} }

/* même liseré sur le bouton du formulaire de rappel */
#form-rappel .btn-call{
  position:relative;isolation:isolate;overflow:hidden;background:transparent;
}
#form-rappel .btn-call::before{
  content:"";position:absolute;inset:-160%;z-index:-2;
  background:conic-gradient(from 0turn,transparent 0 74%,rgba(255,214,170,.95) 86%,transparent 96% 100%);
  animation:tourne 5s linear infinite;
}
#form-rappel .btn-call::after{
  content:"";position:absolute;inset:2px;z-index:-1;border-radius:5px;
  background:linear-gradient(180deg,#C24B0D,#A33A0B);
}
#form-rappel .btn-call:hover::after{background:linear-gradient(180deg,#A33A0B,#8A310A)}

/* pastille d'en-tête alignée sur le feu vert */
.live-pill{background:var(--vert-feu)}

@media (prefers-reduced-motion:reduce){
  .callbar-alt::before,#form-rappel .btn-call::before,.jauge i.on,.jauge::after{animation:none}
}

/* ============================================================
   BOUTON « ÊTRE RAPPELÉ » — blanc plein, anneau lumineux rotatif
   Le fond blanc le rend lisible sur le vert ; l'anneau tourne
   à l'extérieur du bouton, donc il n'est jamais rogné.
   ============================================================ */
.callbar-alt{
  position:relative;isolation:isolate;overflow:visible;
  background:#FFFFFF;color:#0B6E3C;border:none;
  padding:17px 28px;border-radius:12px;
  font-weight:800;font-size:16.5px;letter-spacing:-.005em;
  box-shadow:0 6px 20px rgba(6,60,32,.28);
}
.callbar-alt::before{
  content:"";position:absolute;inset:-2.5px;border-radius:14px;z-index:-1;
  background:conic-gradient(from 0turn,
    rgba(255,255,255,0) 0 48%,
    #FFFFFF 66%, #CFEBDD 76%,
    rgba(255,255,255,0) 90% 100%);
  animation:tourne 3.6s linear infinite;
}
.callbar-alt::after{
  content:"";position:absolute;inset:-9px;border-radius:19px;z-index:-2;
  background:radial-gradient(closest-side,rgba(255,255,255,.30),transparent 75%);
  animation:respireHalo 3.6s ease-in-out infinite;
}
@keyframes respireHalo{ 0%,100%{opacity:.35} 50%{opacity:.85} }
.callbar-alt:hover{background:#F3FFF8;color:#0A5C33}

/* ============================================================
   LOGO — LE NOM prend toute la place
   ============================================================ */
.logo{gap:12px}
.logo .name{
  font-size:32px;line-height:.86;letter-spacing:-.035em;font-weight:800;
}
.logo .name small{
  font-size:11px;letter-spacing:.42em;margin-bottom:4px;font-weight:800;
}
@media(max-width:520px){
  .logo .name{font-size:26px}
  .logo .name small{font-size:11px;letter-spacing:.34em}
}
@media(min-width:1000px){ .nav{gap:20px} .nav a{font-size:14.5px} }

@media (prefers-reduced-motion:reduce){
  .callbar-alt::before,.callbar-alt::after{animation:none}
}

/* Sous-titre du bouton de rappel : dit à quoi sert le rappel */
.callbar-rappel{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;
}
.callbar-rappel small{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  color:rgba(255,255,255,.88);white-space:nowrap;line-height:1;
}
@media(max-width:400px){
  .callbar-rappel small{font-size:11px;letter-spacing:.08em}
  .callbar-alt{padding:15px 18px;font-size:15.5px}
}

/* ============================================================
   CORRECTIF BANDEAU BAS
   Trois défauts corrigés : texte tronqué par des points de
   suspension, bouton blanc qui débordait au-dessus de la barre,
   et manque de place en largeur.
   ============================================================ */
.callbar-in{
  max-width:1320px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:16px;justify-content:center;
}

/* plus de troncature : le texte s'affiche entier ou pas du tout */
.callbar-live{
  white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.25;font-size:15.5px;flex:0 1 auto;
}
@media(max-width:1279px){ .callbar-live{display:none} }
@media(min-width:1280px){ .callbar-live{display:inline-flex} }

/* le bouton d'appel garde la vedette, sans écraser la barre */
.callbar-tel{padding:12px 28px;line-height:1.2}

/* la colonne « être rappelé » tient dans la hauteur de la barre */
.callbar-rappel{gap:5px}
.callbar-alt{padding:13px 26px;font-size:16px;border-radius:11px}
.callbar-alt::before{inset:-2px;border-radius:13px}
.callbar-alt::after{inset:-6px;border-radius:17px}
.callbar-rappel small{font-size:11px;letter-spacing:.11em}

body{padding-bottom:96px}
@media(min-width:1000px){ body{padding-bottom:108px} }

/* bandeau de réassurance : les libellés sur deux lignes propres */
.trust li{align-items:flex-start;line-height:1.35}
.trust svg{margin-top:3px}

/* ============================================================
   BOUTON « ÊTRE RAPPELÉ » — deux lignes dans un seul encart
   ============================================================ */
.callbar-alt{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:12px 30px;border-radius:13px;line-height:1.1;
  text-align:center;flex:0 0 auto;
}
.callbar-alt .t1{font-size:20px;font-weight:800;letter-spacing:-.01em;color:#0B6E3C}
.callbar-alt .t2{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:#3D8A5E;white-space:nowrap;text-transform:uppercase;
}
.callbar-alt:hover .t1{color:#0A5C33}
.callbar-alt::before{inset:-2.5px;border-radius:15px}
.callbar-alt::after{inset:-7px;border-radius:20px}

/* ============================================================
   REFLET LUMINEUX SUR LES NUMÉROS
   Un trait de lumière blanche traverse le bouton en biais.
   C'est le signal « surface active » des interfaces récentes :
   il attire l'œil sans clignoter ni bouger la mise en page.
   ============================================================ */
.callbar-tel,
.head-tel .btn-call{position:relative;overflow:hidden}

.callbar-tel::after,
.head-tel .btn-call::after{
  content:"";position:absolute;top:-70%;bottom:-70%;width:70px;left:-140px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.30) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.30) 65%,
    transparent);
  transform:skewX(-22deg);pointer-events:none;
}
.callbar-tel::after{animation:reflet 3.8s ease-in-out infinite}
.head-tel .btn-call::after{animation:reflet 4.6s ease-in-out .8s infinite;width:52px}

@keyframes reflet{
  0%{left:-140px}
  38%,100%{left:calc(100% + 60px)}
}

/* le contenu du bouton passe au-dessus du reflet */
.callbar-tel svg,.callbar-tel .num,
.head-tel .btn-call svg,.head-tel .btn-call .num{position:relative;z-index:1}

/* halo vert qui respire autour du gros numéro : « la voie est libre » */
.callbar-tel{
  box-shadow:0 0 0 0 rgba(255,148,64,.6), 0 10px 26px rgba(0,0,0,.22);
}

@media (prefers-reduced-motion:reduce){
  .callbar-tel::after,.head-tel .btn-call::after{animation:none;opacity:0}
}
/* le texte de gauche tient sur une ligne, sans troncature */
@media(min-width:1280px){
  .callbar-live{white-space:nowrap;flex:0 0 auto;overflow:visible;text-overflow:clip}
}

/* ============================================================
   LE NOM DE LA MAISON DANS LE TEXTE
   Il est le capital de la maison : partout où il apparaît, il se
   détache par la taille et la graisse, sans changer de couleur —
   une couleur en ferait un lien aux yeux du lecteur.
   ============================================================ */
.nom-maison{
  font-size:1.18em;font-weight:800;letter-spacing:-.015em;
  color:var(--ink);white-space:nowrap;
}
h2 .nom-maison,h3 .nom-maison{font-size:1.1em}
.site-foot .nom-maison,.callback .nom-maison{color:#fff}
.hero .pitch .nom-maison{font-size:1.22em}

/* ============================================================
   CARTE DE COUVERTURE
   Chaque point est une commune réellement couverte, placée à ses
   coordonnées. Aucune bibliothèque, aucune tuile distante : un
   seul SVG mis en cache, plus un marqueur positionné en pourcentage.
   ============================================================ */
.carte{display:grid;gap:26px;align-items:center}
@media(min-width:940px){ .carte{grid-template-columns:1.55fr 1fr;gap:38px} }

.carte-zone{
  position:relative;aspect-ratio:1000/850;border-radius:14px;overflow:hidden;
  background:#F7F4EE;border:1px solid var(--line);box-shadow:var(--shadow);
}
.carte-zone img{width:100%;height:100%;object-fit:contain;display:block}

/* halo du marqueur : deux ondes concentriques, langage radar */
.carte-halo{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  pointer-events:none;
}
.carte-halo::before,.carte-halo::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(183,65,14,.65);
  animation:onde 3s cubic-bezier(.22,.61,.36,1) infinite;
}
.carte-halo::after{animation-delay:1.5s}

.carte-pin{
  position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--rust);border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(183,65,14,.5),0 3px 10px rgba(0,0,0,.28);
  z-index:3;
}
.carte-pin b{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:6px;white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
}
.carte-pin b::after{
  content:"";position:absolute;left:50%;top:100%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--ink);
}

/* communes voisines : cliquables, étiquette au survol */
.carte-voisin{
  position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--sage-dark);border:2px solid #fff;
  z-index:2;text-decoration:none;
  transition:transform .15s,background .15s;
}
.carte-voisin:hover,.carte-voisin:focus-visible{
  background:var(--rust);transform:scale(1.45);z-index:4;
}
.carte-voisin span{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:5px;white-space:nowrap;
  border:1px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,.16);
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.carte-voisin:hover span,.carte-voisin:focus-visible span{opacity:1}

/* panneau latéral : la disponibilité, dans le même langage que les bandeaux */
.carte-info{
  background:linear-gradient(180deg,var(--vert-feu),var(--vert-feu2));
  color:#fff;border-radius:14px;padding:26px 24px;
}
.carte-info .live{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:5px;
  background:rgba(255,255,255,.12);padding:4px 10px 4px 8px;
}
.carte-info .live i{
  position:relative;width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.9);flex:0 0 auto;
}
.carte-info .live i::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75);
  animation:onde 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.carte-chiffre{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.carte-chiffre b{
  font-family:var(--mono);font-size:40px;font-weight:800;line-height:1;
  background:linear-gradient(180deg,#FF9440,#E2610A);color:#fff;
  padding:10px 16px;border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.14);
  animation:battement 2.6s ease-out infinite;
}
.carte-chiffre span{font-size:15px;line-height:1.35;color:var(--vert-clair)}
.carte-info .jauge{margin-bottom:16px}
.carte-info p{font-size:15px;color:var(--vert-clair);margin-bottom:18px}
.carte-info .btn-call{width:100%;font-size:20px;padding:14px 20px}

@media (prefers-reduced-motion:reduce){
  .carte-halo::before,.carte-halo::after,.carte-info .live i::before,.carte-chiffre b{animation:none}
}

/* ============================================================
   CARTE — VERSION ZOOMABLE
   Le plan se met à l'échelle, les marqueurs se contre-mettent à
   l'échelle pour garder leur taille : on zoome sur le terrain,
   pas sur les étiquettes.
   ============================================================ */
.carte-zone{
  position:relative;aspect-ratio:1000/850;border-radius:14px;overflow:hidden;
  background:#F7F4EE;border:1px solid var(--line);box-shadow:var(--shadow);
}
.carte-plan{
  position:absolute;inset:0;
  transform-origin:calc(var(--px) * 1%) calc(var(--py) * 1%);
  transform:scale(var(--z));
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
.carte-plan img{width:100%;height:100%;object-fit:contain;display:block}

.carte-pin,.carte-halo,.carte-voisin{
  position:absolute;left:var(--x);top:var(--y);margin:0;
  transform:translate(-50%,-50%) scale(calc(1 / var(--z)));
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
.carte-pin{width:16px;height:16px;z-index:6}
.carte-halo{width:16px;height:16px;z-index:4}
.carte-voisin{width:13px;height:13px;z-index:5}
.carte-voisin:hover,.carte-voisin:focus-visible{
  transform:translate(-50%,-50%) scale(calc(1.4 / var(--z)));background:var(--rust);
}

/* le rayon est une distance réelle : il se met à l'échelle avec le plan */
.carte-rayon{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--r) * 2%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(183,65,14,.55);
  background:rgba(183,65,14,.06);z-index:3;pointer-events:none;
}

/* en vue de proximité, les noms des communes voisines restent affichés */
.carte-zone.zoom .carte-voisin span{opacity:1}
.carte-voisin span em{font-style:normal;color:var(--rust);font-weight:800}

/* commandes de zoom */
.carte-ctrl{
  position:absolute;left:12px;top:12px;z-index:8;display:flex;gap:5px;
  background:rgba(255,255,255,.93);border-radius:11px;padding:4px;
  box-shadow:0 3px 16px rgba(26,26,26,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.carte-ctrl button{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  border:none;background:transparent;color:var(--ink-soft);
  padding:8px 13px;border-radius:8px;cursor:pointer;font-weight:700;
  transition:background .18s,color .18s;
}
.carte-ctrl button:hover{background:var(--sand);color:var(--ink)}
.carte-ctrl button.on{background:var(--rust);color:#fff}
.carte-ctrl[hidden]{display:none}

.carte-legende{
  font-size:13px;color:var(--ink-soft);margin:12px 0 0;
  display:flex;align-items:center;gap:8px;
}
.carte-legende b{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:1px dashed rgba(183,65,14,.7);background:rgba(183,65,14,.08);
}
@media (prefers-reduced-motion:reduce){
  .carte-plan,.carte-pin,.carte-halo,.carte-voisin{transition:none}
}
.carte-col{min-width:0}

/* ============================================================
   CARTE — ÉCRAN RADAR
   Fond sombre : la carte devient un instrument distinct du site,
   et non un aplat de plus dans la même gamme de crème.
   ============================================================ */
.carte-zone{
  background:#0E1A14;border:none;
  box-shadow:0 2px 4px rgba(14,26,20,.2), 0 26px 60px -34px rgba(14,26,20,.9);
}
.carte-plan img{background:#0E1A14}

/* le repère de la commune : point orange lumineux, sans étiquette */
.carte-pin{
  width:18px;height:18px;background:#FF8A3D;border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(255,138,61,.28), 0 0 22px rgba(255,138,61,.9);
}
.carte-halo::before,.carte-halo::after{border-color:rgba(255,138,61,.75)}
.carte-rayon{border:1px dashed rgba(255,138,61,.6);background:rgba(255,138,61,.09)}

/* communes voisines : discrètes, nommées seulement au survol */
.carte-voisin{background:#7ECB92;border:2px solid rgba(255,255,255,.85);width:12px;height:12px}
.carte-zone.zoom .carte-voisin span{opacity:0}
.carte-voisin:hover span,.carte-voisin:focus-visible span{opacity:1}
.carte-voisin span{
  background:#0E1A14;color:#fff;border-color:rgba(255,255,255,.25);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.carte-voisin span em{color:#FFB07A}

/* ============================================================
   LA BULLE : le point de conversion posé sur la carte
   Ancrée sur la zone et non sur le plan, elle ne bouge pas au zoom.
   ============================================================ */
.carte-bulle{
  position:absolute;z-index:9;width:min(280px,72%);
  background:#fff;border-radius:14px;padding:16px 18px 14px;
  box-shadow:0 14px 44px rgba(0,0,0,.42);
  animation:bulleEntre .5s cubic-bezier(.2,.9,.3,1.2) both .35s;
}
.carte-bulle.bas{transform:translate(-50%,26px)}
.carte-bulle.haut{transform:translate(-50%,calc(-100% - 26px))}
.carte-bulle[hidden]{display:none}
@keyframes bulleEntre{
  from{opacity:0;transform:translate(-50%,36px) scale(.9)}
}
.carte-bulle.haut{animation-name:bulleEntreHaut}
@keyframes bulleEntreHaut{
  from{opacity:0;transform:translate(-50%,calc(-100% - 16px)) scale(.9)}
  to{opacity:1;transform:translate(-50%,calc(-100% - 26px)) scale(1)}
}
/* la flèche pointe vers le repère */
.carte-bulle::after{
  content:"";position:absolute;left:50%;margin-left:-9px;
  border:9px solid transparent;
}
.carte-bulle.bas::after{bottom:100%;border-bottom-color:#fff}
.carte-bulle.haut::after{top:100%;border-top-color:#fff}

.bulle-ville{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);font-weight:700;margin-bottom:9px;
}
.bulle-ville i{
  position:relative;width:8px;height:8px;border-radius:50%;background:#FF8A3D;flex:0 0 auto;
}
.bulle-ville i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,138,61,.7);
  animation:onde 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.carte-bulle strong{
  display:block;font-size:16px;line-height:1.35;color:var(--ink);
  font-weight:700;margin-bottom:14px;
}
.carte-bulle strong b{
  display:inline-block;background:var(--rust);color:#fff;font-family:var(--mono);
  font-size:17px;font-weight:800;padding:3px 9px;border-radius:6px;margin-right:4px;
}
.bulle-cta{
  display:block;text-align:center;text-decoration:none;
  background:linear-gradient(180deg,#F0700F,#D4550F);color:#fff;
  font-weight:800;font-size:15.5px;padding:13px 16px;border-radius:10px;
  box-shadow:0 6px 18px rgba(212,85,15,.42);
  animation:halo 2.8s ease-out infinite;
}
.bulle-cta:hover{background:linear-gradient(180deg,#D4550F,#B7410E);color:#fff}

/* ============================================================
   LÉGENDE — plus grande, explicite
   ============================================================ */
.carte-legende{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0;
  font-size:15.5px;color:var(--ink-soft);
}
.carte-legende span{display:flex;align-items:center;gap:9px}
.carte-legende strong{color:var(--ink);font-weight:700}
.carte-legende b{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:none}
.carte-legende .pt-vert{background:#4E8A63}
.carte-legende .pt-orange{background:#FF8A3D}
.carte-legende .pt-cercle{
  background:rgba(255,138,61,.15);border:1px dashed rgba(183,65,14,.8);
  width:16px;height:16px;
}

/* commandes de zoom : posées sur le fond sombre */
.carte-ctrl{background:rgba(14,26,20,.82);box-shadow:0 3px 16px rgba(0,0,0,.4)}
.carte-ctrl button{color:rgba(255,255,255,.72)}
.carte-ctrl button:hover{background:rgba(255,255,255,.12);color:#fff}
.carte-ctrl button.on{background:#FF8A3D;color:#12211A}

@media (prefers-reduced-motion:reduce){
  .carte-bulle{animation:none}
  .bulle-cta,.bulle-ville i::after{animation:none}
}

/* ============================================================
   BULLE — le nom de la commune devient le message principal
   La proximité est l'argument : elle doit se lire avant tout
   le reste, y compris avant le chiffre de rareté.
   ============================================================ */
.carte-bulle{width:min(330px,80%);padding:18px 20px 16px}
.bulle-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-bottom:6px;
}
.bulle-tag i{
  position:relative;width:8px;height:8px;border-radius:50%;background:var(--rust);flex:0 0 auto;
}
.bulle-tag i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(183,65,14,.7);
  animation:onde 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.bulle-ville{
  display:block;font-size:clamp(27px,4.2vw,35px);font-weight:800;
  line-height:1.02;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:12px;text-wrap:balance;
}
.carte-bulle strong{font-size:15px;margin-bottom:15px;color:var(--ink-soft);font-weight:600}
.carte-bulle strong b{font-size:16px;padding:3px 8px}
@media (prefers-reduced-motion:reduce){ .bulle-tag i::after{animation:none} }

/* ============================================================
   LISTE DES COMMUNES SOUS LA CARTE
   Les noms sortent de la carte pour venir ici, lisibles, cliquables,
   avec leur distance réelle. Plus rien ne se chevauche.
   ============================================================ */
.carte-liste{margin-top:22px}
.carte-liste h3{
  font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:12px;
}
.carte-liste ul{
  list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.carte-liste a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:9px 13px;text-decoration:none;
  transition:border-color .15s,background .15s,transform .15s;
}
.carte-liste a:hover{
  border-color:var(--rust);background:var(--rust-soft);transform:translateY(-1px);
}
.carte-liste b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.carte-liste em{
  font-family:var(--mono);font-style:normal;font-size:11.5px;
  color:var(--ink-soft);white-space:nowrap;flex:0 0 auto;
}
.carte-liste a:hover em{color:var(--rust)}

/* ============================================================
   CALQUE DE MISE EN ÉVIDENCE
   La carte de fond porte les 726 communes ; ce calque, propre à
   chaque page, remplit la commune du visiteur et souligne ses
   dix voisines. Il se superpose au pixel près.
   ============================================================ */
.carte-focus{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;
}
.focus-voisins{
  fill:#7ECB92;fill-opacity:.20;
  stroke:#7ECB92;stroke-width:1.6;stroke-opacity:.95;stroke-linejoin:round;
}
.focus-cible{
  fill:var(--acc-clair,#FF8A3D);fill-opacity:.5;
  stroke:#fff;stroke-width:2.4;stroke-linejoin:round;
  filter:drop-shadow(0 0 9px rgba(var(--acc-rgb,255,138,61),.95));
}

/* ============================================================
   BULLE — placée dans un coin, plus jamais sur la commune
   Elle masquait exactement ce qu'elle est censée désigner.
   ============================================================ */
.carte-bulle{
  left:16px;bottom:16px;top:auto;right:auto;
  transform:none;
  width:min(300px,calc(100% - 32px));
  animation:bulleCoin .5s cubic-bezier(.2,.9,.3,1.2) both .35s;
}
.carte-bulle.bas,.carte-bulle.haut{transform:none}
.carte-bulle::after{display:none}
@keyframes bulleCoin{ from{opacity:0;transform:translateY(18px) scale(.96)} }
@media(max-width:620px){
  .carte-bulle{left:12px;right:12px;bottom:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){ .carte-bulle{animation:none} }

/* ============================================================
   TRAIT DE LIAISON ENCART → COMMUNE
   Une courbe en pointillés qui coule de l'encart vers le repère.
   Elle est tracée en pixels par le script, donc juste à toute
   taille d'écran, et ne se met pas à l'échelle avec le zoom.
   ============================================================ */
.carte-lien{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:7;overflow:visible;
}
.carte-lien path{
  fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-opacity:.9;
  stroke-linecap:round;stroke-dasharray:7 9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
  animation:fluxLien 1.05s linear infinite;
}
@keyframes fluxLien{ to{stroke-dashoffset:-16} }
@media (prefers-reduced-motion:reduce){
  .carte-lien path{animation:none;stroke-dasharray:none;stroke-opacity:.55}
}

/* ============================================================
   L'ENCART S'OUVRE ET POINTE LA COMMUNE
   Le liseré de l'encart est interrompu à l'endroit exact où la
   flèche sort. La flèche est de la même matière que l'encart :
   on lit un seul objet qui se prolonge vers la commune.
   ============================================================ */
.carte-bulle{
  border:1.5px solid rgba(26,26,26,.16);
  overflow:visible;
}
/* le morceau de liseré effacé : même blanc que l'encart */
.carte-breche{
  position:absolute;width:40px;height:6px;background:#fff;
  z-index:10;pointer-events:none;border-radius:2px;
}
.carte-lien{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:8;overflow:visible;
}
.lien-fleche{
  fill:#fff;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.55));
  animation:flecheRespire 2.9s ease-in-out infinite;
  transform-box:fill-box;transform-origin:0% 50%;
}
@keyframes flecheRespire{
  0%,100%{opacity:1}
  50%{opacity:.82}
}
/* l'éclat qui remonte la hampe vers la commune */
.lien-flux{
  fill:none;stroke:var(--acc-clair,#FF8A3D);stroke-width:3.2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(var(--acc-rgb,255,138,61),.95));
  animation:fluxFleche 1.3s linear infinite;
}
@keyframes fluxFleche{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:var(--flux-l,-200px)}
}
@media (prefers-reduced-motion:reduce){
  .lien-fleche{animation:none}
  .lien-flux{animation:none;opacity:.7;stroke-dasharray:none!important}
}

/* ============================================================
   PREUVE SOCIALE DANS LE HERO
   Le taux de recommandation est l'argument le plus fort du site :
   il passe d'une ligne de bas de bloc à un chiffre de 52 px.
   ============================================================ */
.preuve-hero{
  display:flex;align-items:center;gap:18px;
  background:var(--rust-soft);border:1px solid rgba(var(--acc-rgb,183,65,14),.22);
  border-radius:14px;padding:16px 20px;max-width:min(100%,560px);
}
.preuve-hero .ph-n{
  font-size:clamp(38px,6vw,52px);font-weight:800;line-height:.92;
  letter-spacing:-.035em;color:var(--rust);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.preuve-hero .ph-t{display:block;min-width:0}
.preuve-hero .stars{display:block;font-size:16px;letter-spacing:2px;margin-bottom:3px}
.preuve-hero b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.32}
.preuve-hero em{
  display:block;font-style:normal;font-size:13px;color:var(--ink-soft);margin-top:3px;
}
@media(max-width:520px){
  .preuve-hero{gap:14px;padding:14px 16px}
  .preuve-hero b{font-size:14.5px}
}

/* ============================================================
   FLÈCHE À DEUX RAILS
   Les deux bords du liseré de l'encart se prolongent, s'écartent,
   puis se referment en pointe sur la commune. Un éclat les remonte.
   ============================================================ */
.carte-breche{width:30px}
.rail{
  fill:none;stroke:#FFFFFF;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.6));
  animation:railRespire 3s ease-in-out infinite;
}
@keyframes railRespire{
  0%,100%{stroke-opacity:1}
  50%{stroke-opacity:.75}
}
.flux{
  fill:none;stroke:var(--acc-clair,#FF8A3D);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(var(--acc-rgb,255,138,61),1));
  animation:fluxRail 1.4s linear infinite;
}
.flux-b{animation-delay:.18s}
@keyframes fluxRail{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:var(--flux-l,-200px)}
}
@media (prefers-reduced-motion:reduce){
  .rail{animation:none}
  .flux{animation:none;opacity:.75;stroke-dasharray:none!important}
}

/* ============================================================
   FLÈCHE PLEINE — la matière de l'encart qui se prolonge
   Intérieur blanc, même liseré, même ombre : un seul objet.
   ============================================================ */
.lien-corps{
  fill:#fff;stroke:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.rail{
  fill:none;stroke:rgba(26,26,26,.16);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:none;animation:none;
}
.flux{
  fill:none;stroke:var(--acc-clair,#FF8A3D);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(var(--acc-rgb,255,138,61),.9));
  animation:fluxRail 1.4s linear infinite;opacity:.95;
}
.flux-b{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .flux{animation:none;opacity:0}
}

/* ============================================================
   « OUVERT ACTUELLEMENT » — une respiration, pas un clignotant
   ============================================================ */
.live-pill .dot{
  position:relative;
  animation:pastilleRespire 2.6s ease-in-out infinite;
}
.live-pill .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  animation:onde 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes pastilleRespire{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.78)}
}
.live-pill{
  animation:pastilleLueur 2.6s ease-in-out infinite;
}
@keyframes pastilleLueur{
  0%,100%{box-shadow:0 0 0 0 rgba(18,162,87,0)}
  50%{box-shadow:0 0 14px 2px rgba(18,162,87,.45)}
}
@media (prefers-reduced-motion:reduce){
  .live-pill,.live-pill .dot,.live-pill .dot::after{animation:none}
}

/* ------------------------------------------------------------
   Correctif de spécificité : une ancienne règle « .carte-lien path »
   l'emportait sur les classes. On requalifie proprement.
   ------------------------------------------------------------ */
.carte-lien .lien-corps{
  fill:#fff;stroke:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.carte-lien .rail{
  fill:none;stroke:rgba(26,26,26,.18);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:none;animation:none;
}
.carte-lien .flux{
  fill:none;stroke:var(--acc-clair,#FF8A3D);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(var(--acc-rgb,255,138,61),.9));
  animation:fluxRail 1.4s linear infinite;opacity:.95;
}
.carte-lien .flux-b{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .carte-lien .flux{animation:none;opacity:0}
}

/* ============================================================
   CORRECTIFS MOBILE
   Trois défauts relevés en test sur un écran de 390 px.
   ============================================================ */

/* 1. La légende se disloquait : le span en flex faisait de chaque
      morceau de texte un élément séparé. La pastille redevient un
      simple point en ligne. */
.carte-legende span{display:block}
.carte-legende b{display:inline-block;vertical-align:middle;margin-right:8px}

/* 2. Sur petit écran, l'encart couvrait 65 % de la carte : il sort de
      la carte et se pose dessous. La flèche n'a plus lieu d'être. */
@media(max-width:700px){
  .carte-bulle{
    position:static;width:auto;left:auto;bottom:auto;
    margin-top:14px;animation:none;transform:none;
    box-shadow:0 6px 20px rgba(26,26,26,.12);
    border-color:var(--line);
  }
  .carte-breche,.carte-lien{display:none!important}
  .carte-zone{overflow:hidden}
}

/* 3. Le bandeau du bas débordait : le numéro et le bouton de rappel
      ne tenaient pas côte à côte. On resserre sans rien empiler. */
@media(max-width:560px){
  .callbar-in{gap:8px;padding:9px 10px}
  .callbar-tel{
    font-size:22px;padding:11px 12px;gap:8px;border-radius:11px;
  }
  .callbar-tel svg{width:21px;height:21px}
  .callbar-alt{padding:9px 12px;border-radius:11px}
  .callbar-alt .t1{font-size:14.5px}
  .callbar-alt .t2{font-size:11px;letter-spacing:.03em}
  .callbar-alt::after{inset:-5px}
  body{padding-bottom:88px}
}
@media(max-width:400px){
  .callbar-tel{font-size:20px}
  .callbar-alt .t1{font-size:13.5px}
  .callbar-alt .t2{display:none}
}

/* ------------------------------------------------------------
   L'encart est désormais frère de la carte, dans un cadre commun :
   posé dessus sur grand écran, en dessous sur téléphone.
   ------------------------------------------------------------ */
.carte-cadre{position:relative}
.carte-cadre .carte-bulle{position:absolute;left:16px;bottom:16px}
@media(max-width:700px){
  .carte-cadre .carte-bulle{
    position:static;left:auto;bottom:auto;
    width:auto;margin-top:14px;transform:none;animation:none;
    box-shadow:0 6px 20px rgba(26,26,26,.12);border-color:var(--line);
  }
}
/* Le préfixe « ENTREPRISE » est plus long que « ETS » : on resserre
   pour qu'il reste exactement a l aplomb du nom. */
.logo .name small{font-size:11px;letter-spacing:.2em}
@media(max-width:520px){ .logo .name small{font-size:11px;letter-spacing:.14em} }

/* ============================================================
   CARROUSELS HORIZONTAUX — témoignages et types de pannes
   Un seul mécanisme pour les deux : une piste qui défile, des
   flèches injectées par app.js, et un accrochage doux pour que
   les cartes s'alignent proprement au doigt comme à la souris.
   ============================================================ */

.rail{position:relative}

.avis-rail{
  display:flex;gap:18px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-left:2px;
  padding:4px 2px 18px;
  margin:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--sage) transparent;
}
.avis-rail::-webkit-scrollbar{height:6px}
.avis-rail::-webkit-scrollbar-thumb{
  background:var(--sage);border-radius:99px}
.avis-rail::-webkit-scrollbar-track{background:transparent}

.avis-rail>*{scroll-snap-align:start;flex:0 0 auto}

/* --- cartes de témoignage --- */
.avis{
  width:min(360px,82vw);
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px 24px 20px;margin:0;
  box-shadow:0 2px 10px rgba(26,26,26,.05);
}
.avis-note{display:flex;gap:2px;font-size:17px;line-height:1}
.avis-note .e{color:#DED8CE}
.avis-note .e.on{color:#E8A33D}
.avis blockquote{
  margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);
  flex:1 1 auto;
}
.avis blockquote::before{content:"\201C";color:var(--sage);font-size:26px;line-height:0;vertical-align:-8px;margin-right:2px}
.avis figcaption{
  font-size:13.5px;font-weight:700;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--line);
}

/* --- cartes de panne : elles restent toutes visibles, en grille.
       Un client en urgence ne doit rien avoir a faire defiler. Seule
       l incitation a ete rendue plus visible. --- */
.urgences .urg .go{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;padding:9px 16px;border-radius:8px;
  background:var(--rust);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 2px 8px rgba(183,65,14,.28);
  transition:background .15s ease,transform .15s ease;
}
.urgences .urg:hover .go{background:var(--rust-dark);transform:translateY(-1px)}
.urgences .urg .go svg{flex:0 0 auto}

/* --- flèches, injectées par app.js --- */
.rail-nav{
  position:absolute;top:38%;z-index:3;
  width:40px;height:40px;border-radius:50%;
  display:none;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 3px 14px rgba(26,26,26,.16);
  cursor:pointer;transition:background .15s ease,color .15s ease,opacity .2s ease;
}
.rail-nav:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.rail-nav[disabled]{opacity:0;pointer-events:none}
.rail-nav.prev{left:-14px}
.rail-nav.next{right:-14px}
@media(min-width:900px){ .rail-nav{display:grid} }

@media(prefers-reduced-motion:reduce){
  .avis-rail{scroll-behavior:auto}
  .urgences .urg:hover .go{transform:none}
}

/* L'incitation reprend la couleur du métier : rouille en plomberie,
   sauge en électricité, pour rester cohérent avec l'icône de la carte. */
.urgences .urg.elec .go{background:var(--sage-dark);box-shadow:0 2px 8px rgba(90,110,72,.28)}
.urgences .urg.elec:hover .go{background:var(--sage)}

/* ============================================================
   FENÊTRE DE RAPPEL
   Le bouton « Être rappelé » ouvre une fenêtre par-dessus la page
   au lieu d'envoyer le visiteur tout en bas. Il ne perd pas sa
   lecture, et n'a pas à remonter.
   ============================================================ */
html.modale-ouverte{overflow:hidden}

.modale{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.modale[hidden]{display:none}
.modale-fond{position:absolute;inset:0;background:rgba(26,26,26,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modale-boite{
  position:relative;z-index:1;
  width:min(520px,100%);
  background:#fff;border-radius:14px;
  padding:34px 32px 28px;
  box-shadow:0 24px 70px rgba(26,26,26,.34);
  animation:modale-entree .18s ease-out both;
}
@keyframes modale-entree{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modale-x{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:transparent;border:0;color:var(--ink-soft);cursor:pointer;
}
.modale-x:hover{background:var(--cream);color:var(--ink)}
.modale-boite h2{font-size:clamp(22px,3.4vw,27px);margin:0 0 8px;padding-right:30px}
.modale-sub{margin:0 0 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.modale-boite .quickform{display:grid;gap:12px}
.modale-boite .quickform .field{width:100%}
.modale-boite .quickform input{width:100%}
.modale-boite .quickform .btn{width:100%;justify-content:center}
.modale-legal{margin:14px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.modale-ou{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-soft);text-align:center;
}
.modale-ou a{color:var(--rust);font-weight:700}
.modale-boite .form-status{margin:10px 0 0;font-size:14.5px;min-height:1.2em}

@media(max-width:520px){
  .modale{padding:12px;align-items:flex-start;padding-top:8vh}
  .modale-boite{padding:28px 22px 22px}
}
@media(prefers-reduced-motion:reduce){ .modale-boite{animation:none} }

/* ============================================================
   PHOTO D'ÉQUIPE — titre et légende
   Le visiteur doit comprendre en une seconde que ce sont de
   vraies personnes. La légende ajoute la touche humaine.
   ============================================================ */
.hero-photo{margin:0;padding-right:0}

/* Le cadre est le repere de positionnement du badge et du titre : sans lui,
   ils se calaient sur le bas de la legende et debordaient de la photo. */
.photo-cadre{position:relative;line-height:0;padding-right:18px}

.photo-titre{
  position:absolute;left:0;right:18px;bottom:0;z-index:2;
  display:block;
  padding:38px 20px 16px;
  background:linear-gradient(to top,rgba(26,26,26,.82) 0%,rgba(26,26,26,.62) 45%,rgba(26,26,26,0) 100%);
  color:#fff;font-weight:800;
  font-size:clamp(21px,3.2vw,30px);letter-spacing:.2px;
  line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.photo-legende{
  margin:16px 20px 0 0;
  padding:15px 18px;
  background:var(--rust-soft);
  border-left:4px solid var(--rust);
  border-radius:0 10px 10px 0;
  font-size:17px;line-height:1.6;
  color:#7A3110;font-weight:500;
}
.photo-legende b{color:var(--rust-dark);font-weight:800}

@media(max-width:520px){
  .photo-titre{padding:30px 15px 13px}
  .photo-legende{font-size:16px;padding:13px 15px}
}

/* ============================================================
   BOUTON « ÊTRE RAPPELÉ IMMÉDIATEMENT »
   La promesse tient sur deux lignes : l'action, puis la preuve
   chiffrée juste dessous. Le point vert qui respire signale que
   la mesure est vivante, pas un argument commercial figé.
   ============================================================ */
.btn-rappel{
  flex-direction:column;align-items:flex-start;gap:4px;
  padding-top:14px;padding-bottom:14px;text-align:left;line-height:1.18;
  background:linear-gradient(180deg,var(--acc-clair),var(--rust-vif));
  color:#fff;border-color:var(--rust-vif);
  box-shadow:0 5px 20px rgba(var(--acc-rgb),.42);
  position:relative;overflow:hidden;
}
.btn-rappel:hover{background:linear-gradient(180deg,var(--rust-vif),var(--rust));border-color:var(--rust);color:#fff}
/* Pas de reflet qui balaye : c est le vocabulaire de l autre site.
   Ici, deux equerres de visee se resserrent lentement sur le bouton, comme
   un reticule qui se cale. Le registre est technique, pas commercial. */
.btn-rappel::before,
.btn-rappel::after{
  content:"";position:absolute;pointer-events:none;
  width:15px;height:15px;
  border:2px solid rgba(255,255,255,.72);
  animation:equerre-rappel 3.4s ease-in-out infinite;
}
.btn-rappel::before{
  top:7px;left:7px;
  border-right:0;border-bottom:0;border-radius:3px 0 0 0;
}
.btn-rappel::after{
  bottom:7px;right:7px;
  border-left:0;border-top:0;border-radius:0 0 3px 0;
  animation-delay:.18s;
}
@keyframes equerre-rappel{
  0%,100%{opacity:0;transform:translate(0,0)}
  30%{opacity:.9;transform:translate(0,0)}
  62%{opacity:.35;transform:translate(2px,2px)}
}
.btn-rappel::after{animation-name:equerre-rappel-bd}
@keyframes equerre-rappel-bd{
  0%,100%{opacity:0;transform:translate(0,0)}
  30%{opacity:.9;transform:translate(0,0)}
  62%{opacity:.35;transform:translate(-2px,-2px)}
}
.btn-rappel .r1{font-size:18.5px;font-weight:800;letter-spacing:.1px}
.btn-rappel .r2{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.88);
  font-variant-numeric:tabular-nums;
}
.btn-rappel .r2 b{color:#fff;font-weight:800}
.btn-rappel .r2 i,.modale-stat i{
  width:8px;height:8px;border-radius:50%;
  background:#FFE8C7;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,232,199,.75);
  animation:pouls-rappel 2.6s ease-out infinite;
}
@keyframes pouls-rappel{
  0%{box-shadow:0 0 0 0 rgba(255,232,199,.7)}
  70%{box-shadow:0 0 0 7px rgba(255,232,199,0)}
  100%{box-shadow:0 0 0 0 rgba(255,232,199,0)}
}

.modale-stat{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 18px;padding:7px 13px;border-radius:8px;
  background:var(--cream);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.modale-stat b{color:var(--ink);font-weight:800}

.callbar-alt .t2 b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .btn-rappel .r2 i,.modale-stat i,.btn-rappel::before,.btn-rappel::after{animation:none;opacity:.5}
}
@media(max-width:520px){
  .btn-rappel .r1{font-size:17px}
  .btn-rappel .r2{font-size:12.5px}
}

/* ============================================================
   PAGE DE CONFIRMATION — consigne de sécurité et retour auto
   La consigne passe en rouge et en corps plus gros : c'est la
   seule chose à lire sur cette page, et elle peut éviter un
   accident. Le retour automatique est visible et annulable.
   ============================================================ */
.alerte-urgence{
  display:flex;gap:14px;align-items:flex-start;
  margin:0 0 22px;padding:18px 20px;
  background:#FDF1EE;border:1px solid #E9B7A6;border-left:5px solid var(--rust);
  border-radius:10px;
  font-size:17.5px;line-height:1.6;color:#7A2A0C;
}
.alerte-urgence b{color:#5F1F07;font-weight:800}
.alerte-ico{flex:0 0 auto;color:var(--rust);margin-top:1px}

.retour-auto{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-soft);
}
.retour-auto b{color:var(--ink);font-variant-numeric:tabular-nums}
.retour-auto button{
  background:none;border:0;padding:0;
  font:inherit;color:var(--sage-dark);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.retour-auto button:hover{color:var(--rust)}
.retour-auto.retour-annule{color:var(--ink-soft);font-style:italic}

@media(max-width:520px){ .alerte-urgence{font-size:16.5px;padding:16px 16px} }

/* Dans la fenêtre, le fond est clair : le point reprend la couleur d'action
   pour rester visible, là où sur le bouton plein il est crème. */
.modale-stat i{background:var(--rust);box-shadow:0 0 0 0 rgba(183,65,14,.55)}
@keyframes pouls-modale{
  0%{box-shadow:0 0 0 0 rgba(183,65,14,.5)}
  70%{box-shadow:0 0 0 7px rgba(183,65,14,0)}
  100%{box-shadow:0 0 0 0 rgba(183,65,14,0)}
}
.modale-stat i{animation-name:pouls-modale}

/* Confirmation affichée dans la fenêtre : l'encadré rouge y est légèrement
   plus compact, la fenêtre étant déjà étroite. */
.modale-boite .alerte-urgence{font-size:16px;padding:15px 16px;margin-bottom:18px}
.modale-boite .retour-auto{margin-top:0;padding-top:0;border-top:0}

/* ============================================================================
   IDENTITÉ ÉTABLISSEMENT GABRIEL
   Couche d habillage propre a ce site. La ou d autres cultivent la douceur
   artisanale, Gabriel assume le registre de l'intervention : bleu nuit,
   ambre de signalisation, titres condensés, contrastes francs.
   ============================================================================ */

h1,h2,h3,.h-cond{
  font-family:var(--titre);
  font-weight:800;letter-spacing:-.005em;line-height:1.06;
  text-transform:none;
}
h2{font-size:clamp(29px,4.4vw,45px)}
h3{font-size:clamp(19px,2.4vw,23px);line-height:1.15}
.eyebrow{
  font-family:var(--sans);font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;font-size:11.5px;
  color:var(--sage-dark);
}

/* ---------- HERO PLEINE IMAGE ---------- */
.hero-plein{
  position:relative;isolation:isolate;
  min-height:min(760px,92vh);
  display:flex;align-items:center;
  padding:120px 0 74px;
  background:var(--nuit);
  overflow:hidden;
}
.hp-fond{position:absolute;inset:0;z-index:0}
.hp-fond img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(1.04) contrast(1.03) brightness(1.06);
}
/* Deux voiles superposés : un dégradé vertical qui ancre le texte en bas à
   gauche, et un voile bleu nuit qui unifie n'importe quelle photo. Sans eux,
   le titre devient illisible dès que la photo change. */
.hp-voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(102deg, rgba(14,42,34,.88) 0%, rgba(14,42,34,.74) 40%, rgba(14,42,34,.26) 74%, rgba(14,42,34,.12) 100%),
    linear-gradient(to top, rgba(14,42,34,.80) 0%, rgba(14,42,34,0) 52%);
}
.hp-contenu{position:relative;z-index:2;color:#fff;max-width:var(--wrap);width:100%}

.hp-statut{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:99px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:13px;font-weight:600;color:rgba(255,255,255,.92);
  letter-spacing:.02em;
}
.hp-statut b{color:#fff;font-weight:800}
.hp-statut i{
  width:9px;height:9px;border-radius:50%;background:#3ED47A;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(62,212,122,.7);
  animation:hp-pouls 2.4s ease-out infinite;
}
@keyframes hp-pouls{
  0%{box-shadow:0 0 0 0 rgba(62,212,122,.65)}
  70%{box-shadow:0 0 0 9px rgba(62,212,122,0)}
  100%{box-shadow:0 0 0 0 rgba(62,212,122,0)}
}

.hero-plein h1{
  margin:20px 0 0;color:#fff;
  font-size:clamp(38px,6.6vw,76px);
  text-wrap:balance;
}
.hp-l1{display:block;color:#fff}
.hp-l2{display:block;color:var(--acc-clair)}

.hp-pitch{
  margin:20px 0 0;max-width:62ch;
  font-size:clamp(16.5px,1.9vw,19.5px);line-height:1.62;
  color:rgba(255,255,255,.88);font-weight:400;
}
.hp-pitch b{color:#fff;font-weight:700}

.hp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.hp-preuves{
  display:grid;gap:14px;margin-top:38px;
  grid-template-columns:1fr;
  max-width:900px;
}
@media(min-width:760px){ .hp-preuves{grid-template-columns:repeat(3,1fr)} }
.hp-p{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hp-p b{
  font-family:var(--titre);font-size:clamp(27px,3.4vw,36px);
  font-weight:800;line-height:1;color:var(--acc-clair);font-variant-numeric:tabular-nums;
}
.hp-p span{font-size:14.5px;font-weight:700;color:#fff;line-height:1.35}
.hp-p em{
  display:block;margin-top:3px;
  font-style:normal;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.66);
}

.hp-legende{
  margin:34px 0 0;padding-left:14px;
  border-left:3px solid var(--acc-clair);
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);
  max-width:60ch;
}

@media(max-width:620px){
  .hero-plein{padding:96px 0 56px;min-height:0}
  .hp-fond img{object-position:center 26%}
  .hp-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){ .hp-statut i{animation:none} }

/* Serrurerie : troisième métier, troisième couleur d'icône. Bleu pour
   l'électricité serait ambigu avec l'identité générale, donc la serrurerie
   prend l'ardoise et l'électricité garde le bleu vif. */
.urg.serr .ico{color:var(--sage-deep)}
.urgences .urg.serr .go{background:var(--sage-deep);box-shadow:0 2px 8px rgba(18,58,97,.30)}
.urgences .urg.serr:hover .go{background:var(--sage-dark)}
.urg.serr:hover{border-color:var(--sage)}

/* ============================================================================
   GAGES DE SÉRIEUX — les qualifications de la maison
   Marques redessinées, pas de logos officiels recopiés : les chartes d'usage
   Qualibat et Qualifelec imposent des conditions, et un logo mal reproduit
   dessert plus qu'il ne sert. Le fond vert profond isole le bloc du reste de
   la page : c'est le moment où l'on parle preuve, pas argumentaire.
   ============================================================================ */
.gages{
  background:var(--nuit);
  color:#fff;
  padding:58px 0 52px;
  position:relative;
}
.gages::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--acc-clair),var(--rust-vif) 45%,var(--sage) 100%);
}
.gages-tete{max-width:70ch}
.gages .eyebrow{color:var(--acc-clair)}
.gages h2{color:#fff;margin:10px 0 0}
.gages .chapo{
  margin:14px 0 0;font-size:16.5px;line-height:1.62;
  color:rgba(255,255,255,.80);
}
.gages .chapo b{color:#fff;font-weight:700}

.gages-liste{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;gap:16px;
  grid-template-columns:1fr;
}
@media(min-width:680px){ .gages-liste{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .gages-liste{grid-template-columns:repeat(4,1fr)} }

.gage{
  display:flex;flex-direction:column;gap:14px;
  padding:22px 20px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.gage-marque{
  width:52px;height:52px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.gage-marque svg{
  width:30px;height:30px;
  fill:none;stroke:var(--acc-clair);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.gage-marque svg .tr{stroke:#fff;stroke-width:2.4}
.gage-txt b{
  display:block;font-size:16px;font-weight:700;color:#fff;line-height:1.3;
}
.gage-txt em{
  display:block;margin-top:6px;
  font-style:normal;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.68);
}

.gages-note{
  margin:28px 0 0;padding-left:14px;
  border-left:3px solid var(--acc-clair);
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.74);
  max-width:74ch;
}
.gages-note b{color:#fff;font-weight:700}

/* ============================================================================
   BANDEAU DE SECTEUR
   Remplace la jauge de techniciens. La lecture se fait de gauche à droite
   comme une ligne de dispatch : état de la tournée, secteur, flèche, créneau.
   La flèche fait le lien visuel entre « où » et « quand » — c'est elle qui
   raconte le déplacement.
   ============================================================================ */
.secteur{
  background:linear-gradient(180deg,var(--nuit2),var(--nuit));
  color:#fff;position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.secteur::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc-clair) 35%,var(--acc-clair) 65%,transparent);
  opacity:.55;
}
.secteur .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:11px 24px;
  font-size:13.5px;
}

.sec-etat{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;
}
.sec-etat b{font-weight:700}
.sec-etat i{
  width:8px;height:8px;border-radius:50%;background:#4ADE80;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:sec-pouls 2.6s ease-out infinite;
}
@keyframes sec-pouls{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

.sec-nb{color:rgba(255,255,255,.78);white-space:nowrap}
.sec-nb b{color:#fff;font-weight:800}
/* Le chiffre est traité comme un compteur d'atelier : pastille pleine,
   chiffres à chasse fixe. C'est lui qu'on lit en premier. */
.sec-nb b:first-child{
  display:inline-block;min-width:1.5em;text-align:center;
  padding:1px 8px;margin-right:3px;border-radius:6px;
  background:var(--acc-clair);color:var(--nuit);
  font-family:var(--titre);font-size:18px;font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* La flèche glisse doucement de gauche à droite : elle figure le véhicule
   qui se rapproche, sans jamais mentir sur une position réelle. */
.sec-fleche{
  display:inline-flex;color:var(--acc-clair);flex:0 0 auto;
  animation:sec-glisse 2.8s ease-in-out infinite;
}
.sec-fleche svg{width:17px;height:17px}
@keyframes sec-glisse{
  0%,100%{transform:translateX(0);opacity:.55}
  50%{transform:translateX(5px);opacity:1}
}

.sec-creneau{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.sec-creneau em{
  font-style:normal;color:rgba(255,255,255,.72);
}
.sec-creneau b{
  font-family:var(--titre);
  font-size:19px;font-weight:800;letter-spacing:.01em;
  color:var(--acc-clair);font-variant-numeric:tabular-nums;
}

.sec-note{
  color:rgba(255,255,255,.50);font-size:12.5px;
  flex:1 1 auto;min-width:200px;
}

@media(max-width:760px){
  .secteur .wrap{gap:8px 12px;padding:10px 18px}
  .sec-fleche{display:none}
  .sec-note{flex-basis:100%;min-width:0}
  .sec-creneau b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .sec-etat i,.sec-fleche{animation:none}
}

/* ============================================================================
   CARTE DE SECTEUR
   La commune est la carte. Pas de plan régional, pas de zoom, pas de bulle
   à flèche : on cadre directement sur le territoire de la ville, son nom est
   écrit à l'intérieur, et les communes limitrophes l'entourent en retrait.
   Le visiteur n'a pas à chercher sa ville — elle lui est présentée.
   ============================================================================ */
.secteur-carte{background:var(--cream);padding:64px 0}

.sc-grille{display:grid;gap:34px;align-items:center}
@media(min-width:900px){ .sc-grille{grid-template-columns:1.05fr .95fr;gap:48px} }

.sc-plan{
  position:relative;
  border-radius:16px;overflow:hidden;
  background:var(--nuit);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px -34px rgba(14,42,34,.75);
}
.sc-plan svg{display:block;width:100%;height:auto}

.sect-voisins path{
  fill:rgba(255,255,255,.05);
  stroke:rgba(255,255,255,.22);
  stroke-width:.45;
  stroke-linejoin:round;
}

/* La commune du visiteur : remplie de la couleur d'action, cernée de blanc.
   Elle est la seule forme colorée du plan — impossible de la manquer. */
.sect-cible{
  fill:var(--rust-vif);fill-opacity:.62;
  stroke:#fff;stroke-width:1.1;stroke-linejoin:round;
}
/* Le halo pulse depuis le contour réel de la commune, pas depuis un point :
   c'est le territoire entier qui respire. */
.sect-halo{
  fill:none;
  stroke:var(--acc-clair);stroke-width:1.4;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;
  animation:sect-respire 2.8s ease-in-out infinite;
}
@keyframes sect-respire{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:0;transform:scale(1.16)}
}

.sect-nom{
  fill:#fff;text-anchor:middle;
  font-family:var(--titre);font-weight:800;
  letter-spacing:.01em;
  paint-order:stroke;stroke:rgba(14,42,34,.85);stroke-width:2.4;
  stroke-linejoin:round;
}
.sect-noms-voisins text{
  fill:rgba(255,255,255,.52);text-anchor:middle;
  font-family:var(--sans);font-weight:600;
  paint-order:stroke;stroke:rgba(14,42,34,.7);stroke-width:1.2;
}

.sc-echelle{
  position:absolute;left:14px;bottom:12px;
  padding:5px 11px;border-radius:99px;
  background:rgba(14,42,34,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;
  color:rgba(255,255,255,.85);text-transform:uppercase;
}

.sc-texte h2{margin:10px 0 0}
.sc-chapo{margin:14px 0 0;font-size:17px;line-height:1.62;color:var(--ink-soft)}
.sc-chapo b{color:var(--ink);font-weight:700}

.sc-faits{
  list-style:none;margin:24px 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.sc-faits li{
  padding:14px 12px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
  text-align:center;
}
.sc-faits b{
  display:block;font-family:var(--titre);
  font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1;color:var(--rust);
  font-variant-numeric:tabular-nums;
}
.sc-faits span{
  display:block;margin-top:5px;
  font-size:12.5px;line-height:1.35;color:var(--ink-soft);
}

.sc-note{margin:12px 0 0;font-size:14px;color:var(--ink-soft)}

.sc-voisines{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.sc-voisines h3{font-size:20px;margin-bottom:14px}
.sc-voisines ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.sc-voisines li{margin:0}
.sc-voisines a{
  display:inline-block;padding:7px 14px;border-radius:99px;
  background:var(--paper);border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.sc-voisines a:hover{border-color:var(--rust);color:var(--rust)}
.sc-voisines em{font-style:normal;color:var(--ink-soft);font-weight:500}

@media(max-width:520px){
  .sc-faits{grid-template-columns:1fr;gap:8px}
  .sc-faits li{display:flex;align-items:baseline;gap:10px;text-align:left}
  .sc-faits b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){ .sect-halo{animation:none;opacity:.5} }

/* La grille des qualifications passe à huit entrées : trois colonnes sur
   grand écran plutôt que quatre, pour que les libellés longs respirent. */
@media(min-width:1040px){ .gages-liste{grid-template-columns:repeat(4,1fr)} }
.gage-txt b{font-size:15.5px}

/* ============================================================================
   ILS NOUS FONT CONFIANCE
   Preuve sociale par transfert : si une enseigne nationale confie ses locaux
   à cette équipe, un particulier peut lui confier son appartement. Les noms
   sont composés typographiquement, pas repris en logos — reproduire une
   marque déposée sans accord écrit reste une contrefaçon, même en disant vrai.
   ============================================================================ */
.clients{background:var(--paper);padding:56px 0 48px;overflow:hidden}
.clients-tete{max-width:66ch}
.clients h2{margin:10px 0 0}
.clients .chapo{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}

.clients-ruban{
  position:relative;margin:32px 0 0;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--cream);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.clients-piste{
  display:flex;align-items:center;gap:0;
  width:max-content;
  animation:clients-defile 34s linear infinite;
}
.clients-ruban:hover .clients-piste{animation-play-state:paused}
.clients-piste span{
  font-family:var(--titre);
  font-size:clamp(24px,3.2vw,34px);font-weight:800;
  letter-spacing:.02em;color:var(--ink);
  white-space:nowrap;padding:0 30px;
  opacity:.82;
}
/* Séparateur discret : un losange plutôt qu'un point, pour ne pas rappeler
   le bandeau défilant de l'autre site. */
.clients-piste i{
  width:7px;height:7px;flex:0 0 auto;
  background:var(--rust-vif);
  transform:rotate(45deg);opacity:.6;
}
@keyframes clients-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.clients-note{
  margin:18px 0 0;font-size:13px;line-height:1.55;
  color:var(--ink-soft);opacity:.85;max-width:80ch;
}

@media(prefers-reduced-motion:reduce){
  .clients-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* Logo d'enseigne : hauteur imposée, largeur libre, et passage en niveaux de
   gris atténué pour que six identités visuelles différentes cohabitent sans
   se bousculer. La couleur revient au survol. */
.cli-logo{
  height:34px;width:auto;flex:0 0 auto;
  margin:0 30px;object-fit:contain;
  filter:grayscale(1) contrast(.85);opacity:.72;
  transition:filter .2s ease,opacity .2s ease;
}
.clients-ruban:hover .cli-logo{filter:none;opacity:1}
@media(max-width:620px){ .cli-logo{height:26px;margin:0 20px} }

/* ============================================================================
   DERRIÈRE LE NUMÉRO — la photo d'équipe en clair
   Contrairement au hero, aucun voile ici : l'image est la preuve, pas le
   décor. Elle vient après les qualifications et les enseignes, jamais avant :
   les papiers prouvent la compétence, la photo prouve l'existence.
   ============================================================================ */
.equipe{background:var(--cream);padding:64px 0}
.eq-grille{display:grid;gap:34px;align-items:center}
@media(min-width:920px){ .eq-grille{grid-template-columns:1.15fr .85fr;gap:48px} }

.eq-photo{
  position:relative;margin:0;
  border-radius:16px;overflow:hidden;
  box-shadow:0 26px 64px -34px rgba(14,42,34,.7);
}
.eq-photo img{display:block;width:100%;height:auto}
.eq-ia{
  position:absolute;right:10px;bottom:9px;
  padding:3px 9px;border-radius:6px;
  background:rgba(12,34,26,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:rgba(255,255,255,.82);
}

.eq-texte h2{margin:10px 0 0}
.eq-texte>p{margin:14px 0 0;font-size:17px;line-height:1.62;color:var(--ink-soft)}
.eq-texte>p b{color:var(--ink);font-weight:700}

.eq-points{list-style:none;margin:24px 0 26px;padding:0;display:grid;gap:14px}
.eq-points li{
  padding-left:18px;position:relative;
}
/* Barre verticale plutôt qu'une puce ronde : on reste dans le vocabulaire
   graphique du site, fait de traits et d'équerres. */
.eq-points li::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:var(--rust-vif);border-radius:2px;
}
.eq-points b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.35}
.eq-points span{display:block;margin-top:3px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* ============================================================================
   BARRE D'APPEL — vocabulaire propre à Gabriel
   Plus de pastille à onde concentrique ni de liseré qui balaye : ces deux
   animations appartiennent à l'autre site. Ici, une barre de niveau qui monte
   et descend comme un vumètre de standard, et un numéro présenté en deux
   étages plutôt qu'en une seule ligne.
   ============================================================================ */

/* Le liseré supérieur ne défile plus : il respire sur place. */
.callbar::before{
  background:linear-gradient(90deg,var(--sage-deep),var(--rust-vif) 50%,var(--sage-deep));
  background-size:100% 100%;
  animation:callbar-souffle 4.6s ease-in-out infinite;
}
@keyframes callbar-souffle{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

/* Trois barres de niveau à la place du point à ondes. */
.callbar-live i{
  width:auto;height:13px;border-radius:0;background:none;
  display:inline-flex;align-items:flex-end;gap:2px;
}
.callbar-live i::after{content:none;animation:none;border:0}
.callbar-live i::before{
  content:"";
  width:3px;height:100%;border-radius:1px;
  background:var(--rust-vif);
  box-shadow:5px 0 0 0 var(--rust-vif), 10px 0 0 0 var(--rust-vif);
  transform-origin:bottom;
  animation:callbar-niveau 1.5s ease-in-out infinite;
}
@keyframes callbar-niveau{
  0%,100%{transform:scaleY(.35)}
  25%{transform:scaleY(1)}
  50%{transform:scaleY(.55)}
  75%{transform:scaleY(.85)}
}

/* Le numéro sur deux étages : un intitulé discret au-dessus, le numéro en
   dessous. Il ne se lit plus comme la ligne unique de l'autre site. */
.callbar-tel{align-items:center}
.tel-bloc{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.tel-bloc em{
  font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  opacity:.72;margin-bottom:1px;
}
.tel-bloc .num{
  font-family:var(--titre);font-size:26px;font-weight:800;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}

/* Le bouton de rappel garde les équerres de visée du reste du site. */
.callbar-alt{
  position:relative;overflow:hidden;
  border-color:var(--sage);color:var(--sage-deep);
}
.callbar-alt .t1{font-weight:800}
.callbar-alt .t2{
  text-transform:none;letter-spacing:0;
  font-size:11.5px;font-style:italic;opacity:.85;
}

@media(max-width:620px){
  .tel-bloc .num{font-size:22px}
  .tel-bloc em{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .callbar::before,.callbar-live i::before{animation:none}
}

/* ============================================================================
   NUMÉRO ET BOUTON DE RAPPEL — vocabulaire d'animation propre à Gabriel
   Aucun balayage lumineux, aucune onde concentrique : ces deux mécaniques
   appartiennent à l'autre site. Ici, le numéro respire par ses chiffres
   (léger scintillement de la couleur, sans clignoter), et le bouton de
   rappel s'annonce par un trait qui se trace sous le libellé.
   ============================================================================ */

/* Le liseré du haut de la barre ne balaye plus du tout : il est fixe. */
.callbar::before{animation:none;opacity:.9}

/* Le numéro : les chiffres s'éclaircissent par vagues très douces, comme un
   afficheur de standard. Aucun clignotement, aucune surbrillance qui passe. */
.tel-bloc .num,
.callbar-tel .num{
  animation:num-respire 3.6s ease-in-out infinite;
}
@keyframes num-respire{
  0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}
  45%{text-shadow:0 0 14px rgba(255,255,255,.55)}
}

/* Le label « Appel gratuit » : sobre, en capitales espacées, avec un point
   qui ne pulse pas — il change juste d'opacité, très lentement. */
.tel-bloc em{
  display:inline-flex;align-items:center;gap:5px;
}
.tel-bloc em::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;
  animation:point-doux 3.6s ease-in-out infinite;
}
@keyframes point-doux{
  0%,100%{opacity:.35}
  45%{opacity:1}
}

/* Bouton de rappel : le point rond disparaît. À la place, un trait se trace
   sous le second libellé, de gauche à droite, puis s'efface. */
.btn-rappel .r2 i,
.modale-stat i{display:none}

.btn-rappel .r2,
.callbar-alt .t2{position:relative}
.btn-rappel .r2::after,
.callbar-alt .t2::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;
  background:currentColor;opacity:.75;border-radius:2px;
  animation:trait-rappel 4.2s ease-in-out infinite;
}
@keyframes trait-rappel{
  0%{width:0;opacity:0}
  18%{width:0;opacity:.8}
  55%{width:100%;opacity:.8}
  85%{width:100%;opacity:0}
  100%{width:0;opacity:0}
}

/* Le second libellé de la barre du bas passe en corps plus lisible. */
.callbar-alt .t2{
  font-size:13px;font-style:normal;font-weight:600;opacity:1;
}
.callbar-alt .t1{font-size:15px}

@media(prefers-reduced-motion:reduce){
  .tel-bloc .num,.callbar-tel .num,.tel-bloc em::before,
  .btn-rappel .r2::after,.callbar-alt .t2::after{animation:none}
  .btn-rappel .r2::after,.callbar-alt .t2::after{width:100%;opacity:.5}
}

/* Garantie commerciale : bloc secondaire, plus bas que la décennale.
   Traité en bandeau horizontal plutôt qu'en section pleine, pour qu'il se
   lise comme un complément et non comme une seconde promesse concurrente. */
.gcourte{background:var(--paper);padding:44px 0}
.gc-bloc{
  display:grid;gap:22px;align-items:center;
  padding:26px 28px;border-radius:14px;
  background:var(--sage-soft);border:1px solid #CFE0D6;
  border-left:5px solid var(--sage);
}
@media(min-width:760px){ .gc-bloc{grid-template-columns:auto 1fr;gap:32px} }
.gc-duree{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font-family:var(--titre);color:var(--sage-deep);
  font-size:clamp(30px,4vw,42px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}
.gc-duree b{font-weight:800}
.gc-duree em{
  font-style:normal;font-size:15px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;opacity:.75;
}
.gc-txt h3{font-size:21px;margin:0 0 8px}
.gc-txt p{margin:0 0 8px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.gc-txt p:last-child{margin-bottom:0}
.gc-txt b{color:var(--ink);font-weight:700}
.gc-note{font-size:14.5px;opacity:.9}

/* Logo officiel d'organisme : il remplace le pictogramme dessiné quand le
   fichier est présent. Fond blanc imposé, car ces logos sont conçus pour
   être posés sur du blanc et deviennent illisibles sur le vert profond. */
.gage-officiel{
  width:100%;height:100%;
  object-fit:contain;padding:6px;
  background:#fff;border-radius:8px;
}
.gage-marque:has(.gage-officiel){
  background:#fff;border-color:rgba(255,255,255,.35);padding:0;overflow:hidden;
}
/* Le halo tournant hérité de l'autre site est neutralisé : c'était lui, le
   « radar ». Les deux pseudo-éléments sont désactivés, le bouton ne garde
   que son ombre. L'animation retenue sera choisie sur /animations/. */
.callbar-alt::before,
.callbar-alt::after{content:none !important;animation:none !important}

/* Mention obligatoire quand la marque affichée n'est pas le logo officiel de
   l'organisme : le visiteur doit pouvoir faire la différence entre une
   certification et une illustration. */
.gage-illu{
  display:inline-block;margin-top:4px;
  font-size:11.5px;font-style:italic;
  color:rgba(255,255,255,.42);
}

/* ============================================================================
   ANIMATION RETENUE — n° 13, « pointillés qui s'éloignent »
   Un liseré pointillé se détache du bouton et s'efface en s'écartant. Il
   attire l'œil par le mouvement du contour, jamais par un clignotement du
   texte : le libellé reste lisible en permanence.
   ============================================================================ */
.callbar-alt,
.btn-rappel{
  outline:2px dashed rgba(255,158,77,.9);
  outline-offset:4px;
  animation:pointilles 1.6s linear infinite;
}
@keyframes pointilles{
  to{outline-offset:11px;outline-color:rgba(255,158,77,0)}
}
/* Sur le bouton du hero, posé sur la photo, le liseré passe en blanc :
   l'orange sur orange disparaîtrait. */
.hp-actions .btn-rappel{outline-color:rgba(255,255,255,.9);animation-name:pointilles-clair}
@keyframes pointilles-clair{
  to{outline-offset:11px;outline-color:rgba(255,255,255,0)}
}
@media(prefers-reduced-motion:reduce){
  .callbar-alt,.btn-rappel{animation:none;outline-offset:4px}
}

/* ============================================================================
   LE RAPPEL, VERSION GABRIEL
   Ailleurs on pose une question ("Pas le temps d attendre ?") puis on tend un champ.
   Ici on fait l'inverse : on montre d'abord ce qui se passe apres l'envoi,
   en trois temps numerotes, parce que la personne qui hesite ne se demande
   pas si elle a le temps, elle se demande a quoi elle s'engage.
   Le formulaire reste clair : une seule zone sombre sur toute la fenetre,
   le bandeau de titre. L'aide aux numeros etrangers passe en orange, la
   couleur d'action de Gabriel, avec un simple filet vertical au lieu d'un
   cadre ferme : elle se remarque sans alourdir.
   ========================================================================= */

/* ---- aide "numeros etrangers", commune a la fenetre et a la page ---- */
.gab-inter{
  margin:16px 0 0;padding:13px 16px 12px 17px;
  background:var(--rust-soft);
  border-left:4px solid var(--rust);
  border-radius:0 10px 10px 0;
  color:var(--ink);line-height:1.5;
}
.gi-oeil{
  display:flex;align-items:center;gap:6px;margin:0 0 5px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust-dark);
}
.gi-oeil svg{flex:0 0 auto}
.gi-en{margin:0;font-size:15.5px;font-weight:700;color:var(--ink)}
.gi-codes{list-style:none;margin:9px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.gi-codes li{
  display:inline-flex;align-items:baseline;gap:4px;
  padding:3px 9px;border-radius:6px;
  background:#fff;border:1px solid rgba(229,103,11,.32);
  font-size:12px;color:var(--ink-soft);white-space:nowrap;
}
.gi-codes li b{
  font-size:13px;font-weight:800;color:var(--rust-dark);
  font-variant-numeric:tabular-nums;
}
.gi-fr{
  margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(229,103,11,.2);
  font-size:13px;color:var(--ink-soft);
}
.gi-fr b{color:var(--ink);font-weight:700}

/* ---- fenetre surgissante : le bandeau de titre, seule zone sombre ---- */
.gm-tete{
  margin:-34px -32px 22px;padding:26px 32px 22px;
  background:linear-gradient(150deg,var(--nuit2),var(--nuit));
  border-radius:14px 14px 0 0;color:#fff;
}
.gm-oeil{
  margin:0 0 9px;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc-clair);
}
.modale-boite .gm-tete h2{
  margin:0;color:#fff;padding-right:34px;
  font-size:clamp(23px,3.4vw,29px);line-height:1.08;
}
.gm-delai{margin:12px 0 0;font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.5}
.gm-delai b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.modale-boite .modale-x{color:rgba(255,255,255,.7)}
.modale-boite .modale-x:hover{background:rgba(255,255,255,.15);color:#fff}
.modale-boite .quickform input{background:var(--cream);border-color:var(--line)}
.modale-boite .quickform input:focus{background:#fff;border-color:var(--rust)}
.modale-boite .form-status{color:var(--rust)}
.gm-legal{margin:14px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.gm-ou{
  margin:15px 0 0;padding-top:14px;border-top:1px solid var(--line);
  text-align:center;font-size:14.5px;color:var(--ink-soft);
}
.gm-ou a{color:var(--rust);font-weight:800;font-size:19px;text-decoration:none;white-space:nowrap}
.gm-ou a:hover{text-decoration:underline}
@media(max-width:520px){
  .gm-tete{margin:-28px -22px 20px;padding:22px 22px 18px}
}

/* ---- section de page : deux colonnes claires, separees par un filet ---- */
.gab-rappel{
  display:grid;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 44px -34px rgba(14,42,34,.5);
}
@media(min-width:920px){ .gab-rappel{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)} }
.gr-gauche{background:var(--cream);color:var(--ink);padding:32px 26px}
@media(min-width:920px){ .gr-gauche{padding:44px 38px;border-right:1px solid var(--line)} }
.gr-oeil{
  margin:0 0 10px;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust-dark);
}
.gab-rappel .gr-gauche h2{
  margin:0 0 24px;color:var(--ink);
  font-size:clamp(25px,3.2vw,32px);line-height:1.06;
}
.gr-etapes{list-style:none;margin:0;padding:0;display:grid;gap:17px}
.gr-etapes li{display:flex;gap:13px;align-items:flex-start}
.gr-n{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;margin-top:1px;
  background:var(--rust);color:#fff;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.gr-t{font-size:15.5px;color:var(--ink-soft);line-height:1.5}
.gr-t b{display:block;color:var(--ink);font-weight:700}
.gr-tel{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-soft);
}
.gr-tel a{
  color:var(--rust);text-decoration:none;font-weight:800;font-size:20px;
  white-space:nowrap;margin-left:5px;font-variant-numeric:tabular-nums;
}
.gr-tel a:hover{text-decoration:underline}
.gr-droite{padding:32px 26px}
@media(min-width:920px){ .gr-droite{padding:44px 38px} }
.gr-label{
  display:block;margin:0 0 10px;
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);
}
.gr-droite .quickform input{background:var(--cream);border-color:var(--line)}
.gr-droite .quickform input:focus{background:#fff;border-color:var(--rust)}
.gr-droite .mini-legal{color:var(--ink-soft)}
.gr-droite .mini-legal a{color:var(--rust)}
.gr-droite .form-status{color:var(--rust)}
.gi-en b{color:var(--rust-dark);font-weight:800}

/* --- CE QUE "DEVIS GRATUIT" VEUT DIRE ---
   Une mention en petits caracteres gris se devine ; celle-ci se lit.
   Ce qui est offert a gauche, ce qui est facture a droite, meme taille
   de texte pour les deux : c est la seule facon d etre cru. */
.foot-devis{
  margin:34px 0 0;padding:22px 24px;
  background:#1D1E1A;border:1px solid #33342E;border-radius:12px;
}
.fd-titre{
  margin:0 0 14px;color:#EDEDE6;
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.fd-titre sup{color:var(--rust);font-size:14px}
.fd-grille{display:grid;gap:14px}
@media(min-width:760px){ .fd-grille{grid-template-columns:1fr 1fr;gap:26px} }
.fd-oui,.fd-non{
  margin:0;padding-left:26px;position:relative;
  font-size:14px;line-height:1.6;color:#9B9C94;
}
.fd-oui b,.fd-non b{color:#EDEDE6;font-weight:700}
.fd-oui::before,.fd-non::before{
  position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;line-height:1;
}
.fd-oui::before{content:"\2713";background:rgba(46,139,101,.22);color:#6FCFA1}
.fd-non::before{content:"\20AC";background:rgba(229,103,11,.2);color:var(--acc-clair)}

/* --- QUALIFICATIONS : cases agrandies ---
   Les intitules etaient a 16 px dans une case de 52 px : il fallait
   s approcher de l ecran pour les lire. Un gage de confiance qu on ne
   lit pas ne sert a rien. Trois colonnes au lieu de quatre, logos et
   intitules nettement plus grands. */
@media(min-width:1040px){ .gages-liste{grid-template-columns:repeat(3,1fr)} }
.gage{padding:26px 24px;gap:16px}
.gage-marque{width:72px;height:72px;border-radius:15px}
.gage-marque svg{width:40px;height:40px}
.gage-officiel{padding:8px;border-radius:10px}
.gage-txt b{font-size:19.5px;line-height:1.25;letter-spacing:-.005em}
.gage-txt em{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.74)}
.gage-illu{font-size:12px;margin-top:6px;color:rgba(255,255,255,.5)}
@media(max-width:520px){
  .gage-marque{width:62px;height:62px}
  .gage-txt b{font-size:18px}
}

/* --- MENTION DE BAS DE PAGE ---
   Dire ce qui doit etre dit, sans donner l impression de se dedouaner :
   un titre neutre, deux phrases, la meme couleur que le reste du pied
   de page. Une mise en garde criee inquiete ; une explication posee
   rassure. */
.foot-mention{
  margin:18px 0 0;padding-top:16px;border-top:1px solid #33342E;
  font-size:13px;line-height:1.65;color:#83847C;max-width:none;
}
.foot-mention b{color:#A9AAA2;font-weight:700}

/* --- LES DEUX AUTRES METIERS, SUR PLACE ---
   Premiere rangee du maillage : ce ne sont pas des communes voisines,
   ce sont les deux autres metiers dans la ville ou le visiteur se
   trouve deja. Ils meritent donc une forme differente des pastilles :
   des cartes larges, avec le metier au-dessus et la commune en dessous. */
.zones-ici{margin-bottom:16px;gap:12px}
.zones-ici a{
  display:flex;flex-direction:column;gap:2px;
  padding:13px 20px;border-radius:12px;
  background:var(--nuit);border-color:var(--nuit);color:#fff;
}
.zones-ici a b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.zones-ici a span{font-size:13.5px;color:rgba(255,255,255,.68);font-weight:600}
.zones-ici a:hover{background:var(--nuit2);border-color:var(--rust);color:#fff}
.zones-ici a:hover b{color:var(--acc-clair)}

/* --- HUB DES COMMUNES ---
   Empiler une liste par metier oblige le visiteur qui cherche sa ville
   doit la retrouver deux fois. Ici une seule liste, une ligne par
   commune, les trois metiers en regard. */
.dep-titre{
  margin:38px 0 12px;font-size:21px;font-weight:800;
  padding-bottom:8px;border-bottom:2px solid var(--rust);
}
.dep-titre span{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink-soft);letter-spacing:0}
.communes{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media(min-width:900px){ .communes{grid-template-columns:repeat(2,1fr);column-gap:34px} }
.communes li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.communes li b{flex:1 1 40%;min-width:0;font-size:15px;font-weight:700;color:var(--ink)}
.communes li a{
  font-size:13px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;
}
.communes li a:hover{color:var(--rust);text-decoration:underline}

/* --- QUALIFICATIONS : le logo prend enfin sa place ---
   Un carre de 72 px avec 8 px de marge ne laissait que 56 px au logo,
   et un losange large comme celui de l artisan y tenait sur 37 px de
   haut. La cartouche devient rectangulaire : les logos officiels sont
   presque tous plus larges que hauts. */
.gage-marque{width:100%;max-width:162px;height:96px;border-radius:14px}
.gage-marque svg{width:48px;height:48px}
.gage-officiel{padding:9px 12px;border-radius:11px}
@media(max-width:520px){
  .gage-marque{max-width:146px;height:88px}
  .gage-marque svg{width:44px;height:44px}
}
.gage-marque:has(.gage-officiel){width:100%;max-width:162px;height:96px}
@media(max-width:520px){ .gage-marque:has(.gage-officiel){max-width:146px;height:88px} }

/* --- LISIBILITE SUR PETIT ECRAN ---
   Les intitules minuscules ont ete remontes a 11 px pour etre lisibles.
   Sur un telephone de 375 px, cette largeur supplementaire faisait sortir
   l en-tete et le bandeau de secteur de l ecran. On garde la taille, on
   resserre l interlettrage et on autorise le retour a la ligne. */
@media(max-width:520px){
  .logo .name small{font-size:10px;letter-spacing:.09em}
  .head-tel .btn{padding-left:14px;padding-right:14px;gap:7px}
  .tel-bloc em{font-size:10px;letter-spacing:.09em}
  .tel-bloc .num{font-size:23px}
}
@media(max-width:760px){
  .sec-creneau{white-space:normal}
  .secteur .wrap{flex-wrap:wrap}
}
@media(max-width:400px){
  .head-tel .btn{padding-left:11px;padding-right:11px;gap:6px}
  .head-tel .tel-bloc .num{font-size:21px;letter-spacing:0}
  .head-tel .btn svg{width:21px;height:21px}
}

/* --- BANDEAU DU BAS SUR TELEPHONE ---
   Deux boutons cote a cote ne tiennent pas dans 375 px : le numero se
   faisait rogner. Ils passent l un sous l autre, pleine largeur, avec
   une cible de touche confortable. Le numero reste au-dessus, c est lui
   qui convertit. */
@media(max-width:560px){
  .callbar-in{flex-direction:column;gap:7px;padding:9px 14px}
  .callbar-tel,.callbar-alt{width:100%;justify-content:center;text-align:center}
  .callbar-alt{padding:10px 14px}
  .callbar-alt .t2{display:none}
  .callbar-alt .t1{font-size:15px}
  body{padding-bottom:142px}
}

/* ============================================================================
   QUALIFICATIONS — cartouches resserrées, logos à la même hauteur optique
   ----------------------------------------------------------------------------
   Constat mesuré sur la page en ligne : la cartouche avait un rapport fixe de
   1,77 (162 × 96) alors que les logos officiels vont de 0,82 (Qualifelec, en
   hauteur) à 4,00 (Chambre de Métiers, très allongé). « contain » peignait donc
   le logo CMA sur 34 px de haut quand ses voisins en occupaient 78 : deux fois
   plus petit. Rien n'était rogné, mais rien n'était aligné non plus.

   Principe retenu, celui des bandeaux de certifications : on n'égalise pas les
   surfaces, on égalise la HAUTEUR. Chaque cartouche se resserre autour de son
   logo — largeur libre — mais toutes partagent la même hauteur et le même bord
   gauche. Les huit logos sont peints sur 62 px de haut, du plus étroit
   (Qualifelec, 51 px de large) au plus allongé (CMA, 248 px).

   Piège à ne pas réintroduire : ne PAS dimensionner l'image en hauteur
   pourcentage dans une grille à ligne automatique. La hauteur devient
   circulaire, l'image reprend sa taille naturelle, déborde, et overflow:hidden
   la coupe. Mesuré pendant la mise au point : conteneur 88 px, ligne de grille
   92,3 px, logos tronqués. D'où la hauteur en pixels sur l'image elle-même.
   ============================================================================ */
.gage-marque,
.gage-marque:has(.gage-officiel){
  width:auto;max-width:100%;height:86px;
  box-sizing:border-box;border-radius:12px;
  padding:11px 16px;overflow:visible;
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
}
.gage-marque:has(.gage-officiel){
  background:#fff;border:1px solid rgba(255,255,255,.32);
}
.gage-officiel{
  height:62px;width:auto;max-width:100%;
  object-fit:contain;
  padding:0;background:transparent;border-radius:0;
}

/* La tuile dessinée garde son fond sombre : ce pictogramme n'est le logo
   d'aucun organisme et ne doit pas se faire passer pour une certification.
   Seules ses dimensions s'alignent sur celles des autres. */
.gage-marque:not(:has(.gage-officiel)){
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  min-width:86px;
}
.gage-marque:not(:has(.gage-officiel)) svg{width:56px;height:56px}

/* Le point orphelin sous « Generali » : .gage-txt b passait en bloc, y compris
   le <b> imbriqué dans le <em>, ce qui renvoyait la ponctuation à la ligne. */
.gage-txt em b{display:inline;font-size:inherit;line-height:inherit}

/* Les intitulés ne tiennent pas tous sur le même nombre de lignes ; sans
   plancher, les descriptions ne se calent pas d'une colonne à l'autre. */
.gage-txt b{min-height:2.5em}

@media(max-width:520px){
  .gage-marque,
  .gage-marque:has(.gage-officiel){height:76px;padding:9px 13px}
  .gage-officiel{height:54px}
  .gage-marque:not(:has(.gage-officiel)){min-width:76px}
  .gage-marque:not(:has(.gage-officiel)) svg{width:48px;height:48px}
  .gage-txt b{min-height:0}
}

/* ============================================================================
   ACTIVITÉ, CRÉNEAU, FORFAIT — et le bandeau du bas qui respire
   ----------------------------------------------------------------------------
   Ce bloc est volontairement le dernier du fichier et regroupe tout ce qui
   touche à ces quatre sujets. Motif : le bandeau du bas était déjà réparti sur
   vingt-deux blocs dispersés qui se contredisaient — deux @media(max-width:560px)
   éloignés de 1 300 lignes se battaient sur le padding et sur la hauteur
   réservée. Plutôt que d'en ajouter un vingt-troisième au milieu, tout ce qui
   suit vient en dernier et tranche.
   ============================================================================ */

/* --- 1. LE BANDEAU DE SECTEUR DEVIENT UN LIEN ----------------------------- */
.sec-lien{
  text-decoration:none;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sec-lien:hover .sec-heure{filter:brightness(1.12)}
.sec-lien:focus-visible{outline:2px solid var(--acc-clair);outline-offset:-3px}

/* --- 2. L'HEURE D'ARRIVÉE, ET LES SECONDES QUI DÉFILENT -------------------
   L'heure est le seul chiffre gros du bandeau ; les secondes sont le seul
   élément rouge de toute la bande. Un seul point rouge attire l'oeil ; trois
   ne font plus rien attirer du tout. */
.sec-creneau{flex-wrap:wrap}
.sec-heure{
  font-family:var(--titre);
  font-size:26px;font-weight:800;letter-spacing:.005em;
  color:#fff;font-variant-numeric:tabular-nums;
  line-height:1.05;
}
.sec-ss{
  color:#FF4A3D;
  font-size:.68em;
  margin-left:1px;
  font-variant-numeric:tabular-nums;
}
.sec-suite{
  color:rgba(255,255,255,.62);font-size:12.5px;white-space:nowrap;
}
.sec-suite b{
  color:rgba(255,255,255,.88);font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --- 3. LE BANDEAU SE COLLE EN HAUT --------------------------------------
   Au bout de quelques secondes, l'information qui fait décider cesse de
   défiler avec la page. La hauteur réelle est mesurée en JavaScript et posée
   dans --sec-h : sans elle, la page sauterait de la hauteur du bandeau au
   moment où il passe en position fixe. */
.secteur.est-collee{
  position:fixed;top:0;left:0;right:0;z-index:70;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
  animation:sec-descend .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes sec-descend{ from{transform:translateY(-100%)} to{transform:translateY(0)} }
body.secteur-collee{padding-top:var(--sec-h,0px)}

/* --- 4. LE CHIFFRE QUI BRILLE --------------------------------------------
   Un éclat toutes les six secondes, jamais un clignotement : le chiffre reste
   lisible en permanence, c'est la lumière qui passe dessus. */
.sec-nb b:first-child{position:relative;overflow:hidden}
.sec-nb b:first-child::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sec-eclat 6s ease-in-out infinite;
}
@keyframes sec-eclat{
  0%,72%{left:-60%}
  86%{left:120%}
  100%{left:120%}
}
/* Décrément : le chiffre encaisse le coup, une fois, puis se stabilise. */
.sec-nb b:first-child.baisse{ animation:sec-baisse .62s cubic-bezier(.34,1.56,.64,1) }
@keyframes sec-baisse{
  0%{transform:scale(1)}
  30%{transform:scale(1.34);background:#FF4A3D;color:#fff}
  100%{transform:scale(1)}
}

/* --- 5. LES INTERVENTIONS QUI VIENNENT D'ÊTRE PRISES ---------------------- */
.activite{
  position:fixed;left:0;right:0;top:var(--acti-top,12px);
  z-index:90;display:flex;justify-content:center;
  pointer-events:none;padding:0 12px;
}
.acti-carte{
  pointer-events:auto;
  display:flex;align-items:center;gap:13px;
  max-width:520px;width:100%;
  padding:13px 16px;border-radius:14px;
  background:linear-gradient(180deg,#173B30,#0E2A22);
  border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--acc-clair);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.75);
  color:#fff;text-decoration:none;
  animation:acti-entre .52s cubic-bezier(.22,.61,.36,1) both;
}
.acti-carte.sort{ animation:acti-sort .42s ease-in both }
@keyframes acti-entre{
  from{opacity:0;transform:translateY(-26px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes acti-sort{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-20px)}
}
.acti-pic{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
}
.acti-pic svg{width:20px;height:20px;stroke:var(--acc-clair);fill:none;stroke-width:2.2}
.acti-pic::after{
  content:"";position:absolute;inset:-1px;border-radius:10px;
  border:1.5px solid var(--acc-clair);opacity:0;
  animation:acti-onde 2.2s ease-out infinite;
}
@keyframes acti-onde{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}
.acti-txt{min-width:0;line-height:1.35}
.acti-t1{
  display:block;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-clair);
}
.acti-t2{
  display:block;font-size:14.5px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;
}
.acti-t3{display:block;font-size:12.5px;color:rgba(255,255,255,.62)}
.acti-t3 sup{font-size:.8em}
.acti-carte:hover{border-left-color:#fff}


/* --- 7. LE BANDEAU DU BAS RESPIRE ----------------------------------------
   Sur téléphone, le padding intérieur était tombé à 9 px et la barre faisait
   environ 120 px pour 142 px réservés : serrée, et mal calée. On redonne de
   l'air, on tient compte de l'encoche basse des iPhone, totalement absente
   jusqu'ici, et on recalcule la réserve. */
.callbar{padding-bottom:env(safe-area-inset-bottom,0px)}
.callbar-in{padding:14px 20px 12px;gap:14px}
.callbar-tel{padding:15px 22px}

@media(max-width:560px){
  .callbar-in{padding:13px 12px 11px;gap:11px}
  .callbar-tel{padding:14px 14px;border-radius:13px}
  .callbar-tel svg{width:22px;height:22px}
  .callbar-alt{padding:12px 13px;line-height:1.3}
  .callbar-alt .t1{font-size:14px}
  /* L'encadré pointillé débordait de 11 px autour du bouton : sur un écran
     étroit il mordait sur le bord de la barre. On réduit l'écart. */
  .callbar-alt{outline-offset:2px}
  body{padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:374px){
  body{padding-bottom:calc(176px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:561px){
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:1000px){
  body{padding-bottom:calc(144px + env(safe-area-inset-bottom,0px))}
}

/* --- 8. CE QUI COMPTE SE CLIQUE -----------------------------------------
   Chaque information de réassurance devient un lien vers le téléphone. Le
   visiteur qui s'arrête sur un chiffre est exactement celui qu'il faut mettre
   en relation : il ne doit pas avoir à remonter chercher le bouton. */
a.hp-p, a.gage, a.carte-chiffre{
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
a.hp-p:hover, a.gage:hover{ transform:translateY(-2px) }
a.hp-p:focus-visible, a.gage:focus-visible{
  outline:2px solid var(--acc-clair);outline-offset:3px;
}
.appelable{cursor:pointer}

@media(prefers-reduced-motion:reduce){
  .secteur.est-collee,
  .acti-carte,
  .acti-carte.sort{animation:none}
  .sec-nb b:first-child::after,
  .acti-pic::after{animation:none;opacity:0}
}

/* Les tuiles de qualification sont des <li> : le lien est glisse autour de
   leur contenu, il reprend donc la colonne flex que portait la tuile. */
.gage-lien{
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
}
li.gage:hover .gage-marque{filter:brightness(1.04)}

/* ============================================================================
   CORRECTIFS — tranche horaire unique, pastille tarif en haut, scintillement
   ============================================================================ */

/* --- 1. LES SECONDES AU MÊME CORPS QUE L'HEURE --------------------------
   Elles étaient en .68em, donc discrètes. Elles doivent peser autant que
   l'heure : c'est le chiffre qui bouge, donc celui qui tient l'attention. */
.sec-ss{
  color:#FF4A3D;
  font-size:1em;
  margin-left:0;
  font-variant-numeric:tabular-nums;
}
/* « entre » et « et » ne sont pas des chiffres : ils s'effacent derrière eux. */
.sec-mot{
  font-family:var(--sans);
  font-size:.55em;font-weight:600;
  color:rgba(255,255,255,.62);
  letter-spacing:0;
}
/* En inline plutot qu en flex : un gap separerait les minutes des secondes,
   qui doivent se lire d un seul tenant. Les mots portent leur propre marge. */
.sec-heure{display:inline}
.sec-mot{margin:0 5px}

/* --- 2. LA PASTILLE TARIF, SOUS LE NUMÉRO DU HAUT -----------------------
   Le prix d'abord, gros et brillant ; le libellé dessous, discret. C'est la
   question que le visiteur se pose avant de composer le numéro. */
.head-tel{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
}
.tarif-pastille{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 12px 7px;border-radius:9px;
  background:linear-gradient(180deg,#FFF6EC,#FCE7D5);
  border:1px solid #F0C9A6;
  text-decoration:none;
  position:relative;overflow:hidden;
}
.tp-prix{
  font-family:var(--titre);
  font-size:25px;font-weight:800;line-height:1;
  color:var(--rust);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.tp-prix sup{font-size:.42em;margin-left:1px;color:var(--ink-soft);top:-.7em}
.tp-lib{
  font-size:10.5px;line-height:1.22;font-weight:600;
  color:var(--ink-soft);text-align:center;
}
/* Le prix brille, il ne clignote pas : il reste lisible en permanence, c'est
   le reflet qui passe dessus. */
.tarif-pastille::after{
  content:"";position:absolute;top:0;left:-45%;width:34%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.92),transparent);
  animation:tp-eclat 4.2s ease-in-out infinite;
}
@keyframes tp-eclat{
  0%,66%{left:-45%}
  84%,100%{left:135%}
}
@media(max-width:999px){
  .tarif-pastille{padding:5px 10px 6px}
  .tp-prix{font-size:21px}
  .tp-lib{font-size:9.5px;max-width:15ch}
}

/* --- 3. « OUVERT ACTUELLEMENT » SCINTILLE -------------------------------
   Une lueur traverse la pastille et le point respire. Le texte, lui, ne
   clignote jamais : un libellé qui disparaît par intermittence se lit mal et
   donne l'impression d'un bandeau en panne. */
.live-pill,
.hp-statut{position:relative;overflow:hidden}
.live-pill::after,
.hp-statut::after{
  content:"";position:absolute;top:0;left:-45%;width:32%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:pill-scintille 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pill-scintille{
  0%,62%{left:-45%}
  80%,100%{left:135%}
}
.live-pill .dot,
.hp-statut i{
  animation:dot-scintille 1.9s ease-in-out infinite;
}
@keyframes dot-scintille{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.85)}
  50%{opacity:.6;box-shadow:0 0 9px 2px rgba(255,255,255,.7)}
}

/* --- 4. LE BANDEAU DU BAS RETROUVE SA HAUTEUR ---------------------------
   L'étiquette tarif en est partie : la réserve sous le body redescend. */
@media(max-width:560px){
  body{padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:374px){
  body{padding-bottom:calc(142px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:561px){
  body{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:1000px){
  body{padding-bottom:calc(122px + env(safe-area-inset-bottom,0px))}
}

@media(prefers-reduced-motion:reduce){
  .tarif-pastille::after,
  .live-pill::after,
  .hp-statut::after{animation:none;opacity:0}
  .live-pill .dot,
  .hp-statut i{animation:none}
}

/* --- AJUSTEMENTS TELEPHONE -----------------------------------------------
   Constate a 375 px : le libelle du tarif etait bride a 15ch et retombait sur
   trois lignes sous le prix, et le bandeau de secteur occupait quatre lignes
   avant meme le logo. On rend la largeur au libelle et on resserre le bandeau. */
@media(max-width:560px){
  .tp-lib{max-width:none;font-size:10px;line-height:1.15}
  .tp-prix{font-size:20px}
  .tarif-pastille{padding:5px 8px 6px}
  .head-tel{gap:5px}

  .secteur .wrap{padding:9px 16px;gap:6px 12px;font-size:12.5px}
  .sec-etat{font-size:10.5px;padding:4px 10px 4px 8px}
  .sec-heure{font-size:22px}
  .sec-creneau{gap:6px}
  .sec-creneau em{font-size:12px}

  .acti-carte{padding:11px 13px;gap:11px;border-radius:12px}
  .acti-pic{width:32px;height:32px;border-radius:9px}
  .acti-pic svg{width:17px;height:17px}
  .acti-t1{font-size:10px;letter-spacing:.08em}
  .acti-t2{font-size:13.5px;line-height:1.3}
  .acti-t3{font-size:11.5px}
}