@charset "UTF-8";

:root {
  --color1: #d9d9d9;
  --color2: #383838;
  --color3: #212135;
}
#page-wrapper.grayscale {
  filter: grayscale(100%);
}

/* ---------- RESET CSS ----------*/

/* enlever les marges naturelles + reset du body/html */
html,
body {
  margin: 0 auto;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background-color: black;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(99, 102, 241, 0.15),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(34, 211, 238, 0.12),
      transparent 45%
    );
  pointer-events: none;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
h1 {
  margin: 0 auto;
}
/* enlever le style des listes */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  font-family: "roboto";
}

/* corriger l’affichage des images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
h2 {
  font-family: "posterama-2001";
  scroll-margin-top: 200px; /* adapte à la hauteur du header */
  color: white;
  letter-spacing: 4px;
}
h4 {
  font-family: "roboto";
  font-weight: bold;
  font-size: 2rem;
  color: white;
}
p {
  font-family: "roboto";
  margin: 0 auto;
  color: white;
}

.background-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /*mettre l'objet en arrière plan */
  filter: brightness(0.6);
}
a {
  text-decoration: none;
  font-family: "roboto";
  color: white;
}
@media (max-width: 480px) {
  html {
    margin-top: 0 !important;
  }
}

/* ----------- NAVBAR ------------ */
#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  background-color: #6a037c;
  z-index: 10;
  box-sizing: border-box;
  border-radius: 10px;
  height: 80px;
  transition: transform 0.3s ease;
  transform: translateY(0);
}

#navbar.hide {
  transform: translateY(-120%);
}
#navbar .logo {
  width: 150px;
}
.menu1 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.menu2 {
  display: flex;
  align-items: center;
}
nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 1rem;
}

nav ul li img {
  width: 4rem;
}
nav svg {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.menu1 li a:not(.logo) {
  position: relative;
  display: inline-block;
  padding: 12px 10px;
  border-radius: 999px;
  color: inherit;
  z-index: 1;
  color: white;
}

/* fond fixe */
.menu1 li a:not(.logo)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #6a037c;
  background: white;
  border-radius: 999px;

  transform: scale(0.95);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: -1;
}

/* hover simple (pas de “reveal” bizarre) */
.menu1 li a:not(.logo-link):hover::before {
  opacity: 1;
  transform: scale(1);
}
.menu1 li a:not(.logo-link):hover,
.menu1 li a:not(.logo-link):hover * {
  color: #6a037c !important;
}

#navbar svg {
  flex-shrink: 0;
}
a#billetterie {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: #6a037c;
  border-radius: 35px;
  padding: 0 15px;
  font-weight: bold;
}
a#billetterie:hover {
  background-color: #ff4848;
  color: white;
}
#profil {
  color: white;
}
#panier {
  color: white;
}
.toggle-grayscale a {
  display: flex;
  color: white;
  align-items: center;
}
.toogle-menu a {
  display: flex;
  align-items: center;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.tooltip-container:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1400px) {
  .menu1 {
    gap: 0;
  }
  nav ul li {
    margin: 0;
  }
  a#panier {
    display: none;
  }
  .menu2 a#profil {
    margin: 1rem;
  }
  .toogle-menu {
    padding-right: 1rem;
  }
}

@media (max-width: 480px) {
  nav ul {
    display: none;
  }
}
/* ----------- SWITCH ------------ */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toogle-menu {
  display: flex;
  align-items: center;
}

.slider {
  position: absolute;
  inset: 0;
  background-color: #555;
  border-radius: 34px;
  transition: 0.3s;
  cursor: pointer;
}

.slider::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #00d26a;
}

input:checked + .slider::before {
  transform: translateX(26px);
}

/* ------------ HEADER -------------- */
.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.15) 60%,
      rgba(0, 0, 0, 0) 100%
    ),
    url(/wp-content/themes/handiplayarena/assets/img/background1.jpg);
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
  text-align: center;
  height: 700px;
}

.hero h1 {
  font-family: "posterama-2001", sans-serif;
  font-weight: bold;
  font-size: 59px;
  text-align: left;
  color: white;
  padding-top: 15rem;
  margin: 0 5rem;
  letter-spacing: 5px;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
}
.hero div {
  display: flex;
  margin: -20px 5rem 0 5rem;
}
.hero div li {
  margin-top: 12px;
}
.hero h2 {
  font-family: "posterama-2001";
  color: white;
  text-align: left;
  font-size: 5rem;
  letter-spacing: 5px;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
  margin: 0 auto;
}
#date {
  font-family: "posterama-2001";
  color: white;
  text-align: left;
  margin: 0 0 0 30px;
  font-size: 146px;
  letter-spacing: 5px;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
}
.hero h3 {
  font-family: "posterama-2001";
  color: white;
  text-align: left;
  font-size: 33px;
  letter-spacing: 5px;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
  margin: 0 auto;
}
.hero p {
  font-size: 2rem;
  color: white;
  text-align: center;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}
