/* Installation Borne Électrique : styles */
/* Direction: Blackout Voltage : near-black surfaces throughout, one neon
   high-voltage accent (#D7FF3F) carrying every interactive/action role, bold
   industrial sans headlines, big confident stat numbers. Deliberate break
   from the pastel two-tone look used elsewhere in this portfolio. No white
   surfaces, no soft gradient blobs, no glassmorphism, no pill buttons except
   chips/badges. See DESIGN.md for the full rationale and the WCAG contrast
   table (every text/background pair below was checked with a Node script,
   not eyeballed). */
:root{
  --bg:#0A0B0D;
  --surface:#16181C;
  --surface-2:#1D2024;
  --card:var(--surface);
  --accent:#D7FF3F;
  --accent-dim:#C2E639;
  --accent-ink:#0A0B0D;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.20);
  --text:#F2F3F0;
  --text-muted:#A7ADB8;
  --text-disabled:#848A96;
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:20px;
  --shadow:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --max:1180px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font-display:"Space Grotesk","Manrope","Segoe UI",-apple-system,sans-serif;
  --font-body:"Manrope","Segoe UI",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:hover{color:var(--accent-dim)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.shell{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em;font-weight:700;color:var(--text);text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,2.2vw,1.9rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
h2:not(:first-child),h3:not(:first-child){margin-top:2.6em}
p{margin:0 0 1em;max-width:68ch;color:var(--text)}
ul{margin:0 0 1em;padding-left:1.2em}
.section{padding:60px 0}
.block-tight{padding:32px 0}
.subtle{color:var(--text-muted)}
.small{font-size:.88rem}

/* Reveal-on-scroll: one authored entrance, not per-element hover effects */
.fade-in{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fade-in.visible-now{opacity:1;transform:none}
.fade-in-group .fade-in:nth-child(2){transition-delay:.06s}
.fade-in-group .fade-in:nth-child(3){transition-delay:.12s}
.fade-in-group .fade-in:nth-child(4){transition-delay:.18s}
.fade-in-group .fade-in:nth-child(5){transition-delay:.24s}
.fade-in-group .fade-in:nth-child(6){transition-delay:.3s}

/* Header : dark, sticky, hairline border */
.top-bar{background:rgba(10,11,13,.92);backdrop-filter:saturate(180%) blur(6px);-webkit-backdrop-filter:saturate(180%) blur(6px);color:var(--text);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.top-bar .shell{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand-mark{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;flex:1 1 auto;min-width:0}
.brand-mark .mark-icon{width:36px;height:36px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow)}
.brand-mark .mark-icon svg{width:19px;height:19px;color:var(--accent-ink)}
.brand-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text)}
.brand-label-short{display:none}
.action-label-short{display:none}
/* Espacement du menu desktop : gap explicite sur .main-nav ET .nav-links,
   présent AVANT le bloc @media mobile pour que l'override mobile continue à
   gagner (piège récurrent du gabarit sinon les liens sont collés). */
.main-nav,.primary-nav{display:flex;align-items:center;gap:20px;flex:none;justify-content:flex-end;min-width:0}
.nav-links,.nav-menu{display:flex;align-items:center;gap:26px}
.main-nav a,.primary-nav a{color:var(--text-muted);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .15s;white-space:nowrap}
.main-nav a:hover,.primary-nav a:hover{color:var(--accent)}
.top-search{position:relative;width:clamp(150px,16vw,230px);flex:none}
.top-search input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 14px 9px 36px;border-radius:var(--radius-sm);font-size:.86rem;font-family:var(--font-body);transition:background .15s,border-color .15s}
.top-search input::placeholder{color:var(--text-disabled)}
.top-search input:focus{background:var(--surface-2);border-color:var(--accent);outline:none}
.top-search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.top-search .quick-search-results{color:var(--text);top:calc(100% + 10px)}
.top-action{background:var(--accent);color:var(--accent-ink)!important;padding:11px 22px;border-radius:var(--radius-sm);font-weight:700;font-size:.88rem!important;white-space:nowrap;box-shadow:var(--shadow-md);transition:background .15s,transform .15s;flex-shrink:0}
.top-action:hover{background:var(--accent-dim);transform:translateY(-1px)}
.nav-trigger{display:none;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px;cursor:pointer;align-items:center;justify-content:center;flex:none;flex-shrink:0}
.nav-trigger svg{width:20px;height:20px}
@media (max-width:780px){
  .main-nav,.primary-nav{gap:10px}
  .top-action{padding:9px 16px;font-size:.82rem!important}
}
@media (max-width:480px){
  .brand-label-full{display:none}
  .brand-label-short{display:inline}
  .action-label-full{display:none}
  .action-label-short{display:inline}
  .top-action{padding:9px 13px}
}
@media (max-width:340px){
  .top-bar .shell{gap:10px}
  .brand-mark{font-size:.94rem;gap:8px}
  .brand-mark .mark-icon{width:30px;height:30px}
  .main-nav,.primary-nav{gap:6px}
  .nav-trigger{padding:6px}
}
@media (max-width:780px){
  .nav-links,.nav-menu{position:absolute;top:72px;left:0;right:0;background:var(--surface);flex-direction:column;align-items:stretch;padding:14px 20px 20px;display:none;gap:6px;box-shadow:var(--shadow-lg);border-bottom:1px solid var(--border)}
  .nav-links a,.nav-menu a{padding:10px 2px;border-bottom:1px solid var(--border);color:var(--text-muted)}
  .nav-links a:hover,.nav-menu a:hover{color:var(--text)}
  .nav-links.open,.nav-menu.open{display:flex}
  .nav-trigger{display:inline-flex;align-items:center;justify-content:center}
  .nav-menu .top-search{display:block;width:100%;margin-bottom:4px;order:-1}
  .nav-menu .top-search input{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--text)}
  .nav-menu .top-search input::placeholder{color:var(--text-disabled)}
  .nav-menu .search-icon{color:var(--text-muted)}
}

/* Hero */
.intro{
  background:
    radial-gradient(760px 460px at 10% -15%,rgba(215,255,63,.06),transparent 62%),
    radial-gradient(680px 420px at 95% 0%,rgba(255,255,255,.03),transparent 60%),
    var(--bg);
  color:var(--text);padding:68px 0 74px;position:relative;overflow:hidden;
}
.intro .shell{position:relative}
.intro h1{color:var(--text);max-width:780px}
.intro p.lead{color:var(--text-muted);max-width:620px;font-size:1.1rem}
.intro-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.intro-grid .intro-copy{min-width:0}
.intro-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;border:1px solid var(--border)}
.intro-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr}.intro-media{order:-1;aspect-ratio:16/9}}

