/*
Theme Name: Urgence Électricien
Theme URI: https://urgenceelectricien.com
Author: The Web Revolution
Description: Thème sur mesure pour Urgence Électricien — service d'électricité d'urgence 24/7 sur la Rive-Sud et à Montréal. Site bilingue de quatre pages, fond électrique animé, carte interactive de la zone desservie, aucun page builder.
Version: 2.3.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: urgence-electricien
Tags: one-page, landing-page, business, custom-colors, bilingual
*/

/* ═══════════════════════════════════════════════════════════
   PALETTE
   Deux directions sont codées. Pour passer au Tiffany, il suffit
   de déplacer le commentaire d'ouverture : mettre le bloc BLEU
   PROFOND en commentaire et sortir le bloc TIFFANY du sien.
   Rien d'autre à toucher dans la feuille.
   ═══════════════════════════════════════════════════════════ */

/* ── ACTIVE : BLEU PROFOND ─────────────────────────────── */
:root{
  --base:#060b1e;
  --surface:#0c1533;
  --raised:#131f45;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --accent:#2d6bff;
  --accent-hi:#4f83ff;
  --accent-lo:#7fa8ff;
  --urg:#d42b38;
  --urg-hi:#ec3b49;
  --paper:#f4f6fb;
  --paper-2:#e7ecf6;
  --ink:#0a1229;
  --mut:#63708f;
  --mut-d:rgba(255,255,255,.66);
  --glow:rgba(45,107,255,.34);
  --glow-2:rgba(212,43,56,.26);
  --line-d:rgba(10,18,41,.12);
}

/* ── EN RÉSERVE : TIFFANY ──────────────────────────────────
:root{
  --base:#04161c;
  --surface:#0a2730;
  --raised:#103743;
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.18);
  --accent:#0abab5;
  --accent-hi:#22d3cd;
  --accent-lo:#6fe6e0;
  --urg:#ff7a2f;
  --urg-hi:#ff9354;
  --paper:#f1f8f8;
  --paper-2:#e2f0ef;
  --ink:#06222a;
  --mut:#5f8188;
  --mut-d:rgba(255,255,255,.68);
  --glow:rgba(10,186,181,.34);
  --glow-2:rgba(255,122,47,.26);
  --line-d:rgba(6,34,42,.12);
}
──────────────────────────────────────────────────────────── */

:root{
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --red-f:"Poppins","Archivo",sans-serif;
  --wrap:1180px;
}

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent-lo);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px}

