* {
      margin: 0;
      padding: 0;
}

/*********/
/* FONTS */
/*********/

/* #region FONTS */

@font-face {
      font-family: 'RubikDirt';
      src: url('fonts/RubikDirt-Regular.ttf') format('truetype');
      font-display: block;
}

@font-face {
      font-family: 'RobotoMono-Bold';
      src: url('fonts/RobotoMono-Bold.ttf') format('truetype');
}

@font-face {
      font-family: 'RobotoMedium';
      src: url('fonts/Roboto-Medium.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
}

@font-face {
      font-family: 'SpaceGrotesk-Light';
      src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
}

@font-face {
      font-family: 'SpaceGrotesk-Medium';
      src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
}

/* #endregion FONTS */

:root {
      --main: 'SpaceGrotesk-Light', sans-serif;
      --main_medium: 'SpaceGrotesk-Medium', sans-serif;
      --grunge: 'RubikDirt', sans-serif;
      --mono: 'RobotoMono-Bold', sans-serif;

      --couleur_brun_clair: #a9896a;
      --couleur_brun_fonce: #30271e;
      --couleur_brun_tres_fonce: #23201d;
      --couleur_brun_fonce_accueil: #342f2a;
      --couleur_brun_fonce_alpha: #30271eDD;
      --couleur_sous_titres: #000000ee;
      --couleur_vive_: #ffba6c;
      --couleur_vive__: #f8e891;
      --couleur_vive: #ffe1c2;
      --couleur_vive_alpha_0: rgba(255, 225, 194, 0.066);
      --couleur_vive_alpha_1: rgba(255, 225, 194, 0.133);
      --couleur_vive_alpha_2: rgba(255, 225, 194, 0.25);
      --couleur_vive_alpha_3: rgba(255, 225, 194, 0.5);
      --couleur_vive_alpha_4: rgba(255, 225, 194, 0.75);
      --couleur_blanc_casse: #f9f1e2;
      --couleur_blanc_casse_alpha_0: #f9f1e211;
      --couleur_blanc_casse_alpha_1: #f9f1e222;

      --couleur_france_tv: #172128;
      --couleur_france_tv_alpha: #172128DD;
      --couleur_france_tv_ultra_light: #c3ddee;
      --couleur_france_tv_ultra_light_2: #9cbcd1;

      --progress_bar_thickness: 7px;
      --progress_bar_thickness_mobile: 5px;

      --progress_items_container_size: 16dvh;
      --progress_items_container_size_mobile: 24vw;

      --font_size_texte: 1.25rem;
      --font_size_titre: 3.5rem;

      --mobile_horizontal_padding: 9vw;

      --mobile_font_size_texte: 1.1rem;
      --mobile_font_size_titre: 2.2rem;

      --font_size_button: 2rem;
      --mobile_font_size_button: 1.5rem;

      --font_size_xsmall: 0.75rem;
      --font_size_small: 1rem;
      --font_size_small_medium: 1.25rem;
      --font_size_medium: 1.5rem;
      --font_size_medium_large: 2rem;
      --font_size_large: 2.25rem;
      --font_size_xlarge: 3rem;
      --font_size_xxlarge: 4rem;

      --mobile_font_size_xsmall: 0.75rem;
      --mobile_font_size_small: 1rem;
      --mobile_font_size_small_medium: 1.25rem;
      --mobile_font_size_medium: 1.5rem;
      --mobile_font_size_medium_large: 2rem;
      --mobile_font_size_large: 2.25rem;
      --mobile_font_size_xlarge: 3rem;
      --mobile_font_size_xxlarge: 4rem;

}

* {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
}

html,
body {
      background-color: #000000;
      color: azure;
      font-family: var(--main);
      user-select: none;
      overflow: hidden;
      /* Désactive le pull-to-refresh sur mobile */
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
      /* Désactive le zoom sur mobile */
      touch-action: none;
}





/**********/
/* header */
/**********/

/* #region header */

#homepage_header,
#endpage_header {

      pointer-events: all;
      display: block;
      position: absolute;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      height: 96px;
      width: 100%;
      background-image: url('images/ui/background-header_xlarge.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /*background-color: var(--couleur_france_tv);*/
      z-index: 2;
      top: 0;
      /*background: linear-gradient(90deg, rgba(29,22,19,0) 0%, rgba(29,22,19,0) 100%);*/
}


#homepage_body,
#endpage_body {
      position: absolute;
      top: 0px;
      height: 100dvh;
}

#homepage_francetv_logo, #endpage_francetv_logo {
      cursor: pointer;
}

.logo_full {
      display: none;
}

.logo_small {
      display: block;
}

@media screen and (min-width: 768px) {
      #homepage_header {
            padding-left: 32px;
            padding-right: 32px;
      }

      .logo_full {
            display: block;
      }

      .logo_small {
            display: none;
      }
}

@media screen and (min-width: 1440px) {
      #homepage_header {
            padding-left: 56px;
            padding-right: 56px;
      }

      .logo_full {
            display: block;
      }

      .logo_small {
            display: none;
      }
}

#homepage_header_content,
#endpage_header_content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
}

#homepage_show_serie_bt,
#endpage_show_serie_bt {
      cursor: pointer;
}

