/* ================================================
   styles.css — Style principal du projet
   ================================================ */

:root {
  /* === Variables personnalisées === */
  --accent: #f9c74f;
  --accent-gradient: linear-gradient(135deg, #f9c74f, #f3722c, #f94144);
  --dark-bg: #0d0221;
  --darker-bg: #0a0118;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* === Surcharge des variables Bootstrap === */
  --bs-body-bg: var(--dark-bg);
  --bs-body-color: #f0e6ff;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 249, 199, 79;
  --bs-secondary: #c9b8e8;
  --bs-dark: #1a0533;

  --bs-card-bg: var(--glass-bg);
  --bs-card-border-color: var(--glass-border);
  --bs-border-color: rgba(255, 255, 255, 0.1);

  --bs-border-radius: 14px;
  --bs-border-radius-lg: 18px;
  --bs-border-radius-sm: 10px;

  /*--gbs-btn-active-border-color: rgba(5, 123, 23, 1);*/
  /*--gbs-btn-active-bg: rgba(28, 243, 64, 0.1);*/

  --bs-light-rgb: 143, 149, 150;
  --bs-secondary-color: rgba(205, 211, 217, 0.75);
}

.popover {
  min-width: 200px !important;
  --bd-violet: #712cf9;

  --bd-violet-bg: var(--bd-violet);

  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bd-violet-bg);

  --bs-popover-header-bg: var(--bd-violet-bg);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 0.5rem;
}
.popover ul,
.popover li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.transition-05 {
  transition: all 300ms ease-in-out;
}
/* ================================================
   BASE
   ================================================ */

body {
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
.modal-content,
body {
  background: radial-gradient(ellipse at top, #1a0533 0%, var(--dark-bg) 60%);
}

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

.navbar {
  background: rgba(13, 2, 33, 0.95) !important;

  border-bottom: 1px solid var(--glass-border);
}

.navbar-brand {
  color: white !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.nav-link {
  color: #c9b8e8 !important;
  transition: all 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent) !important;
  background: rgba(249, 199, 79, 0.1);
}

.avatar,
.stat-val {
  display: flex !important;
  border-radius: 50% !important;
  width: min-content;
  min-width: 38px !important;
  height: 38px !important;
  font-size: 1.1rem;
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-bg-opacity)
  ) !important;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
  font-weight: 700 !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Avatar */
.avatar {
  width: 38px !important;
}

/* ================================================
   CARDS & GLASSMORPHISM
   ================================================ */

.card {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  /*backdrop-filter: blur(12px);*/
  transition: all 0.3s ease;
  padding: 0.5rem;
}

.card:hover {
  border-color: rgba(249, 199, 79, 0.3);
  /*transform: translateY(-4px);*/
}

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

.btn-primary {
  background: var(--accent-gradient);
  border: none;
  font-weight: 700;
  color: #1a0533;
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ffe17d, #f9c74f, #f3722c);
  transform: scale(1.03);
  color: #1a0533;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Boutons secondaires */
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: #f0e6ff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

.badge.bg-primary {
  color: darkblue;
}

/* ================================================
   FORMULAIRES
   ================================================ */

.form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: var(--bs-border-radius);
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(249, 199, 79, 0.25);
  background: rgba(255, 255, 255, 0.12);
}
.form-control option {
  color: black;
}
.form-control option:not(option:last-of-type) {
  border-bottom: none;
}
.form-control option:checked {
  font-weight: bold;
}

.form-control option:nth-of-type(2n + 1) {
  background: white;
}
.form-control option:nth-of-type(2n) {
  background: whitesmoke;
}
.form-control option:first-of-type {
  border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
}

/* ================================================
   OFFCANVAS (Drawer mobile)
   ================================================ */

.offcanvas {
  background: var(--dark-bg);
  border-left: 1px solid var(--glass-border);
}

/* ================================================
   FOOTER
   ================================================ */

.site-footer {
  border-top: 1px solid var(--glass-border);
}

/* ================================================
   UTILITIES
   ================================================ */

.text-accent {
  color: var(--accent) !important;
}
.bg-glass {
  background: var(--glass-bg) !important;
}
.border-glass {
  border-color: var(--glass-border) !important;
}

/* Animation douce */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================== HOME PAGE ====================== */

.home-hero {
  background: linear-gradient(
    135deg,
    rgba(26, 5, 51, 0.9),
    rgba(13, 2, 33, 0.95)
  );
  color: white;
}

.section-title {
  color: var(--accent);
  font-weight: 700;
  position: relative;
}

.section-title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 12px auto;
  border-radius: 3px;
}

/* Feature & Rule Cards */
.feature-card,
.rule-card {
  transition: all 0.3s ease;
}

.feature-card:hover,
.rule-card:hover {
  transform: translateY(-8px);
}

