/* =============================================================
   Weloop — homepage "Le fil" (Design A)
   Ported from the Claude Design canvas
   "Weloop Home A - Le fil.dc.html".

   The canvas is inline-styled with `style-hover` attributes that
   only its runtime understands. Here the same design is expressed
   as real CSS: `wl-` prefixed classes so nothing collides with the
   legacy homepage rules still in styles.css.

   Palette is the design system's: violet #7B3FFF, mint #24C38A,
   ink #14141F, muted #6A6B78, border #E8E9F1, canvas #FCFCFF.
   ============================================================= */

.wl { --ink:#14141F; --muted:#6A6B78; --soft:#8B8C99; --line:#E8E9F1;
      --violet:#7B3FFF; --mint:#24C38A; --canvas:#FCFCFF; }
.wl { background: var(--canvas); color: var(--ink); }

@keyframes wl-pulse { 0%,100% { opacity:.35; } 50% { opacity:.85; } }
@keyframes wl-marq  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wl-spin  { to { transform: rotate(360deg); } }

.wl-wrap { max-width: 1400px; margin: 0 auto; }
.wl-sec { padding: clamp(72px, 11vh, 152px) 40px; }
.wl-sec.is-white { background: #fff; }
.wl-sec.is-canvas { background: var(--canvas); }
.wl-sec.is-dark { background: #0F0A1C; color: #fff; }
@media (max-width: 720px) { .wl-sec { padding-left: 22px; padding-right: 22px; } }

/* ---------- shared type ---------- */
.wl-h2 { margin: 0; font-size: clamp(30px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.wl-h2 .dim { color: var(--soft); }
.wl-lede { margin: 26px 0 0; max-width: 62ch; font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.wl-lede a { font-weight: 700; color: var(--violet); }
.wl-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); font-family: var(--font-mono); }
.wl-kicker .dot { width: 5px; height: 5px; border-radius: 999px; background: #C3BFD8; }
.wl-head-center { max-width: 780px; margin: 0 auto; text-align: center; }

/* ---------- buttons ---------- */
.wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 700; white-space: nowrap; transition: background .2s, box-shadow .2s, border-color .2s, color .2s; }
.wl-btn-sm { height: 42px; padding: 0 22px; font-size: 14.5px; }
.wl-btn-md { height: 48px; padding: 0 26px; font-size: 15px; }
.wl-btn-primary { background: var(--violet); color: #fff; box-shadow: 0 3px 12px rgba(123,63,255,.22); }
.wl-btn-primary:hover { background: #6A29FF; box-shadow: 0 6px 20px rgba(123,63,255,.3); color: #fff; }
.wl-btn-outline { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.wl-btn-outline:hover { border-color: rgba(123,63,255,.45); background: #F7F4FF; color: var(--ink); }
.wl-btn-ink { background: var(--ink); color: #fff; }
.wl-btn-ink:hover { background: #2A2A3A; color: #fff; }
.wl-btn-ghost-light { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.wl-btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }

/* ---------- nav ---------- */
.wl-nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(252,252,255,.82); border-bottom: 1px solid var(--line); }
.wl-nav-row { max-width: 1400px; margin: 0 auto; padding: 0 32px; height: 80px; display: flex; align-items: center; gap: 48px; min-width: 0; }
.wl-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.wl-brand img { height: 28px; width: auto; display: block; }
.wl-nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.wl-nav-links a { color: inherit; }
.wl-nav-links a:hover, .wl-nav-links a.is-active { color: var(--ink); }
.wl-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wl-sov-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 1240px) {
  .wl-nav-row { gap: 24px; }
  .wl-nav-links { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg,#000 0,#000 88%,transparent 100%); mask-image: linear-gradient(90deg,#000 0,#000 88%,transparent 100%); padding-right: 24px; }
  .wl-nav-links::-webkit-scrollbar { display: none; }
  .wl-nav-links a { flex: none; white-space: nowrap; }
  .wl-sov-pill { display: none; }
}
@media (max-width: 620px) {
  .wl-nav-row { gap: 12px; padding: 0 16px; height: 68px; }
  .wl-nav-links { gap: 18px; font-size: 14px; padding-right: 12px; }
  .wl-brand img { height: 24px; }
  .wl-nav-cta .wl-btn { height: 38px; padding: 0 15px; font-size: 13.5px; gap: 6px; }
}
/* the nav CTA carries a short label on phones so it never gets clipped */
.wl-lbl-short { display: none; }
@media (max-width: 620px) { .wl-lbl-long { display: none; } .wl-lbl-short { display: inline; } }

/* ---------- hero ---------- */
.wl-hero { position: relative; padding: clamp(56px, 9vh, 112px) 40px 0; overflow: hidden; }
@media (max-width: 720px) { .wl-hero { padding-left: 22px; padding-right: 22px; } }
.wl-hero-glow { position: absolute; inset: 0; pointer-events: none; }
.wl-hero-glow span { position: absolute; top: -180px; left: 8%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(123,63,255,.07), transparent 68%); filter: blur(30px); }
.wl-hero-grid { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 1080px) { .wl-hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.wl-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(123,63,255,.05); font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 30px; }
.wl-pill i { width: 7px; height: 7px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 0 4px rgba(36,195,138,.18); animation: wl-pulse 3s ease-in-out infinite; }
.wl-h1 { margin: 0; font-size: clamp(38px, 5.2vw, 76px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.wl-grad { background: linear-gradient(112deg,#7B3FFF 0%,#A855F7 48%,#E64BC0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.wl-hero-lede { margin: 28px 0 0; max-width: 600px; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.wl-hero-lede b { color: var(--ink); font-weight: 700; }
.wl-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.wl-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line); }
.wl-hero-stats .n { font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.wl-hero-stats .n span { color: var(--violet); }
.wl-hero-stats .l { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* browser-chrome card, reused across the page */
.wl-card { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px hsl(260 100% 69% / .04), 0 18px 44px hsl(260 100% 69% / .08); }
.wl-card-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #FBFAFF; font-family: var(--font-mono); font-size: 12px; color: var(--soft); }
.wl-dots { display: flex; gap: 6px; }
.wl-dots i { width: 11px; height: 11px; border-radius: 999px; background: #DDDEE9; display: block; }
.wl-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--mint); }
.wl-live i { width: 6px; height: 6px; border-radius: 999px; background: var(--mint); display: block; animation: wl-pulse 2s ease-in-out infinite; }
.wl-card > img { display: block; width: 100%; height: auto; }
.wl-card figcaption { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

/* hero widget mock */
.wl-widget-body { padding: 20px; background: linear-gradient(180deg,#FBFAFF,#fff); }
.wl-widget-id { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #F0EFF7; }
.wl-widget-id img.mark { width: 26px; height: 26px; }
.wl-widget-id .who { line-height: 1.2; }
.wl-widget-id .who b { font-size: 13.5px; }
.wl-widget-id .who div { font-size: 11px; color: var(--soft); display: flex; align-items: center; gap: 5px; }
.wl-widget-id .who i { width: 5px; height: 5px; border-radius: 999px; background: var(--mint); display: block; }
.wl-widget-id .av { margin-left: auto; width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.wl-thread { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.wl-bub-user { align-self: flex-end; max-width: 78%; padding: 11px 14px; border-radius: 16px 16px 4px 16px; background: var(--violet); color: #fff; font-size: 13.5px; line-height: 1.45; }
.wl-bub-agent { align-self: flex-start; max-width: 88%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #F4F3FB; font-size: 13.5px; line-height: 1.5; }
.wl-chip { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 11px; line-height: 1.35; vertical-align: middle; font-weight: 700; color: var(--muted); }
.wl-rec-btn { align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(123,63,255,.4); background: rgba(123,63,255,.05); font-size: 12.5px; font-weight: 700; color: var(--violet); }
.wl-replay { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.wl-replay-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #F0EFF7; font-size: 10.5px; font-weight: 700; color: var(--soft); }
.wl-replay-head .rec { display: inline-flex; align-items: center; gap: 5px; color: #FF4747; }
.wl-replay-head .rec i { width: 6px; height: 6px; border-radius: 999px; background: #FF4747; display: block; animation: wl-pulse 1.6s ease-in-out infinite; }
.wl-replay-head .mask { margin-left: auto; }
.wl-replay-screen { padding: 12px; display: flex; flex-direction: column; gap: 7px; background: #FBFAFF; }
.wl-sk { border-radius: 99px; background: #E8E9F1; display: block; height: 7px; }
.wl-sk.block { height: 26px; border-radius: 8px; background: #EFEDF9; }
.wl-routed { border: 1px solid rgba(36,195,138,.35); background: rgba(36,195,138,.07); border-radius: 14px; padding: 12px 14px; }
.wl-routed-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.wl-routed-row .lbl { color: var(--muted); font-weight: 600; }
.wl-routed-row img { height: 16px; width: auto; }
.wl-routed-row .wl-tag { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(36,195,138,.18); color: #1B8A62; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.wl-routed .meta { margin-top: 6px; font-size: 11.5px; color: var(--soft); font-family: var(--font-mono); }
.wl-widget-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: #FBFAFF; }
.wl-widget-foot > div { padding: 14px 16px; border-right: 1px solid #F0EFF7; }
.wl-widget-foot > div:last-child { border-right: 0; }
.wl-widget-foot .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); font-weight: 700; }
.wl-widget-foot .v { margin-top: 4px; font-size: 17px; font-weight: 800; }
.wl-widget-foot .v.mint { color: var(--mint); }

/* ---------- marquees ---------- */
.wl-marq-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.wl-marq-head span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.wl-marq-head .rule { flex: 1; height: 1px; background: var(--line); }
.wl-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.wl-marq-track { display: flex; width: max-content; animation: wl-marq 34s linear infinite; }
.wl-marq-track > div { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.wl-marq-track img { height: 52px; width: auto; opacity: .85; transition: opacity .25s; }
.wl-marq-track img:hover { opacity: 1; }
.wl-hero-clients { max-width: 1400px; margin: clamp(56px, 8vh, 96px) auto 0; padding-bottom: clamp(48px, 7vh, 88px); }

.wl-plat { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 36px; }
.wl-plat-label { flex: none; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); font-family: var(--font-mono); }
.wl-plat-label i { width: 5px; height: 5px; border-radius: 999px; background: #C3BFD8; display: block; }
.wl-plat .wl-marq { flex: 1; }
.wl-plat .wl-marq-track { animation-duration: 60s; }
.wl-plat .wl-marq-track > div { gap: 44px; padding-right: 44px; }
.wl-plat .wl-marq-track img { height: 34px; opacity: .8; }
@media (max-width: 860px) { .wl-plat { flex-direction: column; align-items: flex-start; gap: 20px; } .wl-plat .wl-marq { width: 100%; } }

/* ---------- statement + metric row ---------- */
.wl-statement { max-width: 1060px; margin: 0 auto; text-align: center; }
.wl-statement p { margin: 0; font-size: clamp(22px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.34; text-wrap: balance; }
.wl-statement .hl { color: var(--violet); }
.wl-metrics { max-width: 1400px; margin: clamp(56px, 8vh, 96px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wl-metrics > div { padding: 4px 36px; border-left: 1px solid #EFEFF5; }
.wl-metrics .idx { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #C3BFD8; font-family: var(--font-mono); }
.wl-metrics .n { margin-top: 14px; font-size: clamp(32px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.wl-metrics .n span { color: var(--violet); font-size: .6em; }
.wl-metrics .l { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 980px) { .wl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .wl-metrics > div { padding: 4px 24px; } }
@media (max-width: 560px) { .wl-metrics { grid-template-columns: 1fr; } }

/* ---------- the thread (le fil) ---------- */
.wl-story-head { max-width: 1160px; margin: 0 auto; }
.wl-story-head .wl-h2 { max-width: 20ch; }
.wl-story { margin: clamp(48px, 8vh, 88px) auto 0; max-width: 1160px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .wl-story { grid-template-columns: 1fr; } .wl-rail-wrap { position: static !important; } }
.wl-rail-wrap { position: sticky; top: 112px; }
.wl-rail-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-family: var(--font-mono); margin-bottom: 18px; }
.wl-rail { display: flex; flex-direction: column; }
.wl-rail button {
  all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0 14px 20px; border-left: 2px solid var(--line);
  transition: border-color .3s, color .3s;
}
.wl-rail button .num { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: #B9B5CC; transition: color .3s; }
.wl-rail button .lbl { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--muted); transition: color .3s; }
.wl-rail button:hover .lbl { color: var(--ink); }
.wl-rail button.is-on { border-left-color: var(--violet); }
.wl-rail button.is-on .num { color: var(--violet); }
.wl-rail button.is-on .lbl { color: var(--ink); font-weight: 700; }
.wl-rail button:focus-visible { outline: 2px solid rgba(123,63,255,.5); outline-offset: 3px; border-radius: 4px; }
.wl-panels { display: flex; flex-direction: column; gap: 20px; min-height: 640px; }
@media (max-width: 980px) { .wl-panels { min-height: 0; } }
.wl-panel { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px hsl(260 100% 69% / .04), 0 6px 18px hsl(260 100% 69% / .05); }
.wl-panel.is-on { border-color: rgba(123,63,255,.28); box-shadow: 0 2px 6px hsl(260 100% 69% / .06), 0 18px 42px hsl(260 100% 69% / .10); }
.wl-panel > header { display: flex; gap: 18px; padding: 32px 40px 28px; }
.wl-panel > header .step-n { flex: none; width: 34px; height: 34px; border-radius: 11px; background: #F4F1FE; color: var(--violet); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; font-family: var(--font-mono); transition: background .3s, color .3s; }
.wl-panel.is-on > header .step-n { background: var(--violet); color: #fff; }
.wl-panel > header h3 { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.wl-panel > header p { margin: 10px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.wl-panel > header p b { color: var(--ink); font-weight: 600; }
.wl-panel-body { padding: 28px 40px 34px; border-top: 1px solid #F2F1F8; background: #FCFCFE; }
@media (max-width: 560px) { .wl-panel > header { padding: 24px 20px 20px; } .wl-panel-body { padding: 20px 20px 26px; } }

.wl-ctx { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.wl-ctx b { color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; }
.wl-searching { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.wl-searching i { width: 13px; height: 13px; border-radius: 999px; border: 2px solid #E4DFF6; border-top-color: var(--violet); display: block; animation: wl-spin 1.1s linear infinite; }
.wl-msgs { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.wl-m { font-size: 15px; line-height: 1.55; padding: 13px 16px; }
.wl-m .who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.wl-m .who img { width: 18px; height: 18px; }
.wl-m .who img.face { border-radius: 999px; object-fit: cover; }
.wl-m .who span { font-size: 11.5px; font-weight: 700; }
.wl-m-agent { align-self: flex-start; max-width: 86%; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line); }
.wl-m-agent .who span { color: var(--violet); }
.wl-m-user { align-self: flex-end; max-width: 80%; border-radius: 16px 16px 4px 16px; background: var(--violet); color: #fff; }
.wl-m-user .who span { opacity: .85; }

.wl-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid #F0EFF7; }
.wl-row:last-child { border-bottom: 0; }
.wl-row .ck { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; background: rgba(36,195,138,.14); color: #1B8A62; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.wl-row .wl-rowbody { flex: 1; min-width: 0; }
.wl-row .t { font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.wl-row .s { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.wl-row .wl-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(36,195,138,.12); color: #1B8A62; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.wl-chip-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: #F4F3FB; border: 1px solid var(--line); font-size: 11px; line-height: 1.35; vertical-align: middle; font-weight: 600; color: var(--muted); }
.wl-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: 13px; color: var(--soft); line-height: 1.55; }
.wl-note i { color: #B9B5CC; font-style: normal; }
.wl-sub-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-family: var(--font-mono); }
.wl-sub-label.violet { color: var(--violet); }
.wl-route-flow { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.wl-route-flow .node { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.wl-route-flow .node.wl-dest { border-color: rgba(123,63,255,.28); }
.wl-route-flow .node .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #F4F1FE; color: var(--violet); display: grid; place-items: center; font-size: 15px; }
.wl-route-flow .node.wl-dest .ic { background: var(--violet); color: #fff; font-size: 14px; font-weight: 800; }
.wl-route-flow .node span.t { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.wl-route-flow .node .sub { font-weight: 500; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; }
.wl-route-flow .arrow { flex: none; color: #B9B5CC; }
@media (max-width: 620px) { .wl-route-flow { flex-direction: column; align-items: stretch; } .wl-route-flow .arrow { transform: rotate(90deg); align-self: center; } }

.wl-track { display: flex; align-items: center; }
.wl-track .d { width: 11px; height: 11px; border-radius: 999px; background: var(--mint); flex: none; }
.wl-track .d.open { background: #fff; border: 2px solid var(--violet); }
.wl-track .l { flex: 1; height: 2px; background: var(--mint); }
.wl-track .l.open { background: repeating-linear-gradient(90deg,#DEDCE9 0 5px,transparent 5px 10px); }
.wl-track-labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.wl-track-labels span:last-child { color: var(--violet); font-weight: 700; }
.wl-scores { display: flex; gap: 36px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #F0EFF7; }
.wl-scores .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--soft); }
.wl-scores .v { margin-top: 6px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: #1B8A62; }
.wl-scores .v small { font-size: .5em; }

/* closing statement band */
.wl-closing { position: relative; overflow: hidden; margin-top: clamp(64px, 10vh, 120px); padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 60px); border-radius: 26px; background: linear-gradient(120deg,#1A1030 0%,#2A1350 55%,#3A1560 100%); display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.wl-closing .glow { position: absolute; top: -120px; right: -60px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(230,75,192,.18), transparent 66%); filter: blur(24px); }
.wl-faces { position: relative; z-index: 2; display: flex; align-items: center; }
.wl-faces img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; border: 3px solid #2A1350; }
.wl-faces img + img { margin-left: -18px; }
.wl-closing-copy { position: relative; z-index: 2; flex: 1; min-width: 300px; }
.wl-closing-copy p { margin: 0; font-size: clamp(19px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.28; color: #fff; text-wrap: pretty; }
.wl-closing-copy .hl { color: #C4A0FF; }
.wl-closing-copy .wl-btn { margin-top: 18px; height: 44px; padding: 0 22px; font-size: 14.5px; }

/* ---------- feature grid ---------- */
.wl-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 7vh, 72px); background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
@media (max-width: 980px) { .wl-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wl-feats { grid-template-columns: 1fr; } }
.wl-feats article { padding: clamp(28px, 4vw, 48px) clamp(22px, 3vw, 40px); background: #fff; transition: background .25s; }
.wl-feats article:hover { background: #FBFAFF; }
.wl-feats .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 20px; }
.wl-feats h3 { margin: 20px 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.wl-feats p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.wl-feats p b { color: var(--ink); }

/* ---------- mesure split ---------- */
.wl-split { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) { .wl-split { grid-template-columns: 1fr; } }
.wl-quote { margin: 36px 0 0; padding: 22px 26px; border-left: 3px solid var(--violet); background: #FBFAFF; border-radius: 0 16px 16px 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.wl-quote em { color: var(--violet); font-style: normal; font-weight: 700; }
.wl-card-foot { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line); background: #FBFAFF; }
.wl-card-foot .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(123,63,255,.1); color: var(--violet); display: grid; place-items: center; }
.wl-card-foot .t { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.wl-card-foot .t b { color: var(--ink); }

/* ---------- benefits ---------- */
.wl-bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 7vh, 72px); }
@media (max-width: 980px) { .wl-bens { grid-template-columns: 1fr; max-width: 460px; } }
.wl-ben { padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 36px); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px hsl(260 100% 69% / .04), 0 6px 18px hsl(260 100% 69% / .05); transition: box-shadow .3s; }
.wl-ben:hover { box-shadow: 0 2px 6px hsl(260 100% 69% / .06), 0 20px 46px hsl(260 100% 69% / .10); }
.wl-ben .top { display: flex; align-items: center; gap: 12px; }
.wl-ben .top img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.wl-ben .top span { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.wl-ben h3 { margin: 26px 0 0; font-size: clamp(21px, 2vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.wl-ben .wl-metric { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.wl-ben .wl-metric .n { font-size: clamp(34px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--violet); }
.wl-ben .wl-metric .l { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.wl-ben .wl-metric .l b { color: var(--ink); }
.wl-ben.is-dark { background: linear-gradient(150deg,#1A1030,#2E1450); border-color: rgba(123,63,255,.4); box-shadow: 0 1px 2px hsl(260 100% 69% / .06), 0 20px 48px hsl(260 100% 69% / .12); color: #fff; }
.wl-ben.is-dark .top span { color: #C4BCDE; }
.wl-ben.is-dark .wl-metric { border-top-color: rgba(255,255,255,.14); }
.wl-ben.is-dark .wl-metric .n { color: #C4A0FF; }
.wl-ben.is-dark .wl-metric .l { color: #C4BCDE; }
.wl-ben.is-dark .wl-metric .l b { color: #fff; }
.wl-ben .foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: #A79BC8; line-height: 1.5; }

.wl-users { margin-top: clamp(36px, 6vh, 56px); display: flex; align-items: center; gap: 32px; }
.wl-users .lbl { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.wl-users .lbl b { color: var(--ink); font-weight: 800; }
.wl-users .wl-marq { flex: 1; }
.wl-users .wl-marq-track { animation-duration: 70s; }
.wl-users .wl-marq-track > div { gap: 12px; padding-right: 12px; }
.wl-user-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.wl-user-pill img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; }
@media (max-width: 860px) { .wl-users { flex-direction: column; align-items: flex-start; gap: 18px; } .wl-users .wl-marq { width: 100%; } }

/* ---------- dashboard (dark) ---------- */
.wl-sec.is-dark .wl-h2 { color: #fff; }
.wl-sec.is-dark .wl-h2 .dim { color: #8B80AC; }
.wl-sec.is-dark .wl-lede { color: #A79BC8; }
.wl-dash { margin-top: clamp(36px, 6vh, 56px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.wl-dash-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wl-dash-bar .title { font-size: 13px; font-weight: 700; color: #C4BCDE; }
.wl-dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.08); }
@media (max-width: 1200px) { .wl-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wl-dash-grid { grid-template-columns: 1fr; } }
.wl-dash-cell { padding: 26px 24px; background: #0F0A1C; }
.wl-dash-cell .k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #A79BC8; }
.wl-dash-cell .n { margin-top: 14px; font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.wl-dash-cell .n span { font-size: .55em; }
.wl-dash-cell .n .v { color: var(--violet); }
.wl-dash-cell .n .m { color: var(--mint); }
.wl-spark { height: 34px; margin-top: 16px; display: block; }
.wl-prio { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.wl-prio div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #D8D2EA; }
.wl-prio i { width: 7px; height: 7px; border-radius: 999px; flex: none; display: block; }
.wl-redirects { margin-top: 44px; }
.wl-redirects .lbl { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8B80AC; font-family: var(--font-mono); margin-bottom: 20px; }
.wl-redirects .lbl i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.3); display: block; }
.wl-redirects .wl-marq-track { animation-duration: 32s; }
.wl-redirects .wl-marq-track > div { gap: 16px; padding-right: 16px; }
.wl-redirects .chip { display: grid; place-items: center; height: 64px; padding: 0 32px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); font-size: 14px; font-weight: 700; color: #D8D2EA; white-space: nowrap; }
.wl-redirects .chip img { height: 30px; width: auto; opacity: 1; }
.wl-redirects .chip img.invert { height: 24px; filter: brightness(0) invert(1); opacity: .9; }

/* ---------- sovereignty ---------- */
.wl-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(44px, 7vh, 68px); }
@media (max-width: 980px) { .wl-trust { grid-template-columns: 1fr; } }
.wl-trust > div { padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--canvas); border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.wl-trust > div:hover { box-shadow: 0 2px 6px hsl(260 100% 69% / .06), 0 20px 46px hsl(260 100% 69% / .10); border-color: rgba(123,63,255,.25); }
.wl-trust .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.wl-trust h3 { margin: 22px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.wl-trust p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.wl-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.wl-badges span { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--canvas); font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- pricing ---------- */
.wl-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 7vh, 72px); align-items: stretch; }
@media (max-width: 980px) { .wl-prices { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.wl-price { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--canvas); border: 1px solid var(--line); transition: box-shadow .3s; }
.wl-price:hover { box-shadow: 0 2px 6px hsl(260 100% 69% / .06), 0 20px 46px hsl(260 100% 69% / .10); }
.wl-price.is-featured { position: relative; background: #fff; border: 2px solid rgba(123,63,255,.35); box-shadow: 0 1px 2px hsl(260 100% 69% / .05), 0 20px 48px hsl(260 100% 69% / .10); }
.wl-price .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.wl-price .tier { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.wl-price .for { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.wl-price .amount { margin-top: 26px; display: flex; align-items: baseline; gap: 4px; }
.wl-price .amount .num { font-size: clamp(42px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.wl-price .amount .cur { font-size: 26px; font-weight: 800; }
.wl-price .amount .per { font-size: 15px; color: var(--muted); font-weight: 600; }
.wl-price .quote { margin-top: 26px; font-size: 36px; font-weight: 800; letter-spacing: -.035em; line-height: 1.35; }
.wl-price .value { margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: rgba(36,195,138,.07); border: 1px solid rgba(36,195,138,.22); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-price .value .k { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wl-price .value .v { font-size: 16px; font-weight: 800; color: #1B8A62; }
.wl-price .value .v small { font-size: .7em; font-weight: 600; }
.wl-price .csm { margin-top: 18px; display: flex; align-items: center; gap: 11px; }
.wl-price .csm .av { position: relative; flex: none; }
.wl-price .csm .av img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; display: block; }
.wl-price .csm .av i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 999px; background: var(--mint); border: 2px solid var(--canvas); display: block; }
.wl-price.is-featured .csm .av i { border-color: #fff; }
.wl-price .csm b { font-size: 13.5px; }
.wl-price .cta { margin-top: auto; padding-top: 26px; display: block; }
.wl-price .cta .wl-btn { width: 100%; height: 52px; font-size: 15px; }

/* ---------- FAQ ---------- */
.wl-faq { max-width: 940px; margin: clamp(48px, 7vh, 72px) auto 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.wl-faq details { border-bottom: 1px solid var(--line); }
.wl-faq details:last-child { border-bottom: 0; }
.wl-faq summary { cursor: pointer; list-style: none; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px); font-size: clamp(16px, 1.6vw, 17.5px); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 16px; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary .sign { margin-left: auto; color: var(--violet); font-size: 20px; line-height: 1; flex: none; }
.wl-faq details[open] summary .sign { transform: rotate(45deg); }
.wl-faq .answer { padding: 0 clamp(22px, 3vw, 34px) 32px; font-size: 15.5px; line-height: 1.72; color: var(--muted); max-width: 74ch; text-wrap: pretty; }

/* ---------- final CTA ---------- */
.wl-cta { max-width: 1400px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(125deg,#160E28 0%,#2A1350 50%,#3E1663 100%); padding: clamp(36px, 5vw, 68px); }
.wl-cta .g1 { position: absolute; top: -160px; left: 30%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(230,75,192,.16), transparent 66%); filter: blur(28px); }
.wl-cta .g2 { position: absolute; bottom: -200px; right: 5%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(123,63,255,.22), transparent 66%); filter: blur(28px); }
.wl-cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: start; }
@media (max-width: 1080px) { .wl-cta-grid { grid-template-columns: 1fr; gap: 36px; } }
.wl-cta h2 { margin: 20px 0 0; font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #fff; text-wrap: balance; }
.wl-cta .wl-ctalede { margin: 20px 0 0; font-size: 17.5px; line-height: 1.6; color: #C4BCDE; max-width: 52ch; }
.wl-cta ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .wl-cta ul { grid-template-columns: 1fr; } }
.wl-cta li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #E4DFF2; }
.wl-cta li i { width: 20px; height: 20px; border-radius: 999px; background: rgba(63,224,166,.16); color: #3FE0A6; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; font-style: normal; }
.wl-cta-social { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.wl-cta-social p { margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8B80AC; }
.wl-cta-social div { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.wl-cta-social img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.wl-booking { position: relative; border-radius: 20px; background: #fff; min-height: 560px; overflow: hidden; }
.wl-booking-fallback { position: absolute; inset: 0; z-index: 2; background: #fff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.wl-booking-fallback img { width: 44px; height: 44px; }
.wl-booking-fallback .t { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.wl-booking-fallback .s { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 34ch; }

/* ---------- breadcrumb (subpages) ---------- */
.wl-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--soft); flex-wrap: wrap; }
.wl-crumb a { color: var(--soft); }
.wl-crumb a:hover { color: var(--ink); }
.wl-crumb .here { color: var(--ink); }

/* ---------- team page (/equipe/) ---------- */
.wl-rule-head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.wl-rule-head span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.wl-rule-head .rule { flex: 1; height: 1px; background: var(--line); }

.wl-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .wl-people { grid-template-columns: 1fr; } }
.wl-person {
  display: flex; align-items: center; gap: 28px; padding: clamp(24px, 3vw, 36px);
  border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px hsl(260 100% 69% / .04), 0 6px 18px hsl(260 100% 69% / .05);
  transition: box-shadow .3s, border-color .3s;
}
.wl-person:hover { box-shadow: 0 2px 6px hsl(260 100% 69% / .06), 0 20px 46px hsl(260 100% 69% / .10); border-color: rgba(123,63,255,.25); }
.wl-person > img { flex: none; width: 116px; height: 116px; border-radius: 20px; object-fit: cover; }
@media (max-width: 520px) { .wl-person { flex-direction: column; align-items: flex-start; gap: 18px; } .wl-person > img { width: 92px; height: 92px; } }
.wl-person .info { flex: 1; min-width: 0; }
.wl-person .name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-person h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.wl-person .badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.wl-person .badge.founder { background: rgba(123,63,255,.1); color: var(--violet); }
.wl-person .badge.partner { background: rgba(36,195,138,.14); color: #1B8A62; }
.wl-person .role { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--violet); }

.wl-linkedin-row { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.wl-linkedin-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .2s, color .2s; }
.wl-linkedin-btn:hover { border-color: rgba(123,63,255,.4); color: var(--violet); }

.wl-band { max-width: 1400px; margin: 0 auto; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: 22px; background: var(--canvas); border: 1px solid var(--line); }
.wl-band.split { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.wl-band.split > div { flex: 1; min-width: 300px; }
.wl-band p { margin: 16px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -.025em; line-height: 1.32; }
.wl-band p .hl { color: var(--violet); }
.wl-band .kima { height: 64px; width: auto; object-fit: contain; }
.wl-partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 44px; margin-top: 26px; }
.wl-partner-logos img { width: auto; object-fit: contain; }
.wl-partner-logos .p-mistral { height: 34px; }
.wl-partner-logos .p-scaleway { height: 30px; }

/* centred CTA variant used on the team page */
.wl-cta.is-center { text-align: center; padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 68px); }
.wl-cta.is-center > div { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.wl-cta.is-center .wl-kicker { justify-content: center; }
.wl-cta.is-center .lede { margin-left: auto; margin-right: auto; }

/* ---------- footer ---------- */
.wl-footer { padding: clamp(56px, 8vh, 96px) 40px 48px; background: var(--canvas); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .wl-footer { padding-left: 22px; padding-right: 22px; } }
.wl-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 860px) { .wl-footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; } }
.wl-footer-tag { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.wl-footer .social { display: inline-grid; place-items: center; margin-top: 20px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); transition: color .2s, border-color .2s; }
.wl-footer .social:hover { color: var(--violet); border-color: rgba(123,63,255,.4); }
.wl-footer h5 { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.wl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.wl-footer ul a { color: var(--muted); }
.wl-footer ul a:hover { color: var(--ink); }
.wl-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); }
.wl-footer-bottom a { color: var(--soft); }
.wl-footer-bottom a:hover { color: var(--ink); }
.wl-footer-bottom .wl-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.wl-footer-bottom .host { margin-left: auto; font-family: var(--font-mono); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .wl-marq-track, .wl-pill i, .wl-live i, .wl-searching i, .wl-replay-head .rec i { animation: none !important; }
}

/* =============================================================
   Legacy reset — styles.css still carries the old homepage's
   "one screen per section" rule, keyed by id:

     @media (min-width: 1000px) {
       .hero, #mesure, #resultats, #equipe, #tarifs, #faq, #demo {
         min-height: 100vh; display: flex;
         flex-direction: column; justify-content: safe center;
         scroll-snap-align: start; }
     }

   The redesigned homepage reuses those ids as anchors, so it was
   inheriting a 100vh floor on five sections (hence the vertical
   emptiness) and a flex context that let .wl-wrap size to its
   widest child instead of the column (hence horizontal overflow
   around 1024px). An id outranks a class, so the reset has to be
   id-qualified too. Scoped to body.wl so the subpages, which still
   use the legacy stylesheet, are untouched.
   ============================================================= */
@media (min-width: 1000px) {
  body.wl #solution, body.wl #plateforme, body.wl #mesure,
  body.wl #resultats, body.wl #souverainete, body.wl #tarifs,
  body.wl #faq, body.wl #demo, body.wl #equipe {
    min-height: 0;
    display: block;
    justify-content: normal;
    scroll-snap-align: none;
  }
}
/* the same rule puts proximity snapping on <html>; the redesign scrolls freely */
html:has(body.wl) { scroll-snap-type: none; }