:root{
  --navy:#1e2a4a;--navy-deep:#0e1525;--steel:#3d5a80;
  --coral:#c9485b;--coral-h:#b53d4e;--rose:#b44a7a;
  --grad:linear-gradient(135deg,#1e2a4a 0%,#3d5a80 35%,#c9485b 70%,#b44a7a 100%);
  --grad-h:linear-gradient(90deg,#1e2a4a 0%,#3d5a80 30%,#c9485b 75%,#b44a7a 100%);
  --grad-btn:linear-gradient(135deg,#c9485b 0%,#b44a7a 100%);
  --green:#10b981;--green-bg:#ecfdf5;--red:#ef4444;--red-bg:#fef2f2;
  --orange:#f59e0b;--orange-bg:#fffbeb;--blue:#3b82f6;--blue-bg:#eff6ff;
  --purple:#8b5cf6;--purple-bg:#f5f3ff;--cyan:#06b6d4;--cyan-bg:#ecfeff;
  --font:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:10px;--rs:8px;--rl:14px;
}
[data-theme="light"]{--bg:#f7f8fb;--bg2:#eef0f5;--card:#fff;--bdr:#e8eaef;--bdr-l:#f0f1f5;--t1:#111827;--t2:#5f6b7a;--t3:#9ca3af;--inp-bg:#f3f4f8;--inp-bdr:#e2e5ec;--sb-bg:#fff;--sb-hov:#f3f4f8;--sb-on:#eef0f6;--sb-txt:#6b7280;--sb-txt-on:#111827;--sb-bdr:#eceef3;--hero-bg:#f7f8fb;--nav-bg:rgba(255,255,255,.92);--foot-bg:#111827;--tog-bg:#e5e7eb;--overlay-bg:rgba(0,0,0,.3)}
[data-theme="dark"]{--bg:#0a0f1a;--bg2:#0e1422;--card:#111827;--bdr:#1e2740;--bdr-l:#1a2236;--t1:#e8ecf4;--t2:#8892a6;--t3:#5a6480;--inp-bg:#1a2234;--inp-bdr:#2a3450;--sb-bg:#0c1019;--sb-hov:#131a28;--sb-on:#1a2338;--sb-txt:#5a6580;--sb-txt-on:#dfe6f0;--sb-bdr:rgba(255,255,255,.04);--hero-bg:#0a0f1a;--nav-bg:rgba(10,15,26,.92);--foot-bg:#060a12;--tog-bg:#2a3450;--overlay-bg:rgba(10,15,26,.6)}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--foot-bg)}
body{font-family:var(--font);background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
#pgLand{display:flex;flex-direction:column;min-height:100vh}
#pgLand footer.ft{margin-top:auto}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:10px}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto}
.page{display:none}.page.on{display:block}
#pgLand{display:flex!important;flex-direction:column;min-height:100vh}

/* Theme switch */
.thsw{width:38px;height:20px;border-radius:10px;background:var(--tog-bg);border:none;cursor:pointer;position:relative;transition:background .3s;padding:0;flex-shrink:0}
.thsw::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:all .3s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
[data-theme="dark"] .thsw{background:var(--coral)}[data-theme="dark"] .thsw::after{left:21px}
/* Language switcher */
.lang-sw{position:relative;margin-left:4px}
.lang-btn{display:flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--bdr);border-radius:var(--rs);background:none;cursor:pointer;font-size:11px;font-weight:600;color:var(--t2);transition:all .15s;font-family:var(--font);white-space:nowrap;line-height:1}
.lang-btn:hover{color:var(--t1);background:var(--sb-hov);border-color:var(--bdr)}
.lang-btn .lgl{width:13px;height:13px;color:var(--t3);flex-shrink:0}
.lang-btn .lch{width:9px;height:9px;color:var(--t3);transition:transform .2s}
.lang-sw.open .lch{transform:rotate(180deg)}
.lang-dd{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--bdr);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:5px;min-width:130px;z-index:500;animation:fu .15s ease}
.lang-sw.open .lang-dd{display:block}
.lang-dd button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;background:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--t2);border-radius:6px;font-family:var(--font);transition:all .1s;text-align:left}
.lang-dd button:hover{background:var(--sb-hov);color:var(--t1)}
.lang-dd button.lon{color:var(--coral);font-weight:700}
@media(max-width:768px){.lang-sw{display:none}}

/* ════════════════════════════════
   LANDING PAGE
   ════════════════════════════════ */
.l-top{background:var(--navy-deep);padding:6px 0;font-size:11px;color:rgba(255,255,255,.4)}
.l-top-in{max-width:1600px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.l-top a{color:rgba(255,255,255,.5);transition:color .15s;display:inline-flex;align-items:center;gap:4px}
.l-top a:hover{color:#fff}

.l-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr-l);transition:background .3s}
.l-nav-in{max-width:1600px;margin:0 auto;padding:0 24px;height:58px;display:flex;align-items:center;position:relative}
.l-nav-logo img{height:32px;transition:opacity .3s}
.l-nav-links{display:flex;gap:2px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10}
.l-nav-links a{padding:8px 13px;font-size:12px;font-weight:600;color:var(--t2);border-radius:var(--rs);transition:all .15s}
.l-nav-links a:hover{color:var(--t1);background:var(--sb-hov)}
.l-nav-links a.act{color:var(--coral)}
.l-nav-cta{margin-left:10px;padding:8px 16px;background:var(--grad-btn);color:#fff;border-radius:var(--rs);font-size:11.5px;font-weight:700;border:none;cursor:pointer;font-family:var(--font);transition:all .2s;display:inline-flex;align-items:center;text-decoration:none}
.l-nav-cta:hover{box-shadow:0 4px 14px rgba(201,72,91,.3)}
.th-wrap{margin-left:8px;display:flex;align-items:center;gap:4px}
.th-wrap svg{width:11px;height:11px;color:var(--t3)}
.mob-menu{display:none;width:32px;height:32px;border:none;background:none;cursor:pointer;margin-left:8px;align-items:center;justify-content:center;border-radius:var(--rs);transition:background .15s}
.mob-menu:hover{background:var(--sb-hov)}
.mob-menu svg{width:20px;height:20px;color:var(--t1)}
.mob-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr-l);padding:8px 16px 14px;flex-direction:column;gap:2px;animation:fu .15s ease}
.mob-nav a{padding:10px 13px;font-size:13px;font-weight:600;color:var(--t2);border-radius:var(--rs);transition:all .15s;display:block}
.mob-nav a:hover,.mob-nav a:focus{color:var(--t1);background:var(--sb-hov)}
.mob-nav a.act{color:var(--coral)}
.mob-nav-sep{height:1px;background:var(--bdr-l);margin:6px 0}
.mob-nav-cta{margin:4px 0 0;padding:10px 13px;background:var(--grad-btn);color:#fff;border-radius:var(--rs);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;border:none;text-align:center;transition:all .2s;display:block;text-decoration:none}
.l-nav.mob-open .mob-nav{display:flex}

/* Hero */
.hero{padding:72px 24px 56px;text-align:center;position:relative;overflow:hidden;background:var(--hero-bg);transition:background .3s}
.hero::before{content:'';position:absolute;width:550px;height:550px;border-radius:50%;background:radial-gradient(circle,rgba(201,72,91,.06) 0%,transparent 65%);top:-140px;right:-80px;animation:d 14s ease-in-out infinite}
.hero::after{content:'';position:absolute;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(61,90,128,.05) 0%,transparent 65%);bottom:-80px;left:-80px;animation:d 16s ease-in-out infinite reverse}
@keyframes d{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-16px)}}
.hero-in{max-width:680px;margin:0 auto;position:relative;z-index:2}
.hero h1{font-size:40px;font-weight:900;letter-spacing:-.5px;line-height:1.15;margin-bottom:12px}
.hero h1 span{background:var(--grad-h);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:15px;color:var(--t2);line-height:1.6;margin-bottom:26px;max-width:500px;margin-left:auto;margin-right:auto}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hb{padding:11px 26px;border-radius:var(--rs);font-size:13.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .2s;border:none}
.hb.p{background:var(--grad-btn);color:#fff}.hb.p:hover{box-shadow:0 6px 22px rgba(201,72,91,.3);transform:translateY(-2px)}
.hb.o{background:none;border:2px solid var(--bdr);color:var(--t1)}.hb.o:hover{border-color:var(--coral);color:var(--coral)}
.hero-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:28px}
.hp{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;background:var(--card);border:1px solid var(--bdr-l);border-radius:14px;font-size:10px;color:var(--t2);font-weight:500;transition:all .15s}
.hp:hover{border-color:var(--coral);color:var(--t1)}
.hp svg{width:11px;height:11px;opacity:.45}

