<style>

  @import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');

  @import url(https://fonts.googleapis.com/css?family=Amarante);

@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');

  /* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;



  float: left;

  color: black;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 18px; 

  line-height: 25px;

  border-radius: 4px;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

  display: block;

}

body {

  line-height: 1;

}

ol, ul {

  list-style: none;

}

blockquote, q {

  quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: rgb(220, 20, 60,0.6);

  -webkit-text-size-adjust:none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



* {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

  padding: 0;

  margin: 0;

  -webkit-font-smoothing: antialiased;

}



body {

      margin: 0;

    padding: 3px;

    height: 100%;

    width: 100%;

    background: #1b191b;

    color: #ffc107;

    font-size: 62.5%;

    font-variant-ligatures: normal;

    font-kerning: normal;

    overflow-x: hidden;

    text-transform: uppercase;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 500;

    min-height: 100vh;

    scroll-behavior: smooth;

    text-rendering: optimizeSpeed;

    font-family: arial,x-locale-body,sans-serif;

    letter-spacing: -.0027777778rem;   



}



span{

  text-align:center;

}



p, a, div, input {

  font-family: inherit;

  font-size: 16px;

  

}



section{



  padding-top:25px;

}



img {

  max-width: 100%;
  border-radius:8px;

}

h1{ 

  font-family: 'Calistoga', cursive;

  color: #ffc107;

  font-size:6vw;

  /*padding-right: 18vw;*/

  text-align: center;

}


label {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translatey(-50%);
  color: rgba(0, 0, 0, 0.08);
  /*transition: all 0.2s ease;*/
}

input {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  outline: none;
  font-size: 16px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.06);
  color: #000000;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 1px;
  /*transition: all 0.2s ease;*/
}

input:focus {
  border-color: #F27121;
}

input:focus + label {
  transform: scale(1.05) translatey(-50%);
  color: #F27121;
}

#apps {
  margin-top: 42px;
}

.app {
  display: inline-block;
  width: 20%;
  margin: 0 2.2% 24px;
  padding: 12px 6px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.app:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.app i {
  font-size: 2.4em;
  color: #fff;
}

.app p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-top: 6px;
  transition: 0.2s all ease;
}

.app:hover p {
  color: rgba(255, 255, 255, 0.8);
}
.suggestion-list {
  background-color: #fff;
  padding: 18px 24px 6px 12px;
  border-radius: 0 0 6px 6px;
  position: absolute;
  width: 100%;
  margin-top: 0px;
  border: 2px solid #F27121;
  border-top: none;
}

.suggestion-list.hidden {
  display: none;
}

.suggestion-list p {
  margin-bottom: 12px;
}

.suggestion-list i {
  margin-right: 12px;
  color: #F27121;
}

.heading span {

  color: #ffffff;

}
.searchbar {
  text-align: center;
  margin-top: 30px;
}

.search-field {
  border: 1px solid #bababa;
  width: 480px;
  padding: 0 5px;
  height: 36px;
  line-height: 36px;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 25px;
}

/* Styles de base pour la div qui contient les boutons */
.buttons {
  display: flex;
  justify-content: center; /* Centrer horizontalement */
  gap: 10px; /* Espace entre les boutons */
  margin-top: 20px; /* Espace au-dessus de la div des boutons, sous la barre de recherche */
  flex-wrap: nowrap; /* Permettre le retour à la ligne des éléments si nécessaire */
}

/* Styles pour les boutons pour les rendre responsive */
button {
      border: 1px solid #ffc107;
      font-family: 'Calistoga', cursive;
      background: #ffc107;
      color: #1b191b;
      padding: 0 10px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      flex: 0 1 auto; /* Les boutons rétrécissent si nécessaire sans grandir */
      margin: 0 10px; /* Espace horizontal entre les boutons */
      }

button:hover {
  background: #ffc107;
}

/* Ajustements responsives pour les écrans plus petits */
@media (max-width: 768px) {
  .search-field {
    width: 90%; /* Largeur réduite pour la barre de recherche */
    margin-bottom: 15px; /* Espace réduit sous la barre de recherche */
  }
  
  .buttons {
    width: 100%; /* Pleine largeur pour le conteneur des boutons */
    margin: 0 auto; /* Centrage du conteneur des boutons */
    gap: 5px; /* Réduction de l'espace entre les boutons */
  }

  button {
    margin: 5px; /* Réduction de la marge autour des boutons */
    padding: 10px; /* Ajustement du padding pour l'esthétique */
  }
}

 h3, h4 {

  font-family: 'Bree Serif', serif;

  font-size: 12px;

  /*text-align: center;*/



}



footer{

  text-align:center;

}

a {

  text-decoration: none;

  cursor: pointer;

  font-size: inherit;

  color: inherit;

}