#enter_bt,
#replay_bt,
#share_bt,
#start_bt {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      height: 44px;
}

/* #endregion header */



/*******************/
/* bad orientation */
/*******************/

/* #region bad orientation */

#bad_orientation {
      display: none;
      pointer-events: none;
      position: absolute;
      align-items: center;
      justify-content: center;
      touch-action: none;
      width: 100%;
      height: 100%;
      background-color: #000000;
      z-index: 99999999;
}

#bad_orientation img {
      max-width: 6.5rem;
      display: block;
}


@media only screen and (orientation:landscape) {
      .isMobile #bad_orientation {
            display: flex;
      }
}

@media only screen and (orientation:portrait) {
      .isNotMobile #bad_orientation {
            display: flex;
      }
}

/* #endregion bad orientation */




.show {
      opacity: 1;
      transition: 0.5s opacity ease-in-out;
}

.hide {
      opacity: 0;
      transition: 0.5s opacity ease-in-out;
}


#app {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
}


#canvas {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 9998;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -moz-user-select: none;
      -ms-user-select: none;
      /* Empêche le pull-to-refresh et les gestes de navigation */
      overscroll-behavior: none;
      touch-action: none;
}

#hidden {
      display: none;
}

#overlay {
      position: absolute;
      z-index: 99997;
      pointer-events: none;
}



/*********/
/* debug */
/*********/

#debug {
      font-family: var(--main);
      pointer-events: all;
      display: none;
      position: absolute;
      right: 100px;
      z-index: 99999;
      color: #FFFFFF;
      font-size: var(--font_size_small);
      background-color: #00000066;
      padding: 1rem;
      user-select: text;
}


/***********/
/* loading */
/***********/

/* #region loading */

#loading {
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      align-items: center;
      justify-content: center;
      background-color: #000000;
      padding: 2em;
      z-index: 99999999;
      user-select: none;
      cursor: pointer;
}

.loader {
      position: relative;
      width: 50px;
      height: 50px;
}

.loader:before,
.loader:after {
      content: '';
      border-radius: 50%;
      position: absolute;
      inset: 0;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}

.loader:after {
      box-shadow: 0 3.5px 0 var(--couleur_vive) inset;
      animation: rotate 1.5s linear infinite;
}

/* #endregion loading */



/***********/
/* accueil */
/***********/

/* #region accueil */

#home,
#end {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      background-color: var(--couleur_brun_fonce_accueil);
      padding: 3em;
      z-index: 99999;
      user-select: none;
}

#end {
      z-index: 99999999;
      background-color: #000000DD
}

#logo img {
      max-width: 40vw;
      max-height: 25vh;
}

.isMobile #logo img {
      max-width: 90vw;
      max-height: 50vh;
}

#homepage_body_content,
#endpage_body_content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      bottom: 0;
      top: 0;
      right: 0;
      left: 0;
      position: absolute;
      padding-bottom: 0px;
}

#endpage_body_content {
    gap: 1rem;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
}

.isMobile #endpage_body_content {
      background: radial-gradient(circle, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%);
}

#homepage_body_over_video_background {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;

      background: radial-gradient(circle, rgb(0, 0, 0) 0%,
                  rgba(0, 0, 0, 0.22) 60%,
                  rgba(0, 0, 0, 0) 100%);
}

.isMobile #homepage_body_over_video_background {
      background: radial-gradient(circle, rgb(0, 0, 0) 0%,
                  rgba(0, 0, 0, 0) 120%);
}

.endText {
      font-family: var(--main_medium);
      font-size: var(--font_size_medium);
      color: var(--couleur_blanc_casse);
      text-align: center;
      max-width: 50vw;
      min-width: 50vw;
      text-shadow: 0 0 10px var(--couleur_vive_alpha_2), 0 0 20px var(--couleur_vive_alpha_3);
      display: flex;
      justify-content: center;
}

.isMobile .endText {
      font-size: var(--mobile_font_size_medium);
      max-width: 80vw;
      min-width: 80vw;
}

#replay_bt
{
      margin-top: 2rem;
}

.isMobile #replay_bt
{
      margin-top: 4rem;
}

#share_bt
{
      margin-bottom: 2rem;
}

.credits_bt
{
      font-family: var(--main);
      font-size: var(--font_size_small);
      color: var(--couleur_vive_alpha_4);
      text-align: center;
      text-shadow: 0 0 10px var(--couleur_vive_alpha_2), 0 0 20px var(--couleur_vive_alpha_3);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      margin-top: 2rem;
}

.isMobile .credits_bt
{
      font-size: var(--mobile_font_size_small); 
      margin-top: 4rem;
}

/* #endregion accueil */



/***********/
/* credits */
/***********/

/* #region credits */

#credits
{
      position: absolute;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      background-color: #000000EE;
      color: var(--couleur_blanc_casse);
      font-size: var(--font_size_small);
      text-align: center;
      padding-left: 20px;
      padding-right: 20px;
      max-width: 100%;
      z-index: 99999999; 
}

.isMobile #credits
{
      font-size: var(--extra_small);
      padding-left: 15px;
      padding-right: 15px;
}