/* Stats */
.stats-bar{background:var(--card);border-top:1px solid var(--bdr-l);border-bottom:1px solid var(--bdr-l);padding:28px 24px;transition:background .3s}
.stats-in{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.sn{font-size:30px;font-weight:900;background:var(--grad-h);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sl{font-size:11px;color:var(--t2);margin-top:2px}

/* Section */
.sec{padding:56px 24px;max-width:1600px;margin:0 auto}
.sec-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;color:var(--coral);margin-bottom:6px}
.sec-title{font-size:26px;font-weight:900;letter-spacing:-.3px;margin-bottom:5px}
.sec-desc{font-size:13px;color:var(--t2);margin-bottom:28px;max-width:460px}
.svc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sv{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:22px;transition:all .25s;position:relative;overflow:hidden}
.sv::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-h);opacity:0;transition:opacity .25s}
.sv:hover{box-shadow:0 10px 32px rgba(0,0,0,.07);transform:translateY(-2px);border-color:transparent}
[data-theme="dark"] .sv:hover{box-shadow:0 10px 32px rgba(0,0,0,.2)}
.sv:hover::after{opacity:1}
.sv-ic{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.sv-ic svg{width:19px;height:19px}
.sv h3{font-size:14px;font-weight:700;margin-bottom:3px}
.sv p{font-size:11.5px;color:var(--t2);line-height:1.55;margin-bottom:12px}
.sv-pr{font-size:10px;color:var(--t3)}.sv-pr strong{font-size:17px;color:var(--t1);font-weight:800}

/* Footer */
.ft{background:var(--foot-bg);padding:44px 24px 20px;color:rgba(255,255,255,.35);transition:background .3s}
.ft-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.ft-brand img{height:26px;margin-bottom:10px;opacity:.7}
.ft-brand p{font-size:11.5px;line-height:1.6;max-width:240px}
.ft-col h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.55);margin-bottom:10px}
.ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.35);padding:2px 0;transition:color .15s}
.ft-col a:hover{color:var(--coral)}
.ft-btm{max-width:1600px;margin:20px auto 0;padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.2);flex-wrap:wrap;gap:10px}
.ft-soc{display:flex;gap:6px}
.ft-soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:all .15s}
.ft-soc a:hover{background:var(--coral)}
.ft-soc svg{width:12px;height:12px;color:rgba(255,255,255,.3)}
.ft-soc a:hover svg{color:#fff}

/* Telegram floating button */
.tg-float{position:fixed;bottom:20px;right:20px;z-index:90;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(34,158,217,.35);cursor:pointer;transition:all .2s;border:none;text-decoration:none;flex-shrink:0}
.tg-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(34,158,217,.45)}
.tg-float svg{width:24px;height:24px;color:#fff}

/* ── Hero badge ── */
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:var(--grad-btn);color:#fff;border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;animation:badgePulse 3s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(201,72,91,.3)}50%{box-shadow:0 0 0 8px rgba(201,72,91,0)}}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:dot 1.5s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Pourquoi WebTic ── */
.why-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.why-c{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:24px;transition:all .25s;display:flex;gap:16px;align-items:flex-start}
.why-c:hover{box-shadow:0 8px 28px rgba(0,0,0,.06);transform:translateY(-2px);border-color:rgba(201,72,91,.2)}
.why-ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-ic svg{width:20px;height:20px}
.why-c h3{font-size:13.5px;font-weight:700;margin-bottom:4px}
.why-c p{font-size:11.5px;color:var(--t2);line-height:1.55}

/* ── Nos Solutions (big cards) ── */
.sol-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sol-c{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:30px 24px;transition:all .3s;position:relative;overflow:hidden;text-align:center}
.sol-c::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-h)}
.sol-c:hover{box-shadow:0 12px 36px rgba(0,0,0,.08);transform:translateY(-3px)}
.sol-ic-big{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:rgba(201,72,91,.08)}
.sol-ic-big svg{width:26px;height:26px;color:var(--coral)}
.sol-c h3{font-size:17px;font-weight:800;margin-bottom:6px}
.sol-c .sol-sub{font-size:12px;color:var(--coral);font-weight:600;margin-bottom:8px}
.sol-c p{font-size:12px;color:var(--t2);line-height:1.55;margin-bottom:18px}
.sol-actions{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:auto}
.sol-c{display:flex;flex-direction:column}
.sol-c p{flex:1}
.sol-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--grad-btn);color:#fff;border-radius:var(--rs);font-size:12px;font-weight:700;transition:all .2s;text-decoration:none;width:100%;justify-content:center}
.sol-btn:hover{box-shadow:0 4px 16px rgba(201,72,91,.3);transform:translateY(-1px);color:#fff}
.sol-link{font-size:11px;color:var(--t2);text-decoration:none;transition:color .15s;font-weight:500}
.sol-link:hover{color:var(--coral)}

/* ── VoIP server pricing ── */
.voip-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.voip-c{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:20px 16px;text-align:center;transition:all .25s;position:relative}
.voip-c:hover{box-shadow:0 8px 28px rgba(0,0,0,.07);border-color:rgba(201,72,91,.25);transform:translateY(-2px)}
.voip-c.pop{border-color:var(--coral);box-shadow:0 4px 20px rgba(201,72,91,.12)}
.voip-badge-pop{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--grad-btn);color:#fff;font-size:8.5px;font-weight:800;padding:3px 10px;border-radius:0 0 8px 8px;letter-spacing:.5px;text-transform:uppercase}
.voip-cc{font-size:22px;font-weight:900;color:var(--navy);margin-bottom:2px}
[data-theme="dark"] .voip-cc{color:var(--t1)}
.voip-cc span{font-size:11px;color:var(--t2);font-weight:400}
.voip-specs{font-size:10px;color:var(--t3);margin:6px 0 14px;line-height:1.6}
.voip-price{font-size:20px;font-weight:900;background:var(--grad-h);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.voip-period{font-size:9.5px;color:var(--t3);margin-bottom:12px}
.voip-btn{display:block;padding:7px 14px;background:var(--grad-btn);color:#fff;border-radius:var(--rs);font-size:11px;font-weight:700;text-decoration:none;transition:all .2s}
.voip-btn:hover{box-shadow:0 4px 12px rgba(201,72,91,.3);color:#fff}

/* ── FAQ ── */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);margin-bottom:8px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-size:14px;font-weight:600;gap:12px;transition:background .15s;user-select:none}
.faq-q:hover{background:var(--bg2)}
.faq-q svg{width:16px;height:16px;color:var(--coral);flex-shrink:0;transition:transform .25s}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 18px;font-size:12.5px;color:var(--t2);line-height:1.65}
.faq-item.open .faq-a{display:block}

/* ── Contact Form ── */
.contact-wrap{max-width:780px;margin:0 auto;background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:40px 44px;box-shadow:0 8px 40px rgba(0,0,0,.05)}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform-full{grid-column:1/-1}
.cform-label{display:block;font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.cform-input{width:100%;padding:11px 14px;border:1px solid var(--inp-bdr);border-radius:var(--rs);font-family:var(--font);font-size:13px;color:var(--t1);background:var(--inp-bg);transition:all .2s;outline:none}
.cform-input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(201,72,91,.08)}
.cform-input::placeholder{color:var(--t3)}
textarea.cform-input{resize:vertical;min-height:110px}
.cform-checks{display:flex;flex-wrap:wrap;gap:8px}
.cform-check{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;background:var(--bg2);border:1px solid var(--bdr-l);border-radius:20px;font-size:11.5px;font-weight:500;cursor:pointer;transition:all .15s;color:var(--t2)}
.cform-check input{display:none}
.cform-check:hover{border-color:var(--coral);color:var(--coral)}
.cform-check.sel{background:rgba(201,72,91,.08);border-color:var(--coral);color:var(--coral);font-weight:600}
.cform-check svg{width:13px;height:13px}
.cform-submit{width:100%;padding:14px;background:var(--grad-btn);color:#fff;border:none;border-radius:var(--rs);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .2s;margin-top:4px}
.cform-submit:hover{box-shadow:0 6px 22px rgba(201,72,91,.3);transform:translateY(-1px)}
.cform-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cform-privacy{text-align:center;font-size:10.5px;color:var(--t3);margin-top:12px}
.cform-msg{text-align:center;padding:12px 16px;border-radius:var(--rs);font-size:12.5px;font-weight:600;margin-top:12px;display:none}
.cform-msg.ok{background:var(--green-bg);color:var(--green);display:block}
.cform-msg.err{background:var(--red-bg);color:var(--red);display:block}

/* ── CTA section ── */
.cta-sec{background:var(--grad);padding:60px 24px;text-align:center}
.cta-sec h2{font-size:28px;font-weight:900;color:#fff;margin-bottom:8px}
.cta-sec p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:28px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-btn-p{padding:13px 28px;background:#fff;color:var(--navy);border-radius:var(--rs);font-size:13.5px;font-weight:800;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.cta-btn-p:hover{box-shadow:0 6px 24px rgba(0,0,0,.2);transform:translateY(-2px);color:var(--coral)}
.cta-btn-o{padding:13px 28px;border:2px solid rgba(255,255,255,.45);color:#fff;border-radius:var(--rs);font-size:13.5px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.cta-btn-o:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}

/* ── Responsive new sections ── */
@media(max-width:900px){.sol-g{grid-template-columns:1fr}.contact-wrap{padding:28px 20px}.cform-grid{grid-template-columns:1fr}}
@media(max-width:600px){.voip-g{grid-template-columns:repeat(2,1fr)}.why-g{grid-template-columns:1fr}}

/* ════════════════════════════════
   CLIENT AREA
   ════════════════════════════════ */
.app{display:none}.app.on{display:flex;min-height:100vh}

.sb{position:fixed;top:0;left:0;width:248px;height:100vh;background:var(--sb-bg);border-right:1px solid var(--sb-bdr);display:flex;flex-direction:column;z-index:100;transition:all .3s}
.sb-hd{padding:12px 16px;display:flex;align-items:center;border-bottom:1px solid var(--sb-bdr);min-height:52px}
.sb-hd img{height:22px}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.sb-s{margin-bottom:14px}
.sb-st{font-size:8px;text-transform:uppercase;letter-spacing:2px;color:var(--t3);padding:0 12px;margin-bottom:3px;font-weight:800}
.sb-i{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;color:var(--sb-txt);font-size:11.5px;font-weight:500;cursor:pointer;transition:all .12s;position:relative}
.sb-i:hover{background:var(--sb-hov);color:var(--sb-txt-on)}
.sb-i.on{background:var(--sb-on);color:var(--sb-txt-on)}
.sb-i.on::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:12px;background:var(--coral);border-radius:0 2px 2px 0}
.sb-i svg{width:14px;height:14px;opacity:.35;flex-shrink:0}
.sb-i:hover svg,.sb-i.on svg{opacity:.8}
.sb-bdg{margin-left:auto;font-size:8px;font-weight:700;padding:1px 5px;border-radius:4px}
.sb-bt{padding:8px 10px;border-top:1px solid var(--sb-bdr)}
.sb-th{padding:6px 10px;display:flex;align-items:center;gap:5px;margin-bottom:4px}
.sb-th span{font-size:9px;color:var(--t3);flex:1}
.sb-th svg{width:11px;height:11px;color:var(--t3)}
.sb-usr{display:flex;align-items:center;gap:7px;padding:6px;border-radius:6px;cursor:pointer}
.sb-usr:hover{background:var(--sb-hov)}
.sb-av{width:28px;height:28px;border-radius:6px;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700}
.sb-nm{font-size:10.5px;font-weight:600}.sb-rl{font-size:9px;color:var(--t2)}
.sb-lo{margin-left:auto;padding:3px;cursor:pointer;color:var(--t3);background:none;border:none}
.sb-lo:hover{color:var(--red)}
.sb-lo svg{width:12px;height:12px}

.mn{margin-left:248px;flex:1}
.topbar{height:52px;background:var(--card);border-bottom:1px solid var(--bdr-l);display:flex;align-items:center;padding:0 18px;position:sticky;top:0;z-index:50;transition:all .3s}
.topbar-t{font-size:13px;font-weight:700}
.topbar-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.topbar-sr{position:relative}
.topbar-sr input{width:160px;padding:5px 9px 5px 26px;border:1px solid var(--bdr-l);border-radius:var(--rs);font-size:11px;font-family:var(--font);background:var(--bg2);color:var(--t1);transition:all .2s;outline:none}
.topbar-sr input:focus{border-color:var(--coral);width:210px}
.topbar-sr input::placeholder{color:var(--t3)}
.topbar-sr svg{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--t3)}
.topbar-b{width:30px;height:30px;border-radius:var(--rs);border:1px solid var(--bdr-l);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.topbar-b:hover{border-color:var(--coral)}
.topbar-b svg{width:14px;height:14px;color:var(--t2)}
.topbar-b .dot{position:absolute;top:3px;right:3px;width:5px;height:5px;background:var(--coral);border-radius:50%;border:1.5px solid var(--card)}

.ct{padding:18px 20px}
.pnl{display:none;animation:fu .2s ease}.pnl.on{display:block}
@keyframes fu{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.accent-bar{height:3px;background:var(--grad-h);border-radius:2px;margin-bottom:14px;opacity:.4}

/* Stats */
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.st{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--r);padding:13px 14px;transition:all .3s}
.st:hover{box-shadow:0 3px 10px rgba(0,0,0,.04)}
.st-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.st-lb{font-size:9px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.st-ic{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.st-ic svg{width:13px;height:13px}
.st-vl{font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1;margin-bottom:2px}
.st-ch{font-size:9px;font-weight:500}.st-ch.up{color:var(--green)}.st-ch.dn{color:var(--red)}

.card{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--r);overflow:hidden;margin-bottom:12px;transition:all .3s}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--bdr-l)}
.card-t{font-size:11.5px;font-weight:700}
.card-a{font-size:10px;color:var(--coral);font-weight:600;cursor:pointer;border:none;background:none;font-family:var(--font)}

table{width:100%;border-collapse:collapse}
table th{text-align:left;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--bdr-l)}
table td{padding:7px 12px;font-size:11px;border-bottom:1px solid var(--bdr-l)}
table tr:last-child td{border-bottom:none}
table tr:hover td{background:var(--bg2)}
.badge{display:inline-flex;padding:2px 6px;border-radius:8px;font-size:8.5px;font-weight:700}
.badge.on{background:var(--green-bg);color:var(--green)}[data-theme="dark"] .badge.on{background:rgba(16,185,129,.1)}
.mono{font-family:var(--mono);font-size:9.5px;color:var(--t2)}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 13px;border-radius:var(--rs);font-size:10.5px;font-weight:600;font-family:var(--font);cursor:pointer;border:none;transition:all .15s}
.btn-p{background:var(--grad-btn);color:#fff}.btn-p:hover{box-shadow:0 2px 10px rgba(201,72,91,.25)}
.btn-o{background:none;border:1px solid var(--bdr-l);color:var(--t2)}.btn-o:hover{border-color:var(--coral);color:var(--coral)}
.btn-sm{padding:4px 8px;font-size:9.5px}

/* Order cards */
.og{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px;margin-bottom:14px}
.oc{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.oc:hover{box-shadow:0 6px 20px rgba(0,0,0,.06);transform:translateY(-2px);border-color:transparent}
[data-theme="dark"] .oc:hover{box-shadow:0 6px 20px rgba(0,0,0,.16)}
.oc::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-h);opacity:0;transition:opacity .2s}
.oc:hover::after{opacity:1}
.oc-ic{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.oc-ic svg{width:15px;height:15px}
.oc-nm{font-size:12px;font-weight:700;margin-bottom:2px}
.oc-ds{font-size:10px;color:var(--t2);line-height:1.5;margin-bottom:10px}
.oc-ft{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--bdr-l)}
.oc-pr .a{font-size:13px;font-weight:800}.oc-pr .f,.oc-pr .p{font-size:8px;color:var(--t3)}
.oc-btn{padding:3px 9px;border-radius:var(--rs);font-size:9px;font-weight:600;background:var(--grad-btn);color:#fff;border:none;cursor:pointer;font-family:var(--font)}
.cat-lb{font-size:9px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;margin-top:4px}

/* Empty state */
.empty{text-align:center;padding:40px 20px;color:var(--t3)}
.empty svg{width:48px;height:48px;color:var(--bdr);margin-bottom:12px}
.empty h3{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:4px}
.empty p{font-size:12px;margin-bottom:16px}

/* Login overlay */
.lo{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:16px}
.lo.on{display:flex}
.lo-box{background:var(--card);border-radius:var(--rl);width:100%;max-width:380px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.15);animation:moIn .2s ease;position:relative;transition:background .3s}
@keyframes moIn{from{opacity:0;transform:scale(.97) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}
.lo-box h2{font-size:18px;font-weight:800;margin-bottom:3px}
.lo-box .sub{font-size:12px;color:var(--t2);margin-bottom:18px}
.lo-x{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:6px;border:1px solid var(--bdr-l);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lo-x:hover{background:var(--red-bg);border-color:var(--red)}
.lo-x svg{width:12px;height:12px;color:var(--t2)}
.fg{margin-bottom:14px}.fl{display:block;font-size:10px;font-weight:700;color:var(--t2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.fi-w{position:relative}
.fi-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--t3);pointer-events:none}
.fi{width:100%;padding:9px 10px 9px 34px;background:var(--inp-bg);border:1.5px solid var(--inp-bdr);border-radius:var(--rs);font-size:13px;font-family:var(--font);color:var(--t1);transition:all .2s;outline:none}
.fi::placeholder{color:var(--t3)}.fi:focus{border-color:var(--coral)}
.sub-btn{width:100%;padding:10px;background:var(--grad-btn);color:#fff;border:none;border-radius:var(--rs);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .2s;margin-top:4px}
.sub-btn:hover{box-shadow:0 4px 14px rgba(201,72,91,.3)}
.lo-ft{text-align:center;margin-top:14px;font-size:11.5px;color:var(--t3)}
.lo-ft a{color:var(--coral);font-weight:600}

.stats-in{grid-template-columns:repeat(5,1fr)!important}
/* Responsive */
@media(max-width:900px){.ft-in{grid-template-columns:1fr 1fr}.stats-in{grid-template-columns:repeat(3,1fr)!important}.hero h1{font-size:28px}}
@media(max-width:560px){.stats-in{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:768px){.sb{transform:translateX(-100%);width:260px}.sb.open{transform:translateX(0)}.mn{margin-left:0}.sr{grid-template-columns:1fr 1fr}.svc-g,.og{grid-template-columns:1fr}.ct{padding:12px}.l-nav-links{display:none}.mob-menu{display:flex!important}.ft-in{grid-template-columns:1fr}}

/* ── Services dropdown nav ── */
.l-dd{position:relative}
.l-dd-trigger{display:inline-flex;align-items:center;gap:4px;padding:8px 13px;font-size:12px;font-weight:600;color:var(--t2);border-radius:var(--rs);transition:all .15s;cursor:pointer;background:none;border:none;font-family:var(--font);text-decoration:none}
.l-dd-trigger:hover{color:var(--t1);background:var(--sb-hov)}
.l-dd-trigger svg{width:11px;height:11px;transition:transform .2s;opacity:.6}
.l-dd:hover .l-dd-trigger svg,.l-dd:focus-within .l-dd-trigger svg{transform:rotate(180deg)}
.l-dd-menu{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.12);padding:20px;min-width:580px;z-index:400;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;transition-delay:1.5s}
.l-dd:hover .l-dd-menu,.l-dd:focus-within .l-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.l-dd-col{padding:0 14px}
.l-dd-col:not(:last-child){border-right:1px solid var(--bdr-l)}
.l-dd-head{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--coral);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--bdr-l)}
.l-dd-menu a{display:block;font-size:11.5px;color:var(--t2);padding:5px 0;transition:color .15s;text-decoration:none;white-space:nowrap}
.l-dd-menu a:hover{color:var(--coral)}
.l-dd-ft{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--bdr-l);display:flex;align-items:center;justify-content:space-between}
.l-dd-ft a{font-size:11.5px;font-weight:700;color:var(--coral)!important;display:inline-flex;align-items:center;gap:5px}
.l-dd-ft a:hover{text-decoration:underline}
.l-dd-ft span{font-size:10px;color:var(--t3)}

/* ══════════════════════════════════════
   ANIMATIONS MODERNES — v1.0
   ══════════════════════════════════════ */

/* Canvas hero particles */
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.25,.46,.45,.94),transform .65s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Stagger grille cartes */
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .5s cubic-bezier(.25,.46,.45,.94),transform .5s cubic-bezier(.25,.46,.45,.94)}
.stagger.visible>*:nth-child(1){transition-delay:.04s}
.stagger.visible>*:nth-child(2){transition-delay:.1s}
.stagger.visible>*:nth-child(3){transition-delay:.16s}
.stagger.visible>*:nth-child(4){transition-delay:.22s}
.stagger.visible>*:nth-child(5){transition-delay:.28s}
.stagger.visible>*:nth-child(6){transition-delay:.34s}
.stagger.visible>*:nth-child(7){transition-delay:.40s}
.stagger.visible>*:nth-child(8){transition-delay:.46s}
.stagger.visible>*:nth-child(9){transition-delay:.52s}
.stagger.visible>*{opacity:1;transform:translateY(0)}