h1,h2,h3,.disp{font-family:var(--disp);font-weight:900;letter-spacing:-.025em;line-height:1.04;margin:0}
.ln{display:block;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
  font-family:var(--red-f);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

section[id],#top{scroll-margin-top:84px}

/* ═══════════════════════════════════════════════════════════
   BANDEAU ET NAVIGATION
   ═══════════════════════════════════════════════════════════ */

.dispatch{background:var(--urg);color:#fff;font-family:var(--red-f);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dispatch .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.pulse{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 rgba(255,255,255,.85);animation:p 2s infinite}
@keyframes p{70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.dispatch span{opacity:.86}
.dispatch .sep{opacity:.4}

.nav{background:var(--surface);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.mark{height:46px;width:auto;flex:none}
.wordmark{height:38px;width:auto;flex:none}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:15px}
.navlinks a{color:var(--mut-d);text-decoration:none;transition:color .15s;position:relative}
.navlinks a:hover{color:#fff}
.navlinks a[aria-current="page"]{color:#fff}
.navlinks a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 10px var(--glow);
}

.langsw{
  flex:none;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--mut-d);text-decoration:none;border:1px solid var(--hair-2);
  border-radius:7px;padding:8px 11px;transition:all .16s;
}
.langsw:hover{color:#fff;border-color:var(--accent);background:rgba(255,255,255,.05)}

/* ── Appeler ou texter ─────────────────────────────────── */
.telwrap{position:relative;flex:none}
.navtel{
  display:flex;align-items:center;gap:9px;background:var(--urg);color:#fff;
  border:0;cursor:pointer;padding:11px 18px;border-radius:9px;
  font-family:var(--red-f);font-weight:600;font-size:15px;
  transition:background .18s,transform .18s;
}
.navtel:hover{background:var(--urg-hi);transform:translateY(-1px)}
.navtel .chev{transition:transform .2s}
.navtel[aria-expanded="true"] .chev{transform:rotate(180deg)}
.telmenu{
  position:absolute;right:0;top:calc(100% + 9px);min-width:262px;
  background:var(--raised);border:1px solid var(--hair-2);border-radius:11px;
  padding:7px;box-shadow:0 22px 48px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;z-index:50;
}
.telmenu.on{opacity:1;visibility:visible;transform:translateY(0)}
.telmenu a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:8px;text-decoration:none;color:#fff;font-size:14.5px;transition:background .15s}
.telmenu a:hover{background:rgba(255,255,255,.09)}
.telmenu .mic{width:32px;height:32px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:none}
.telmenu small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mut-d);margin-top:3px;line-height:1.35}

/* ═══════════════════════════════════════════════════════════
   HÉROS
   ═══════════════════════════════════════════════════════════ */

.hero,.pagehead{background:var(--base);color:#fff;position:relative;overflow:hidden}
.hero{padding:76px 0 88px}
.pagehead{padding:64px 0 58px}
#spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero::after,.pagehead::after{
  content:"";position:absolute;width:680px;height:680px;right:-220px;top:-290px;
  background:radial-gradient(circle,var(--glow),transparent 62%);pointer-events:none;z-index:0;
}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:start}
.pagehead .wrap{position:relative;z-index:3}
.hero .eyebrow,.pagehead .eyebrow{color:var(--accent-lo);margin-bottom:20px;display:block}
.hero h1{font-size:clamp(38px,5.1vw,63px);max-width:15ch}
.pagehead h1{font-size:clamp(32px,4.2vw,50px);max-width:20ch}
.pagehead p{color:var(--mut-d);font-size:18px;max-width:56ch;margin:18px 0 0}

.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-d);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.crumb a{text-decoration:none;opacity:.75}
.crumb a:hover{opacity:1;color:#fff}
.crumb b{color:#fff;font-weight:600}

/* Le mot électrifié : un filament court sous le mot, plus de bloc plein */
.zap{position:relative;display:inline-block;white-space:nowrap}
.zap>span{position:relative;text-shadow:0 0 24px var(--glow)}
.zap::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:4px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent-lo),var(--accent-hi),var(--accent-lo),transparent);
  background-size:220% 100%;
  box-shadow:0 0 14px var(--accent-hi),0 0 30px var(--glow);
  animation:filament 2.6s linear infinite;
}
@keyframes filament{0%{background-position:120% 0}100%{background-position:-120% 0}}

