/* ALVENTIS Automotive — système visuel sobre : noir, blanc, gris, un accent froid en micro-dose.
   La technologie se lit dans la précision : filets, repères, typographie fine, nuage de points 3D. */
:root{
  --void:#000; --ink:#f5f5f7; --mist:#a1a1a6; --ash:#86868b; --dim:#48484a;
  --line:rgba(255,255,255,.14); --accent:#8fb8ff;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:10px; --pill:980px; --max:1280px; --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-display:clamp(48px,7.6vw,104px); --t-hlg:clamp(40px,5.6vw,72px); --t-h:clamp(32px,3.6vw,46px);
  --t-hsm:clamp(28px,3.1vw,40px); --t-sub:clamp(22px,2.5vw,32px); --t-hxs:24px; --t-h2xs:21px;
  --gap:clamp(64px,9.4vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#000}
body{margin:0;background:#000;color:var(--ink);font-family:var(--font);font-size:17px;font-weight:300;line-height:1.55;letter-spacing:-.005em;font-feature-settings:"ss01" on,"cv11" on;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
strong{font-weight:400;color:#fff}
::selection{background:#fff;color:#000}
:focus-visible{outline:1px solid #fff;outline-offset:4px;border-radius:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:var(--pill);background:#fff;color:#000;font-size:14px;font-weight:500}
.skip:focus{top:16px}

/* Fond : nuage de points WebGL */
.sky{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.page{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Typographie : hiérarchie par l'échelle, graisses légères, interlettrage serré */
.display{font-size:var(--t-display);line-height:1;letter-spacing:-.035em}
.h-lg{font-size:var(--t-hlg);line-height:1.04;letter-spacing:-.035em}
.h{font-size:var(--t-h);line-height:1.1;letter-spacing:-.03em}
.h-sm{font-size:var(--t-hsm);line-height:1.18;letter-spacing:-.03em}
.sub{font-size:var(--t-sub);font-weight:300;line-height:1.25;letter-spacing:-.02em}
.h-xs{font-size:var(--t-hxs);line-height:1.15;letter-spacing:-.02em}
/* Repères techniques : petites capitales en chasse fixe, précédées d'un filet */
.label{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.label::before{content:"";flex:none;width:24px;height:1px;background:var(--accent)}
.center .label,.manifesto .label{justify-content:center}
.label--iris{display:block;font-size:10.5px;color:var(--ash)}
.label--iris::before{content:none}
.label a{color:var(--ink)}
.cap{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.06em;color:var(--ash)}
.muted{color:var(--mist)}
.prose p+p{margin-top:1.05em}
.prose a{color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.prose a:hover{background-size:0 1px;background-position:100% 100%}
.amber{color:var(--ink)}

/* Boutons : pilule blanche pour l'action principale, lien fin pour le reste */
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:1px solid #f5f5f7;border-radius:var(--pill);background:#f5f5f7;color:#000;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),transform .5s var(--ease)}
.pill:hover{background:transparent;color:#fff}
.pill:active{transform:scale(.97)}
.pill svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.pill:hover svg{transform:translateX(3px)}
.ghost{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;line-height:1.3;color:var(--mist);transition:color .3s}
.ghost::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ghost:hover,.ghost[aria-current]{color:#fff}
.ghost:hover::after{transform:scaleX(1);transform-origin:left}
.ghost svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.ghost:hover svg{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}

/* Navigation : transparente en haut, capsule noire discrète ensuite */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:14px var(--pad);transition:transform .6s var(--ease)}
.nav--hidden{transform:translateY(-120%)}
.nav__in{display:flex;align-items:center;gap:28px;max-width:calc(var(--max) - 2 * var(--pad) + 32px);margin-inline:auto;padding:6px 6px 6px 16px;border:1px solid transparent;border-radius:var(--pill);transition:background .4s,border-color .4s}
.nav--stuck .nav__in{background:rgba(0,0,0,.72);border-color:var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.nav__logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav__logo svg{width:26px;height:auto;color:#fff}
.nav__logo img{height:12px;width:auto;mix-blend-mode:screen}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav__links .ghost{font-size:13px}
.nav .pill{padding:8px 16px;font-size:13px}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger i{position:absolute;width:20px;height:1px;background:#fff;transition:transform .5s var(--ease)}
.nav__burger i:first-child{transform:translateY(-4px)}
.nav__burger i:last-child{transform:translateY(4px)}
.menu-open .nav__burger i:first-child{transform:rotate(45deg)}
.menu-open .nav__burger i:last-child{transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:96px var(--pad) 48px;background:#000;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s}
.menu-open .menu{visibility:visible;opacity:1;transition:opacity .5s var(--ease),visibility 0s}
.menu a{font-size:clamp(28px,7.4vw,44px);font-weight:300;line-height:1.25;letter-spacing:-.03em;color:var(--ash);transform:translateY(20px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
.menu a[aria-current],.menu a:hover{color:#fff}
.menu-open .menu a{transform:none;opacity:1;transition-delay:calc(.08s + var(--i,0) * .05s)}

/* Sections : deux colonnes aérées, en alternance */
.section{position:relative;padding-block:var(--gap)}
.hero{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding-top:120px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:center}
.split--top{align-items:start}
.split>.col--right{grid-column:2}
.col>*+*{margin-top:24px}
.col>.label+*{margin-top:16px}
.col .lede{max-width:31em;color:var(--mist)}
.center{max-width:900px;margin-inline:auto;text-align:center}
.center .actions{justify-content:center}

/* Voile : zone doucement floutée derrière le texte, pour rester lisible au-dessus des points */
.veil{position:relative;isolation:isolate}
.veil::before{content:"";position:absolute;inset:-30px -60px;z-index:-1;background:rgba(0,0,0,.36);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent),linear-gradient(transparent,#000 30px,#000 calc(100% - 30px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent),linear-gradient(transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-composite:intersect}

/* Révélations : amples mais discrètes */
.js [data-rise]{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}
.js [data-rise].is-in{opacity:1;transform:none}
.line{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .05em .16em;margin:-.08em -.05em -.16em}
.line>span{display:inline-block}
.js .line>span{transform:translate3d(0,112%,0);transition:transform 1.3s var(--ease) var(--d,0s)}
.js .is-in .line>span{transform:none}
.js [data-depth]{opacity:0;transform:perspective(1400px) translate3d(0,36px,-90px) rotateX(8deg);transform-origin:50% 100%;transition:opacity 1.2s var(--ease) var(--d,0s),transform 1.5s var(--ease) var(--d,0s)}
.js [data-depth].is-in{opacity:1;transform:perspective(1400px) translate3d(0,0,0) rotateX(0)}
.js [data-words] .w{opacity:.24;transition:opacity .7s var(--ease)}
.js [data-words] .w.on{opacity:1}

/* Transition entre pages */
.curtain{position:fixed;inset:0;z-index:90;background:#000;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.is-leaving .curtain{opacity:1}

@media (max-width:1040px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex;position:relative}
}
@media (max-width:860px){
  body{font-size:16px}
  .split{grid-template-columns:1fr}
  .split>.col--right{grid-column:1}
  .hero{align-items:flex-end;padding-bottom:60px}
  .nav .pill{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}