#credits a:link,a:visited,a:active
{
      color: var(--couleur_vive);
}
#credits a:hover
{
      color: #FFFFFF;
}

.mediumTitreCredits
{
      color: var(--couleur_vive);
}

#textes_credits
{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem; 
}

.isMobile #textes_credits
{
      gap: 0.25rem; 
}

.bigTitreCredits
{
      color: #FFFFFF;
      font-size: var(--small_medium);
}

.titreCredits
{
      color: var(--couleur_brun_clair);
}

#closeCreditsBt img {
      width: 3.5rem;
}


.isMobile #closeCreditsBt img {
      width: 2.75rem;
}

/* #endregion credits */



/******/
/* UI */
/******/

/* #region UI */

.uiVisible,
.uiHidden {
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 9999999;
      pointer-events: none;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s ease-in-out 0.25s, visibility 0.5s ease-in-out 0.25s;
}

.uiHidden {
      opacity: 0;
      visibility: hidden;
}


#progressButton,
#muteBt {

      background: repeating-linear-gradient(90deg, #000000DD 0%, #000000BB 50%, #000000DD 100%);
      background-size: 300px 100%;
      background-repeat: repeat-x;
      animation: gradientSlideActionProgressButton 4s linear infinite;
      box-shadow: 0 0 4rem var(--couleur_vive_alpha_1), 0 0 5rem var(--couleur_vive_alpha_2);
      border: 3px solid var(--couleur_vive);
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
      will-change: background-position;

      position: fixed;
      left: 4vh;
      bottom: 4vh;
      width: 9vh;
      height: 9vh;
}

#muteBt {
      width: 5.5vh;
      height: 5.5vh;
      right: 4vh;
      left: unset;
      border: unset;
}

.isMobile #progressButton,
.isMobile #muteBt {
      width: 7vh;
      height: 7vh;
      top: unset;
      bottom: 2.5vh;
      left: 2.5vh;
      padding-bottom: unset;
      z-index: 9;
      border: unset;
      background: repeating-linear-gradient(90deg, #000000AA 0%, #00000066 50%, #000000AA 100%);
}

.isMobile #muteBt {
      right: 2.75vh;
      left: unset;
      background: unset;
      box-shadow: unset;
}

#progressButton img,
#muteBt img {
      width: 70%;
      height: 70%;
      object-fit: contain;
}

.isMobile #progressButton img,
.isMobile #muteBt img {
      width: 70%;
      height: 70%;
      object-fit: contain;
}

.progressButtonHidden {
      opacity: 0;
}

.progressCount {
      position: absolute;
      background-color: var(--couleur_vive);
      display: flex;
      color: var(--couleur_brun_fonce);
      font-family: var(--main_medium);
      text-align: center;
      align-items: center;
      justify-content: center;
      right: -0.3vh;
      top: -0.3vh;
      border-radius: 1.25rem;
      width: 3vh;
      height: 3vh;
      font-size: var(--font_size_small)
}

.isMobile .progressCount {
      width: 3vh;
      height: 3vh;
      right: -1vh;
      top: -1vh;
      font-size: 2.25vh;
}

.chrono {
      position: absolute;
      right: 1.5rem;
      top: 1.5rem;
      z-index: 9999;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      pointer-events: none;
}

.isMobile .chrono {
      right: unset;
      top: unset;
      bottom: 2.5vh;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 7vh;
}

/*.chronoCount_ {
      position: absolute;
      background: var(--couleur_brun_fonce_alpha);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--couleur_blanc_casse);
      display: flex;
      font-family: var(--mono);
      letter-spacing: 0.15rem;
      text-align: center;
      align-items: center;
      justify-content: center;
      border-radius: 0rem 0rem 0rem 10rem;
      padding: .75rem;
      padding-left: 3rem;
      padding-right: 2rem;
      font-size: 2.5rem;
}*/

.chronoCount {
      font-family: var(--mono);
      font-size: var(--font_size_medium);
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, #000000DD 0%, #000000BB 50%, #000000DD 100%);
      background-size: 250px 100%;
      background-repeat: repeat-x;
      animation: chronoSlideAction 5s linear infinite;
      box-shadow: 0 0 4rem var(--couleur_vive_alpha_1), 0 0 5rem var(--couleur_vive_alpha_2);
      border: 3px solid var(--couleur_vive);
      border-radius: 5rem 5rem 5rem 5rem;
      display: inline-block;
      padding: 0.75rem 1.5rem;
      cursor: pointer;
      pointer-events: none;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      will-change: background-position;
}

.isMobile .chronoCount {
      background: unset;
      background-size: unset;
      background-repeat: unset;
      animation: unset;
      transition: unset;
      box-shadow: unset;
      border: unset;
      border-radius: unset;

      font-family: var(--mono);
      font-size: var(--mobile_font_size_medium_large);
      color: var(--couleur_vive);
      border-radius: 5rem 5rem 5rem 5rem;
      padding: unset;
      pointer-events: none;
}


.menu_button img {
      height: 100%;
      width: 100%;
      object-fit: contain;
}

.isMobile .menu_button img {
      height: 100%;
      width: 100%;
      object-fit: contain;
}

#gradientUnderMobileMenu {
      display: none;
}

