/* HOME PRESENTATION */
.presentation-container{
  background: linear-gradient(180deg, #ffbf00, transparent) !important;
}
.presentation-container span{
  font-size: 1rem !important;
  font-weight: 100 !important;
  padding: 10px 10px !important;
  margin: 4px 1px;
  border-radius: 12px;
  /* border: 1px solid; */
  /* font-size: 1rem; */
  font-family: 'Alfa Slab One';
}

@media(max-width:767.98px) {
  .presentation-container span{
    /* display: none; */
    font-size: .85rem!important;
    margin: 4px;
  }
}

.presentation-container .fonctionnalities .fct-1{
  background: hsl(354deg 78% 90.15%);
  color: hsl(354deg 100% 49% / 1) !important;
}

.presentation-container .fonctionnalities .fct-2{
  background: hsl(216 98% 90% / 1);
  color: hsl(216 98% 49% / 1);
}

.presentation-container .fonctionnalities .fct-3{
  background: hsl(45 100% 90% / 1);
  color: hsl(45 100% 36% / 1);
}

.presentation-container .fonctionnalities .fct-4{
  background: hsl(152 69% 90% / 1);
  color: hsl(152 69% 36% / 1);
}


.presentation-container .fonctionnalities .fct-5{
  background: hsl(17 100% 90% / 1);
  color: hsl(17 100% 49% / 1);
}

.presentation-container .fonctionnalities .fct-7{
  background: hsl(196 100% 90% / 1);
  color: hsl(196 100% 36% / 1);
}

.pres-item {
  padding:4%;
  padding-top: 1%;
  height: 238px;
  width: 168px;
  float: left;
  margin: 6px;
  border-radius: 5px;
  font-family: 'Alfa Slab One';
  /* font-size: 1.7rem; */
  color: var(--bs-gray-900);
}


.slick-slider-presentation .item-4{
  background: linear-gradient(6deg, var(--bs-teal), #ffc93c)!important;
  /* color:aliceblue!important; */
}

.slick-slider-presentation .slick-prev ,.slick-slider-presentation .slick-next{
  color: aliceblue;
  display: block;
  z-index: 1;
}
.slick-slider-presentation .slick-next{
  right:32px;
}

.slick-slider-presentation .slick-prev{
  left:2px;
}

.slick-slider-presentation .slick-prev:before, .slick-slider-presentation .slick-next:before{
  font-size: 49px;
}
/* .slick-slider-presentation .slick-prev:before{
  text:'';
} */
/* .slick-slider-presentation .slick-next:before{
  text:'';
} */

.slick-slider-presentation .slick-dots{
  bottom:-12px;
}
/* ************************************** */

#playground{
  background-size: cover!important;
  max-width: 732px;
  margin: auto!important;
  overflow: hidden;
}
#bgstyle_1 {
  position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff);
  /* background: linear-gradient(to top right, #2196f3, #fff); */
  width: 80vw;
  top: -11%;
  left: 50%;
  height: 125vh;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  display: none;
}

#bgstyle_2 {
  position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a);
  /* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
  width: 80vw;
  top: -13%;
  left: 48%;
  height: 125vh;
  z-index: -2;
  border-radius: 50%;
  display: none;
}


#bgstyle_1_playground {
  /* position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff); */
  /* background: linear-gradient(to top right, #2196f3, #fff); */
  /* width: 80vw;
  top: -11%;
  left: 50%;
  height: 125vh;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  display: none; */
  position: fixed;
  /* background: linear-gradient(to right top, #7f8bff17, #fff); */
  background: linear-gradient(to top right,rgba(255,255,255,0), #ffc107)!important;
  width: 150px;
  top: 35%;
  left: 50%;
  height: 150px;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  /* display: none; */
  opacity: .2!important;
}

#bgstyle_2_playground {
  /* position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a); */
  /* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
  /* width: 80vw;
  top: -13%;
  left: 48%;
  height: 125vh;
  z-index: -2;
  border-radius: 50%;
  display: none; */
position: fixed;
/* background: linear-gradient(to left top, #1925c614, #f8f8fa1a); */
/* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
/* min-height: 100%; */
/* background-image: linear-gradient(278deg,rgb(102 16 242 / 0%), #ffd3001f) ,url(/images/categories/SPOR.jpg) !important; */
/* background-size: cover; */
/* -webkit-background-size: cover; */
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
/* background-repeat: no-repeat; */
background-size: 100% 100%!important;
width: 350px;
top: 40%;
left: 0;
height: 350px;
z-index: -2;
border-radius: 50%;
/* display: none; */
/* opacity: .4; */
}

/* #bgstyle_1_playground {
  position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff);
  width: 125vh;
  height: 125vh;
  top: -11%;
  left: -30%;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
}

#bgstyle_2_playground {
  position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a);
  width: 125vh;
  height: 125vh;
  top: -13%;
  left: 48%;
  z-index: -1;
  border-radius: 50%
} */

@media(min-width:767.98px) {
  /* #bgstyle_1_playground { */
    /* width: 201vh;
    height: 201vh;
    display: none; */
  /* } */
  /* #bgstyle_2_playground { */
    /* width: 201vh; */
    /* height: 201vh; */
    /* display: none; */
  /* } */
}



@font-face {
  font-family: 'bubble';
  src: url('../../Double_Bubble_shadow.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'big john';
  src: url('../../BIG_JOHN.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'cocogoose';
  src: url('../../cocogoose.ttf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  src: url('../../alfa-slab-one-v7-latin-regular.eot');
  src: local('Alfa Slab One Regular'), local('AlfaSlabOne-Regular'), url('../../alfa-slab-one-v7-latin-regular.eot?#iefix') format('embedded-opentype'), url('../../alfa-slab-one-v7-latin-regular.woff2') format('woff2'), url('../../alfa-slab-one-v7-latin-regular.woff') format('woff'), url('../../alfa-slab-one-v7-latin-regular.ttf') format('truetype'), url('../../alfa-slab-one-v7-latin-regular.svg#AlfaSlabOne') format('svg')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../roboto-mono-v5-latin-regular.eot');
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../../roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), url('../../roboto-mono-v5-latin-regular.woff2') format('woff2'), url('../../roboto-mono-v5-latin-regular.woff') format('woff'), url('../../roboto-mono-v5-latin-regular.ttf') format('truetype'), url('../../roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg')
}

.ui-dialog .ui-dialog-titlebar {
  background: 0;
  border: 0
}

.ui-dialog .ui-dialog-buttonpane {
  background: none!important;
  border: 0
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em .4em .5em 0;
  cursor: pointer;
  padding: 8px;
  width: 8em;
  border: 1px;
  box-shadow: none;
  border-radius: 5px;
  /* background: 0; */
  /* color: var(--bs-primary); */
  /* border: 1px solid var(--bs-primary) */
}

/* .ui-dialog .ui-dial:og-buttonpane button:hover, .ui-dialog .ui-dialog-buttonpane button:active { */
  /* background: var(--bs-primary) !important; */
  /* color: #fff !important */
/* } */

table.dataTable.no-footer {
  border-bottom: 1px solid #c3c3c308 !important
}

:root {
  --text-warning-light :#ffcf3d; 
  --quizz-option-color: #ffd24d/*#ffc107*/;
  --linear-orange: linear-gradient(180deg, #ffe8cb, #ff7400);
  --qzr-safe-top: env(safe-area-inset-top, 0px);
  --qzr-safe-right: env(safe-area-inset-right, 0px);
  --qzr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --qzr-safe-left: env(safe-area-inset-left, 0px);
}

.text-warning-light{
  color: var(--quizz-option-color/*--text-warning-light*/)!important;
}

.bg-linear-orange{background: var(--linear-orange);}

@font-face {
  font-family: lobster;
  src: url(../../lobster.otf);

  * {
    margin: 0
  }
}

html {
  height: 100%;
  width: 100%;
  margin: auto
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100%;
  max-width: 560px;
  margin: auto!important;
  overflow: auto;
  overflow-y: auto !important;
  margin: auto;
  padding: var(--qzr-safe-top) var(--qzr-safe-right) var(--qzr-safe-bottom) var(--qzr-safe-left);
  padding-right: var(--qzr-safe-right) !important;
  /* background: #f5f5f7; */
  /*!important;*/
}

.cover-container {
  min-height: calc(100dvh - var(--qzr-safe-top) - var(--qzr-safe-bottom));
}

.page-surface {
  padding-left: max(1rem, var(--qzr-safe-left)) !important;
  padding-right: max(1rem, var(--qzr-safe-right)) !important;
  /* background: var(--qz-screen); */
}

.modal,
.modal-dialog,
.toast-container {
  padding-left: var(--qzr-safe-left);
  padding-right: var(--qzr-safe-right);
}

/* #app-title { */
  /* font-family: Lobster;
  font-size: 1.2em;
  font-weight: bold;
  padding-left: 2.2vw; */
  /* color: #ff9000; */
  /* text-shadow: 0 0 1.13e-25px #fff; */
  /* background-image: url(../../images/icons/ios/152.png);
  width: 64px;
  height: 64px;
  background-size: cover;
  border-radius: 50%; */
  /* margin-top: -1vh; */
/* } */

@media(max-width:767.98px) {
  #app-title {
    font-size: 1em;
    padding-top: .2em
  }
}

#app-title-sub {
  font-size: .2em;
  margin-top: -5px;
  padding-left: 4px
}

#app-title__:hover {
  color: var(--bs-primary);
  cursor: pointer
}

#app-title__ div{
  border: 1px solid var(--qz-line)!important;
  /* background:var(--qz-surface)!important; */
}

#current-title-displayer__ {
  text-transform: lowercase !important;
  font-size: 2.2rem;
  /* color: rgba(0, 0, 0, 0.08) !important; */
  font-variant-caps: all-small-caps;
  font-family: 'Alfa Slab One' !important;
  /* text-align: start; */
  margin-left: 0px !important;
  width: 80%;
}

/* Sur #categories?view=detail&code=XXXX, le fil d'Ariane fait deja office de
   <h2> de la page (cf. commentaire plus bas) : le garder a sa taille d'origine
   pour ne pas se comporter comme un titre de page surdimensionne.
   #categories-detail reste dans le DOM en permanence, seul son style inline
   display:none change ; :has() cible donc precisement cette vue active. */
body:has(#categories-detail:not([style*="display:none"]):not([style*="display: none"])) #current-title-displayer__ {
  font-size: 1.2rem;
}

/* Sur la vue chemin, le fil d'Ariane porte le nom du parcours dans un <h2>
   (c'est le titre de la page, il doit l'etre semantiquement). Il ne doit pas
   pour autant apporter la typo/les marges par defaut d'un h2 : on le remet au
   ras de la ligne de fil d'Ariane. */
#current-title-displayer__ > h2 {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

@media(max-width:767.98px) {
  /* #current-title-displayer__ { */
    /* font-size: large */
  /* } */
}

#top-menu-down {
  width: 100%;
  background: var(--qz-screen);
}

/* Sur mobile, la rangee qui porte le bouton RETOUR principal reste visible en
   defilant : sur un ecran long, revenir en arriere imposait sinon de remonter
   toute la page d'abord.

   `sticky` et non `fixed`, a dessein : l'element reste dans le flux, donc rien
   a compenser sous lui — un `fixed` aurait exige d'ajouter sa hauteur en
   padding au contenu, valeur qui aurait dérivé au premier changement de
   gabarit. Il colle des le depart puisqu'il est deja en haut du contenu.

   `top: 0` est mesure, pas suppose : `#app-shell-topbar` est `display: none`
   sur les DIX routes testees (hub, studio, performances, plans, targets,
   players, account, reglages, categories, challenges) — plus rien ne le
   surmonte. Si cette barre revenait un jour, le crochet existe deja :
   `.qzr-top-menu-down--no-topbar`, pose par PageRouter._syncTopMenuDownSpacing().

   z-index 1030 : au-dessus du contenu, mais SOUS le fond de modale Bootstrap
   (1040) — un en-tete colle qui flotterait par-dessus une modale serait pire
   que le probleme resolu. Le fond `--qz-screen` est deja pose ci-dessus ; il
   devient indispensable une fois l'element decolle du flux visuel.

   `body` est le scroller (`overflow-y: auto`) et aucun ancetre intermediaire
   ne porte d'overflow, de transform ni de contain : verifie, sticky s'applique
   bien au bon conteneur. */
@media (max-width: 767.98px) {
  #top-menu-down {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  /* #account porte deja son identite dans son propre en-tete (« MON PROFIL »,
     le pseudo, l'avatar) : la rangee du fil d'Ariane n'y ajoutait qu'un titre
     redondant. Elle n'y porte AUCUN bouton retour — verifie : le selecteur du
     retour ne trouve rien sur cet ecran — donc la masquer ne retire aucune
     navigation.

     `!important` a contrecoeur, mais c'est ici le seul outil possible : la
     navigation affiche cette barre via jQuery `.show()`, qui ecrit
     `style="display: block"` EN LIGNE sur l'element. Une declaration de
     feuille, quelle que soit sa specificite, perd contre un style inline —
     seul `!important` la remporte. Constate a la mesure : la regle etait bien
     chargee et sa media query matchait, et l'element restait affiche. */
  body[data-qz-route="account"] #top-menu-down {
    display: none !important;
  }
}

/* ── Boutons d'action du fil d'Ariane ────────────────────────────────────────
   Retour, recherche, « creer un quiz »… avaient chacun leur geometrie : 36x36
   a 24px pour le retour (en styles INLINE, poses par main-dev-front.js), 36x36
   a 1rem pour la recherche, 40x40 a 1rem pour la creation. Trois traitements
   pour trois boutons voisins de la meme rangee.

   Une seule regle les tient desormais. Chaque feuille de composant ne garde que
   l'IDENTITE de son bouton (fond, bordure, couleur) ; la geometrie vient d'ici.

   Le glyphe est centre par `display:grid; place-items:center` plutot que par
   des paddings : le retour compensait son centrage avec
   `padding-right:6px; padding-top:5px`, ce qui le decalait des que la taille
   changeait. */
/* Une seule ligne, quelle que soit la surface.
   Le conteneur garde `flex-wrap: wrap` — le sous-titre de groupe
   (.group-detail-topbar__meta) vaut `flex-basis:100%` et compte dessus pour
   tomber a la ligne suivante. Ce sont donc les ELEMENTS qu'on rend rigides :
   les boutons ne se compriment ni ne passent a la ligne, et c'est le TITRE qui
   absorbe la place restante (il peut se retrecir, min-width:0, et revenir a la
   ligne dans sa propre boite). */
#top-menu-down .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#top-menu-down .breadcrumb > li {
  flex: 0 0 auto;
}
/* `flex-basis: 0` et non `auto` : avec `auto`, le titre part de sa largeur
   INTRINSEQUE et ne cede que l'exces — sur un libelle long a 2.2rem il gardait
   assez de place pour pousser le bouton de recherche a la ligne suivante
   (constate sur #categories?view=detail : bouton retour a y=24, recherche a
   y=81). Avec une base 0 il ne prend que l'espace RESTANT, donc les boutons,
   rigides, tiennent toujours sur la premiere ligne.
   `overflow: hidden` complete : sans lui un mot unique plus large que la place
   disponible reimposerait sa largeur. */
#top-menu-down .breadcrumb > #current-title-displayer__ {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
/* Le sous-titre garde sa ligne a lui. C'est son <li> qui porte la base 100%
   depuis qu'il est enveloppe (groups.js) : le <span> n'est plus un enfant
   direct du <ol>, donc la regle doit viser l'enveloppe. */
#top-menu-down .breadcrumb > .qzr-bc-item--meta {
  flex: 1 0 100%;
  /* `order` et non l'ordre du DOM : le sous-titre est insere JUSTE APRES le
     titre (groups.js le pose la pour survivre au re-titrage par .text()), donc
     sa ligne pleine coupait la rangee AVANT le declencheur de sections, qui se
     retrouvait sous le bouton retour. En le rendant en dernier, les boutons
     restent ensemble sur la premiere ligne et le sous-titre tombe sous eux. */
  order: 1;
}
#top-menu-down .breadcrumb > .qzr-bc-item--meta::before { content: none !important; }