.hero p.lead{font-size:19px;color:var(--mut-d);max-width:46ch;margin:22px 0 32px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--red-f);font-weight:700;font-size:16px;letter-spacing:-.005em;
  padding:16px 26px;border-radius:9px;transition:transform .18s,background .18s,box-shadow .18s;
}
.btn-urg{background:var(--urg);color:#fff;box-shadow:0 10px 28px var(--glow-2)}
.btn-urg:hover{background:var(--urg-hi);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--hair-2)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-acc{background:var(--accent);color:#fff;box-shadow:0 10px 28px var(--glow);width:100%;justify-content:center;font-size:17px;padding:17px 26px}
.btn-acc:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn-wide{width:100%;justify-content:center;font-size:17px;padding:18px 26px}

.creds{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--hair)}
.cred{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut-d);display:flex;gap:8px;align-items:center;opacity:.82}
.cred b{color:#fff;font-weight:600}
.dot-b{width:5px;height:5px;border-radius:50%;background:var(--accent-lo);flex:none}

/* ═══════════════════════════════════════════════════════════
   PANNEAU DE TRIAGE MULTI-SÉLECTION
   ═══════════════════════════════════════════════════════════ */

.panel{background:rgba(255,255,255,.045);border:1px solid var(--hair-2);border-radius:15px;backdrop-filter:blur(10px);overflow:hidden}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px;border-bottom:1px solid var(--hair)}
.panel-hd b{font-family:var(--disp);font-size:15px;font-weight:800;color:#fff}
.panel-hd span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--mut-d);opacity:.6}
.brks{padding:7px}
.brk{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:transparent;border:0;cursor:pointer;color:#fff;padding:13px 12px;border-radius:9px;
  font-family:var(--body);font-size:15.5px;transition:background .16s;
}
.brk:hover{background:rgba(255,255,255,.06)}
.sw{width:34px;height:19px;border-radius:100px;background:rgba(255,255,255,.16);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.brk[aria-pressed="true"] .sw{background:var(--accent)}
.brk[aria-pressed="true"] .sw::after{transform:translateX(15px)}
.brk .txt{flex:1}
.prio{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mut-d);opacity:.55;flex:none}

.panel-ft{padding:15px 19px 19px;border-top:1px solid var(--hair)}
.gauge{height:6px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:13px}
.gauge i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--urg));box-shadow:0 0 12px var(--glow);transition:width .45s cubic-bezier(.22,1,.36,1)}
.panel-ft p{margin:0 0 13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;color:var(--mut-d);text-transform:uppercase;opacity:.85}
.panel-ft p b{color:#fff;font-weight:600}
.panel-ft p b.lvl{color:var(--urg-hi);font-weight:700}

/* ═══════════════════════════════════════════════════════════
   STATISTIQUES ET PETITES SCÈNES
   ═══════════════════════════════════════════════════════════ */

.stats{background:var(--ink);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.stat{padding:40px 22px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--hair)}
.stat b{font-family:var(--disp);font-weight:900;font-size:40px;display:block;letter-spacing:-.04em;line-height:1}
.stat b.r{font-family:var(--red-f);font-weight:700;color:var(--urg)}
.stat .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.12);margin:13px auto 11px;max-width:76px;overflow:hidden}
.stat .bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 9px var(--glow);transition:width 1.6s cubic-bezier(.16,1,.3,1)}
.stat.hot .bar i{background:var(--urg);box-shadow:0 0 9px var(--glow-2)}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut-d);opacity:.62}

.duel{position:absolute;top:50%;transform:translate(-50%,-50%);width:96px;height:46px;pointer-events:none;z-index:2}
.duel::before{content:"";position:absolute;inset:-8px -14px;border-radius:100px;background:radial-gradient(ellipse at center,var(--ink) 42%,transparent 74%)}
.duel svg{position:relative;width:100%;height:100%;overflow:visible}
.hero-f{animation:step-l 2.4s ease-in-out infinite}
.vil-f{animation:step-r 2.4s ease-in-out infinite}
@keyframes step-l{0%,100%{transform:translateX(0)}45%{transform:translateX(8px)}56%{transform:translateX(5px)}}
@keyframes step-r{0%,100%{transform:translateX(0)}45%{transform:translateX(-8px)}56%{transform:translateX(-5px)}}
.bolt-f{animation:fly 2.4s ease-in-out infinite;transform-origin:center}
@keyframes fly{0%,36%{opacity:0;transform:scaleX(.2)}47%{opacity:1;transform:scaleX(1)}62%{opacity:1;transform:scaleX(1)}72%,100%{opacity:0;transform:scaleX(.2)}}

/* ═══════════════════════════════════════════════════════════
   SECTIONS CLAIRES ET CARTES
   ═══════════════════════════════════════════════════════════ */

