/* ============================================================================
   QZR vNext — Modal « Rechercher un adversaire » / Générateur de lien de défi
   ----------------------------------------------------------------------------
   Reskin PUR vNext (mono-tone teal) de #searchOpponent-menu, affiché dans
   .modal-dialog-search-opponent-menu (helper dialog2_). Remplace l'ancien
   thème "dark glass" (style/search-opponent-modern.css).

   Règle : strictement les tokens --qz-* (fallback clair = valeur light par
   défaut, au cas où la variable serait hors scope). Scopé au conteneur du
   modal → n'affecte aucun autre écran. À charger APRÈS crs__front.css
   (surcharge la base legacy en !important) et vnext-tokens.css.
   ============================================================================ */

/* ── Chrome du modal ─────────────────────────────────────────────────────── */
.modal-dialog-search-opponent-menu .modal-content {
  background: var(--qz-surface, #FFFFFF) !important;
  color: var(--qz-text, #10211B) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: var(--qz-r-card, 16px) !important;
  box-shadow: 0 24px 60px -24px rgba(6, 52, 42, .28), 0 2px 8px rgba(6, 52, 42, .06) !important;
  font-family: var(--qz-font, inherit);
}

.modal-dialog-search-opponent-menu .modal-header {
  border-bottom: 0 !important;
  background: transparent !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px) 0 !important;
  min-height: 0;
}
.modal-dialog-search-opponent-menu .modal-header .modal-title,
.modal-dialog-search-opponent-menu .modal-header > div {
  color: var(--qz-text, #10211B) !important;
  font-family: var(--qz-font, inherit);
  font-weight: var(--qz-fw-strong, 500);
  font-size: var(--qz-fs-h3, 16px) !important;
  letter-spacing: 0;
  text-transform: none !important;
}
/* Bouton fermer : la croix Bootstrap est une image SVG noire fixe → invisible sur
   la surface sombre en dark mode. On la recolore via un masque CSS pour qu'elle
   suive le token --qz-muted (clair/sombre). */
.modal-dialog-search-opponent-menu .modal-header .btn-close {
  background-image: none !important;
  background-color: var(--qz-muted, #5E8A7C) !important;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 13px 13px no-repeat !important;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 13px 13px no-repeat !important;
  opacity: .7 !important;
  transition: background-color var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease), opacity var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease);
}
.modal-dialog-search-opponent-menu .modal-header .btn-close:hover {
  background-color: var(--qz-text, #10211B) !important; opacity: 1 !important;
}

.modal-dialog-search-opponent-menu .modal-body {
  background: transparent;
  padding: var(--qz-4, 16px) var(--qz-6, 24px) var(--qz-6, 24px) !important;
  min-height: 45vh;
}

/* ── Bandeau d'aide (info) ───────────────────────────────────────────────── */
#searchOpponent-menu .search-menu-alert-container {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border: 1px solid var(--qz-line-strong, #CDE7DC) !important;
  border-radius: var(--qz-r-card, 16px) !important;
  color: var(--qz-accent-ink, #0A4F40) !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px) !important;
  margin: 0 0 var(--qz-5, 20px) !important;
  width: 100% !important;
}
#searchOpponent-menu .search-menu-alert-container .fa-info {
  background: var(--qz-accent, #16A87A) !important;
  color: var(--qz-on-accent, #FFFFFF) !important;
  border-radius: var(--qz-r-pill, var(--qz-r-pill));
  width: 32px; height: 32px; min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  margin: 0 var(--qz-3, 12px) 0 0 !important;
  font-size: .8rem !important;
  font-weight: 900; /* FA5 solid */
}
#searchOpponent-menu .search-menu-alert-container .col {
  font-size: var(--qz-fs-sm, 13px) !important;
  line-height: var(--qz-lh, 1.5);
  color: var(--qz-accent-ink, #0A4F40) !important;
  text-align: left !important;
}

/* ── Libellés de section ─────────────────────────────────────────────────── */
#searchOpponent-menu label,
#searchOpponent-menu .search-menu-player-label,
#searchOpponent-menu .search-menu-quizz-label,
#searchOpponent-menu .search-menu-starting-mode-label,
#searchOpponent-menu .search-menu-game-mode-label {
  font-size: var(--qz-fs-sm, 13px) !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  color: var(--qz-muted, #5F7B72) !important;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--qz-2, 8px);
  font-family: var(--qz-font, inherit);
}
#searchOpponent-menu label small { font-size: inherit !important; color: inherit !important; }
#searchOpponent-menu label .fas,
#searchOpponent-menu label .fa,
#searchOpponent-menu label svg {
  color: var(--qz-accent, #16A87A) !important;
  font-size: .9rem !important;
  margin-right: 3px;
}

/* ── Champs de recherche (quizz / joueur) ────────────────────────────────── */
#searchOpponent-menu .search-box,
#searchOpponent-menu .search-box-2 {
  background: var(--qz-surface, #FFFFFF) !important;
  border: 1.5px solid var(--qz-line-strong, #CDE7DC) !important;
  border-radius: var(--qz-r-field, 13px) !important;
  padding: 0 var(--qz-2, 8px) !important;
  width: 100% !important;
  margin-bottom: var(--qz-2, 8px) !important;
  transition: border-color var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease),
              box-shadow var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease);
}
#searchOpponent-menu .search-box:focus-within,
#searchOpponent-menu .search-box-2:focus-within {
  border-color: var(--qz-accent, #16A87A) !important;
  box-shadow: var(--qz-focus-ring, 0 0 0 3px #E1F5EE);
}
#searchOpponent-menu .search-box.selected-quizz-focus,
#searchOpponent-menu .search-box-2.selected-quizz-focus {
  border-color: var(--qz-accent-mid, #5DCAA5) !important;
  box-shadow: var(--qz-focus-ring, 0 0 0 3px #E1F5EE);
}
#searchOpponent-menu .search-box input,
#searchOpponent-menu .search-box-2 input,
#searchOpponent-menu .search-box-input,
#searchOpponent-menu .search-box-input-2 {
  background: transparent !important;
  color: var(--qz-text, #10211B) !important;
  border: none !important;
  font-family: var(--qz-font, inherit);
  font-size: var(--qz-fs-body, 15px);
  padding: var(--qz-3, 12px) var(--qz-2, 8px) !important;
  width: 100% !important;
}
#searchOpponent-menu .search-box input::placeholder,
#searchOpponent-menu .search-box-2 input::placeholder {
  color: var(--qz-muted, #5F7B72); opacity: .8;
}

/* ── Bootstrap-select AJAX (variante masquée) ────────────────────────────── */
#searchOpponent-menu .results-quizz { width: 100% !important; }
#searchOpponent-menu #ajax-select,
#searchOpponent-menu .results-quizz-picker,
#searchOpponent-menu .selectpicker { width: 100% !important; }
#searchOpponent-menu .bootstrap-select .btn,
#searchOpponent-menu .bootstrap-select .dropdown-toggle {
  background: var(--qz-surface, #FFFFFF) !important;
  border: 1.5px solid var(--qz-line-strong, #CDE7DC) !important;
  border-radius: var(--qz-r-field, 13px) !important;
  color: var(--qz-text, #10211B) !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px) !important;
  font-family: var(--qz-font, inherit);
  font-size: var(--qz-fs-body, 15px);
}
#searchOpponent-menu .bootstrap-select .dropdown-menu {
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-field, 13px);
  box-shadow: 0 12px 30px -12px rgba(6, 52, 42, .25);
}
#searchOpponent-menu .bootstrap-select .dropdown-menu .inner li a { color: var(--qz-text, #10211B); }
#searchOpponent-menu .bootstrap-select .dropdown-menu .inner li a:hover,
#searchOpponent-menu .bootstrap-select .dropdown-menu .inner li.selected a {
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent-ink, #0A4F40);
}

/* ── Sélecteurs (mode de jeu, mode démarrage) ────────────────────────────── */
#searchOpponent-menu .form-select,
#searchOpponent-menu .game-mode-selector,
#searchOpponent-menu .starting-mode-selector {
  background-color: var(--qz-surface, #FFFFFF) !important;
  border: 1.5px solid var(--qz-line-strong, #CDE7DC) !important;
  border-radius: var(--qz-r-field, 13px) !important;
  color: var(--qz-text, #10211B) !important;
  padding: var(--qz-4, 16px) var(--qz-4, 16px) !important;
  font-family: var(--qz-font, inherit);
  font-size: var(--qz-fs-body, 15px);
  font-weight: var(--qz-fw-strong, 500) !important;
  box-shadow: none !important;
  transition: border-color var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease),
              box-shadow var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease);
}
#searchOpponent-menu .form-select:focus {
  border-color: var(--qz-accent, #16A87A) !important;
  box-shadow: var(--qz-focus-ring, 0 0 0 3px #E1F5EE) !important;
  outline: none;
}
#searchOpponent-menu .form-select option { background: var(--qz-surface, #FFFFFF); color: var(--qz-text, #10211B); }
#searchOpponent-menu .game-mode-box,
#searchOpponent-menu .starting-mode-box,
#searchOpponent-menu .starting-mode-select-container,
#searchOpponent-menu .game-mode-select-container {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important; width: 100% !important; margin: 0 !important;
}

/* ── Puce(s) adversaire sélectionné ──────────────────────────────────────── */
#searchOpponent-menu .results-opponent {
  display: flex; flex-wrap: wrap; gap: var(--qz-2, 8px);
  padding: var(--qz-3, 12px);
  min-height: 48px;
  background: var(--qz-screen, #F1FAF6);
  border-radius: var(--qz-r-field, 13px);
  border: 1px solid var(--qz-line, #DCEFE8);
  margin-top: var(--qz-2, 8px);
}
#searchOpponent-menu .selected-user {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border: 1px solid var(--qz-accent-mid, #5DCAA5) !important;
  color: var(--qz-accent-ink, #0A4F40) !important;
  border-radius: var(--qz-r-control, 12px) !important;
  padding: var(--qz-1, 4px) var(--qz-3, 12px) !important;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--qz-fs-sm, 13px);
  animation: qzSoChipIn var(--qz-dur-pop, 350ms) var(--qz-ease, ease);
}
@keyframes qzSoChipIn { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: none; } }
#searchOpponent-menu .remove-selected-opponent {
  color: var(--qz-error, #E24B4A) !important; cursor: pointer;
  font-size: .75rem; font-weight: 700; opacity: .7;
  transition: opacity var(--qz-dur-press, var(--qz-dur-ui));
}
#searchOpponent-menu .remove-selected-opponent:hover { opacity: 1; text-decoration: underline; }

/* ── Séparateurs ─────────────────────────────────────────────────────────── */
#searchOpponent-menu .hr {
  border: none !important; height: 1px; background: var(--qz-line, #DCEFE8);
  width: 100% !important; margin: var(--qz-5, 20px) 0 !important;
}

/* ── Switch « mix des quiz du groupe » ───────────────────────────────────── */
#searchOpponent-menu .form-switch-for-group { width: 100% !important; }
#searchOpponent-menu .form-switch-for-group .form-check-label {
  color: var(--qz-muted, #5F7B72) !important;
  font-size: var(--qz-fs-sm, 13px); font-family: var(--qz-font, inherit);
}
#searchOpponent-menu .form-check-input:checked {
  background-color: var(--qz-accent, #16A87A);
  border-color: var(--qz-accent, #16A87A);
}
#searchOpponent-menu .form-check-input:focus {
  border-color: var(--qz-accent-mid, #5DCAA5);
  box-shadow: var(--qz-focus-ring, 0 0 0 3px #E1F5EE);
}

/* ── CTA « Générer le lien » ─────────────────────────────────────────────── */
#searchOpponent-menu .search-button-for-challenge-dual {
  background: var(--qz-accent, #16A87A) !important;
  color: var(--qz-on-accent, #FFFFFF) !important;
  font-family: var(--qz-font, inherit);
  font-weight: var(--qz-fw-strong, 500);
  font-size: var(--qz-fs-body, 15px) !important;
  border: none !important;
  border-radius: var(--qz-r-control, 12px) !important;
  padding: var(--qz-4, 16px) var(--qz-6, 24px) !important;
  width: 100% !important;
  text-align: center; cursor: pointer;
  text-transform: none; letter-spacing: 0;
  margin-top: var(--qz-5, 20px) !important;
  box-shadow: 0 3px 0 var(--qz-accent-deep, #0F6E56);
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              box-shadow var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              background var(--qz-dur-press, var(--qz-dur-ui));
}
#searchOpponent-menu .search-button-for-challenge-dual:hover:not(.disabled) {
  background: var(--qz-accent-deep, #0F6E56) !important;
}
#searchOpponent-menu .search-button-for-challenge-dual:active:not(.disabled) {
  transform: scale(var(--qz-press-scale)); box-shadow: 0 1px 0 var(--qz-accent-deep, #0F6E56);
}
#searchOpponent-menu .search-button-for-challenge-dual.disabled {
  background: var(--qz-line-strong, #CDE7DC) !important;
  color: var(--qz-muted, #5F7B72) !important;
  box-shadow: none !important; cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   État « Lien de défi généré » (#searchOpponentFormContainer ré-rendu :
   entête "Lien créé" + lien partageable + Copier / Partager / Démarrer)
   ════════════════════════════════════════════════════════════════════════ */
.modal-dialog-search-opponent-menu .search-menu-alert-container .fa-check-circle {
  color: var(--qz-accent, #16A87A) !important;
  font-size: 2rem !important;
  margin: 0 auto var(--qz-2, 8px) !important;
}
.modal-dialog-search-opponent-menu .search-menu-alert-container h1 {
  color: var(--qz-text, #10211B) !important;
  font-family: var(--qz-font, inherit) !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  font-size: var(--qz-fs-title, 22px) !important;
  letter-spacing: 0 !important;
}

/* Lien partageable (span cliquable) */
.modal-dialog-search-opponent-menu .generated-challenge-link {
  display: block;
  background: var(--qz-screen, #F1FAF6) !important;
  border: 1px dashed var(--qz-line-strong, #CDE7DC);
  border-radius: var(--qz-r-control, 12px);
  color: var(--qz-accent-ink, #0F6E56) !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px);
  font-size: var(--qz-fs-sm, 13px) !important;
  line-height: 1.4;
  word-break: break-all;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--qz-dur-press, var(--qz-dur-ui)), border-color var(--qz-dur-press, var(--qz-dur-ui));
}
.modal-dialog-search-opponent-menu .generated-challenge-link:hover {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border-color: var(--qz-accent-mid, #5DCAA5);
}

/* Boutons de l'état généré (Copier / Partager / Démarrer).
   SPÉCIFICITÉ : ces boutons portent .btn-outline-success (markup legacy) et sont
   donc happés par la règle globale "ghost" de ui-visual-language.css
   ( body:not(.realtime-active) :where(.btn-outline-success)…:not(#homepage-hero *)… ,
   spécificité 1 ID + 14 !important → fond transparent + texte marine ). On la bat
   avec DEUX ID (#searchOpponent-menu #searchOpponentFormContainer, tous deux uniques
   et imbriqués dans ce modal) : 2 ID > 1 ID, quel que soit le nombre de classes. */
/* Base commune */
#searchOpponent-menu #searchOpponentFormContainer .copy-challenge-link,
#searchOpponent-menu #searchOpponentFormContainer .share-challenge-link,
#searchOpponent-menu #searchOpponentFormContainer .btn.join-session-on-the-fly {
  font-family: var(--qz-font, inherit) !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  font-size: var(--qz-fs-body, 15px) !important;
  border-radius: var(--qz-r-control, 12px) !important;
  min-height: 54px !important;
  padding: var(--qz-3, 12px) var(--qz-5, 20px) !important;
  width: 100% !important;
  text-transform: none !important; letter-spacing: 0 !important;
  border: none !important;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              box-shadow var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              background var(--qz-dur-press, var(--qz-dur-ui));
}
/* Secondaires : Copier / Partager */
#searchOpponent-menu #searchOpponentFormContainer .copy-challenge-link,
#searchOpponent-menu #searchOpponentFormContainer .share-challenge-link {
  background: var(--qz-surface, #FFFFFF) !important;
  color: var(--qz-accent-ink, #0F6E56) !important;
  border: 1.5px solid var(--qz-line-strong, #CDE7DC) !important;
  box-shadow: 0 3px 0 var(--qz-line-strong, #CDE7DC) !important;
}
#searchOpponent-menu #searchOpponentFormContainer .copy-challenge-link:hover,
#searchOpponent-menu #searchOpponentFormContainer .share-challenge-link:hover {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border-color: var(--qz-accent-mid, #5DCAA5) !important;
}
#searchOpponent-menu #searchOpponentFormContainer .copy-challenge-link:active,
#searchOpponent-menu #searchOpponentFormContainer .share-challenge-link:active {
  transform: scale(var(--qz-press-scale)); box-shadow: 0 1px 0 var(--qz-line-strong, #CDE7DC) !important;
}
/* Primaire : Démarrer la partie */
#searchOpponent-menu #searchOpponentFormContainer .btn.join-session-on-the-fly {
  background: var(--qz-accent, #16A87A) !important;
  color: var(--qz-on-accent, #FFFFFF) !important;
  box-shadow: 0 3px 0 var(--qz-accent-deep, #0F6E56) !important;
}
#searchOpponent-menu #searchOpponentFormContainer .btn.join-session-on-the-fly:hover {
  background: var(--qz-accent-deep, #0F6E56) !important;
}
#searchOpponent-menu #searchOpponentFormContainer .btn.join-session-on-the-fly:active {
  transform: scale(var(--qz-press-scale)); box-shadow: 0 1px 0 var(--qz-accent-deep, #0F6E56) !important;
}
/* Colonnes des CTA générés : pleine largeur, centrées (au lieu de col-8 étriqué) */
.modal-dialog-search-opponent-menu #searchOpponentFormContainer .row > [class*="col-"] {
  flex: 0 0 auto; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto;
}

/* ── Autocomplete (liste déroulante) en contexte clair ───────────────────── */
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown {
  background: var(--qz-surface, #FFFFFF) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: var(--qz-r-field, 13px) !important;
  box-shadow: 0 12px 30px -12px rgba(6, 52, 42, .25);
  overflow-y: auto;   /* garde le scroll (max-height:260px de la base) */
  overflow-x: hidden;
}
.modal-dialog-search-opponent-menu .vanilla-ac-item {
  color: var(--qz-text, #10211B) !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px);
  transition: background var(--qz-dur-press, var(--qz-dur-ui));
  border-bottom: 1px solid var(--qz-line, #DCEFE8);
}
.modal-dialog-search-opponent-menu .vanilla-ac-item:last-child { border-bottom: none; }
.modal-dialog-search-opponent-menu .vanilla-ac-item:hover,
.modal-dialog-search-opponent-menu .vanilla-ac-item.selected {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  color: var(--qz-accent-ink, #0A4F40) !important;
}
/* Le label des résultats vient du serveur en HTML pensé pour un fond SOMBRE
   (text-white + inherited white + badges .bg-* dont le fond tombe transparent
   ici) → texte blanc sur fond blanc = illisible. On force un texte lisible et on
   redonne un vrai fond aux badges. Chaîne .vanilla-ac-dropdown .vanilla-ac-item …
   pour battre .text-white (!important). */
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-item,
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-item *:not(.badge) {
  color: var(--qz-text, #10211B) !important;
}
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-item .badge {
  background: var(--qz-accent, #16A87A) !important;
  color: var(--qz-on-accent, #FFFFFF) !important;
  border-color: transparent !important;
}
/* liserés "dynamic" du markup serveur → ligne vNext discrète */
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-item [class*="border-color-dynamic"] {
  border-color: var(--qz-line, #DCEFE8) !important;
}
/* "Aucun résultat" : gris atténué lisible */
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-no-result,
.modal-dialog-search-opponent-menu .vanilla-ac-dropdown .vanilla-ac-no-result * {
  color: var(--qz-muted, #5F7B72) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .modal-dialog-search-opponent-menu .modal-body { padding: var(--qz-4, 16px) !important; }
  #searchOpponent-menu .search-menu-alert-container { padding: var(--qz-3, 12px) !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   Modal « Rejoindre une session » (.modal-join-session, helper dialog2_)
   ------------------------------------------------------------------------
   Saisie code + pseudo → rejoint le lobby realtime. Reskin PUR vNext.
   NB : dialog2_ pose par défaut `.text-white` sur .modal-content et un fond
   dégradé gris (contentStyle, nettoyé côté JS) → on force fond clair + texte.
   `.modal-join-session` est porté par la .modal-dialog.
   ════════════════════════════════════════════════════════════════════════ */
.modal-join-session .modal-content {
  background: var(--qz-surface, #FFFFFF) !important;
  color: var(--qz-text, #10211B) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: var(--qz-r-card, 16px) !important;
  box-shadow: 0 24px 60px -24px rgba(6, 52, 42, .28), 0 2px 8px rgba(6, 52, 42, .06) !important;
}
.modal-join-session .modal-header {
  border-bottom: 0 !important;
  background: transparent !important;
  padding: var(--qz-3, 12px) var(--qz-4, 16px) 0 !important;
  min-height: 0;
}
/* Croix : recolorée via masque CSS → suit --qz-muted (visible en clair ET sombre,
   contrairement à l'image SVG noire fixe de Bootstrap). */
.modal-join-session .modal-header .btn-close {
  background-image: none !important;
  background-color: var(--qz-muted, #5E8A7C) !important;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 13px 13px no-repeat !important;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 13px 13px no-repeat !important;
  opacity: .7 !important;
  transition: background-color var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease), opacity var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease);
}
.modal-join-session .modal-header .btn-close:hover {
  background-color: var(--qz-text, #10211B) !important; opacity: 1 !important;
}
.modal-join-session .modal-body {
  background: transparent !important;
  padding: var(--qz-4, 16px) var(--qz-6, 24px) var(--qz-6, 24px) !important;
  text-align: center;
}

/* vNext — wrapper + titre (remplace l'icône globe) */
.modal-join-session .qzr-join-modal { text-align: center; }
.modal-join-session .qzr-join-title {
  margin: 4px 0 20px; font-size: 1.2rem; font-weight: var(--qz-fw-strong, 800);
  color: var(--qz-text, #06342A); letter-spacing: -.01em;
}

/* Champs à label flottant (code session + pseudo) */
.modal-join-session .qzr-ff {
  position: relative; margin: 0 auto 16px; max-width: 320px; text-align: left;
}
.modal-join-session .qzr-ff input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--qz-line-strong, #CDE7DC) !important;
  border-radius: var(--qz-r-field, 14px) !important;
  background: var(--qz-surface, #FFFFFF) !important; color: var(--qz-text, #06342A) !important;
  font-family: var(--qz-font, inherit) !important; font-size: var(--qz-fs-body, 15px) !important;
  padding: 20px 16px 8px !important; box-shadow: none !important;
  transition: border-color var(--qz-dur-press, var(--qz-dur-ui)) var(--qz-ease, ease);
}
.modal-join-session .qzr-ff input:focus {
  outline: none; border-color: var(--qz-accent, #16A87A) !important;
  box-shadow: var(--qz-focus-ring, 0 0 0 3px #E1F5EE) !important;
}
.modal-join-session .qzr-ff label {
  position: absolute; left: 16px; top: 15px; pointer-events: none;
  color: var(--qz-muted, #5E8A7C); font-size: 15px; transition: all var(--qz-dur-ui) ease;
}
.modal-join-session .qzr-ff input:focus + label,
.modal-join-session .qzr-ff input:not(:placeholder-shown) + label,
.modal-join-session .qzr-ff--filled label {
  top: 7px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--qz-accent, #16A87A); font-weight: var(--qz-fw-strong, 700);
}
/* Code verrouillé (venu d'un lien) : readonly + fond teinté + cadenas */
.modal-join-session .qzr-ff--locked input {
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border-color: var(--qz-accent-mid, #5DCAA5) !important;
  color: var(--qz-accent-ink, #0F6E56) !important;
  font-weight: var(--qz-fw-strong, 700); letter-spacing: .14em; cursor: not-allowed;
  padding-right: 40px !important;
}
.modal-join-session .qzr-ff-lock {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--qz-accent, #16A87A);
}
.modal-join-session .qzr-ff-lock svg { display: block; }
/* Pseudo verrouillé (utilisateur déjà identifié) */
.modal-join-session .qzr-ff input:disabled,
.modal-join-session .qzr-ff input.disabled {
  background: var(--qz-screen, #F1FAF6) !important; color: var(--qz-muted, #5E8A7C) !important;
  -webkit-text-fill-color: var(--qz-muted, #5E8A7C); opacity: 1 !important;
}

/* Bouton « Rejoindre ! » → primaire vNext */
.modal-join-session .qzr-join-btn {
  display: block; width: 100%; max-width: 320px; margin: 6px auto 0; box-sizing: border-box;
  background: var(--qz-accent, #16A87A) !important; color: var(--qz-on-accent, #FFFFFF) !important;
  border: none !important; border-radius: var(--qz-r-pill, 999px) !important;
  font-family: var(--qz-font, inherit) !important; font-weight: var(--qz-fw-strong, 700) !important;
  font-size: var(--qz-fs-body, 15px) !important; padding: 13px !important;
  box-shadow: 0 3px 0 var(--qz-accent-deep, #0F6E56) !important; cursor: pointer;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              box-shadow var(--qz-dur-press, 80ms) var(--qz-ease, ease),
              background var(--qz-dur-press, var(--qz-dur-ui));
}
.modal-join-session .qzr-join-btn:hover { background: var(--qz-accent-deep, #0F6E56) !important; }
.modal-join-session .qzr-join-btn:active {
  transform: scale(var(--qz-press-scale)); box-shadow: 0 1px 0 var(--qz-accent-deep, #0F6E56) !important;
}

/* ── Panneau d'alerte (erreur / succès) — layout vNext ───────────────────────
   Markup : .join-alert-panel > .alert-text > ul.join-alert-list >
            li.join-alert-item--(error|success) > span.join-alert-icon + texte. */
.modal-join-session .join-alert-panel {
  border-radius: var(--qz-r-control, 12px);
  margin: 0 auto 16px;
  max-width: 320px;
  padding: 11px 14px;
  text-align: left;
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-screen, #F1FAF6);
  animation: qzJoinAlertIn var(--qz-dur-pop, 260ms) var(--qz-ease, ease);
}
@keyframes qzJoinAlertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.modal-join-session .join-alert-panel.d-none { display: none !important; }
.modal-join-session .join-alert-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.modal-join-session .join-alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--qz-font, inherit);
  font-size: var(--qz-fs-sm, 13px); line-height: 1.45;
  color: var(--qz-text, #10211B);
}
.modal-join-session .join-alert-icon {
  flex: 0 0 auto; margin-top: 1px;
  font-size: 1rem; font-weight: 900; /* FA solid */
}
.modal-join-session .join-alert-icon--error   { color: var(--qz-error, #E24B4A); }
.modal-join-session .join-alert-icon--success { color: var(--qz-success, #1E9E63); }
/* Teinte l'ensemble du panneau selon le type d'item (bg + bordure adaptatifs) */
.modal-join-session .join-alert-panel:has(.join-alert-item--error) {
  background: var(--qz-error-bg, #FCEFEF); border-color: var(--qz-error, #E24B4A);
}
.modal-join-session .join-alert-panel:has(.join-alert-item--success) {
  background: var(--qz-success-bg, #E7F4EC); border-color: var(--qz-success, #1E9E63);
}