﻿:root{
  --ink:#050f2e; --night:#081a4a; --navy:#0a1f5c; --blue:#0b4fc4; --sky:#1a8cff; --cyan:#12c8f5;
  --paper:#ffffff; --pale:#eef3fc; --line:#d6e0f2; --text:#0d1b3d; --muted:#4a5c82;
  --on-dark:#e8efff; --on-dark-muted:#9fb4e0; --line-dark:rgba(150,180,255,.22);
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--sky) var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font:17px/1.65 var(--body);accent-color:var(--sky);-webkit-font-smoothing:antialiased}
::selection{background:var(--cyan);color:var(--ink)}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:8px;border:3px solid var(--ink)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(5,15,46,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark)}
.site-header .bar{height:76px}
.logo img{height:46px;width:auto;display:block}
nav{display:flex;align-items:center;gap:28px}
nav a{text-decoration:none;color:var(--on-dark-muted);font-weight:500;font-size:.95rem;transition:color .2s}
nav a:hover{color:#fff}
nav a.tel-link{color:#fff;font-weight:700;white-space:nowrap}
nav a.cta-sm{color:var(--ink);background:var(--cyan);padding:11px 20px;border-radius:999px;font-weight:700}
nav a.cta-sm:hover{background:#fff;color:var(--ink)}
.menu-btn{display:none;background:transparent;border:1px solid var(--line-dark);color:#fff;padding:9px 16px;border-radius:10px;font:inherit;font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;color:var(--on-dark);background:
  radial-gradient(900px 600px at 80% 30%,rgba(26,140,255,.28),transparent 65%),
  radial-gradient(700px 500px at 0% 100%,rgba(18,200,245,.12),transparent 60%),
  linear-gradient(180deg,var(--ink),var(--night))}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center;padding-top:72px;padding-bottom:40px;min-height:calc(100vh - 76px - 64px)}
h1{font-size:clamp(2.5rem,5.6vw,5rem);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:#fff}
.lead{font-size:1.15rem;color:var(--on-dark-muted);max-width:56ch;margin:24px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;font:700 1rem var(--body);cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--cyan);color:var(--ink)}
.btn.primary:hover{background:#fff}
.btn.ghost{border-color:var(--line-dark);color:#fff}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

.orbit{margin:0}
.orbit svg{width:100%;height:auto;display:block;overflow:visible}
.ring{fill:none;stroke:var(--cyan)}
.ring.solid{stroke-width:1.6;opacity:.75}
.ring.flow{stroke-width:5;stroke:var(--sky);opacity:.55;stroke-dasharray:60 1200;filter:blur(2px);animation:flow 9s linear infinite}
.ring.faint{stroke:var(--sky);opacity:.28;stroke-width:1}
.ring.dash{stroke-dasharray:3 9}
.node circle:first-child{fill:var(--cyan)}
.node .halo{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s var(--ease) infinite}
.node.n2 .halo{animation-delay:-1.1s}.node.n3 .halo{animation-delay:-2.1s}
.node text{fill:#fff;font:700 17px var(--display)}
.node text.sub{fill:var(--on-dark-muted);font:500 14px var(--body)}
@keyframes flow{to{stroke-dashoffset:-1260}}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}

.stack{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 auto;padding:22px 20px 26px;border-top:1px solid var(--line-dark);color:var(--on-dark-muted);font:600 .85rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.stack li{display:flex;align-items:center;gap:28px}
.stack li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--sky)}

/* sections */
.section{padding:120px 0}
.section.light{background:var(--paper)}
.section.pale{background:var(--pale)}
.section.dark{background:linear-gradient(180deg,var(--night),var(--ink));color:var(--on-dark)}
h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.1;letter-spacing:-.03em;font-weight:700;color:var(--navy);max-width:20ch}
.dark h2{color:#fff}
.sec-head .lead{color:var(--muted)}
.dark .sec-head .lead{color:var(--on-dark-muted)}
.sec-head{margin-bottom:64px}
h3{font-size:1.25rem;letter-spacing:-.015em;font-weight:700;color:var(--navy)}
.dark h3{color:#fff}

/* produits */
.product{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:52px 0;border-top:1px solid var(--line);align-items:start;transition:background .3s}
.product:last-of-type{border-bottom:1px solid var(--line)}
.product h3{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:var(--navy)}
.product:hover h3{color:var(--blue)}
.what{margin:0 0 24px;font-size:1.2rem;color:var(--text)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;font-weight:500}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:8px;border-left:3px solid var(--sky);border-bottom:3px solid var(--sky);transform:rotate(-45deg)}
.dark .ticks li::before{border-color:var(--cyan)}
.after{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin:48px 0 0}
.after span{color:var(--muted)}
.light .btn.primary{background:var(--navy);color:#fff}
.light .btn.primary:hover{background:var(--blue);color:#fff}

/* services */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.sticky{position:sticky;top:120px;margin:0}
.rules{list-style:none;margin:0;padding:0}
.rules li{padding:30px 0;border-top:1px solid var(--line)}
.rules li:last-child{border-bottom:1px solid var(--line)}
.rules p{margin:8px 0 0;color:var(--muted);max-width:60ch}

/* équipes */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-dark);border-radius:24px;overflow:hidden;background:rgba(10,31,92,.35)}
.teams article{padding:48px}
.teams article+article{border-left:1px solid var(--line-dark)}
.teams h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em;font-weight:800}
.teams p{color:var(--on-dark-muted);margin:6px 0 28px}
.levels{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.levels::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--sky),transparent)}
.levels li{position:relative;padding-top:34px;padding-right:24px}
.levels li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(18,200,245,.18)}
.levels strong{display:block;font:700 1.15rem var(--display);color:#fff}
.levels span{color:var(--on-dark-muted)}
.after-dark{margin:56px 0 0;color:var(--on-dark-muted)}
.after-dark a{color:var(--cyan);font-weight:700}

/* méthode */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.path::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--line)}
.path li{position:relative;padding:44px 28px 0 0}
.path li::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--paper);border:6px solid var(--blue)}
.path li:last-child::before{background:var(--cyan);border-color:var(--navy)}
.path p{margin:8px 0 0;color:var(--muted)}