.box{

  margin-bottom: -150px; 

  /*min-height: 150px;*/

  width: 100%;

  height: 50px;

}



.container{

	width: 90%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px;

}





.container-1{

    position: fixed;

  top: -154px;
  justify-content: center;
    align-items: center;

  width: 100%;

  width: 60%;

  margin: auto;

  white-space: nowrap;

  position: relative;

  text-align: center;

}



.container-1 input { 

    position: relative;

    text-transform: uppercase;

    padding: 2px 2px 2px 10px;

    text-indent: 3px;

    font-size: 14px;

    font-family: 'Josefin Sans', sans-serif;

    /*line-height: 48px\9;*/

    width: 100%;

    outline: none;

    /*border: 1px solid #cfcfcf;*/

    height:45px;

  border-style:solid; 

  border-width:4px;

  border-color:#ffc107;

    box-sizing: border-box;

    border-radius: 28px;

    font-weight: 400;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;}





.container-1 .fa-search { 

  position: absolute;

  top: 10px;

  left: 10px;

  color: skyblue;

}



.container-1 input#search{

   width: 100%; /* Pleine largeur */
    max-width: 600px; /* Largeur maximale */
    padding: 10px; /* Padding pour l'esthétique */
    margin: 0 auto; /* Centrage */

}



.container-1 input#search::-webkit-input-placeholder {

   color: #65737e;

}

 

.container-1 input#search:-moz-placeholder { /* Firefox 18- */

   color: #65737e;  

}

 

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */

   color: #65737e;  

}

 

.container-1 input#search:-ms-input-placeholder {  

   color: #65737e;  

}



.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{

    outline:none;

    background: #ffffff;

    color: black;

  }



nav {

  margin-bottom: 20px;

 

}



li a {

  font-size: 0.7em;

  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

    line-height: 1.2; 

}



.tab-content {

  height: 210px;

  margin: 10px;

  display: inline-block;

  width: 210px;

}



.img-responsive {

  border-radius: 100px;

}



.hvr-grow {

    display: inline-block;

    vertical-align: middle;

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    transition-duration: 0.3s;

    transition-property: transform;

}



.hvr-grow:hover,

.hvr-grow:focus,

.hvr-grow:active {

    transform: scale(1.1);

}



 .hvr-grow .overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

    opacity: 0;

    background-color: rgba(0, 0, 0, 1);

    -webkit-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out

  }



div.hoverbubble {

  position: relative;

  text-decoration: none;

  width:210px;

  height:110px;

}



div.hoverbubble span {

  display: none;

  width: 300px; 

}



div.hoverbubble:hover span {

  display: block;

  position: absolute;

  padding: .5em;

  content: attr(title);

  min-width: 11px;

  text-align: center;

  width: auto;

  height: auto;

  white-space: ;

  top: -90px;

  background: rgba(0,0,0,1);

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  border-radius: 10px;

  color: #fff;

  font-size: 0.6em;

  font-family: Arial, Helvetica, sans-serif;

}



div.hoverbubble:hover span:after {

  position: absolute;

  display: block;

  content: "";

  border-color: rgba(0,0,0,.8) transparent transparent transparent;

  border-style: solid;

  border-width: 10px;

  height: 0;

  width: 0;

  position: absolute;

  bottom: -20px;

  left: 1em;

}



.green {

  border: 7px solid green;

}



.red {

  border: 7px solid red;

}





  .fancybox-slide--video .fancybox-content {

  width  : 800px;

  height : 600px;

  max-width  : 100%;

  max-height : calc( 100% - 100px );

  margin: 50px 0;

  overflow: visible;

  background: #000;

}



.button-close,

.button-previous,

.button-next {

  float: right;

  position: absolute;

  width: 44px;

  height: 44px;

  background: #000;

  text-align: center;

  line-height: 44px;

  color: #fff;

  text-decoration: none;

  border-radius: 50%;

  font-size: 16px;

  background-color: #2793e6;

}



.button-previous,

.button-next {

  top: 50%;

  background-color: #2793e6;

  margin-top: -22px;

  line-height: 42px;

}



.button-previous {

    left: -50px;

}



.button-next {

    right: -50px;

}



.button-close {

  background-color: #2793e6;

  top: -44px;

  right: -44px;

  font-size: 22px;

  color: rgba(255,255,255,0.8);

}

@media all and (min-width: 800px) {





	.container{

	width: 90%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px;

}

  .fancybox-thumbs {

    

    

    top: auto;

    width: auto;

     left: 0;

    right : 0;

    height: 95px;

    padding: 10px 10px 5px 10px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.3);

    

    /* bottom: 0; */

    /* left: 0; */

    /* right: 0; */

    border-radius: 2px;

    direction: ltr;

    bottom: 69px;

   

    /* margin: 12px; */

    position: absolute;

  }

  

  .fancybox-show-thumbs .fancybox-inner {

    right: 0;

    bottom: 95px;

  }

}



