/* ============================================================
   NO LOOK AGENCY — Tokens de marque partagés.
   Variables CSS (couleurs, ombres, easing) + police display.
   Importé sur les pages. N'écrase rien d'existant : ajoute juste
   des variables disponibles et la classe .font-display.
   ============================================================ */
:root {
  --darkest: #030303;
  --cardbg: #0A0A0A;
  --panel-2: #0F0F0F;
  --electric: #0047FF;
  --electric-400: #60A5FA;
  --white: #FFFFFF;
  --electric-05: rgba(0,71,255,0.05);
  --electric-10: rgba(0,71,255,0.10);
  --electric-15: rgba(0,71,255,0.15);
  --electric-30: rgba(0,71,255,0.30);
  --electric-40: rgba(0,71,255,0.40);
  --electric-glow: 0 0 20px rgba(0,71,255,0.5);
  --fg1: #FFFFFF;
  --fg2: #D1D5DB;
  --fg3: #9CA3AF;
  --fg4: #6B7280;
  --fg5: #4B5563;
  --yusimy: #B8E82E;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-2xl: 2rem;
  --r-pill: 9999px;
  --shadow-card: 0 20px 60px rgba(0,0,0,0.60);
  --shadow-glow: 0 0 40px rgba(0,71,255,0.50);
  --ease-no-look: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Police display athlétique pour les gros titres (Archivo Expanded).
   À appliquer en ajoutant la classe .font-display sur un titre existant,
   sans toucher à ses autres classes (italic/uppercase déjà gérées ailleurs). */
.font-display { font-family: 'Archivo Expanded', 'Inter', sans-serif; }

/* Application de la police display sur les titres des pages qui lient brand.css.
   Réversible : supprimer ce bloc remet tout en Inter. */
h1, h2, h3, .mega-title { font-family: 'Archivo Expanded', 'Inter', sans-serif; }

/* ============================================================
   KINETIC TICKER — bande à slogans qui défile entre 2 sections.
   Mots pleins / contournés alternés, étoiles électriques.
   Usage : voir le bloc HTML .tick-wrap injecté dans la page.
   ============================================================ */
.tick-wrap { overflow: hidden; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); padding: 1.6rem 0; background: var(--cardbg, #0A0A0A); position: relative; z-index: 2; }
.tick-line { display: flex; width: max-content; animation: tick 38s linear infinite; }
.tick-wrap:hover .tick-line { animation-play-state: paused; }
.tick-run { display: flex; align-items: center; flex-shrink: 0; }
.tick-item { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap; }
.tick-fill, .tick-out { font-family: 'Archivo Expanded', 'Inter', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; }
.tick-fill { color: #fff; }
.tick-out { -webkit-text-stroke: 1.2px rgba(255,255,255,.35); color: transparent; }
.tick-star { color: var(--electric, #0047FF); font-size: 1rem; text-shadow: 0 0 12px rgba(0,71,255,.7); }
@keyframes tick { to { transform: translateX(-33.333%); } }

/* Dock : quand le magnify JS est actif (desktop), on fige la taille des items
   pour laisser le transform (scale) gérer l'agrandissement fluide, sans cumuler
   avec l'ancien magnify par largeur au survol. */
.dock-container.js-magnify .dock-item { width: 64px !important; height: 64px !important; }