/* RESET & FONTS */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Poppins:400,500,700,800,900|Roboto:100,300,400,400i,500,700|Jost:300,400,500,600,700,800,900&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  color: #424242;
  /*background: url("/assets/front/images/bg-ram-soy-2.webp") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;*/
    
    background-image: url('../images/bg-image-1920-1080.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}
body, html {
  height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  min-height: 600px; /* adapte selon tes besoins */
}
.hidden {
  display: none !important;
}
.img-fluid {
  max-width: 100% !important;
  height: auto;
}
:root {
  --primary-color-2: #2569b6;
  --white-color-2: #fff;
  --black-color-2: #000;
  --correct-color-2: #279627;
  --wrong-color-2: #e6c612;
}

/* ----------- FORMULAIRE & LOGIN ----------- */
.login-18 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.login-18 .form-section {
  max-width: 600px;
  margin: 0 auto;
  background: url(/assets/front/images/bg-form-2.webp) top left repeat;
  background-size: cover;
  padding: 25px 70px;
  border-radius: 100px 0 100px 0;
  position: relative;
  z-index: 1;
}
.login-18 .form-section:before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(97, 83, 224, 0.5);
  border-radius: 100px 0 100px 0;
}
.login-18 h1, .login-18 h2, .login-18 h3, .login-18 h4, .login-18 h5, .login-18 h6 {
  font-family: 'Jost', sans-serif;
}
.login-18 .logo-2 img {
  margin-bottom: 20px;
  height: 150px;
}
.login-18 .form-section h3 {
  margin: 0 0 40px;
  font-size: 22px;
  font-weight: 400;
  color: #e2e1e1;
}
.login-18 .form-section .form-group {
  margin-bottom: 15px;
}
.login-18 .form-section .form-control {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #535353;
  border-radius: 50px;
  height: 50px;
  border: 1px solid #fff;
  background: #fff;
}
.login-18 .form-section label {
  color: #e2e1e1;
  font-size: 16px;
}
.login-18 .form-section label.error {
  color: #f3fdf8;
  font-size: 12px !important;
  margin-bottom: 0px !important;
  font-weight: 400;
  background-color: #cc3e71;
  opacity: 0.7;
  padding: 2px 10px;
  margin-left: 15px;
  border-radius: 5px;
}
.login-18 .form-section .error-input {
  border: 2px solid #c22f2f !important;
}
.glossy-button {
  display: inline-block;
  position: relative;
  background-color: #19F;
  background-image: linear-gradient(
    hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
    hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
  );
  font-size: 22px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 20px 40px;
  text-shadow: 0 0 15px #fff, 0 2px 4px rgba(0,0,0,0.7);
  border: none;
  border-radius: 50px;
  margin: 10px;
  box-shadow:
    inset 0 -5px 20px rgba(0,0,0,0.4),
    inset 0 5px 20px rgba(255,255,255,0.4),
    -8px 8px 5px rgba(0,0,0,0.15),
    5px 18px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.glossy-button:before {
  content: '';
  display: block;
  position: absolute;
  left: 20px; right: 20px; top: 5px; height: 30px;
  border-radius: 15px;
  background: linear-gradient(hsla(0,0%,100%,0.8), hsla(0,0%,100%,0));
}
.glossy-button--blue { background-color: #19F; }
.glossy-button--gold { background-color: #EA0; }
.glossy-button--green { background-color: #6C6; }
.glossy-button--red { background-color: #E21; }
.glossy-button:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px rgba(0,0,0,0.4),
    inset 0 5px 20px rgba(255,255,255,0.4),
    -12px 12px 5px rgba(0,0,0,0.15),
    10px 25px 10px rgba(0,0,0,0.2);
}

/* ----------- JEU (GAME) ----------- */
.custom-game .container {
  max-width: 80rem;
  margin: 3rem auto;
  font-size: .9rem;
}
.custom-game .start-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;
}
.custom-game .start-box.show { display: none; }
.custom-game .game-logo { display: flex; justify-content: center; }
.custom-game .game-logo img { width: 10rem; height: 10rem; }
.custom-game .instruction {
   /* display: inline-block;
  padding: 5.5rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  color: #fff;
  background-image: url("../images/bg-questions.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;*/
    display: inline-block;
  padding: 5.5rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  color: #fff;
  background-image: linear-gradient( -225deg, rgba(61, 78, 129, 0.8) 0%, rgba(87, 83, 201, 0.8) 48%, rgba(110, 127, 243, 0.8) 100% );
  border: 2px solid #3689e7;
}
.custom-game .instruction h3 { text-align: center; }
.custom-game .user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: .5rem;
}
.custom-game .user-info input {
  padding: .8rem;
  font-size: 1.2rem;
  border-radius: 1rem;
  outline: none;
}
.custom-game .btn2 {
  /*padding: .8rem;
  border: 2px solid var(--primary-color-2);
  cursor: pointer;
  border-radius: 1rem;
  margin-top: .5rem;
  transition: all .3s linear;*/
    background-color: #000;
  margin-top: .5rem;
  padding: 14px;
  /*font-size: 1.8rem;*/
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  border: 2px solid #3689e7;
  border-radius: 3rem;
  cursor: pointer;
}
.custom-game .start-game-btn:hover {
  /*background-color: var(--primary-color-2);
  color: var(--black-color-2);*/
}
/* Main game */
.custom-game .game-box { display: none; }
.custom-game .game-box.show { display: flex; }
.custom-game .game-box .game {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(/assets/front/images/bg-game.jpg) no-repeat center center;
  background-size: cover;
  border: 3px solid #3689e7;
  border-radius: 1rem;
}
.custom-game .game-box .game .timer {
  display: flex; justify-content: center; align-items: center;
  position: absolute; left: 0; top: 0;
  margin-top: 1rem; margin-left: 1rem;
  width: 6rem; height: 6rem;
  text-align: center; font-size: 2.8rem; font-weight: 800;
  border-radius: 50%; border: 2px solid green; color: green;
  transition: all .1s linear;
}
.custom-game .game-box .game .timer.less-time {
  border: 2px solid red;
  color: red;
}
/*
.timer.paused {
    color: #FFD700;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}*/
/* Lifelines */
.custom-game .game-box .game .life-line-display-box {
  /*position: absolute; display: none;
  justify-content: center; align-items: center;
  bottom: 0; margin-bottom: 16.5rem;*/
  width: 15rem; height: 10rem;
  background-color: var(--black-color-2);
  transition: all .3s linear;
  animation: moveDown 1s linear;
    
    position: relative;
  display: none;
  justify-content: center;
  align-items: center;
  top: 20px;
  margin-bottom: 0.5rem;
}
@keyframes moveDown {
  0% { opacity: 0; transform: translateY(-20rem); }
  100% { opacity: 1; transform: translateY(0); }
}
.custom-game .game-box .game .life-line-display-box.show { display: flex; }
.custom-game .game-box .game .life-line-display-box .amount-won { display: none; color: var(--wrong-color-2);}
.custom-game .game-box .game .life-line-display-box .amount-won.show { display: block; }
.custom-game .life-line-display-box .call,
.custom-game .au-cover { display: none; flex-direction: column; width: 100%;padding: 15px; }
.custom-game .life-line-display-box .call.show { display: flex; color: #deb887; }
.custom-game .life-line-display-box .call img { width: 5rem; height: auto; animation: pulse 1s linear infinite;}
@keyframes pulse { 0%{ opacity: 0; } 100%{ opacity: 1; } }
.custom-game .au-cover.show { display: block; }
.custom-game .au-cover .alpha { /*letter-spacing: 3rem; padding-left: 1.5rem;*/ letter-spacing: 2.3rem; padding-left: 1.2rem; color: var(--wrong-color-2);}
.custom-game .au-container { display: flex; background-color: #000; }
.custom-game .au-container.show { animation: moveDown 1s linear; }
.custom-game .au-box {
  width: 4rem; height: 7rem;
  border: 1px solid #fff;
  display: flex; justify-content: center; align-items: center;
  position: relative; transition: all .3s; cursor: pointer;
    color: #f1f1e3;
}
.custom-game .bx {
  position: absolute; left: 0; bottom: 0; width: 100%;
  background-color: gold; opacity: 0.7; transition: all .3s;
}
.custom-game .au-box:not(:last-child) { margin-right: 5px; }
/* Question */
.custom-game .game-box .game .question-box {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  width: 80%; bottom: 0;
    
}
.custom-game .game-box .game .question-box .question {
  position: relative; background-color: #000; width: 100%;
  box-sizing: border-box; text-align: center;
  padding: 1.2rem 1rem; border: 2px solid #3689e7; border-radius: 3rem; opacity: 0;
}
.custom-game .game-box .game .question-box .question-text{color: #fff;}
.custom-game .game-box .game .question-box .question-number { position: absolute; display: none; top: -1.2rem; left: -1rem; background-color: var(--black-color-2); border: 2px solid #3689e7; padding: .5rem; border-radius: 50%; color: #ffd700; }
.custom-game .game-box .game .question-box .question.show { animation: zoomInOut .3s linear forwards; }
@keyframes zoomInOut {
  0% { opacity: 0; transform: scale(3);}
  100% { transform: scale(1); opacity: 1;}
}
.custom-game .game-box .game .question-box .option-box {
  display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; font-weight: 400; padding-bottom: 1rem;
}
.custom-game .game-box .game .question-box .option-box .option {
  background-color: #000;
  flex-basis: calc(50% - 2rem);
  max-width: calc(50% - 2rem);
  margin-top: 5px; padding: 14px 5px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #fff;
  border: 2px solid #3689e7;
  border-radius: 3rem;
  cursor: pointer;
  opacity: 0; 
}
.custom-game .game-box .game .question-box .option-box .option .span-o { color: gold; }
.custom-game .game-box .game .question-box .option-box .option .opt { color: #fff; }
.custom-game .game-box .game .option-box .option:nth-child(1).show-1,
.custom-game .game-box .game .option-box .option:nth-child(2).show-1{
    animation: zoomInOut .3s linear forwards;
    animation-delay: .5s;
}
.custom-game .game-box .game .option-box .option:nth-child(3).show-2,
.custom-game .game-box .game .option-box .option:nth-child(4).show-2{
    animation: zoomInOut .3s linear forwards;
    animation-delay: 1s;
}
.custom-game .game-box .game .question-box .option-box .option.already-answered { pointer-events: none; }
.custom-game .game-box .game .question-box .option-box .option.show-correct { background-color: #11c466; border-color: #059e4c; color: #fff; }
.custom-game .game-box .game .question-box .option-box .option.correct { background-color: var(--correct-color-2); border-color: var(--correct-color-2); color: #fff; opacity: 1;}
.custom-game .game-box .game .question-box .option-box .option.wrong { background-color: var(--wrong-color-2); border-color: var(--wrong-color-2); color: #fff; opacity: 1;}
.custom-game .next-question { padding-bottom: 1rem; }
.custom-game .next-question-btn,
.custom-game .playAgain-btn {
  outline: none;
  border: none;
  border: 2px solid #3689e7;
  background-color: #000;
  color: #fff;
  display: none;
  animation: fromRight 1s linear forwards;
  border-radius: 3rem;
  padding: 10px 25px;
  margin: 5px;
}
.custom-game .next-question-btn.show,
.custom-game .playAgain-btn.show { display: inline-block; }
@keyframes fromRight {
  0% { transform: translateX(300px);}
  100% { transform: translateX(0);}
}
/* Side */
.custom-game .game-box .side {
  display: flex; flex-direction: column; align-items: center;
}
.custom-game .game-box .side .life-lines {
  display: flex; justify-content: space-evenly; /*background-color: var(--black-color-2);*/ width: 100%;
}
.custom-game .game-box .side .life-lines .fify50,
.custom-game .game-box .side .life-lines .callAFriend,
.custom-game .game-box .side .life-lines .askTheAudience {
  display: flex; justify-content: center; align-items: center; position: relative;
  background-size: 100% 100%; height: 4rem; width: 4rem; cursor: pointer; border-radius: 50%;
}
.custom-game .game-box .side .life-lines .fify50 { background-image: url("/assets/front/images/btn-50.png"); }
.custom-game .game-box .side .life-lines .callAFriend { background-image: url("/assets/front/images/btn-call.png"); }
.custom-game .game-box .side .life-lines .askTheAudience { background-image: url("/assets/front/images/btn-audience.png"); }
.custom-game .fify50 .cancel,
.custom-game .callAFriend .cancel,
.custom-game .askTheAudience .cancel {
  background: url("/assets/front/images/cancel.png");
  background-size: 100% 100%;
  display: none;
  position: absolute; width: 3rem; height: 3rem;
}
.custom-game .fify50 .cancel.show,
.custom-game .callAFriend .cancel.show,
.custom-game .askTheAudience .cancel.show { display: flex; }
.custom-game .game-box .side .price-box {
  border: 3px solid #3689e7;
  border-radius: 1rem;
    /*background: linear-gradient(to top, #30cfd0 0%, #330867 100%);*/
    background: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
}
.custom-game .game-box .side .price-box .prices {
  list-style-position: inside;
  margin-left: 0;
}
.custom-game .game-box .side .price-box .prices li {
  padding: 0 .5rem;
  text-indent: -.1rem;
  color: gold;
}
.custom-game .game-box .side .price-box .prices span {
  color: var(--wrong-color-2);
  margin: 0 .3rem;
}
.custom-game .game-box .side .price-box .prices li:nth-child(1),
.custom-game .game-box .side .price-box .prices li:nth-child(11),
.custom-game .game-box .side .price-box .prices li:nth-child(6) {
  color: #fff;
}

/* ----------- POPUP ----------- */
.js-notify-msg, #popup, #popup2, .bMulti {
  display: none;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 25px 5px #999;
  color: #111;
  min-width: 300px; max-width: 600px;
  padding: 25px;
}
#popup2 .button {
  background-color: #2b91af;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
}
#popup2 .button.b-close {
  border-radius: 7px;
  font: bold 131% sans-serif;
  padding: 2px;
  position: absolute;
  right: -10px;
  top: -15px;
  width: 23px; height: 23px;
}

/* ----------- ACCESSIBILITÉ ----------- */
button:focus, .btn:focus, .form-control:focus {
  outline: 2px solid #2569b6;
  outline-offset: 2px;
  box-shadow: none;
}

.c_lock {
 background-color: cornflowerblue;
  opacity: 0.4;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  margin: 30px;
}
.c_loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 0.6s ease-in infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.login-18 .form-section label.error {
  /*color:#e9967a;*/
  /*color:aqua;*/
  color: #f3fdf8;
  /*display: block !important;*/
  /*font-size: 11px !important;*/
  font-size: 12px !important;
  margin-bottom: 0px !important;
  font-weight: 400;
	/*background-color: gray;*/
	background-color: #cc3e71;
  opacity: 0.7;
  /*padding: 2px;*/
	padding: 2px 10px;
  margin-left: 15px;
  border-radius: 5px;
}
.login-18 .form-section .ul-inputs label.error {
  position: relative;
  bottom: 15px;
}
.login-18 .form-section .error-input {
  border: 2px solid #c22f2f !important;
    border-radius: 50px;
}
.login-18 .form-section ul.error-input {
  padding-top: 5px;
}
.responsive {
  width: 100% !important;
  height: auto !important;
}
 .login-18 .form-section label.error {
  margin-top: 3px;
}
     .login-18 .logo-2 img.responsive {
 height: 80px !important;
  width: auto !important;
}
    .login-18 .form-section h3 {
  margin: 0 0 30px;
  font-size: 18px;
}
    .login-18 .form-section label {
  color: #e2e1e1;
  font-size: 14px;
}
    .login-18 .form-section .form-control {
  height: 40px;
}
@media (max-width: 992px) {
   .c_lock {
top: 25%;
  left: -5%;
  right: -15px;
  bottom: 3%;
}
}

.c-spin {
/*max-width: 666px;*/
	max-width: 100%;
}
@media screen and (min-width: 1600px) {
 .c-spin {
max-width: 100%;
}
}
@media screen and (min-width: 1900px) {
  .c-spin {
max-width: 100%;
}
}
/* ----------- RESPONSIVE ----------- */
@media only screen and (max-width: 920px) {
  .custom-game .container, .custom-game .container .custom, .custom-game .game-box {
    width: 100%; margin: 0; padding: 0; height: 100vh; border-radius: 0; box-shadow: none;
  }
  .custom-game .game-box.show { flex-direction: column; }
  .custom-game .game-box .game { width: 100%; height: 90%; order: 2; border-radius: 0; border: 1px solid var(--white-color-2); border-top: none; }
  .custom-game .game-box .side { width: 100%; height: 10%; order: 1; padding: 0; border: 1px solid var(--white-color-2);}
  .custom-game .price-box .prices { display: none; }
  .custom-game .game-box .game .question-box .question-number,
  .custom-game .game-box .current-question-amount { display: block; }
  /*.login-18 .form-section { padding: 50px 30px; }*/
  /*.glossy-button { padding: 12px 35px; }*/
    body {
  /*background-size: contain;*/
}
    .login-18 .form-section {
    padding: 25px 60px;
  }
    .login-18 .form-section h3 {
  margin: 0 0 25px;
  font-size: 18px;
}
    .login-18 .form-section .form-group {
  margin-bottom: 10px;
}
 .login-18 .form-section label {
  font-size: 14px;
}
    .login-18 .form-section .form-control {
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 300;
  height: 35px;;
}
     .glossy-button {
    padding: 12px 0px;
  }
}
/* Très grands écrans (TV 4K paysage) */
@media (min-width: 993px) {
 body {
    background-image: url('../images/bg-image-3840-2160.webp');
  }   
}
@media (max-width: 1366px) {
   body {
    background-image: url('../images/bg-image-2160-3840.webp');
  } 
    .game-logo img.responsive{
        width: 15rem !important; 
    }
}
@media (max-width: 992px) {
  body {
    background-image: url('../images/bg-image-1920-1080.webp');
  }
   
}

@media (max-width: 768px) {
   body {
    background-image: url('../images/bg-image-1080-1920.webp');
    /*background-attachment: scroll;*/ /* Meilleur pour mobile */
  } 
   .custom-game .instruction {
  padding: 0;
  margin: 1rem 2.5rem;
       font-size: 12px;
}
    .custom-game .btn2 {
  font-size: 1.2rem;
    }
    .custom-game .game-box .game .question-box .option-box {
  display: inline-block;
    }
    .custom-game .game-box .game .question-box .option-box .option {
  max-width: 100%;
        padding: 10px 5px;
    }
    .custom-game .game-box .game .timer {
  position: relative;
        width: 4rem;
  height: 4rem;
  font-size: 1.8rem;
    }
     .custom-game .game-box .side {
    /*width: 65%;
    height: 104%;
    order: 2;*/
    padding: 0px;
    border: 1px solid var(--white-color-2);
    position: absolute;
  }
    .custom-game .container,
  .custom-game .container .custom,
  .custom-game .game-box {
    width: 100vw;
    overflow-x: hidden;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
    /* 
  .custom-game .game-box .side {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 10px;
    height: auto;
    position: relative;
    order: 0;
  }

 
  .custom-game .game-box .side .price-box,
  .custom-game .game-box .side .life-lines {
    display: block;
    width: 48%; 
  }

  .custom-game .game-box .side .life-lines {
    order: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .custom-game .game-box .side .price-box {
    order: 2;
    text-align: right;
  }

  
  .custom-game .game-box .side .life-lines .fify50,
  .custom-game .game-box .side .life-lines .callAFriend,
  .custom-game .game-box .side .life-lines .askTheAudience {
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
  }

  
  .custom-game .price-box .prices {
    font-size: 12px;
    padding: 0;
    margin: 0;
  }

  .custom-game .price-box .prices li {
    padding: 2px 0;
  }
    */
    /*
    .custom-game .game-box {
    flex-direction: column-reverse;
  }

  .custom-game .game-box .game {
    order: 2;
  }

  .custom-game .game-box .side {
    order: 1;
  }
    */
    /*
    .custom-game .game-box.show {
    flex-direction: column;
  }

  .custom-game .game-box .game {
    width: 100%;
    order: 2;
    border-radius: 0;
    border: 1px solid var(--white-color-2);
    height: auto;
    min-height: 60vh;
  }
  .custom-game .game-box .side {
    order: 1;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 10px;
    height: auto;
    position: relative;
    border: none;
  }
  .custom-game .game-box .side .life-lines {
    order: 1;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    width: 48%;
  }
  .custom-game .game-box .side .price-box {
    order: 2;
    display: block;
    width: 48%;
    text-align: right;
  }
  .custom-game .game-box .side .life-lines .fify50,
  .custom-game .game-box .side .life-lines .callAFriend,
  .custom-game .game-box .side .life-lines .askTheAudience {
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
  }
  .custom-game .price-box .prices {
    font-size: 12px;
    padding: 0;
    margin: 0;
  }

  .custom-game .price-box .prices li {
    padding: 2px 0;
  }*/
}
/* --- DIVERS --- */
.pt-wrapper { position: relative; width: 100%; height: 100%; perspective: 1200px; }
.pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); transform-style: preserve-3d;}
.pt-page-current, .no-js .pt-page { visibility: visible; z-index: 1; }

/* Ajoutez ceci à votre CSS */
.au-box {
    position: relative;
    width: 100%;
    height: 100px;
    background: #333;
    margin-top: 10px;
    border-radius: 4px;
    overflow: hidden;
}

.au-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #4CAF50;
    height: 0%;
    transition: none; /* Désactivé pour les animations JS */
}

.au-percent {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.timer.paused {
    color: #FFD700;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
/*
@media (max-width: 768px) {
    .custom-game .game-box .side {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        order: 2;
        padding: 10px;
        border: 1px solid #3689e7;
        position: relative;
        height: auto;
    }

    .custom-game .price-box {
        order: 2; 
        width: 60%;
        margin-left: auto;
        padding: 10px;
        border-radius: 10px;
    }

    .custom-game .life-lines {
        order: 1; 
        width: 35%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .custom-game .life-lines .fify50,
    .custom-game .life-lines .callAFriend,
    .custom-game .life-lines .askTheAudience {
        margin-bottom: 15px;
        width: 50px;
        height: 50px;
    }
    .custom-game .price-box .prices {
        font-size: 12px;
        padding-left: 15px;
    }
    .custom-game .game {
        order: 1;
        height: 70vh;
    }
    .custom-game .game-box .game .question-box .option-box .option {
        padding: 8px 5px;
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .custom-game .price-box {
        width: 55%;
    }

    .custom-game .life-lines {
        width: 40%;
    }

    .custom-game .price-box .prices {
        font-size: 11px;
    }
}
*/
@media (max-width: 768px) {
     .glossy-button {
    padding: 5px 0px;
  }
    .custom-game .game-box .game .btn-quit {
  display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0;
    margin-top: 1rem;
    margin-left: 1rem;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #dcdcdc;
    color: gainsboro;
    transition: all .1s linear;
    background-color: #33324a;
}
      .custom-game .game-box .game .btn-quit {
    position: absolute;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
          cursor: pointer;
          z-index: 9999;
  }
    .custom-game .container {
  font-size: .8rem;
}
    /* Réorganisation complète pour mobile */
    .custom-game .game-box {
        flex-direction: column;
    }

    .custom-game .game {
        order: 1;
        width: 100%;
        height: auto;
        min-height: 60vh;
    }
     .custom-game .game-box .game {
    width: 100%;
    height: 100%;
    }
.custom-game .au-cover .alpha {
  letter-spacing: 1.8rem;
  padding-left: 0.2rem;
}
     .custom-game .game-box .side {
        order: 2;
       /* display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;*/
         display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    padding: 260px;
        /*background: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);*/
        background: transparent;
        /*border: 2px solid #3689e7;*/
        border: none;
        border-radius: 10px;
        margin-top: 10px;
        z-index: 9999;
         bottom: 20%;
         width: 100%;
    height: 100%;
    }
.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}
    .col-sm-4{flex:0 0 auto;width:33.33333333%}
    .custom-game .life-lines {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 5px;
    }
   
    .custom-game .game-box .side .life-lines {
         position: absolute;
  /*bottom: 70%;*/
       /* width: 65%;*/
        width: 95%;
    }
 .custom-game .price-box .prices {
    font-size: 10px;
    padding-left: 5px;
  }
  .custom-game .game-box .side .price-box {
        /*width: 55%;*/
        width: 25%;
        padding: 10px 1px 1px !important;
       border: 2px solid #3689e7;
    background: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
    right: 15px;
    position: relative;
    }
    

    .custom-game .life-lines .fify50,
    .custom-game .life-lines .callAFriend,
    .custom-game .life-lines .askTheAudience {
        margin-bottom: 10px;
        width: 50px;
        height: 50px;
    }

    /* Ajustement des prix pour mobile */
    .custom-game .price-box .prices {
        font-size: 10px;
        padding-left: 3px;
    }
   
    .custom-game .price-box .prices {
    display: block;
        margin-left: 0;
  }
     .custom-game .game-box .side .price-box .prices li {
  padding: 0;
         text-indent: 0rem;
    }
    .custom-game .game-box .side .price-box .prices span {
  margin: 0 .1rem;
}
    .custom-game .game-box .game .question-box {
  z-index: 10000;
}
    .custom-game .game-box .game .life-line-display-box {
  width: 12rem;
  height: 11rem;
    }
    .custom-game .game-box .side .life-lines .fify50, .custom-game .game-box .side .life-lines .callAFriend, .custom-game .game-box .side .life-lines .askTheAudience {
  height: 3rem;
  width: 3rem;
}
    .custom-game .fify50 .cancel, .custom-game .callAFriend .cancel, .custom-game .askTheAudience .cancel {
  width: 2.5rem;
  height: 2.5rem;
}
    .custom-game .life-line-display-box .call img { width: 2rem; height: auto;}
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
    .custom-game .life-lines {
        width: 45%;
    }

    .custom-game .price-box {
       /* width: 50%;*/
    }

    .custom-game .price-box .prices {
        font-size: 11px;
    }
}

.js-quit-confirm {
    display: none;
    background: rgba(0,0,0,0.8);
    padding: 20px;
    border-radius: 10px;
    color: white;
    max-width: 400px;
    margin: 0 auto;
}

.quit-confirm-content {
    text-align: center;
}

.quit-confirm-content h3 {
    color: #fff;
    margin-bottom: 15px;
}

.quit-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .quit-confirm-buttons {
        flex-direction: column;
    }
    
    .js-quit-confirm {
        width: 90%;
    }
}