/* ═══════════════════════════════════════════════════════════════════════
   UC365 — design system du site (Apple-like). Tokens en :root.
   Marine #0A1628 + aqua #3EC3E6 (charte 2026-10). Titres Outfit, texte Inter.
   Alternance sections sombres / claires. Une seule famille d'accent : l'aqua.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A1628; --bg2:#0D1B33; --card:#122440; --card2:#16294A; --line:#1E3354; --line2:#2A4470;
  --txt:#F5F7FA; --muted:#9FB0C6; --silver:#CDD8E6;
  --aqua:#3EC3E6; --aqua2:#8BE3F7; --aqua3:#B4F0FC; --aqua-deep:#0A9CC4; --ok:#34D399; --warn:#FBBF24; --bad:#F87171;
  --accent:linear-gradient(110deg,#B4F0FC,#3EC3E6 55%,#8BE3F7);
  --lbg:#F5F8FC; --lbg2:#FFFFFF; --ltxt:#0A1628; --lmuted:#5B6B82; --lline:#E3E9F2; --lcard:#FFFFFF;
  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:120px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Outfit",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --r:22px; --r2:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{color:var(--txt);background:var(--bg);font:17px/1.65 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.011em;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:650;letter-spacing:-.03em;line-height:1.08}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:800px}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--aqua);color:#06111f;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.rv{animation:rvUp .7s cubic-bezier(.22,1,.36,1) both}
.rv.d2{animation-delay:.15s}
@keyframes rvUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.io{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.io.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.io{animation:none;opacity:1;transform:none;transition:none}}
.eyebrow{color:var(--aqua);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;font-family:var(--font)}
.dotg{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px rgba(52,211,153,.18);flex:0 0 auto}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:980px;font-weight:600;font-size:16px;transition:.18s;border:1px solid transparent;white-space:nowrap;cursor:pointer;font-family:var(--font);line-height:1.2}
.btn.sm{padding:9px 18px;font-size:14.5px}
.btn-primary{background:var(--accent);color:#06111f;box-shadow:0 14px 34px -14px rgba(62,195,230,.75)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 38px -14px rgba(62,195,230,.9);filter:brightness(1.04)}
.btn-ghost{border-color:var(--line2);color:var(--txt);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--aqua);color:var(--aqua2)}
.btn-link{padding:0;background:none;color:var(--aqua2);font-weight:600}
.btn-link::after{content:" →"}
.light .btn-ghost{border-color:#c9d4e3;color:var(--ltxt);background:#fff}
.light .btn-ghost:hover{border-color:var(--aqua-deep);color:var(--aqua-deep)}
.light .btn-link{color:var(--aqua-deep)}

/* nav */
nav{position:sticky;top:0;z-index:50;transition:.25s;border-bottom:1px solid transparent;background:rgba(10,22,40,.6);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
nav.solid{background:rgba(10,22,40,.86);border-bottom-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.brand{height:52px;width:auto}
.brand-link{flex:0 0 auto}
.navlinks{display:flex;gap:18px;align-items:center}
.navlinks>a:not(.btn),.nav-dd>button{white-space:nowrap;color:var(--silver);font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;padding:0}
.navlinks>a:not(.btn):hover,.nav-dd>button:hover{color:#fff}
.nav-tel{font-variant-numeric:tabular-nums}
.nav-lang{border:1px solid var(--line2);border-radius:980px;padding:4px 10px;font-size:12.5px!important;letter-spacing:.04em}
.nav-dd{position:relative}
.chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block}
.dd{position:absolute;top:calc(100% + 14px);left:-14px;min-width:270px;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:10px;display:none;flex-direction:column;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.dd a{padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--silver)}
.dd a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-dd.open .dd,.nav-dd:hover .dd,.nav-dd:focus-within .dd{display:flex}
.nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}

/* hero */
.hero{position:relative;padding:84px 0 96px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:760px;background:radial-gradient(50% 60% at 25% 0%,rgba(62,195,230,.20),transparent 70%),radial-gradient(40% 50% at 82% 8%,rgba(139,227,247,.12),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-grid.solo{grid-template-columns:1fr;max-width:860px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:980px;padding:7px 15px;font-size:13.5px;color:var(--silver)}
.hero-h1{font-size:clamp(34px,4.5vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:22px 0 0;max-width:20ch;background:linear-gradient(180deg,#fff,#cfe9f5 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-h1 b{font-weight:700;background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:58ch;font-size:19px;color:var(--muted);margin-top:20px}
.lead b{color:var(--txt);font-weight:600}
.light .lead{color:var(--lmuted)}.light .lead b{color:var(--ltxt)}
.cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.trust{margin-top:24px;color:var(--muted);font-size:13.5px}

/* carte « live » (verre) */
.live{background:linear-gradient(180deg,rgba(22,41,74,.92),rgba(10,22,40,.95));border:1px solid var(--line2);border-radius:var(--r);padding:22px;box-shadow:0 50px 110px -60px rgba(62,195,230,.55)}
.live-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.live-head>div{flex:1}.live-head b{display:block;font-size:16px}.live-head span{font-size:13px;color:var(--muted)}
.live-ic{display:flex;color:var(--aqua)}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ok);border:1px solid rgba(52,211,153,.3);border-radius:980px;padding:4px 10px}
.lv-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:var(--r2);padding:13px 15px;margin-top:10px}
.lv-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.lv-dot.warn{background:var(--warn)}.lv-dot.bad{background:var(--bad)}
.lv-t{flex:1;font-size:14.5px;color:var(--silver)}
.lv-v{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.live-foot{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--muted)}
.st-list{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.st-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r2);border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:14.5px;color:var(--silver)}
.st-ic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(52,211,153,.15);color:var(--ok);flex:0 0 auto}
.st-list li.cur .st-ic{background:rgba(62,195,230,.15);border:2px solid var(--aqua);animation:pulse 1.4s infinite}
.st-list li.cur{color:#fff}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,195,230,.4)}50%{box-shadow:0 0 0 7px rgba(62,195,230,0)}}
.iq-logo{height:30px;width:auto}

/* chaîne câble → appel */
.chain{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ch-node{position:relative;z-index:1;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:16px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.ch-node b{font-size:14px;font-family:var(--display)}.ch-node span{font-size:12px;color:var(--muted);line-height:1.3}
.ch-ic{color:var(--aqua);display:flex}
.ch-line{position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,var(--aqua),var(--aqua2));opacity:.5}
.light .ch-node{background:#fff;border-color:var(--lline)}.light .ch-node span{color:var(--lmuted)}

/* sections */
section{padding:var(--s7) 0}
section.light{background:var(--lbg);color:var(--ltxt)}
section.light .eyebrow{color:var(--aqua-deep)}
section.light2{background:var(--lbg2);color:var(--ltxt)}
.sec-head{text-align:center;max-width:62ch;margin:0 auto var(--s6)}
.sec-head h2{font-size:clamp(30px,4.4vw,48px)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:19px}
.light .sec-head p{color:var(--lmuted)}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.phead{padding:70px 0 40px;position:relative}
.phead::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:520px;background:radial-gradient(50% 60% at 30% 0%,rgba(62,195,230,.16),transparent 70%);pointer-events:none}
.phead .wrap{position:relative;max-width:900px}
.phead h1{font-size:clamp(34px,5vw,60px);margin-top:14px;max-width:20ch;background:linear-gradient(180deg,#fff,#cfe9f5 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phead .lead{font-size:20px}

/* cartes */
.cards{display:grid;gap:18px}
.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:repeat(2,1fr)}.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:.2s;display:flex;flex-direction:column;gap:10px}
a.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 30px 60px -40px rgba(62,195,230,.5)}
.card h3{font-size:20px}
.card p{color:var(--muted);font-size:15.5px;flex:1}
.card-ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(62,195,230,.12);color:var(--aqua);margin-bottom:6px}
.more{color:var(--aqua2);font-weight:600;font-size:14.5px}.more::after{content:" →"}
.light .card{background:var(--lcard);border-color:var(--lline);box-shadow:0 10px 30px -22px rgba(10,22,40,.25)}
.light .card p{color:var(--lmuted)}.light .card-ic{background:rgba(10,156,196,.1);color:var(--aqua-deep)}.light .more{color:var(--aqua-deep)}
.light a.card:hover{box-shadow:0 30px 60px -36px rgba(10,22,40,.35);border-color:#cfdbe9}

/* split */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.flip .split-text{order:2}
.split-text h2{font-size:clamp(28px,3.8vw,44px);margin-top:14px}
.split-text .lead{margin-top:16px;font-size:18px}
.checks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checks li svg{flex:0 0 auto;margin-top:4px;color:var(--aqua)}
.checks li span{color:var(--silver)}
.light .checks li span{color:#2b3a50}.light .checks li svg{color:var(--aqua-deep)}
.art{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--card);padding:26px;box-shadow:0 50px 100px -55px rgba(62,195,230,.45)}
.light .art{background:#fff;border-color:var(--lline);box-shadow:0 40px 90px -50px rgba(10,40,90,.3)}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.stat-n{font-family:var(--display);font-size:clamp(44px,6vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{margin-top:12px;font-size:17px;font-weight:500;line-height:1.35}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.light .stat{background:#fff;border-color:var(--lline)}.light .stat span{color:var(--lmuted)}

/* étapes */
.steps-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px}
.num{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#06111f;font-weight:800;font-family:var(--display);font-size:17px}
.steps-list h3{font-size:19px}.steps-list p{color:var(--muted);font-size:15px;margin-top:6px}
.light .steps-list li{background:#fff;border-color:var(--lline)}.light .steps-list p{color:var(--lmuted)}

/* tableaux */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:rgba(255,255,255,.02)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:#fff}
.light .tbl{background:#fff;border-color:var(--lline)}.light .tbl th,.light .tbl td{border-color:var(--lline)}.light .tbl th{color:var(--lmuted)}.light .tbl td b{color:var(--ltxt)}
.note{color:var(--muted);font-size:14px;margin-top:16px;max-width:80ch}
.light .note{color:var(--lmuted)}

/* avant / après */
.cmp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cmp-card{position:relative;border-radius:var(--r);background:var(--card2);border:1px solid var(--line);padding:30px 28px;overflow:hidden}
.cmp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.cmp-card.before::before{background:linear-gradient(90deg,#EF4444,#F97316)}
.cmp-card.after::before{background:var(--accent)}
.cmp-card.after{box-shadow:0 40px 90px -48px rgba(62,195,230,.6)}
.cmp-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;gap:10px}
.cmp-top b{font-size:19px;font-family:var(--display)}
.cmp-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line2);border-radius:980px;padding:4px 10px;color:var(--muted);white-space:nowrap}
.cmp-card.after .cmp-tag{color:var(--ok);border-color:rgba(52,211,153,.35)}
.cmp-card ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.cmp-card li{display:flex;gap:12px;align-items:flex-start}
.cmp-card li b{display:block;font-size:15.5px}.cmp-card li span{color:var(--muted);font-size:14px}
.ci{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto;margin-top:1px;background:rgba(239,68,68,.15);color:#F87171}
.cmp-card.after .ci{background:rgba(52,211,153,.15);color:var(--ok)}
.cmp-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--bg);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;z-index:2}
.light .cmp-card{background:#fff;border-color:var(--lline)}.light .cmp-card li span{color:var(--lmuted)}.light .cmp-vs{background:#fff;border-color:var(--lline);color:var(--ltxt)}

/* FAQ */
.faq{border-top:1px solid var(--line);padding:4px 0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:600;font-size:17.5px;font-family:var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--aqua);flex:0 0 auto;transition:.2s;font-weight:300}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 22px;color:var(--silver);max-width:70ch}
.light .faq,.light .faq:last-of-type{border-color:var(--lline)}.light .faq-a{color:#2b3a50}.light .faq summary::after{color:var(--aqua-deep)}

/* prose */
.prose p{margin:0 0 18px;color:var(--silver);font-size:17.5px}
.prose h2{font-size:clamp(26px,3.4vw,36px);margin:44px 0 16px}
.prose h3{font-size:22px;margin:32px 0 12px}
.prose ul,.prose ol{margin:0 0 20px 22px;color:var(--silver);display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--aqua)}
.prose a{color:var(--aqua2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(139,227,247,.4)}
.prose blockquote{border-left:3px solid var(--aqua);padding:6px 0 6px 20px;margin:0 0 22px;font-size:20px;font-family:var(--display);font-weight:500;color:#fff;line-height:1.4}
.prose .tbl{margin:0 0 22px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.prose b{color:#fff}
.light .prose p,.light .prose ul,.light .prose ol{color:#2b3a50}.light .prose b{color:var(--ltxt)}.light .prose a{color:var(--aqua-deep)}.light .prose blockquote{color:var(--ltxt);border-color:var(--aqua-deep)}
.intro{padding:var(--s6) 0 var(--s5)}
.prose-sec{padding:var(--s5) 0 var(--s7)}
body.article .phead h1{max-width:24ch;font-size:clamp(32px,4.4vw,52px)}
body.article .phead .lead{font-size:19px}

/* pricing */
.price-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.tbl.price td:first-child{white-space:nowrap}
.incl{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);border-radius:var(--r);padding:28px;position:relative}
.incl::before{content:"";position:absolute;inset:-1px;border-radius:var(--r);padding:1px;background:var(--accent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.incl h3{font-size:19px}
.incl .checks{margin-top:16px}.incl .checks li{font-size:15px}
.h-extras{font-size:22px;margin:48px 0 14px}
.tbl.extras table{min-width:0}.tbl.extras td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:#fff}

/* logos */
.logos h2{text-align:center;font-size:clamp(22px,3vw,30px);margin-bottom:28px}
.logos ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.logos li{background:#fff;border-radius:16px;padding:12px 18px;display:flex;align-items:center;justify-content:center;height:84px;width:170px;border:1px solid var(--lline)}
.logos img{max-height:60px;width:auto;object-fit:contain}
.logos .note{text-align:center;margin:18px auto 0}

/* CTA finale */
.cta-sec{padding:var(--s7) 0}
.cta-box{text-align:center;background:linear-gradient(180deg,var(--card2),var(--bg2));border:1px solid var(--line2);border-radius:28px;padding:64px 28px;position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%,rgba(62,195,230,.18),transparent 70%);pointer-events:none}
.cta-box h2{font-size:clamp(28px,4vw,46px);position:relative}
.cta-box p{color:var(--muted);margin:14px auto 0;max-width:60ch;position:relative;font-size:18px}
.cta-box .cta{justify-content:center;position:relative}

/* formulaires */
.form-sec{padding:var(--s6) 0 var(--s7)}
.form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.form-side h2{font-size:clamp(26px,3.4vw,38px)}
.lead-form{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--silver);font-weight:500}
.lead-form label:has(textarea),.lead-form label:has(select),.lead-form button,.form-note,.form-ok,.form-err{grid-column:1/-1}
.lead-form input,.lead-form textarea,.lead-form select{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;color:#fff;font:16px var(--font);width:100%;transition:.15s}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:0;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(62,195,230,.2)}
.lead-form button{justify-content:center;margin-top:6px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:12.5px;color:var(--muted);margin:0}
.form-ok{color:var(--ok);font-weight:600}.form-err{color:var(--bad)}

/* blogue */
.posts{padding:var(--s5) 0 var(--s7)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:10px;transition:.2s}
.post:hover{transform:translateY(-3px);border-color:var(--line2)}
.post-date{font-size:12.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.post h3{font-size:21px}.post p{color:var(--muted);font-size:15px;flex:1}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 0 40px;color:var(--muted);font-size:14px;background:#081220}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;align-items:start}
.foot-brand .brand{height:46px}
.foot-brand p{margin-top:16px;max-width:36ch;font-size:14.5px;line-height:1.6}
.foot-addr{color:var(--silver)}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--silver);margin-bottom:4px}
.foot-col a{color:var(--muted);transition:.15s}.foot-col a:hover{color:var(--aqua2)}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-groupe a{color:var(--silver)}.foot-groupe a:hover{color:var(--aqua2)}

/* responsive */
@media (max-width:1024px){
  .cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}
  .steps-list{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
  .chain{grid-template-columns:repeat(5,1fr);gap:6px}.ch-node{padding:12px 6px}.ch-node span{display:none}
}
@media (max-width:900px){
  .hero-grid,.split-grid,.form-grid,.cmp{grid-template-columns:1fr}
  .split.flip .split-text{order:0}
  .cmp-vs{display:none}
  .navlinks{display:none;position:absolute;left:0;right:0;top:78px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:14px 20px 22px;gap:4px;max-height:calc(100vh - 78px);overflow:auto}
  .navlinks.open{display:flex}
  .navlinks>a:not(.btn),.nav-dd>button{padding:12px 4px;font-size:16px;width:100%;justify-content:space-between}
  .nav-dd .dd{position:static;display:none;border:0;background:rgba(255,255,255,.03);padding:4px 8px 10px;box-shadow:none;min-width:0}
  .nav-dd.open .dd{display:flex}
  .nav-dd:hover .dd{display:none}.nav-dd.open:hover .dd{display:flex}
  .nav-lang{align-self:flex-start;margin:8px 0}
  .navlinks .btn{justify-content:center;margin-top:8px}
  .burger{display:flex}
  .hero{padding:48px 0 64px}
  section{padding:var(--s6) 0}
  .stats-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .cards.c3,.cards.c4,.cards.c2,.steps-list,.post-grid,.foot-grid{grid-template-columns:1fr}
  .lead-form{grid-template-columns:1fr;padding:20px}
  .brand{height:44px}
  .chain{grid-template-columns:1fr;gap:8px}.ch-line{display:none}.ch-node{flex-direction:row;text-align:left;gap:12px;padding:12px 14px}.ch-node span{display:block}
  .btn{padding:14px 22px;font-size:15px}
  .cta .btn{width:100%;justify-content:center}
  .logos li{width:calc(50% - 7px)}
}

/* ═══════════ Itération 2 (2026-10-20) : couleur, sections claires, visuels ═══════════ */
/* tuiles d'icônes : un seul style, néon aqua (comme le portail) */
.tile{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--aqua2);flex:0 0 auto;
  background:rgba(62,195,230,.08);border:1px solid rgba(62,195,230,.45);box-shadow:0 0 0 1px rgba(62,195,230,.08),0 0 22px rgba(62,195,230,.28),inset 0 0 14px rgba(62,195,230,.10)}
.tile .ic{filter:drop-shadow(0 0 6px rgba(62,195,230,.75))}
.light .tile{background:#fff;color:var(--aqua-deep);border-color:rgba(10,156,196,.45);box-shadow:0 0 0 1px rgba(10,156,196,.06),0 0 20px rgba(62,195,230,.35)}
.light .tile .ic{filter:drop-shadow(0 0 5px rgba(62,195,230,.6))}
.card .tile{margin-bottom:8px}
.card-n{position:absolute;top:22px;right:24px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--muted);opacity:.7}
.card{position:relative}
.num{background:rgba(62,195,230,.1);color:var(--aqua2);border:1px solid rgba(62,195,230,.5);box-shadow:0 0 18px rgba(62,195,230,.3)}
.light .num{background:#fff;color:var(--aqua-deep);border-color:rgba(10,156,196,.5)}

/* titres de section : plus mesurés ; les sections « compact » encore plus */
.sec-head h2{font-size:clamp(28px,3.6vw,42px)}
.compact .sec-head{margin-bottom:var(--s5)}
.compact .sec-head h2{font-size:clamp(24px,2.8vw,32px)}
.compact{padding:var(--s6) 0}

/* sections claires : texture et lumière, plus de « page vide » */
section.light,section.light2{position:relative;overflow:hidden}
section.light::before,section.light2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 55% at 8% 0%,rgba(62,195,230,.14),transparent 70%),radial-gradient(36% 50% at 95% 100%,rgba(109,76,255,.10),transparent 70%),
  radial-gradient(circle at 1px 1px,rgba(10,22,40,.06) 1px,transparent 0);background-size:auto,auto,22px 22px}
section.light>.wrap,section.light2>.wrap{position:relative}
.light .card{box-shadow:0 18px 40px -28px rgba(10,22,40,.35)}
.light .card h3{color:var(--ltxt)}

/* piliers (fiable · humain · disponible) */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px}
.pillar b{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.pillar p{color:var(--muted);font-size:15px}
.light .pillar{background:#fff;border-color:var(--lline)}.light .pillar p{color:var(--lmuted)}

/* bande de promesse */
.band{padding:var(--s6) 0;background:linear-gradient(110deg,#0A9CC4,#3EC3E6 55%,#8BE3F7);color:#06111f;text-align:center}
.band blockquote{font-family:var(--display);font-size:clamp(24px,3.4vw,40px);font-weight:650;letter-spacing:-.03em;line-height:1.12;max-width:28ch;margin:0 auto}
.band p{margin:14px auto 0;font-size:17px;max-width:64ch;color:#0a2a36}

/* deux colonnes de prose courte */
.twocol{display:grid;gap:22px}
.twocol.c2{grid-template-columns:1fr 1fr}.twocol.c3{grid-template-columns:repeat(3,1fr)}
.tc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.tc-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}.tc-h h3{font-size:21px}
.tc .prose p,.tc .prose li{font-size:15.5px}.tc .prose p{margin-bottom:12px}.tc .prose ul{margin-bottom:0}
.light .tc{background:#fff;border-color:var(--lline)}

/* captures d'écran */
figure.frame{margin:0}
figure.frame figcaption{padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:#0e1730}
.frame.big{max-width:1000px;margin:0 auto}
.light figure.frame figcaption{background:#f3f6fa;border-color:var(--lline);color:var(--lmuted)}

/* encadré */
.callout{display:flex;gap:20px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px}
.callout h3{font-size:21px;margin-bottom:8px}.callout .prose p:last-child{margin-bottom:0}
.light .callout{background:#fff;border-color:var(--lline)}

/* mock : application 3CX */
.appmock{background:linear-gradient(180deg,#141f33,#0c1527);border:1px solid var(--line2);border-radius:26px;padding:18px;box-shadow:0 50px 110px -60px rgba(62,195,230,.55);max-width:420px;margin:0 auto}
.ap-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ap-top>div{flex:1}.ap-top b{display:block;font-size:14.5px}.ap-top span:not(.live-badge){font-size:12px;color:var(--muted)}
.ap-ic{display:flex;color:var(--aqua)}
.ap-call{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0;padding:14px;border-radius:16px;background:rgba(62,195,230,.08);border:1px solid rgba(62,195,230,.25)}
.ap-call-l{display:flex;align-items:center;gap:12px}.ap-call b{display:block;font-size:15px}.ap-call span:not(.ap-av):not(.ap-timer){font-size:12.5px;color:var(--muted)}
.ap-av{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:0 0 auto}
.ap-av.big{width:42px;height:42px;background:linear-gradient(135deg,#2E6BFF,#4FDFFF)}
.ap-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ok)}
.ap-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ap-actions span{font-size:11.5px;text-align:center;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--silver)}
.ap-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.ap-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-top:1px solid var(--line)}
.ap-row>div{flex:1}.ap-row b{display:block;font-size:13.5px}.ap-row span:not(.ap-av):not(.ap-dot){font-size:12px;color:var(--muted)}
.ap-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}.ap-dot.busy{background:var(--bad)}.ap-dot.away{background:var(--warn)}

/* mock : portail client */
.portal{border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:#0b1322;box-shadow:0 50px 110px -60px rgba(62,195,230,.5)}
.pt-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#0e1730;border-bottom:1px solid var(--line)}
.pt-bar span{width:10px;height:10px;border-radius:50%;background:#33415c}.pt-bar span:first-child{background:#ff5f57}.pt-bar span:nth-child(2){background:#febc2e}.pt-bar span:nth-child(3){background:#28c840}
.pt-bar em{margin-left:10px;font-style:normal;font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border-radius:8px;padding:3px 10px;flex:1}
.pt-body{display:grid;grid-template-columns:150px 1fr;min-height:260px}
.pt-side{background:#0e1a2f;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.pt-side img{margin:0 0 12px 6px}
.pt-side span{font-size:13px;color:var(--muted);padding:7px 10px;border-radius:9px}.pt-side span.on{background:rgba(62,195,230,.12);color:#fff}
.pt-main{padding:16px 18px}
.pt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.pt-head b{font-size:15px}
.pt-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.pt-k{color:#fff;font-weight:600}.pt-v{color:var(--muted)}
.pt-s{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:980px;border:1px solid var(--line2);color:var(--silver)}
.pt-s.ok{color:var(--ok);border-color:rgba(52,211,153,.35)}.pt-s.warn{color:var(--warn);border-color:rgba(251,191,36,.35)}
.light .portal{box-shadow:0 40px 90px -50px rgba(10,40,90,.4)}

/* mock : migration sans interruption */
.migr{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:24px;box-shadow:0 50px 110px -60px rgba(62,195,230,.5)}
.mg-head{display:flex;justify-content:flex-end;margin-bottom:10px}
.mg-list{list-style:none;position:relative;display:flex;flex-direction:column;gap:0}
.mg-list::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,var(--aqua),var(--aqua2))}
.mg-list li{position:relative;padding:12px 0 12px 52px}
.mg-n{position:absolute;left:0;top:10px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#06111f;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);box-shadow:0 0 0 6px var(--card)}
.mg-list b{display:block;font-size:15.5px;font-family:var(--display)}.mg-list li>span:not(.mg-n){font-size:13.5px;color:var(--muted)}
.mg-foot{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--ok);font-weight:600;font-size:14px;text-align:center}
.light .migr{background:#fff;border-color:var(--lline)}.light .mg-n{box-shadow:0 0 0 6px #fff}.light .mg-list b{color:var(--ltxt)}.light .mg-list li>span:not(.mg-n){color:var(--lmuted)}

/* prose : moins massif */
.prose p{font-size:17px}
.prose h2{font-size:clamp(24px,2.8vw,32px);margin:40px 0 14px}
.prose h3{font-size:20px}
.prose-sec .wrap.narrow{max-width:880px}

@media (max-width:1024px){.pillars{grid-template-columns:repeat(2,1fr)}.twocol.c3{grid-template-columns:1fr}}
@media (max-width:900px){.twocol.c2{grid-template-columns:1fr}.pt-body{grid-template-columns:1fr}.pt-side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}.pt-side img{display:none}}
@media (max-width:640px){.pillars{grid-template-columns:1fr}.ap-actions{grid-template-columns:repeat(2,1fr)}}

/* mock : routage d'appels relevé automatiquement */
.routing{background:linear-gradient(180deg,rgba(22,41,74,.92),rgba(10,22,40,.95));border:1px solid var(--line2);border-radius:var(--r);padding:20px;box-shadow:0 50px 110px -60px rgba(62,195,230,.55)}
.rt-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.rt-head>div{flex:1}.rt-head b{display:block;font-size:15px}.rt-head span:not(.live-badge){font-size:12.5px;color:var(--muted)}
.rt-node{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px}
.rt-node b{display:block;font-size:13.5px}.rt-node span:not(.rt-ic){font-size:12px;color:var(--muted)}
.rt-node.top,.rt-node.menu{border-color:rgba(62,195,230,.45);box-shadow:0 0 16px rgba(62,195,230,.15)}
.rt-ic{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(62,195,230,.1);color:var(--aqua2);flex:0 0 auto}
.rt-line{width:2px;height:12px;margin:0 auto;background:linear-gradient(180deg,var(--aqua),transparent)}
.rt-keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 0 18px;padding-left:12px;border-left:2px solid rgba(62,195,230,.35)}
.rt-key{display:flex;align-items:center;gap:8px}
.rt-k{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#06111f;font-weight:800;font-size:12px;flex:0 0 auto}
.rt-key .rt-node{flex:1;padding:8px 10px}.rt-key .rt-ic{display:none}
.rt-closed{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;border-radius:var(--r2);border:1px dashed var(--line2);font-size:12.5px;color:var(--silver)}
.rt-closed .ic{color:var(--aqua2)}
@media (max-width:640px){.rt-keys{grid-template-columns:1fr}}

/* hero centré, texte d'abord (accueil) */
.hero.center .hero-grid.solo{max-width:980px;text-align:center}
.hero.center .hero-h1{max-width:22ch;margin-left:auto;margin-right:auto;font-size:clamp(36px,5vw,66px)}
.hero.center .lead{margin-left:auto;margin-right:auto;max-width:62ch}
.hero.center .cta{justify-content:center}
.hero.center .badge{margin:0 auto}
.hero.center::before{background:radial-gradient(50% 60% at 50% 0%,rgba(62,195,230,.22),transparent 70%)}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px;grid-column:1/-1}
.chip{display:flex;align-items:center;gap:14px;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.chip .tile{width:40px;height:40px;border-radius:12px}
.chip b{display:block;font-family:var(--display);font-size:15.5px;line-height:1.15}
.chip span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
@media (max-width:1024px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.proof{grid-template-columns:1fr;margin-top:36px}}