/* ============================================================
   BASE — reset, fond de page, utilitaires partagés
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
html,body{ min-height:100% }

body{
  font-family:var(--font-sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 90% at 20% 0%, #eef0f2 0%, transparent 60%),
    linear-gradient(160deg, #e4e6e9 0%, #d5d9dd 55%, #c9ced3 100%);
  background-attachment:fixed;
  display:grid;
  justify-items:center;
  gap:22px;
  padding:46px 26px;
}

img{ max-width:100% }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:4px;
  border-radius:8px;
}

/* Coquille commune aux panneaux flottants (hero + section régies) */
.panel-shell{
  position:relative;
  width:min(var(--page-max), 100%);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
  isolation:isolate;
}

/* Grain papier — appliqué en overlay sur les panneaux clairs */
.grain::after{
  content:"";
  position:absolute; inset:0;
  z-index:6;
  pointer-events:none;
  opacity:var(--grain-opacity, .16);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.16'/></svg>");
}

/* ---- apparition au scroll (piloté par scripts/reveal.js) ---- */
.reveal{ opacity:0; transform:translateY(22px) }
.reveal.in{
  opacity:1;
  transform:none;
  transition:
    opacity   .8s ease         var(--rv, 0s),
    transform .8s var(--ease-out) var(--rv, 0s);
}

/* ---- apparition au chargement, sans scroll (hero) ---- */
.rise{ opacity:0; transform:translateY(14px) }
.loaded .rise{
  opacity:1;
  transform:none;
  transition:
    opacity   .7s ease         var(--rd, 0s),
    transform .7s var(--ease-out) var(--rd, 0s);
}

@media (max-width:640px){
  body{ padding:14px 12px; gap:14px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition-duration:.01ms !important }
}