#top-menu-down .qzr-bc-action {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  min-width: 49px;
  padding: 0;
  border-radius: 50%;
  font-size: 2em;
  line-height: 1;
  box-sizing: border-box;
}
/* `.qzr-top-menu-down--no-topbar` est toujours posee par
   PageRouter._syncTopMenuDownSpacing() quand #app-shell-topbar est masquee,
   mais elle ne porte PLUS de margin-top : ce retrait est desormais assure par
   `body` sur mobile (voir la media query en fin de fichier). Le cumul des deux
   doublait l'espace sur les ecrans sans topbar. La classe reste posee — elle
   sert de crochet a d'autres regles et au diagnostic. */

.breadcrumb-item+.breadcrumb-item::before {
  color: inherit !important;
  content: '' !important
}

.exp {
  font-size: .2em;
  margin-bottom: 50%;
  margin-left: 4%;
  background-color: #ff530d;
  font-weight: bold;
  padding: 1
}

#center {
  width: 100%;
  border: 0;
  height: auto;
  min-height: 30em;
  height: auto !important;
  height: 30em
}

#uppermain-box {
  width: 100%;
  font-size: .6em
}

.menu-open-button:hover, .contxt:hover, .resetlocalsession:hover {
  cursor: pointer;
  background-color: none !important;
  color: #fff
}

#tabs-tc {
  float: right;
  margin-right: 1%
}

.close-editor, .create-test, .reg, .hist {
  cursor: pointer;
  color: #005d7f
}

.close-editor:hover, .create-test:hover, .reg:hover, .hist:hover {
  cursor: pointer
}

.userLogin {
  display: none
}

#resetconbloc {
  margin-top: 1%;
  float: right;
  width: 40%
}

#resetconbloc span, #resetconbloc a {
  font-size: .9em;
  font-weight: bold
}

#resetconbloc a {
  min-width: 30%;
  padding: 30%
}

#closePlayGroundBtn {
  font-size:x-small;
  font-family: verdana;
  /* font-weight: 100; */
  cursor: pointer !important;
  /* z-index: 1  */
}

@media(max-width:767.98px) {
  /* #closePlayGroundBtn { */
    /* border: 0; */
    /* top: 1vh; */
    /* right: -1vw; */
    /* font-weight: 100 */
  /* } */
}

#closePlayGroundBtn:hover, #closePlayGroundBtn:active {
  color: var(--bs-secondary)
}


#main_container {
  width: 100% !important;
  max-width: 1320px !important;
  height: 100% !important;
  margin: 0 auto;
  margin-bottom: 0
}

#main_container_1 {
  width: 100% !important
}

#main-box {
  width: 100% !important
}

.levels li {
  float: left;
  margin: 5px;
  width: 150px;
  list-style: none;
  background-color: #fffae5;
  text-align: center;
  font-size: 2em;
  cursor: pointer
}

.levels {
  width: 100%
}

.word_shuffled_anag .letter-self {
  text-align: center !important;
  font-size: 3.5em;
  font-weight: bold;
  /*font-family:'Alfa Slab One'!important;*/
}

.word_shuffled_qcm .letter-self {
  display: inline-block;
  margin-bottom: 4px;
  min-width: 100%;
  text-align: center;
  text-shadow: none!important;
  font-family: 'Alfa Slab One';
  font-size: 1em;
  font-weight: 100;
  /* border-radius: 9px; */
  min-height: 100px;
  /* float: left; */
  vertical-align: middle;
  align-content: center!important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.word_shuffled_qcm .letter-self:hover{
  cursor: pointer;
}

.word_shuffled_qcm .col:hover, .word_shuffled_qcm .col:active, .word_shuffled_qcm .col:focus {
  cursor: pointer;
  /* background: #f1f1f1 !important */
}

.word_shuffled_anag .col:hover, .word_shuffled_anag .col:active, .word_shuffled_anag .col:focus {
  cursor: pointer;
  /* background: #f1f1f1 !important */
}

.letter-self {
  color: #fff;
  font-family: 'Roboto';
}

/* Permet de s'assurer que toute option désactivée conserve son opacité naturelle */
.letter-self.disabled:not(.ui-state-disabled){
  opacity: 1!important;
}

/* Permet de s'assurer que toute option sélectionnée possède une opacité en décalage évident avec les autres */
.letter-self.disabled.ui-state-disabled,
.letter-self.ui-state-disabled{
  /* border:8px solid #ffbf01 !important; */
  border: 0px!important;
  /* opacity: .35!important; */
}
/* .letter-self.ui-state-disabled{ */
  /* background-color:rgba(254,201,41,.76)!important; */
  /* opacity:1!important; */
/* } */

 /* .letter-self.ui-state-disabled:hover,
.letter-self.ui-state-disabled:focus,
.letter-self.ui-state-disabled:active{
  background: none!important;
} */






.ui-state-highlight {
  width: 70px;
  height: 75px;
  border: 2px dotted #fff
}

.ui-state-selected {
  margin-left: auto;
  margin-bottom: 4px;
  min-width: 18em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #b1b2b1;
  border: 1px dashed #b1b2b1;
  padding: 2%
}

.ui-state-green {
  margin-left: 10%;
  margin-bottom: 4px;
  min-width: 18em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: yellow;
  border: 4px solid yellow;
  padding: 2.5%
}

.answer {
  padding: 2px;
  font-size: 1.4
}

input:focus {
  outline: 0
}

#input-text-form:focus {
  color: #fff
}

.word-input-button {
  border: 0;
  background-image: none
}

.c-0 {
  font-weight: bold;
  text-align: center;
  color: #b1b2b1
}

#adhesion-box {
  font-size: .8rem;
  /* margin: auto;
  padding-top: 10% */
}

#go-button-prem {
  font-size: .2em;
  background-color: #b3213d !important;
  color: #ffe !important;
  margin-top: none
}

#menu-submit-button {
  width: 99.6%;
  height: 100%;
  padding: .2%;
  font-size: 2.2em;
  margin: 0;
  background: #005d7f;
  color: #fff;
  text-shadow: 1px 1px 12px #fff;
  font-family: Lobster
}

#menu-submit-button:hover {
  cursor: pointer;
  text-shadow: 1px 1px 12px #e82c0c
}

#menu-start-button, #menu-quit-button {
  display: block;
  width: 100%;
  margin: 0
}

.bg-danger.toastAnswerStatus,
.bg-success.toastAnswerStatus {
  left: 18vw !important;
  /* background: rgba(0, 0, 0, .5) !important; */
  background: rgba(255, 255, 255, 1) !important;
}

#toastRemainingValue {
  left: 20.5vw !important;
  background: rgba(255, 255, 255, 1) !important;
}

@media(max-width:767.98px) {
  #toastAnswerStatus {
    left: 20.5vw !important;
    background: rgba(255, 255, 255, 1) !important;
  }

  #toastRemainingValue {
    left: 20.5vw !important;
    background: rgba(255, 255, 255, 1) !important;
  }
}

/* Toast for online  */
/* On cache le status d'acceptation disponible par défaut dans le template useritem */
.toastAnswerStatus .status-item{
  display: none;
}

#search-opponent-dialog, #search-opponent-dialog table {
  width: 100%;
  margin: auto
}

#search-opponent-dialog table .userLogo, #search-opponent-dialog table .opponentLogo {
  width: 50px;
  height: 100px;
  font-size: 2.5em;
  margin: auto;
  text-align: center
}

#search-opponent-dialog table .userLogo {
  background: #feca40
}

#search-opponent-dialog table .opponentLogo {
  background: #fff;
  color: #005d7f;
  border: 1px dashed #005d7f
}

#search-opponent-dialog table .imgLoading {
  width: 20%;
  margin: auto
}

.ui-autocomplete-loading {
  background: white url("../../images/ui-anim_basic_16x16.gif") right center no-repeat
}

.ui-autocomplete {
  /* left: 0 !important; */
  list-style: none;
  z-index:10000000!important;
}

.remove-selected-opponent{
  font-size:.4rem;
}

.remove-selected-opponent:hover,
.remove-selected-opponent:focus{
  font-size: .4rem;
  background: rgba(220,53,69,.2);
  color: rgba(220,53,69,1)!important;
}

#button-container {
  /* width: 85%; */
  margin: auto
}

.ui-menu .ui-menu-item {
  /* background: #fff; */
  color: #005d7f
}

.ui-menu .ui-menu-item:hover {
  color: #e82c0c
}

.ui.item {
  opacity: .2;
  filter: Alpha(Opacity=20);
  border-radius: 5px;
  background: #fff
}

.ui-effects-transfer {
  border: 1px dotted black
}

.search-button-for-challenge-dual {
  width: 40%;
  float: right;
  background: #FFF;
  color: #005d7f;
  border: 1px solid #005d7f;
  padding: 4%;
  width: 34%;
  margin: auto;
  font-weight: bold
}

.quit-button-for-challenge-dual {
  width: 10%;
  float: left;
  /* background: #FFF; */
  /* color: #005d7f; */
  /* border: 1px solid #005d7f; */
  padding: 4%;
  width: 34%;
  margin: auto;
  font-weight: bold
}

.search-button-for-challenge-dual:hover, .quit-button-for-challenge-dual:hover {
  cursor: pointer;
  /* background: #005d7f;
  color: #fff */
}

.search-default-text {
  color: var(--bs-secondary)
}

#searchOpponent-menu {
  height: 100%;
  margin: 0
}

#searchOpponent-menu .search-box, #searchOpponent-menu .search-box-2 {
  margin-bottom: 2% !important;
  /* margin-top: 2% !important; */
  margin: auto;
  width: 40%;
  background: #fff
}

#searchOpponent-menu .search-box input, #searchOpponent-menu .search-box-2 input {
  padding: 2em;
  width: 94%;
  border: 1px solid #eae7e7
}

.selected-quizz-focus{
    background: #fffae9!important;
    width: 85%;
    font-weight: 100;
    font-size: small;
    /* font-family: Alfa Slab One; */
}

#searchOpponent-menu .results {
  /*margin-bottom: 4% !important;*/
  padding-top: 4%;
  min-height: 40px;
  width: 40%;
  margin: auto
}

#searchOpponent-menu li {
  margin: auto;
  margin-bottom: 1% !important;
  font-size: 1.1em;
  text-align: initial;
  font-weight: 500
}

.searchOpponent-menu .dropdown.bootstrap-select {
  width: 87%
}


/* Main search quizz*/

/* search box*/
.modal-search-box input::placeholder{
	color:#fff!important;
}

/* results */
.search-box-results{
	overflow-y: auto;
  max-height: 69vh;
	scrollbar-color: var(--qz-600) rgb(247, 225, 132, 0.05) !important;
  scrollbar-width: thin;
  transition: scrollbar-color 0.3s ease-out;
}
/*****************************/

.dynamic-figures-container {
  position: absolute;
  top: 15vh
}

.stats-deco {
  width: 143%;
  height: 130%;
  background: linear-gradient(88deg, #42a5f5, #2196f3);
  position: absolute;
  left: -237px;
  top: -28px;
  z-index: -1;
  border-radius: 50%;
  border: 4px solid #ffeb3b
}

.display-quizz-stats, .find-opponent-button {
  font-size: 1em
}


.display-quizz-stats:hover, .find-opponent-button:hover {
  cursor: pointer;
  color: #ff530d
}




/* WAITING ROOM - ENHANCED UI */

/* Theme Colors for Waiting Room */
:root {
  --waiting-room-gradient-start: #d72020;
  --waiting-room-gradient-end: #a24b4b;
  --waiting-room-button-gradient-start: #f093fb;
  --waiting-room-button-gradient-end: #f5576c;
  /* Dark mode variants (optional, used when prefers-color-scheme: dark) */
  --waiting-room-dark-gradient-start: #1a202c;
  --waiting-room-dark-gradient-end: #2d3748;
  --waiting-room-dark-card-bg: rgba(45, 55, 72, 0.6);
}

/* Main waiting room container with gradient background */
.waiting-room {
  background: linear-gradient(135deg, var(--waiting-room-gradient-start) 0%, #baa0a014 45%);
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: waitingRoomFadeInScale 0.5s ease-out;
  position: relative;
  overflow: hidden;
}

/* Animated background overlay */
.waiting-room::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: waitingRoomRotate 20s linear infinite;
  pointer-events: none;
}

/* Enhanced icon container */
.waiting-room-icon {
  animation: waitingRoomBounceIn 0.8s ease-out;
  margin: 1rem auto !important;
  position: relative;
  z-index: 1;
}

.waiting-room-icon .fas,
.waiting-room-icon .fa {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: waitingRoomPulse 2s ease-in-out infinite;
}

/* Enhanced message styling */
.waiting-room-message {
  color: #fff !important;
  font-weight: 100 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: waitingRoomSlideInFromTop 0.6s ease-out;
  margin: 1.5rem auto !important;
  position: relative;
  z-index: 1;
}

/* Session info cards */
.waiting-room-quizz-title {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 12px !important;
  padding: 1rem 1.2rem !important;
  margin: 0.5rem auto !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* border: 4px solid rgba(255, 255, 255, 0.2) !important; */
  transition: all 0.3s ease;
  animation: waitingRoomSlideInFromLeft 0.7s ease-out;
  position: relative;
  z-index: 1;
}

.waiting-room-quizz-title:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Participants container with glassmorphism */
.waiting-room-quizz-participants {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 16px !important;
  /* border: 4px solid rgba(255, 255, 255, 0.3) !important; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  padding: 1.5rem !important;
  animation: waitingRoomSlideInFromBottom 0.8s ease-out;
  position: relative;
  z-index: 1;
  min-height: 150px;
}

/* Participants list container */
.participants-list-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  /* min-height: 80px !important; */
  padding: 10px 0 !important;
  /* max-height: 200px !important; */
  overflow-y: auto !important;
  min-height: 125px !important;
  max-height: 250px !important;
}

/* Enhanced player cards */
.waiting-room .online-multi-player-item-container {
  float: none !important;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: waitingRoomSlideInParticipant 0.5s ease-out;
  position: relative;
  overflow: hidden;
  min-width: 90px;
  max-width: 120px;
  height: 91.2px;
}

.waiting-room .online-multi-player-item-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--waiting-room-gradient-start), var(--waiting-room-gradient-end));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.waiting-room .online-multi-player-item-container:hover::before {
  transform: scaleX(1);
}

.waiting-room .online-multi-player-item-container:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  background: rgba(255, 255, 255, 1);
}

/* Hide answer status in waiting room */
.waiting-room .online-multi-answer-status-item {
  display: none;
}

/* Enhanced user picture container */
.waiting-room .user-picture-container {
  margin-bottom: 8px;
  position: relative;
}

.waiting-room .user-picture-container img,
.waiting-room .no-picture-icon {
  border: 3px solid rgba(102, 126, 234, 0.3) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease;
}

.waiting-room .online-multi-player-item-container:hover .user-picture-container img,
.waiting-room .online-multi-player-item-container:hover .no-picture-icon {
  border-color: var(--waiting-room-gradient-start) !important;
  transform: scale(1.1);
}

/* Enhanced name styling */
.waiting-room .name-item {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: #f1f6ff !important;
  margin-top: 5px !important;
  text-align: center;
  transition: color 0.3s ease;
}

.waiting-room .online-multi-player-item-container:hover .name-item {
  color: var(--waiting-room-gradient-start) !important;
}

/* Loading spinner enhancement */
.waiting-room .spinner-border {
  width: 3rem !important;
  height: 3rem !important;
  border-width: 0.3rem !important;
  filter: drop-shadow(0 2px 8px rgba(255, 193, 7, 0.5));
  /* animation: waitingRoomRotate 1s linear infinite, waitingRoomPulse 2s ease-in-out infinite; */
}

/* Enhanced start button */
.waiting-room-start-session-button {
  animation: waitingRoomSlideInFromBottom 0.9s ease-out;
  position: relative;
  z-index: 1;
}

.waiting-room-start-session-button button {
  background: linear-gradient(135deg, var(--waiting-room-button-gradient-start) 0%, var(--waiting-room-button-gradient-end) 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: white !important;
}

.waiting-room-start-session-button button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.waiting-room-start-session-button button:hover::before {
  width: 300px;
  height: 300px;
}

.waiting-room-start-session-button button:not([disabled]):hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(245, 87, 108, 0.5) !important;
}

.waiting-room-start-session-button button:not([disabled]):active {
  transform: scale(var(--qz-press-scale));
}