.sec{padding:78px 0;background:var(--paper);color:var(--ink)}
.sec-hd{margin-bottom:38px}
.sec-hd .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.sec-hd h2{font-size:clamp(30px,3.8vw,44px);max-width:22ch}
.sec-hd p{color:var(--mut);font-size:18px;margin:16px 0 0;max-width:56ch}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;grid-auto-rows:1fr}
/* Toutes les cartes font la même hauteur, l'étiquette reste collée en bas. */
.card{
  background:#fff;border:1px solid var(--line-d);border-radius:14px;
  padding:26px 24px 24px;transition:transform .22s,box-shadow .22s;
  display:flex;flex-direction:column;height:100%;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.09)}
.ico{width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;margin-bottom:18px}
.ico-accent{color:var(--accent)}
.ico-urg{color:var(--urg)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--mut);font-size:15.5px;margin:0 0 14px}
.card p.long{font-size:15px;line-height:1.66}
.tagr{font-family:var(--red-f);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--urg);display:block;margin-top:auto;padding-top:8px}

.more{
  display:inline-flex;align-items:center;gap:9px;margin-top:32px;
  font-family:var(--red-f);font-weight:600;font-size:15px;color:var(--accent);
  text-decoration:none;border-bottom:2px solid transparent;transition:all .16s;
}
.more:hover{border-bottom-color:var(--accent);gap:13px}
.sec-zone .more{margin-left:16px}

/* ═══════════════════════════════════════════════════════════
   MINUTERIE : LE TECHNICIEN, L'AMPOULE MORTE, L'AMPOULE ALLUMÉE
   ═══════════════════════════════════════════════════════════ */

.sec-timer{background:var(--surface);color:#fff}
.sec-timer .sec-hd .eyebrow{color:var(--accent-lo)}
.sec-timer .sec-hd p{color:var(--mut-d)}

.timer{margin-bottom:44px}
.run{position:relative;padding:0 62px}

/* Les deux ampoules, posées au-dessus de la course */
.bulbs{position:relative;height:56px;margin-bottom:6px}
.bulb{
  position:absolute;bottom:0;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:44px;
}
.bulb .emo{font-size:34px;line-height:1;display:block;transition:filter .5s,transform .5s}

/* Morte : l'ampoule est éteinte et fêlée */
.bulb-dead .emo{filter:grayscale(1) brightness(.55)}
.bulb-dead .crack{
  position:absolute;top:4px;left:50%;margin-left:-4px;
  stroke:var(--urg);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
}

/* Allumée : elle ne s'illumine qu'à l'arrivée du technicien */
.bulb-live .emo{filter:grayscale(1) brightness(.5);transform:scale(.92)}
.timer.done .bulb-live .emo{
  filter:none;transform:scale(1.14);
  animation:bulbPop .6s cubic-bezier(.22,1.4,.4,1);
}
@keyframes bulbPop{0%{transform:scale(.92)}55%{transform:scale(1.32)}100%{transform:scale(1.14)}}
.bulb-live::after{
  content:"";position:absolute;top:-14px;left:50%;width:74px;height:74px;
  margin-left:-37px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,120,.55),transparent 68%);
  opacity:0;transition:opacity .5s;
}
.timer.done .bulb-live::after{opacity:1;animation:halo 2.6s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}

/* La course */
.track{position:relative;height:8px;border-radius:100px;background:rgba(255,255,255,.11)}
.track i{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--urg),var(--accent));
  box-shadow:0 0 16px var(--glow);
}
.node{
  position:absolute;top:50%;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--surface);
  border:2px solid rgba(255,255,255,.26);transition:all .3s;
}
.node.lit{border-color:var(--accent);background:var(--accent);box-shadow:0 0 14px var(--accent-hi)}

/* Le technicien qui avance sur la course */
.tech{
  position:absolute;top:50%;left:0;transform:translate(-50%,-58%);
  font-size:30px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  will-change:left;
}
.timer.running .tech{animation:walk .52s ease-in-out infinite}
@keyframes walk{0%,100%{transform:translate(-50%,-58%) rotate(-4deg)}50%{transform:translate(-50%,-64%) rotate(4deg)}}

