/* ============================================================
   NEXTEPAY — feuille de style partagée (pages internes)
   Palette pop : jaune #FFD60A + aurora (rose/violet/cyan) sur nuit
   ============================================================ */
:root{
  --nuit:#0B1320; --ardoise:#1F2937; --gris:#6B7280; --gris-clair:#F1F5F9; --white:#fff;
  --or1:#FFD60A; --or2:#FFB300;
  --grad-or:linear-gradient(135deg,#FFE14D 0%,#FFC400 55%,#FF9E00 100%);
  --violet:#8B5CF6; --violet-txt:#7C3AED; --cyan:#22D3EE; --rose:#FB7185;
  --grad-aurora:linear-gradient(115deg,#FFD60A 0%,#FB7185 35%,#8B5CF6 68%,#22D3EE 100%);
  --grad-aurora-light:linear-gradient(115deg,#F59E0B 0%,#EC4899 48%,#7C3AED 100%);
  --ok:#22C55E; --err:#E5484D;
  --radius:22px; --shadow:0 10px 40px rgba(11,19,32,.08); --shadow-sm:0 4px 18px rgba(11,19,32,.06);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scrollbar-gutter:stable reserves the scrollbar's width on EVERY page, so a
   short page (no scrollbar) and a tall one (scrollbar) have the same viewport
   width. Without it the centred nav pill shifts by the scrollbar width between
   pages and the active tab appears to jump mid-navigation. Single-sourced here;
   do NOT duplicate it in home.css. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--nuit);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";display:block;height:3px;background:var(--grad-aurora)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:600}
a{text-decoration:none;color:inherit}
.muted{color:var(--gris)}
.gold{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.num{font-variant-numeric:tabular-nums}

/* ---------- NAV (pilule flottante) ----------
   Aligné sur le shell de la console (.topnav-pill / .topnav-links) : mêmes
   tokens visuels (blur 14px, ombre douce, onglet actif = pilule nuit pleine).
   La géométrie reste celle de la vitrine (hauteur 62px, max-width 1060px), car
   cette nav porte aussi le logo et le CTA, et passe derrière le hero.
   Source unique : ces règles ne doivent PAS être dupliquées dans home.css. */
nav{position:sticky;top:14px;z-index:60;padding:0 16px;margin-bottom:-76px}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:18px;max-width:1060px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 10px 34px rgba(15,23,42,.12);padding:0 12px 0 26px}
.brand{display:flex;align-items:center;gap:10px}
nav .links{display:flex;gap:4px;align-items:center;position:relative}
nav .links a{position:relative;z-index:1;color:var(--nuit);font-size:14.5px;font-weight:600;padding:9px 17px;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
nav .links a:not(.on):hover{background:var(--gris-clair)}
nav .links a:active{transform:scale(.95)}
nav .links a:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
/* Active tab. With JS the sliding .nav-ind draws the dark pill behind the text,
   so the link only needs white text. Without JS there is no indicator, so keep
   the solid pill on the link itself (else white text on the light bar = invisible). */
html.js nav .links a.on{color:#fff}
html:not(.js) nav .links a.on{color:#fff;background:var(--nuit)}
/* The sliding pill: one absolutely-positioned element behind the tabs (z-index:0,
   text is z-index:1). JS moves it with transform/width to the active tab. */
.nav-ind{position:absolute;top:0;left:0;height:0;width:0;background:var(--nuit);border-radius:999px;z-index:0;pointer-events:none;opacity:0;transition:transform .28s var(--ease),width .24s var(--ease),opacity .2s var(--ease)}
/* The active tab is a shared element mid-navigation — never let a stray press
   transform interfere with its captured geometry. */
nav .links a.on:active{transform:none}
@media(max-width:920px){nav .links{display:none}}

/* ---------- BURGER + MOBILE MENU (≤920px) ----------
   Burger lives in the nav pill; the sheet lives OUTSIDE <nav> (see base.html)
   so it stays clear of the desktop nav and its sliding pill indicator. Source
   unique : ces règles restent ici, jamais dupliquées dans home.css. */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;flex:none;padding:0;background:transparent;border:none;border-radius:12px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;margin:0 auto;border-radius:2px;background:var(--nuit);transition:transform .2s var(--ease),opacity .2s var(--ease)}
.nav-burger:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow-y:auto;
  background:var(--nuit);color:#fff;
  padding-top:calc(env(safe-area-inset-top,0px) + 92px);
  padding-right:max(24px,env(safe-area-inset-right,0px));
  padding-bottom:max(24px,env(safe-area-inset-bottom,0px));
  padding-left:max(24px,env(safe-area-inset-left,0px));
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mobile-menu.open{opacity:1;transform:none}
.mobile-menu[hidden]{display:none}
/* flex:1 is what lets `.locale-switch{margin-top:auto}` actually pin the language
   list to the bottom of the sheet — without it the rule is inert and the lower
   half of the screen stays empty. */
.mobile-menu .mm-inner{flex:1;display:flex;flex-direction:column;min-height:0}
.mobile-menu .mm-links{display:flex;flex-direction:column;gap:2px}
.mobile-menu .mm-links a{display:flex;align-items:center;min-height:52px;padding:10px 14px;border-radius:14px;
  font-size:25px;font-weight:600;letter-spacing:-.02em;color:#fff;
  transition:background .2s var(--ease),color .2s var(--ease)}
.mobile-menu .mm-links a:active{background:rgba(255,255,255,.06)}
.mobile-menu .mm-links a.on{color:var(--or1)}
.mobile-menu .mm-links a:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.mobile-menu .btn-disabled{align-self:flex-start;margin-top:22px}

/* The locale switcher is authored for the FOOTER: a 12.5px horizontal wrap-list
   with ~18px tap targets. Inside the sheet it must become a real touch list —
   one full-width row per locale, 48px tall, badge pushed right. Scoped to
   .mobile-menu so the footer keeps its own compact styling. */
.mobile-menu .locale-switch{margin-top:auto;flex-direction:column;align-items:stretch;gap:0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.10)}
.mobile-menu .locale-switch .ls-globe{display:none}
.mobile-menu .locale-switch .ls-item{display:flex;align-items:center;justify-content:flex-start;
  min-height:48px;padding:0 14px;border-radius:12px;font-size:15.5px;border-bottom:none}
.mobile-menu .locale-switch .ls-item:active{background:rgba(255,255,255,.06)}
.mobile-menu .locale-switch .ls-item:hover{border-bottom-color:transparent}
.mobile-menu .locale-switch .ls-soon{opacity:.62}
.mobile-menu .locale-switch .ls-soon .soon-badge{margin-left:auto}
@media(prefers-reduced-motion:reduce){.mobile-menu{transition:none}}
@media(min-width:921px){.mobile-menu{display:none}}
@media(max-width:920px){
  nav{z-index:210}
  /* Sheet open: pin the pill to the viewport top so a geo suggestion banner
     (which pushes the sticky nav down at scroll 0) can't overlap the sheet's
     first link. Matches the sheet's 92px top padding. */
  html.menu-open nav{position:fixed;top:14px;left:0;right:0}
  .nav-burger{display:flex}
  nav .wrap .btn-disabled{display:none}
  /* 44px minimum touch targets on small screens */
  .btn-sm{padding:13px 18px}
  nav .links a{padding:13px 17px}
}

/* ---------- BOUTONS ---------- */
.btn{display:inline-block;border-radius:999px;padding:13px 26px;font-weight:600;font-size:14.5px;cursor:pointer;border:none;font-family:inherit;transition:transform .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.btn-nuit{background:var(--nuit);color:#fff}
.btn-nuit:hover{box-shadow:0 10px 28px rgba(139,92,246,.35)}
.btn-gold{background:var(--grad-or);color:var(--nuit);box-shadow:0 6px 24px rgba(255,214,10,.35)}
.btn-gold:hover{box-shadow:0 12px 36px rgba(255,179,0,.55)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5)}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn-destructive{background:rgba(229,72,77,.10);color:var(--err);border:1px solid rgba(229,72,77,.35)}
.btn-destructive:hover{background:rgba(229,72,77,.16);box-shadow:0 8px 24px rgba(229,72,77,.22)}

/* ---------- PAGE HERO (pages internes) ---------- */
.page-hero{background:var(--nuit);color:#fff;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-220px;right:-120px;background:conic-gradient(from 120deg,#FFD60A,#FB7185,#8B5CF6,#22D3EE,#FFD60A);filter:blur(130px);opacity:.35;animation:blob 16s ease-in-out infinite alternate;pointer-events:none}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at -5% 120%,rgba(34,211,238,.16),transparent 60%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;padding:165px 28px 84px;text-align:center}
.page-hero h1{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.035em;margin-top:22px}
.page-hero h1 em{font-style:normal;background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{margin:20px auto 0;color:#aebacc;max-width:56ch;font-size:17px}
.page-hero .cta-row{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@keyframes blob{to{transform:translate(-90px,80px) scale(1.18)}}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:2.5px;font-weight:600;color:var(--or1);text-transform:uppercase;background:rgba(255,214,10,.09);border:1px solid rgba(255,214,10,.28);border-radius:999px;padding:8px 16px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-aurora);flex:none}

/* ---------- SECTIONS ---------- */
section{padding:84px 0}
section.alt{background:var(--gris-clair)}
.sec-num{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;color:var(--violet-txt);letter-spacing:2px;text-transform:uppercase;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.2);border-radius:999px;padding:8px 16px}
.sec-num::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-aurora);flex:none}
.dark-sec .sec-num{color:var(--or1);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.sec-title{font-size:clamp(30px,4vw,48px);margin:16px 0 10px;letter-spacing:-.03em}
.sec-title em{font-style:normal;background:var(--grad-aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-sub{font-size:16.5px;color:var(--gris);max-width:66ch}
.center{text-align:center}
.center .sec-sub{margin:0 auto}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
@media(max-width:920px){.split{grid-template-columns:minmax(0,1fr);gap:40px}}
.split ul{list-style:none;margin-top:24px}
.split ul li{padding:9px 0 9px 30px;position:relative;font-size:15px;color:var(--ardoise)}
.split ul li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:8px;border-left:2.5px solid var(--or2);border-bottom:2.5px solid var(--or2);transform:rotate(-45deg)}
.split .cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.split-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- DARK SECTION ---------- */
.dark-sec{background:var(--nuit);color:#fff;position:relative;overflow:hidden}
.dark-sec::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 92% -5%,rgba(139,92,246,.28),transparent 60%),radial-gradient(700px 360px at 2% 110%,rgba(34,211,238,.18),transparent 60%),radial-gradient(500px 280px at 60% 0%,rgba(255,214,10,.1),transparent 60%);pointer-events:none}
.dark-sec .wrap{position:relative;z-index:1}
.dark-sec .sec-sub{color:#aebacc}
.dark-sec .split ul li{color:#c7d0dd}

/* ---------- CODE ---------- */
.codecard{background:#0f1729;border-radius:var(--radius);box-shadow:0 18px 60px rgba(11,19,32,.35);overflow:hidden;font-size:13.5px;max-width:460px;margin:0 auto}
.codecard .ch{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);color:#8b97a8;font-size:12px;font-weight:600}
.codecard pre{padding:22px 24px;color:#c7d0dd;line-height:1.75;overflow-x:auto;font-family:'SF Mono',Consolas,monospace;font-size:13px}
.codecard .k{color:#FFD60A}.codecard .s{color:#7ee0a3}.codecard .c{color:#5b6b82}
.codecard .resp{padding:12px 24px;border-top:1px solid rgba(255,255,255,.07);font-family:'SF Mono',Consolas,monospace;font-size:12.5px;color:#7ee0a3}

/* ---------- BENTO ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:175px;gap:18px;margin-top:46px;text-align:left}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.b{border-radius:var(--radius);border:1px solid #eef1f5;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;position:relative;padding:24px;transition:transform .15s,box-shadow .15s}
.b:hover{transform:translateY(-4px);box-shadow:0 14px 44px rgba(139,92,246,.18);border-color:rgba(139,92,246,.35)}
.b h4{font-size:16.5px}
.b p{font-size:13.5px;color:var(--gris);margin-top:4px}
.b.s2{grid-column:span 2}
.b.r2{grid-row:span 2}
@media(max-width:560px){.b.s2{grid-column:auto}}
.b.photo{padding:0}
.b.photo img{width:100%;height:100%;object-fit:cover;display:block}
.b.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;background:linear-gradient(transparent,rgba(11,19,32,.88));color:#fff}
.b.photo .cap p{color:#c7d0dd}
.b.nuit{background:var(--nuit);border-color:var(--nuit);color:#fff}
.b.nuit p{color:#8b97a8}
.b .big{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.b.center-c{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.b .mono{font-family:'SF Mono',Consolas,monospace;font-size:12.5px;background:rgba(255,255,255,.07);padding:11px 14px;border-radius:10px;margin-top:14px;white-space:nowrap;overflow:hidden}
.icchip{width:44px;height:44px;flex:none;border-radius:13px;background:var(--nuit);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.chat{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.bub{max-width:92%;padding:9px 12px;border-radius:12px;font-size:12.5px;line-height:1.45}
.bub.out{background:var(--gris-clair);border-top-left-radius:4px;align-self:flex-start}
.bub.in{background:var(--nuit);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.bub.pay{background:rgba(34,197,94,.12);color:#15803d;align-self:flex-end;font-weight:600}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:stretch}
@media(max-width:960px){.price-grid{grid-template-columns:1fr}}
/* Tap-to-Pay: a two-plan grid, centred. The explicit .duo override inside the
   media query out-specifies .price-grid so it actually collapses on phones. */
.price-grid.duo{grid-template-columns:repeat(2,1fr);max-width:780px;margin-left:auto;margin-right:auto}
@media(max-width:960px){.price-grid.duo{grid-template-columns:1fr}}
/* Stacked (mobile): surface the "Growth" card first — its price actually
   changes with the monthly/annual toggle, so the toggle's effect is visible
   without scrolling past the free "Start" card. */
@media(max-width:960px){.price-grid .price.hot{order:-1}}
.price{background:#fff;border:1px solid #eef1f5;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:36px 32px;text-align:left;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
.price:hover{transform:translateY(-5px);box-shadow:0 18px 54px rgba(139,92,246,.16)}
.price h3{font-size:20px}
.price .for{font-size:13px;color:var(--gris);margin-top:2px}
.price .rate{font-size:52px;font-weight:600;letter-spacing:-.04em;margin:22px 0 2px;font-variant-numeric:tabular-nums;background:var(--grad-aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent}
.price .rate small{font-size:17px;letter-spacing:0}
.price .per{font-size:13px;color:var(--gris)}
.price ul{list-style:none;margin:24px 0 28px;flex:1}
.price ul li{padding:8px 0 8px 28px;position:relative;font-size:14px;color:var(--ardoise)}
.price ul li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--or2);border-bottom:2.5px solid var(--or2);transform:rotate(-45deg)}
.price.hot{background:linear-gradient(var(--nuit),var(--nuit)) padding-box,var(--grad-aurora) border-box;border:2px solid transparent;color:#fff}
.price.hot .rate{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text}
.price.hot .for,.price.hot .per{color:#8b97a8}
.price.hot ul li{color:#c7d0dd}
.price.hot ul li::before{border-color:var(--or1)}
.price .badge-hot{position:absolute;top:-14px;right:24px;background:var(--grad-or);color:var(--nuit);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:999px;padding:6px 14px;box-shadow:0 6px 20px rgba(255,214,10,.4)}

/* ---------- TARIFS : onglets solutions & toggle facturation ---------- */
.soltabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.soltab{padding:11px 24px;border-radius:999px;font-size:14px;font-weight:600;background:#fff;border:1.5px solid #e4e9f0;color:var(--gris);cursor:pointer;font-family:inherit;transition:.2s}
.soltab:hover{border-color:rgba(139,92,246,.4);color:var(--nuit)}
.soltab.on{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.soltab .soon{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;background:var(--grad-aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:7px;font-weight:600}
.soltab.on .soon{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text}
.bill-toggle{position:relative;isolation:isolate;display:inline-flex;background:var(--gris-clair);border-radius:999px;padding:5px;margin-top:30px;gap:4px}
.bill-toggle button{position:relative;z-index:1;border:none;background:transparent;font-family:inherit;font-weight:600;font-size:13.5px;padding:9px 22px;border-radius:999px;cursor:pointer;color:var(--gris);transition:color .2s}
.bill-toggle button.on{background:#fff;color:var(--nuit);box-shadow:var(--shadow-sm)}
/* JS on: one sliding pill replaces the per-button white background */
html.js .bill-toggle button.on{background:transparent;box-shadow:none}
.bill-ind{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm)}
.bill-toggle.ind-ready .bill-ind{transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
.bill-toggle .save{font-size:11px;color:#15803d;font-weight:600;margin-left:5px}
.badge-off{display:inline-flex;align-items:center;gap:10px;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.25);color:#15803d;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;margin-top:26px}
.badge-off s{color:var(--gris);font-weight:500}
.fees{margin:20px 0 24px;border-top:1px solid #eef1f5;padding-top:14px}
.fees div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:5px 0;color:var(--gris);text-align:left}
.fees div b{font-weight:600;color:var(--ardoise);font-variant-numeric:tabular-nums;white-space:nowrap}
.price.hot .fees{border-color:rgba(255,255,255,.12)}
.price.hot .fees div{color:#8b97a8}
.price.hot .fees div b{color:#fff}
.price .rate small.unit{font-size:15px;color:var(--gris);-webkit-text-fill-color:var(--gris)}

.pan{display:none}
.pan.on{display:block}
.placeholder{background:#fff;border:1.5px dashed #dfe5ee;border-radius:var(--radius);padding:60px 30px;margin-top:48px;color:var(--gris);font-size:15px}
.placeholder b{color:var(--nuit)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:48px auto 0;text-align:left}
.faq details{background:#fff;border:1px solid #eef1f5;border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;background:var(--grad-aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 20px;font-size:14.5px;color:var(--gris)}

/* ---------- ENDPOINTS / API ---------- */
.ep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px;text-align:left}
@media(max-width:760px){.ep-grid{grid-template-columns:1fr}}
.ep{background:#0f1729;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px 22px;font-family:'SF Mono',Consolas,monospace;font-size:13.5px;color:#c7d0dd;transition:.2s}
.ep:hover{border-color:rgba(139,92,246,.5);transform:translateY(-3px)}
.ep .m{font-weight:700;margin-right:10px}
.ep .m.post{color:#FFD60A}.ep .m.get{color:#22D3EE}.ep .m.del{color:#FB7185}
.ep .d{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:#8b97a8;margin-top:6px}
.sdks{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.sdks span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:10px 20px;font-size:13.5px;font-weight:600;color:#fff}

/* ---------- TIMELINE ---------- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;position:relative}
.timeline::before{content:"";position:absolute;top:19px;left:10%;right:10%;height:3px;border-radius:3px;background:var(--grad-aurora);opacity:.55}
@media(max-width:880px){.timeline{grid-template-columns:1fr}.timeline::before{display:none}}
.tstep{text-align:center}
.tstep .dot{width:38px;height:38px;margin:0 auto;border-radius:50%;background:var(--grad-or);color:var(--nuit);font-weight:600;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 7px #fff}
.dark-sec .tstep .dot{box-shadow:0 0 0 7px var(--nuit)}
.tstep .visual{margin:22px auto 18px;background:#fff;border:1px solid #eef1f5;border-radius:16px;box-shadow:var(--shadow-sm);padding:20px;max-width:250px;min-height:100px;display:flex;align-items:center;justify-content:center}
.tstep h4{font-size:17px}
.tstep p{font-size:14px;color:var(--gris);max-width:30ch;margin:4px auto 0}
.dark-sec .tstep p{color:#8b97a8}

/* ---------- FORMULAIRE CONTACT ---------- */
.form-card{background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border:1px solid #eef1f5;border-radius:var(--radius);box-shadow:0 20px 60px rgba(139,92,246,.14);padding:36px;text-align:left}
.form-card label{display:block;font-size:13px;font-weight:600;margin:18px 0 7px;color:var(--ardoise)}
.form-card label:first-of-type{margin-top:0}
.form-card input,.form-card select,.form-card textarea{width:100%;border:1.5px solid #e4e9f0;border-radius:13px;padding:13px 16px;font-family:inherit;font-size:14.5px;color:var(--nuit);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,246,.12)}
.form-card textarea{min-height:110px;resize:vertical}
.form-card .btn{width:100%;margin-top:26px}
.contact-chips{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.contact-chips a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #eef1f5;border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-sm);font-size:14.5px;font-weight:600;transition:.2s}
.contact-chips a:hover{transform:translateX(4px);border-color:rgba(139,92,246,.4)}
.contact-chips .cic{width:42px;height:42px;border-radius:13px;background:var(--nuit);display:flex;align-items:center;justify-content:center;flex:none}
.contact-chips small{display:block;font-weight:400;color:var(--gris);font-size:12.5px}

/* ---------- PAGES ÉDITORIALES (légal, à propos) ---------- */
.prose{max-width:780px;margin:0 auto;padding:70px 28px 90px}
.prose h2{font-size:22px;margin:38px 0 10px;letter-spacing:-.02em}
.prose p,.prose li{font-size:15px;color:var(--ardoise)}
.prose ul{margin:10px 0 10px 22px}
.prose .updated{font-size:12px;color:var(--gris);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.prose .notice{background:rgba(255,214,10,.1);border:1px solid rgba(255,179,0,.35);border-radius:14px;padding:14px 18px;font-size:13.5px;color:#8a6d1a;margin:28px 0}
.prose h3{font-size:17px;margin:22px 0 8px;letter-spacing:-.01em}
.prose .ph{background:#FFF3BF;border-radius:6px;padding:0 6px;font-weight:600;color:#7a5b00}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid #E5E9F0;vertical-align:top}
.prose th{font-weight:600;color:var(--nuit)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media(max-width:880px){.stats-row{grid-template-columns:1fr 1fr}}
/* The big 32px .st text (built for a stat number) overflows a 2-col grid on small
   phones — the a-propos cards carry sentences, not numbers. Stack + shrink below 480px. */
@media(max-width:480px){.stats-row{grid-template-columns:1fr}.stats-row .st{padding:22px}.stats-row .st b{font-size:26px}}

/* Partner CTA banner (tarifs). A 999px pill on desktop; on a phone the text wraps
   to several lines and a 999px radius turns it into a giant ellipse — so switch to
   a stacked rounded card. */
.partner-cta{margin-top:24px;display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;background:var(--nuit);color:#fff;border-radius:999px;padding:14px 14px 14px 26px}
@media(max-width:640px){.partner-cta{display:flex;flex-direction:column;text-align:center;border-radius:22px;padding:22px;gap:14px}}
.stats-row .st{background:#fff;border:1px solid #eef1f5;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);text-align:center}
.stats-row .st b{font-size:32px;font-weight:600;display:block;background:var(--grad-aurora-light);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats-row .st span{font-size:13px;color:var(--gris)}

/* ---------- PAGE STATUT ---------- */
.status-badge{display:inline-flex;align-items:center;gap:11px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#15803d;border-radius:999px;padding:11px 24px;font-weight:600;font-size:15px}
.status-badge::before{content:"";width:10px;height:10px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(34,197,94,.04)}}
.svc{max-width:760px;margin:48px auto 0;text-align:left}
.svc .row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid #eef1f5;border-radius:16px;padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.svc .row b{font-size:15px;font-weight:600}
.svc .row small{display:block;color:var(--gris);font-size:12.5px;font-weight:400}
.svc .up{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#15803d;white-space:nowrap}
.svc .up::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E}
.svc .uptime{font-variant-numeric:tabular-nums;color:var(--gris);font-weight:600;font-size:13px;white-space:nowrap}
/* On a phone the name + status + uptime don't fit on one line; instead of the
   name wrapping into a tall crushed block, stack the status row cleanly below. */
@media(max-width:560px){
  .svc .row{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px}
}

/* ---------- FINAL CTA ---------- */
.final{background:var(--nuit);color:#fff;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 440px at 50% 125%,rgba(139,92,246,.35),transparent 65%),radial-gradient(600px 320px at 15% 110%,rgba(255,214,10,.14),transparent 60%),radial-gradient(600px 320px at 85% 110%,rgba(34,211,238,.16),transparent 60%);pointer-events:none}
.final .wrap{position:relative;z-index:1;padding:96px 28px;text-align:center}
.final h2{font-size:clamp(28px,3.8vw,44px);letter-spacing:-.03em}
.final p{margin:18px auto 0;color:#aebacc;max-width:54ch;font-size:16.5px}

/* ---------- BOOSTED-NAV CONTENT SETTLE (plain CSS, flash-free) ----------
   Boosted navigation (motion.js) swaps only #np-content. The new content gets a
   one-shot entrance that animates ONLY transform — opacity stays 1 the whole
   time, so dark-hero pages never cross-fade over white (no white flash).
   navigate() adds .np-enter (translateY 8px) then removes it on the next frame
   so it settles to translateY(0). Neutralised under prefers-reduced-motion. */
#np-content{transition:transform .18s var(--ease)}
#np-content.np-enter{transform:translateY(8px)}

/* ---------- AMBIENT PAUSE (offscreen / hidden tab) ----------
   Idles the three infinite marketing animations. initAmbient() (motion.js)
   toggles .is-hidden on <html> and .paused on each host; pseudo-elements are
   styled through the host's class. Higher specificity than the home.css
   `animation` shorthand, so it wins even though home.css loads later. */
html.is-hidden .hero::before,html.is-hidden .page-hero::before,html.is-hidden .strip,html.is-hidden .status-badge::before{animation-play-state:paused}
.hero.paused::before,.page-hero.paused::before,.strip.paused{animation-play-state:paused}

/* ---------- BUTTON PENDING SPINNER (contact form) ----------
   CSS-only rotating ring shown before the (untouched) localised label while the
   form submits. --nuit ring reads on the gold button. */
.btn-spinner{display:none}
.btn.is-loading{pointer-events:none}
.btn.is-loading .btn-spinner{display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;border:2px solid rgba(11,19,32,.28);border-top-color:var(--nuit);border-radius:50%;animation:np-spin .6s linear infinite}
@keyframes np-spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .nav-ind{transition:none}
  #np-content{transition:none}
  .btn.is-loading .btn-spinner{animation:none}
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.page-hero::before,.status-badge::before{animation:none}}

/* ---------- FOOTER ---------- */
footer{background:#080d16;color:#8b97a8;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding:64px 0 48px}
@media(max-width:880px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
footer h5{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-weight:600}
footer a{display:block;padding:5px 0;color:#8b97a8}
footer a:hover{color:var(--or1)}
footer .base{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
footer .base .legal a{display:inline;margin-left:18px}
.mega{font-size:clamp(76px,15vw,210px);font-weight:600;letter-spacing:-.05em;line-height:.9;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;padding-top:28px;overflow:hidden}

/* ---------- FLASHES & ERREURS DE CHAMP (Phase 2) ---------- */
.flash-zone{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.flash{border-radius:14px;padding:13px 18px;font-size:13.5px;font-weight:500;border:1px solid}
.flash-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#15803d}
.flash-error,.flash-danger{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.35);color:var(--err)}
.flash-info{background:rgba(124,58,237,.07);border-color:rgba(124,58,237,.25);color:var(--violet-txt)}
.field-err{display:block;color:var(--err);font-size:12px;font-weight:500;margin-top:6px}

/* ---------- ESPACE ADMIN (Phase 2) ---------- */
.admin-body{background:var(--gris-clair);min-height:100vh}
.admin-bar{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:60px;padding:0 24px;background:var(--nuit);color:#fff}
.admin-bar .abrand{display:flex;align-items:center;gap:12px}
.admin-bar .atag{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8b97a8}
.admin-bar form{margin:0}
.admin-nav{display:flex;gap:6px;justify-self:center}
.admin-actions{display:flex;align-items:center;gap:12px;justify-self:end}
.admin-nav a{color:#c3ccd8;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;transition:.2s}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.admin-nav a.on{color:var(--nuit);background:var(--grad-or)}
.admin-bar .btn-logout{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:.2s}
.admin-bar .btn-logout:hover{background:rgba(255,255,255,.16)}
.admin-wrap{max-width:1060px;margin:0 auto;padding:36px 24px 80px}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.admin-head h1{font-size:24px;letter-spacing:-.02em}
.admin-kpi{display:inline-flex;align-items:baseline;gap:8px;background:#fff;border:1px solid #eef1f5;border-radius:14px;padding:12px 18px;box-shadow:var(--shadow-sm)}
.admin-kpi b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.admin-kpi span{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.admin-card{background:#fff;border:1px solid #eef1f5;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.msg-row{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid #f1f4f8;transition:background .15s}
.msg-row:last-child{border-bottom:none}
.msg-row:hover{background:var(--gris-clair)}
.msg-row .who{flex:1;min-width:0}
.msg-row .who b{font-size:14.5px;font-weight:600;display:block}
.msg-row .who small{display:block;color:var(--gris);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row .meta{font-size:12.5px;color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.chip-nouveau{background:rgba(255,214,10,.2);color:#B45309}
.chip-lu{background:var(--gris-clair);color:var(--gris)}
.chip-traite{background:rgba(34,197,94,.12);color:#15803d}
.admin-empty{padding:56px 30px;text-align:center;color:var(--gris);font-size:15px}
.detail-grid{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;font-size:14px;margin:6px 0 26px}
.detail-grid dt{color:var(--gris);font-weight:600;font-size:12.5px}
.detail-grid dd{color:var(--ardoise)}
.detail-msg{background:var(--gris-clair);border-radius:14px;padding:20px 22px;font-size:14.5px;color:var(--ardoise);white-space:pre-wrap;line-height:1.65}
.admin-back{display:inline-block;font-size:13.5px;font-weight:600;color:var(--violet-txt);margin-bottom:18px}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--nuit);position:relative;overflow:hidden}
.login-screen::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-200px;right:-140px;background:conic-gradient(from 120deg,#FFD60A,#FB7185,#8B5CF6,#22D3EE,#FFD60A);filter:blur(140px);opacity:.28;pointer-events:none}
.login-screen .form-card{position:relative;z-index:1;width:100%;max-width:400px}
@media(prefers-reduced-motion:reduce){.login-screen::before{animation:none}}

/* ============ Admin day / night ============
   Toggle lives in the admin bar; the choice persists in localStorage and is
   applied to <html data-theme> before paint (see base_admin.html). The bar is
   already dark in both themes; these rules re-skin the light surfaces. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;transition:.2s}
.theme-toggle:hover{background:rgba(255,255,255,.16)}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:inline}
:root[data-theme="dark"] .admin-body{background:#0a1120;color:#e6ebf3}
:root[data-theme="dark"] .admin-head h1{color:#eef2f8}
:root[data-theme="dark"] .admin-card{background:#111a2b;border-color:#22304a;box-shadow:0 10px 30px rgba(0,0,0,.35)}
:root[data-theme="dark"] .msg-row{border-color:#1d2942}
:root[data-theme="dark"] .msg-row:last-child{border-bottom:none}
:root[data-theme="dark"] .msg-row:hover{background:#172136}
:root[data-theme="dark"] .msg-row .who b{color:#eef2f8}
:root[data-theme="dark"] .chip-lu{background:#1d2942;color:#9aa7ba}
:root[data-theme="dark"] .flash-info{background:rgba(124,58,237,.16);color:#c4b5fd}
:root[data-theme="dark"] .form-card{background:#111a2b;border-color:#22304a}
:root[data-theme="dark"] .form-card input,:root[data-theme="dark"] .form-card select,:root[data-theme="dark"] .form-card textarea{background:#0d1524;border-color:#2a3a56;color:#e6ebf3}

/* ============ Pricing calculator (tarifs) ============
   A nuit card that DEMONSTRATES the pricing promise: type your volume, see
   Start vs Growth side by side. Pure client-side, data injected as JSON. */
.calc{background:var(--nuit);color:#fff;border-radius:24px;padding:34px 36px;margin-top:34px;text-align:left;position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:-190px;right:-120px;background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent);pointer-events:none}
.calc h3{font-size:21px;letter-spacing:-.02em;margin:0 0 4px;color:#fff;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.calc-sol{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(120deg,#FFD60A,#FFB300);color:var(--nuit);border-radius:999px;padding:4px 12px;white-space:nowrap}
.calc .calc-sub{font-size:13.5px;color:#aeb8c7;margin:0 0 24px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:start;position:relative}
.calc-field{margin-bottom:20px}
.calc-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:#c3ccd8;margin-bottom:10px}
.calc-field label output{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.calc-field input[type=range]{width:100%;accent-color:#FFD60A}
.calc-field input[type=number]{width:130px;padding:10px 12px;border-radius:11px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:15px;font-variant-numeric:tabular-nums}
.calc-field input[type=number]:focus{outline:none;border-color:#FFD60A}
.calc-note{font-size:11.5px;color:#8b97a8;margin-top:14px}
.calc-out{display:flex;flex-direction:column;gap:12px}
.calc-plan{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1.5px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 20px;transition:border-color .2s,background .2s}
.calc-plan .cp-name{font-size:14.5px;font-weight:700;color:#fff}
.calc-plan .cp-name small{display:block;font-weight:500;color:#8b97a8;font-size:11.5px;margin-top:2px}
.calc-plan .cp-cost{font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-plan .cp-cost small{font-size:12px;color:#8b97a8;font-weight:500}
.calc-plan.best{border-color:#FFD60A;background:rgba(255,214,10,.08)}
.calc-plan .cp-badge{display:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(120deg,#FFD60A,#FFB300);color:var(--nuit);border-radius:999px;padding:3px 10px}
.calc-plan.best .cp-badge{display:inline-block}
.calc-verdict{font-size:13.5px;color:#c3ccd8;margin-top:4px;min-height:20px}
.calc-verdict b{color:#FFD60A}
@media(max-width:760px){.calc{padding:26px 22px}.calc-grid{grid-template-columns:1fr}}

/* ---- Cookie consent (Phase 3) — on-brand, dark, dismissible ---- */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;
  background:var(--nuit);color:#fff;border-radius:16px;
  box-shadow:0 12px 44px rgba(11,19,32,.28);border:1px solid rgba(255,255,255,.09)}
.cookie-consent[hidden]{display:none}
.cc-inner{max-width:1240px;margin:0 auto;padding:15px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cc-text{margin:0;font-size:13.5px;line-height:1.5;color:#c9d2de;max-width:72ch}
.cc-text a{color:var(--or1);text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:10px;flex:none}
@media(max-width:640px){.cc-actions{width:100%}.cc-actions .btn{flex:1}}

/* ---- CTA « Ouvrir un compte » désactivé (bientôt disponible) ---- */
.btn-disabled{background:rgba(139,148,161,.16);color:#8b97a8;border:1px solid rgba(139,148,161,.28);box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn-disabled:hover,.btn-disabled:active{transform:none;box-shadow:none}
.btn-disabled:focus-visible{outline:none}
.soon-badge{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;margin-left:8px;opacity:.9}

/* ---- Locale switcher (footer) + geo suggestion banner (Phase A1) ---- */
.locale-switch{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding-top:22px;margin-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.locale-switch .ls-globe{display:inline-flex;color:#8b97a8}
.locale-switch .ls-item{display:inline-block;padding:2px 0;font-size:12.5px;font-weight:600;color:#8b97a8;transition:color .15s;border-bottom:1px solid transparent}
.locale-switch .ls-item:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.locale-switch .ls-item.on{color:var(--or1);cursor:default}
.locale-switch .ls-item.on:hover{border-bottom-color:transparent}
.locale-switch .ls-soon{opacity:.42;cursor:not-allowed;border-bottom-color:transparent}
.locale-switch .ls-soon:hover{color:#8b97a8;border-bottom-color:transparent}
.locale-switch .ls-soon .soon-badge{margin-left:6px;opacity:.85}

.geo-banner{position:relative;z-index:70;color:#fff;background:var(--nuit);border-bottom:1px solid rgba(255,255,255,.08)}
.geo-inner{max-width:1160px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.geo-globe{display:inline-flex;color:var(--or1);flex:none}
.geo-text{margin:0;font-size:13.5px;font-weight:500;color:#c9d2de;flex:1;min-width:180px}
.geo-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.geo-stay{background:transparent;color:#c9d2de;border:1px solid rgba(255,255,255,.22)}
.geo-stay:hover{border-color:rgba(255,255,255,.5);color:#fff}
@media(max-width:640px){.geo-actions{width:100%}.geo-actions .btn{flex:1}}