.waiting-room-start-session-button button[disabled] {
  background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Enhanced alert info for participants */
.waiting-room .alert-info {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.waiting-room .alert-info .fas,
.waiting-room .alert-info .fa {
  animation: waitingRoomPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Animations */
@keyframes waitingRoomFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes waitingRoomSlideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes waitingRoomSlideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes waitingRoomSlideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes waitingRoomSlideInParticipant {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes waitingRoomBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes waitingRoomPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes waitingRoomRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes waitingRoomFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .waiting-room {
    padding: 1.5rem !important;
  }
  
  .waiting-room-quizz-title {
    font-size: 0.75rem !important;
    /* padding: 0.6rem 1rem !important; */
  }
  
  .waiting-room .online-multi-player-item-container {
    min-width: 75px;
    max-width: 100px;
  }
  
  .waiting-room-start-session-button button {
    padding: 1rem 2rem !important;
    font-size: 0.9rem !important;
  }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
  .waiting-room {
    background: linear-gradient(135deg, var(--waiting-room-dark-gradient-start) 0%, var(--waiting-room-dark-gradient-end) 100%);
  }
  
  .waiting-room-quizz-title {
    background: var(--waiting-room-dark-card-bg);
  }
}

/* ************************** */

/* PLAYGROUND */
.dialogBox-playground{
  padding:0;
  left:0!important;
  border:none!important;
  border-radius: 0!important;
  height:100vh!important;
  z-index:1050!important;
}

@media (max-width: 576px) {
  .dialogBox-playground{
    margin:0px!important;
  }
}

.playground-box{
  padding: 0 !important;
  /* height:100vh!important; */
  min-height:100vh!important;
}
.dialogBox-playground.ui-widget.ui-widget-content{
  border: none!important;
  padding: 0;
  background: #042443!important;
}
.dialogBox-playground .ui-dialog-titlebar{
  display: none!important;
}
/* END PLAYGROUND */

/* PAYGROUND BOTTOM */
#playgroundBottomContent .quizz-elements{
  font-size:.7rem!important;
  color: var(--quizz-playground-dynamic-2)!important;
}

#playgroundBottomContent .quizz-elements .element-title{
  font-size:.7rem!important;
  font-weight: 600!important;
  font-family: cursive!important;
}

#playgroundBottomContent .quizz-elements .ripple{
    color: var(--quizz-color-dynamic-2) !important;
    background: var(--quizz-color-dynamic-1)!important;
}

/* Smooth collapse transitions */
#playgroundBottomContent {
  transition: height 0.35s ease, opacity 0.25s ease;
}

#playgroundBottomContent.collapsing {
  transition: height 0.35s ease;
}

/* Animated collapse trigger icon */
.collapse-trigger-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.collapse-trigger-icon:not(.collapsed) {
  transform: rotate(180deg);
}

.collapse-trigger-icon:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.collapse-trigger-icon:not(.collapsed):hover {
  transform: rotate(180deg) scale(1.1);
}

/* Enhanced session info cards */
.quizz-session, .quizz-title, .quizz-question-num,
.quizz-possible-answers, .remaining-attempts {
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quizz-session:hover, .quizz-title:hover, .quizz-question-num:hover,
.quizz-possible-answers:hover, .remaining-attempts:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#playgroundBottom{
  max-width: 615px!important;
  margin: auto;
  padding-top: 2px!important;
  padding-right: var(--qzr-safe-right)!important;
  padding-bottom: max(8px, var(--qzr-safe-bottom))!important;
  padding-left: var(--qzr-safe-left)!important;
}
/* END PLAYGROUND BOTTOM */

#recordSessionInfoInHistory .stepInfoItem span {
  margin: 1% 1% 5% 5%;
  font-size: .8em
}

.stepInfoItemHeader {
  font-size: .8em
}

.c-2 {
  color: var(--quizz-option-color);
  /* font-size: 2.5em; */
  font-family: 'Alfa Slab One' !important
}

.c-1 {
  color: var(--quizz-option-color);
  font-weight: bold;
  font-family: 'Alfa Slab One' !important;
  font-size: .8em !important;
  display:none;
}

.quizz-option-color{
  color: var(--quizz-option-color);
}

.stepInfoItem a {
  color: #005d7f
}

.stepInfoItem {
  color: #005d7f
}

@media(max-width:767.98px) {
  .stepInfoItem {
    width: 100%
  }
}

.good_answer {
  color: #fff;
  font-size: 1em;
  border: 1px solid #f7f7f7
}

.bad_answer {
  color: #bd1e00;
  font-size: 1em;
  border: 1px solid #f7f7f7
}

#question-and-prop {
  font-family: 'Roboto';
  min-height: 100% !important;
  padding-top: 0 !important;
  margin: auto;
  margin-bottom: 0 !important;
  overflow: hidden;
  vertical-align: top
}

#userSessionInfo {
  font-size: 3em;
  display: none;
  text-align: center;
  /* position: absolute;
  top: 14vh;
  left: 36vw */
}



/*LOAD NEXT STEP*/
/* @media(min-width:530px) {*/
  .modal-load-next-step, .load-next-step-displayer .modal-content{ 
    width : 97%!important;
    border-radius: 1rem!important;
    transition: all 0.3s ease-in-out;
  }
/*} */

.load-next-step-displayer .modal-dialog {
  transition: transform 0.3s ease-out;
}

.load-next-step-displayer.fade .modal-dialog {
  transform: scale(0.9);
}

.load-next-step-displayer.show .modal-dialog {
  transform: scale(1);
}

.load-next-serie-msg{
  font-size:5rem;
  color:var(--bs-warning)!important;
  animation: pulse-warning 1.5s ease-in-out infinite;
  /* color : #ffd360; */
  /* text-shadow: 4px 4px 0 #ffc107, 4px -4px 0 #ffc107, -4px 4px 0 #ffc107, -4px -4px 0 #ffc107, 4px 0 0 #ffc107, 0px 4px 0 #ffc107, -4px 0 0 #ffc107, 0px -2px 0 #ffc107, 2px 2px 4px; */
}

@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}


.moadal-dialog-showcase .ripple{    
   /* Définie dans main-dev-front.js/playgroundTheme.themmes_ */
    color: var(--quizz-color-dynamic-2) !important;
    /* Définie dans main-dev-front.js/playgroundTheme.themmes_ */
    background: var(--quizz-color-dynamic-1);
}


.start-solo-from-showcase{
  /* background:#ffd360!important; */
  font-family:'Alfa Slab One';
  font-size:1em;
  font-weight:100!important;
}

.start-solo-from-showcase:hover{
  cursor:pointer;
}

.start-solo-from-showcase .start-btn-text{
  font-family: 'Alfa Slab One';
  font-weight: 100;
}

/* @media(min-width:992px) {
  .userSessionInfo-container{
    position: fixed;
    width: 84%;
    top: 3%;
    left: 0%;
  }
} */



@media(max-width:850px) {
  #userSessionInfo {
    font-size: 1.7em;
    display: none;
    width: 100% !important;
    text-align: center;
    /* position: inherit;
    top: 23vh;
    left: 0vw;
    margin-top: 18.5vh */
  }
}

#word_shuffled_generated{
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--playground-color)!important;
}

#word_shuffled_generated::-webkit-scrollbar {
  width: 20px;
}

#word_shuffled_generated::-webkit-scrollbar-track {
  background-color: rgb(247,225,132,0.05);
  border-radius: 100px;
}

#word_shuffled_generated::-webkit-scrollbar-thumb {
  border-radius: 50px;
  border: 5px solid transparent;
  background-clip: content-box;
  background-color: var(--playground-color)
}

#word-box {
  height: 550px !important;
  margin: auto;
  z-index: 1
}

@media(max-width:767.98px) {
  #word-box {
    margin-top: 2vh;

  width: 100%;
  min-height: 100% !important;
  height: 100% !important;
  text-align: center;
  overflow: hidden;
  padding-bottom: 2%;
  margin: auto
  }

  #word_shuffled_generated {
    width: auto !important;
    height: auto !important;
    text-align: center;
    overflow: hidden;
    top: 8vh;
    left: -30vw
  }

  #word_shuffled_generated.word_shuffled_anag {
    left: -20vw !important
  }

  #word_shuffled_generated.word_shuffled_anag .letter-self {
    padding-left: .1em !important;
    padding-right: .1em !important
  }
}

#userSessionInfoHistory {
  width: 100%
}

#leftmain-box {
  font-family: lobster;
  min-height: 100%;
  margin-right: 2%
}

#rightmain-box {
  font-family: lobster;
  min-height: 100%;
  display: none;
  margin-right: 4%
}

.userSessionTrackMapContainerTxt, #opponentSessionTrackMapContainer .userSessionTrackMapContainerTxt, .cwih {
  font-size: .5em;
  color: #654b24;
  margin-left: 21%;
  text-decoration: underline
}

table#userSessionTrackMap, table#opponentSessionTrackMap {
  margin-left: 20%;
  width: 80%
}

table#userSessionTrackMap td, table#opponentSessionTrackMap td {
  width: 10%;
  text-align: center;
  font-size: .5em;
  color: #fff
}

#trackmap-box {
  font-family: lobster;
  min-height: 100%;
  display:none!important;
}

@media(max-width:767.98px) {
  #trackmap-box, #trackmap-box2 {
    display: none
  }
}

#trackmap-box2 {
  font-family: lobster;
  margin-right: 1%;
  min-height: 100%;
  display:none!important;
}

#trackmap-box .rt, #trackmap-box2 .rt {
  padding: 2%;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  color: #ff5722!important;
  font-family: 'verdana' !important;
  font-size: .8rem;
}

#trackmap-box .emptyTd, #trackmap-box2 .emptyTd {
  color: #b1b2b1 !important
}

#trackmap-box .s-level, #trackmap-box2 .s-level {
  font-family: lobster;
  color: #fff !important
}

.challenge-requested-dialog {
  font-size: x-small;
  font-family: Roboto;
  /* text-align: left; */
}

.challenge-requested-dialog .title{
  font-size: x-small;
  /* background: yellow; */
  text-align: center;
}

.online-sync-dialog {
  color: #102033 !important;
}

/* On cache le status d'acceptation disponible par défaut dans le template useritem */
.online-sync-dialog .status-item{
  display:none;
}
/* ********************************** */

/* ********************************** */
/* On affiche uniquement les 4 premiers adversaires */
/* Pour voire les autres, il faut ouvrir la popover */
#opponent-elements-multi .online-multi-player-item-container:nth-of-type(1n+6){
  display: none;
} /* should match your case */

#opponent-elements-multi .line-item-container{
  padding: 4px;
}

.user-picture-container img{
  border: none!important;
}
/* ************************************************ */

.online-item.score-item{
 font-size: 0.7rem!important;
 font-family: 'Alfa Slab One';
}

.online-start-count-down, .countdown-online-start-box {
  margin: auto;
  font-size: 1.6rem;
  font-weight: 700;
  font-family:'Alfa Slab One';
  margin-top: 2% !important;
  text-align: center;
  /* color: #005d7f !important; */
}

/* Pour celui qui émet la requête de recherche */
.countdown-online-start-box-sent{
  margin: auto;
  font-size: 1.6rem;
  font-weight: 700;
  font-family:'Alfa Slab One';
  margin-top: 2% !important;
  text-align: center;
  /* color: #005d7f !important; */
}

/* .challenge-requested-dialog, .challenge-requested-dialog-2 {
  width: 100%
} */


/* FORCING DU STYLE DE LA POPOVER */
.popover .popover-body .status-item{
  display:none;
}
.popover .popover-body img{
  width:40px;
  height:40px;
}
.popover .popover-body .no-picture-icon-container{
  width:40px;
  height:40px;
}
.popover .popover-body .no-picture-icon{
  font-size: 2rem;
  position: relative;
	bottom:.33em;
	width:40px;
	height:40px;
}
.popover .popover-body .online-item{
  font-size:.5rem;
  text-align: center;
}
.popover .popover-body .line-item-container.online-multi-player-item-container {
    /* float: left; */
    display:inline-block;
    padding-left: 4px!important;
    padding-right: 4px!important;
}

/* ************** END POPOVER FORCE **************** */
.popup-container {
  font-family: 'Roboto';
  font-weight: 200;
  font-size: x-small
}

#countdown-box {
  /* visibility: hidden; */
  font-family: 'Alfa Slab One';
  width: 50px;
  /* margin-left: 3em !important; */
  text-align: center;
  /* color: hsl(0deg 0 100%); */
  color:#ff5722;
  z-index: 900
}

#countdown-box .item{
  position: absolute;
  top: -54px;
}

#countdown-box .item h2{
  text-align: center;
  position: relative;
  top: 76px;
  /* left: 23% !important; */
  font-size: 1.8rem;
}

@media(max-width:767.98px) {
  #countdown-box {
    width: 50px;
    margin-left: .5rem !important;
    text-align: center;
    color:#ff5722;
    /* z-index: 900; */
    /* position: absolute; */
    /* top: -3vh;
    left: 32vw */
  }
}

@media(min-width:1200px) {
  .fs-1 {
    font-size: 3.5rem !important
  }
}

/*#remainingAttempts, */#remainingAttempts2 {
  font-family: 'Alfa Slab One' !important
}

/*.remaining-attempts-label, */.remaining-attempts-label-opponent {
  font-size: xx-small;
  font-family: 'Roboto' !important
}

.common-label {
  font-size: xx-small;
  font-family: 'Roboto' !important
}

.common-value {
  font-size: 3.4rem !important
}

/*.remaining-attempts-value, */.remaining-attempts-value-opponent {
  font-weight: 800;
  font-family: 'Alfa Slab One' !important;
  color: #ff5722 !important;
  text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px;
}

/*.remaining-attempts-value, */
/* .remaining-attempts-value-opponent { */
  /* color: #ff5722 !important */
/* } */

@media(max-width:767.98px) {
  /* #remainingAttempts { */
    /* font-family: verdana;
    position: absolute;
    top: 10vh;
    left: -2vw;
    font-size: .4rem;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important */
  /* } */

  /*.remaining-attempts-value.common-value, */.remaining-attempts-value-opponent.common-value {
    font-size: .8rem !important
  }

  /*.remaining-attempts-label, */
  /* .remaining-attempts-label-opponent {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    font-size: xx-small;
    margin-right: -4vw;
  } */

  /*.remaining-attempts-value, */.remaining-attempts-value-opponent {
    font-size: .8rem !important
  }



  #opponentBestScore {
    font-family: verdana;
    position: absolute;
    top: 11vh;
    right: 25vw;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important
  }

  #userBestScore .common-label {
    color: #0ff;
    display: block !important;
    margin-top: 28px;
    margin-left: -8vw
  }

  #opponentBestScore .common-label {
    margin-top: 17px;
    display: block !important
  }
}

@media(max-width:767.98px) {
  #remainingAttempts2 {
    font-family: verdana;
    position: absolute;
    top: 9.7vh;
    right: -4vw;
    font-size: .4rem;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important
  }

  /*.remaining-attempts-label, */.remaining-attempts-label-opponent {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  font-size: .4rem;
  position: absolute;
  top: 19px;
  right: 2.6vw;
  }
}

#bbleft-box {
  display: none
}



.bbleft-countpoint-header {
  width: 100%;
  margin-bottom: 5px;
  margin-left: 17%;
  text-align: left
}

table.stat-board {
  border-collapse: no-collapse;
  width: 75%;
  font-family: lobster
}

table.stat-board td {
  padding: 2%;
  font-weight: bold;
  box-shadow: 1px 1px 12px #fff
}

#opp-statistics-board, #user-statistics-board {
  min-height: 80%;
  vertical-align: top
}

.stat-board-1 {
  font-size: xx-small;
  font-weight: 700;
  font-family: 'Roboto' !important;
  /* position: absolute;
  top: 8px; */
}

/* VAINQUEUR DE LA PARTIE */
#winner .ranking-message{font-family: 'lobster';}

/* VAINQUEUR DE LA PARTIE */
#looser .ranking-message{
  font-family: 'Alfa Slab One';
}

.playground-user-name{
  padding: 0!important;
  font-weight: 100;
  /* position: absolute; */
  /* margin-top: 14px; */
  /* margin-right: -11px; */
  /* transform: rotateZ(-90deg); */
}
.playground-opp-name{
  /* margin-top: 14px; */
  /* margin-left: -6px; */
  /* transform: rotateZ(-90deg); */
  font-family: 'Alfa Slab One'!important;
  font-weight: 100;
}

