/* ---------- TOKENS ---------- */
:root{
  --bg: #F2EFE8;
  --bg-2: #E8E4DA;
  --ink: #0F0F0F;
  --ink-2: #3A3A3A;
  --ink-3: #8A857C;
  --line: #DCD7CC;
  --line-2: #C7C2B6;
  --accent: #06B6D4;
  --accent-ink: #0369A1;
  --accent-soft: #CFFAFE;
  --hot: #06B6D4;
  --hot-soft: #CFFAFE;
  --ok: #06B6D4;
  --paper: #FFFFFF;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 1px 0 rgba(15,15,15,.04), 0 8px 24px -12px rgba(15,15,15,.12);
  --serif: 'Archivo','Inter',system-ui,sans-serif;
  --display: 'Archivo','Inter',system-ui,sans-serif;
  --italic: 'Fraunces',serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
:root{
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 1px 0 rgba(11,17,32,.04), 0 8px 24px -12px rgba(11,17,32,.12);
  --serif: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:9999;pointer-events:none}
.scroll-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--ink) 0%,var(--accent) 100%);transition:width .12s ease-out;box-shadow:0 0 8px rgba(6,182,212,.4)}
/* ---------- SECTION DOTS ---------- */
.section-nav{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;gap:18px;opacity:0;transition:opacity .35s ease;pointer-events:none}
.section-nav.visible{opacity:1;pointer-events:auto}
.section-dot{display:flex;align-items:center;gap:14px;cursor:pointer;background:none;border:none;padding:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:color .25s ease}
.section-dot-label{opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.section-dot:hover .section-dot-label,.section-dot.active .section-dot-label{opacity:1;transform:translateX(0)}
.section-dot-mark{width:10px;height:10px;border-radius:50%;background:transparent;border:1.5px solid var(--ink-3);transition:all .25s ease;flex-shrink:0;position:relative}
.section-dot-mark::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;transform:scale(.6);transition:all .3s ease}
.section-dot:hover .section-dot-mark{border-color:var(--ink);transform:scale(1.2)}
.section-dot:hover{color:var(--ink-2)}
.section-dot.active .section-dot-mark{background:var(--ink);border-color:var(--ink);transform:scale(1.15)}
.section-dot.active .section-dot-mark::after{opacity:1;transform:scale(1);border-color:var(--accent)}
.section-dot.active{color:var(--ink)}
@media (max-width:1100px){.section-nav{display:none}}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;outline:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ok);box-shadow:0 0 0 3px var(--accent-soft)}
a{color:inherit;text-decoration:none}

