:root { --oix-red:#E50914; --oix-red-hover:#FF1E2A; }
::selection { background: var(--oix-red); color:#fff; }
h1,h2,h3,h4,.font-display { font-family:'Cabinet Grotesk','Outfit',sans-serif; }
.font-mono { font-family:'JetBrains Mono',monospace; }
.glass { background:rgba(255,255,255,0.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
#nav.scrolled { background:rgba(255,255,255,0.82); backdrop-filter:blur(18px); border-bottom:1px solid rgba(0,0,0,0.1); }
.red-glow { box-shadow:0 8px 24px rgba(229,9,20,0.28); }
.text-glow { text-shadow:0 2px 20px rgba(229,9,20,0.15); }
.grid-bg { background-image:linear-gradient(rgba(0,0,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.035) 1px,transparent 1px); background-size:44px 44px; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:#d4d4d4; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--oix-red); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.animate-marquee { animation:marquee 28s linear infinite; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-hover { transition:transform .3s, border-color .3s, box-shadow .3s; }
.card-hover:hover { transform:translateY(-4px); border-color:rgba(229,9,20,0.5); box-shadow:0 20px 40px rgba(0,0,0,0.06); }

/* Responsive globaux : pas de débordement horizontal sur mobile */
html, body { max-width:100%; overflow-x:hidden; }
img, video, iframe { max-width:100%; }
*, *::before, *::after { min-width:0; }
@media (max-width:640px){
  h1 { word-break:break-word; }
  .lg\:sticky { position:static !important; }
}

/* Bandeau de drapeaux (Hero) */
@keyframes flagscroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.flags-track { animation:flagscroll 34s linear infinite; }
.flags-track:hover { animation-play-state:paused; }

/* Motif géométrique africain subtil (filigrane) */
.africa-pattern { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 2L46 24L24 46L2 24Z' fill='none' stroke='%23D97706' stroke-width='1'/%3E%3Cpath d='M24 14L34 24L24 34L14 24Z' fill='none' stroke='%23E50914' stroke-width='1'/%3E%3C/svg%3E"); background-size:48px 48px; }

/* Feuille d'érable canadienne — accent discret */
.maple-accent { color:#E50914; }
.reveal { opacity:0; transform:translateY(16px); animation:reveal .6s ease forwards; }
@keyframes reveal { to{opacity:1; transform:translateY(0)} }