@media(max-width:767.98px) {

  #current-user-name__{
    left:-8px;
  }

  #opponent-name__{
    right: -7px;
  }
}

.bg-light.no-picture-icon-container {
  background-color: rgba(255, 255, 255, 255,.1)!important;
  border:none!important;
}

.stat-board-2 {
  font-size: x-small;
  font-family: 'Alfa Slab One';
  text-align: center;
  font-weight: 100;
  /* text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px; */
  /* position: relative;
  top: 7px;
  left: 44px; */
}



@media(max-width:767.98px) {
}

table.stat-board td span {
  color: #7f5959
}

/* On cache le statut associé à chaque image utilisateur lors du mode multi */
#playground .online-multi-answer-status-item{
  display:none;
}

@media(min-width:767.98px) {
  #opponent-elements-multi{
    /* position: absolute; */
    /* bottom: 9vh; */
    /* left: 36px; */
    background: #19875421;
    border-width: 5px;
    border-color: rgba(255, 0, 0, 0.2);
    border-style: solid;
    border-radius: 10px!important;
  }
}


#livePoints2 {
  font-size: x-small;
  font-family: 'Alfa Slab One';
  text-align: center;
  font-weight: 100;
  /* text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px; */
  /* position: relative;
  top: 7px;
  right: 70%; */
}
@media(max-width:767.98px) {

  #bbleft-countpoint2.stat-board-2 {
    color: var(--quizz-option-color) !important;
    font-size: 1.4em !important;
    left: 2vw;
    top: -8px;
    text-shadow: none;
  }

  /* MODE MULTI JOUEURS : JOEURS DISPONIBLES */
  #opponent-elements-multi{
    position: fixed;
    /* top: 0; */
    right: 30px;
    width: 35vw;
    z-index: 0;
  }
}



.effect3d {
  text-shadow: 1px 1px 12px #fff
}

.effect3d_new {
  text-shadow: 1px 1px 12px #000
}

/* Stats solo*/
#endOnlineGame{
	overflow-y:auto;
  overflow-x:hidden;
}

/* Permet d'empêcher que le bouton "Refaire Une Partie" ne soit caché */
@media(min-width:767.98px) {
  #playground .endOnlineGame{
    margin-top: -25vh!important;
  }
}

#winner {
  font-weight: bolder;
  font-size: 4.2em;
  color: #247308;
  font-family: fantasy
}

#looser {
  font-weight: bolder;
  font-size: 4.2em;
  color:var(--bs-indigo);
  font-family: fantasy
}

#final-statistics {
  /* width: 95%; */
  min-height: 99% !important;
  margin: auto;
  margin-top: 1% !important
}

#final-statistics .header td {
  font-size: 2em;
  font-weight: 800;
  text-align: center
}

#final-statistics .user-box, #final-statistics .opponent-box {
  color:  var(--bs-indigo)!important;
  /* font-size: 1.5em!important; */
  /* text-shadow: 1px 1px 12px #fff !important */
  font-family: 'Alfa Slab One';
}

#final-statistics .header {
  /* color#fff !important; */
  /* text-shadow: 1px 1px 12px #fff !important */
  border-bottom: 2px solid;
}

/*#final-statistics .left-box,*/ #final-statistics .middle-box/*, #final-statistics .right-box*/{
  /* color: #247308!important; */
  border-bottom: 1px dashed #c8d0dc;
  font-size: small;
  font-family: 'Alfa Slab One' !important;
  /* text-align: center; */
  /* text-shadow: 1px 1px 0 #ffbf00, 1px -1px 0 #ffbf00, -1px 1px 0 #ffbf00, -1px -1px 0 #ffbf00, 1px 0 0 #ffbf00, 0px 1px 0 #ffbf00, -1px 0 0 #ffbf00, 0px -1px 0 #ffbf00, 0px 0px 1px */
}

/* @media(max-width:767.98px) { */
  #final-statistics .left-box,#final-statistics .middle-box, #final-statistics .right-box{
    font-size:1.5rem!important;
    text-align: center;
  }
  #final-statistics .user-box, #final-statistics .opponent-box{
    font-size:large!important;
  }
/* } */

#final-statistics .left-box, #final-statistics .right-box {
  font-size: 1.5rem!important;
  color: var(--bs-orange);
  /* font-weight: 700; */
  font-family: 'Alfa Slab One';
}

#final-statistics .color-red {
  color:var(--bs-indigo)!important;
  /* font-size: small; */
  /* text-shadow: 1px 1px 12px #ff530d !important; */
  /* font-family: 'Alfa Slab One' !important; */
}

#final-statistics .color-green {
  color: var(--bs-success) !important;
  /* font-size: small; */
  /* text-shadow: 1px 1px 12px #8ac575 !important; */
  /* font-family: 'Alfa Slab One' !important */
}

#final-statistics .options {
  padding: auto
}

#final-statistics .restart-button, #final-statistics .close-button {
  padding: 4%;
  width: 40%;
  /* font-weight: bold; */
  font-size: 1.5rem;
  /* color: #fff !important; */
  text-align: center;
  text-shadow: none;
  /* font-family: roboto; */
  /* color:#ff8c9d!important; */
  /* border-radius: 16px; */
  /* text-shadow: 2px 2px 0 var(--bs-primary), 2px -2px 0 var(--bs-primary), -2px 2px 0 var(--bs-primary), -2px -2px 0 var(--bs-primary), 2px 0 0 var(--bs-primary), 0px 2px 0 var(--bs-primary), -2px 0 0 var(--bs-primary), 0px -2px 0 var(--bs-primary), 1px 1px 2px */
}

@media(max-width:767.98px) {
  #final-statistics .restart-button, #final-statistics .close-button {
    display: block;
    width: auto;
    margin-bottom: 4%;
    padding: 7%;
    /* font-family: roboto; */
  }
}

#final-statistics .close-button {
  margin-left: 2%
}


#final-statistics .restart-button:hover, #final-statistics .close-button:hover {
  cursor: pointer;
  font-weight: 100!important;
  /* color: #fff !important */
}

#instant-dialog-container {
  display: none;
  font-size: 8em;
  position: absolute;
  left: 25vw;
  width: 100vw;
  z-index: 999999999999999999999;
  text-align: center;
  background-repeat: no-repeat !important
}

@media(max-width:767.98px) {
  #instant-dialog-container {
    font-size: 6.5em;
    top: 20% !important;
    left: -10vw;
    width: 120vw;    
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;

  }
}

.instant-dialog-1 {
  color: var(--bs-primary);
  background-repeat: no-repeat !important
}

.instant-dialog-2 {
  color: var(--bs-warning);
  font-size: 10em !important;
  background-repeat: no-repeat !important
}

.instant-dialog-3 {
  color: #ff530d;
  background-repeat: no-repeat !important
}

.instant-dialog-4 {
  color: #a9e67e;
  background-repeat: no-repeat !important
}

.instant-dialog-5 {
  color: #a9e67e;
  text-shadow: 2px 2px 0 #dc3545, 2px -2px 0 #dc3545, -2px 2px 0 #dc3545, -2px -2px 0 #dc3545, 2px 0 0 #dc3545, 0px 2px 0 #dc3545, -2px 0 0 #dc3545, 0px -2px 0 #dc3545, 1px 1px 2px;
  background-repeat: no-repeat !important
}

.instant-dialog-7{
  color : #fdbdd2!important;
  /* text-shadow: 2px 2px 0 #dcce38, 2px -2px 0 #dcce38, -2px 2px 0 #dcce38, -2px -2px 0 #dcce38, 2px 0 0 #dcce38, 0px 2px 0 #dcce38, -2px 0 0 #dcce38, 0px -2px 0 #dcce38, 1px 1px 2px; */
}

.instant-dialog-7 .instant-congratulations{
  color : #f7e77e!important;
  font-size: 4.5em!important;
}

.instant-dialog-7 .instant-failure{
  /* color : #f7e77e!important; */
  font-size: 4.5em!important;
}

.instant-dialog-7 .instant-failure.sub{
  color : #ffc93c!important;
  font-size: .5em!important;
  text-shadow: 2px 2px 0 #dc3545, 2px -2px 0 #dc3545, -2px 2px 0 #dc3545, -2px -2px 0 #dc3545, 2px 0 0 #dc3545, 0px 2px 0 #dc3545, -2px 0 0 #dc3545, 0px -2px 0 #dc3545, 1px 1px 2px;
  background-repeat: no-repeat !important
}


#instant-dialog-container .good-answer-image, #instant-dialog-container .bad-answer-image {
  background-repeat: no-repeat !important;
  background-repeat: no-repeat !important
}

.ajax-loader {
  margin-left: 35%;
  margin-top: -4%;
  font-size: .2em;
  color: #6b583b;
  position: fixed;
  z-index: 10000
}

#homepage-dynamic {
  width: 100%;
  height: 100%
}

.live-informations, .live-stats {
  height: 90%;
  min-height: 90% !important;
  margin-bottom: 0;
  padding: 0 2% 4% 2%;
  font-size: .9em;
  width: 100%
}

.label-title {
  font-weight: bold;
  margin-left: 30%;
  text-align: center;
  color: #fff;
  padding: 2%
}

.best-score .label-title {
  color: #ff530d;
  border-bottom: 4px solid #ff530d;
  float: left;
  margin-left: 0
}

.nb-quizz .label-title {
  color: #ff530d;
  border-bottom: 4px solid #ff530d;
  float: left;
  margin-left: 0
}

.live-informations .infos {
  background: #ff530d;
  padding: 4% 2% 4% 2%;
  vertical-align: top;
  text-align: left;
  height: 100%;
  min-height: 100% !important
}

.infos .mega-octicon {
  text-shadow: 1px 1px 12px #fff;
  font-size: 1.5em
}

.infos .details {
  font-family: Lobster;
  margin-bottom: 4%;
  color: hsl(9deg 83% 68%)
}

.infos .mega-octicon {
  color: #e82c0c;
  padding-bottom: 1%
}

.options-delimiter {
  margin: .5rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: .08;
  border-color: #1270fd
}

.option-social {
  /* font-size: x-large !important;
  width: 49px;
  height: 49px */
}

.option-social-counter {
    font-size: .5rem!important;
    font-family: 'Roboto';
    position: relative;
    top: -29px;
    left: -9px;
    height: 4px;
    width: 4px;
    padding: 4px 7px !important;
    border-radius: 50%;
    background: #ffba00;
}

.best-score, .nb-quizz, .nb-categories {
  color: #000;
  font-size: .7em;
  padding: 2% 1% 1% 1%;
  margin-top: .5%
}

.nb-quizz table, .best-score table {
  border-collapse: collapse
}

.nb-quizz .rank, .best-score .rank {
  border-top: 0;
  border-left: none
}

#presentation {
  clear: both;
  min-height: 100% !important;
  height: 100% !important;
  background: #fff !important;
  overflow: hidden;
  padding: .5%
}

#presentation table {
  width: 100%
}

#p00 {
  text-align: left;
  color: hsl(210deg 27% 53%);
  font-family: "Times New Roman";
  min-height: 95% !important;
  height: 95% !important;
  overflow: hidden !important;
  padding-bottom: 17vh !important
}

#p11 {
  text-align: left;
  color: #f4f4f4;
  font-size: 1.2em;
  min-height: 95% !important;
  height: 95% !important;
  float: right;
  overflow: hidden
}

#p00 .text {
  font-size: 1.5em;
  font-family: lobster;
  font-weight: thinner
}

#p00 .text.card {
  border: 0
}

#p1-left, #p1-right {
  width: 48%;
  float: left;
  margin: auto;
  color: #FFF
}

#p1-left:hover {
  color: #fff !important;
  cursor: pointer
}

#p1-left .mega-octicon, #p1-right .mega-octicon {
  margin: auto
}

#p1-left .title, #p1-right .title {
  font-size: 1em !important
}

a.pres-stick-1, .pres-stick-2, a.pres-stick-3 {
  border: 1px solid #f1f1f1;
  margin: auto;
  margin-bottom: 1% !important;
  padding: 8%;
  display: block;
  font-size: 1.3em;
  text-align: left;
  color: #2c3e50;
  font-family: "Times New Roman"
}

a.pres-stick-3 {
  background: #e82c0c;
  color: #fff;
  text-decoration: none;
  border: 0
}

.pres-stick-3:hover {
  background: 0;
  color: #e82c0c;
  border: 1px solid #e82c0c
}

.pres-stick-1:hover, .pres-stick-2:hover {
  cursor: pointer;
  background: hsl(207deg 90% 54%) !important;
  color: #fff !important
}

#current-displayed-categories {
  text-transform: lowercase;
  overflow: hidden;
  width: 100%;
  border-collapse: collapse
}

#current-displayed-categories .mega-octicon {
  font-size: 4.2em !important
}

.cat-item-container .options {
  display: none;
  width: 100%;
  min-height: 2em !important;
  height: 2em !important
}

#categories {
  /* width: 100%; */
  max-width: 560px;
  margin: auto;
  min-height: 85vh !important;
  height: auto !important;
  overflow: hidden !important;
  margin-top: 0;
  padding-bottom: 2%;
  animation: fadeIn 0.5s ease-in;
}

#categories .cat-item {
  /* width: 100%; */
  /* font-size: 1.2rem; */
  /* font-weight: 100!important; */
  /* font-family: 'Alfa Slab One' !important; */
  /*padding: 1% 0 1% 1%;*/
  /* text-transform: capitalize; */
}


#categories .cat-item img{
  height: 124px!important;
}

#categories .cat-item-icon-container {
  height: 167.67px!important;
  /* background: linear-gradient(135deg, var(--bs-primary, #007bff) 0%, var(--bs-info, #17a2b8) 100%); */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#categories .cat-item-fa-icon .fas{
  font-size: 3.8rem!important;
  color: var(--qz-text) !important;
}

#categories .cat-item-fa-icon {
  height: 8rem;
  width: 8rem;
}

@media(max-width:767.98px) {
  #categories .cat-item-fa-icon {
    font-size: 4rem!important;
  }
}

@media(max-width:767.98px) {
  #categories .cat-item {
    font-size: 1.2em
  }
}

.cat-item-sub-label{
  font-size: .8rem!important;
  font-weight: 700;
  font-family: 'Roboto';
}

@media(max-width:767.98px) {
  .cat-item-sub-label{
    font-size: .8rem!important;
  }
}


@media(max-width:767.98px) {

}

#categories .cat-item:hover {
  cursor: pointer
}

#categories .cat-item-container:hover, #categories .cat-item:hover {
  cursor: pointer
}

#categories .access-cat-item, #categories .generate-auto-quizz, #categories .generate-auto-quizz-dual, #categories .cat-ranking, #categories .permalink-cat-item {
  padding: 3% 1% 3% 1%;
  margin-bottom: .4rem !important;
  font-size: .7rem;
}

@media(max-width:767.98px) {
  #categories .access-cat-item, #categories .generate-auto-quizz, #categories .generate-auto-quizz-dual, #categories .cat-ranking, #categories .permalink-cat-item {
    padding: 1em .7em !important;
    width: 36vw;
    font-size: 1rem;
    margin-bottom: 0.4rem!important;
    text-align: center;
  }
}

#categories .generate-auto-quizz:hover, 
#categories .generate-auto-quizz-dual:hover, 
#categories .access-cat-item:hover, 
#categories .cat-ranking:hover, 
#categories .permalink-cat-item:hover,
#categories .permalink-cat-item:active {
  cursor: pointer;
  color: #fff
}

#categories .subtitle-category {
  font-size: .8em;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  /* background: #03a9f414 */
}

@media(max-width:767.98px) {
  #categories .subtitle-category {
    padding-top: 2%;
    padding-bottom: 2%
  }
}

/************* SWIPER SLIDER *********************/
/** MOST PLAYED **/
#categories-most-played-quizz .slick-prev,
#categories-most-played-quizz .slick-next{
 z-index:-1;
 display:none!important;
}

#categories-most-played-quizz .slick-prev:before,
#categories-most-played-quizz .slick-next:before{
 color: rgba(255, 26, 26, .15);
 font-size: xx-large;
}

#categories-most-played-quizz .slick-prev{
  left: 76%!important;
  width: 12px;
  z-index: 1;
  top: 151px;
}

