/* =========================
   THÈME ALOA – GLOBAL
   ========================= */

:root {
  --aloa-coral: #f08c6e;
  --aloa-lagoon: #1EA7C6;
  --aloa-sand: #FAF7F2;
  --aloa-ink: #1f2937;

  --bs-primary: #f08c6e;
  --bs-primary-rgb: 240, 140, 110;

  --bs-info: #1EA7C6;
  --bs-info-rgb: 30, 167, 198;

  --bs-body-bg: #FAF7F2;
  --bs-body-color: #1f2937;

  --bs-link-color: #f08c6e;
  --bs-link-hover-color: #d9775c;
}

/* =========================
   BASE
   ========================= */

html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

/* Fond statique */
html {
  background-color: var(--aloa-sand);
  position: relative;
}

/* =========================
   FOND ANIMÉ (VISIBLE À 100%)
   ========================= */

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -25%;
  pointer-events: none;
}

/* Calque animé principal */
html::before {
  z-index: 0;

  background:
    radial-gradient(800px 600px at 10% 20%, rgba(240, 140, 110, 0.35), transparent 65%),
    radial-gradient(900px 700px at 90% 30%, rgba(30, 167, 198, 0.35), transparent 65%),
    radial-gradient(700px 500px at 50% 80%, rgba(240, 140, 110, 0.25), transparent 70%);

  filter: blur(18px);
  animation: aloaDrift 12s linear infinite;
}

/* Calque secondaire (parallax lent) */
html::after {
  z-index: -1;

  background:
    radial-gradient(1000px 800px at 30% 60%, rgba(30, 167, 198, 0.20), transparent 70%),
    radial-gradient(900px 700px at 70% 10%, rgba(240, 140, 110, 0.20), transparent 70%);

  filter: blur(30px);
  animation: aloaDriftSlow 22s linear infinite;
}

/* Animations */
@keyframes aloaDrift {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  25%  { transform: translate3d(8%, -6%, 0) scale(1.06); }
  50%  { transform: translate3d(-6%, 8%, 0) scale(1.12); }
  75%  { transform: translate3d(6%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(0%, 0%, 0) scale(1); }
}

@keyframes aloaDriftSlow {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  50%  { transform: translate3d(-8%, 6%, 0) scale(1.10); }
  100% { transform: translate3d(0%, 0%, 0) scale(1); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after {
    animation: none;
  }
}

/* =========================
   BODY
   ========================= */

body {
  position: relative;
  z-index: 1; /* AU-DESSUS du fond animé */
  background: transparent;
  color: var(--bs-body-color) !important;
}

/* =========================
   NAVBAR
   ========================= */

.navbar {
  background-color: #ffffff;
}

/* =========================
   CARTES
   ========================= */

.card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* =========================
   BOUTONS
   ========================= */

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* =========================
   BADGES
   ========================= */

.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* =========================
   TABLES
   ========================= */

.table .progress {
  height: 10px;
}

/* =====================================================
   PROGRAMME – MODALE
   ===================================================== */

.program-modal-content {
  background: transparent;
}

.program-stage {
  position: relative;
  height: calc(100dvh - 72px);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-bg {
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.zoom-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* =========================
   HEADER MODALE PROGRAMME
   ========================= */

.program-modal-header {
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
}

.program-modal-header .modal-title {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.program-modal-header .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

.program-modal-header .btn-close:hover {
  opacity: 1;
}

/* =========================
   ARBRE DE TOURNOI
   ========================= */

section .card {
  transition: transform .15s ease, box-shadow .15s ease;
}

section .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}