.isMobile #gradientUnderMobileMenu {
      display: block;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 15vh;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%);
      z-index: 0;
      pointer-events: none;
}

.closeButton {

      background: repeating-linear-gradient(90deg, #000000DD 0%, #000000BB 50%, #000000DD 100%);
      background-size: 300px 100%;
      background-repeat: repeat-x;
      animation: gradientSlideActionProgressButton 4s linear infinite;
      box-shadow: 0 0 10rem rgba(248, 232, 145, 1), 0 0 5rem rgba(44, 37, 0, .25);
      border: 2px solid var(--couleur_vive);
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
      will-change: background-position;
      position: absolute;
      right: 4vh;
      top: 4vh;
      width: 6vh;
      height: 6vh;
}

.closeButton img {
      width: 80%;
      height: 80%;
      object-fit: contain;
}

.help_icon {
      display: flex;
      position: absolute;
      cursor: none;
      z-index: 99996;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
}

.help_icon img {
      width: 6rem;
}

/* #endregion UI */



/*
*****************
** SOUS TITRES **
*****************
*/


/* #region SOUS TITRES */

#soustitresContainer {
      pointer-events: none;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 4vh;
      position: absolute;
      z-index: 99999999;
      width: 100vw;
}

.isPortraitMobile #soustitresContainer {
      bottom: 6.5rem;
}

#soustitres {
      display: none;
      font-size: var(--font_size_medium);
      padding: 0.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      background-color: var(--couleur_sous_titres);
      color: var(--couleur_vive);
      text-align: center;
      max-width: 75vw;
      border-radius: 0.75rem;
      width: fit-content;
}

.isMobile #soustitres {
      max-width: 90vw;
      font-size: var(--mobile_font_size_small_medium);
}


.isLandscapeMobile #soustitres {
      max-width: 75vw;
}

.isPortraitMobile #soustitres {
      max-width: 100vw;
}

/* #endregion SOUS TITRES */



/************/
/* progress */
/************/

/* #region progress */

.progressOpened,
.progressClosed {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
      transition: bottom 0.5s ease-in-out;
}

.progressClosed {
      bottom: calc(var(--progress_items_container_size) * -1);
}

.isMobile .progressOpened,
.isMobile .progressClosed {
      bottom: 0;
      left: 0;
      top: unset;
      right: unset;
      height: 100%;
      flex-direction: row-reverse;
      transition: left 0.5s ease-in-out;
}

.isMobile .progressClosed {
      left: calc(var(--progress_items_container_size_mobile) * -1);
}

#progressIcon {
      display: none;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
      left: -2vh;
      bottom: -3px;
      z-index: 2;
      transition: left 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0.5s;
      opacity: 0;
}

.isMobile #progressIcon {
      bottom: unset;
      left: -1px;
      top: -2vh;
      transition: top 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0.5s;
}

#progressIcon img {
      width: 4vh;
}

#progressBar {
      width: 100%;
      height: var(--progress_bar_thickness);
      overflow: hidden;
      position: relative;
}

.isMobile #progressBar {
      width: var(--progress_bar_thickness_mobile);
      height: 100dvh;
}

.progressBarUnderClosed,
.progressBarUnderOpened {
      width: 100%;
      height: var(--progress_bar_thickness);
      background-color: var(--couleur_brun_tres_fonce);
      overflow: hidden;
      position: absolute;
      transition: 0.5s width ease-in-out, 0.5s opacity ease-in-out;
      opacity: 0.25;
}

.progressBarUnderOpened {
      opacity: 1;
}

.isMobile .progressBarUnderClosed,
.isMobile .progressBarUnderOpened {
      width: var(--progress_bar_thickness_mobile);
      height: 100%;
      transition: 0.5s height ease-in-out, 0.5s opacity ease-in-out;
}

#progressBarFill {
      width: 0%;
      height: var(--progress_bar_thickness);
      background-color: var(--couleur_vive);
      overflow: hidden;
      position: absolute;
      transition: 0.5s width ease-in-out 0.5s;
}

.isMobile #progressBarFill {
      width: var(--progress_bar_thickness_mobile);
      height: 0%;
      transition: 0.5s height ease-in-out 0.5s;
}

#progressItems {
      width: 100%;
      height: var(--progress_items_container_size);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.96));
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      pointer-events: all;
}

.isMobile #progressItems {
      background: linear-gradient(to left, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, .96));
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;
      top: 0;
      bottom: 0;
      height: 100%;
      width: var(--progress_items_container_size_mobile);
}

.dinoProgress img {
      max-width: 9.5vw;
      max-height: calc(var(--progress_items_container_size) * .85);
      transition: transform 0.5s ease-in-out;
}

.isMobile .dinoProgress img {
      max-width: calc(var(--progress_items_container_size_mobile) * .85);
      max-height: 8vh;
}

/* #endregion progress */



/***********/
/* content */
/***********/

/* #region content */

#content_background {
      display: none;
      width: 100vw;
      height: 100dvh;
      z-index: 99999;
      position: fixed;
}

.dinoContent {
      font-size: var(--font_size_texte);
      display: none;
      position: absolute;
      overflow: hidden;
      left: 0;
      top: 0;
      bottom: 0;
      height: 100dvh;
      z-index: 999999;
      align-items: stretch;
      justify-content: center;
      pointer-events: none;

}