#categories-most-played-quizz .slick-next{
  right: 5%!important;
  width: 12px;
  z-index: 1;
  top: 151px;
}

#categories-most-played-quizz .slick-dots li button:before{
  font-size:16px;
}

#categories-most-played-quizz .section-title{
  /* color: #ffc93c !important; */
  font-family: 'Alfa Slab One';
  font-size: .7rem;
  font-weight: 100;
}
/** END OF MOST PLAYED **/

/**************** BEST RANKED USERS ***********************/
#categories-best-ranked-users-home .slick-dots{
  display:none!important;
}
#categories-best-ranked-users-home .items-container{
  margin-bottom:0px!important;
}

#categories-best-ranked-users-home .slick-prev:before,
#categories-best-ranked-users-home .slick-next:before{
 color: #ff1a1a;
 font-size: xx-large;
 display:none!important;
}

#categories-best-ranked-users-home .slick-dots li button:before{
  font-size:16px;
}
/*  END OF BEST RANKED USERS*/
/********************************************************/

#categories-detail {
  /* width: 100%; */
  max-width: 560px;
  margin: auto;
  min-height: 100% !important;
  height: 100% !important;
  overflow: hidden;
  animation: fadeIn 0.5s ease-in;
}

#current-displayed-category-details {
  height: 100%;
  margin-top: 0;
  border-spacing: 1.2em
}

#current-displayed-category-details_filter {
  padding: 4px 46px
}

#current-displayed-category-details-empty {
  width: 70%;
  color: #7f5959;
  float: right;
  padding-top: 2px;
  border-collapse: collapse;
  margin-top: 2px
}

#current-displayed-category-details-header th {
  font-size: 1em !important;
  color: var(--bs-primary) !important;
  font-weight: bold !important;
  border-bottom: 0
}

#current-displayed-category-details td {
  font-size: 1em;
  text-align: left;
  border-radius: 86px
}

@media(max-width:767.98px) {
  #current-displayed-category-details td {
    font-size: .8em;
    text-align: left
  }
}

#current-displayed-category-details .octicon {
  font-size: .7em !important;
  font-weight: 500;
  padding: 1em;
  margin-bottom: .3em;
  width: auto !important;
  text-align: left
}
#current-displayed-category-details .title,
#favquizz .title,
#categories-detail-created .title,
.search-box-results .title
{
  font-size: .7em !important;
  font-weight: 500;
  padding: 1em;
  margin-bottom: .3em;
  width: auto !important;
  text-align: left
}

@media(max-width:767.98px) {
  #current-displayed-category-details .octicon {
    font-size: .7em !important;
    font-weight: 500;
    padding: 1em;
    /* width: 100% !important; */
    text-align: center
  }
  #current-displayed-category-details .title,
  #favquizz .title {
    font-size: .7em !important;
    font-weight: 500;
    padding: 1em;
    /* width: 100% !important; */
    text-align: center
  }
}

/* Pour quelle raison le bouton a t-il été masqué ?*/

#categories-detail-header .mega-octicon {
  text-align: center;
  font-size: 5em;
  text-shadow: 1px 1px 12px #fff
}


/* categories-detail-created */

#categories-detail-created{
  animation: fadeIn 0.5s ease-in;
}

.detail-item {
  cursor: pointer;
  /* padding-left: 1% */
}

.detail-item:hover, .find-opponent-button:hover, .watch-stats:hover {
  color: #ff530d
}

#current-displayed-category-details_filter input, .dataTables_filter input {
  padding: .5em;
  border: 1px solid var(--bs-primary) !important;
  border-radius: 20px !important
}

#current-displayed-category-details_info {
  display: none
}

.underline {
  color: var(--bs-dark) !important
}

.underline.sorting_1 {
  text-align: left !important
}

span.quizz-traing-desc-title, span.friends-desc-title {
  font-family: verdana;
  font-size: .7em;
  /* color: #090e21; */
  font-weight: 100!important;
}

span.friends-desc-title {
  font-size: .68rem;
}

.quizz-traing-desc-item, span.friends-desc-item {
  /* font-weight: 200; */
  font-size: .68rem;
  font-variant-caps: unicase;
}

.quizz-traing-desc-item-value, span.friends-desc-item-value {
  /* font-weight: 200; */
  color: var(--qz-muted);
  padding-left: 1em;
  /* font-style: italic; */
  font-size: .68rem;
}

.add-friend, .private-public, .friends-online-status {
  font-family: Roboto;
  font-weight: 100;
  cursor: pointer
}

.add-friend:hover, .add-friend:active, .add-friend:focus, .private-public:hover, .private-public:active, .private-public:focus, .friends-online-status:hover, .friends-online-status:active, .friends-online-status:focus {
  color: #fff !important
}

.dropdown-item.hover, .dropdown-item.focus, .dropdown-item.active, .dropdown-item:active {
  color: var(--bs-blue);
  text-decoration: none;
  background: none
}

.dropdown-item.hover, .dropdown-item.focus {
  background: rgba(0, 0, 0, .4) !important
}

.quizz-name .quizz-template-icon {
  font-size: 2.5rem;
}

.quizz-name, .quizz-name {
  padding: 1.5%;
  border-radius: 7px;
  /* background-color: rgb(79 209 197 / 49%) !important; */
  /* background-image: linear-gradient(45deg, #00000000, #00000000); */
  /* backdrop-filter: blur(16px) saturate(180%); */
}

.quizz-name .btn{
      color: var(--qz-text)!important;
      background: rgba(255, 255, 255, 0.1);
}

/* Résultats de la recherche */
.search-box-results .quizz-name{
    background-color: #e0ab9647 !important;
    background-image: linear-gradient(21deg, #ffffff00, #ffffff26) !important;
    border: none !important;
}

.search-box-results .quizz-name{
  min-height: 240px!important;
}

.watch-stats:hover {
  cursor: pointer
}

/* .arrow-element-label {
  font-size: 3rem !important
} */

.arrow-element.fas {
  font-size: 2rem !important
}

.list-of-executed-quizz, 
.list-of-executed-quizz-dual, 
.list-of-sessions,
.ranked-user-item{
  font-size: 1.2rem
}

@media(max-width:767.98px) {
  .list-of-executed-quizz, 
  .list-of-executed-quizz-dual, 
  .list-of-sessions,
  .ranked-user-item, 
  #current-displayed-statistics-details-header-user-by-session{
    font-size: .8rem
  }

  .list-of-executed-quizz-dual-header-dual, 
  .list-of-sessions-header,
   #current-displayed-statistics-details-header-user-by-session{
    font-size: 1rem
  }
}

.list-of-executed-quizz-header-dual {
  font-size: .7rem
}
@media(max-width:575.98px) {
  .list-of-executed-quizz-header-dual {
    font-size: .5rem
  }
}

@media(max-width:991.98px) {
  .list-of-executed-quizz-header, 
  .list-of-executed-quizz, 
  .list-of-executed-quizz-dual, 
  .ranked-user-item,
  .list-of-sessions {
    font-size: .8rem
  }
}

#quizz-statistics {
  margin: 0
}

.__title {
  text-align: left;
  font-size: 1em
}

#statistics-header, #statistics-header-zoom {
  width: 25%;
  min-height: 100% !important;
  float: left;
  margin-top: 2%;
  margin-left: 1%
}

#statistics-header .mega-octicon {
  text-align: center;
  font-size: 5em;
  color: #005d7f;
  margin-top: 4px;
  text-shadow: 1px 1px 12px #fff
}

#quizz-statistics-detail__challenge__container {
  border-collapse: collapse;
  padding: .5%
}

.__title {
  text-align: left;
  font-size: 18px
}

#quizz-statistics-detail-zoom-zoom {
  min-height: 100% !important;
  border-collapse: collapse
}

#quizz-statistics-detail_filter input {
  padding: .5em;
  border: 2px solid var(--bs-primary);
  border-radius: 5px
}

#quizz-statistics-zoom, #quizz-statistics-zoom-detail {
  padding: .5%
}

#quizz-statistics-zoom tr {
  cursor: pointer;
  color: #005d7f;
  font-size: .8em
}

#quizz-statistics-detail-zoom-zoom tr {
  cursor: pointer;
  color: #005d7f;
  font-size: .8em
}

.ui-state-disabled {
  color: none!;
}

.ui-dialog-titlebar-close {
  visibility: hidden
}

.ui-corner-all {
  border: 0
}

#tabs-3 select {
  font-size: .7em;
  width: 100%;
  height: 100%
}

#tabs-3 td {
  color: #fff;
  font-weight: bold;
  font-size: .8em
}

.ui-dialog-titlebar {
  background: 0;
  color: #000
}

/* Liens legaux du pied de page. Exiges par la guideline 3.1.2 d'Apple, qui
   veut des conditions d'utilisation et une politique de confidentialite
   accessibles DEPUIS L'APPLICATION, pas seulement sur la fiche du magasin.

   Discrets a dessein : ce sont des liens de conformite, pas de navigation. */
.qzr-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: .25rem .75rem;
  margin: .35rem 0 .5rem; font-size: .78em; line-height: 1.4;
}
.qzr-footer__legal a { text-decoration: none; opacity: .75; }
.qzr-footer__legal a:hover,
.qzr-footer__legal a:focus-visible { opacity: 1; text-decoration: underline; }
/* Separateur en pastille : evite un caractere « · » dans le HTML, que les
   lecteurs d'ecran annoncent. */
.qzr-footer__legal a + a::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .5; margin-right: .75rem;
}
.qzr-footer__legal a[hidden] { display: none; }

/* ── MOBILE : LE PIED MAIGRIT, IL NE DISPARAIT PAS ──────────────────────────
   Le pied de page encombre l'ecran etroit — mesure a 375 px : 44 px de haut,
   dont 19 pour une ligne decorative. La tentation est d'ecrire
   `.qzr-footer { display: none }` ici. NE PAS LE FAIRE.

   Hors du parcours d'achat integre (homepage-modern.js) et de l'ecran
   d'inscription (qzr-auth.js) — les deux seuls autres porteurs de ces liens —
   ce <nav> est le SEUL chemin du web mobile vers la confidentialite et les
   CGU. Le masquer rouvre la directive 5.1.1 d'Apple, fermee le 06.SEP.2026
   apres trois tentatives et deux jours de blocage.

   tests/Unit/js/documents-legaux-etats-utilisateur.test.js (section 3 bis) lit
   cette feuille et refuse toute regle active a 375 px qui masquerait le <nav>,
   l'un de ses liens ou l'un de ses ancetres. */
@media (max-width: 767.98px) {
  /* Ce qui part : le copyright, et le numero de version que
     version-manager.js vient coller dedans. L'element reste dans le DOM, donc
     son `querySelector('footer p a')` continue de repondre. */
  .qzr-footer > p { display: none; }

  /* ET LE PIED ENTIER DISPARAIT POUR QUI A UN AUTRE CHEMIN -- pas pour les
     autres. `qzr-auth-connecte` est posee par `qzr-auth.js` au seul endroit
     ou l'application sait qu'elle a une session.

     LA PORTEE N'EST PAS UNE PRECAUTION, C'EST LA CONDITION. L'ecran de
     reglages porte les quatre liens legaux (`slices/userInfos.php`), mais il
     est REFUSE aux etats `anonymous` et `ephemeral` -- voir $blockAnonEph
     dans `slices/route.rules.common.php`. Un visiteur sans compte n'a donc
     que ce pied ; le masquer pour tout le monde rouvrirait la 5.1.1, fermee
     le 06/09 apres trois tentatives. Le banc d'etats refuse d'ailleurs tout
     masquage NON porte, et il nomme le selecteur fautif. */
  body.qzr-auth-connecte .qzr-footer { display: none; }

  /* Ce qui reste doit se lire. Mesure a 375 px AVANT ce correctif : 7,99 px de
     haut sous une opacite de .75 — trois `em` qui se composaient (.8 du
     <footer>, .78 du <nav>, .8 de `footer a`). Le `rem` arrete la composition,
     et la specificite (0,1,1) suffit a battre `footer a` (0,0,2) sans
     `!important`. */
  .qzr-footer__legal { margin: 0 0 .2rem; gap: .1rem .5rem; line-height: 1.25; }
  /* LA COULEUR N'EST PLUS POSEE ICI, et c'est volontaire. Ce bloc corrigeait
     le contraste POUR LE SEUL MOBILE (1,26:1 -> 5,10:1) parce que la regle de
     base portait `#dedddd` en dur ; depuis qu'elle prend `--qz-muted`, le
     bureau et le mobile sont corriges par la meme decision, et redeclarer la
     couleur ici n'aurait fait qu'ajouter une seconde source de verite.
     Restent la taille et l'opacite, qui sont bien propres au mobile. */
  .qzr-footer__legal a { font-size: .72rem; opacity: 1; }
  .qzr-footer__legal a + a::before { margin-right: .5rem; }

  /* Dernier element visible du document, et `viewport-fit=cover` est pose sur
     le viewport : sans cela les liens passent sous la barre d'accueil. */
  .qzr-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

footer, footer a {
  font-size: .8em;
  font-family: verdana;
  text-decoration: none !important;
  /* LE JETON, ET PAS UNE COULEUR EN DUR — AUCUNE VALEUR FIXE NE TIENT LES
     DEUX MODES, c'est la mesure qui le dit et non le gout :

         sur fond          #dedddd   #556F63   #9FB3AC
         feuille claire      1,26      5,07      2,05
         ecran sombre       12,73      3,15      7,82

     `#dedddd` etait pose ici en dur : en mode CLAIR il rendait 1,26:1, soit
     un texte present dans le DOM et invisible a l'oeil. Le pied porte le
     `<nav class="qzr-footer__legal">` — Confidentialite, Guide, Aide et
     support, CGU : le seul chemin du web mobile vers les documents legaux
     hors rail d'achat et hors inscription. Un lien illisible n'est pas un
     chemin, et la directive 5.1.1 ne se satisfait pas d'un noeud DOM.

     `--qz-muted` vaut #556F63 en clair et #9FB3AC en sombre, et c'est
     precisement pourquoi il faut le jeton : figer l'une des deux valeurs
     casserait l'autre mode (3,15 et 2,05, tous deux sous le seuil de 4,5).
     Le repli en dur ne sert qu'au cas ou la feuille de jetons ne charge pas.

     LA SURCHARGE `[data-mode="dark"] footer` QUI SUIVAIT ICI A ETE RETIREE :
     elle posait exactement `var(--qz-muted)`, donc la meme valeur que cette
     regle rend desormais — elle etait devenue une seconde source de verite
     pour la meme decision. Elle avait de surcroit un angle mort : elle ne
     matchait QUE le choix explicite, donc un utilisateur en sombre SYSTEME
     (sans `data-mode`) gardait le #dedddd quasi blanc. Ce cas se repare tout
     seul en passant par le jeton, que la media query `prefers-color-scheme`
     bascule deja. */
  color: var(--qz-muted, #556F63) !important
}

#dialog-box p {
  font-size: .7em;
  color: var(--bs-primary)
}

#confirm-box .content {
  width: auto;
  background: #fff !important
}

#confirm-box.ui-dialog-content {
  height: auto !important;
  /* background: #0000 !important; */
  /* color: var(--bs-primary); */
  box-shadow: none !important
}

.ui-dialog .ui-dialog-content {
  background: #0000 !important
}

.confirm-dialog-custom {
  margin-top: -2%
}

.ui-widget-content {
  background: #fff !important;
  /* color: var(--bs-primary) !important; */
  text-align: center;
  height: auto !important
}

#reset-password-box {
  height: 370px !important
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  clear: both;
  width: 100%;
  margin: auto !important
}

.ui-dialog .ui-dialog-buttonpane button {
  padding: 1.2em .5em !important;
  border-radius: 24px !important;
  width: 45%
}

.ui-dialog-titlebar-close {
  border: none !important;
  background: 0;
  visibility: hidden
}

.ui-dialog-titlebar-close:before {
  content: 'x';
  font-family: verdana !important;
  color: #c1c1c1;
  outline-color: none !important
}

.ui-dialog .ui-button {
  color: #005d7f
}

.ui-dialog .ui-button:hover {
  cursor: pointer
}