/* Nav scroll shadow */
.l-nav.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.07)}

/* CTA gradient animé */
.cta-sec{background-size:200% 200%;animation:gradShift 10s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Stats section reveal */
.stats-bar.reveal{transition-duration:.8s}

/* Hero grid overlay subtil */
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(61,90,128,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(61,90,128,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}
[data-theme="dark"] .hero-grid{background-image:linear-gradient(rgba(61,90,128,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(61,90,128,.07) 1px,transparent 1px)}

/* Respect prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{transition:none;opacity:1;transform:none}
  .cta-sec{animation:none}
  #hero-canvas{display:none}
}
/* Fallback mobile : si JS scroll-reveal échoue, rendre tout visible après 1.5s */
@media(max-width:768px){
  body:not(.js-ok) .reveal{animation:revealFb .4s 1.5s both}
  body:not(.js-ok) .stagger>*{animation:revealFb .4s 1.5s both}
  body:not(.js-ok) .stagger-fade>*{animation:revealFb .4s 1.5s both}
}
@keyframes revealFb{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════
   ENRICHISSEMENT v2.0
   ══════════════════════════════════════ */

/* Aurora blobs hero */
.hero-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ab{position:absolute;border-radius:50%;filter:blur(100px);animation:auroraF 20s ease-in-out infinite}
.ab1{width:800px;height:800px;background:radial-gradient(circle,rgba(201,72,91,.08) 0%,transparent 55%);top:-300px;right:-200px}
.ab2{width:700px;height:700px;background:radial-gradient(circle,rgba(61,90,128,.07) 0%,transparent 55%);bottom:-250px;left:-200px;animation-delay:-7s;animation-direction:reverse}
.ab3{width:450px;height:450px;background:radial-gradient(circle,rgba(180,74,122,.06) 0%,transparent 55%);top:30%;left:20%;animation-delay:-13s}
[data-theme="dark"] .ab1{background:radial-gradient(circle,rgba(201,72,91,.15) 0%,transparent 55%)}
[data-theme="dark"] .ab2{background:radial-gradient(circle,rgba(61,90,128,.13) 0%,transparent 55%)}
[data-theme="dark"] .ab3{background:radial-gradient(circle,rgba(180,74,122,.1) 0%,transparent 55%)}
@keyframes auroraF{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.08)}66%{transform:translate(-40px,40px) scale(.93)}}

/* Marquee ticker */
.mq-wrap{background:var(--navy-deep);padding:11px 0;overflow:hidden;position:relative}
.mq-wrap::before,.mq-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.mq-wrap::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)}
.mq-wrap::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:mqScroll 35s linear infinite}
.mq-wrap:hover .mq-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);white-space:nowrap}
.mq-item .mq-sep{width:3px;height:3px;border-radius:50%;background:var(--coral);opacity:.5;margin-left:-16px}
.mq-item span{color:rgba(255,255,255,.7);font-weight:700}
@keyframes mqScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Section "Comment ça marche" */
.steps-sec{position:relative;overflow:hidden}
.steps-g{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-top:20px}
.steps-conn{position:absolute;top:52px;left:0;right:0;height:2px;pointer-events:none;z-index:0}
.steps-conn svg{width:100%;height:2px}
.step-c{text-align:center;padding:28px 24px 24px;position:relative;z-index:1}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--grad-btn);color:#fff;font-size:9px;font-weight:900;margin-bottom:14px;position:relative}
.step-n::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--coral);opacity:.2;animation:stepPulse 2s ease-in-out infinite}
@keyframes stepPulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.25);opacity:0}}
.step-ic-wrap{width:70px;height:70px;border-radius:18px;background:var(--card);border:1.5px solid var(--bdr-l);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;transition:all .35s;position:relative;overflow:hidden}
.step-ic-wrap::before{content:'';position:absolute;inset:0;background:var(--grad-btn);opacity:0;transition:opacity .35s}
.step-c:hover .step-ic-wrap{border-color:transparent;transform:translateY(-4px);box-shadow:0 12px 32px rgba(201,72,91,.18)}
.step-c:hover .step-ic-wrap::before{opacity:1}
.step-ic-wrap svg{width:28px;height:28px;color:var(--coral);transition:color .2s;position:relative;z-index:1}
.step-c:hover .step-ic-wrap svg{color:#fff}
.step-c h3{font-size:15px;font-weight:800;margin-bottom:7px}
.step-c p{font-size:12px;color:var(--t2);line-height:1.65;max-width:220px;margin:0 auto 12px}
.step-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;background:rgba(16,185,129,.08);border-radius:12px;font-size:9.5px;color:var(--green);font-weight:700}
@media(max-width:700px){.steps-g{grid-template-columns:1fr;gap:12px}.steps-conn{display:none}}