/* Photos éditoriales (licence commerciale libre, sans attribution requise)
   intégrées dans les sections de contenu : cartes arrondies avec bordure fine, cohérentes avec
   la DA sombre (pas d'ombre claire, un simple liseré). */
.media-panel{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border)}
.media-panel img{width:100%;height:100%;object-fit:cover;display:block}
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:34px}
.media-row .media-panel{aspect-ratio:4/3}
@media (max-width:900px){.media-row{grid-template-columns:1fr}.media-row .media-panel{order:-1}}
.page-banner-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-top:28px;aspect-ratio:21/9;border:1px solid var(--border)}
.page-banner-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.page-banner-media{aspect-ratio:16/10}}
/* Image verticale insérée dans une colonne de contenu (pages ville), pour
   casser une longue colonne de texte sans reproduire le bandeau pleine
   largeur .page-banner-media. */
.media-panel-tall{aspect-ratio:4/5;margin:0 0 1.6em;max-width:480px}
@media (max-width:560px){.media-panel-tall{aspect-ratio:4/3;max-width:none}}

/* Carte Google Maps (iframe gratuite, sans clé API) : section dédiée sur
   chaque page ville, voir entity-render.js. Même cadre visuel que les autres
   panneaux média (bordure fine, coins arrondis), loading=lazy dans le HTML. */
.city-map-frame{width:100%;height:320px;border:0;border-radius:var(--radius);display:block}
.city-map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}