.dialogBox {
  color: var(--bs-primary);
  background: #fff !important;
  border-radius: 0px !important;
  /* border:1px solid #fb7d4987!important; */
  max-width: 300px!important;
  top: 8vh !important;
  left: 41vw !important;
  /* border: 0 !important */
  z-index: 10000!important;
}

@media(max-width:767.98px) {
  .dialogBox {
    width: 100vw !important;
    left: 15vw !important;
    /* top: 20vh !important */
  }
}

.ui-widget-overlay.ui-front{
  z-index: 9900;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px);
  animation: waitingRoomFadeIn 0.3s ease-out;
}

/* Waiting Room Modal Dialog Enhancement */
.waiting-room-page.ui-dialog {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 600px !important;
  width: 95% !important;
}

.waiting-room-page .ui-dialog-titlebar {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%) !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 1.2rem 1.5rem !important;
  backdrop-filter: blur(10px);
}

.waiting-room-page .ui-dialog-title {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.waiting-room-page .ui-dialog-titlebar-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 35px !important;
  height: 35px !important;
  transition: all 0.3s ease !important;
}

.waiting-room-page .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: rotate(90deg) scale(1.1);
}

.waiting-room-page .ui-dialog-titlebar-close .ui-icon {
  background-image: none !important;
  text-indent: 0 !important;
}

.waiting-room-page .ui-dialog-titlebar-close .ui-icon::before {
  content: '×';
  font-size: 24px;
  color: #fff;
  display: block;
  line-height: 1;
  font-weight: 300;
}

.waiting-room-page .ui-dialog-content {
  background: linear-gradient(135deg, var(--waiting-room-gradient-start) 0%, var(--waiting-room-gradient-end) 100%) !important;
  border: none !important;
  border-radius: 0 0 20px 20px !important;
  padding: 0 !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  .waiting-room-page.ui-dialog {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .waiting-room-page .ui-dialog-titlebar {
    padding: 1rem !important;
  }
}

#adhesion-box, #connect-box, #reset-password-box {
  /* height: 64vh !important; */
  color: unset
}

#adhesion-box label, #connect-box label, #reset-password-box label {
  color: #8390a5 !important
}

#adhesion-box a, #connect-box a, #reset-password-box a {
  cursor: pointer
}

.toast-message {
  font-size: 2.5rem !important;
  font-family: 'Alfa Slab One';
  top: 50vh;
  position: absolute;
  height: 2%;
  
  /* display: inline; */
}

.toast-message .instant-points{
  font-size:1.5rem!important;
}

.toast-message .instant-points.flying-points{
  font-size:4rem!important;
}


.instant-points.instant-congratulations{
  font-size: 2em!important;      
}

.instant-points.instant-failure{
  color: #dc3545!important;
  font-size: 2em!important;      
}

.toast-message .instant-points .i_boss_man,
.toast-message .instant-points .i_boss_woman{
  text-shadow: none!important;
}

.loader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0;
  opacity: .5;
  border: 3px solid #09acfd;
  -webkit-animation: loader 1s ease-in-out infinite alternate;
  animation: loader 1s ease-in-out infinite alternate
}

.loader:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid #09acfd
}

.loader:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid #09acfd
}

@keyframes loader {
  from {
    transform: rotate(0deg) scale(1, 1);
    border-radius: 0
  }

  to {
    transform: rotate(360deg) scale(0, 0);
    border-radius: 50px
  }
}

@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0deg) scale(1, 1);
    border-radius: 0
  }

  to {
    -webkit-transform: rotate(360deg) scale(0, 0);
    border-radius: 50px
  }
}

/* Loader de FRAGMENT — modales, listes, panneaux internes.
   Ses cinq points etaient en `rgba(9, 172, 253, …)`, un bleu code en dur qui
   ecrasait les classes `bg-color-dynamic-*` du markup : mesure faite, il
   rendait la MEME couleur en safran et en rubis, et ce bleu n'existe nulle
   part ailleurs dans l'application. Ils suivent desormais `--qz-accent`, en
   conservant le rythme d'opacite d'origine (40 / 80 / 100 %) qui donne son
   mouvement au groupe.

   La duree de .8s est conservee : c'est une boucle continue, pas une
   transition, elle ne releve donc pas des trois paliers de mouvement. Seule
   la courbe passe sur `--qz-ease`. */
.loader1 {
  display: inline-block;
  font-size: 0;
  padding: 0
}

.loader1 span {
  vertical-align: middle;
  border-radius: 100%;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 3px 2px;
  -webkit-animation: loader1 .8s var(--qz-ease) infinite alternate;
  animation: loader1 .8s var(--qz-ease) infinite alternate
}

.loader1 span:nth-child(1) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  background: color-mix(in srgb, var(--qz-accent) 40%, transparent)
}

.loader1 span:nth-child(2) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  background: color-mix(in srgb, var(--qz-accent) 80%, transparent)
}

.loader1 span:nth-child(3) {
  -webkit-animation-delay: -0.26666s;
  animation-delay: -0.26666s;
  background: color-mix(in srgb, var(--qz-accent) 100%, transparent)
}

.loader1 span:nth-child(4) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  background: color-mix(in srgb, var(--qz-accent) 80%, transparent)
}

.loader1 span:nth-child(5) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  background: color-mix(in srgb, var(--qz-accent) 40%, transparent)
}

@keyframes loader1 {
  from {
    transform: scale(0, 0)
  }

  to {
    transform: scale(1, 1)
  }
}

@-webkit-keyframes loader1 {
  from {
    -webkit-transform: scale(0, 0)
  }

  to {
    -webkit-transform: scale(1, 1)
  }
}

.loader2 {
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 0;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(254, 168, 23, 0.65);
  border-bottom-color: rgba(57, 154, 219, 0.65);
  border-left-color: rgba(188, 84, 93, 0.95);
  border-right-color: rgba(137, 188, 79, 0.95);
  -webkit-animation: loader2 2s ease-in-out infinite alternate;
  animation: loader2 2s ease-in-out infinite alternate
}

@keyframes loader2 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader2 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader3 {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0;
  text-align: left
}

.loader3 span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(135, 211, 124, 1);
  -webkit-animation: loader3 1.5s linear infinite;
  animation: loader3 1.5s linear infinite
}

.loader3 span:last-child {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s
}

@keyframes loader3 {
  0% {
    transform: scale(0, 0);
    opacity: .8
  }

  100% {
    transform: scale(1, 1);
    opacity: 0
  }
}

@-webkit-keyframes loader3 {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: .8
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0
  }
}

.loader4 {
  width: 45px;
  height: 45px;
  display: inline-block;
  padding: 0;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(246, 36, 89, 1);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  border-left-color: rgba(246, 36, 89, 1);
  border-right-color: rgba(255, 255, 255, 0.3);
  -webkit-animation: loader4 1s ease-in-out infinite;
  animation: loader4 1s ease-in-out infinite
}

@keyframes loader4 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes loader4 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

.loader5 {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #4183d7;
  border-top: 10px solid #f5ab35;
  -webkit-animation: loader5 1.2s ease-in-out infinite alternate;
  animation: loader5 1.2s ease-in-out infinite alternate
}

@keyframes loader5 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader5 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader6 {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #d24d57;
  border-top: 2px solid #d24d57;
  -webkit-animation: loader6 1.8s ease-in-out infinite alternate;
  animation: loader6 1.8s ease-in-out infinite alternate
}

.loader6:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
  border-left: 2px solid #d24d57;
  border-right: 2px solid #d24d57
}

@keyframes loader6 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader6 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader7 {
  display: inline-block;
  width: 30px;
  height: 4px;
  background: #be90d4;
  -webkit-animation: loader7 1.5s linear infinite;
  animation: loader7 1.5s linear infinite
}

@keyframes loader7 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader7 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader8 {
  display: inline-block;
  background: rgba(247, 202, 24, 0.6);
  width: 30px;
  height: 30px;
  position: relative;
  text-align: center;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20eg);
  -webkit-animation: loader7 3s linear infinite;
  animation: loader7 3s linear infinite
}

.loader8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background: rgba(247, 202, 24, 0.5);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg)
}

.loader9 {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  -webkit-animation: loader9 1.5s linear infinite;
  animation: loader9 1.5s linear infinite
}

.loader9:before, .loader9:after {
  position: absolute;
  content: "";
  left: 30px;
  top: 0;
  width: 30px;
  height: 50px;
  background: red;
  -moz-border-radius: 30px 30px 0 0;
  border-radius: 30px 30px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%
}

.loader9:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

@keyframes loader9 {
  0% {
    transform: scale(0, 0);
    opacity: 0
  }

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

@-webkit-keyframes loader9 {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1
  }
}
/* END OF CUSTOM LOADERS */

/* RIPPLE EFFECT */
/* usage: ripple ripple-{size} ripple-{color} */
.ripple {
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px;
  position: relative;
  transform: scale(1);
  font-weight: 100!important;
}


.ripple-12{
  width: 12px;
  height: 12px;
}

.ripple-16{
  width: 16px;
  height: 16px;
}

.ripple-20{
  width: 20px;
  height: 20px;
  padding-top: 2px;
  margin:auto;
}

.ripple-25{
  width: 25px;
  height: 25px;
}

.ripple-36{
  font-size: 1rem!important;
  width: 36px;
  height: 36px;
  padding-top: 5px;
  margin:auto;
}

.ripple-49{
  font-size: 1rem!important;
  width: 49px;
  height: 49px;
  padding-top: 12px;
  margin:auto;
}

.ripple-64{
  width: 64px;
  height: 64px;
}

.ripple::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  z-index: -1;
  animation: ripple 1.5s ease-out infinite;
}



/* .ripple{
  transform: scale(0.6);
} */

.ripple-success{
  background-color: #00F001;
}

.ripple-warning{
  background-color: #ffe707;
}

.ripple-danger{
  background-color: rgba(4, 16, 29, 0.41);
}


.ripple::before {
  animation-delay: 1s;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

/* END OF RIPPLE EFFECT */

/* NAVBARS */
.navbar.toppest{
  background: none;
}

body.homepage-visible .navbar.toppest {
  background: #fff;
}
.modal-content .nav-link{
  font-size: 1rem;
  color:#b6bec6;
  margin: 2px;
  border-radius: 50rem !important;/*rounded pill*/
}
.modal-content .nav-link.active{
  font-size: 1rem;
  font-family: Alfa Slab One;
  /* color: #6a7f94!important; */
  background: none!important;
  border-color: /*var(--bs-teal) #3b6896 var(--waiting-room-button-gradient-end) var(--bs-orange)*/var(--bs-dark) !important;
  /* border-radius: 4px; */
}

.nav-final-statistics .nav-link{
  /* color: #7182ff!important; */
}
.nav-final-statistics .nav-link.active{
  /* color: #fd7e14 !important; */
  /* border-bottom: 4px solid #d0350a !important; */
  background: hsl(21.29deg 51.67% 23.53% / 3.14%)!important;
  border-radius: 0px;
}



/* Le corps d'une modale est du TEXTE COURANT : il prend la fonte de lecture.
   Jusqu'au 28.AOU.2026 cette regle imposait 'Alfa Slab One' — une fonte
   d'AFFICHAGE a empattements gras — a tous les corps de modale de
   l'application, titres comme paragraphes. A 11-13 px, c'etait illisible.

   Audit avant changement : AUCUNE feuille de style n'opte deliberement pour
   Alfa Slab One dans une modale. Les quatre elements qui la veulent vraiment
   (`#looser .ranking-message`, `#remainingAttempts2`, `#goalHudSub`,
   `.start-solo-from-showcase .start-btn-text`) la DECLARENT eux-memes et ne
   dependent donc pas de cette regle : ils sont inchanges. Pour tout le reste,
   l'empattement etait subi, pas choisi.

   L'opt-in explicite existe deja et reste la bonne porte : la classe
   utilitaire `.font-family-ASO` (l.4507).

   Le !important est CONSERVE a dessein : il ne fait que rendre la regle aussi
   forte qu'avant. Le retirer ferait gagner d'autres regles qui perdaient
   jusqu'ici, ce qui changerait le rendu de façon imprevisible — on ne change
   ici qu'une valeur, pas un rapport de force. Les descendants qui posent leur
   propre font-family l'emportent toujours, comme avant. */
.modal .modal-body {
  font-family: var(--qz-font, Inter, system-ui, sans-serif) !important
}

#dialog-box-generic.messages-standard .modal-header {
  padding-right: 1.5rem !important;
  position: absolute;
  top: 0;
  z-index: 100000000
}

#dialog-box-generic.messages-standard .modal-footer {
  padding-right: 1.5rem !important;
  position: absolute;
  bottom: 0;
  z-index: 100000000
}

@media(max-width:767px) {
  #dialog-box-generic.messages-standard .modal-header {
    background: #fff;
    padding-top: .25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: fixed;
    top: 0;
    z-index: 100000000
  }

  #dialog-box-generic.messages-standard .modal-footer {
    padding-top: .25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: fixed;
    bottom: 0;
    z-index: 100000000
  }
}

#dialog-box-generic.messages-standard .modal-title {
  color: rgba(0, 0, 0, .5)
}

#dialog-box-generic.messages-standard .modal-dialog {
  max-width: 48%
}

#dialog-box-generic.messages-standard .modal-content {
  height: 94vh;
  padding-left: 2%;
  padding-right: 2%
}

#dialog-box-generic.messages-standard .modal-body {
  overflow-y: hidden !important;
  height: 84rem !important
}

#dialog-box-generic.messages-standard .modal-header .adress-depart, #dialog-box-generic.messages-standard .modal-header .adress-destination {
  text-transform: capitalize
}

#dialog-box-generic.messages-express .modal-footer {
  padding-right: 1.5rem !important;
  position: absolute;
  bottom: 0;
  z-index: 100000000
}

@media(max-width:767px) {
  #dialog-box-generic.messages-express .modal-header {
    /*position: fixed;*/
    top: 0;
    z-index: 100000000
  }

  #dialog-box-generic.messages-express .modal-footer {
    padding-top: .25rem !important;
    padding-right: 1.5rem !important;
    /*position: fixed;*/
    bottom: 0;
    z-index: 100000000
  }
}

#dialog-box-generic.messages-express .modal-title {
  color: rgba(0, 0, 0, .5)
}

#dialog-box-generic.messages-express .modal-dialog {
  /*max-width: 16%*/
}

#dialog-box-generic.messages-express .modal-content {
  height: 50vh;
  min-width : 280px;
  padding-left: 2%;
  padding-right: 2%;
  overflow: hidden !important;
  border-radius: 50px
}

#dialog-box-generic.messages-express .modal-body {
  overflow-y: hidden !important;
  height: 7484remvh !important
}

#dialog-box-generic.messages-express .modal-header .adress-depart, #dialog-box-generic.messages-express .modal-header .adress-destination {
  text-transform: capitalize
}

.messages-flow {
  overflow: hidden !important
}

#dialog-box-generic .messages-flow .message {
  font-size: .8em !important;
  font-weight: light;
  text-shadow: 0 !important;
  overflow: hidden !important
}

.messages-flow.my-5 {
  margin-bottom: 7rem !important
}

.messages-flow.pb-5 {
  padding-bottom: 7rem !important
}

.message-row-col {
  max-width: 80% !important
}

.message-received .bubble-arrow {
  display: none;
  content: '';
  position: relative;
  bottom: 0;
  left: 19%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-left: 0;
  margin-left: -4px;
  margin-bottom: -8px
}

.message-sent .bubble-arrow {
  display: none;
  content: '';
  position: relative;
  bottom: 0;
  left: 81%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-right: 0;
  margin-left: -4px;
  margin-bottom: -8px
}

.message-timestamp {
  text-transform: capitalize;
  text-align: start;
}

.message-received .message-timestamp {
  padding-left: 2%
}

.message-sent .message {
  border-radius: 16px;
  max-width: 75%;
}

.message-received .message {
  border-radius: 16px
}

.message .delete-message-trigger-button {
  position: absolute;
  top: 8px;
  right: 22px;
  width: 15px;
  height: 15px
}

/* BOITE DE SAISIE DES MESSAGES */
.message-input{
  font-size:.8rem!important;
}
/* les emojis sont eveloppées dans une balise <emoji> </emoji>*/
emoji{
  font-size:2rem!important;
}
/****************************************/

.notification-center{
  /* color:#ffeb3b!important; */
  font-size:2em;
  /* top:10px!important; */
  /* position:absolute; */
  /* right:15px; */
  text-decoration:none;
}