.readout{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}
.readout b{
  font-family:var(--red-f);font-weight:700;font-size:32px;letter-spacing:-.02em;
  color:var(--accent-lo);font-variant-numeric:tabular-nums;
  transition:color .5s;
}
.timer.done .readout b{color:var(--urg)}
.replay{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--hair-2);color:var(--mut-d);
  border-radius:100px;padding:9px 16px;font-family:var(--red-f);font-weight:600;font-size:13px;
  transition:all .16s;
}
.replay:hover{background:rgba(255,255,255,.14);color:#fff}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{padding-left:18px;border-left:2px solid rgba(255,255,255,.12);transition:border-color .4s,opacity .4s;opacity:.5}
.step.lit{border-left-color:var(--accent);opacity:1}
.step time{display:block;font-family:var(--red-f);font-weight:600;font-size:13.5px;letter-spacing:.07em;color:var(--urg-hi);margin-bottom:9px}
.step.lit time{color:var(--accent-lo)}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--mut-d);font-size:15px;margin:0}

/* ═══════════════════════════════════════════════════════════
   ZONE DESSERVIE : VRAIE CARTE ET RAYON QUI RESPIRE
   ═══════════════════════════════════════════════════════════ */

.zone-lay{display:grid;grid-template-columns:.86fr 1.14fr;gap:46px;align-items:center}
.zone-copy .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.zone-copy h2{font-size:clamp(30px,3.7vw,44px)}
.zone-p{color:var(--mut);font-size:18px;margin:16px 0 22px;max-width:46ch}

.zone-live{
  display:flex;align-items:center;gap:11px;margin-bottom:24px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--mut);
  min-height:24px;
}
.zone-live b{color:var(--ink);font-weight:600;font-family:var(--red-f);letter-spacing:0}
.zone-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--glow);animation:p 2.4s infinite;
}
.zone-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.mapwrap{position:relative}
.uemap{
  height:440px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-d);background:var(--ink);
  box-shadow:0 22px 54px rgba(0,0,0,.14);
  z-index:1;
}
.villes-repli{
  list-style:none;margin:0;padding:26px;display:flex;flex-wrap:wrap;gap:9px;
}
.villes-repli li{
  padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.08);
  color:#fff;font-size:14.5px;
}

/* Le rayon desservi */
.ue-zone-fill{fill:var(--accent);fill-opacity:.12;animation:zoneBreathe 6s ease-in-out infinite}
@keyframes zoneBreathe{0%,100%{fill-opacity:.09}50%{fill-opacity:.17}}

.ue-zone-ring{
  stroke:var(--accent-lo);stroke-width:2;stroke-dasharray:9 8;
  animation:zoneDash 26s linear infinite;
}
@keyframes zoneDash{to{stroke-dashoffset:-340}}