.quick-search{margin-top:32px;max-width:580px;position:relative}
.quick-search input{width:100%;padding:17px 58px 17px 22px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;box-shadow:var(--shadow-lg);font-family:var(--font-body)}
.quick-search input::placeholder{color:var(--text-disabled)}
.quick-search input:focus{outline:none;border-color:var(--accent)}
.quick-search button{position:absolute;right:6px;top:6px;bottom:6px;background:var(--accent);border:none;color:var(--accent-ink);border-radius:calc(var(--radius-sm) - 2px);padding:0 20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.quick-search button:hover{background:var(--accent-dim)}
.quick-search button svg{width:19px;height:19px}
.quick-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:340px;overflow-y:auto;z-index:40;display:none;color:var(--text);border:1px solid var(--border)}
.quick-search-results.is-active{display:block}
.quick-search-results a{display:block;padding:12px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);font-size:.94rem;font-weight:500}
.quick-search-results a:hover{background:var(--surface-2);color:var(--accent)}
.quick-search-results .hint-label{padding:12px 16px;color:var(--text-muted);font-size:.88rem}

/* Buttons : sharp-ish rectangular shape, never pill except chips/badges */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;text-decoration:none;font-size:.98rem;border:none;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s,border-color .15s,color .15s}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--accent-dim);box-shadow:var(--shadow-lg);color:var(--accent-ink)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border-strong)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}
.btn-lg{padding:18px 32px;font-size:1.05rem;border-radius:var(--radius)}