/* contact */
.contact{background:radial-gradient(800px 500px at 15% 0%,rgba(26,140,255,.25),transparent 60%),var(--ink)}
.contact .split{align-items:center}
.big-link{margin:40px 0 0}
.big-link a{display:block;font:800 clamp(1.3rem,2.6vw,2.2rem)/1.15 var(--display);letter-spacing:-.025em;text-decoration:none;color:#fff;overflow-wrap:anywhere}
.big-link a:hover{color:var(--cyan)}
.big-link span{color:var(--on-dark-muted);font-size:.9rem}
form{display:grid;gap:18px;padding:36px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark)}
label{display:grid;gap:8px;font-weight:600;font-size:.9rem;color:var(--on-dark)}
input,textarea{font:inherit;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line-dark);background:rgba(5,15,46,.7);color:#fff;caret-color:var(--cyan)}
input:focus,textarea:focus{border-color:var(--cyan);outline:none}
form .btn{justify-self:start}

/* footer */
.site-footer{background:#030a20;color:var(--on-dark-muted);padding:32px 0;font-size:.9rem}
.site-footer .bar{flex-wrap:wrap}
.foot-logo{height:34px;opacity:.9}
.site-footer a{color:#fff}

/* pages internes (mentions légales) */
main > .section .narrow{max-width:700px}
.narrow h1{color:var(--navy);font-size:clamp(2rem,4vw,3rem)}
.narrow h2{font-size:1.4rem;margin:36px 0 8px}
.narrow .lead{color:var(--muted)}
.narrow a{color:var(--blue);font-weight:600}

@media (max-width:1000px){
  nav a.tel-link{display:none}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:48px}
  .orbit{max-width:560px;margin:0 auto}
  .split{grid-template-columns:1fr;gap:40px}
  .sticky{position:static}
  .product{grid-template-columns:1fr;gap:20px}
  .teams{grid-template-columns:1fr}
  .teams article+article{border-left:0;border-top:1px solid var(--line-dark)}
  .path{grid-template-columns:1fr 1fr;row-gap:40px}
  .section{padding:84px 0}
}
@media (max-width:720px){
  body{font-size:16px}
  .menu-btn{display:block}
  nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--line-dark);padding:8px 20px 20px}
  nav.open{display:flex}
  nav a{padding:14px 0}
  nav a.tel-link{display:block}
  nav a.cta-sm{text-align:center;margin-top:8px}
  .logo img{height:38px}
  .section{padding:64px 0}
  .sec-head{margin-bottom:40px}
  .teams article{padding:30px 24px}
  .levels{grid-template-columns:1fr;gap:28px}
  .levels::before{display:none}
  .path{grid-template-columns:1fr}
  .path::before{display:none}
  form{padding:24px}
  .stack{gap:8px 18px}
  .stack li{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring.flow,.node .halo{animation:none}
  .btn{transition:none}
}