ul#social-media {
  display: flex;
  gap: 40px;
  margin: 80px 5rem 9px 5rem;
  justify-content: end;
}
.icon {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.icon:hover {
  opacity: 0.6;
  transform: scale(1.1);
}
@media (max-width: 480px) {
  .hero {
    height: 900px;
  }
  .hero h1 {
    font-size: 4rem;
    padding-top: 20rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .hero h2 {
    font-size: 4rem;
  }
  .hero div {
    display: block;
    margin-top: 2rem;
  }
  .hero .button-g,
  .hero .button-d {
    width: 20rem;
  }
  .hero .button-g p,
  .hero .button-d p {
    font-size: 1.5rem;
  }
}

/* --------------- INFOS ----------------- */

.infos ul {
  display: flex;
  justify-content: space-around;
  margin: 50px 5rem;
  justify-content: space-evenly;
}

.infos li {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  height: 400px;
  padding: 2rem;
  border-radius: 30px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08)
  );
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border 0.35s ease;

  will-change: transform;
}
.infos li::after {
  content: "";
  z-index: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.infos li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.02)
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.infos li:hover {
  transform: translateY(-10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.infos li:hover::after {
  opacity: 1;
}
.infos li > * {
  position: relative;
  z-index: 2;
}
.infos img {
  width: 8rem;
  height: 8rem;
}
.rotate-on-scroll {
  transition: transform 0.1s linear;
}

.infos h2 {
  color: white;
  font-family: "abolition", sans-serif;
  letter-spacing: 3px;
}

.infos p {
  color: white;
  font-family: "roboto", sans-serif;
  text-align: center;
}
.infos button {
  border-width: 2px;
  border-radius: 30px;
  margin: 2rem 0;
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s,
    color 0.2s;
  border-style: solid;
}
.infos button:hover {
  background-color: white;
  color: black;
  transform: scale(1.1);
}
.infos button:hover p,
.infos button:hover a {
  color: black;
}
.infos button p {
  color: black;
  font-size: 16px;
  padding: 1rem;
}
@media (max-width: 1400px) {
  .infos ul {
    gap: 1rem;
  }
  .infos li {
    height: auto;
  }
}
@media (max-width: 480px) {
  .infos {
    height: auto;
  }
  .infos ul {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin: 5rem 2rem;
  }
}

/* ------------ CARROUSEL -------------- */

.main-carousel {
  width: 100%;
}

.carousel-cell {
  margin-right: 20px;
}

.carousel-cell img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.main-carousel .flickity-page-dots .dot {
  background: white;
}

.jeux .button {
  position: fixed;
}

.jeux {
  position: relative;
  z-index: auto;
  background-color: color2;
  margin: 10rem;
}
.jeux h2 {
  font-size: 4rem;
  color: white;
  margin: 50px 0;
}
.jeux p {
  margin: 0;
}
.jeux-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10rem;
  margin-top: 5rem;
}

/* déscative la scrollbar
.carrousel::-webkit-scrollbar {
  display: none;
} */

.jeux img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  max-width: none;
}

@media (max-width: 480px) {
  .jeux img {
    width: 300px;
    height: 300px;
  }
  .carrousel {
    margin-bottom: 40px;
    padding: 0;
  }
  /* largeur */
  .carrousel::-webkit-scrollbar {
    height: 20px;
    width: 5px;
  }

  /* fond */
  .carrousel::-webkit-scrollbar-track {
    background: #eeeeee4a;
    border-radius: 10px;
  }

  /* poignée */
  .carrousel::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 10px;
  }

  /* hover */
  .carrousel::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  .flickity-prev-next-button.previous{
    display: none;
  }
  .flickity-prev-next-button.next{
    display: none;
  }
}
@media (min-width: 768px) {
  .carrousel::-webkit-scrollbar {
    display: none;
  }
}

/* -------------------- bouton jeux -------------------- */

a#jeparticipe {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: #6a037c;
  border-radius: 35px;
  padding: 0 15px;
  font-weight: bold;
  height: 50px;
  width: 200px;
  gap: 10px;
  transition: all 0.5s ease;
}
a#jeparticipe:hover {
  transform: scale(1.1);
}
.jeux .jeparticipe a svg {
  width: 32px;
  margin: 5px;
  height: 32px;
}