/* Les villes */
.ue-pin{
  fill:var(--accent-lo);fill-opacity:.92;
  stroke:var(--ink);stroke-width:2;
  cursor:pointer;transition:fill .18s,stroke-width .18s;
}
.ue-pin-hi{fill:var(--accent-hi);fill-opacity:1;stroke-width:2.5}
.ue-pin-base{fill:var(--urg-hi);fill-opacity:1;stroke:#fff;stroke-width:2.5}
.ue-pin:hover,.ue-pin:focus{fill:#fff;stroke-width:3}

/* Le point d'attache bat comme un gyrophare */
.ue-pin-halo{
  fill:var(--urg-hi);stroke:none;
  transform-origin:center;transform-box:fill-box;
  animation:pinHalo 2.6s ease-out infinite;
}
@keyframes pinHalo{
  0%  {fill-opacity:.42;transform:scale(.42)}
  70% {fill-opacity:0;  transform:scale(1)}
  100%{fill-opacity:0;  transform:scale(1)}
}

.uemap .ue-tip{
  background:var(--ink);border:1px solid var(--hair-2);border-radius:7px;
  color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;padding:5px 9px;box-shadow:0 6px 18px rgba(0,0,0,.45);
  white-space:nowrap;
}
.uemap .ue-tip.leaflet-tooltip-top::before   {border-top-color:var(--hair-2)}
.uemap .ue-tip.leaflet-tooltip-bottom::before{border-bottom-color:var(--hair-2)}
.uemap .ue-tip.leaflet-tooltip-left::before  {border-left-color:var(--hair-2)}
.uemap .ue-tip.leaflet-tooltip-right::before {border-right-color:var(--hair-2)}
.uemap .ue-tip-base{
  border-color:var(--urg-hi);color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 3px var(--glow-2);
}
.uemap .ue-tip-base.leaflet-tooltip-top::before   {border-top-color:var(--urg-hi)}
.uemap .ue-tip-base.leaflet-tooltip-bottom::before{border-bottom-color:var(--urg-hi)}
.uemap .ue-tip-base.leaflet-tooltip-left::before  {border-left-color:var(--urg-hi)}
.uemap .ue-tip-base.leaflet-tooltip-right::before {border-right-color:var(--urg-hi)}

@media (prefers-reduced-motion:reduce){
  .ue-zone-fill,.ue-zone-ring,.ue-pin-halo{animation:none}
}

/* Les commandes de Leaflet, aux couleurs du site */
.uemap.leaflet-container .leaflet-control-zoom a{
  background:var(--surface);color:#fff;border-color:var(--hair-2);
  font-family:var(--body);
}
.uemap.leaflet-container .leaflet-control-zoom a:hover{background:var(--raised)}
.uemap.leaflet-container .leaflet-control-attribution{
  background:rgba(10,18,41,.82);color:rgba(255,255,255,.5);
  font-size:10.5px;padding:2px 7px;
}
.uemap.leaflet-container .leaflet-control-attribution a{color:var(--accent-lo)}

.map-legende{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);
}
.lg-dot{
  width:14px;height:14px;border-radius:50%;flex:none;
  background:var(--accent);opacity:.24;
  border:2px dashed var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   BANDES D'AVIS QUI DÉFILENT
   ═══════════════════════════════════════════════════════════ */

.sec-avis{background:var(--paper-2);overflow:hidden}
.bands{margin-top:8px;position:relative}
.bands::before,.bands::after{
  content:"";position:absolute;top:0;bottom:0;width:110px;z-index:3;pointer-events:none;
}
.bands::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.bands::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}

.band{overflow:hidden;padding:8px 0}
.rail{display:flex;gap:18px;width:max-content;animation:roll 68s linear infinite}
.band-rev .rail{animation-direction:reverse;animation-duration:82s}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.avis{
  width:330px;flex:none;background:#fff;border:1px solid var(--line-d);border-radius:14px;
  padding:22px 22px 18px;
}
.avis .stars{color:var(--urg);letter-spacing:3px;font-size:14px;margin-bottom:12px;font-family:var(--red-f)}
.avis blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.avis .who{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
}
.avis .who b{color:var(--ink);font-weight:600}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE
   ═══════════════════════════════════════════════════════════ */

.form-sec{background:var(--base);color:#fff}
.form-lay{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.form-lay .eyebrow{color:var(--accent-lo);display:block;margin-bottom:14px}
.form-lay h2{font-size:clamp(30px,3.7vw,44px)}
.form-lay>div>p{color:var(--mut-d);font-size:18px;margin:16px 0 28px;max-width:44ch}

.arg{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-size:16px;color:rgba(255,255,255,.9)}
.tick{width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none;position:relative}
.tick::before,.tick::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent-lo);opacity:0}
.tick.zapping::before{animation:ring .7s ease-out}
.tick.zapping::after{animation:ring .7s ease-out .12s}
@keyframes ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.8)}}
.tick .sparks{position:absolute;inset:-14px;pointer-events:none;opacity:0}
.tick.zapping .sparks{animation:sparkfade .7s ease-out}
@keyframes sparkfade{0%{opacity:1}100%{opacity:0}}
.tick .sparks i{position:absolute;left:50%;top:50%;width:2px;height:9px;border-radius:2px;background:var(--accent-lo);box-shadow:0 0 6px var(--accent-hi);transform-origin:50% 0}

