/* ════════════════════════════════════════════════════════════════════
   CHI HEADER — NON-CRITICAL CSS (Animations & enhancements)
════════════════════════════════════════════════════════════════════ */

/* Animations et effets supplémentaires */
.logo-bubble {
  animation: bubblePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bubblePop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Boutons avec effets de depth */
.btn-exposant,
.btn-results,
.btn-tickets,
.btn-live,
.btn-100 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-exposant:hover,
.btn-results:hover,
.btn-tickets:hover,
.btn-live:hover,
.btn-100:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive compacting du header */
@media (max-width: 1100px) {
  .chi-mainbar {
    padding: 0 1.4rem;
    gap: 14px;
  }

  .header-actions {
    gap: 1rem;
  }

  .wrap-btns {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .chi-mainbar {
    padding: 0 .75rem;
  }

  .bubble-rolex {
    height: 28px;
  }

  .rolex-clock-slot {
    width: 200px;
  }

  .rolex-clock-card {
    width: 200px;
    height: 60px;
  }

  .rolex-clock-card iframe {
    width: 200px;
    height: 60px;
  }

  .lang-dropdown {
    min-width: 90px;
  }

  .lang-opt {
    padding: 8px 14px;
    font-size: 11px;
  }

  .burger-btn {
    width: 38px;
    height: 38px;
    gap: 4px;
  }

  .burger-line {
    width: 20px;
    height: 2px;
  }
}

/* Accessibility improvements */
.icon-btn:focus-visible,
.burger-btn:focus-visible {
  outline: 2px solid #dc4f0a;
  outline-offset: 2px;
}

.lang-opt:focus-visible {
  outline: 2px solid #dc4f0a;
  outline-offset: -2px;
}

/* Print styles */
@media print {
  header.chi-header {
    display: none;
  }
}