/* ---------- SHELL ---------- */
.page{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- NAV ---------- */
.nav{position:sticky;top:14px;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 10px;padding:11px 12px 11px 24px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -12px rgba(15,15,15,.18),0 0 0 1px rgba(15,15,15,.04);transition:padding .25s ease,box-shadow .25s ease,background .25s ease}
.nav.scrolled{padding-top:8px;padding-bottom:8px;background:rgba(255,255,255,.8);box-shadow:0 12px 34px -12px rgba(15,15,15,.26),0 0 0 1px rgba(15,15,15,.05)}
.nav-logo{display:inline-flex;align-items:baseline;cursor:pointer;line-height:1;font-size:30px;letter-spacing:-.04em;user-select:none}
.nav-logo .v-archivo{font-family:'Archivo',sans-serif;font-weight:900;color:var(--ink);letter-spacing:-.045em}
.nav-logo .v-archivo .v-stop{color:var(--ink);margin-left:-.02em}
.nav-logo .v-fraunces{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--ink);letter-spacing:-.025em;margin-left:-.05em;font-variation-settings:"opsz" 144}
.nav-logo:hover .v-fraunces{color:var(--accent);transition:color .25s ease}
/* footer logo inverts colors */
.footer-logo{display:inline-flex;align-items:baseline;line-height:1;font-size:32px;letter-spacing:-.04em;margin-bottom:14px}
.footer-logo .v-archivo{font-family:'Archivo',sans-serif;font-weight:900;color:#fff;letter-spacing:-.045em}
.footer-logo .v-archivo .v-stop{color:#fff;margin-left:-.02em}
.footer-logo .v-fraunces{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:#fff;letter-spacing:-.025em;margin-left:-.05em;font-variation-settings:"opsz" 144}
.nav-links{display:flex;gap:2px}
.nav-link{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink);padding:10px 18px;border-radius:999px;transition:all .18s ease}
.nav-link:hover{background:var(--bg-2)}
.nav-link.active{color:#fff;background:var(--ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative}
.status-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:.4;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.nav-cta{font-size:13px;font-weight:500;padding:9px 18px;border-radius:999px;background:var(--ink);color:var(--bg);transition:all .15s}
.nav-cta:hover{background:var(--hot);color:#fff;transform:translateY(-1px)}

/* ---------- NAV MEGA-MENU ---------- */
.nav-dropdown{position:relative}
.nav-dropdown>.nav-link{display:flex;align-items:center;gap:6px}
.nav-dropdown-caret{width:9px;height:9px;transition:transform .2s ease}
.nav-dropdown:hover .nav-dropdown-caret,.nav-dropdown:focus-within .nav-dropdown-caret{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);margin-top:0;padding-top:14px;width:420px;background:transparent;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:60}
.nav-dropdown-menu-inner{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 28px 64px -20px rgba(15,15,15,.28),0 0 0 1px rgba(15,15,15,.05);padding:10px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-item{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:var(--radius);transition:background .15s;text-align:left;width:100%}
.nav-dd-item:hover{background:var(--bg-2)}
.nav-dd-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-dd-body{flex:1;min-width:0}
.nav-dd-title{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
.nav-dd-num{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:500}
.nav-dd-desc{font-size:12px;color:var(--ink-2);line-height:1.45}
.nav-dd-arrow{align-self:center;color:var(--ink-3);flex-shrink:0;transition:transform .15s}
.nav-dd-item:hover .nav-dd-arrow{transform:translateX(3px);color:var(--accent)}
.nav-dd-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:14px 14px 6px;border-top:1px solid var(--line);gap:12px}
.nav-dd-foot-text{font-size:11px;color:var(--ink-3);line-height:1.4}
.nav-dd-foot-text strong{color:var(--ink);font-family:var(--mono);font-weight:600}
.nav-dd-cta{flex-shrink:0;font-size:12px;font-weight:600;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap;transition:background .15s}
.nav-dd-cta:hover{background:var(--accent)}

/* ---------- TIMELINE (process détaillé) ---------- */
.timeline{position:relative}
.tl-step{display:flex;gap:28px;padding:36px 0;border-bottom:1px solid var(--line)}
.tl-step:first-child{padding-top:0}
.tl-step:last-child{border-bottom:none;padding-bottom:0}
.tl-num{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:20px;color:var(--ink);flex-shrink:0}
.tl-num.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tl-body{flex:1;min-width:0}
.tl-meta{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-weight:500}
.tl-title{font-family:var(--display)!important;font-weight:900!important;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em!important;margin-bottom:10px}
.tl-desc{font-size:14px;color:var(--ink-2);line-height:1.65;max-width:560px;margin-bottom:16px}
.tl-deliv{display:flex;flex-wrap:wrap;gap:8px}
.tl-deliv span{font-size:11px;padding:5px 12px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-family:var(--mono)}

/* ---------- COMPARISON TABLE ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px}
.compare-col{border-radius:var(--radius-lg);padding:32px}
.compare-col.dim{background:var(--paper);border:1px solid var(--line)}
.compare-col.hi{background:#0B1120}
.compare-head{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.compare-col.dim .compare-head{color:var(--ink-3)}
.compare-col.hi .compare-head{color:var(--accent)}
.compare-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(0,0,0,.08)}
.compare-col.hi .compare-row{border-bottom:1px dashed rgba(255,255,255,.1)}
.compare-row:last-child{border-bottom:none;padding-bottom:0}
.compare-mark{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;font-size:11px}
.compare-col.dim .compare-mark{background:rgba(239,68,68,.1);color:#ef4444}
.compare-col.hi .compare-mark{background:var(--accent);color:#fff}
.compare-text{font-size:13px;line-height:1.5}
.compare-col.dim .compare-text{color:var(--ink-2)}
.compare-col.hi .compare-text{color:rgba(255,255,255,.75)}

/* ---------- PAGE PAGER ---------- */
.page-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}

/* ---------- WHY CARDS (page Pourquoi) ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 32px 28px;transition:all .25s;position:relative;overflow:hidden}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--line-2)}
.why-num{position:absolute;top:20px;right:28px;font-family:var(--display);font-weight:900;font-size:46px;color:var(--bg-2);line-height:1;letter-spacing:-.04em;user-select:none}
.why-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.why-title{font-family:var(--display)!important;font-weight:900!important;font-size:23px;letter-spacing:-.03em!important;margin-bottom:11px}
.why-desc{font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:18px}
.why-concrete{display:flex;gap:10px;align-items:flex-start;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.5}
.why-concrete svg{flex-shrink:0;margin-top:2px;color:var(--accent)}
.why-concrete b{color:var(--ink);font-weight:600}

/* ---------- OUTCOME TILES ---------- */
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.outcome{padding:32px 26px;border-right:1px solid var(--line);transition:background .2s}
.outcome:last-child{border-right:none}
.outcome:hover{background:var(--bg)}
.outcome-icon{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.outcome-title{font-family:var(--display)!important;font-weight:900!important;font-size:17px;letter-spacing:-.02em!important;margin-bottom:8px;line-height:1.15}
.outcome-desc{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ---------- PROOF STRIP ---------- */
.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .25s}
.proof-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--line-2)}
.proof-img{height:158px;overflow:hidden;background:#0d1117}
.proof-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s}
.proof-card:hover .proof-img img{transform:scale(1.04)}
.proof-body{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.proof-name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em}
.proof-cat{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.proof-go{font-size:15px;color:var(--accent);flex-shrink:0}

/* ---------- INTERACTIVE STEPPER (page Comment) ---------- */
.stepper{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}
.stepper-rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:24px}
.step-tab{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left;transition:all .2s;width:100%}
.step-tab:hover{border-color:var(--line-2);transform:translateX(2px)}
.step-tab-num{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:19px;flex-shrink:0;transition:all .2s;color:var(--ink)}
.step-tab.active{background:#0B1120;border-color:#0B1120}
.step-tab.active .step-tab-num{background:var(--accent);border-color:var(--accent);color:#fff}
.step-tab-info{flex:1;min-width:0}
.step-tab-phase{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:3px}
.step-tab.active .step-tab-phase{color:var(--accent)}
.step-tab-name{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.step-tab.active .step-tab-name{color:#fff}
.step-tab-arrow{color:var(--ink-3);flex-shrink:0;opacity:0;transition:all .2s}
.step-tab.active .step-tab-arrow{opacity:1;color:var(--accent)}
.step-panel{display:none}
.step-panel.active{display:block;animation:fade .3s ease}
.sp-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.sp-top{padding:32px 32px 28px;border-bottom:1px solid var(--line)}
.sp-badges{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.sp-badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.sp-badge.ghost{background:var(--bg-2);color:var(--ink-2)}
.sp-title{font-family:var(--display)!important;font-weight:900!important;font-size:clamp(26px,3vw,34px);letter-spacing:-.03em!important;margin-bottom:12px;line-height:1}
.sp-desc{font-size:14px;color:var(--ink-2);line-height:1.65}
.sp-roles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sp-role{background:var(--paper);padding:24px 28px}
.sp-role-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:14px}
.sp-role-item{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.sp-role-item:last-child{margin-bottom:0}
.sp-role-item svg{flex-shrink:0;margin-top:2px;color:var(--accent)}
.sp-deliver{padding:24px 28px;background:#0B1120}
.sp-deliver-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:14px}
.sp-deliver-items{display:flex;flex-wrap:wrap;gap:8px}
.sp-deliver-items span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:7px 13px;border-radius:999px}
.sp-deliver-items span svg{color:var(--accent);flex-shrink:0}

/* ---------- REASSURE BAND ---------- */
.reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reassure-item{display:flex;gap:14px;align-items:flex-start;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.reassure-icon{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reassure-title{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;margin-bottom:5px}
.reassure-text{font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---------- SEO LOCAL (accueil) ---------- */
.seolocal{background:#0B1120;border-radius:var(--radius-lg);padding:56px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.seolocal-halo{position:absolute;top:-100px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(6,182,212,.18) 0%,transparent 65%);pointer-events:none}
.seolocal-halo2{position:absolute;bottom:-120px;left:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(6,182,212,.08) 0%,transparent 65%);pointer-events:none}
.seolocal-l{position:relative;z-index:2}
.seolocal-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:20px}
.seolocal-eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}
.seolocal h2{font-family:var(--display)!important;font-weight:900!important;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em!important;line-height:1;color:#fff;margin-bottom:20px}
.seolocal h2 .it{color:var(--accent)}
.seolocal-desc{font-size:15px;color:rgba(255,255,255,.62);line-height:1.65;margin-bottom:28px;max-width:440px}
.seolocal-points{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.seolocal-point{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.85);line-height:1.5}
.seolocal-point svg{flex-shrink:0;margin-top:2px;color:var(--accent)}
.seolocal-point b{color:#fff;font-weight:600}
.seolocal-r{position:relative;z-index:2;display:flex;justify-content:center}
/* mock google local result */
.gcard{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden}
.gcard-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #eef0f2}
.gcard-search{flex:1;display:flex;align-items:center;gap:9px;background:#f1f3f4;border-radius:999px;padding:8px 14px;font-size:12.5px;color:#3c4043}
.gcard-tabs{display:flex;gap:18px;padding:10px 18px 0;font-size:12px;color:#5f6368;border-bottom:1px solid #eef0f2}
.gcard-tab{padding-bottom:9px}
.gcard-tab.on{color:#1a73e8;border-bottom:2px solid #1a73e8;font-weight:500}
.gcard-map{height:104px;background:linear-gradient(135deg,#e8eef2,#dfe7ec);position:relative;overflow:hidden}
.gcard-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:22px 22px}
.gcard-map::after{content:"";position:absolute;top:20px;left:32px;right:60px;height:3px;background:#c7d2da;border-radius:2px;box-shadow:0 34px 0 -1px #d4dde3,0 60px 0 -1px #cfd9df;transform:rotate(-6deg)}
.gpin{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:30px;height:30px;z-index:2}
.gpin-dot{position:absolute;inset:0;background:var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(6,182,212,.5)}
.gpin-dot::after{content:"";position:absolute;top:8px;left:8px;width:14px;height:14px;background:#fff;border-radius:50%}
.gpin-pulse{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:26px;height:8px;background:rgba(6,182,212,.25);border-radius:50%;animation:gpulse 2s ease-in-out infinite}
@keyframes gpulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(1.5);opacity:.15}}
.gresult{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;position:relative}
.gresult.top{background:linear-gradient(90deg,rgba(6,182,212,.06),transparent)}
.grank{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:900;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.grank.dim{background:#e8eaed;color:#9aa0a6}
.gres-body{flex:1;min-width:0}
.gres-name{font-size:14px;color:#202124;font-weight:600;display:flex;align-items:center;gap:6px}
.gres-badge{font-size:9px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.gres-meta{font-size:11.5px;color:#5f6368;margin-top:2px}
.gres-stars{color:#fbbc04;letter-spacing:1px}
.gres-actions{display:flex;gap:6px;margin-top:8px}
.gres-btn{font-size:10.5px;color:#1a73e8;border:1px solid #dadce0;border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:4px}
.gres-div{height:1px;background:#eef0f2;margin:0 16px}

@media(max-width:900px){
  .stepper{grid-template-columns:1fr!important;gap:20px}
  .stepper-rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .step-tab{min-width:240px}
  .why-grid,.outcomes,.proof-strip,.reassure{grid-template-columns:1fr!important}
  .outcome{border-right:none;border-bottom:1px solid var(--line)}
  .outcome:last-child{border-bottom:none}
  .sp-roles{grid-template-columns:1fr!important}
  .seolocal{grid-template-columns:1fr!important;padding:36px 28px;gap:36px}
  .case{grid-template-columns:1fr!important;gap:32px;padding:48px 0}
  .case.flip .case-visual{order:0}
  .case.flip .case-tag{left:24px;right:auto}
}

/* ---------- CAS CLIENT ---------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.case:last-of-type{border-bottom:none}
.case.flip .case-visual{order:2}
.case-visual{position:relative}
.case-browser{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -22px rgba(15,15,15,.32),0 0 0 1px rgba(15,15,15,.06);transition:transform .35s ease}
.case-browser:hover{transform:translateY(-4px)}
.case-bar{background:#f0f4f8;padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e2e8f0}
.case-dots{display:flex;gap:5px}
.case-dots span{width:9px;height:9px;border-radius:50%;display:block}
.case-url{flex:1;background:#fff;border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:10px;color:#94a3b8;display:flex;align-items:center;gap:6px}
.case-shot{display:block;width:100%;height:320px;object-fit:cover;object-position:top center}
.case-tag{position:absolute;bottom:-14px;left:24px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;padding:8px 14px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(15,15,15,.4)}
.case.flip .case-tag{left:auto;right:24px}
.case-eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.case-eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}
.case-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.case-logo{height:36px;width:auto;max-width:150px;object-fit:contain}
.case-name{font-family:var(--display)!important;font-weight:900!important;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em!important;line-height:1}
.case-sub{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:22px}
.case-lead{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:26px}
.case-block{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}
.case-block:last-of-type{border-bottom:1px solid var(--line)}
.case-block-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding-top:2px}
.case-block-label.hi{color:var(--accent)}
.case-block-text{font-size:13.5px;color:var(--ink);line-height:1.6}
.case-cta{margin-top:26px}

/* ---------- VIEWS ---------- */
.view{display:none}
.view.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- HERO ---------- */
.hero{padding:0;position:relative;overflow:hidden;min-height:min(82vh,740px);background:var(--bg);display:flex;flex-direction:column}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;flex:1}
.hero-bg-grid{display:none}
.hero-spotlight{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(6,182,212,0.12),transparent 70%)}
.hero:hover .hero-spotlight{opacity:1}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(56px,8vw,104px);line-height:.92;letter-spacing:-.045em;margin-bottom:28px}
/* Display titles : Archivo Black + Fraunces italic for .it accents */
h1, h2, h3, .hero h1, .section-head h2, .cta-band h2, .footer-hero-text, .plan-name, .pt-name, .step-title, .proj-thumb-title{font-family:var(--display)!important;font-weight:900!important;letter-spacing:-.04em!important}
h1 .it, h2 .it, .it, .section-head h2 .it, .cta-band h2 .it, .footer-hero-text .it, .hero h1 em, h1 em, h2 em{font-family:var(--italic)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.02em!important}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:500;transition:all .18s;white-space:nowrap}
.btn svg{transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-hot{background:var(--hot);color:#fff}
.btn-hot:hover{background:#5b21b6}
.btn-p{background:var(--ink);color:var(--bg)}
.btn-p:hover{background:var(--hot);color:#fff}
.btn-s{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-s:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- MARQUEE ---------- */
.marquee{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.marquee-label{position:absolute;left:28px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--bg);padding:8px 12px;z-index:2;border-right:1px solid var(--line)}
.marquee-track{display:flex;gap:56px;animation:scroll 40s linear infinite;width:max-content;padding-left:180px}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;color:var(--ink-2);white-space:nowrap}
.marquee-item svg{flex-shrink:0}

/* ---------- SECTIONS ---------- */
.section{padding:80px 0;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;margin-bottom:56px;align-items:end}
.section-head h2{font-family:var(--serif);font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.01em}
.section-head h2 .it{font-style:italic;color:var(--ok)}
.section-head p{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:480px}
/* ---------- PRICING HERO STAT ---------- */
.pricing-hero-stat{display:flex;align-items:flex-start;gap:24px;padding:24px 28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);max-width:520px;position:relative}
.pricing-hero-stat::before{content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.phs-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:88px;line-height:.85;letter-spacing:-.06em;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.phs-num-sub{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:24px;color:var(--ink-2);letter-spacing:-.02em}
.phs-text{font-size:16px;color:var(--ink-2);line-height:1.5;flex:1;padding-top:8px}
.phs-text strong{font-family:'Archivo',sans-serif;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.phs-fine{display:inline-block;margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.5}
@media (max-width:640px){.pricing-hero-stat{flex-direction:column;gap:12px}.phs-num{font-size:72px}}
.eyebrow{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink-3)}

/* ---------- VALUE PROPS ---------- */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.prop{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .2s}
.prop:hover{background:var(--paper)}
.prop-num{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:28px}
.prop-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.prop h3{font-family:var(--serif);font-size:26px;line-height:1.1;margin-bottom:10px}
.prop p{font-size:14px;color:var(--ink-2);line-height:1.55}
.prop-kpi{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:baseline}
.prop-kpi-val{font-family:var(--serif);font-size:28px;color:var(--accent)}
.prop-kpi-lbl{font-size:11px;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase}

/* ---------- PROJECTS TEASER ---------- */
.proj-teaser-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:16px}
.pt-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:all .25s}
.pt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--line-2)}
.pt-visual{position:absolute;inset:0;background:linear-gradient(135deg,var(--c1,var(--accent-soft)),var(--c2,var(--hot-soft)));overflow:hidden}
.pt-visual::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0,transparent 10px,rgba(255,255,255,.08) 10px,rgba(255,255,255,.08) 11px)}
.pt-body{position:relative;z-index:2;background:var(--paper);padding:16px;margin:0 -20px -20px;border-top:1px solid var(--line)}
.pt-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pt-name{font-family:var(--serif);font-size:22px;line-height:1}
.pt-result{font-family:var(--mono);font-size:11px;color:var(--hot);font-weight:500}
.pt-desc{font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.pt-tags{display:flex;gap:6px;flex-wrap:wrap}
.pt-tag{font-size:10px;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-family:var(--mono)}

/* ---------- PROCESS ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.process::before{content:"";position:absolute;top:28px;left:10%;right:10%;height:1px;border-top:1px dashed var(--line-2);z-index:0}
.step{background:var(--bg);position:relative;z-index:1;text-align:left}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:20px;position:relative}
.step-num.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.step-num.active::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ink);opacity:.2}
.step-title{font-family:var(--serif);font-size:24px;margin-bottom:8px;line-height:1}
.step-meta{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:10px}
.step-desc{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ---------- PRICING ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;position:relative;transition:all .25s}
.plan:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.plan.featured{background:#0B1120;color:var(--bg);border-color:#0B1120}
.plan.featured .plan-desc,.plan.featured .plan-incl li{color:#c9c3b8}
.plan.featured .plan-price-cur,.plan.featured .plan-price-unit{color:#a09a90}
.plan.featured .check{background:var(--hot);color:#fff}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--hot);color:#fff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.plan-tier{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:12px;text-transform:uppercase}
.plan.featured .plan-tier{color:#a09a90}
.plan-name{font-family:var(--serif);font-size:32px;margin-bottom:8px;line-height:1}
.plan-desc{font-size:13px;color:var(--ink-2);margin-bottom:20px;line-height:1.5}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.plan.featured .plan-price{border-color:rgba(255,255,255,.15)}
.plan-price-cur{font-size:14px;color:var(--ink-2)}
.plan-price-val{font-family:var(--serif);font-size:52px;line-height:1}
.plan-price-unit{font-size:13px;color:var(--ink-2)}
.plan-incl{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
.plan-incl li{display:flex;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.5}
.check{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.plan-btn{width:100%;padding:12px;border-radius:999px;font-size:14px;font-weight:500;background:var(--bg-2);color:var(--ink);transition:all .18s}
.plan-btn:hover{background:var(--ink);color:var(--bg)}
.plan.featured .plan-btn{background:var(--hot);color:#fff}
.plan.featured .plan-btn:hover{background:#5b21b6}

.t-author{display:flex;align-items:center;gap:12px}
.t-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.t-name{font-size:13px;font-weight:500}
.t-role{font-size:12px;color:var(--ink-3)}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;text-align:left;padding:22px 0;font-size:18px;font-weight:400;font-family:var(--serif);display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .15s}
.faq-q:hover{color:var(--accent)}
.faq-chev{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.faq-chev.open{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--ink-2);line-height:1.65;padding:0 40px 24px 0;display:none;max-width:620px}
.faq-a.open{display:block;animation:fade .25s ease}

/* ---------- CTA BAND ---------- */
.cta-band{padding:96px 0;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.cta-band-bg{position:absolute;inset:0;z-index:0;opacity:.05}
.cta-band-bg svg{width:100%;height:100%}
.cta-band-inner{position:relative;z-index:1}
.cta-band h2{font-family:var(--serif);font-size:clamp(48px,7vw,88px);line-height:.95;margin-bottom:24px;letter-spacing:-.01em}
.cta-band h2 .it{font-style:italic;color:var(--ok)}
.cta-band p{font-size:17px;color:var(--ink-2);max-width:480px;margin:0 auto 36px}
.cta-band-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-band-meta{margin-top:32px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.cta-band-meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- FOOTER ---------- */
.footer{padding:56px 0 32px;background:#0B1120;color:var(--bg);margin:0 -28px;padding-left:28px;padding-right:28px}
.footer-inner{max-width:1240px;margin:0 auto;padding:0 28px}
.footer-hero{padding:20px 0 48px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:32px}
.footer-hero-text{font-family:var(--serif);font-size:clamp(48px,6vw,84px);line-height:.95;letter-spacing:-.01em}
.footer-hero-text .it{font-style:italic;color:var(--hot)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-about{font-size:13px;color:#a09a90;line-height:1.55;max-width:280px}
.footer-col h4{font-family:var(--mono);font-size:11px;color:#a09a90;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;font-weight:500}
.footer-col a{display:block;font-size:14px;color:#c9c3b8;margin-bottom:10px;transition:color .15s;cursor:pointer}
.footer-col a:hover{color:var(--bg)}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:12px;color:#a09a90}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:12px;color:#a09a90;cursor:pointer}
.footer-legal a:hover{color:var(--bg)}

/* ---------- PROJECTS PAGE ---------- */
.proj-head{padding:72px 0 40px}
.proj-head h1{font-family:var(--serif);font-size:clamp(52px,7vw,88px);line-height:.95;margin-bottom:16px;letter-spacing:-.01em}
.proj-head h1 .it{font-style:italic;color:var(--accent)}
.proj-head p{font-size:17px;color:var(--ink-2);max-width:480px}
.proj-filters-row{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pf{font-size:13px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);transition:all .15s}
.pf:hover{border-color:var(--line-2);color:var(--ink)}
.pf.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pf-count{font-family:var(--mono);font-size:10px;opacity:.6;margin-left:4px}
.proj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;padding-bottom:80px}
.proj-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .25s}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.proj-thumb{aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:20px}
.proj-thumb-mono{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:10px;color:var(--ink);background:rgba(255,255,255,.75);padding:3px 8px;border-radius:3px;backdrop-filter:blur(4px)}
.proj-thumb-result{position:absolute;top:14px;right:16px;background:var(--ink);color:var(--bg);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500}
.proj-thumb-title{font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink);position:relative;z-index:1}
.proj-body{padding:18px 20px;border-top:1px solid var(--line)}
.proj-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.proj-cat{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase}
.proj-budget{font-size:12px;color:var(--ink-2)}
.proj-desc{font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:12px}
.proj-stack{display:flex;gap:6px;flex-wrap:wrap}
.proj-stack .pt-tag{background:var(--bg-2)}
.proj-cta{margin-top:14px;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);font-weight:500}

/* Project detail */
.pd{padding:40px 0 80px}
.pd-back{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;margin-bottom:32px}
.pd-back:hover{color:var(--ink)}
.pd-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.pd-hero{aspect-ratio:4/3;border-radius:var(--radius-lg);display:flex;align-items:flex-end;padding:32px;position:relative;overflow:hidden}
.pd-hero-label{position:absolute;top:20px;left:24px;font-family:var(--mono);font-size:11px;color:var(--ink);background:rgba(255,255,255,.8);padding:4px 10px;border-radius:3px}
.pd-hero-title{font-family:var(--serif);font-size:56px;line-height:.95;color:var(--ink)}
.pd-side{position:sticky;top:32px}
.pd-cat{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
.pd-side h2{font-family:var(--serif);font-size:40px;line-height:1;margin-bottom:16px}
.pd-side p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:24px}
.pd-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.pd-kpi{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
.pd-kpi-val{font-family:var(--serif);font-size:28px;color:var(--hot);margin-bottom:4px;line-height:1}
.pd-kpi-lbl{font-size:11px;color:var(--ink-2);line-height:1.3}
.pd-stack-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}

/* ---------- ABOUT ---------- */
.about-hero{padding:72px 0 56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-portrait{aspect-ratio:3/4;background:linear-gradient(160deg,#f0f4ff 0%,#e8eef8 100%);border-radius:var(--radius-lg);position:relative;overflow:hidden;max-width:400px;display:flex;align-items:center;justify-content:center}
.about-portrait::after{content:"";}
.about-portrait-avatar{width:100%;height:100%;}
.about-eyebrow{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;margin-bottom:16px}
.about-hero h1{font-family:var(--serif);font-size:clamp(42px,6vw,72px);line-height:.95;margin-bottom:24px;letter-spacing:-.01em}
.about-hero h1 .it{font-style:italic;color:var(--accent)}
.about-hero p{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:20px}
.about-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.about-tag{font-size:12px;padding:6px 12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.about-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:0}
.about-num{padding:28px 20px;border-right:1px solid var(--line);text-align:left}
.about-num:last-child{border-right:none}
.about-num-val{font-family:var(--serif);font-size:52px;line-height:1;margin-bottom:6px;color:var(--ink)}
.about-num-lbl{font-size:13px;color:var(--ink-2);line-height:1.4}

/* ---------- CONTACT ---------- */
.contact-wrap{padding:56px 0 80px;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.contact-left h1{font-family:var(--serif);font-size:clamp(40px,5.5vw,64px);line-height:.95;margin-bottom:20px;letter-spacing:-.01em}
.contact-left h1 .it{font-style:italic;color:var(--accent)}
.contact-left>p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:32px}
.c-bullet{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.c-bullet:last-child{border-bottom:1px solid var(--line)}
.c-bullet-icon{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-bullet-title{font-size:14px;font-weight:500;margin-bottom:4px}
.c-bullet-text{font-size:13px;color:var(--ink-2);line-height:1.5}
.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-soft)}
.c-step-bar{display:flex;gap:6px;margin-bottom:28px}
.c-pill{height:4px;border-radius:2px;flex:1;background:var(--line);transition:background .25s}
.c-pill.done{background:var(--accent)}
.c-pill.active{background:var(--ink)}
.c-step-label{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:16px;text-transform:uppercase}
.c-form-title{font-family:var(--serif);font-size:32px;margin-bottom:8px;line-height:1}
.c-form-sub{font-size:14px;color:var(--ink-2);margin-bottom:24px}
.c-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.c-opt{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);text-align:left;transition:all .15s;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.c-opt:hover{border-color:var(--ink-3)}
.c-opt.sel{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.c-opt-name{font-size:14px;font-weight:500}
.c-opt-hint{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.c-opt.sel .c-opt-hint{color:#a09a90}
.c-field{margin-bottom:14px}
.c-field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;font-weight:500;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.c-field input,.c-field select,.c-field textarea{width:100%}
.c-field textarea{min-height:100px;resize:vertical;line-height:1.5}
.c-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.c-back{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.c-back:hover{color:var(--ink)}
.c-success{text-align:center;padding:20px 0}
.c-success-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.c-success h3{font-family:var(--serif);font-size:32px;margin-bottom:10px}
.c-success p{font-size:14px;color:var(--ink-2);margin-bottom:24px;line-height:1.55}
.c-recap{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;text-align:left}
.c-recap-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.c-recap-row:last-child{border:none}
.c-recap-row span:first-child{color:var(--ink-2);font-family:var(--mono);font-size:11px;text-transform:uppercase}

/* ---------- TWEAKS PANEL ---------- */
.tweaks-panel{position:fixed;bottom:20px;right:20px;width:280px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 20px 60px -20px rgba(0,0,0,.2);z-index:100;display:none;font-size:13px}
.tweaks-panel.open{display:block}
/* ---------- WHATSAPP FLOTTANT ---------- */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:150;display:inline-flex;align-items:center;background:#25D366;color:#fff;border-radius:999px;padding:0;box-shadow:0 12px 32px -8px rgba(37,211,102,.65),0 3px 10px rgba(0,0,0,.16);transition:transform .22s ease,box-shadow .22s ease;height:66px}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 18px 40px -8px rgba(37,211,102,.75),0 3px 10px rgba(0,0,0,.2)}
.wa-float:active{transform:translateY(-1px)}
.wa-float-ic{width:66px;height:66px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-float-txt{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:0;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s ease,opacity .22s ease,padding .3s ease;padding:0}
.wa-float:hover .wa-float-txt{max-width:220px;opacity:1;padding:0 24px 0 2px}
.wa-float::before{content:"";position:absolute;left:17px;top:17px;width:32px;height:32px;border-radius:50%;background:#25D366;z-index:-1;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.3);opacity:0}100%{opacity:0}}
@media(max-width:640px){
  .wa-float{bottom:18px;right:18px;height:62px;border-radius:50%}
  .wa-float-ic{width:62px;height:62px}
  .wa-float-txt{display:none}
  .wa-float::before{left:15px;top:15px}
}
.tweaks-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tweaks-title{font-family:var(--serif);font-size:20px}
.tweaks-close{width:24px;height:24px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.tweak-row{margin-bottom:16px}
.tweak-label{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.tweak-swatches{display:flex;gap:8px}
.tweak-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.tweak-swatch:hover{transform:scale(1.1)}
.tweak-swatch.sel{border-color:var(--ink)}
.tweak-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tweak-opt{padding:6px 10px;font-size:11px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink-2);cursor:pointer;font-family:var(--mono);text-transform:uppercase}
.tweak-opt.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* --- MOBILE NAV --- */
.nav-mobile-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;z-index:200;flex-shrink:0}
.nav-mobile-menu{display:none;position:fixed;inset:0;z-index:199;flex-direction:column;background:var(--bg);padding:80px 28px 40px;overflow-y:auto}
.nav-mobile-menu.open{display:flex}
.nav-mobile-link{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line);text-align:left;background:none;border-left:none;border-right:none;border-top:none;width:100%;cursor:pointer;transition:color .15s;outline:none!important;-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none}
.nav-mobile-link:hover,.nav-mobile-link:active,.nav-mobile-link:focus{color:var(--accent);outline:none!important;box-shadow:none!important}
.nav-mobile-close{position:absolute;top:22px;right:24px;width:38px;height:38px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav-mobile-cta{margin-top:28px;display:block;padding:16px;text-align:center;background:var(--ink);color:#fff;border-radius:999px;font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;cursor:pointer;border:none;width:100%;transition:background .15s}
.nav-mobile-cta:hover{background:var(--accent)}
/* mobile accordion — Notre offre */
.m-acc .m-acc-head{display:flex!important;align-items:center;justify-content:space-between;border-bottom:none}
.m-acc-chev{width:22px;height:22px;color:var(--ink-3);transition:transform .28s ease;flex-shrink:0}
.m-acc.open .m-acc-chev{transform:rotate(180deg);color:var(--accent)}
.m-acc-panel{max-height:0;overflow:hidden;transition:max-height .32s ease;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.m-acc.open .m-acc-panel{max-height:460px;padding:4px 0 16px}
.m-sub{display:flex;align-items:center;gap:14px;padding:13px 14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-align:left;width:100%;cursor:pointer;transition:transform .12s ease,border-color .15s;outline:none!important;-webkit-tap-highlight-color:transparent}
.m-sub:active{transform:scale(.985);border-color:var(--line-2)}
.m-sub-num{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);font-family:'Archivo',sans-serif;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.m-sub-body{flex:1;min-width:0}
.m-sub-title{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.m-sub-desc{display:block;font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.35}
.m-sub-arrow{color:var(--ink-3);flex-shrink:0}
.m-sub-foot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-3);font-family:var(--mono);padding:6px 0 2px}
.m-sub-foot strong{color:var(--ink);font-weight:600}

@media(max-width:900px){
  .hero-grid,.section-head,.about-hero,.contact-wrap{grid-template-columns:1fr!important;gap:28px}
  .props,.process,.pricing,.proj-list,.page-pager,.compare-grid{grid-template-columns:1fr!important}
  .hero-visual{height:auto}
  #carousel-track{grid-template-columns:1fr!important}
  .carousel-card{margin-top:0!important}
  .pricing-split{grid-template-columns:1fr!important}
  .pd-grid{grid-template-columns:1fr!important}
  .pd-side{position:static}
  .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:640px){
  .page{padding:0 16px}
  .nav{padding:8px 8px 8px 18px;top:10px;margin:10px 0 6px}
  .nav-links,.nav-status{display:none!important}
  .nav-mobile-btn{display:flex!important}
  .hero-left-col{padding:40px 0 24px!important}
  .hero-right-col{display:flex!important;justify-content:center!important;padding:0 0 32px!important}
  #hs-stack{width:100%!important;max-width:300px!important;height:230px!important}
  .hs-card{width:100%!important;max-width:300px!important}
  .hs-img-wrap{height:150px!important}
  #hs-bars{width:100%!important;max-width:300px!important}
  .pricing-features-grid{grid-template-columns:1fr!important}
  .c-form-row{grid-template-columns:1fr!important}
  .tarif-justify-grid{grid-template-columns:1fr!important}
  .pricing-split{grid-template-columns:1fr!important}
  .contact-hint{background:rgba(6,182,212,.14)!important;border:1px solid rgba(6,182,212,.4)!important;border-radius:999px!important;padding:8px 14px!important;width:fit-content!important;color:#fff!important;margin-top:6px!important}
  .contact-hint svg{width:12px!important;height:12px!important}
  .footer-grid{grid-template-columns:1fr!important;gap:20px}
  .about-nums{grid-template-columns:1fr 1fr!important}
  .tl-step{flex-direction:column;gap:12px}
  .tl-num{width:44px;height:44px;font-size:16px}
  .section{padding:48px 0}
  .cta-band{padding:56px 0}
  .section-head h2{font-size:clamp(32px,8vw,50px)!important}
  .footer-hero-text{font-size:clamp(36px,9vw,56px)!important}
  .cta-band h2{font-size:clamp(38px,10vw,64px)!important}
}

/* ============================================================
   Ajouts liés au passage en site multi-pages
   ============================================================ */

/* ---------- Liens de navigation (anciens <button>) ----------
   Le menu et le pied de page utilisent désormais de vrais <a href>,
   indispensables pour que Google découvre et suive les pages.
   Ces règles leur redonnent exactement le rendu des boutons d'origine. */
a.nav-link{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
a.nav-logo{display:flex;align-items:center;cursor:pointer}
a.nav-cta{display:inline-flex;align-items:center;justify-content:center}
a.nav-dd-item{text-decoration:none}
a.nav-dd-cta{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
a.nav-mobile-link{display:block;text-decoration:none}
a.nav-mobile-cta{display:block;text-decoration:none}
a.m-sub{text-decoration:none}
.footer-static{display:block;font-size:14px;color:#c9c3b8;margin-bottom:10px}

/* ---------- Lien d'évitement (accessibilité) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--ink);color:#fff;border-radius:0 0 var(--radius) 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* ---------- Cartes de réalisations ----------
   Les cartes sont écrites dans le HTML au build (et non plus injectées
   en JavaScript) : elles doivent donc se comporter comme de vrais liens. */
.proj-card[hidden]{display:none}
a.proj-card-link{display:block;color:inherit;text-decoration:none;height:100%}
a.proj-card-link:hover img{transform:scale(1.03)}
.proj-card h3{margin:0 0 6px}

/* ---------- Images ----------
   width/height sont désormais présents sur chaque <img> pour réserver
   la place avant chargement (évite les sauts de mise en page / CLS). */
img{max-width:100%;height:auto}

/* ---------- Pages légales ---------- */
.legal{max-width:760px;margin:0 auto;padding:120px 24px 100px}
.legal h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,52px);
  letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--ink)}
.legal .legal-updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:48px;display:block}
.legal h2{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;
  margin:44px 0 12px;color:var(--ink)}
.legal p,.legal li{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:12px}
.legal ul{padding-left:20px;margin-bottom:12px}
.legal li{margin-bottom:6px}
.legal a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}
.legal strong{color:var(--ink);font-weight:600}
.legal .legal-note{border-left:3px solid var(--accent);background:var(--bg-2);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0}
.legal .legal-note p{margin:0;font-size:14px}

/* ---------- Corrections mobile ---------- */

/* Captures des études de cas.
   `.case-shot` impose height:320px + object-fit:cover. En une seule
   colonne, la colonne ne fait plus que ~358 px : pour remplir 320 px de
   haut, l'image (900×520) était agrandie à 553 px de large, donc rognée
   de 35 % sur les côtés — on perdait le logo et la navigation du site
   présenté. En hauteur automatique, la capture s'affiche entière. */
@media (max-width: 900px){
  .case-shot{height:auto}
}

/* Le pied de page débordait de la fenêtre.
   `.footer` utilise margin:0 -28px pour aller au bord, en supposant un
   padding de page de 28 px. Sous 640 px, `.page` passe à 16 px : le
   footer dépassait donc de 12 px de chaque côté, créant un défilement
   horizontal parasite sur toutes les pages. */
@media (max-width: 640px){
  .footer{margin:0 -16px;padding-left:16px;padding-right:16px}
  .footer-inner{padding:0}
}

/* Le formulaire de contact débordait lui aussi.
   Les éléments d'une grille ont min-width:auto : ils refusent de
   descendre sous la largeur minimale de leur contenu. Ici 310 px de
   champs + 2×36 px de padding = 382 px, pour une colonne de 358 px.
   On autorise le rétrécissement et on resserre le padding. */
@media (max-width: 640px){
  .contact-wrap > *{min-width:0}
  .contact-form{padding:26px 20px}
  .contact-form input,
  .contact-form select,
  .contact-form textarea{min-width:0;width:100%}
}

/* ---------- Confort de lecture / accessibilité ---------- */
:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   Page Tarifs
   ============================================================
   Direction artistique : le rythme alterne des tranches claires et
   une tranche sombre, séparées par un filet qui s'efface sur les
   bords. Les titres sont annoncés par un libellé monospace en
   capitales très espacées, les cartes de prix sont translucides sur
   fond sombre, cerclées d'un filet à l'accent, et le chiffre est la
   seule chose colorée.

   Les couleurs passent toutes par les variables de :root, que le
   panneau de tweaks réécrit à chaud. Seuls les fonds sombres et les
   halos, qui ne sont pas des couleurs de marque, sont déclarés ici.

   Ordre de la page : le prix d'abord, puis ce qui lève le doute.
     chapeau → les deux packs → garanties → comparatif ligne à ligne
     → ce que ça change → qui réalise le site → questions → maquette   */

:root{
  --deep: #0B1120;                      /* fond des tranches sombres */
  --on-deep: rgba(255,255,255,.88);     /* texte courant sur fond sombre */
  --on-deep-2: rgba(255,255,255,.58);
  --on-deep-3: rgba(255,255,255,.38);
  --deep-line: rgba(255,255,255,.12);
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Le rythme des tranches ----------
   Un filet dégradé ouvre chaque section claire : il marque la
   coupure sans la refermer comme le ferait un trait plein. */
.band{position:relative}
.band-rule{padding-top:0;padding-bottom:88px}
.band-rule::before{content:"";display:block;height:1px;margin-bottom:68px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* La tranche sombre : une dalle posée dans la page, deux halos à
   l'accent dans les angles. `overflow:hidden` les retient à
   l'intérieur — sans quoi la page défile latéralement. */
.section.band-dark{margin:12px 0 88px;padding:64px 48px;border-bottom:none;
  background:var(--deep);color:var(--on-deep);border-radius:32px;overflow:hidden}
.band-dark::before,.band-dark::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none}
.band-dark::before{top:-150px;right:-130px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(6,182,212,.17) 0%,transparent 62%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 17%,transparent) 0%,
    transparent 62%)}
.band-dark::after{bottom:-170px;left:-150px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(6,182,212,.09) 0%,transparent 62%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 9%,transparent) 0%,
    transparent 62%)}
.band-dark > *{position:relative;z-index:1}

/* ---------- Libellés de section ----------
   Capitales monospace très espacées, centrées, sans le filet
   horizontal du reste du site : c'est la signature de la page. */
.tarif-eyebrow,
.pk-head .eyebrow,.gr-head .eyebrow,.cmp-head .eyebrow,
.fq-head .eyebrow,.pm-head .eyebrow{display:flex;justify-content:center;
  font-size:10.5px;letter-spacing:.24em;margin-bottom:18px}
.tarif-eyebrow::before,
.pk-head .eyebrow::before,.gr-head .eyebrow::before,.cmp-head .eyebrow::before,
.fq-head .eyebrow::before,.pm-head .eyebrow::before{display:none}
.tarif-eyebrow{color:var(--accent-ink)}
.pk-head .eyebrow{color:var(--accent)}

/* ---------- Titres de section centrés ---------- */
.pk-head,.gr-head,.cmp-head,.fq-head,.pm-head{text-align:center;
  max-width:680px;margin:0 auto 46px}
.pk-head h2,.gr-head h2,.cmp-head h2,.fq-head h2,.pm-head h2{font-family:var(--serif);
  font-size:clamp(28px,3.8vw,44px);line-height:1.06;letter-spacing:-.01em;color:var(--ink)}
.pk-head h2 .it,.gr-head h2 .it,.cmp-head h2 .it,
.fq-head h2 .it,.pm-head h2 .it{font-style:italic;color:var(--accent)}
.pk-head h2{color:#fff}

/* ---------- Chapeau ----------
   Le prix d'entrée est annoncé dès le premier écran : la page ne fait
   pas attendre le chiffre qu'on est venu chercher. */
.tarif-hero{text-align:center;padding-bottom:40px}
.tarif-hero h1{margin-left:auto;margin-right:auto}
.tarif-sub{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:560px;
  margin:0 auto}
.ta{list-style:none;padding:0;margin:38px auto 0;max-width:860px;
  display:grid;grid-template-columns:1fr;text-align:center}
.ta li{display:flex;flex-direction:column;gap:7px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.ta li:last-child{border-bottom:none}
.ta-num{font-family:var(--display);font-size:32px;font-weight:900;letter-spacing:-.045em;
  line-height:1;color:var(--ink)}
.ta-txt{font-size:13px;line-height:1.55;color:var(--ink-3)}
.tarif-jump{display:inline-flex;align-items:center;gap:9px;margin-top:32px;
  padding:13px 24px;border-radius:999px;border:1px solid var(--line-2);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);text-decoration:none;
  transition:color .18s,border-color .18s,background .18s}
.tarif-jump:hover{color:var(--accent-ink);border-color:var(--accent);
  background:var(--accent-soft)}

/* ---------- Les deux packs ----------
   Cartes translucides sur la dalle sombre : le fond du site les
   traverse, seul le filet et le chiffre portent la couleur. */
.pk-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:1000px;margin:0 auto;
  align-items:stretch}
.pk{position:relative;display:flex;flex-direction:column;padding:36px 34px 32px;
  background:linear-gradient(150deg,rgba(255,255,255,.065),rgba(255,255,255,.015));
  border:1px solid var(--deep-line);border-radius:20px;
  /* Le halo du pack mis en avant déborde de la carte : sans cette
     coupe, la page entière défile horizontalement sur téléphone. */
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease}
.pk:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}

.pk-top{min-height:112px}
.pk-slug{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.pk-name{font-family:var(--display);font-size:29px;font-weight:900;letter-spacing:-.035em;
  color:#fff;margin:0 0 10px;line-height:1.05}
.pk-desc{font-size:15px;line-height:1.55;color:var(--on-deep-2);margin:0 0 10px;max-width:340px}
.pk-pour{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--on-deep-3);margin:0}

.pk-money{margin:24px 0 22px;padding-top:22px;border-top:1px solid var(--deep-line)}
.pk-price{font-family:var(--display);font-size:52px;font-weight:900;letter-spacing:-.045em;
  line-height:.95;color:var(--accent);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pk-price em{font-family:var(--mono);font-style:normal;font-size:20px;font-weight:500;
  letter-spacing:0;color:var(--accent)}
.pk-once{font-family:var(--mono);font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--on-deep-3);align-self:flex-end;padding-bottom:5px}
/* Les frais annuels, sous le prix de creation.
   Deux lignes discretes, en corps de texte et en gris : le prix de
   creation reste le seul chiffre qui accroche l'oeil, ces frais se
   lisent quand on les cherche sans peser sur la carte. */
.pk-an{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.pk-an-line{margin:0;font-size:13px;line-height:1.55;color:var(--on-deep-3)}
.pk-plus{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--on-deep-3);
  margin-right:5px}
.pk-an strong{color:var(--on-deep-2);font-weight:600;white-space:nowrap;margin-right:4px}

.pk-cta{display:flex;align-items:center;justify-content:center;
  padding:17px 26px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:transparent;color:#fff;text-decoration:none;
  font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.02em;
  transition:border-color .18s,background .18s,color .18s,transform .18s}
.pk-cta:hover{border-color:#fff;background:#fff;color:var(--deep);transform:translateY(-1px)}
.pk-fine{margin-top:12px;text-align:center;font-size:12px;color:var(--on-deep-3)}

.pk-lead{margin:28px 0 16px;padding-top:24px;border-top:1px solid var(--deep-line);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--on-deep-3)}
.pk-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;flex:1}
.pk-list li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.45;
  color:var(--on-deep)}
.pk-list svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--accent)}

/* Les prestations reprises du pack d'entree.
   Meme texte, meme coche : elles sont bien comprises. Seul le ton est
   plus sourd, pour que l'oeil distingue l'acquis de ce qui s'ajoute
   sans jamais laisser croire que c'est une option. */
.pk-list .pk-inc{color:var(--on-deep-2)}
.pk-list .pk-inc svg{color:var(--on-deep-3)}
.pk-sep{display:flex;align-items:center;gap:12px;margin:2px 0;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent)}
.pk-sep::after{content:"";flex:1;height:1px;background:var(--deep-line)}

/* ---------- Le pack mis en avant ----------
   Même carte, teintée à l'accent : la hiérarchie se joue sur le
   filet et le fond, jamais sur une taille de prix différente. */
.pk-star{background:linear-gradient(150deg,rgba(6,182,212,.15),rgba(6,182,212,.03));
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 15%,transparent),
    color-mix(in srgb,var(--accent) 3%,transparent));
  border-color:rgba(6,182,212,.4);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 34px 76px -44px rgba(6,182,212,.7)}
.pk-star:hover{border-color:rgba(6,182,212,.7);
  border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.pk-star::before{content:"";position:absolute;top:-80px;right:-80px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.22) 0%,transparent 68%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent) 0%,
    transparent 68%);
  pointer-events:none}
.pk-star > *{position:relative}
.pk-badge{position:absolute;top:20px;right:20px;padding:6px 13px;border-radius:999px;
  background:rgba(6,182,212,.18);
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);font-family:var(--mono);font-size:9.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;z-index:2}
.pk-star .pk-cta{border-color:transparent;background:var(--accent);color:#fff;
  box-shadow:0 18px 44px -14px rgba(6,182,212,.8)}
.pk-star .pk-cta:hover{background:var(--accent);color:#fff;
  box-shadow:0 26px 56px -14px rgba(6,182,212,.95)}

/* ---------- Ce que couvre l'hébergement annuel, en pastilles ---------- */
.mn{max-width:1000px;margin:28px auto 0;padding:26px 28px;
  background:rgba(255,255,255,.04);border:1px solid var(--deep-line);border-radius:20px}
.mn-head{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--accent);margin-bottom:18px}
.mn-chips{display:flex;flex-wrap:wrap;gap:9px}
.mn-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--deep-line);font-size:13px;
  color:var(--on-deep)}
.mn-chip svg{width:12px;height:12px;color:var(--accent);flex-shrink:0}
.mn-out{font-size:12px;line-height:1.7;color:var(--on-deep-3);margin:18px 0 0}
.mn-out strong{color:var(--on-deep);font-weight:600}
.mn-out + .mn-out{margin-top:10px}

/* ---------- Ce qui est garanti ----------
   Placé juste après les prix : devant un tarif, la question n'est pas
   « est-ce cher » mais « que se passe-t-il si ça se passe mal ».
   Quatre colonnes coiffées d'un trait à l'accent, sans encadré :
   la liste se lit d'un coup d'œil. */
.gr{max-width:1040px;margin:0 auto}
.gr-grid{display:grid;grid-template-columns:1fr;gap:34px 30px}
.gr-item{display:flex;flex-direction:column}
.gr-top{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:15px;
  border-bottom:2px solid var(--accent)}
.gr-ico{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.gr-ico svg{width:14px;height:14px}
.gr-title{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);margin:0;line-height:1.2}
.gr-text{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0}

/* ---------- Le comparatif ----------
   Un tableau, pas deux listes : c'est la seule forme qui répond
   vraiment à « qu'est-ce que j'ai en plus pour 150 € ». */
.cmp-scroll{max-width:1000px;margin:0 auto;overflow-x:auto}
.cmp{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  overflow:hidden}
.cmp th,.cmp td{border-bottom:1px solid var(--line)}
.cmp thead th{padding:24px 14px 20px;text-align:center;vertical-align:top;
  font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink)}
.cmp thead th:first-child{width:42%}
.cmp-th-note{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink-3)}
.cmp tbody th{text-align:left;padding:14px 16px;font-size:14px;font-weight:500;
  line-height:1.4;color:var(--ink-2);overflow-wrap:break-word}
.cmp tbody td{padding:14px 12px;text-align:center;font-size:13px;line-height:1.4;
  color:var(--ink);overflow-wrap:break-word}
.cmp tbody td strong{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap}
.cmp-yes svg{width:17px;height:17px;color:var(--accent);vertical-align:middle}
.cmp-no{color:var(--ink-3)}
.cmp-star{background:var(--bg-2);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cmp tfoot td{padding:22px 12px;text-align:center;border-bottom:none}
.cmp-cta{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:12px 20px;
  border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);
  text-decoration:none;font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:-.02em;line-height:1.2;transition:border-color .18s,background .18s,color .18s}
.cmp-cta:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.cmp-cta-star{border-color:transparent;background:var(--accent);color:#fff;
  box-shadow:0 14px 32px -14px rgba(6,182,212,.85)}

/* ---------- Ce que ça change ----------
   Trois cartes claires, le chiffre en guise d'icône. */
.pm-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:1040px;margin:0 auto}
.pm-item{display:flex;flex-direction:column;gap:12px;padding:32px 28px;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  transition:border-color .2s ease,transform .2s ease}
.pm-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.pm-num{font-family:var(--display);font-size:46px;font-weight:900;letter-spacing:-.05em;
  line-height:1;color:var(--accent)}
.pm-title{font-family:var(--display);font-size:20px;font-weight:900;letter-spacing:-.035em;
  color:var(--ink);margin:0;padding-top:0;border-top:none}
.pm-text{font-size:14px;line-height:1.75;color:var(--ink-2);margin:0}

/* ---------- Qui réalise le site ---------- */
.me{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px;
  padding:36px 32px;background:var(--bg-2);border-radius:20px}
.me-side .eyebrow{color:var(--accent-ink);letter-spacing:.2em;font-size:10.5px}
.me-side h2{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);margin:0}
.me-body p{font-size:15px;line-height:1.8;color:var(--ink-2);margin:0 0 18px}
.me-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  color:var(--accent-ink);text-decoration:none;padding-bottom:4px;
  border-bottom:1px solid var(--accent-soft);transition:border-color .18s,color .18s}
.me-link:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- Clients réels ---------- */
.lg{max-width:1000px;margin:48px auto 0;padding-top:36px;border-top:1px solid var(--line)}
.lg-intro{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-3);text-align:center;margin:0 0 26px}
.lg-row{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.lg-item{display:flex;align-items:center;justify-content:center;height:44px}
.lg-item img{max-height:44px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.lg-item:hover img{filter:grayscale(0);opacity:1}

/* ---------- Questions de tarif ---------- */
.fq-head{margin-bottom:34px}

/* ---------- Clôture : la maquette ---------- */
.mq{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
  padding:40px;background:var(--deep);border-radius:32px;position:relative;overflow:hidden}
.mq::after{content:"";position:absolute;top:-120px;left:-80px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(6,182,212,.18) 0%,transparent 66%);pointer-events:none}
.mq-text{position:relative;z-index:1;min-width:0}
.mq-text .eyebrow{color:var(--accent);letter-spacing:.2em;font-size:10.5px}
.mq-text .eyebrow::before{background:var(--accent)}
.mq-text h2{font-family:var(--serif);font-size:clamp(30px,3.8vw,44px);line-height:1.04;
  letter-spacing:-.01em;color:#fff;margin-bottom:18px}
.mq-text h2 .it{font-style:italic;color:var(--accent)}
.mq-text p{font-size:15px;line-height:1.75;color:var(--on-deep-2);margin:0 0 28px;
  max-width:460px}
.mq-cta{display:inline-flex;align-items:center;gap:9px;padding:17px 30px;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-family:var(--display);
  font-size:16px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 18px 44px -14px rgba(6,182,212,.85);transition:transform .18s,box-shadow .18s}
.mq-cta:hover{transform:translateY(-2px);box-shadow:0 26px 56px -14px rgba(6,182,212,1)}
.mq-fine{margin-top:14px;font-size:12px;color:var(--on-deep-3)}
.mq-shot{position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--deep-line);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.mq-shot img{display:block;width:100%;height:auto}

/* ---------- Renvoi vers la FAQ tarif, depuis « Comment ça marche » ---------- */
.faq-more{font-size:13px;line-height:1.7;color:var(--ink-3);margin:20px 0 0}
.faq-more a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.faq-more a:hover{color:var(--ink)}

@media (min-width: 620px){
  .gr-grid{grid-template-columns:1fr 1fr}
  .pm-grid{grid-template-columns:1fr 1fr}
}

@media (min-width: 900px){
  .ta{grid-template-columns:repeat(3,1fr);gap:32px;text-align:left}
  .ta li{padding:0;border-bottom:none;border-left:2px solid var(--accent);
    padding-left:20px}
  .pk-grid{grid-template-columns:1fr 1fr;gap:24px}
  .pm-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .me{grid-template-columns:.9fr 1.1fr;gap:44px;padding:44px}
  .mq{grid-template-columns:1fr 1.05fr;gap:48px;padding:52px}
}

@media (min-width: 1040px){
  .gr-grid{grid-template-columns:repeat(4,1fr)}
}

/* Alignement des deux cartes.
   Sans cela, une accroche sur deux lignes décale le prix d'une carte par
   rapport à l'autre. La grille parente porte les cinq rangées et chaque
   carte s'y accroche : intitulé, prix, bouton, liste commencent partout
   à la même hauteur. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 900px){
    .pk-grid{grid-template-rows:auto auto auto auto 1fr}
    .pk{display:grid;grid-row:span 5;grid-template-rows:subgrid}
    .pk-top{min-height:0}
  }
}

@media (max-width: 640px){
  .section.band-dark{margin:8px 0 64px;padding:44px 22px;border-radius:24px}
  .band-rule{padding-bottom:64px}
  .band-rule::before{margin-bottom:48px}
  .pk-head,.gr-head,.cmp-head,.fq-head,.pm-head{margin-bottom:34px}
}

@media (max-width: 560px){
  .pk{padding:30px 22px 28px;border-radius:18px}
  .pk-top{min-height:0}
  .pk-name{font-size:25px;padding-right:96px}
  .pk-price{font-size:44px}
  .pk-badge{top:18px;right:18px;padding:5px 11px}
  .mn{padding:22px 20px}
  .pm-item{padding:26px 22px}
  .cmp thead th{padding:16px 8px 14px;font-size:14px}
  .cmp thead th:first-child{width:40%}
  .cmp-th-note{display:none}
  .cmp tbody th{padding:12px 10px 12px 12px;font-size:12.5px}
  .cmp tbody td{padding:12px 6px;font-size:12px}
  .cmp tfoot td{padding:16px 6px}
  /* « Choisir page unique » ne tient pas dans une colonne de 100 px :
     le nom du pack reste lu par les lecteurs d'écran, l'en-tête de
     colonne le donne à l'œil. */
  .cmp-cta{padding:12px 8px;font-size:12px;width:100%}
  .cmp-cta-long{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .me{padding:26px 22px}
  .lg-row{gap:22px}
  .lg-item{height:34px}
  .lg-item img{max-height:34px}
  .mq{padding:28px 22px;border-radius:24px}
}

/* ---------- Rappel de la formule sur la page Contact ---------- */
.c-devis{background:var(--paper);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:18px;box-shadow:0 0 0 1px var(--accent) inset}
.c-devis-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-ink);margin-bottom:8px}
.c-devis-total{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-.04em;
  color:var(--ink);line-height:1.1}
.c-devis-detail{font-size:13px;line-height:1.55;color:var(--ink-2);margin:8px 0 10px}
.c-devis-back{font-size:12px;color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:2px}

/* ═══════════════════════════════════════════════════════════════
   PAGES DE VILLE  (/creation-site-internet-<commune>/)
   et bloc « zone d'intervention » de l'accueil et du contact.
   Rendus par build.py depuis tools/villes.json.
   Aucune couleur en dur : tout passe par les variables de :root,
   que le panneau de tweaks réécrit à chaud.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- En-tête de la page ville ---------- */
.vl-hero{padding:72px 0 64px;border-bottom:1px solid var(--line);max-width:860px}
.vl-hero h1{font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(40px,6.4vw,76px);line-height:.96;margin-bottom:24px}
.vl-hero h1 .it{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.02em;color:var(--accent)}
.vl-chapo{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:620px;margin-bottom:32px}
.vl-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}

.vl-facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vl-facts li{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.vl-fact-k{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.vl-fact-v{font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:-.02em;color:var(--ink);line-height:1.2}

/* ---------- Le texte de fond ---------- */
.vl-prose{max-width:680px;margin-left:auto}
.vl-prose p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin-bottom:20px}
.vl-prose p:last-child{margin-bottom:0}

.vl-h2{font-family:var(--serif);font-size:clamp(32px,4.2vw,48px);line-height:1.02;
  letter-spacing:-.01em;margin-bottom:16px}
.vl-h2 .it{font-style:italic;color:var(--ok)}
.vl-split-lead{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:460px;margin-bottom:26px}

/* ---------- Les trois choix ---------- */
.vl-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vl-point{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;transition:border-color .18s,transform .18s}
.vl-point:hover{border-color:var(--line-2);transform:translateY(-2px)}
.vl-point-num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--accent);margin-bottom:18px}
.vl-point-title{font-family:var(--display);font-weight:900;font-size:19px;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15;margin-bottom:10px}
.vl-point-text{font-size:14px;line-height:1.62;color:var(--ink-2)}

/* ---------- Pour qui / quelles recherches ---------- */
.vl-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.vl-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vl-tags li{font-size:13px;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.vl-req{list-style:none;display:flex;flex-direction:column;gap:2px}
.vl-req li{display:flex;align-items:center;gap:11px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink);
  font-family:var(--mono)}
.vl-req li:first-child{border-top:1px solid var(--line)}
.vl-req-ico{color:var(--accent);display:flex;flex-shrink:0}

/* ---------- La preuve locale ---------- */
.vl-proof{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.vl-proof-card{max-width:400px;width:100%}
.vl-proof-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Rappel des deux packs ---------- */
.vl-packs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vl-pack{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .18s,transform .18s}
.vl-pack:hover{border-color:var(--accent);transform:translateY(-2px)}
.vl-pack-name{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.vl-pack-price{font-family:var(--display);font-weight:900;font-size:40px;
  letter-spacing:-.05em;color:var(--ink);line-height:1}
.vl-pack-price small{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink-3)}
.vl-pack-note{font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ---------- Zone d'intervention ---------- */
.vl-zone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vl-zone-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-direction:column;gap:6px;
  transition:border-color .18s,transform .18s}
a.vl-zone-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.vl-zone-card.is-base{background:var(--accent-soft);border-color:var(--accent)}
.vl-zone-card.is-current{background:var(--bg-2);border-style:dashed}
.vl-zone-name{font-family:var(--display);font-weight:900;font-size:17px;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.vl-zone-meta{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.vl-zone-go{margin-top:6px;color:var(--accent);display:flex;align-items:center;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.vl-zone-card.is-current .vl-zone-go{color:var(--ink-3)}
.vl-zone-note{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:620px}

/* ---------- Bande des communes, en pied de page ---------- */
.footer-zone{border-top:1px solid rgba(255,255,255,.1);padding:26px 0 4px;margin-bottom:22px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.footer-zone-title{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:#a09a90;flex-shrink:0}
.footer-zone-links{display:flex;flex-wrap:wrap;gap:8px 16px}
.footer-zone-links a{font-size:13.5px;color:#c9c3b8;transition:color .15s}
.footer-zone-links a:hover{color:var(--bg)}
.footer-zone-more{font-size:12.5px;color:#7d786f;flex-basis:100%}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .vl-points{grid-template-columns:1fr}
  .vl-split{grid-template-columns:1fr;gap:44px}
  .vl-proof{grid-template-columns:1fr;gap:32px}
  .vl-proof-card{max-width:none}
  .vl-zone-grid{grid-template-columns:repeat(2,1fr)}
  .vl-facts{grid-template-columns:repeat(2,1fr)}
  .vl-prose{margin-left:0}
}

@media (max-width: 560px){
  .vl-hero{padding:48px 0 44px}
  .vl-chapo{font-size:15.5px}
  .vl-ctas .btn{width:100%;justify-content:center}
  .vl-packs{grid-template-columns:1fr}
  .vl-point{padding:26px 22px}
  .vl-req li{font-size:13px}
  .footer-zone{gap:8px 14px}
}