/* AP7SERVICES · ELECTRIC EDITION 2026
   Palette bleu nuit / bleu électrique / cyan, effets GPU légers.
   Couche additive : la structure HTML et les prestations restent intactes. */
:root {
  --bg:#f4f8ff;
  --surface:#ffffff;
  --text:#111f3c;
  --muted:#536482;
  --primary:#315bff;
  --primary2:#00cfff;
  --line:#dbe5f7;
  --radius:21px;
  --shadow:0 18px 46px rgba(17,39,108,.09);
  --electric-navy:#07112c;
  --electric-deep:#091a3b;
  --electric-blue:#5269ff;
  --electric-cyan:#4ceeff;
  --electric-violet:#9b6eff;
}
html{scroll-padding-top:95px}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:#77ecff;color:#07112c}
header,header.is-scrolled{
  background:rgba(7,17,44,.95)!important;
  border-color:rgba(142,181,255,.17)!important;
  box-shadow:0 10px 35px rgba(4,13,42,.15);
  backdrop-filter:blur(20px) saturate(125%);
}
header .brand,header .brand span:not(.brand-mark),header .brand-text{color:#f7faff}
header .brand-text small{color:#9ab5e5}
header .brand-mark{background:linear-gradient(135deg,#2d48ff,#00cfff)!important;box-shadow:0 0 0 1px #a0f3ff6b,0 0 23px #3e5dff85;transition:transform .3s,box-shadow .3s}
header .brand:hover .brand-mark{transform:rotate(-7deg) scale(1.06);box-shadow:0 0 30px #3a9cffb3}
header .navlinks a{color:#d8e5ff}
header .navlinks a:hover,header .navlinks a[aria-current="page"]{color:#75edff}
header .navlinks a:after{background:linear-gradient(90deg,#4b65ff,#54eaff)}
header .menu-btn{background:#152550;border-color:#354d83;color:#b8f4ff}
header .btn-primary{border:1px solid rgba(179,245,255,.45)}
.reading-line{height:3px;background:linear-gradient(90deg,#9d6bff,#526bff 35%,#00dcff 85%,#b9ffff);box-shadow:0 0 13px #03cfff}
.btn-primary,.btn.primary,.cta .btn-primary{background:linear-gradient(110deg,#405bff,#2158e9 45%,#08bce9);color:#fff;box-shadow:0 10px 30px #2352e34a;border:1px solid #7dc5ff55}
.btn-primary:hover,.btn.primary:hover{box-shadow:0 0 0 1px #72eaff8a,0 16px 38px #1f70fa66;filter:saturate(1.1)}
.btn-outline{border-color:#bbcbeb;background:#fff;color:#263966}
.btn-outline:hover{border-color:#6c9df5;background:#eef8ff}
.eyebrow{color:#2851d1;background:#e7edff;border:1px solid #cfddff}
.text-gradient{background-image:linear-gradient(108deg,#4d65ff 4%,#088ce9 60%,#03d4f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.card,.web-feature,.web-step,.contact-panel,.work-card,.zonebox,.faq details,.kpi>div,.trust{
  border-color:#dce7f7;
  box-shadow:0 9px 32px rgba(20,46,119,.055);
}
.card .icon,.web-feature-icon{background:linear-gradient(125deg,#e8efff,#dcefff);color:#3258ea}
.card:hover,.web-feature:hover,.work-card:hover{border-color:#86b9ff;box-shadow:0 25px 55px #1a50c32d}
.card:before{background:linear-gradient(90deg,#915fff,#4565ff,#45f1ff)}
.card:hover .icon{background:linear-gradient(110deg,#2b4dff,#00bde6);color:white}
.card a.more{color:#2247e9}
.band{background:linear-gradient(135deg,#091734,#102b5c);position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 12%,#1ad9ff2c,transparent 38%);pointer-events:none}
.band>.container{position:relative}
.cta{background:radial-gradient(circle at 90% 10%,rgba(28,219,248,.22),transparent 36%),linear-gradient(115deg,#101b50,#2348ca 60%,#145fba);box-shadow:0 22px 52px #1538842f;border:1px solid #4c89ff75}
.cta p{color:#dbecff}
.cta .btn-primary[style]{background:#fff!important;color:#163fd5!important;border:0;box-shadow:0 8px 32px #0002}
footer{background:linear-gradient(160deg,#060e26,#0c1c3e);border-top:1px solid #2f4775;color:#c5d9f7}
footer a{color:#c5d9f7}footer a:hover{color:#71edff}
footer .footer-title{color:white}
.faq details[open]{border-color:#68a1ff}
.faq summary::marker{color:#4b6cff}
/* Hero, electric backdrop: panel on the right remains legible. */
.hero-home{
  color:#f5f9ff;
  background:
    radial-gradient(ellipse at 82% 23%,rgba(38,107,255,.38),transparent 42%),
    radial-gradient(ellipse at 23% 96%,rgba(88,32,207,.25),transparent 46%),
    linear-gradient(130deg,#07112c,#0a1c46 52%,#05112a 100%);
  isolation:isolate;
}
.hero-home:before{background-image:linear-gradient(#6fa6ff11 1px,transparent 1px),linear-gradient(90deg,#6fa6ff11 1px,transparent 1px);background-size:52px 52px;opacity:.85;mask-image:linear-gradient(#000 30%,transparent 95%)}
.hero-home:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 74% 36%,transparent 20%,#59dcff16 20.1%,transparent 20.5%,transparent 30%,#549aff0b 30.1%,transparent 30.5%);opacity:.7;z-index:-1}
.hero-ambient-one{background:#2668ff70;width:440px;height:430px;filter:blur(110px)}
.hero-ambient-two{background:#7724d54f;filter:blur(120px)}
.hero-home .eyebrow,.web-hero .eyebrow,.hero:not(.hero-home) .eyebrow{color:#a7faff;background:#102b60;border-color:#345d9d;box-shadow:inset 0 0 18px #0e54dc42}
.status-dot{background:#52edff;box-shadow:0 0 0 4px #38ceff25,0 0 13px #2be7ff}
.hero-home h1,.web-hero h1,.hero:not(.hero-home) h1{color:#fff}
.hero-home .text-gradient,.web-hero .text-gradient,.hero:not(.hero-home) .text-gradient{
  background-image:linear-gradient(95deg,#7f8eff 0%,#44b8ff 50%,#73f7ff 97%);
  filter:drop-shadow(0 2px 15px #3561ff60)
}
.hero-home .lead,.web-hero .lead,.hero:not(.hero-home) .lead{color:#c4d8f6}
.hero-home .hero-micro,.web-hero .hero-micro{color:#b0c8ee}
.hero-home .hero-micro span:before,.web-hero .hero-micro span:before{color:#75f1ff}
.hero-home .btn-outline,.web-hero .btn-outline{color:#eaf3ff;background:#112453;border-color:#506da1}
.hero-home .btn-outline:hover,.web-hero .btn-outline:hover{background:#213b75;border-color:#70e8ff}
.hero-home .trust{position:relative;background:#0c244dd4;border:1px solid #4573b782;color:#ecf6ff;overflow:hidden;box-shadow:0 12px 26px #0002}
.hero-home .trust:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#4855ff,#50edff);opacity:.8}
.hero-home .trust span{color:#b4c9e8}
.hero-home .trust:hover{background:#153369;border-color:#6fd6ff;transform:translateY(-4px)}
.hero-home .trust{transition:transform .3s,background .3s,border-color .3s}
.hero-visual{border-color:#4784dc99;background:radial-gradient(circle at 52% 43%,#142e77,#07122f 73%);box-shadow:0 35px 90px #0008,0 0 0 1px #60afff2e,inset 0 0 70px #1236ad22}
.hero-visual:after{content:"";position:absolute;inset:-150% -30%;pointer-events:none;background:linear-gradient(95deg,transparent 46%,#8deaff10 50%,transparent 54%);transform:rotate(30deg);animation:ap7-scan 12s linear infinite}
@keyframes ap7-scan{0%{translate:-75% 0}100%{translate:80% 0}}
.network-core{background:linear-gradient(130deg,#3359ff,#055cf1 48%,#00a6d4);border-color:#8befff;box-shadow:0 0 0 12px #2582ff1b,0 0 65px #0ce2ff60}
.network-core>span>span{color:#aefaff}
.node-symbol{border-color:#5ba7ef9e;background:linear-gradient(145deg,#1a3b79,#0b2550);box-shadow:0 0 21px #167bf738}
.dash-head,.dash-foot,.dash-network{z-index:2}
.network-lines path{stroke:#6beeff;stroke-opacity:.5;stroke-dasharray:6 9;animation:ap7-flow 14s linear infinite}
@keyframes ap7-flow{to{stroke-dashoffset:-240}}
.dash-wave i{background:#5de9ff;box-shadow:0 0 8px #39cfff}
.hero:not(.hero-home){color:white;background:radial-gradient(circle at 80% 20%,#265bef5c,transparent 40%),linear-gradient(120deg,#07112c,#11275a);}
.hero:not(.hero-home) .breadcrumb,.hero:not(.hero-home) .breadcrumb a{color:#bfdaff}
.hero:not(.hero-home) .trust{color:var(--text)}
/* Creation-web hero + portfolio. */
.web-hero{color:white;background:radial-gradient(circle at 88% 22%,#245efb5c,transparent 45%),radial-gradient(circle at 10% 84%,#302fa44a,transparent 40%),linear-gradient(135deg,#07112c,#101f52)}
.web-hero .breadcrumb,.web-hero .breadcrumb a{color:#bbd4fb}
.web-hero-art:before{content:"";position:absolute;width:68%;aspect-ratio:1;border:1px solid #84dfff27;border-radius:50%;box-shadow:0 0 0 38px #1a94ff08,0 0 0 95px #7a50ff0a;animation:ap7-halo 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes ap7-halo{to{transform:rotate(7deg) scale(1.06)}}
.art-window{border-color:#4a7fc0;background:#142b59;box-shadow:0 28px 65px #0007,0 0 32px #237efa31}
.art-top span,.art-bottom{color:#b2dcff}
.art-main{background:linear-gradient(115deg,#122454,#2049eb 65%,#08bbe8)}
.art-pill{color:#183cae}
.art-float{background:#132957;border-color:#4775ad;color:#a7f2ff;box-shadow:0 15px 35px #0004}
.web-services{background:linear-gradient(#f7faff,#fff)}
.web-feature{background:linear-gradient(145deg,#fff,#f6faff);border-color:#d7e5f8}
.web-feature-icon{background:linear-gradient(125deg,#485aff,#00bde9)!important;color:#fff;box-shadow:0 8px 26px #246cff45}
.web-steps{background:linear-gradient(180deg,#ebf1ff,#f9fcff)}
.web-step>b{color:#385bff}
.web-examples{background:radial-gradient(circle at 90% 11%,#2855a36b,transparent 40%),linear-gradient(145deg,#07112c,#0a1d3f 70%,#0a1434)}
.web-examples .text-gradient{background-image:linear-gradient(105deg,#9bb0ff,#60efff)}
.preview-tab{background:#0c2350;border-color:#2d528e;color:#eff6ff}
.preview-tab:hover{background:#1a3978;border-color:#60b4fc}
.preview-tab.active{border-color:#75edff;background:linear-gradient(125deg,#2448c4,#16477b);box-shadow:inset 3px 0 0 #72efff,0 0 26px #238afe38}
.preview-stage{background:radial-gradient(circle at 75% 15%,#2b67c67a,transparent 55%),linear-gradient(130deg,#132957,#0c2854);border-color:#4a83c4}
.preview-browser{border-color:#8ab8ef}
.preview-caption a{color:#133cc8}.preview-caption a:hover{background:#c4f6ff}
.work-section{background:linear-gradient(180deg,#eaf2ff 0%,#f7faff 100%)}
.work-photo{background:#cbdfff}
.work-open{background:#dfebff;color:#3651eb}.work-info .work-view{color:#274be8}
.work-card:hover .work-photo img{transform:scale(1.055)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{box-shadow:0 0 0 4px #6fd9ff50}
/* electric marquee inserted on homepage only */
.energy-strip{padding:0;background:linear-gradient(90deg,#1829a7,#1256c5,#0085ba);border-top:1px solid #4c6fff88;border-bottom:1px solid #52eaff70;color:#e8f9ff;overflow:hidden}
.energy-track{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-block:15px;font-size:.75rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.energy-track span{display:inline-flex;align-items:center;gap:12px}.energy-track span:before{content:"";width:6px;height:6px;border-radius:50%;background:#a7fcff;box-shadow:0 0 12px #8afbff}
/* Glow follows the cursor within highlighted components only. No global tracking. */
.electric-spotlight{position:relative}
.electric-spotlight:after{content:"";position:absolute;inset:0;background:radial-gradient(250px circle at var(--mx,50%) var(--my,50%),#46bcff20,transparent 68%);opacity:0;pointer-events:none;transition:opacity .35s}
.electric-spotlight:hover:after{opacity:1}
.electric-spotlight>*{position:relative;z-index:1}
footer{margin-top:0}
@media(max-width:1180px){
 header .navlinks{background:#0a1b3e;border-color:#335888;box-shadow:0 28px 60px #0008}
 header .navlinks a{color:#e4eeff}
 header .navlinks a:hover,header .navlinks a[aria-current="page"]{color:#80f1ff;background:#142f63}
}
@media(max-width:900px){.energy-track{justify-content:flex-start;gap:25px;overflow:auto;scrollbar-width:none}.energy-track::-webkit-scrollbar{display:none}}
@media(max-width:620px){
 .hero-home{padding-top:56px}
 .hero-home h1{font-size:clamp(2.7rem,10vw,3.3rem)}
 .hero-home .trust{padding:16px}
 .hero-home .hero-visual{border-radius:23px;box-shadow:0 22px 55px #0006}
 .web-hero{padding-top:42px}
 .art-window{border-radius:18px}
 .mobile-cta{background:#091b3c;border-color:#3f659c;box-shadow:0 12px 36px #0613309c}
 .mobile-cta .btn-outline{background:#122b56;border-color:#365b91;color:#e9f6ff}
 .energy-track{font-size:.66rem;padding-block:12px}
}
@media(prefers-reduced-motion:reduce){
 .hero-visual:after,.web-hero-art:before,.network-lines path{animation:none!important}
 .electric-spotlight:after{display:none}
}