.isMobile .dinoContent {
      font-size: var(--mobile_font_size_texte);
      overflow: unset;
      justify-content: space-evenly;
      flex-direction: column;
      right: 0;
      width: 100vw;
      height: unset;
      min-height: 100dvh;
      bottom: unset;
}

/* partie gauche ou haute */

.dinoContentPart1 {
      display: flex;
      height: 100dvh;
      width: 45%;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 4rem;
      pointer-events: none;
      background-color: #3d582700;
}

/* partie droite ou basse */

.dinoContentPart2 {
      display: flex;
      height: 100dvh;
      width: 55%;
      min-width: 55%;
      align-items: center;
      justify-content: flex-start;
      pointer-events: none;
      background-color: #dcf11600;
}

.isMobile .dinoContentPart1,
.isMobile .dinoContentPart2 {
      align-items: center;
      width: unset;
      height: unset;
}

.isMobile .dinoContentPart1 {
      padding: unset;
      gap: 2rem;
}

.isMobile .dinoContentPart2 {
      overflow: hidden;
      justify-content: center;
}

.dinoName {
      font-family: var(--grunge);
      font-size: var(--font_size_titre);
      color: var(--couleur_blanc_casse);
      text-align: right;
}

.isMobile .dinoName {
      padding-top: 0.25rem;
      font-size: var(--mobile_font_size_titre);
      text-align: center;
}



/* #endregion content */



/************/
/* accroche */
/************/

/* #region accroche */

.dinoAccroche {
      display: flex;
      width: 100vw;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background-color: #f309f300;
}

.isMobile .dinoAccroche {
      z-index: 9999999;
      position: absolute;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100vw;
      height: 100dvh;
      background-color: #f309f300;
      padding-left: var(--mobile_horizontal_padding);
      padding-right: var(--mobile_horizontal_padding);
}

.dinoAccrocheTexte {
      font-family: var(--main_medium);
      color: var(--couleur_blanc_casse);
      text-align: right;
      width: 65%;
}

.isMobile .dinoAccrocheTexte {
      text-align: left;
      width: 100%;
}

.dinoImageAccroche {
      max-width: 80%;
      max-height: 90%;
      padding-left: 0;
}

.isMobile .dinoImageAccroche {
      max-width: 90%;
      max-height: 45dvh;
      padding-left: unset;
}

/* #endregion accroche */



/*********/
/* quizz */
/*********/

/* #region quizz */

.dinoQuizz {
      display: flex;
      width: 50vw;
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 5vw;
      pointer-events: none;
      background-color: #046cf300;
}

.isMobile .dinoQuizz {
      z-index: 9999999;
      position: fixed;
      justify-content: center;
      align-items: center;
      top: 100dvh;
      bottom: 200dvh;
      flex-direction: column;
      width: 100vw;
      height: 100dvh;
      padding-left: var(--mobile_horizontal_padding);
      padding-right: var(--mobile_horizontal_padding);
}

.quizQuestion,
.quizResult {
      font-family: var(--main_medium);
      color: var(--couleur_blanc_casse);
      margin-bottom: 3rem;
      width: 70%;
}

.quizResult {
      font-family: var(--main);
      display: none;
}

.isMobile .quizQuestion,
.isMobile .quizResult {

      margin-right: unset;
      width: 100%;
      text-align: left;
      padding-bottom: 1rem;
}

.isMobile .quizResult {
      text-align: left;
}

.quizResponses {
      pointer-events: none;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      width: 85%;
}

.isMobile .quizResponses {
      width: 90%;
}


/* #endregion quizz */



/*********/
/* game */
/*********/

/* #region game */

.dinoGame {
      display: flex;
      width: 100vw;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5vw;
      pointer-events: none;
      background-color: #e3f30900;
}

.isMobile .dinoGame {
      z-index: 9999999;
      position: absolute;
      justify-content: center;
      align-items: center;
      top: 100dvh;
      bottom: 200dvh;
      flex-direction: column;
      width: 100vw;
      height: 100dvh;
      padding-left: var(--mobile_horizontal_padding);
      padding-right: var(--mobile_horizontal_padding);
}

/* #endregion game */



/***********/
/* enquete */
/***********/

/* #region enquete */

.dinoGameEnquete {
      display: none;
      max-width: 50%;
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 5vw;
      pointer-events: none;
      background-color: #f3380900;
      gap: 1.5rem;
}

.isMobile .dinoGameEnquete {
      max-width: 100%;
      gap: 1rem;
      padding: unset;
      /*overflow: scroll;*/
}

.enqueteTexte {
      font-family: var(--main_medium);
      color: var(--couleur_blanc_casse);
}

.isMobile .enqueteTexte {
      text-align: left;
}

.enqueteImage {
      max-width: 88%;
      max-height: 44%;
      margin-bottom: 1rem;
      align-self: center;
}

.isMobile .enqueteImage {
      max-width: 88%;
      max-height: 33dvh;
}



.dinoImageEnquete {
      max-width: 90%;
      max-height: 90%;
      padding-left: 0;
}