@media screen and (max-width: 832px) {

  .heading  {

    float: none;

    display: block;

    /*text-align: left;*/

  }

  

}

@media (max-width:600px) {



  h1 {

    font-family: 'Calistoga', cursive;

    color: #cc1c58;

    font-size: 7vw;

    padding-right: 1vw;

    text-align: center;

}

  img.logo {

    max-width: 50%;

    max-width: 70px;

    height: auto;

}

  h2.responsive {

    font-size: 14px;

  }



  h2, h3, h4 {

    font-family: 'Bree Serif', serif;

    font-size: 9px;

    text-align: center;

}



}

@media (max-width:1025px) {



  h1 {

    font-family: 'Calistoga', cursive;

    color: #ffc107;

    font-size: 7vw;

    padding-right: 1vw;

    text-align: center;

}

  img.logo {

    max-width: 50%;

    max-width: 70px;

    height: auto;

}

  h2.responsive {

    font-size: 14px;

  }



  h3, h4 {

    font-family: 'Bree Serif', serif;

    font-size: 9px;

    text-align: center;

}



}

@media (max-width: 832px) { 

/* Styles for screen with max width of 600px */

    header {

        height: auto;

    }



    .container{

	width: 90%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px;

}

    #headline {

        /*margin: auto;

        font-size: 3em;*/

        text-align: center;

    }

  .container-1 input#search{

    height: 60px; 

  }



}

@media (max-width: 320px) { 

/* Styles for screen with max width of 320px */

    header {

        height: auto;

    }

    .container{

	width: 90%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px;

}

    #headline {

        margin: auto;

        font-size: 2em;

    }

  .container-1 input#search{

    height: 30px; 

  }

  

}



@media all and (max-width: 1024px)

{

    .navbar-side

    {

        width: auto;

        text-align: left;

    }

    

    .navbar-side ul

    {

        flex-direction: column;

    }



    .navbar-side li

    {

        padding-left: 4px;

    }

    

    .navbar-side a

    {

        font-size: 1.1em;

    }

    

    .navbar-side a:hover

    {

        border-bottom: 0;

    }

}



  .body-wrapper {

    width: 100%;

    position: absolute;

  }

.container{

	width: 90%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px;

}

    /* Flex area */



    .row {

      display:-ms-flexbox;

      display:flex;

    }



    /* Flex end */



    .side-header {

      position: fixed;

      width: 20%;

      height: 100vh;

      padding: 1rem 2em;

      overflow-x: hidden;

      background: #0a0a0a;

      z-index: 2;

      overflow: hidden; 

    }

    .menu-open .side-header {

            z-index: 0;

            width: 0%;

            visibility: hidden;

            opacity: 0;

    }

      .navbar-side {

        margin-top: 2rem;

        height: 450px;

        position: relative;

        width: 100%;

      }

        .logo {

          font-size: 35px;

          font-weight: bolder;

        }

        .navbar-side ul li {

          width: 100%;

          padding: 4px 1em;

          margin-bottom: 3px;

          display: block;

          border-radius: 3px;

          transition: background 0.3s ease-in-out;

        }

          .navbar-side ul li:hover, .navbar-side ul li.active {

            background: rgba(241, 223, 9, 0.7);

          }

        .bottom {

          position: absolute;

          bottom: 0;

          left: 0;

        }

          .navbar-side a {

            font-weight: bold;

            font-size: 14px;

            position: relative;

            display: flex;

            justify-content: flex-start;

            align-items: center;

          }

            .navbar-side ul li a .svg-space {

              width: 60px;

            }

              .navbar-side ul li a .svg-space svg {

                width: 40px;

                height: 40px;

                margin-bottom: -12px;

              }

        .footer {

          position: absolute;

          border: 0;

          left: 0;

          padding: 0 2rem;

          margin: 2rem 0;

        }



    .content-wrapper {

      width: 80%;

      height: 200vh;

      padding: 0 2rem;

      position: absolute;

      right: 0;

      top: 0;

    }

    .menu-open .content-wrapper, .menu-open .top-header {

      width: 100%;

    }

    .top-header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      height: 75px;

      width: 80%;

      position: fixed;

      background: #fff;

      top: 0;

      right: 0;

      padding: 0 2rem;

      z-index: 99;

    }

      .top-header .menu-btn, .top-header .icon {

        width: 50px;

        height: 50px;

        border-radius: 100%;

        cursor: pointer;

        padding: 12px;

        transition: background 0.3s ease-in-out;

      }

        .top-header .menu-btn:hover {

          background: #edf2f7;

        }



          .navbar-top li {

            display: inline-block;

            margin-left: 20px;

          }

            .sp-btn {

              padding: 10px 40px;

              background: #4a5568;

              color: #fff;

              border-radius: 3px;

            }

          input {

            padding: 9px 10px;

            border: 1px solid #4a5568;

            width: 400px;

          }

    .hero-slider {

      margin-top: 80px;

      width: 100%;

      height: 400px;

      background: #edf2f7;

      background-image: url(img/head.png);

      background-position: center;

      background-size: cover;

      background-repeat: no-repeat;

    }