@media (max-width: 480px) {
  .jeux {
    padding: 0;
  }
  .jeux h2 {
    font-size: 3rem;
  }
  .jeux .carrousel-btn.left,
  .jeux .carrousel-btn.right {
    display: none;
  }
}

/* ------------- Boutique ------------ */

.boutiquehomepage {
  display: grid;
  grid-auto-flow: column;
  margin: 0 10rem;
  justify-content: space-between;
  gap: 10rem;
}
.boutiquehomepage h2 {
  font-size: 4rem;
  margin-top: 0;
}
#visiterlaboutique {
  background-color: white;
  border-radius: 100px;
  border-style: none;
  transition: all 0.5s ease;
  padding: 15px;
  font-family: "roboto";
  font-weight: bold;
  display: inline-block;
  margin-top: 30px;
  color: #6a037c;
}
#visiterlaboutique:hover {
  transform: scale(1.1);
}

#boutique-container {
  width: 500px;
  padding: 0 20px;
  background: #ff4848;
  border-radius: 35px;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border 0.35s ease;
  will-change: transform;
}
/* ------------- PARTENAIRES ------------ */

.partenaires {
  background: #f9fdfe;
  margin: 10rem;
  border-radius: 35px;
}

.partenaires h2 {
  margin: 0 auto;
  padding: 10px;
  color: #111;
  font-size: 4rem;
  text-align: center;
}
.partenaires ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 8rem;
  padding: 20px;
}
.partenaires img {
  width: 150px;
}
@media (max-width: 480px) {
  .partenaires h2 {
    font-size: 2rem !important;
    padding: 0;
  }
  .partenaires ul {
    flex-direction: column;
    padding: 50px;
  }
}
/* ------------- VIDEO ------------ */

.video-container {
  position: relative;
  margin: 5rem 22rem;
  overflow: hidden;
  border-radius: 35px;
  height: 580px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .video-container {
    margin: 4rem 1rem;
    padding: 2rem 1rem;
  }
}

/* ------------- NEWSLETTER ------------ */

#newsletter {
  margin: 10rem;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08)
  );
  background-repeat: no-repeat;
  background-position-x: center;
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 35px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border 0.35s ease;
  will-change: transform;
} 
#newsletter h2 {
   font-size: 2rem;
}
#newsletterForm {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px;
}
#container-newsletter button {
  background-color: white;
  border-radius: 100px;
  border-style: none;
  transition: all 0.5s ease;
  padding: 15px 30px;
  font-family: "roboto";
  font-weight: bold;
  display: inline-block;
  color: #6a037c;
}
#container-newsletter button:hover {
  background-color: #ff4848;
  color: white;
}
#container-newsletter input {
  height: 50px;
  border-radius: 20px;
  width: 300px;
  padding-left: 20px;
}
.popup {
  background: #22c55e;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  font-family: "roboto";
  opacity: 0;
  transition: 0.3s;
}

.popup.show {
  opacity: 1;
}

/* ----------- FOOTER ---------------- */

footer {
  color: white;
  background: #6a037c;
}
footer .footercontainer {
  padding: 2rem 5rem;
  display: flex;
  justify-content: space-around;
  gap: 10rem;
}
footer h2 {
  font-family: "roboto";
}
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

footer li {
  list-style: none;
}

footer a {
  display: flex;
  text-decoration: none;
  color: white;
  align-items: center;
}
footer .contact-list a img {
  margin-right: 1rem;
}
footer .contact-list a {
  margin-bottom: 10px;
}
footer img {
  width: 2rem;
  margin: 0 2rem;
}

footer p {
  margin-right: 0;
}
.footer-section-apropos {
  width: 30rem;
}
footer .footer-section-contact {
  display: flex;
  flex-direction: column;
}
footer .socialmedia ul {
  display: flex;
}
footer .socialmedia li {
  border: 1px;
  border-color: white;
  border-style: ridge;
  border-radius: 50px;
  padding: 0.8rem;
  margin: 10px;
}

footer img {
  width: 2rem;
  margin: 0;
}

@media (max-width: 480px) {
  .footercontainer {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }
  footer h2 {
    text-align: center;
  }
  footer a {
    justify-content: center;
  }
  footer p {
    margin-right: 0;
    text-align: center;
    font-size: 1rem;
  }
  footer ul.contact-list {
    display: grid;
  }
  footer .container .footer-section h2 {
    text-align: center;
  }
}

/*------BILLETERIE-------------*/