.enqueteResponsesContainer {
      display: flex;
      flex-direction: row;
      gap: 2.5rem;
      margin-top: 3rem;
      pointer-events: none;
      align-items: flex-end;
      justify-content: center;
      align-self: center;
}

.isMobile .enqueteResponsesContainer {
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      margin-top: 2rem;
}

.enqueteResponse, .enqueteResponse2 {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      align-items: center;
}

.isMobile .enqueteResponse, .isMobile .enqueteResponse2 {
      gap: 1rem;
}

.enqueteResponse img, .enqueteResponse2 img {
      max-width: 70%;
}

.isMobile .enqueteResponse img {
      max-width: unset;
      max-height: 11dvh;
}

.isMobile .enqueteResponse2 img {
      max-width: unset;
      max-height: 16dvh;
}

.enqueteChoiceButton {
      width: fit-content;
      max-width: 100%;
      font-family: var(--main);
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, var(--couleur_vive_alpha_0) 0%, var(--couleur_vive_alpha_1) 50%, var(--couleur_vive_alpha_0) 100%);
      background-size: 400px 100%;
      background-repeat: repeat-x;
      animation: gradientSlide 2s linear infinite;
      box-shadow: 0 0 3rem rgba(248, 232, 145, .1), 0 0 2rem rgba(248, 232, 145, .1);
      border: 1px solid var(--couleur_vive);
      display: inline-block;
      padding: 1rem 1.5rem;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
      will-change: background-position;
}

.isMobile .enqueteChoiceButton {
      text-align: center;
}

/* #endregion enquete */



/*********/
/* fiche */
/*********/

/* #region fiche */

.dinoFiche {
      display: none;
      width: 100vw;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background-color: #f3380900;
}

.isMobile .dinoFiche {
      z-index: 9999999;
      position: absolute;
      justify-content: center;
      align-items: center;
      top: 200dvh;
      bottom: 300dvh;
      flex-direction: column;
      width: 100vw;
      height: 100dvh;
}

.dinoFicheInfos {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-family: var(--main_medium);
      color: var(--couleur_blanc_casse);
      width: 70%;
      text-align: right;
}

.isMobile .dinoFicheInfos {
      text-align: left;
      flex-direction: column;
      width: 100%;
      /*min-height: 80%;*/
      margin-bottom: unset;
      border: unset;
      background-image: none;
      background-repeat: unset;
      background-size: unset;
      background-position: unset;
      padding: unset;
      padding-left: var(--mobile_horizontal_padding);
      padding-right: var(--mobile_horizontal_padding);
}

.dinoFicheInfosPart1___ {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.75rem;
      padding: 3%;
}

.dinoFicheInfosPart1 {
      width: 45%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 0.75rem;
}

.isMobile .dinoFicheInfosPart1 {
      width: 100%;
      height: unset;
      align-items: flex-start;
      justify-content: center;
      text-align: left;
      gap: 0.25rem;
      flex-grow: 1;
}

.dinoFicheInfosPart2___ {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.dinoFicheInfosPart2 {
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}

.isMobile .dinoFicheInfosPart2 {
      width: 100%;
      margin-top: 0rem;
      margin-bottom: 0rem;
      flex-grow: 2;
      justify-content: center;
}

.dinoImageFiche {
      max-width: 85%;
      max-height: 90%;
      padding-left: 0;
}

.isMobile .dinoImageFiche {
      max-width: 100%;
      max-height: 36dvh;
      padding-left: unset;
}

.dinoNameFiche {
      font-size: var(--font_size_titre);
      color: var(--couleur_blanc_casse);
      text-align: left;
      padding-bottom: 5vh;
}

.isMobile .dinoNameFiche {
      font-size: var(--mobile_font_size_titre);
      /*width: 100%;*/
      white-space: normal;
      word-break: break-word;
      text-align: center;
      padding-bottom: 3vh;
}

.dinoFicheInfoLabel {
      font-family: var(--main_medium);
      color: var(--couleur_brun_clair);
      padding-right: 1rem;
}

.dinoFicheVideoButton {
      font-family: var(--main);
      font-size: var(--font_size_small);
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, var(--couleur_vive_alpha_0) 0%, var(--couleur_vive_alpha_1) 50%, var(--couleur_vive_alpha_0) 100%);
      animation: gradientSlideAction 2s linear infinite;
      box-shadow: 0 0 10rem rgba(248, 232, 145, .2), 0 0 3rem rgba(248, 232, 145, .1);
      border: 1px solid var(--couleur_vive);
      display: inline-block;
      padding: 0.5rem .75rem;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      will-change: background-position;
      margin-top: 2rem;
      letter-spacing: 0.15rem;
}

.isMobile .dinoFicheVideoButton {
      font-size: var(--mobile_font_size_xsmall);
      padding: 0.2rem 0.5rem;
      margin-top: 1rem;
}

.dinoVideo {
      display: none;
      width: 100vw;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: all;
      background-color: #f3380900;
}

.isMobile .dinoVideo {
      z-index: 9999999;
      position: absolute;
      top: 300dvh;
      bottom: 400dvh;
      width: 100vw;
      height: 100dvh;
}

/* #endregion fiche */



