/* ==========================================================
   PaaS vitrine v2 — Base
   Reset moderne + typographie + layout primitives
   ========================================================== */

/* ---------- Reset minimal moderne ---------- */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  background:var(--c-bg);
  color:var(--c-text-body);
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1,'ss01' 1;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Backgrounds globaux (stack ambiant) ---------- */
.bg-stack{
  position:fixed;inset:0;z-index:var(--z-bg);
  pointer-events:none;overflow:hidden;
}
.bg-stack .grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(129,140,248,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(129,140,248,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 55% 30%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 85%);
          mask-image:radial-gradient(ellipse 70% 60% at 55% 30%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 85%);
}
.bg-stack .aurora{
  position:absolute;inset:-14%;
  background:
    radial-gradient(42% 50% at 18% 24%, rgba(91,141,239,0.20), transparent 66%),
    radial-gradient(40% 46% at 82% 20%, rgba(124,108,246,0.18), transparent 66%),
    radial-gradient(48% 52% at 62% 78%, rgba(110,231,255,0.10), transparent 68%);
  filter:blur(26px) saturate(1.15);
}
.bg-stack .vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.bg-stack .noise{
  position:absolute;inset:0;opacity:0.04;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}

/* ---------- Typographie ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-display);
  font-weight:700;
  color:var(--c-text);
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
}
h1{font-size:clamp(40px, 6vw, var(--fs-7xl));letter-spacing:-0.034em}
h2{font-size:clamp(30px, 4.2vw, var(--fs-5xl));letter-spacing:-0.028em;line-height:1.1}
h3{font-size:clamp(22px, 2.4vw, var(--fs-3xl));letter-spacing:-0.022em;line-height:1.15}
h4{font-size:clamp(18px, 1.6vw, var(--fs-xl));letter-spacing:-0.018em;line-height:1.25}
h5{font-size:var(--fs-md);letter-spacing:-0.012em}
h6{font-size:var(--fs-base);font-weight:600;letter-spacing:0}

p{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--c-text-body)}
p.lead{font-size:clamp(18px,1.6vw,var(--fs-lg));line-height:1.55;color:var(--c-text-body)}
p strong{color:var(--c-text);font-weight:600}

a{
  color:var(--c-text);
  text-decoration:none;
  transition:color var(--t-fast);
}
a:hover{color:var(--c-cyan)}
a:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

ul,ol{list-style:none}

code,kbd,pre,samp{
  font-family:var(--ff-mono);
  font-size:0.92em;
}

img,svg,video{display:block;max-width:100%;height:auto}

button{
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:inherit;color:inherit;
}

input,textarea,select{
  font-family:inherit;font-size:inherit;color:inherit;
  background:transparent;border:0;outline:0;
}

::selection{background:rgba(110,231,255,0.32);color:var(--c-text)}

/* ---------- Helpers utilitaires ---------- */
.container{
  width:100%;
  max-width:var(--max-content);
  margin:0 auto;
  padding-left:clamp(20px, 4vw, 40px);
  padding-right:clamp(20px, 4vw, 40px);
}
.section{
  position:relative;
  padding:clamp(56px, 6vw, 96px) 0;
}
.section-tight{
  padding:clamp(40px, 4.5vw, 72px) 0;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-cyan);
  padding:6px 12px;border-radius:var(--r-full);
  border:1px solid rgba(129,140,248,.30);
  background:rgba(129,140,248,.07);
  margin-bottom:24px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 10px rgba(110,231,255,.8);
}

.gradient-text{
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 24px rgba(110,231,255,0.16))
         drop-shadow(0 0 40px rgba(129,140,248,0.18));
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Focus visible global */
:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* Scrollbar custom (Chromium / Firefox) */
*{scrollbar-width:thin;scrollbar-color:rgba(129,140,248,0.25) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(129,140,248,0.18);border-radius:var(--r-full)}
*::-webkit-scrollbar-thumb:hover{background:rgba(129,140,248,0.32)}