.page-id-152 h1 {
  margin-top: 300px;
  color: white;
}
.page-id-152 p {
  color: white;
}
.page-id-152 h1 p {
  margin-left: 50px;
}
.wc-block-product-template__responsive {
  display: flex;
  margin: 200px;
}

/*------A PROPOS-------------*/

.page-id-3 p {
  color: white;
}

/*-----------WOOCOMMERCE-------------*/

.wc-block-components-button__text {
  background-color: white;
  text-wrap: pretty;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  height: 50px;
  width: 200px;
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
  display: flex;
}
.wp-block-woocommerce-cart.alignwide {
  margin: 100px 50px;
  color: rgb(255, 255, 255) !important;
  font-family: "roboto";
}
.wc-block-components-sidebar-layout .wc-block-components-main {
  width: 30%;
}
.wc-block-components-sidebar-layout {
  justify-content: center;
}
table {
  color: white;
  margin-top: 30px;
}
.wc-block-components-product-name {
  color: white;
}

.woocommerce-MyAccount-navigation {
  display: none;
}
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100%;
  float: none;
}
.elementor-309
  .elementor-element.elementor-element-f77ee94
  .ht-products
  .ht-product
  .ht-product-inner {
  border-color: #ff4848;
  border-radius: 30px;
}
.elementor-315
  .elementor-element.elementor-element-8265d35
  .ht-products
  .ht-product
  .ht-product-inner {
  border-color: #f1f1f1;
  border-radius: 30px;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
  text-wrap: balance;
  text-wrap: pretty;
  display: block;
  color: #6a037c;
  align-content: center;
}
.wc-block-components-form {
  counter-reset: checkout-step;
  color: white;
  font-family: "roboto";
}
.wc-block-components-checkout-order-summary__content {
  color: white;
}
body:not(.woocommerce-block-theme-has-button-styles)
  .wc-block-components-button:not(.is-link) {
  min-height: 3em;
  background: none;
  border-style: none;
}
.wc-block-components-checkout-place-order-button
  .wc-block-components-checkout-place-order-button__text {
  align-items: center;
  display: flex;
  justify-content: center;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
  float: left;
  margin-right: 1em;
  border-radius: 15px;
  color: #6a037c;
}
.woocommerce ul.order_details {
  margin: 3 0 3em;
  list-style: none;
  color: white;
}
/*------AUTRES PAGES-------------*/

body:not(.page-id-74) {
  h1 {
    margin-top: 100px;
    color: white;
    font-family: "posterama-2001", sans-serif;
    font-size: 4rem;
  }
  h2 {
    color: white;
    font-size: 3rem;
  }
  p {
    color: white;
  }

  img {
    display: block;
  }
  footer .container h2 {
    text-align: left;
  }
  footer p {
    text-align: left;
    font-size: 1rem;
    margin-left: 0;
  }
  footer ul.contact-list {
    display: grid;
  }
  .elementor-393 .elementor-element.elementor-element-78d0e7e img {
    width: 100%;
    max-width: 100%;
    opacity: 1;
    border-radius: 35px;
  }
  /*------plan et acces---------*/
  @media (max-width: 480px) {
    #gallery-1 {
      margin: auto;
      display: flex;
      flex-direction: column;
    }
    #gallery-1 .gallery-item {
      float: left;
      margin-top: 10px;
      text-align: center;
      width: 100%;
    }
  }
  /*------CONTACT---------*/

  .page-id-182 .background-wrapper ul.wp-block-list li a {
    color: white;
    text-align: center;
    margin: 100px;
    font-size: 1rem;
  }
  input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    height: 30px;
  }
  .page-id-182 input.wpcf7-form-control .wpcf7-submit .has-spinner {
    width: 200px;
    height: 100px;
    border-radius: 25px;
  }
  @media (max-width: 480px) {
    .footer-section-apropos p {
      text-align: center;
      margin: 0 auto;
    }
    footer .footer-section-apropos {
      display: grid;
      justify-content: center;
      justify-items: center;
    }
  }
}
/*---------container-----------*/

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}
/*---------connexion-----------*/

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border-radius: 35px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08)
  );
  background-repeat: no-repeat;
  background-position-x: center;
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 35px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border 0.35s ease;
  will-change: transform;
  width: 25rem;
}

/*---------compte-----------*/
#primary .container {
  max-width: 1200px;
  margin: 15rem 5rem;
  padding: 0;
}

