/* Sylvestre UI — reset, fond, scrollbar, helpers, animations. */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scrollbar-width: thin; scrollbar-color: rgba(76, 203, 99, 0.4) transparent; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Halos d'ambiance fixés au viewport via un pseudo-élément `position: fixed`.
   C'est une couche STATIQUE (composée une seule fois, pas de repaint par frame) —
   sans danger, contrairement à une couche ANIMÉE en continu (le marquee, vrai
   responsable des artefacts de compositing Android, désormais masqué sur mobile). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--app-gradient);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
::selection { background: rgba(76, 203, 99, 0.3); color: #fff; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

/* Scrollbar globale lime */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 203, 99, 0.5);
  background-clip: padding-box;
}

/* Scrollbar fine pour panneaux internes (curriculum, etc.) */
.sui-scroll { scrollbar-width: thin; scrollbar-color: rgba(76, 203, 99, 0.35) transparent; }
.sui-scroll::-webkit-scrollbar { width: 8px; }
.sui-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.sui-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}
.sui-scroll::-webkit-scrollbar-thumb:hover { background: rgba(76, 203, 99, 0.55); background-clip: padding-box; }

/* Helpers de layout */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 920px; }
.container-tight { max-width: 820px; }
.container-mid { max-width: 1100px; }
.container-1000 { max-width: 1000px; }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head { text-align: center; margin-bottom: clamp(26px, 4vw, 42px); }
.section-head h2 { margin: 12px 0 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.accent { color: var(--accent); }
.accent-glow { color: var(--accent); text-shadow: var(--glow-text); }

.lead { font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--text-secondary); line-height: 1.62; }
.muted { color: var(--text-tertiary); }
.secondary { color: var(--text-secondary); }

/* Animations */
@keyframes suiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes suiPop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.anim-fade { animation: suiFade var(--dur-base) var(--ease-out) both; }
.anim-pop { animation: suiPop var(--dur-base) var(--ease-out) both; }

/* Révélation douce au scroll (classe .reveal ajoutée par ui.js sur les blocs
   encore hors écran ; .is-in déclenche l'apparition). Animation unique par bloc. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

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

[hidden] { display: none !important; }