.big-link a.mail{font-size:clamp(1rem,1.7vw,1.45rem);overflow-wrap:normal;word-break:keep-all}
@media (max-width:420px){.big-link a.mail{font-size:.98rem}}

/* ALTOS Network */
.network{background:radial-gradient(900px 600px at 90% 40%,rgba(26,140,255,.22),transparent 60%),linear-gradient(180deg,var(--ink),var(--night))}
.split.net{grid-template-columns:.9fr 1.1fr;align-items:center}
.net-copy .lead{margin-bottom:28px}
.vendors{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0}
.vendors li{padding:8px 18px;border:1px solid var(--line-dark);border-radius:999px;font:700 .95rem var(--display);color:#fff;background:rgba(26,140,255,.12)}
.network .ticks{margin-bottom:8px}
.network .after-dark{margin-top:36px}
.diagram{margin:0}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}
.diagram .links path{fill:none;stroke:var(--sky);stroke-width:2;stroke-dasharray:6 8;opacity:.8;animation:netflow 1.6s linear infinite}
.diagram .dev rect,.diagram .dev path,.diagram .dev circle:not(.st){fill:none;stroke:var(--cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.diagram .dev rect{fill:#0d2a6e}
.diagram .dev>path:first-of-type{fill:#0d2a6e}
.diagram .st{fill:#2ee6a6;stroke:var(--ink);stroke-width:2}
.diagram .st.warn{fill:#ffc24a}
.dg-t{fill:#fff;font:700 15px var(--display)}
.dg-s{fill:var(--on-dark-muted);font:500 13px var(--body)}
.diagram figcaption{margin-top:14px;color:var(--on-dark-muted);font-size:.85rem;text-align:center}
@keyframes netflow{to{stroke-dashoffset:-28}}
.node.n4 .halo{animation-delay:-.4s}
@media (max-width:1000px){.split.net{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.diagram .links path{animation:none}}

@media (max-width:720px){.dg-t{font-size:22px}.dg-s{font-size:18px}}

/* présentations et normes */
.doc{display:flex;flex-wrap:wrap;gap:10px 24px;margin:22px 0 0}
.doc a{font-weight:700;color:var(--blue);text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:2px}
.doc a:hover{color:var(--navy)}
.doc a[download]::before{content:"↓ "}
.light .btn.outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.light .btn.outline:hover{background:var(--navy);color:#fff}
.norms{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.norms article{padding:32px 36px 32px 0;border-bottom:1px solid var(--line)}
.norms article:nth-child(even){padding-left:36px;padding-right:0;border-left:1px solid var(--line)}
.norms p{margin:8px 0 0;color:var(--muted)}
.legal{margin:32px 0 0;max-width:80ch;color:var(--muted);font-size:.92rem}
.site-footer .bar{gap:12px 28px}
@media (max-width:720px){.norms{grid-template-columns:1fr}.norms article,.norms article:nth-child(even){padding:26px 0;border-left:0}}

/* sélecteur de langue */
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:7px 14px;border:1px solid var(--line-dark);border-radius:999px;font:700 .85rem var(--display);letter-spacing:.06em;color:#fff;text-decoration:none;transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--cyan);color:var(--cyan)}
nav a.lang{color:#fff;font-size:.85rem}
@media (max-width:720px){nav a.lang{align-self:flex-start;margin-top:8px}}
