/* Global styles — typography, backgrounds, helpers */


html{ scroll-behavior:smooth; }

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(100,210,255,0.20), transparent 60%),
              radial-gradient(900px 600px at 85% 20%, rgba(167,139,250,0.14), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* 
  Subtle noise overlay (cheap, GPU-friendly):
  - Looks premium
  - Doesn't block clicks
*/
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity:0.035;
  mix-blend-mode: overlay;
  z-index:0;
}

:root[data-theme="light"] body::before{
  opacity:0.02;
  mix-blend-mode: multiply;
}


main, header, footer{ position:relative; z-index:1; }

h1, h2, h3{ line-height:1.08; margin:0; }

h1{ font-size: var(--step-4); letter-spacing:-0.02em; }
h2{ font-size: var(--step-3); letter-spacing:-0.02em; }
h3{ font-size: var(--step-2); letter-spacing:-0.01em; }

p{ margin:0; color: var(--muted); }

small, .muted{ color: var(--muted-2); }

.mini{
  font-size: 0.88rem;
  color: var(--muted-2);
}

code{
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.15em 0.4em;
  border:1px solid var(--border);
  background: var(--surface-2);
  border-radius: 10px;
}

.container{
  width: min(var(--container), calc(100% - 2*var(--space-7)));
  margin-inline:auto;
}

.section{
  padding: clamp(52px, 6vw, 92px) 0;
}

.section--tight{
  padding: clamp(38px, 4.5vw, 64px) 0;
}

.hr{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border:0;
  margin:0;
}

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

.skipLink{
  position:absolute;
  left: var(--space-5);
  top: var(--space-5);
  transform: translateY(-140%);
  padding: 10px 14px;
  background: var(--bg-2);
  border:1px solid var(--border);
  border-radius: 14px;
  z-index:999;
}
.skipLink:focus{ transform: translateY(0); }

/* Reveal animations (intersection observer) */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-inview{ opacity:1; transform:none; }

/* Better tap targets */
@media (pointer: coarse){
  button, a{ min-height: 44px; }
}

@media (max-width: 600px){
  .container{ width: calc(100% - 2*var(--space-5)); }
}


/* ================================
   A11Y / UX helpers
   ================================ */
html.noScroll, body.noScroll{ overflow:hidden; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skipLink{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 9999;
  transform: translateY(-140%);
  transition: transform var(--dur-2) var(--ease);
}
.skipLink:focus{ transform: translateY(0); }

.swUpdateToast{
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 9998;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Offset pour ancres sous header sticky */
[id]{ scroll-margin-top: calc(var(--header-total-h) + 10px); }

/* Anti scroll latéral fantôme + mots longs */
body{ overflow-x: clip; }
p, a, h1, h2, h3, h4, h5, h6{ overflow-wrap:anywhere; }
img{ max-width:100%; height:auto; }