/*
 * INESIA Academy — Design system éditorial partagé
 * Utilisé par les pages "marque" (accueil hub, L'Academy, Événements).
 * Tokens + composants repris du prototype d'accueil pour une identité cohérente.
 * Palette chaude, mode clair uniquement. Les utilitaires viennent de /dist/output.css (Tailwind).
 */

:root {
  --ivory:#FBF8F4; --cream:#F5EFE6; --linen:#EDE4D4; --sand:#E5D6BF;
  --terracotta:#C4896A; --sienna:#A66B4D; --bronze:#8B5C42; --chocolate:#4A3628;
  --ink:#2C2520; --midnight:#1A1410;
  --halo:radial-gradient(60% 60% at 50% 40%, rgba(196,137,106,.22), transparent 70%);
}

html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
input, select, textarea, button { font-family:inherit; font-feature-settings:inherit; }

.skip-link {
  position:fixed; top:.75rem; left:.75rem; z-index:9999;
  padding:.75rem 1rem; border:2px solid var(--terracotta); border-radius:.65rem;
  background:var(--midnight); color:var(--ivory); font-size:.875rem; font-weight:700;
  transform:translateY(calc(-100% - 1rem)); transition:transform .15s ease;
}
.skip-link:focus-visible { outline:3px solid var(--ivory); outline-offset:2px; transform:translateY(0); }
:where(a, button):focus-visible { outline:3px solid var(--bronze); outline-offset:3px; }

.display {
  font-family:'Fraunces',serif; font-weight:380; letter-spacing:-.02em;
  font-feature-settings:"ss01" 1,"ss02" 1; font-variation-settings:"opsz" 144,"SOFT" 30;
  line-height:.98;
}
.display em {
  font-family:'Instrument Serif','Fraunces',serif; font-style:italic; font-weight:400;
  color:var(--terracotta); font-variation-settings:"opsz" 144,"SOFT" 80; letter-spacing:-.005em;
}
.num {
  font-family:'Fraunces',serif; font-feature-settings:"tnum" 1,"ss01" 1;
  font-variation-settings:"opsz" 144; font-weight:340; letter-spacing:-.03em;
}
.eyebrow {
  font-family:'Manrope',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sienna);
}
.chapter {
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bronze);
}
.chapter::before { content:''; width:36px; height:1px; background:currentColor; opacity:.4; }
.chapter strong {
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:18px; color:var(--terracotta);
}

.noise { position:relative; }
.noise::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.14  0 0 0 0 0.12  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.10; mix-blend-mode:multiply;
}
.grain { position:relative; }
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(44,37,32,.035) 1px,transparent 1px);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:.6;
}
.hairline { height:1px; background:linear-gradient(to right,transparent,rgba(44,37,32,.18),transparent); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:.02em;
  transition:all .25s ease; position:relative;
}
.btn-primary {
  background:var(--ink); color:var(--ivory);
  box-shadow:0 1px 2px rgba(44,37,32,.1),0 8px 24px -8px rgba(44,37,32,.5);
}
.btn-primary:hover { background:var(--midnight); transform:translateY(-1px); box-shadow:0 2px 4px rgba(44,37,32,.12),0 14px 32px -10px rgba(44,37,32,.55); }
.btn-accent { background:var(--terracotta); color:#fff; box-shadow:0 1px 2px rgba(166,107,77,.2),0 10px 30px -10px rgba(196,137,106,.65); }
.btn-accent:hover { background:var(--sienna); transform:translateY(-1px); }
.btn-ghost { color:var(--ink); border:1px solid rgba(44,37,32,.18); background:transparent; }
.btn-ghost:hover { border-color:var(--ink); background:rgba(44,37,32,.04); }
.btn-light { background:var(--ivory); color:var(--midnight); }
.btn-light:hover { background:#fff; transform:translateY(-1px); }
.btn-outline-light { color:var(--ivory); border:1px solid rgba(251,248,244,.28); }
.btn-outline-light:hover { border-color:var(--ivory); background:rgba(251,248,244,.08); }
.btn-arrow { transition:transform .25s ease; }
.btn:hover .btn-arrow { transform:translateX(3px); }

.card {
  background:#fff; border:1px solid rgba(44,37,32,.14); border-radius:18px;
  box-shadow:0 1px 2px rgba(44,37,32,.04),0 6px 18px -10px rgba(44,37,32,.12);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.card:hover { transform:translateY(-3px); border-color:rgba(44,37,32,.22); box-shadow:0 4px 10px rgba(44,37,32,.06),0 16px 36px -14px rgba(44,37,32,.2); }
.anchor { scroll-margin-top:88px; }

.scroll-bar {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80;
  background:linear-gradient(90deg,var(--terracotta),var(--sienna),var(--bronze));
  transform-origin:0 0; transform:scaleX(0); pointer-events:none;
}

.site-header {
  background:rgba(28,24,21,.92); -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 28px -18px rgba(0,0,0,.55);
}
.site-header .nav-logo { color:var(--ivory); }
.site-header .nav-eyebrow { color:rgba(245,239,231,.55); }
.site-header .nav-link { color:rgba(245,239,231,.78); }
.site-header .nav-link:hover { color:var(--ivory); }
.site-header .nav-link[aria-current="page"] { color:var(--terracotta); }

.mobile-menu-button {
  display:none; width:44px; height:44px; flex:0 0 44px; align-items:center; justify-content:center;
  border:1px solid rgba(245,239,231,.28); border-radius:999px; color:var(--ivory); background:transparent;
}
.mobile-site-menu {
  position:fixed; inset:64px 0 auto; padding:0 1rem 1rem; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.mobile-site-menu.is-open { opacity:1; visibility:visible; transform:none; }
.mobile-site-menu-inner {
  display:grid; overflow:hidden; border:1px solid rgba(245,239,231,.12); border-radius:18px;
  background:rgba(26,20,16,.98); box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.mobile-menu-link {
  display:flex; min-height:58px; align-items:center; justify-content:space-between; padding:0 1.25rem;
  border-bottom:1px solid rgba(245,239,231,.1); color:rgba(245,239,231,.84); font-size:14px;
}
.mobile-menu-link:last-child { border-bottom:0; }
.mobile-menu-link span:first-child span { color:var(--terracotta); font-family:'JetBrains Mono',monospace; font-size:10px; }

.img-hover { overflow:hidden; }
.img-hover img { transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s ease; }
.img-hover:hover img { transform:scale(1.05); filter:saturate(1.05) contrast(1.02); }
.frame { position:relative; }
.frame::before,.frame::after { content:''; position:absolute; width:18px; height:18px; border:1px solid var(--ink); opacity:.4; z-index:2; }
.frame::before { top:-9px; left:-9px; border-right:0; border-bottom:0; }
.frame::after { right:-9px; bottom:-9px; border-left:0; border-top:0; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
::selection { background:var(--terracotta); color:#fff; }

@media (max-width:1023px) {
  .desktop-nav { display:none; }
  .mobile-menu-button { display:flex; }
  .header-cta { display:none; }
}
@media (min-width:768px) { .mobile-site-menu { inset:72px 0 auto; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .img-hover img,.reveal { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}