@media (max-width: 768px) {
  /* ---------- GLOBAL ---------- */

  .container {
    padding: 0 20px;
  }
  #navbar {
    display: none;
  }
  h1 {
    font-size: 3rem !important;
  }

  h2 {
    font-size: 2rem !important;
    text-align: center;
  }

  p {
    font-size: 1rem;
  }

  /* ---------- NAVBAR ---------- */

  #navbar {
    height: 70px;
    padding: 0 15px;
  }

  #navbar .logo {
    width: 140px;
  }

  .menu1,
  .menu2 {
    gap: 10px;
  }

  nav ul {
    display: none;
  }

  /* ---------- HERO ---------- */

  .hero {
    height: auto;
    padding: 140px 20px 80px;
    background-position: center;
  }

  .hero h1,
  .hero h2,
  .hero h3,
  #date {
    margin: 0;
    text-align: center;
  }

  .hero h1 {
    font-size: 3rem;
    padding-top: 0;
  }

  .hero h2 {
    font-size: 2.5rem;
  }

  .hero h3 {
    font-size: 1.5rem;
  }

  #date {
    font-size: 4rem;
  }

  .hero div {
    flex-direction: column;
    gap: 20px;
    margin: 30px 0;
    align-items: center;
  }

  ul#social-media {
    justify-content: center;
    margin: 40px 0 0;
    gap: 20px;
  }

  /* ---------- INFOS ---------- */

  .infos ul {
    flex-direction: column;
    align-items: center;
    margin: 3rem 1rem;
    gap: 2rem;
  }

  .infos li {
    width: 100%;
    max-width: 350px;
    height: auto;
  }

  /* ---------- JEUX ---------- */

  .jeux {
    margin: 4rem 1rem;
  }

  .jeux-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .jeux img {
    width: 100%;
    height: auto;
  }

  /* ---------- BOUTIQUE ---------- */

  .boutiquehomepage {
    grid-auto-flow: row;
    margin: 4rem 1rem;
    gap: 3rem;
  }

  #boutique-container {
    width: 100%;
  }

  /* ---------- PARTENAIRES ---------- */

  .partenaires {
    margin: 4rem 1rem;
    padding: 2rem 1rem;
  }

  .partenaires ul {
    flex-direction: column;
    gap: 3rem;
  }

  /* ---------- NEWSLETTER ---------- */

  #newsletter {
    margin: 4rem 1rem;
    padding: 2rem 1rem;
  }

  #newsletterForm {
    flex-direction: column;
  }

  #container-newsletter input {
    width: 100%;
    max-width: 300px;
  }

  /* ---------- FOOTER ---------- */

  footer .footercontainer {
    flex-direction: column;
    gap: 3rem;
    padding: 3rem 1.5rem;
  }

  .footer-section,
  .footer-section-apropos,
  footer .footer-section-contact {
    width: 100%;
    text-align: center;
  }

  footer a {
    justify-content: center;
  }

  footer .socialmedia ul {
    justify-content: center;
  }

  /* ---------- WOOCOMMERCE ---------- */

  .wp-block-woocommerce-cart.alignwide {
    margin: 100px 20px;
  }

  .wc-block-components-sidebar-layout {
    flex-direction: column;
  }

  .wc-block-components-sidebar-layout .wc-block-components-main {
    width: 100%;
  }

  .woocommerce form.checkout_coupon,
  .woocommerce form.login,
  .woocommerce form.register {
    width: 100%;
  }
}

/*--------------- MOBILE NAVBAR -----------------*/

.mobile-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  display: none;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(20px);
  z-index: 1001;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-logo {
  width: 140px;
}

#burger {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.menu-items {
  position: fixed;
  overflow-y: auto;
  inset: 0 0 75px 0;
  width: 100%;
  height: auto;
  background: rgba(10, 10, 10, 0.97);
  display: flex;
  flex-direction: column;
  padding: 40px 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  will-change: transform;
}

.menu-items.active {
  transform: translateX(0);
}

.menu-items a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-items img {
  width: 28px;
  height: 28px;
}
.close-menu {
  position: absolute;

  bottom: 30px;
  left: 50%;

  transform: translateX(-50%);

  width: 70px;
  height: 70px;

  border-radius: 50%;
}
svg.icon.icon-tabler.icons-tabler-outline.icon-tabler-arrow-narrow-left {
  width: 40px;
  height: 40px;
}
.theme-btn {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.gray-btn {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  transition: 0.3s ease;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
}

.gray-btn svg {
  width: 100%;
  height: auto;
}

.gray-btn.active {
  background-color: white;
  color: black;
}
/* ----------------- MOBILE ONLY ----------------- */

@media (max-width: 768px) {
  #navbar {
    display: none !important;
  }

  .mobile-navbar {
    display: flex;
  }
}