/* Sticky CTA bar : city pages only, appears once the intro has scrolled past */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.5);padding:14px 20px;transform:translateY(120%);transition:transform .3s var(--ease)}
.bottom-bar.is-active{transform:translateY(0)}
.bottom-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bottom-bar-inner p{margin:0;font-weight:700;color:var(--text);font-size:.95rem}
.bottom-bar-actions{display:flex;align-items:center;gap:4px;flex:none}
.bottom-bar-actions .btn{padding:11px 22px;font-size:.9rem}
.bottom-bar-arrow,.sticky-cta-arrow{display:inline-flex;animation:sticky-arrow-nudge 1.3s ease-in-out infinite}
.bottom-bar-arrow svg,.sticky-cta-arrow svg{width:15px;height:15px;display:block}
@keyframes sticky-arrow-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.bottom-bar-close{background:transparent;border:none;color:var(--text-muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:6px 10px}
.bottom-bar-close:hover{color:var(--text)}
@media (max-width:560px){.bottom-bar-inner p{font-size:.85rem}}

/* Trust bar : big confident numbers, the DA's signature stat treatment */
.stat-bar{background:var(--surface);border-bottom:1px solid var(--border);border-top:1px solid var(--border);position:relative}
.stat-bar .shell{display:flex;flex-wrap:wrap;gap:28px;padding:26px 20px;justify-content:space-between}
.stat-item{text-align:center;flex:1;min-width:130px}
.stat-item b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-item span{font-size:.74rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* Cards / grids */
.mesh,.grid-4,.grid-3,.grid-6{display:grid;gap:18px}
.mesh-2{grid-template-columns:repeat(2,1fr)}
.mesh-3,.grid-3{grid-template-columns:repeat(3,1fr)}
.mesh-4,.grid-4{grid-template-columns:repeat(4,1fr)}
.mesh-6,.grid-6{grid-template-columns:repeat(6,1fr)}
/* .mesh-4/.grid-4 bascule à 2 colonnes plus tôt (1040px) que .mesh-3/.grid-3
   (900px) : à 4 colonnes égales, les cartes deviennent trop étroites (texte
   sur 3 lignes, padding qui mange presque toute la largeur utile) bien avant
   le seuil tablette habituel, en particulier sur une fenêtre de bureau non
   maximisée. */
@media (max-width:1040px){.mesh-4,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.mesh-3,.grid-3{grid-template-columns:repeat(2,1fr)}.mesh-6,.grid-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.mesh-2{grid-template-columns:1fr}}
@media (max-width:560px){.mesh-3,.mesh-4,.mesh-6,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr 1fr}}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.panel h3{margin-bottom:8px}
.link-panel{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;font-weight:700;transition:border-color .15s,box-shadow .15s,transform .15s}
.link-panel:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.link-panel .count-label{display:block;font-weight:500;color:var(--text-muted);font-size:.82rem;margin-top:2px}

.icon-tile{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.icon-tile svg{width:21px;height:21px}

/* Breadcrumbs */
.crumb-trail{font-size:.8rem;color:var(--text-muted);padding:16px 0;font-weight:600}
.crumb-trail a{color:var(--text-muted);text-decoration:none}
.crumb-trail a:hover{color:var(--accent)}
.crumb-trail .crumb-sep{margin:0 6px;opacity:.5}

/* Page intro (dept/city/region) */
.page-banner{background:radial-gradient(650px 320px at 12% 0%,rgba(215,255,63,.05),transparent 60%),var(--bg);border-bottom:1px solid var(--border)}
.page-banner .shell{padding:30px 20px 38px}
.intro-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* CTA block */
.promo-block{background:linear-gradient(135deg,var(--surface) 0%,var(--bg) 100%);color:var(--text);border-radius:var(--radius-lg);padding:40px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;border:1px solid var(--border)}
.promo-block::after{content:"";position:absolute;inset:0;background:radial-gradient(460px 240px at 85% 0%,rgba(215,255,63,.14),transparent 60%);pointer-events:none}
.promo-block h2{color:var(--text);position:relative}
.promo-block p{color:var(--text-muted);max-width:560px;margin-left:auto;margin-right:auto;position:relative}
.promo-block .btn{position:relative}
.promo-block .btn-primary{background:var(--accent);color:var(--accent-ink)}
.promo-block .btn-primary:hover{background:var(--accent-dim)}
.promo-block-inline{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:22px 26px;flex-wrap:wrap}
.promo-block-inline p{margin:0;font-weight:700;color:var(--text);font-family:var(--font-display)}

/* Formulaire de devis partenaire : placé sous le intro, c'est le point de
   conversion le plus visible de la page ville */
.lead-form-panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:36px;text-align:center;box-shadow:var(--shadow-md)}
.lead-form-panel h2{color:var(--accent);margin-bottom:.4em}
.lead-form-panel p{max-width:560px;margin:0 auto 1em}
.lead-form-panel > div[id]{margin-top:8px;text-align:left}

/* Widget partenaire ViteUnDevis (/devis/, div#vc2dd835c33d) : le script
   tiers affiche son propre encart sur un fond blanc mais ne fixe pas la
   couleur de tout son texte, qui hérite alors du texte blanc cassé de notre
   DA sombre (var(--text)) et devient quasi illisible sur ce fond clair
   (repéré par capture d'écran : titre, intro et libellés de boutons d'étape
   presque invisibles, seuls les liens et le rond d'étape actif restaient
   lisibles). On neutralise l'héritage uniquement dans ce conteneur précis,
   jamais ailleurs sur le site, et on l'habille d'un cadre + une ombre pour
   qu'un rectangle blanc ne tranche pas trop brutalement sur le reste de la
   page sombre. Un style inline éventuellement posé par le widget garde de
   toute façon la priorité sur cette règle non "!important".  */
#vc2dd835c33d{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);border:1px solid var(--border);overflow:hidden}
#vc2dd835c33d, #vc2dd835c33d *{color:#1a1a1a}

/* Carte de devis "intro" : version centrée avec médaillon et garanties,
   utilisée sur /devis/ pour que le formulaire soit le point focal immédiat
   de la page (pas de faux avis/notes/pourcentages : uniquement des garanties
   vérifiables, voir PRODUCT.md). */
.lead-form-panel-hero{max-width:600px;margin:0 auto;padding:40px 36px}
.lead-form-icon{width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:var(--shadow-md)}
.lead-form-icon svg{width:28px;height:28px}
.lead-form-checks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.lead-form-checks li{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--text-muted);font-weight:700}
.lead-form-checks .check-mark{color:var(--accent);flex:none;width:16px;height:16px}

/* Aides (Advenir, TVA) : bandeau France uniquement, aucun montant inventé
   au-delà des critères d'éligibilité officiellement publiés, voir PRODUCT.md */