nav {
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement (si nécessaire) */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
}

nav a {
    text-decoration: none;
    padding: 20px;
    text-align: center;
    color: #ffc107;
    font-family: 'Calistoga';
    /* Suppression de 'float: left;' */
}

    main {

      width: 100%;

      margin: 2rem 0;

      text-align:center;

    }

      h2 {

        font-size: 25px;

        font-weight: bold;

        text-align: center;

        font-family: 'Crete Round', serif;

        padding: 5px 5px 5px 5px;

      }





      input {

    padding: 9px 10px;

    border: 1px solid #4a5568;

    text-align: left;

    /*border-radius: 20px;*/

    /*width: 75%;*/

}



      .clearfix {

  clear: both;

}

	.container {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
}

.game-list {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    position: relative;
    margin: 5px;
    margin-top: 2em;
}

.game {
    height: auto;
}

/* Pour PC portables et plus grands */
@media (min-width: 1025px) {
    .game-list {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

/* Pour tablettes */
@media (min-width: 481px) and (max-width: 1024px) {
    .game-list {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

/* Pour smartphones */
@media (max-width: 480px) {
    .game-list {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


nav {
    background-color: #333;
    overflow: hidden;
}


section:nth-child(even) {
    background-color: rgb(241, 241, 241);
}

section {
    min-height: 100vh;
}

video {
    padding: 10px;
}

iframe {
    height: 75vh;
}



section h5 {
    margin: 40px;
}

footer {
    background-color: #333;
    overflow: hidden;
}

footer a {
    text-decoration: none;
    padding: 20px;
    text-align: center;
    float: left;
    color: white;
}

p {

  color: rgba(48, 69, 92, 0.8);

  font-size: 17px;

  line-height: 26px;

  letter-spacing: 1px;

  position: relative;

  overflow: hidden;

  max-height: 800px;

  opacity: 1;

  transform: translate(0, 0);

  margin-top: 14px;

  z-index: 2;

}



ul {

  list-style: none;

  perspective: 900;

  padding: 0;

  margin: 5px;

}

ul li {

  position: relative;

  padding: 0;

  margin: 0;

  padding-bottom: 5px;

  padding-top: 30px;

}

ul li:nth-of-type(1) {

  animation-delay: 0.5s;

}

ul li:nth-of-type(2) {

  animation-delay: 0.75s;

}

ul li:nth-of-type(3) {

  animation-delay: 1s;

}

ul li:last-of-type {

  padding-bottom: 0;

}

ul li i {

  position: absolute;

  transform: translate(-6px, 0);

  margin-top: 16px;

  right: 0;

}

ul li i:before, ul li i:after {

  content: "";

  position: absolute;

  background-color: #ff6873;

  width: 3px;

  height: 9px;

}

ul li i:before {

  transform: translate(-2px, 0) rotate(45deg);

}

ul li i:after {

  transform: translate(2px, 0) rotate(-45deg);

}

ul li input[type=checkbox] {

  position: absolute;

  cursor: pointer;

  top: 10px;

  right: 10px;

  width: 100%;

  height: 100%;

  z-index: 1;

  opacity: 0;

}

ul li input[type=checkbox]:checked ~ p {

  margin-top: 0;

  max-height: 0;

  opacity: 0;

  transform: translate(0, 50%);

}

ul li input[type=checkbox]:checked ~ i:before {

  transform: translate(2px, 0) rotate(45deg);

}

ul li input[type=checkbox]:checked ~ i:after {

  transform: translate(-2px, 0) rotate(-45deg);

}



@keyframes flipdown {

  0% {

    opacity: 0;

    transform-origin: top center;

    transform: rotateX(-90deg);

  }

  5% {

    opacity: 1;

  }

  80% {

    transform: rotateX(8deg);

  }

  83% {

    transform: rotateX(6deg);

  }

  92% {

    transform: rotateX(-3deg);

  }

  100% {

    transform-origin: top center;

    transform: rotateX(0deg);

  }

}

/* Ajustements responsives pour les écrans plus petits */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Empiler les éléments verticalement sur les petits écrans */
    }

    .container-1 input#search {
        width: 90%; /* Largeur légèrement réduite sur les petits écrans */
    }
}


</style>