.rule-number {
  width: 50px;
  height: 50px;
  background: var(--accent);
  color: #1a0533;
  font-weight: 900;
  font-size: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton fantôme */
.btn-ghost {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  background: transparent;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* ====================== WIZARD ====================== */

.wizard-header {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
}

.wizard-steps {
  max-width: 620px;
}

.step-bubble {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s;
}

.wizard-step.active .step-bubble {
  background: var(--accent);
  color: #1a0533;
  border-color: var(--accent);
  transform: scale(1.1);
}

.wizard-step.done .step-bubble {
  background: #22c55e;
  color: white;
  border-color: #22c55e;
}

.step-line {
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 22px;
}

.step-line.done {
  background: #22c55e;
}

.step-label {
  color: #c9b8e8;
  font-size: 0.85rem;
}

/* Pending Games */
.bg-glass {
  background: rgba(255, 255, 255, 0.06) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}
#consent_check + label::before {
  content: "\2715"; /* Code Unicode de la croix (X) */
  color: #dc3545; /* Couleur rouge */
  font-weight: bold; /* Rend le check plus visible */
  display: inline-flex; /* Permet de centrer facilement le symbole */
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#consent_check:checked + label::before {
  content: "\2713"; /* Code Unicode de la coche (checkmark) */
  color: #28a745; /* Couleur verte du check */
}

/* Style automatique lorsque le collapse est OUVERT */
input[aria-expanded] + label {
  position: relative;
}

input[aria-expanded="true"] + label {
  background-color: #5cca34 !important; /* Couleur Bootstrap secondary */
  color: #fff !important;
  border-color: #6c757d !important;
}
/* Style de base de l'indicateur (à droite) */
input[aria-expanded] + label::after {
  position: absolute;
  right: 10px;
  display: inline-block;
  margin-left: auto; /* Sécurité pour forcer le push à droite */
  font-size: 0.85em; /* Optionnel : ajuste la taille du symbole */
}
/* 1. Symbole quand le collapse est FERMÉ */
input[aria-expanded="false"] + label::after {
  content: "+"; /* Ou une flèche comme "▶" ou "+" */
}

/* 2. Symbole quand le collapse est OUVERT */
input[aria-expanded="true"] + label::after {
  content: "-"; /* Ou une flèche comme "▼" ou "−" */
}

.modal-header {
  justify-content: space-between;
}
/* Classe personnalisée pour limiter la taille de l'image dans le popover */
.img-popover-thumb {
  width: 150px !important;
  height: 100px !important;
  object-fit: contain; /* Évite de déformer l'image si elle n'est pas carrée */
}

.text-pink {
  color: #ff4d6d;
}

.love-bar-container {
  width: 100%;
  margin-top: 15px;
}

.love-bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #ff4d6d;
  font-weight: 600;
  font-size: 14px;
}

/* Le fond contient TOUTES les couleurs de votre dégradé */
.love-bar-bg {
  position: relative;
  height: 22px;
  border-radius: 50px;
  background: linear-gradient(
    90deg,
    #4da6ff 0%,
    /* Bleu cyan de départ */ #8be294 20%,
    /* Vert frais */ #ff8b5e 40%,
    /* Orange */ #ff0c0c 60%,
    /* Rouge passion */ #cc00ff 75%,
    /* Violet électrique hyper visible */ #ffc2f6 85%,
    /* Rose néon très clair (fait éclater le violet par contraste) */ #f3f577
      100% /* Jaune Or final pour le bouquet final */
  );
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  /* Empêche le masque noir de dépasser des bords arrondis */
}

/* Le "remplissage" sert ici de cache noir opaque */
.love-bar-fill {
  height: 100%;
  width: 100%;
  /* Modifié par le JS (ex: 75%, 50%, 0%) */
  border-radius: 50px;
  background: #000000;
  border: 1px darkkhaki solid;
  position: absolute;
  top: 0;
  right: 0;
  /* Aligné à droite pour se rétracter vers la droite */
  transition: width 0.4s ease-out;
}

/* Le cœur est positionné par rapport à la droite (le bord du masque noir) */
.love-bar-heart {
  position: absolute;
  top: 50%;
  right: 100%;
  /* Modifié par le JS */
  transform: translateY(-50%);
  font-size: 20px;
  transition: right 0.4s ease-out;
  animation: heartPulse 1.5s infinite ease-in-out;
  z-index: 5;
}

@keyframes heartPulse {
  0% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.2);
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

@keyframes persoPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.rounded-circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.player-card-avatar {
  overflow: hidden;
  max-height: 100px;
  max-width: 100px;
  border-radius: 50%;
}
/* timer */
/* modif timer */

/* Bouton du chronomètre avec remplissage progressif */
.timerToggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  --timer-progress: 0%;
  --timer-fill-color: #198754;
  --timer-text-color: #fff;
}

/* Barre de progression */
.timerToggle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: var(--timer-progress);
  /*border-radius: inherit;*/
  background-color: var(--timer-fill-color);

  z-index: 0;
  pointer-events: none;

  transition:
    width 950ms linear,
    background-color 950ms linear;
}

/* Le texte reste au-dessus du remplissage */
.timerToggle .timer-label {
  position: relative;
  z-index: 1;

  color: var(--timer-text-color);

  transition: color 300ms linear;
}

/* Respect de la préférence de réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .timerToggle::before,
  .timerToggle .timer-label {
    transition: none;
  }
}