/* ── Lenis CSS obligatoire ── */
html { scroll-behavior: auto !important; }
[data-lenis-prevent], .lenis-prevent { overscroll-behavior: contain; }
.lenis-stopped { overflow: hidden; }
.lenis-scrolling iframe { pointer-events: none; }

/* ── Cacher avant animation ── */
.uicore-animate-hide { opacity: 0; }

/* ── Classe de base ── */
.animated { animation-fill-mode: both; animation-duration: 0.6s; }
.animated.animated-fast { animation-duration: 0.3s; }
.animated.animated-slow { animation-duration: 1s; }

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Classes nommées ── */
.fadeInUp    { animation-name: fadeInUp; }
.fadeIn      { animation-name: fadeIn; }
.slideInLeft { animation-name: slideInLeft; }
.slideInRight{ animation-name: slideInRight; }
.scaleIn     { animation-name: scaleIn; }

/* ── Navbar — Lien Notion ── */
.nav-notion-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--line); background: transparent; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; font-family: inherit; }
.nav-notion-btn::after { content: '↗'; font-size: 10px; opacity: .55; margin-left: 1px; transition: opacity .15s, transform .15s; display: inline-block; }
.nav-notion-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-2); }
.nav-notion-btn:hover::after { opacity: 1; transform: translate(1px, -1px); }
/* ── Accueil — Bannière Notion ── */
.notion-banner { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; margin-bottom: 48px; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.notion-banner:hover { box-shadow: 0 6px 22px rgba(0,0,0,.1); transform: translateY(-2px); border-color: var(--ink-2); }
.notion-banner-icon { width: 38px; height: 38px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.notion-banner-body { flex: 1; }
.notion-banner-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.notion-banner-desc { font-size: 12.5px; color: var(--muted); }
.notion-banner-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--accent); white-space: nowrap; padding: 5px 12px; border-radius: 5px; border: 1px solid var(--accent-soft); background: var(--accent-soft); transition: background .15s, border-color .15s, color .15s; }
.notion-banner:hover .notion-banner-cta { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ── Hamburger mobile ── */
.nav-hamburger { display: none; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: transparent; cursor: pointer; place-items: center; color: var(--ink-2); transition: background .15s, color .15s; flex-shrink: 0; }
.nav-hamburger:hover { background: var(--bg); color: var(--ink); }

/* ── Menu mobile ── */
.nav-mobile-backdrop { display: none; position: fixed; inset: 0; top: 52px; z-index: 9998; background: rgba(0,0,0,.3); }
.nav-mobile-backdrop.open { display: block; }
.nav-mobile-menu { position: fixed; top: 52px; left: 0; right: 0; z-index: 9999; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.15); padding: 6px 0 12px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.nav-mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.nav-mobile-menu a { display: flex; align-items: center; gap: 11px; padding: 13px 24px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.nav-mobile-menu a:hover { background: var(--bg); color: var(--ink); }
.nav-mobile-menu a.active { color: var(--accent); font-weight: 600; }
.nav-mobile-menu a svg { flex-shrink: 0; opacity: .65; }
.nav-mobile-menu a:hover svg, .nav-mobile-menu a.active svg { opacity: 1; }
.nav-mobile-sep { height: 1px; background: var(--line); margin: 6px 24px; }
.nav-mobile-notion { display: flex; align-items: center; gap: 11px; padding: 13px 24px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.nav-mobile-notion:hover { background: var(--bg); color: var(--ink); }
.nav-mobile-notion::after { content: '↗'; font-size: 11px; opacity: .55; margin-left: auto; }

@media (max-width: 700px) {
  .nav-links { display: none !important; }
  .nav-notion-btn { display: none !important; }
  .nav-hamburger { display: grid; }
}