@media(max-width:767px) {
  .navbar .notification-center{
    margin-left:75px;
  }
}

.active-notifications-count-container{  
  /* width: 20px; */
  /* height: 20px; */
  /* font-size: small; */
  /* font-family: 'Roboto'; */
  top: -16px;
  /* left: -36px; */
  padding: 2px;
  border-radius: 50px;
  position: relative;
  /* border:   1px solid var(--qz-200); */
  /* background-color: var(--quizz-option-color) !important; */
  /* color: #f72b3f !important; */
}
/* Fond ROUGE pour TOUTES les instances : ce compteur signale des
   notifications NON LUES. Pose ici, a la base, plutot qu'en trois regles
   scopees qui divergeaient — le hub etait en or (--qz-energy, la couleur
   d'une recompense) et la tuile du menu gardait le fond de .badge.
   La CONDITION, elle, est deja assuree : notifications.js ne retire d-none
   que si le comptage depasse zero. La double classe bat le .badge de
   Bootstrap sans recourir a !important. */
.active-notifications-count-container,
.active-notifications-count-container.badge {
  /* Pastille ROUGE cerclee de la teinte du theme : le fond dit « non lu »
     d'un coup d'oeil, la bordure raccroche l'element au theme courant
     (--qz-accent suit les douze themes). */
  background: var(--qz-error, #ef4444);
  border: 2px solid var(--qz-accent);
  /* Le chiffre est masque juste en dessous (font-size: 0) : c'est un POINT,
     pas un compteur. Sans cette remise a plat, le padding herite de .badge
     (6px 12px) en faisait un ovale de 34x22. */
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
}

.active-notifications-count-container .active-notifications-count{
  height: 10px;
  width: 10px;
  line-height: 16px;
  font-size: 0rem!important;
  font-family: verdana;
  background-color: transparent!important;

}


.kolimaya-no-message-img {
  width: 36%
}

.border.user-template-container-2 {
  border-radius: 7px !important;
}

.border-primary-forced-2px-dashed{
    border: 2px dashed var(--bs-blue) !important;
}

/* Dans le résultat de recherche, on stylise l'arrière plan des éléments */
.modal-search-box .user-template-container-1{
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.modal-search-box .user-name.user-template-container-2 {
    /* background-color: #19ff945e !important; */
    /* background-image: linear-gradient(45deg, #ffffff00, #ffffff00); */
    /* min-height: 236px !important; */
}

.modal-search-box .group-name.user-template-container-2{
    background-color: #66a6ff5c;
    background-image: linear-gradient(45deg, #ffffff00, #ffffff00);
    min-height: 240px !important;
    border-radius: 7px !important;
    border: none!important;
}

.modal-search-box .friends-desc-title{
  font-size: .7rem!important;
  font-weight: 800;
}

.modal-search-box .group-card-immersive__stats{
  display: none;
}

.modal-search-box .group-card-immersive__meta{
  font-size: .7rem!important;
}

.modal-search-box .no-picture-icon{
  color: var(--qz-text)!important;
}
.modal-search-box .no-picture-icon{
  color: var(--qz-text)!important;
}

.modal-search-box button:not(.btn-close){
  font-size: .7rem !important;
  font-weight: 100;
  color: var(--qz-text) !important;
  /* background: hsla(17, 100%, 64%, 0.16) !important; */
  margin-top: .5rem !important;
  padding: 5px;
}

.modal-search-box .trigger-request-join-group{
  display: none;
}

.modal-search-box .chip{
  font-size: .594rem!important;
}
/* End of specific Groups style in search results */

.group-name.user-template-container-2 .group-option{  
  /* color: aliceblue; */
  /* border:none!important; */
  /* background: rgba(255, 255, 255, 0.1)!important; */
}
/*************************************************/
#wrapper {
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 100%;
  overflow: hidden
}

#scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none
}

#wrapper-notifs {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 5px;
  left: 0;
  width: 100%;
  overflow: hidden
}

#scroller-notifs {
  position: absolute;
  z-index: 1;
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none
}

@media(max-width:767px) {
  .modal-dialog.modal-full {
    /* min-width: 100%; */
    margin: auto;
    border: 0;
    border-radius: none
  }

  .modal-dialog.modal-full .modal-content {
    /* min-height: 100vh; */
    height: 100vh !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border: none !important
  }

  .messages-dialog .modal-dialog.modal-full .modal-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important
  }
}

.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.rounded-100 {
  border-radius: 100px
}

.element-borderless {
  border: none !important;
  outline: none !important;
  box-shadow: none !important
}

.btn-indigo{
   background: rgba(102,16,242,1)!important;
   color:#fff!important;
}

.btn-indigo:hover,.btn-indigo:active{
  background: #6610f212!important;
  color: var(--bs-indigo)!important;
}

.btn-indigo-light{
  background: #6610f212!important;
  color: var(--bs-indigo)!important;
}

.btn-indigo-light:hover,.btn-indigo-light:active{
  background: var(--bs-indigo)!important;
  color:#fff!important;
}

.bg-primary-light {
  background: #f0f8ff !important
}

.alert-primary-light {
    color: #084298;
    background-color: rgba(207, 226, 255, 0.129);
    border-color: #b6d4fe!important;
}
/*
.bg-blue-sky {
  background: #c1e6fa !important
} */

.bg-blue-sky {
  background: #c1e6fa !important
}


.bg-blue-sky-category {
  background: #e2f1ff !important
}

.bg-yellow{
  background: var(--bs-yellow)!important;
}

.bg-warning-light{
  background: rgba(255, 193, 7, 0.25)!important;
}

/* .bg-light-warning{
  background: rgba(255, 193, 7, 0.45)!important;
}

.bg-light-success{
  background: rgba(25,135,84, 0.45)!important;
}

.bg-light-danger{
  background: rgba(220,53,69, 0.45)!important;
}

.bg-light-white{
  background: rgba(255,255,255, 1)!important;
} */

.bg-success-fluo-light {
  background: #d9fad7 !important
}

.bg-danger-fluo-light {
  background: #faebd7 !important
}

.bg-none {
  background: none !important
}

.text-blue-sky-comp {
  color: #21b1ff !important
}

.text-secondary-4 {
  color: var(--bs-secondary) !important
}

.text-success-flashy {
  color: #4af5bf !important
}

.border.border-8, .border-8 {
  border: 8px solid !important;
}

.border.border-10, .border-10 {
  border: 10px solid !important
}

.border.border-12, .border-12 {
  border: 12px solid !important
}

.border.border-14, .border-14 {
  border: 14px solid !important
}

.border.border-16, .border-16 {
  border: 16px solid !important
}

.border-0_{
  border: 0px solid !important
}

.border.border-success-pastel {
  border-color: #4af596f5 !important
}

.font-family-ASO {
  font-family: 'Alfa Slab One' !important
}

.border-warning-light{
  border-color: rgba(255, 193, 7, 0.25)!important
}

/* border style */
.border-solid{border-style: solid!important;}
.border-dashed{border-style: dashed!important;}
.border-dotted{border-style: dotted!important;}
.border-dotted{border-style: double!important;}
/* border style end */

/* border width */
.border-width-1px{border-width: 1px!important;}
.border-width-2px{border-width: 2px!important;}
.border-width-3px{border-width: 3px!important;}
.border-width-4px{border-width: 4px!important;}
.border-width-5px{border-width: 5px!important;}
.border-width-6px{border-width: 6px!important;}
.border-width-7px{border-width: 7px!important;}
.border-width-8px{border-width: 8px!important;}
/* border style end */


/* Alert */
.alert-success{background-color: #ecfef6!important;}

/* Text shadow */
.text-shadow-1px-warning{text-shadow: 1px 1px 0 var(--bs-warning), 1px -1px 0 var(--bs-warning), -1px 1px 0 var(--bs-warning), -1px -1px 0 var(--bs-warning), 1px 0 0 var(--bs-warning), 0px 1px 0 var(--bs-warning), -1px 0 0 var(--bs-warning), 0px -1px 0 var(--bs-warning), 0px 0px 0px!important;}
.text-shadow-2px-warning{text-shadow: 2px 2px 0 var(--bs-warning), 2px -2px 0 var(--bs-warning), -2px 2px 0 var(--bs-warning), -2px -2px 0 var(--bs-warning), 2px 0 0 var(--bs-warning), 0px 2px 0 var(--bs-warning), -2px 0 0 var(--bs-warning), 0px -2px 0 var(--bs-warning), 1px 1px 2px!important;}
.text-shadow-2px-danger{text-shadow: 2px 2px 0 var(--bs-red), 2px -2px 0 var(--bs-red), -2px 2px 0 var(--bs-red), -2px -2px 0 var(--bs-red), 2px 0 0 var(--bs-red), 0px 2px 0 var(--bs-red), -2px 0 0 var(--bs-red), 0px -2px 0 var(--bs-red), 1px 1px 2px!important;}
.text-shadow-2px-primary{text-shadow: 2px 2px 0 var(--bs-primary), 2px -2px 0 var(--bs-primary), -2px 2px 0 var(--bs-primary), -2px -2px 0 var(--bs-primary), 2px 0 0 var(--bs-primary), 0px 2px 0 var(--bs-primary), -2px 0 0 var(--bs-primary), 0px -2px 0 var(--bs-primary), 1px 1px 2px!important;}
.text-shadow-2px-success{text-shadow: 2px 2px 0 var(--bs-success), 2px -2px 0 var(--bs-success), -2px 2px 0 var(--bs-success), -2px -2px 0 var(--bs-success), 2px 0 0 var(--bs-success), 0px 2px 0 var(--bs-success), -2px 0 0 var(--bs-success), 0px -2px 0 var(--bs-success), 1px 1px 2px!important;}
.text-shadow-2px-indigo{text-shadow: 2px 2px 0 var(--bs-indigo), 2px -2px 0 var(--bs-indigo), -2px 2px 0 var(--bs-indigo), -2px -2px 0 var(--bs-indigo), 2px 0 0 var(--bs-indigo), 0px 2px 0 var(--bs-indigo), -2px 0 0 var(--bs-indigo), 0px -2px 0 var(--bs-indigo), 1px 1px 2px!important;}
/* End Text-shadow */

/* Box shadow */
/* 4px */
.box-shadow-4px-white{
  box-shadow:4px 4px 0 var(--bs-white), 4px -4px 0 var(--bs-white), -4px 4px 0 var(--bs-white), -4px -4px 0 var(--bs-white), 4px 0 0 var(--bs-white), 0px 4px 0 var(--bs-white), -4px 0 0 var(--bs-white), 0px -4px 0 var(--bs-white), 1px 1px 4px!important;
}
.box-shadow-4px-success{
  box-shadow:4px 4px 0 var(--bs-success), 4px -4px 0 var(--bs-success), -4px 4px 0 var(--bs-success), -4px -4px 0 var(--bs-success), 4px 0 0 var(--bs-success), 0px 4px 0 var(--bs-success), -4px 0 0 var(--bs-success), 0px -4px 0 var(--bs-success), 1px 1px 4px!important;
}
.box-shadow-4px-warning{
  box-shadow:4px 4px 0 var(--bs-warning), 4px -4px 0 var(--bs-warning), -4px 4px 0 var(--bs-warning), -4px -4px 0 var(--bs-warning), 4px 0 0 var(--bs-warning), 0px 4px 0 var(--bs-warning), -4px 0 0 var(--bs-warning), 0px -4px 0 var(--bs-warning), 1px 1px 4px!important;
}
.box-shadow-4px-danger{
  box-shadow:4px 4px 0 var(--bs-danger), 4px -4px 0 var(--bs-danger), -4px 4px 0 var(--bs-danger), -4px -4px 0 var(--bs-danger), 4px 0 0 var(--bs-danger), 0px 4px 0 var(--bs-danger), -4px 0 0 var(--bs-danger), 0px -4px 0 var(--bs-danger), 1px 1px 4px!important;
}
/* 8px */
.box-shadow-8px-white{
  box-shadow:8px 8px 0 var(--bs-white), 8px -8px 0 var(--bs-white), -8px 8px 0 var(--bs-white), -8px -8px 0 var(--bs-white), 8px 0 0 var(--bs-white), 0px 8px 0 var(--bs-white), -8px 0 0 var(--bs-white), 0px -8px 0 var(--bs-white), 1px 1px 8px!important;
}
.box-shadow-8px-success{
  box-shadow:8px 8px 0 var(--bs-success), 8px -8px 0 var(--bs-success), -8px 8px 0 var(--bs-success), -8px -8px 0 var(--bs-success), 8px 0 0 var(--bs-success), 0px 8px 0 var(--bs-success), -8px 0 0 var(--bs-success), 0px -8px 0 var(--bs-success), 1px 1px 8px!important;
}
.box-shadow-8px-warning{
  box-shadow:8px 8px 0 var(--bs-warning), 8px -8px 0 var(--bs-warning), -8px 8px 0 var(--bs-warning), -8px -8px 0 var(--bs-warning), 8px 0 0 var(--bs-warning), 0px 8px 0 var(--bs-warning), -8px 0 0 var(--bs-warning), 0px -8px 0 var(--bs-warning), 1px 1px 8px!important;
}
.box-shadow-8px-danger{
  box-shadow:8px 8px 0 var(--bs-danger), 8px -8px 0 var(--bs-danger), -8px 8px 0 var(--bs-danger), -8px -8px 0 var(--bs-danger), 8px 0 0 var(--bs-danger), 0px 8px 0 var(--bs-danger), -8px 0 0 var(--bs-danger), 0px -8px 0 var(--bs-danger), 1px 1px 8px!important;
}

/* font-sizes */
.font-size-small{
  font-size: small!important;
}
.font-size-x-small{
  font-size: x-small!important;
}
.font-size-xx-small{
  font-size: xx-small!important;
}
/* End font-sizes  */


/* MODAL display-group-content*/
.display-group-content .modal-title{
  font-size: small!important;
  font-family: Alfa Slab One;
}
/* ************************** */

.search-container {
  width: auto !important
}

@media(min-width:992px) {
  .search-container {
    /* position: absolute; */
    top: 14vh;
    right: 17vw;
    width: 52% !important;
  }
  .group-users-main-container .search-container {
    position: inherit;
    width: auto!important;
  }
}

.pagination li {
  display: inline-block;
  border-radius: 50px
}

.pagination .active {
  /* background: var(--bs-white); */
  border: 1px solid var(--qz-line) !important
}

.pagination li a {
  color: var(--qz-accent-ink) !important;
  text-decoration: none;
  padding: 8px
}

.pagination .active:hover, .pagination .active:active, .pagination .active:focus {
  background: var(--qz-600);
  color: var(--qz-50) !important
}

.pagination li a:hover, .pagination li a:active, .pagination li a:focus {
  color: var(--bs-white) !important
}

.filepond--drop-label {
  color: #4c4e53
}

.filepond--label-action {
  text-decoration-color: #babdc0
}

.filepond--panel-root {
  background-color: #edf0f4
}

.filepond--root {
  width: 170px;
  margin: 0 auto
}

.rotate-45-deg {
  transform: rotate(45deg)
}

.rotate-90-deg {
  transform: rotate(90deg)
}

.rotate-180-deg {
  transform: rotate(180deg)
}

.rotate-270-deg {
  transform: rotate(270deg)
}

.cursor-pointer {
  cursor: pointer
}

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
    outline: none !important;
}

/* CUSTOM POOVER */
.quizzmaster-custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}


/**************** CHIPS START ****************/
.chip {
  display: inline-block;
  padding: 0 16px;
  height: 45px;
  font-size: .7rem;
  font-weight:700;
  line-height: 45px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -16px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
/* *****************  CHIPS END  */

/* SCROLLBAR PLAYGROUND */
.modal-playground .modal-body {
  /* max-height: 250px; */
  /* padding: 1rem; */
  overflow-y: auto;
  /* direction: ltr; */
  scrollbar-color: #ffc107 rgb(247,225,132,0.05)!important;
  scrollbar-width: thin;
  transition: scrollbar-color 0.3s ease-out;
}

.modal-playground .modal-body::-webkit-scrollbar {
  width: 16px;
}

.modal-playground .modal-body::-webkit-scrollbar-track {
  background-color: rgb(247,225,132,0.0);
  border-radius: 100px;
}

.modal-playground .modal-body::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: #ffc107;
  transition: background-color 0.3s ease;
}