.perks-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 34px;margin:0 0 1em;box-shadow:var(--shadow)}
.perks-strip-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.perks-strip-head .perks-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.perks-strip-head .perks-icon svg{width:20px;height:20px}
.perks-strip-head h2{margin:0;font-size:1.25rem;color:var(--accent)}
.perks-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.perks-cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.perks-cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.perks-cols{grid-template-columns:1fr}}
@media (max-width:560px){.perks-cols-4{grid-template-columns:1fr}}
.perks-entry{display:flex;gap:14px;align-items:flex-start}
.perks-entry .perks-entry-icon{width:36px;height:36px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.perks-entry .perks-entry-icon svg{width:17px;height:17px}
.perks-entry h3{margin:0 0 4px;font-size:.98rem;color:var(--text);font-weight:700}
.perks-entry p{margin:0;font-size:.88rem;color:var(--text-muted)}
.perks-strip .perks-note{margin:18px 0 0;font-size:.8rem;color:var(--text-muted);font-weight:600}

/* Companies widget (SIRENE, France uniquement) */
.pros-list{margin-top:10px}
.company-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 22px;margin-bottom:12px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;transition:box-shadow .15s,border-color .15s}
.company-panel:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.company-panel h3{margin:0 0 4px;font-size:1rem;color:var(--text)}
.company-panel .pro-addr{color:var(--text-muted);font-size:.88rem;margin:0}
.tag{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--accent);letter-spacing:.03em;margin-left:8px;vertical-align:middle;text-transform:uppercase;border:1px solid var(--border)}
.tag-dark{background:var(--surface-2);color:var(--text-muted)}
.pros-state{padding:26px;text-align:center;color:var(--text-muted);border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface)}
.pros-state.loading::before{content:"";display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.pro-action{flex:none}
.pro-action a{font-size:.85rem;padding:10px 18px}
.data-note{font-size:.76rem;color:var(--text-muted);margin-top:10px}

/* FAQ */
.questions-panel{max-width:760px}
.questions details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 22px;margin-bottom:10px;transition:border-color .15s}
.questions details[open]{border-color:var(--accent)}
.questions summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--text)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:400;flex:none;transition:transform .2s}
.questions details[open] summary::after{content:"−"}
.questions p{margin:12px 0 0;color:var(--text-muted)}

/* Steps */
.process-steps{counter-reset:step;position:relative}
.process-steps::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1.5px;background:var(--border)}
.process-step{position:relative;padding-left:58px;margin-bottom:26px}
.process-step:last-child{margin-bottom:0}
.process-step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:var(--shadow-md);z-index:1}

/* Neighbors / mesh links */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface);border:1px solid var(--border);padding:7px 14px;border-radius:999px;font-size:.85rem;text-decoration:none;color:var(--text);transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}

/* Footer */
.site-base{background:var(--surface);color:var(--text-muted);margin-top:44px;border-top:1px solid var(--border)}
.base-trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.base-trust .shell{display:flex;flex-wrap:wrap;gap:14px 28px;padding:20px;align-items:center;justify-content:center}
.base-trust-item{display:flex;align-items:center;gap:9px;color:var(--text-muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.base-trust-item svg{width:17px;height:17px;color:var(--accent);flex:none}
.site-base .shell{padding:46px 20px 28px}
.base-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media (max-width:800px){.base-grid{grid-template-columns:1fr 1fr}}
.base-heading{color:var(--text);font-family:var(--font-display);font-size:.92rem;font-weight:700;margin:0 0 12px}
.site-base a{color:var(--text-muted);text-decoration:none;font-size:.88rem;display:block;margin-bottom:8px;transition:color .15s}
.site-base a:hover{color:var(--accent)}
.base-bottom{border-top:1px solid var(--border);margin-top:28px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem;color:var(--text-disabled)}

/* Region mesh on home */
.area-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;text-decoration:none;color:var(--text);font-weight:700;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,box-shadow .15s,transform .15s}
.area-tile span{font-weight:500;color:var(--text-muted);font-size:.8rem}
.area-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Popular cities row */
.town-pill-row{display:flex;flex-wrap:wrap;gap:10px}
.town-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 18px 10px 12px;text-decoration:none;color:var(--text);font-weight:600;font-size:.9rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.town-pill:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.town-pill .pill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* A-Z dept city list */
.alpha-list{columns:3;column-gap:26px}
@media (max-width:700px){.alpha-list{columns:2}}
.alpha-list a{display:block;text-decoration:none;color:var(--text);font-size:.9rem;padding:5px 0;break-inside:avoid}
.alpha-list a:hover{color:var(--accent)}
.locality-filter{width:100%;padding:14px 18px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);font-size:.95rem;margin-bottom:18px;font-family:var(--font-body);transition:border-color .15s}
.locality-filter::placeholder{color:var(--text-disabled)}
.locality-filter:focus{border-color:var(--accent);outline:none}

