/* ============================================================
   ALXCOMM — Landing villes (SEO local)
   CSS porté de la maquette agence-web-bar-le-duc.html
   Version intégrée au thème : header/footer Astra-Kadence conservés.
   Scope .alx-lv-main : classe portée par le <main> du template,
   aucune dépendance au body ni au thème.
   ============================================================ */

:root{
  --primary:#7C3AED;
  --accent:#F59E0B;
  --grad-1:#7C3AED;
  --grad-2:#EC4899;
  --grad-3:#3B82F6;
  --dark:#1F2937;
  --darker:#111827;
  --light:#F3F4F6;
  --text:#374151;
  --text-2:#6B7280;
  --border:#E5E7EB;
  --card:#ffffff;
  --success:#10B981;
  --radius:16px;
  --shadow:0 10px 30px rgba(31,41,55,.08);
  --shadow-lift:0 18px 44px rgba(124,58,237,.18);
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
}

.alx-lv-main{margin:0;padding:0;font-family:var(--font-body);color:var(--text);background:#fff;line-height:1.65;font-size:16px}
.alx-lv-main *{box-sizing:border-box}
html{scroll-behavior:smooth}
.alx-lv-main img{max-width:100%;display:block}
.alx-lv-main a{color:var(--primary);text-decoration:none}
.alx-lv-main h1,.alx-lv-main h2,.alx-lv-main h3{font-family:var(--font-display);color:var(--dark);line-height:1.2;margin:0}
.alx-lv-main h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:.6rem}
.alx-lv-main p{margin:0 0 1em}
.alx-lv-main ul{margin:0;padding:0}

.alx-lv-main .section{padding:88px 24px}
.alx-lv-main .section-light{background:var(--light)}
.alx-lv-main .wrap{max-width:1100px;margin:0 auto}
.alx-lv-main .wrap-narrow{max-width:780px}
.alx-lv-main .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.alx-lv-main .eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--grad-1),var(--grad-2))}
.alx-lv-main .lead{color:var(--text-2);max-width:640px}
.alx-lv-main .lead-spaced{margin-top:10px}
.alx-lv-main .grad-text{background:linear-gradient(90deg,var(--grad-1),var(--grad-2),var(--grad-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.alx-lv-main .btn{display:inline-block;padding:15px 30px;border-radius:50px;font-weight:600;font-family:var(--font-display);transition:transform .25s ease,box-shadow .25s ease}
.alx-lv-main .btn-primary{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));color:#fff;box-shadow:0 8px 22px rgba(124,58,237,.35)}
.alx-lv-main .btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.alx-lv-main .btn-ghost{border:2px solid var(--border);color:var(--dark)}
.alx-lv-main .btn-ghost:hover{border-color:var(--primary);color:var(--primary)}

/* ============ Hero ============ */
.alx-lv-main .hero{position:relative;overflow:hidden;background:var(--darker);color:#fff;padding:110px 24px 120px}
.alx-lv-main .hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 15% 20%,rgba(124,58,237,.35),transparent 60%),
  radial-gradient(500px 380px at 85% 80%,rgba(236,72,153,.25),transparent 60%),
  radial-gradient(420px 320px at 70% 10%,rgba(59,130,246,.2),transparent 60%)}
.alx-lv-main .hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.alx-lv-main .hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);margin:18px 0 20px}
.alx-lv-main .hero p{color:#C7CBD4;font-size:1.08rem;max-width:540px}
.alx-lv-main .hero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:8px 16px;border-radius:50px;font-size:.85rem}
.alx-lv-main .hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,.25);animation:alx-pulse 2s infinite}
@keyframes alx-pulse{50%{box-shadow:0 0 0 8px rgba(16,185,129,.08)}}
.alx-lv-main .hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.alx-lv-main .hero .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}

/* Carte "repères locaux" */
.alx-lv-main .local-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:28px;backdrop-filter:blur(8px)}
.alx-lv-main .local-card h3{color:#fff;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.alx-lv-main .local-stat{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.15)}
.alx-lv-main .local-stat:last-child{border-bottom:none}
.alx-lv-main .local-stat b{font-family:var(--font-display);font-size:1.15rem;color:#fff}
.alx-lv-main .local-stat span{color:#9CA3AF;font-size:.88rem}
@media(max-width:820px){.alx-lv-main .hero .wrap{grid-template-columns:1fr}}

/* ============ Services ============ */
.alx-lv-main .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){.alx-lv-main .grid-3{grid-template-columns:1fr}}
.alx-lv-main .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.alx-lv-main .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(124,58,237,.4)}
.alx-lv-main .card .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(236,72,153,.12));margin-bottom:18px}
.alx-lv-main .card h3{font-size:1.12rem;margin-bottom:10px}
.alx-lv-main .card p{color:var(--text-2);font-size:.95rem}
.alx-lv-main .card ul{list-style:none;margin-top:14px}
.alx-lv-main .card ul li{padding:5px 0 5px 24px;position:relative;font-size:.92rem;color:var(--text)}
.alx-lv-main .card ul li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}