/* Témoignages */
.testi-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi-c{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:26px;transition:all .3s;position:relative;overflow:hidden}
.testi-c::before{content:'\201C';position:absolute;top:8px;right:16px;font-size:72px;line-height:1;color:var(--coral);opacity:.07;font-family:Georgia,serif;pointer-events:none}
.testi-c:hover{box-shadow:0 12px 36px rgba(0,0,0,.07);transform:translateY(-3px)}
[data-theme="dark"] .testi-c:hover{box-shadow:0 12px 36px rgba(0,0,0,.22)}
.testi-stars{font-size:13px;letter-spacing:3px;margin-bottom:12px;color:#f59e0b}
.testi-txt{font-size:13px;color:var(--t1);line-height:1.7;margin-bottom:18px;font-style:italic}
.testi-auth{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--bdr-l)}
.testi-av{width:38px;height:38px;border-radius:50%;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.testi-nm{font-size:12px;font-weight:700;color:var(--t1)}
.testi-rl{font-size:10px;color:var(--t3);margin-top:1px}
@media(max-width:900px){.testi-g{grid-template-columns:1fr}}

/* Tech stack strip */
.tech-strip{background:var(--card);border-top:1px solid var(--bdr-l);padding:22px 24px}
.tech-strip-in{max-width:900px;margin:0 auto}
.tech-lbl{text-align:center;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;color:var(--t3);margin-bottom:14px}
.tech-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.tech-logo{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;background:var(--bg2);border:1px solid var(--bdr-l);border-radius:9px;font-size:11px;font-weight:700;color:var(--t2);transition:all .2s;cursor:default}
.tech-logo:hover{border-color:var(--coral);color:var(--coral);background:rgba(201,72,91,.04);transform:translateY(-1px)}
.tech-logo svg{width:14px;height:14px;opacity:.45}
.tech-logo:hover svg{opacity:1}

/* Telegram floating label + pulse */
.tg-float::before{content:'Contactez-nous';position:absolute;bottom:calc(100% + 8px);right:50%;transform:translateX(50%) translateY(4px);background:rgba(0,0,0,.78);color:#fff;font-size:10px;font-weight:600;padding:5px 11px;border-radius:7px;white-space:nowrap;opacity:0;transition:all .22s;pointer-events:none;font-family:var(--font)}

/* ══════════════════════════════════════
   REMONIA SECTION + ENHANCED ANIMATIONS
   ══════════════════════════════════════ */

/* Floating animation */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatX{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(201,72,91,.3),0 0 60px rgba(201,72,91,.1)}50%{box-shadow:0 0 40px rgba(201,72,91,.6),0 0 100px rgba(201,72,91,.2)}}
@keyframes typewrite{from{width:0}to{width:100%}}
@keyframes blink{50%{opacity:0}}
@keyframes scanLine{0%{transform:translateY(-100%)}100%{transform:translateY(400px)}}
@keyframes neonFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes particleRise{0%{transform:translateY(0) scale(1);opacity:.8}100%{transform:translateY(-80px) scale(0);opacity:0}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes counterUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ReMonIA Section */
.remonia-sec{position:relative;overflow:hidden;padding:80px 24px;background:var(--navy-deep)}
.remonia-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(201,72,91,.12) 0%,transparent 70%);pointer-events:none}
.remonia-sec-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.remonia-left .rm-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:3px;color:var(--coral);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.remonia-left .rm-tag::before{content:'';width:20px;height:2px;background:var(--coral);border-radius:1px}
.remonia-left h2{font-size:38px;font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.5px;margin-bottom:16px}
.remonia-left h2 em{font-style:normal;background:linear-gradient(90deg,#c9485b,#f472b6,#c9485b);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmerTxt 3s linear infinite}
.remonia-left .rm-desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:32px;max-width:420px}
.rm-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.rm-feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;transition:all .25s}
.rm-feat:hover{background:rgba(201,72,91,.1);border-color:rgba(201,72,91,.3);transform:translateY(-2px)}
.rm-feat-ic{font-size:20px;margin-bottom:6px}
.rm-feat h4{font-size:12px;font-weight:700;color:#fff;margin-bottom:2px}
.rm-feat p{font-size:10.5px;color:rgba(255,255,255,.5);line-height:1.5}
.rm-btns{display:flex;gap:10px;flex-wrap:wrap}
.rm-btn-p{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--grad-btn);color:#fff;border-radius:var(--rs);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;border:none;cursor:pointer;font-family:var(--font)}
.rm-btn-p:hover{box-shadow:0 6px 24px rgba(201,72,91,.4);transform:translateY(-2px);color:#fff}
.rm-btn-o{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:none;color:rgba(255,255,255,.8);border-radius:var(--rs);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;border:2px solid rgba(255,255,255,.2)}
.rm-btn-o:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.05)}