table.simple{width:100%;border-collapse:collapse;margin:0 0 1em}
table.simple th,table.simple td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);font-size:.88rem;font-variant-numeric:tabular-nums}
table.simple th{color:var(--text-muted);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
table.simple td{color:var(--text);font-weight:600}

.split-layout{display:grid;grid-template-columns:2fr 1fr;gap:34px}
@media (max-width:900px){.split-layout{grid-template-columns:1fr}}
.side-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.side-panel h3{margin-bottom:10px;font-size:1rem;color:var(--text)}

/* Trust proof section (real, verifiable signals : no fabricated reviews) */
.proof-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.proof-cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.proof-cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.proof-cols,.proof-cols-3{grid-template-columns:1fr}}
.proof-entry{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:19px 21px;box-shadow:var(--shadow)}
.proof-entry .proof-mark{width:38px;height:38px;border-radius:9px;background:var(--surface-2);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.proof-entry .proof-mark.proof-mark-dark{background:var(--surface-2);color:var(--text-muted)}
.proof-entry .proof-mark svg{width:18px;height:18px}
.proof-entry h3{margin:0 0 3px;font-size:.94rem;color:var(--text);font-weight:700}
.proof-entry p{margin:0;font-size:.85rem;color:var(--text-muted)}

/* Modale exit-intent : proposée au visiteur qui s'apprête à quitter le site
   (desktop uniquement, une fois par session). Reprend le dégradé sombre et
   l'accent néon, pour rester dans l'identité du site. */
.leave-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.leave-overlay.is-active{display:flex}
.leave-modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:760px;width:100%;display:grid;grid-template-columns:1fr 1.4fr;overflow:hidden;position:relative;animation:exit-modal-in .25s var(--ease);border:1px solid var(--border)}
@keyframes exit-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.leave-modal-side{background:linear-gradient(135deg,var(--surface-2) 0%,var(--bg) 100%);color:var(--text);padding:34px 28px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.leave-modal-side::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 90% 100%,rgba(215,255,63,.16),transparent 60%);pointer-events:none}
.leave-modal-side strong{display:block;font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--accent);line-height:1;position:relative}
.leave-modal-side>span{display:block;margin-top:8px;color:var(--text-muted);font-weight:600;font-size:.95rem;position:relative}
.leave-modal-side-list{list-style:none;padding:20px 0 0;margin:20px 0 0;border-top:1px solid var(--border);position:relative}
.leave-modal-side-list li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.86rem;color:var(--text);margin-bottom:11px}
.leave-modal-side-list li:last-child{margin-bottom:0}
.leave-modal-side-list svg{width:15px;height:15px;color:var(--accent);flex:none}
.leave-modal-main{padding:34px 32px;position:relative}
.leave-modal-eyebrow{display:inline-block;background:var(--surface-2);color:var(--text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.leave-modal-main h2{font-size:1.45rem;margin-bottom:.5em}
.leave-modal-highlight{color:var(--accent)}
.leave-modal-main p{color:var(--text-muted);margin-bottom:1.2em;max-width:44ch}
.leave-modal-checks{list-style:none;padding:0;margin:0 0 22px}
.leave-modal-checks li{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.92rem;margin-bottom:9px;color:var(--text)}
.leave-modal-checks svg{width:16px;height:16px;color:var(--accent);flex:none}
.leave-modal-dismiss{display:block;text-align:center;margin-top:14px;font-size:.85rem;color:var(--text-muted);text-decoration:underline;cursor:pointer;background:none;border:none;width:100%;font-family:var(--font-body)}
.leave-modal-dismiss:hover{color:var(--text)}
.leave-modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);z-index:1}
.leave-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.leave-modal-close svg{width:16px;height:16px}
@media (max-width:700px){.leave-modal{grid-template-columns:1fr}.leave-modal-side{display:none}}