/***********/
/* buttons */
/***********/

/* #region buttons */

.dinoStartAction,
.dinoAccrocheAction,
.dinoFicheAction,
.dinoGameAction,
.dinoQuizAction {
      /*align-self: center;*/
      font-family: var(--grunge);
      font-size: var(--font_size_button);
      letter-spacing: 0.05rem;
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, var(--couleur_vive_alpha_0) 0%, var(--couleur_vive_alpha_1) 50%, var(--couleur_vive_alpha_0) 100%);
      background-size: 150px 100%;
      background-repeat: repeat-x;
      animation: gradientSlideAction 2s linear infinite;
      box-shadow: 0 0 10rem rgba(248, 232, 145, .2), 0 0 3rem rgba(248, 232, 145, .1);
      border: 2px solid var(--couleur_vive);
      border-radius: 1.15rem;
      display: inline-block;
      padding: 1rem 1.5rem;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 0.5s opacity ease-in-out;
      will-change: background-position;
}

.dinoQuizAction {
      display: none;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, 0.5s opacity ease-in-out;
}

.isMobile .dinoAccrocheAction,
.isMobile .dinoStartAction,
.isMobile .dinoFicheAction,
.isMobile .dinoGameAction,
.isMobile .dinoQuizAction {
      padding: 0.8rem 1.2rem;
      font-size: var(--mobile_font_size_button);
}

#heightCheckButton {
      position: absolute;
      bottom: 10dvh;
}

.responseButton {
      width: fit-content;
      max-width: 100%;
      font-family: var(--main);
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, var(--couleur_vive_alpha_0) 0%, var(--couleur_vive_alpha_1) 50%, var(--couleur_vive_alpha_0) 100%);
      background-size: 400px 100%;
      background-repeat: repeat-x;
      animation: gradientSlide 2s linear infinite;
      box-shadow: 0 0 3rem rgba(248, 232, 145, .1), 0 0 2rem rgba(248, 232, 145, .1);
      border: 2px solid var(--couleur_vive);
      border-radius: 1.15rem;
      display: inline-block;
      padding: 1rem 1.5rem;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
      will-change: background-position;
}

.isMobile .responseButton {
      padding: 0.6rem 1.2rem;
      align-self: center;
      text-align: center;
      width: 100%;
}

.responseError {
      animation: shake 0.25s;
      color: #ff7d7d;
      border-color: #ff7d7d;
      box-shadow: 0 0 3rem rgba(187, 27, 27, 0.1), 0 0 2rem rgba(187, 27, 27, 0.1);
      background: repeating-linear-gradient(90deg, rgba(187, 27, 27, 0.2) 0%, rgba(187, 27, 27, 0.4) 50%, rgba(187, 27, 27, 0.2) 100%);
}

.responseAccurate {
      color: #cbff93;
      border-color: #cbff93;
      box-shadow: 0 0 3rem rgb(109, 182, 25, 0.2), 0 0 2rem rgba(109, 182, 25, 0.2);
      background: repeating-linear-gradient(90deg, rgba(109, 182, 25, 0.2) 0%, rgba(109, 182, 25, 0.4) 50%, rgba(109, 182, 25, 0.2) 100%);
      animation: flashBright 0.2s linear 0s 3 alternate;
}

.neckGameButton {
      display: flex;
      pointer-events: none;
      cursor: default;
      border-radius: 50%;
      text-align: center;
      align-items: center;
      justify-content: center;
      min-height: 4.5rem;
      min-width: 4.5rem;
      font-size: var(--font_size_small_medium);
      padding: unset;
      font-family: var(--main);
      letter-spacing: 0.15rem;
      white-space: nowrap;
}

.isMobile .neckGameButton {
      padding: unset;
      font-size: var(--mobile_font_size_medium);
}

/* #endregion buttons */



/************/
/* run game */
/************/

/* #region run game */

.runnerChoiceQuestion {
      font-family: var(--main_medium);
      color: var(--couleur_blanc_casse);
      margin-bottom: 3rem;
      text-align: center;
      width: 70%;
}

.isMobile .runnerChoiceQuestion {
      text-align: center;
      margin-right: unset;
      width: 100%;
}

#runnerChoiceButtonContainer {
      pointer-events: none;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      width: 85%;
      align-items: center;
      justify-content: center;
}

.isMobile #runnerChoiceButtonContainer {
      width: 100%;
      gap: 1.5rem;
}

.runnerChoiceButton {
      font-family: var(--main_medium);
      color: var(--couleur_vive);
      background: repeating-linear-gradient(90deg, var(--couleur_vive_alpha_0) 0%, var(--couleur_vive_alpha_1) 50%, var(--couleur_vive_alpha_0) 100%);
      background-size: 150px 100%;
      background-repeat: repeat-x;
      animation: gradientSlideAction 2s linear infinite;
      box-shadow: 0 0 10rem rgba(248, 232, 145, .2), 0 0 3rem rgba(248, 232, 145, .1);
      border: 2px solid var(--couleur_vive);
      border-radius: 1.15rem;
      display: inline-block;
      padding: 1rem 1.5rem;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      will-change: background-position;
}