/* ReMonIA Chat mockup */
.remonia-right{position:relative}
.rm-chat-wrap{position:relative;animation:floatY 6s ease-in-out infinite}
.rm-chat{background:#1a2236;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.rm-chat-head{background:linear-gradient(135deg,#1e2a4a,#2d3d6e);padding:14px 18px;display:flex;align-items:center;gap:10px}
.rm-chat-head-av{width:36px;height:36px;border-radius:50%;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative}
.rm-chat-head-av::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:#10b981;border:2px solid #1e2a4a}
.rm-chat-head-info .name{color:#fff;font-weight:700;font-size:14px}
.rm-chat-head-info .status{color:rgba(255,255,255,.5);font-size:11px}
.rm-chat-head-langs{margin-left:auto;display:flex;gap:4px}
.rm-chat-head-langs span{font-size:10px;padding:2px 6px;background:rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.7)}
.rm-chat-msgs{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.rm-msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:12px;line-height:1.5}
.rm-msg.ai{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);align-self:flex-start;border-bottom-left-radius:4px}
.rm-msg.user{background:var(--grad-btn);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.rm-msg-time{font-size:9px;color:rgba(255,255,255,.3);margin-top:4px}
.rm-chat-inp{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.07)}
.rm-chat-inp-f{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.6);font-family:var(--font);outline:none}
.rm-chat-inp-btn{width:34px;height:34px;border-radius:50%;background:var(--grad-btn);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff}