.fmail-line{margin:28px 0 0!important;font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--mut-d)}
.fmail-line a{color:var(--accent-lo)}

.formbox{
  position:relative;isolation:isolate;
  background:#fff;border-radius:16px;padding:28px 26px;color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}

/* Un filet de courant qui fait le tour de la boîte.
   Le masque ne laisse voir que l'anneau de 2 px : le dégradé
   ne peut donc jamais déborder sur le contenu du formulaire. */
@property --ue-ang{syntax:'<angle>';initial-value:0deg;inherits:false}

.edge{
  position:absolute;inset:-2px;border-radius:18px;pointer-events:none;
  padding:2px;
  background:conic-gradient(from var(--ue-ang),
    transparent 0 56%,
    var(--accent) 65%,
    var(--accent-lo) 71%,
    #fff 75%,
    var(--accent-lo) 79%,
    var(--accent) 85%,
    transparent 93% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:edgeSpin 4.6s linear infinite;
}
@keyframes edgeSpin{to{--ue-ang:360deg}}

/* Une lueur douce derrière la boîte, elle ne touche pas le contenu */
.formbox::after{
  content:"";position:absolute;inset:-3px;border-radius:19px;z-index:-1;
  box-shadow:0 0 26px var(--glow);pointer-events:none;
}

/* Trois étincelles qui longent le périmètre */
.spark{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:#fff;pointer-events:none;z-index:3;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px 2px var(--accent-hi),0 0 18px 5px var(--glow);
  animation:perim 6.2s linear infinite;
}
.spark.s2{animation-duration:8.4s;animation-delay:-2.6s;width:5px;height:5px}
.spark.s3{animation-duration:5.1s;animation-delay:-4.1s;width:4px;height:4px}
@keyframes perim{
  0%   {top:0;    left:0;    opacity:0}
  4%   {opacity:1}
  25%  {top:0;    left:100%}
  50%  {top:100%; left:100%}
  75%  {top:100%; left:0}
  96%  {opacity:1}
  100% {top:0;    left:0;    opacity:0}
}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:15px}
.fld label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-bottom:7px;font-weight:600}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 14px;border:1.5px solid #d5ddee;border-radius:8px;
  font-family:var(--body);font-size:16px;background:#fff;color:var(--ink);
}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);outline:none}
.legal{font-size:12.5px;color:var(--mut);text-align:center;margin:14px 0 0;line-height:1.5}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-err{margin:0 0 16px;padding:12px 14px;border-radius:8px;background:#fdecec;border:1.5px solid var(--urg);color:var(--urg);font-size:14.5px}

.merci{display:none;text-align:center;padding:22px 6px}
.merci.on{display:block}
.formbox.sent #lead{display:none}
.merci .big{width:54px;height:54px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 0 8px var(--glow)}
.merci h3{font-size:22px;margin-bottom:10px}
.merci p{color:var(--mut);font-size:15.5px;margin:0}
.merci .again{margin-top:22px;display:inline-block;font-size:14px;color:var(--accent);text-decoration:underline;cursor:pointer;background:none;border:0;font-family:var(--body)}

/* ═══════════════════════════════════════════════════════════
   QUESTIONS FRÉQUENTES
   ═══════════════════════════════════════════════════════════ */

.faq details{border-bottom:1px solid var(--line-d);padding:20px 0}
.faq summary{
  cursor:pointer;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--red-f);font-weight:500;color:var(--urg);font-size:23px;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mut);font-size:16px;margin:14px 0 0;max-width:70ch}