.runnerChoiceButtonClicked {
      color: #efffde;
      border-color: rgb(239, 255, 222);
      animation: flashBrightStay 0.2s linear 0s 3 alternate;
}

.runnerChoiceButton img {
      height: 2.4rem;
      max-width: 4rem;
      margin-right: 1rem;
      vertical-align: middle;
}

#runStartButton,
#runShowFicheButton {
      display: none;
      position: absolute;
      bottom: 10dvh;
}


/* #endregion run game */



/************/
/* weight game */
/************/

/* #region weight game */

#weightGame {

      align-items: center;
      justify-content: flex-start;
      gap: 1rem;
      background: #ff828200;
      padding: unset;
}

.isMobile #weightGame {
      gap: 1.5rem;
}

#weightGameCounterContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      justify-content: center;
}

#numericStepperContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      pointer-events: none;
      margin-top: 2rem;
      background: #c2ff8200;
}

.numericStepperAction,
.isMobile .numericStepperAction {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      margin: 2rem;
      border-radius: 100%;
}

.isMobile .numericStepperAction {
      margin: 4vw;
}

.isMobile .numericStepperAction img {
      max-width: 8vw;
}

.weightGameNumericStepperImage {
      filter: drop-shadow(0px 0px 0px var(--couleur_vive));
      transition: all 0.3s ease-in-out;
}

.weightGameNumericStepperImage img,
.weightGameNumericStepperImageActive img {
      max-height: 5rem;
}

.isMobile .weightGameNumericStepperImage img,
.isMobile .weightGameNumericStepperImageActive img {
      max-height: unset;
      max-width: 18vw;
}

.weightGameNumericStepperImageActive {
      filter: drop-shadow(0px 0px 2rem var(--couleur_vive));
      transition: all 0.3s ease-in-out;
}

.weightGameCounter {
      font-size: var(--font_size_xlarge);
      font-family: var(--main_bold);
      color: var(--couleur_vive);
}

.isMobile .weightGameCounter {
      font-size: var(--mobile_font_size_large);
}

/* #endregion weight game */



/**************/
/* animations */
/**************/

/* #region animations */


@keyframes chronoSlideAction {
      from {
            background-position: 0 0;
      }

      to {
            background-position: 250px 0;
      }

      /* décale exactement d’un cycle -> boucle sans saute */
}

@keyframes rotate {
      0% {
            transform: rotate(0)
      }

      100% {
            transform: rotate(360deg)
      }
}

@keyframes gradientSlideAction {
      from {
            background-position: 0 0;
      }

      to {
            background-position: 150px 0;
      }

      /* décale exactement d’un cycle -> boucle sans saute */
}

@keyframes gradientSlide {
      from {
            background-position: 0 0;
      }

      to {
            background-position: 400px 0;
      }

      /* décale exactement d’un cycle -> boucle sans saute */
}

@keyframes gradientSlideActionProgressButton {
      from {
            background-position: 0 0;
      }

      to {
            background-position: 300px 0;
      }

      /* décale exactement d’un cycle -> boucle sans saute */
}

@keyframes shake_ {
      0% {
            transform: translate(1px, 1px) rotate(0deg);
      }

      10% {
            transform: translate(-1px, -2px) rotate(-1deg);
      }

      20% {
            transform: translate(-3px, 0px) rotate(1deg);
      }

      30% {
            transform: translate(3px, 2px) rotate(0deg);
      }

      40% {
            transform: translate(1px, -1px) rotate(1deg);
      }

      50% {
            transform: translate(-1px, 2px) rotate(-1deg);
      }

      60% {
            transform: translate(-3px, 1px) rotate(0deg);
      }

      70% {
            transform: translate(3px, 1px) rotate(-1deg);
      }

      80% {
            transform: translate(-1px, -1px) rotate(1deg);
      }

      90% {
            transform: translate(1px, 2px) rotate(0deg);
      }

      100% {
            transform: translate(1px, -2px) rotate(-1deg);
      }
}


@keyframes shake {
      0% {
            transform: translate(2px, 0px);
      }

      10% {
            transform: translate(-2px, 0px);
      }

      20% {
            transform: translate(-5px, 0px);
      }

      30% {
            transform: translate(5px, 0px);
      }

      40% {
            transform: translate(2px, 0px);
      }

      50% {
            transform: translate(-2px, 0px);
      }

      60% {
            transform: translate(-5px, 0px);
      }

      70% {
            transform: translate(5px, 0px);
      }

      80% {
            transform: translate(-2px, 0px);
      }

      90% {
            transform: translate(2px, 0px);
      }

      100% {
            transform: translate(0px, 0px);
      }
}

@keyframes flashBright {
      0% {
            filter: brightness(1);
      }

      50% {
            filter: brightness(2);
      }

      100% {
            filter: brightness(1);
      }
}

@keyframes flashBrightStay {
      0% {
            filter: brightness(1);
      }

      33% {
            filter: brightness(2);
      }

      66% {
            filter: brightness(1);
      }

      100% {
            filter: brightness(2);
      }
}


/* #endregion animations */



/********************/
/* IOS prevent exit */
/********************/

#iphoneScrollPrevent {
      display: none;
      pointer-events: all;
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 10vw;
      background-color: #00000000;
}