.modal-playground .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #ffb300;
}

.modal-playground .modal-dialog {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-playground.fade .modal-dialog {
  transform: scale(0.95) translateY(-10px);
  opacity: 0;
}

.modal-playground.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-playground .modal-content {
  border-radius: 0.5rem!important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border: none;
}

.modal-playground-content {
  transition: background-color 0.3s ease;
}

/*Modal Backdrop std BG*/
.modal-backdrop {
  z-index: 0;
  background-color: #00353f!important;
} 
/* ************************************ */

/* Smooth transition for backdrop */
.modal-backdrop.modal-playground-backdrop {
  transition: opacity 0.4s ease-in-out;
}

/* FINAL STATISTICS MODAL ENHANCEMENTS */
.modal-dialog-final-stats .modal-content {
  border-radius: 1rem!important;
  /* box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35); */
  border: none;
  animation: slideInUp 0.4s ease-out;
}

.modal-dialog-final-stats .modal-dialog {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-dialog-final-stats.fade .modal-dialog {
  transform: translateY(50px);
  opacity: 0;
}

.modal-dialog-final-stats.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Statistics content animations */
.statistics-content {
  animation: fadeIn 0.5s ease-in;
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Display quizz statistics modal */
.modal-display-quizz-statistics .modal-content,
.modal-display-quizz-statistics-zoom .modal-content {
  border-radius: 0.75rem!important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.modal-display-quizz-details-content {
  transition: opacity 0.3s ease;
}

/* Countdown box enhancements */
#countdown-box {
  transition: all 0.3s ease;
}

#countdown-box.circle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* Session info smooth transitions */
#userSessionInfo {
  transition: all 0.3s ease;
}

/* Word box animations for questions */
#word-box {
  animation: fadeInScale 0.4s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Live points animation */
#livePoints, #livePoints2 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stat board enhancements */
.stat-board, .stat-board-2 {
  transition: all 0.3s ease;
}

/* Close button hover effect */
.closePlayGroundBtn:hover {
  transform: scale(1.05);
  transition: transform var(--qz-dur-ui) ease;
}
/* ***************************************************************************** */


/*  MODAL MAIN SEARCH BOX  */
.modal-search-box .item-type{
  border-radius: 16px;
  padding: 4px 10px;
  font-size: .7rem;
}

.modal-search-box .item-type.quizz{
  background: #ff530d0f;
  color: #f94800;
  border: 1px solid;
  border-color: #f94800;
}

.modal-search-box .item-type.player{
  background: #56c8b30f;
  color: rgb(0 204 164);
  border: 1px solid;
  border-color: rgb(0 204 164);
}

.modal-search-box .item-type.group {
    /* background: #edf5ff; */
    color: #3084ff;
    border: 1px solid;
    border-color: #3084ff;
}

/* ***************************************************************************** */
/* RESPONSIVE ENHANCEMENTS FOR QUIZ MODALS */

/* Mobile optimizations */
@media (max-width: 767.98px) {
  .modal-playground .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100dvh;
  }
  
  .modal-playground .modal-content {
    border-radius: 0!important;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--qzr-safe-top);
    padding-bottom: var(--qzr-safe-bottom);
  }
  
  .modal-load-next-step .modal-content {
    border-radius: 0.5rem!important;
  }
  
  .load-next-serie-msg {
    font-size: 3rem;
  }
  
  #playgroundBottom {
    max-width: 100%!important;
    padding-bottom: max(12px, var(--qzr-safe-bottom))!important;
  }
  
  #playgroundBottomContent .quizz-elements .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 !important;
  }

  #playgroundBottomContent .quizz-elements .row > [class*="col-"],
  #playgroundBottomContent #remainingAttempts,
  #playgroundBottomContent #userBestScore {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }

  #playgroundBottomContent .element-title,
  #playgroundBottomContent .common-label,
  #playgroundBottomContent small {
    overflow-wrap: anywhere;
  }

  #playground #question-and-prop > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(68px, 80px) minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 0.35rem;
    height: auto !important;
  }

  #playground #question-and-prop > .row > [class*="col"] {
    min-width: 0;
  }

  #playground .user-elements-container {
    grid-column: 1;
    width: auto !important;
    max-width: none !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  #playground #question-and-prop > .row > .col-3 {
    grid-column: 2;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #playground .opponent-elements-container {
    grid-column: 3;
    width: auto !important;
    max-width: none !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  #playground .userSessionInfo-container,
  #playground #goalHudContainer {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  #playground #goalHudContainer {
    margin: 0.25rem 0 0 !important;
    padding: 0 0.25rem !important;
  }

  #playground #goalHud,
  #playground #goalHud2 {
    position: static !important;
  }

  #playground #countdown-box {
    margin: 0 auto !important;
    transform: scale(0.78);
    transform-origin: center top;
  }

  #playground #goalHudTitle,
  #playground #goalHudTitle2 {
    font-size: 1.45rem !important;
  }

  #playground .stat-board,
  #playground .stat-board-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #playground #opponent-elements,
  #playground #opponent-elements-multi {
    float: none !important;
    justify-content: center !important;
  }
  
  .quizz-session, .quizz-title, .quizz-question-num,
  .quizz-possible-answers, .remaining-attempts {
    margin: 0.25rem!important;
    padding: 0.5rem!important;
  }
  
  .modal-dialog-final-stats .modal-content {
    border-radius: 0!important;
    min-height: 100vh;
  }
  
  .collapse-trigger-icon {
    font-size: 1.5rem!important;
  }
}

@media (max-width: 360px) {
  #playgroundBottomContent .quizz-elements .row {
    grid-template-columns: 1fr;
  }

  #playground #question-and-prop > .row {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 76px) minmax(0, 1fr);
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal-playground .modal-dialog {
    max-width: 95%;
  }
  
  .load-next-serie-msg {
    font-size: 4rem;
  }
  
  #playgroundBottom {
    max-width: 90%!important;
  }
}

/* Desktop enhancements */
@media (min-width: 992px) {
  .modal-playground .modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  
  .modal-dialog-final-stats .modal-content {
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); */
  }
  
  /* Enhanced hover effects on desktop */
  .stat-board:hover, .stat-board-2:hover {
    transform: scale(1.05);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .collapse-trigger-icon:hover {
    transform: scale(1);
  }
  
  .collapse-trigger-icon:not(.collapsed):hover {
    transform: rotate(180deg) scale(1);
  }
  
  .quizz-session:hover, .quizz-title:hover, .quizz-question-num:hover,
  .quizz-possible-answers:hover, .remaining-attempts:hover {
    transform: none;
  }
  
  .closePlayGroundBtn:hover {
    transform: none;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .modal-playground .modal-dialog,
  .modal-dialog-final-stats .modal-dialog,
  .load-next-step-displayer .modal-dialog {
    transition: none;
  }
  
  .collapse-trigger-icon,
  #playgroundBottomContent {
    transition: none;
  }
}
/* ***************************************************************************** */


/* OBJECTIFS PAR QUIZZ */
/* Style for objectives on quizz playground */
#goalHudContainer {
  margin-left:8px;margin-right:-8px;
}

#goalHudTitle {
  font-size: 2rem !important;
}

#goalHudSub{
  font-family: 'Alfa Slab One';
  font-weight: 100;
}

.goalHudSub-title{
  font-size: .8rem !important;
  font-style: italic;
}

.card-title,
#goalSummary, 
#goalSummary_,
#scoreValue,
#correctValue,
#fastCountValue,
#fastSecValue {
  font-weight: 100 !important;
}

/* Animation en cas d'objectifs atteints */
/* Petit "pop" + glow, parfait pour un badge Bootstrap */
.animate {
  animation: goalBadgePop 650ms cubic-bezier(.2,.9,.2,1) 1;
  transform-origin: center;
}

@keyframes goalBadgePop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.18);
    filter: brightness(1.15);
  }
  55% {
    transform: scale(0.98);
    filter: brightness(1.05);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Optionnel : un léger "halo" pulsé (à ajouter en plus de .animate si tu veux) */
.animate-glow {
  animation: goalBadgeGlow 1200ms ease-in-out 2;
}

@keyframes goalBadgeGlow {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 .85rem rgba(25,135,84,.35); } /* vert Bootstrap (success) */
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Accessibilité : désactive l'animation si l'utilisateur préfère réduire les mouvements */
@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate-glow {
    animation: none !important;
  }
}

/* Bannière non-invasive de notification "objectif atteint" */
#goalAchievedBanner,
#rtGoalAchievedBanner {
  display: none;
  position: fixed;
  bottom: calc(80px + var(--qzr-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1055;
  background: rgba(25, 135, 84, 0.92);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  padding: .55rem 1.4rem;
  border-radius: 2rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem - var(--qzr-safe-left) - var(--qzr-safe-right));
  white-space: normal;
  box-shadow: 0 4px 18px rgba(25,135,84,.35);
}

#goalAchievedBanner.goal-banner-show,
#rtGoalAchievedBanner.goal-banner-show {
  display: block;
  animation: goalBannerSlideIn 400ms cubic-bezier(.2,.9,.2,1) forwards;
}

#goalAchievedBanner.goal-banner-hide,
#rtGoalAchievedBanner.goal-banner-hide {
  display: block;
  animation: goalBannerFadeOut 500ms ease-in forwards;
}

@keyframes goalBannerSlideIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(24px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes goalBannerFadeOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  #goalAchievedBanner.goal-banner-show,
  #goalAchievedBanner.goal-banner-hide,
  #rtGoalAchievedBanner.goal-banner-show,
  #rtGoalAchievedBanner.goal-banner-hide {
    animation: none !important;
  }
}
/* ************************************* */
/* ************ FIN STYLE OBJECTIFS ************** */
/* Level badge styling for category stats */
.level-badge {
    font-size: 1.5em;
}

/* ************************************* */
/* *** MODERNIZED QUIZ MESSAGES STYLES *** */
/* ************************************* */

/* Bounce-in animation for success messages */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: inline-block;
}

/* Fade-in animation for failure messages */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* Slide-up animation for subtitle text */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out 0.2s both;
}

/* Enhanced success message styling */
.instant-points.instant-congratulations {
  font-size: 1em!important;
  font-weight: bold;
  /* Dynamic text-shadow will be applied via inline styles */
  letter-spacing: 0.02em;
}

/* Enhanced failure message styling */
.instant-points.instant-failure.main {
  font-size: 1em!important;
  font-weight: bold;
  text-shadow: 6px 6px 10px rgba(220, 53, 69, 0.6), -3px -3px 6px rgba(220, 53, 69, 0.4);
  letter-spacing: 0.03em;
}

.instant-failure.sub {
  font-size: .8em!important;
  font-weight: 500;
  margin-top: 0.5rem;
  display: block;
}

/* Dialog container improvements */
.instant-dialog-7 .instant-congratulations {
  color: #f7e77e!important;
  font-size: 1em!important;
  text-shadow: 
    0 0 15px rgba(247, 231, 126, 0.6),
    0 0 30px rgba(247, 231, 126, 0.4),
    6px 6px 12px rgba(0, 0, 0, 0.5);
}

.instant-dialog-7 .instant-failure {
  font-size: 1em!important;
  text-shadow: 
    0 0 15px rgba(255, 201, 60, 0.6),
    6px 6px 12px rgba(220, 53, 69, 0.5),
    -3px -3px 8px rgba(220, 53, 69, 0.3);
}

.instant-dialog-7 .instant-failure.sub {
  color: #ffc93c!important;
  font-size: .8em!important;
  text-shadow: 2px 2px 4px rgba(220, 53, 69, 0.5);
  margin-top: 1rem;
  font-weight: 600;
}

/* Pulse animation for special emphasis */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse {
  animation: pulse 1s ease-in-out infinite;
}

/* Emoji styling improvements */
.instant-points.instant-congratulations,
.instant-points.instant-failure.main {
  line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .instant-points.instant-congratulations {
    font-size: .9em!important;
  }
  
  .instant-points.instant-failure.main {
    font-size: .9em!important;
  }
  
  .instant-dialog-7 .instant-congratulations,
  .instant-dialog-7 .instant-failure {
    font-size: .9em!important;
  }
  
  .instant-dialog-7 .instant-failure.sub {
    font-size: .7em!important;
  }
}

/* Accessibility: respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-bounce-in,
  .animate-fade-in,
  .animate-slide-up,
  .animate-pulse {
    animation: none !important;
  }
}

/* ************************************* */
/* *** END MODERNIZED QUIZ MESSAGES *** */
/* ************************************* */

/* *** FAILURE TOAST - centered pop animation *** */
@keyframes toastPop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
#liveToast.toast-pop.show {
  animation: toastPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* *** END FAILURE TOAST *** */

/* ============================================================================
   DECOMMISSION — 1v1 "find opponent" / duel buttons (superseded by Compétitions).
   Retires the duel triggers on quiz-card "Adversaire", category "Défier", and the
   hero "Démarrer" WITHOUT removing the shared .find-opponent-button handler — which
   the LIVE Challenges hub ("Créer un challenge") still depends on. Excluded:
   - .generate-auto-quizz-dual / .challenge-create-card → the Challenges hub cards;
   - [request-origine="user-profile"] → the person-to-person duel button KEPT on
     USER PROFILES (group member profile + player/user profiles).
   ============================================================================ */
.find-opponent-button:not(.generate-auto-quizz-dual):not(.challenge-create-card):not([request-origine="user-profile"]) {
  display: none !important;
}

/* ============================================================================
   Inline page-title menu trigger — SMALL DEVICES ONLY
   Shows the horizontal-ellipsis menu button (opens #modalMainMenu) to the right
   of #current-title-displayer__. The page-title breadcrumb row splits into
   3/4 (title) + 1/4 (menu). Injected by __navigation.displayCurrentPageTitle
   (main-dev-front.js) as <li id="title-inline-menu-li" class="title-inline-menu">.
   Hidden on tablet/desktop so the topbar #shell-menu-button remains the trigger.
   ============================================================================ */
.title-inline-menu { display: none; }

@media (max-width: 767px) {
  /* `flex-wrap` est desormais gere plus haut, pour toutes les surfaces. Le
     nowrap qui vivait ici empechait le sous-titre de groupe de tomber a la
     ligne, alors qu'il est justement concu pour cela. */
  /* 3/4 — page title.
     Le titre est passe a 2.2rem : a cette taille, les libelles longs ne tiennent
     plus sur une ligne en 342 px. Mesure en prod : « Objectifs & plans »
     depassait de 30 px, « Tous les joueurs » de 17 px, « Defis de session » de
     1 px — le texte etait COUPE NET, sans meme les points de suspension, parce
     que `text-overflow: ellipsis` est inerte tant que `overflow` n'est pas
     `hidden` (il l'etait, mais en commentaire).

     On laisse donc le titre REVENIR A LA LIGNE plutot que de le tronquer :
     a 2.2rem le titre est un element d'identite de l'ecran, le rogner en
     « Objectifs & pl… » lui ferait perdre son sens. `overflow: hidden` est
     retabli en filet de securite pour le cas pathologique d'un mot unique plus
     large que la colonne. */
  #top-menu-down .breadcrumb > #current-title-displayer__ {
    /* flex: 3 1 0; */
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* text-align: left; */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 1/4 — menu trigger, icon pinned to the right edge */
  #top-menu-down .breadcrumb > .title-inline-menu {
    display: flex;
    flex: 1 1 0;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  #top-menu-down .breadcrumb > .title-inline-menu::before { content: none !important; }
  #top-menu-down .breadcrumb > .title-inline-menu > .navbar-toggler { margin: 0; color: var(--qz-accent-ink);}

  /* The inline title-menu above is the mobile main-menu trigger, so the topbar
     ellipsis (#shell-menu-button in .top-actions) is redundant on phones — hide
     it. The homepage-hero #shell-menu-button is a separate element and stays. */
  .top-actions #shell-menu-button { display: none !important; }
}

/* ── Respiration haute sur mobile ────────────────────────────────────────────
   Remplace le margin-top que portait `#top-menu-down.qzr-top-menu-down--no-topbar`.
   Pose sur `body` : la barre du haut est masquee sur la plupart des routes
   mobiles, et l'espace doit exister quel que soit le premier element rendu. */
@media (max-width: 767.98px) {
  body {
    margin-top: 2rem !important;
  }
}