/* ═══════════════════════════════════════════════════════════
   PIED DE PAGE
   ═══════════════════════════════════════════════════════════ */

footer{background:var(--base);color:#fff;padding:64px 0 30px;border-top:1px solid var(--hair)}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:38px;padding-bottom:38px;border-bottom:1px solid var(--hair)}
.fcol-brand{max-width:290px}
.flogo{width:150px;height:auto;margin-bottom:18px}
.fcol p{margin:0 0 9px;font-size:14.5px;color:var(--mut-d)}
.fcol a{color:var(--mut-d);text-decoration:none;transition:color .15s}
.fcol a:hover{color:#fff}
.fcol b{display:block;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:13px}
.fcol .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);display:inline-block;min-width:78px}
.fmail{margin-top:14px!important}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.42)}

.callbar{display:none}

#journal{display:none;position:fixed;left:16px;bottom:16px;z-index:90;width:290px;max-height:44vh;overflow:auto;background:rgba(6,11,30,.96);color:#9fe8b4;border:1px solid var(--hair-2);border-radius:10px;font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:12px 14px}
#journal.on{display:block}

/* ═══════════════════════════════════════════════════════════
   APPARITIONS AU DÉFILEMENT
   ═══════════════════════════════════════════════════════════ */

.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════
   ADAPTATIF
   ═══════════════════════════════════════════════════════════ */

@media(max-width:1080px){
  .foot-top{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:22px}
}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero h1{max-width:none}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(5)::before{display:none}
  .duel{display:none}
  .grid3{grid-template-columns:1fr}
  .zone-lay,.form-lay{grid-template-columns:1fr;gap:32px}
  .navlinks{display:none}
}

@media(max-width:640px){
  body{font-size:16px;padding-bottom:66px}
  .sec{padding:60px 0}
  .hero{padding:52px 0 66px}
  .duo{grid-template-columns:1fr}
  .avis{width:280px}
  .uemap{height:340px}
  .steps{grid-template-columns:1fr}
  .run{padding:0 42px}
  .bulbs{height:48px}
  .bulb{width:48px}
  .bulb .emo{font-size:28px}
  .tech{font-size:25px}
  .bulb-dead{left:52%!important}
  .bands::before,.bands::after{width:44px}
  .foot-top{grid-template-columns:1fr;gap:28px}
  section[id],#top{scroll-margin-top:70px}

  .dispatch{font-size:11px}
  .dispatch .wrap{flex-wrap:nowrap;overflow-x:auto;gap:12px;scrollbar-width:none;-ms-overflow-style:none}
  .dispatch .wrap::-webkit-scrollbar{display:none}
  .dispatch .wrap>*{flex:none;white-space:nowrap}

  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--urg);color:#fff;
    text-decoration:none;align-items:center;justify-content:center;gap:10px;padding:15px;
    font-family:var(--red-f);font-weight:700;font-size:17px;box-shadow:0 -6px 24px rgba(0,0,0,.3);
  }
  /* Le bouton téléphone poussait la barre hors de l'écran :
     logo et bouton se resserrent, le chevron disparaît. */
  .nav .wrap{gap:10px}
  .mark{height:38px}
  .wordmark{height:29px}
  .langsw{padding:7px 9px;font-size:11px}
  .navtel{padding:10px 13px;font-size:13.5px;gap:7px}
  .navtel .chev{display:none}

  .telmenu{
    left:auto;right:0;transform:translateY(-6px);
    min-width:0;width:max-content;max-width:calc(100vw - 32px);
  }
  .telmenu.on{transform:translateY(0)}
  .telmenu small{white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rail{animation:none}
  .zap::after{animation:none}
  .hero-f,.vil-f,.bolt-f,.pulse{animation:none}
  .edge,.spark{animation:none}
  .spark{display:none}
}