/* Floating badge decorations */
.rm-badge-float{position:absolute;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#1f2937;animation:floatY 5s ease-in-out infinite}
.rm-badge-float.b1{top:-20px;left:-30px;animation-delay:-1s}
.rm-badge-float.b2{bottom:30px;right:-20px;animation-delay:-2.5s}
.rm-badge-float .badge-ic{width:28px;height:28px;border-radius:7px;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.rm-badge-float span{color:#6b7280;font-weight:400;font-size:10px;display:block}

/* Language stats ring */
.rm-lang-ring{position:absolute;top:60px;right:-40px;width:90px;height:90px;animation:rotateSlow 20s linear infinite;opacity:.3}

/* Stats row */
.rm-stats{display:flex;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.rm-stat .n{font-size:22px;font-weight:900;color:#fff}
.rm-stat .l{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}

/* Solutions grid 5-col */
.sol-g-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1100px){.sol-g-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.sol-g-5{grid-template-columns:1fr}}

/* PBX card accent */
.sol-c.pbx{border-top-color:transparent}
.sol-c.pbx::before{background:linear-gradient(90deg,#1e2a4a,#3d5a80,#6366f1)}
/* ReMonIA card accent */
.sol-c.ai{border-top-color:transparent}
.sol-c.ai::before{background:linear-gradient(90deg,#c9485b,#f472b6,#8b5cf6)}
.sol-c.ai .sol-ic-big{background:linear-gradient(135deg,rgba(201,72,91,.1),rgba(139,92,246,.1))}
.sol-c.ai .sol-ic-big svg{color:#8b5cf6}

/* Hero pill PBX + AI */
.hp.pbx{border-color:rgba(99,102,241,.2);background:rgba(99,102,241,.04)}
.hp.pbx:hover{border-color:#6366f1;color:#6366f1}
.hp.ai{border-color:rgba(139,92,246,.2);background:rgba(139,92,246,.04)}
.hp.ai:hover{border-color:#8b5cf6;color:#8b5cf6}

/* ReMonIA widget floating button landing */
#rm-land-btn{position:fixed;bottom:80px;right:20px;z-index:91;cursor:pointer;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#1e2a4a,#c9485b);
  box-shadow:0 4px 20px rgba(201,72,91,.4);
  display:flex;align-items:center;justify-content:center;
  border:none;transition:transform .2s,box-shadow .2s;font-size:22px}
#rm-land-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(201,72,91,.6)}
#rm-land-badge{position:absolute;top:-2px;right:-2px;width:13px;height:13px;
  border-radius:50%;background:#10b981;border:2px solid #fff;animation:pulse-rm 2s infinite}
@keyframes pulse-rm{0%,100%{opacity:1}50%{opacity:.4}}
#rm-land-panel{position:fixed;bottom:144px;right:20px;z-index:90;
  width:340px;
  /* max-height ne peut pas dépasser : viewport - bottom(144) - header(70) - marge(16) */
  max-height:min(480px, calc(100svh - 230px));
  background:#fff;border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  display:none;flex-direction:column;overflow:hidden;
  font-family:'Outfit',sans-serif}
#rm-new-msg-btn{display:none;position:absolute;bottom:110px;left:50%;transform:translateX(-50%);
  background:#c9485b;color:#fff;border:none;border-radius:20px;
  padding:5px 14px;font-size:11px;font-family:'Outfit',sans-serif;
  cursor:pointer;z-index:5;white-space:nowrap;
  box-shadow:0 2px 10px rgba(201,72,91,.45);transition:opacity .2s}
[data-theme="dark"] #rm-land-panel{background:#111827;color:#e8ecf4}
#rm-land-panel.open{display:flex}
.rm-p-head{background:linear-gradient(135deg,#1e2a4a,#2d3d6e);padding:12px 14px;
  display:flex;align-items:center;gap:9px}
.rm-p-head-av{width:32px;height:32px;border-radius:50%;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;font-size:16px}
.rm-p-head .name{color:#fff;font-weight:700;font-size:13px}
.rm-p-head .sub{color:rgba(255,255,255,.55);font-size:10.5px}
.rm-p-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;line-height:1}
.rm-p-close:hover{color:#fff}
.rm-p-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.rm-p-msg{max-width:85%;padding:9px 12px;border-radius:11px;font-size:12px;line-height:1.5}
.rm-p-msg.ai{background:#f3f4f6;color:#1f2937;align-self:flex-start;border-bottom-left-radius:3px}
[data-theme="dark"] .rm-p-msg.ai{background:#1a2234;color:#e8ecf4}
.rm-p-msg.user{background:linear-gradient(135deg,#c9485b,#b03050);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.rm-p-quick{padding:6px 10px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid #f0f0f0}
[data-theme="dark"] .rm-p-quick{border-color:#1e2740}
.rm-p-quick a{display:inline-block;padding:4px 10px;background:#f3f4f6;
  border-radius:12px;font-size:10.5px;color:#374151;text-decoration:none;
  border:1px solid #e5e7eb;cursor:pointer;transition:all .15s}
[data-theme="dark"] .rm-p-quick a{background:#1a2234;color:#9ca3af;border-color:#2a3450}
.rm-p-quick a:hover{background:#1e2a4a;color:#fff;border-color:#1e2a4a}
.rm-p-inp{display:flex;align-items:center;gap:7px;padding:9px 11px;border-top:1px solid #f0f0f0}
[data-theme="dark"] .rm-p-inp{border-color:#1e2740}
.rm-p-inp input{flex:1;border:1px solid #e5e7eb;border-radius:18px;padding:7px 12px;font-size:12px;outline:none;font-family:'Outfit',sans-serif;background:#fff;color:#111}
[data-theme="dark"] .rm-p-inp input{background:#1a2234;border-color:#2a3450;color:#e8ecf4}
.rm-p-inp input:focus{border-color:#c9485b}
.rm-p-inp button{width:32px;height:32px;border-radius:50%;background:#c9485b;border:none;cursor:pointer;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}
.rm-p-inp button:hover{background:#a83345}
@media(max-width:420px){#rm-land-panel{width:calc(100vw - 20px);right:10px;bottom:80px;max-height:calc(100svh - 160px)}}

@media(max-width:900px){.remonia-sec-in{grid-template-columns:1fr}}
@media(max-width:900px){.rm-badge-float{display:none}.rm-lang-ring{display:none}}
.tg-float:hover::before{opacity:1;transform:translateX(50%) translateY(0)}
.tg-float::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(34,158,217,.35);animation:tgPulse 2.8s ease-out infinite;pointer-events:none}
@keyframes tgPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}

/* Gradient text shimmer hero h1 */
.hero h1 span{background-size:200% auto;animation:shimmerTxt 4s linear infinite}
@keyframes shimmerTxt{0%{background-position:0% center}100%{background-position:200% center}}

/* ══════════════════════════════════════
   PBX WEBTIC SECTION
   ══════════════════════════════════════ */
.pbx-sec{background:var(--bg);padding:72px 24px;overflow:hidden}
.pbx-sec-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pbx-left .sec-tag{color:#6366f1}
.pbx-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 32px}
.pbx-feat{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--card);border:1px solid var(--bdr-l);border-radius:10px;transition:all .25s}
.pbx-feat:hover{border-color:rgba(99,102,241,.35);box-shadow:0 6px 20px rgba(99,102,241,.08);transform:translateY(-2px)}
.pbx-feat-ic{width:32px;height:32px;border-radius:8px;background:rgba(99,102,241,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.pbx-feat h4{font-size:11.5px;font-weight:700;margin-bottom:2px;color:var(--t1)}
.pbx-feat p{font-size:10px;color:var(--t2);line-height:1.5}
.pbx-cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pbx-btn-p{padding:11px 24px;background:linear-gradient(135deg,#3d5a80,#6366f1);color:#fff;border-radius:var(--rs);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.pbx-btn-p:hover{box-shadow:0 6px 24px rgba(99,102,241,.35);transform:translateY(-2px);color:#fff}
.pbx-btn-o{padding:11px 24px;border:2px solid var(--bdr);color:var(--t2);border-radius:var(--rs);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;background:none;display:inline-flex;align-items:center;gap:6px}
.pbx-btn-o:hover{border-color:#6366f1;color:#6366f1}
.pbx-plans-mini{display:flex;gap:8px;margin-top:16px}
.pbx-plan{padding:10px 14px;background:var(--bg2);border:1px solid var(--bdr-l);border-radius:9px;text-align:center;flex:1;transition:all .2s}
.pbx-plan:hover{border-color:#6366f1;background:rgba(99,102,241,.05)}
.pbx-plan.featured{border-color:#6366f1;background:rgba(99,102,241,.07)}
.pbx-plan-name{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#6366f1;margin-bottom:3px}
.pbx-plan-price{font-size:18px;font-weight:900;color:var(--t1);line-height:1}
.pbx-plan-unit{font-size:9px;color:var(--t3)}
.pbx-plan-feat{font-size:9px;color:var(--t2);margin-top:4px;line-height:1.5}

/* PBX Right — call flow animation */
.pbx-right{position:relative}
.pbx-screen{background:var(--card);border:1px solid var(--bdr-l);border-radius:18px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.1);animation:floatY 7s ease-in-out infinite}
[data-theme="dark"] .pbx-screen{box-shadow:0 24px 64px rgba(0,0,0,.35)}
.pbx-screen-head{background:linear-gradient(135deg,#1e2a4a,#3d5a80);padding:12px 16px;display:flex;align-items:center;gap:8px}
.pbx-screen-dots{display:flex;gap:5px}
.pbx-screen-dots span{width:10px;height:10px;border-radius:50%}
.pbx-screen-dots .d1{background:#ff5f57}
.pbx-screen-dots .d2{background:#ffbd2e}
.pbx-screen-dots .d3{background:#28c840}
.pbx-screen-title{color:rgba(255,255,255,.7);font-size:11px;font-weight:600;margin-left:4px}
.pbx-screen-body{padding:16px}
.pbx-flow{display:flex;flex-direction:column;gap:8px}
.pbx-flow-row{display:flex;align-items:center;gap:8px}
.pbx-flow-node{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;font-size:11px;font-weight:600;flex:1;transition:all .3s}
.pbx-flow-node.active{animation:pbxNodePulse 2s ease-in-out infinite}
@keyframes pbxNodePulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.3)}50%{box-shadow:0 0 0 6px rgba(99,102,241,0)}}
.pbx-flow-node .n-ic{font-size:14px}
.pbx-flow-arr{color:var(--t3);font-size:11px;flex-shrink:0}
.pbx-stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr-l)}
.pbx-stat-m{text-align:center}
.pbx-stat-m .v{font-size:16px;font-weight:900;background:linear-gradient(135deg,#3d5a80,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pbx-stat-m .l{font-size:9px;color:var(--t3);margin-top:1px}
/* Live indicator */
.pbx-live{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#10b981;margin-left:auto}
.pbx-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#10b981;animation:liveP 1.5s ease-in-out infinite}
@keyframes liveP{0%,100%{opacity:1}50%{opacity:.2}}
/* Floating accent badge */
.pbx-badge-float{position:absolute;background:linear-gradient(135deg,#3d5a80,#6366f1);color:#fff;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;animation:floatY 5s ease-in-out infinite;box-shadow:0 8px 24px rgba(99,102,241,.3)}
.pbx-badge-float.b1{top:-18px;right:-14px;animation-delay:-2s}
.pbx-badge-float.b2{bottom:20px;left:-20px;animation-delay:-4s}
@media(max-width:960px){.pbx-sec-in{grid-template-columns:1fr}.pbx-right{display:none}}

/* ══════════════════════════════════════
   AUTOMATION SECTION
   ══════════════════════════════════════ */
.auto-sec{background:var(--navy-deep);padding:72px 24px;overflow:hidden;position:relative}
.auto-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(99,102,241,.12) 0%,transparent 60%);pointer-events:none}
.auto-sec-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
.auto-left .sec-tag{color:rgba(255,255,255,.5);letter-spacing:3px}
.auto-left .sec-title{color:#fff;font-size:30px}
.auto-left .sec-desc{color:rgba(255,255,255,.55);max-width:400px}
.auto-timeline{display:flex;flex-direction:column;gap:0;margin-top:28px;position:relative}
.auto-timeline::before{content:'';position:absolute;left:17px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#6366f1,#c9485b,transparent)}
.auto-step{display:flex;align-items:flex-start;gap:16px;padding:12px 0 20px;position:relative}
.auto-step-n{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3d5a80,#6366f1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;flex-shrink:0;position:relative;z-index:1;box-shadow:0 0 0 4px rgba(99,102,241,.2)}
.auto-step.fired .auto-step-n{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 0 0 4px rgba(16,185,129,.25);animation:liveP 2s ease-in-out infinite}
.auto-step-body h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.auto-step-body p{font-size:11px;color:rgba(255,255,255,.5);line-height:1.55}
.auto-step-time{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:9px;font-weight:700;color:#10b981;background:rgba(16,185,129,.12);padding:2px 8px;border-radius:8px}
.auto-right{display:flex;flex-direction:column;gap:14px}
.auto-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;transition:all .3s;position:relative;overflow:hidden}
.auto-card:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);transform:translateY(-2px)}
.auto-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,#6366f1,#c9485b);border-radius:3px 0 0 3px}
.auto-card-ic{font-size:22px;margin-bottom:8px}
.auto-card h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
.auto-card p{font-size:11px;color:rgba(255,255,255,.5);line-height:1.55}
.auto-card-tag{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:9.5px;font-weight:700;padding:3px 10px;border-radius:8px}
.auto-card-tag.green{color:#10b981;background:rgba(16,185,129,.12)}
.auto-card-tag.blue{color:#3b82f6;background:rgba(59,130,246,.12)}
.auto-card-tag.purple{color:#8b5cf6;background:rgba(139,92,246,.12)}
@media(max-width:960px){.auto-sec-in{grid-template-columns:1fr}.auto-right{display:none}}

/* ══════════════════════════════════════
   STATS ANIMATED COUNTER
   ══════════════════════════════════════ */
.sn[data-target]{transition:all .1s}
.stats-bar .sn{font-size:28px}

/* ══════════════════════════════════════
   LIVE CALL TICKER
   ══════════════════════════════════════ */
.call-ticker{background:var(--card);border-top:1px solid var(--bdr-l);border-bottom:1px solid var(--bdr-l);padding:10px 0;overflow:hidden;position:relative}
.call-ticker::before,.call-ticker::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.call-ticker::before{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.call-ticker::after{right:0;background:linear-gradient(270deg,var(--card),transparent)}
.call-ticker-track{display:flex;align-items:center;width:max-content;animation:mqScroll 28s linear infinite;gap:0}
.call-ticker-item{display:inline-flex;align-items:center;gap:8px;padding:4px 28px;font-size:11px;color:var(--t2);white-space:nowrap}
.call-ticker-item .dot-live{width:6px;height:6px;border-radius:50%;background:#10b981;animation:liveP 1.5s ease-in-out infinite;flex-shrink:0}
.call-ticker-item strong{color:var(--t1)}
.call-ticker-item .sep{width:2px;height:2px;background:var(--bdr);border-radius:50%;margin:0 6px}

@media(prefers-reduced-motion:reduce){
  .ab,.mq-track,.tg-float::after,.step-n::after,.hero h1 span,.pbx-screen,.auto-card,.pbx-badge-float{animation:none}
  .step-c:hover .step-ic-wrap{transform:none}
}

/* ══════════════════════════════════════
   V3 NOUVELLES SECTIONS
   ══════════════════════════════════════ */

/* ── Ticker pays ── */
.country-ticker{background:linear-gradient(90deg,var(--navy-deep),#0d1830,var(--navy-deep));padding:10px 0;overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.country-ticker::before,.country-ticker::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.country-ticker::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)}
.country-ticker::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent)}
.ct-track{display:flex;align-items:center;width:max-content;animation:mqScroll 40s linear infinite}
.country-ticker:hover .ct-track{animation-play-state:paused}
.ct-item{display:inline-flex;align-items:center;gap:6px;padding:0 24px;font-size:11px;font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap}
.ct-item .ct-flag{font-size:14px}
.ct-item .ct-n{font-weight:800;color:var(--coral)}
.ct-item .ct-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.15);margin-left:-8px}
.ct-item .ct-live{width:5px;height:5px;border-radius:50%;background:#10b981;animation:liveP 1.5s ease-in-out infinite;flex-shrink:0}

/* ── Comparatif ── */
.cmp-sec{padding:64px 24px;background:var(--bg2)}
.cmp-wrap{max-width:900px;margin:0 auto}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--rl);overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.cmp-th{padding:16px 20px;font-size:11px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:1.5px}
.cmp-th.webtic{background:var(--grad-btn);color:#fff}
.cmp-th.other{background:var(--card);color:var(--t3);border-bottom:1px solid var(--bdr-l)}
.cmp-th.webtic .cmp-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;background:rgba(255,255,255,.18);border-radius:8px;font-size:9px;font-weight:700;margin-top:3px}
.cmp-row{background:var(--card)}
.cmp-row:nth-child(even){background:var(--bg2)}
.cmp-row td{padding:13px 20px;font-size:12.5px;border-bottom:1px solid var(--bdr-l);vertical-align:middle}
.cmp-row td:first-child{font-weight:600;color:var(--t1)}
.cmp-row td.webtic-col{text-align:center;background:rgba(201,72,91,.04);border-left:1px solid rgba(201,72,91,.12);border-right:1px solid rgba(201,72,91,.12)}
.cmp-row td.other-col{text-align:center;color:var(--t3)}
.cmp-row:last-child td{border-bottom:none}
.cmp-yes{color:#10b981;font-weight:700;font-size:15px}
.cmp-no{color:var(--t3);font-size:13px}
.cmp-part{color:#f59e0b;font-size:11px;font-weight:600}
@media(max-width:700px){.cmp-sec{padding:40px 12px}.cmp-table{font-size:11px}.cmp-row td{padding:10px 12px}}

/* ── Intégrations ── */
.int-sec{padding:64px 24px;background:var(--bg)}
.int-g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin:28px auto 0}
.int-c{background:var(--card);border:1px solid var(--bdr-l);border-radius:var(--rl);padding:22px 18px;text-align:center;transition:all .3s;position:relative;overflow:hidden;cursor:default}
.int-c::before{content:'';position:absolute;inset:0;background:var(--grad-btn);opacity:0;transition:opacity .3s}
.int-c:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12);border-color:transparent}
.int-c:hover::before{opacity:.05}
.int-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;transition:all .3s}
.int-c:hover .int-ic{transform:scale(1.1)}
.int-nm{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:3px}
.int-cat{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--t3)}
.int-status{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:#10b981}
@media(max-width:900px){.int-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.int-g{grid-template-columns:repeat(2,1fr)}}

/* ══════════════════════════════════════
   CALCULATEUR PREMIUM — Glassmorphism
   ══════════════════════════════════════ */
.calc-sec{padding:88px 24px;background:var(--bg);position:relative;overflow:hidden}
.calc-sec-orb1{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(201,72,91,.08) 0%,transparent 65%);top:-200px;right:-200px;pointer-events:none;animation:auroraF 16s ease-in-out infinite}
.calc-sec-orb2{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(61,90,128,.07) 0%,transparent 65%);bottom:-120px;left:-150px;pointer-events:none;animation:auroraF 20s ease-in-out infinite reverse}
.calc-hd{text-align:center;max-width:560px;margin:0 auto 44px;position:relative;z-index:1}
/* Glass card */
.calc-card{max-width:920px;margin:0 auto;border-radius:22px;overflow:hidden;position:relative;z-index:1;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 48px 120px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
[data-theme="light"] .calc-card{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.07);box-shadow:0 20px 60px rgba(0,0,0,.09);backdrop-filter:blur(16px)}
/* Tabs */
.c-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.28)}
[data-theme="light"] .c-tabs{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.c-tab{flex:1;padding:19px 8px 17px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-align:center;cursor:pointer;border:none;background:none;font-family:var(--font);color:var(--t3);transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.c-tab svg{width:16px;height:16px;transition:all .3s;opacity:.4;flex-shrink:0}
.c-tab:hover{color:var(--t2)}
.c-tab:hover svg{opacity:.6}
.c-tab.on{color:#fff;background:rgba(201,72,91,.07)}
[data-theme="light"] .c-tab.on{color:var(--navy)}
.c-tab.on svg{opacity:1;color:var(--coral)}
.c-tab.on::after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:2px;background:var(--grad-btn);border-radius:2px 2px 0 0;box-shadow:0 0 12px rgba(201,72,91,.5)}
@media(max-width:580px){.c-tab-lbl{display:none}.c-tab{padding:14px 5px}.c-tab svg{width:18px;height:18px}}
/* Body */
.c-body{padding:36px 32px 30px;position:relative}
@media(max-width:580px){.c-body{padding:22px 18px 20px}}
/* Pane — grid layout: controls left, breakdown right */
.c-pane{display:none}
.c-pane.on{display:grid;grid-template-columns:1fr 300px;gap:32px;animation:cpIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes cpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.c-pane.on{grid-template-columns:1fr}}
/* Controls */
.c-fields{display:flex;flex-direction:column;gap:24px}
.c-field-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.c-field-hd label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:var(--t2)}
.c-vbadge{font-size:12px;font-weight:900;color:var(--coral);background:rgba(201,72,91,.12);padding:3px 10px;border-radius:7px;min-width:52px;text-align:center;font-variant-numeric:tabular-nums;transition:all .18s cubic-bezier(.16,1,.3,1)}
/* Slider */
input.c-sl{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;outline:none;cursor:pointer;transition:height .15s ease}
input.c-sl:hover{height:5px}
input.c-sl::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#c9485b,#b44a7a);cursor:pointer;box-shadow:0 0 0 4px rgba(201,72,91,.18),0 2px 12px rgba(201,72,91,.45);transition:all .22s cubic-bezier(.16,1,.3,1)}
input.c-sl::-webkit-slider-thumb:hover{width:24px;height:24px;box-shadow:0 0 0 6px rgba(201,72,91,.12),0 4px 20px rgba(201,72,91,.55)}
input.c-sl::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#c9485b,#b44a7a);cursor:pointer;border:none;box-shadow:0 2px 10px rgba(201,72,91,.4)}
/* Select */
select.c-sel{width:100%;padding:11px 36px 11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;font-family:var(--font);font-size:13px;color:var(--t1);background-color:rgba(255,255,255,.04);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8ba6' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;-webkit-appearance:none;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
[data-theme="light"] select.c-sel{border-color:rgba(0,0,0,.12);background-color:#f7f8fb}
select.c-sel:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(201,72,91,.1);outline:none}
/* Right panel — breakdown */
.c-right{display:flex;flex-direction:column;gap:14px}
.c-breakdown{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px;flex:1;position:relative;overflow:hidden}
.c-breakdown::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-btn);opacity:.6}
[data-theme="light"] .c-breakdown{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.c-bk-title{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;color:var(--t3);margin-bottom:16px}
.c-bk-item{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);gap:8px}
[data-theme="light"] .c-bk-item{border-color:rgba(0,0,0,.05)}
.c-bk-item:last-of-type{border:none;padding-bottom:0}
.c-bk-l{color:var(--t2);font-size:11.5px;line-height:1.4}
.c-bk-l small{font-size:9.5px;color:var(--t3);display:block}
.c-bk-v{font-weight:800;font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap;transition:all .25s cubic-bezier(.16,1,.3,1)}
.c-bk-v.has-val{color:var(--t1)}
.c-bk-v.no-val{color:var(--t3);font-weight:400}
.c-bk-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(201,72,91,.35),transparent);margin:10px 0}
.c-bk-total-row{display:flex;justify-content:space-between;align-items:flex-end;padding-top:6px}
.c-bk-total-l{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3)}
.c-total-price{font-size:32px;font-weight:900;background:var(--grad-h);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;font-variant-numeric:tabular-nums;transition:transform .2s cubic-bezier(.16,1,.3,1),opacity .15s}
.c-total-price.bump{transform:scale(1.1) translateY(-2px);opacity:.8}
/* CTA */
.c-cta-wrap{display:flex;flex-direction:column;gap:8px}
.c-cta-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 20px;background:var(--grad-btn);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;text-decoration:none;transition:all .28s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.c-cta-btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.13);opacity:0;transition:opacity .2s}
.c-cta-btn:hover{box-shadow:0 10px 36px rgba(201,72,91,.5);transform:translateY(-2px);color:#fff}
.c-cta-btn:hover::before{opacity:1}
.c-cta-btn:active{transform:translateY(0)}
.c-cta-btn svg{width:14px;height:14px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.c-cta-btn:hover svg{transform:translateX(3px)}
.c-note-line{font-size:9.5px;color:var(--t3);text-align:center;display:flex;align-items:center;justify-content:center;gap:5px}
.c-note-line::before{content:'';width:5px;height:5px;border-radius:50%;background:#10b981;flex-shrink:0;animation:liveP 2s ease-in-out infinite}
/* Global premium upgrades */
.hb.p,.sol-btn,.rm-btn-p,.pbx-btn-p,.cta-btn-p{position:relative;overflow:hidden}
.hb.p::after,.sol-btn::after,.rm-btn-p::after,.pbx-btn-p::after,.cta-btn-p::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.14);opacity:0;transition:opacity .22s}
.hb.p:hover::after,.sol-btn:hover::after,.rm-btn-p:hover::after,.pbx-btn-p:hover::after,.cta-btn-p:hover::after{opacity:1}
/* Card glow on hover */
.sv:hover,.why-c:hover,.sol-c:hover,.testi-c:hover,.int-c:hover,.status-card:hover{box-shadow:0 12px 40px rgba(201,72,91,.12),0 0 0 1px rgba(201,72,91,.15)!important}
[data-theme="dark"] .sv:hover,[data-theme="dark"] .why-c:hover,[data-theme="dark"] .sol-c:hover,[data-theme="dark"] .testi-c:hover{box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(201,72,91,.2)!important}
/* Section dividers — ambient light */
.remonia-sec,.auto-sec{background:linear-gradient(180deg,rgba(201,72,91,.02) 0%,var(--navy-deep) 8%,var(--navy-deep) 92%,rgba(201,72,91,.02) 100%)}
/* Better scroll bar */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--grad-btn);border-radius:4px}
/* Stagger children animation helper */
.stagger-fade>*{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.stagger-fade.visible>*:nth-child(1){transition-delay:.05s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(2){transition-delay:.12s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(3){transition-delay:.19s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(4){transition-delay:.26s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(5){transition-delay:.33s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(6){transition-delay:.40s;opacity:1;transform:none}
.stagger-fade.visible>*:nth-child(n+7){transition-delay:.47s;opacity:1;transform:none}

/* ── Statut réseau ── */
.status-sec{padding:64px 24px;background:var(--navy-deep);position:relative;overflow:hidden}
.status-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(16,185,129,.07) 0%,transparent 60%);pointer-events:none}
.status-grid{max-width:900px;margin:28px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative;z-index:1}
.status-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--rl);padding:18px 20px;transition:all .3s}
.status-card:hover{background:rgba(255,255,255,.07);border-color:rgba(16,185,129,.25)}
.status-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.status-svc{display:flex;align-items:center;gap:10px}
.status-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.status-nm{font-size:12.5px;font-weight:700;color:#fff}
.status-loc{font-size:9.5px;color:rgba(255,255,255,.35);margin-top:1px}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;font-size:9px;font-weight:700}
.status-badge.ok{background:rgba(16,185,129,.12);color:#10b981}
.status-badge.ok::before{content:'';width:5px;height:5px;border-radius:50%;background:#10b981;animation:liveP 1.5s ease-in-out infinite}
.status-badge.warn{background:rgba(245,158,11,.12);color:#f59e0b}
.uptime-bar{display:flex;gap:2px;margin-bottom:8px}
.uptime-day{flex:1;height:6px;border-radius:1px;background:rgba(255,255,255,.08);transition:background .3s}
.uptime-day.ok{background:#10b981}
.uptime-day.warn{background:#f59e0b}
.uptime-day.down{background:#ef4444}
.status-meta{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(255,255,255,.3)}
.status-meta strong{color:#10b981;font-weight:700}
.status-meta.warn strong{color:#f59e0b}
@media(max-width:700px){.status-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════
   MOBILE FIXES — comprehensive
   ═══════════════════════════════════════ */

/* Top bar — caché sur mobile */
@media(max-width:768px){
  .l-top{display:none}
  /* Nav mega-menu — bloqué sur mobile (remplacé par sidebar) */
  .l-dd-menu{display:none!important}
  /* Hero */
  .hero{padding:48px 16px 40px}
  .hero-badge{font-size:9px;padding:5px 12px}
  /* Pilules hero — scroll horizontal sur très petits écrans */
  .hero-pills{gap:5px}
  .hp{font-size:9px;padding:3px 9px}
  .hp svg{display:none}
  /* Stats */
  .stats-bar{padding:20px 16px}
  .sn{font-size:24px}
  /* Marquee */
  .mq-wrap{padding:10px 0}
  /* Sections */
  .sec{padding:48px 16px}
  /* Why grid */
  .why-g{grid-template-columns:1fr}
  /* Ticker (country) */
  .ticker-wrap{padding:14px 0}
  /* Comparison table — scroll horizontal */
  .cmp-sec{overflow-x:auto;padding:40px 0}
  .cmp-table{min-width:520px}
  /* Integrations */
  .int-g{grid-template-columns:repeat(2,1fr)}
  /* Calculator */
  .calc-card{border-radius:16px}
  .c-tabs{padding:16px 16px 0}
  .c-tab{padding:12px 8px}
  .c-tab-lbl{display:none}
  /* Contact */
  .contact-wrap{padding:24px 16px;border-radius:16px}
  /* Footer */
  .ft{padding:40px 16px 24px}
  /* Sections avec des pads spécifiques */
  .pbx-sec,.auto-sec,.remonia-sec{padding:48px 16px}
  .pbx-sec-in,.auto-sec-in,.remonia-sec-in{grid-template-columns:1fr}
  .pbx-right,.auto-right{display:none}
  /* Steps */
  .steps-g{grid-template-columns:1fr;gap:12px}
  .steps-conn{display:none}
  /* Pricing section */
  .voip-g{grid-template-columns:repeat(2,1fr)}
  /* CTA */
  .cta-sec{padding:48px 16px}
  .cta-sec h2{font-size:22px}
  /* Network status */
  .status-section{padding:40px 16px}
  /* Sol-g-5 */
  .sol-g-5{grid-template-columns:1fr}
  .sol-actions{flex-direction:row;justify-content:center}
  .sol-btn{width:auto}
}

/* Très petits écrans — 375px */
@media(max-width:420px){
  .hero h1{font-size:22px!important}
  .hero p{font-size:13px}
  .hb{padding:10px 18px;font-size:12.5px}
  .hero-pills{display:none}
  .sn{font-size:20px}
  .sol-g-5{grid-template-columns:1fr}
  .sol-actions{flex-direction:column}
  .sol-btn{width:100%}
  .cmp-table{font-size:10px}
  .int-g{grid-template-columns:repeat(2,1fr)}
  .c-tab-lbl{display:none}
  /* Ticker country */
  .ticker-countries{gap:6px}
  /* Calculator */
  .c-pane.on{grid-template-columns:1fr}
}

/* Tablette — 500-768px : sol-g-5 en 2 colonnes */
@media(min-width:421px) and (max-width:768px){
  .sol-g-5{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:26px}
  .int-g{grid-template-columns:repeat(3,1fr)}
}

/* Navigation mobile — sidebar */
@media(max-width:768px){
  .mob-menu{display:flex!important}
  .l-nav-links{display:none!important}
}

/* ===================================================================
   EN-TÊTE MOBILE LANDING — 2026-07-25

   1) Le sélecteur de langue FR/EN était masqué sur téléphone par la règle
      `@media(max-width:768px){.lang-sw{display:none}}` (ligne 41) — règle
      d'origine, jamais modifiée. On le réaffiche.
      Place libérée en sortant le CTA « Espace client » de la barre : il est
      déjà présent DEUX fois dans le menu déroulant (« Se connecter » +
      « Espace client »). En-tête mobile = Logo · FR/EN · Thème · ≡
   2) Le menu déroulant mesurait 793px de haut pour 664px de viewport : il
      débordait de 187px sans défilement interne, les derniers liens étaient
      donc inatteignables. Ajout de max-height + overflow-y.

   ROLLBACK : supprimer ce bloc et remettre style.css?v=20260519 dans index.html
   =================================================================== */

@media (max-width: 768px) {

  /* ── 1. Traducteur FR/EN rétabli ── */
  .lang-sw { display: block !important; margin-left: 6px; flex-shrink: 0; }
  .l-nav-cta { display: none; }          /* → disponible dans le menu déroulant */

  .l-nav-in { padding: 0 12px; }
  .l-nav-logo img { height: 26px; }
  .th-wrap { flex-shrink: 0; }
  .mob-menu { flex-shrink: 0; }

  /* ── 2. Menu déroulant : défilement interne, superposition franche ── */
  .l-nav.mob-open .mob-nav {
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
  }
  /* Fond opaque : le contenu de la page ne doit pas transparaître */
  [data-theme="light"] .l-nav.mob-open .mob-nav { background: #fff; }
  [data-theme="dark"]  .l-nav.mob-open .mob-nav { background: #0a0f1a; }

  /* NB : ne PAS mettre overflow-x:hidden sur .l-nav — cela forcerait
     overflow-y:auto et rognerait ce menu (position:absolute; top:100%). */
}

/* ── Très petits écrans : on récupère 30px en retirant soleil/lune ── */
@media (max-width: 380px) {
  .th-wrap svg { display: none; }
  .l-nav-logo img { height: 23px; }
  .lang-btn { padding: 5px 7px; gap: 4px; }
}