/* ============ Ancrage local ============ */
.alx-lv-main .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.alx-lv-main .split{grid-template-columns:1fr}}
.alx-lv-main .check-list{list-style:none;margin-top:22px}
.alx-lv-main .check-list li{padding:10px 0 10px 34px;position:relative}
.alx-lv-main .check-list li::before{content:"→";position:absolute;left:0;top:10px;font-weight:700;background:linear-gradient(90deg,var(--grad-1),var(--grad-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.alx-lv-main .map-visual{background:var(--darker);border-radius:var(--radius);padding:36px;color:#fff;position:relative;overflow:hidden}
.alx-lv-main .map-visual::before{content:"55";position:absolute;right:-20px;bottom:-42px;font-family:var(--font-display);font-size:11rem;font-weight:800;color:rgba(124,58,237,.18);line-height:1}
.alx-lv-main .map-visual h3{color:#fff;margin-bottom:8px}
.alx-lv-main .map-visual p{color:#9CA3AF;font-size:.92rem;margin-bottom:20px}
.alx-lv-main .zone-tags{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.alx-lv-main .zone-tags a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#E5E7EB;padding:8px 16px;border-radius:50px;font-size:.86rem;transition:all .2s}
.alx-lv-main .zone-tags a:hover{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));border-color:transparent;color:#fff}

/* ============ Process ============ */
.alx-lv-main .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.alx-lv-main .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.alx-lv-main .steps{grid-template-columns:1fr}}
.alx-lv-main .step{padding:26px;border-radius:var(--radius);background:var(--light)}
.alx-lv-main .section-light .step{background:#fff}
.alx-lv-main .step b{display:block;font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;color:var(--primary);margin-bottom:10px}
.alx-lv-main .step h3{font-size:1.02rem;margin-bottom:8px}
.alx-lv-main .step p{font-size:.9rem;color:var(--text-2);margin:0}

/* ============ FAQ ============ */
.alx-lv-main .faq-list{margin-top:32px}
.alx-lv-main details{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.alx-lv-main details summary{cursor:pointer;padding:18px 22px;font-weight:600;font-family:var(--font-display);font-size:.98rem;color:var(--dark);list-style:none;position:relative}
.alx-lv-main details summary::-webkit-details-marker{display:none}
.alx-lv-main details summary::after{content:"+";position:absolute;right:22px;font-size:1.3rem;color:var(--primary);transition:transform .25s}
.alx-lv-main details[open] summary::after{transform:rotate(45deg)}
.alx-lv-main details p{padding:0 22px 20px;color:var(--text-2);font-size:.95rem;margin:0}

/* ============ CTA final ============ */
.alx-lv-main .cta-final{background:linear-gradient(120deg,var(--grad-1),var(--grad-2) 55%,var(--grad-3));border-radius:24px;padding:64px 40px;text-align:center;color:#fff}
.alx-lv-main .cta-final h2{color:#fff}
.alx-lv-main .cta-final p{color:rgba(255,255,255,.85);max-width:560px;margin:12px auto 30px}
.alx-lv-main .cta-final .btn{background:#fff;color:var(--primary)}
.alx-lv-main .cta-tel{margin:22px auto 0 !important;font-size:.95rem}
.alx-lv-main .cta-tel a{color:#fff;font-weight:700;text-decoration:underline}

/* Révélations au scroll */
.alx-lv-main .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.alx-lv-main .reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.alx-lv-main .reveal{opacity:1;transform:none;transition:none}}


/* ============ Intégration thème (header/footer du site conservés) ============
   Les sections à fond pleine largeur (hero sombre, sections grises) doivent
   déborder du conteneur du thème : technique full-bleed 100vw. */
/* Le clip anti-scrollbar va sur html/body : posé sur .alx-lv-main il
   rognait le débordement 100vw de ses propres sections (bug corrigé). */
html:has(.alx-lv-main),
body:has(.alx-lv-main){overflow-x:clip}

/* Libérer tous les conteneurs du thème entre body et notre main :
   un overflow hidden hérité (Astra/Kadence) couperait le full-bleed. */
body *:has(.alx-lv-main){overflow:visible}

/* ASTRA : #content > .ast-container est en display:flex, ce qui fait
   rétrécir le <main> (enfant flex) à la largeur de son contenu (~1148px)
   au lieu de la pleine largeur. Diagnostic confirmé sur le site le
   2026-07-10. On force le main à occuper toute la largeur et on repasse
   le conteneur en block, sans padding latéral. */
.alx-lv-main{width:100%;flex:1 1 100%}
#content > .ast-container:has(.alx-lv-main){display:block;padding-left:0;padding-right:0;max-width:100%}

/* Sections à fond pleine largeur : débordement viewport */
.alx-lv-main .hero,
.alx-lv-main .section-light{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* Neutraliser les marges/paddings que le thème pourrait imposer au contenu */
.alx-lv-main{margin:0;padding:0}
.alx-lv-main > .section:first-child{margin-top:0}

/* Bouton blanc du CTA final */
.alx-lv-main .btn-cta{background:#fff;color:var(--primary)}
.alx-lv-main .btn-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.25)}

/* Bloc maillage villes (remplace le footer custom, au-dessus du footer du thème) */
.alx-lv-main .villes-liees{padding-top:0;padding-bottom:64px}
.alx-lv-main .villes-liees-titre{font-size:1.15rem;margin-bottom:18px;color:var(--text-2)}
.alx-lv-main .zone-tags-light a{background:var(--light);border:1px solid var(--border);color:var(--text)}
.alx-lv-main .zone-tags-light a:hover{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));border-color:transparent;color:#fff}