@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans&family=Roboto:ital,wght@0,400;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&family=Inclusive+Sans&family=Roboto:ital,wght@0,400;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

@font-face {
  font-family: "Geared-Slab";
  src: url("../Fonts/Geared-Slab-Font/GearedSlab.ttf");
}

body {
  background: black;
  background-size: cover;
  font-family: "Roboto";
  font-size: 16px;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background: black;
  text-align: center;
  padding-bottom: 70px;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 10px;
}

.sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
  }
}

header h1 {
  font-size: 4rem;
  color: #ebe6dd;
  font-family: "Geared-Slab", sans-serif;
  letter-spacing: 2px;
}

header span {
  color: #ebe6dd;
  font-family: "Geared-Slab", sans-serif;
}

header img {
  max-height: 100px;
  width: 200px;
}

main::before {
  position: absolute;
  top: 1px;
  content: "";
  display: block;
  background: url("../Images/Fond-peinture-beige.png") center/cover;
  width: 100%;
  height: 40px;
  transform: rotate(180deg) translateY(40px);
}
/*main::after {
  position: absolute;
  bottom: 1px;
  content: "";
  display: block;
  background: url("../Images/Fond-peinture-beige.png") center/cover;
  width: 100%;
  height: 40px;
  transform: rotate(180deg) translateY(40px);
}*/

.presentation {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.7rem;
  color: #ebe6dd;
  font-family: "Geared-Slab", sans-serif;
  line-height: 40px;
  border-radius: 5px;
  max-width: 1000px;
  text-align: center;
  padding: 10px;
}

.presentation a {
  color: #ebe6dd;
}

main {
  position: relative;
  background: #9f7b40;
}

.grid-container {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 12px;
  grid-column-gap: 12px;
  max-width: 90%;
  justify-content: center;
  margin: auto;
  padding-bottom: 40px;
  margin-top: 50px;
  grid-template-areas:
    "zone1 zone1 zone2 zone2 zone2 zone3 zone3 zone4 zone4 zone4 zone5 zone5"
    "zone1 zone1 zone2 zone2 zone2 zone3 zone3 zone4 zone4 zone4 zone5 zone5"
    "zone6 zone6 zone7 zone7 zone8 zone8 zone8 zone9 zone9 zone10 zone10 zone10"
    "zone6 zone6 zone7 zone7 zone8 zone8 zone8 zone9 zone9 zone10 zone10 zone10"
    "zone6 zone6 zone11 zone11 zone12 zone12 zone12 zone12 zone13 zone13 zone13 zone13"
    "zone14 zone14 zone11 zone11 zone12 zone12 zone12 zone12 zone13 zone13 zone13 zone13"
    "zone14 zone14 zone11 zone11 zone12 zone12 zone12 zone12 zone15 zone15 zone16 zone16"
    "zone17 zone17 zone17 zone18 zone18 zone19 zone19 zone19 zone15 zone15 zone16 zone16"
    "zone17 zone17 zone17 zone18 zone18 zone19 zone19 zone19 zone15 zone15 zone16 zone16"
    "zone20 zone20 zone21 zone21 zone21 zone22 zone22 zone23 zone23 zone23 zone24 zone24"
    "zone20 zone20 zone21 zone21 zone21 zone22 zone22 zone23 zone23 zone23 zone24 zone24";
}

.item {
  min-width: 120px;
  min-height: 160px;
  transition: all ease-in-out 200ms;
  perspective: 1000px;
  background: transparent;
  position: relative;
}

.item:hover {
  cursor: pointer;
}

.item:nth-child(1) {
  grid-area: zone9;
}

.item:nth-child(2) {
  grid-area: zone2;
}

.item:nth-child(3) {
  grid-area: zone17;
}

.item:nth-child(4) {
  grid-area: zone19;
}

.item:nth-child(5) {
  grid-area: zone5;
}

.item:nth-child(6) {
  grid-area: zone15;
}

.item:nth-child(7) {
  grid-area: zone7;
}

.item:nth-child(8) {
  grid-area: zone8;
}

.item:nth-child(9) {
  grid-area: zone1;
}

.item:nth-child(10) {
  grid-area: zone10;
}

.item:nth-child(11) {
  grid-area: zone11;
}

.item:nth-child(12) {
  grid-area: zone24;
}

.item:nth-child(13) {
  grid-area: zone13;
}

.item:nth-child(14) {
  grid-area: zone14;
}

.item:nth-child(15) {
  grid-area: zone6;
}

.item:nth-child(16) {
  grid-area: zone23;
}

.item:nth-child(17) {
  grid-area: zone3;
}

.item:nth-child(18) {
  grid-area: zone18;
}

.item:nth-child(19) {
  grid-area: zone4;
}

.item:nth-child(20) {
  grid-area: zone20;
}

.item:nth-child(21) {
  grid-area: zone21;
}

.item:nth-child(22) {
  grid-area: zone22;
}

.item:nth-child(23) {
  grid-area: zone16;
}

.item:nth-child(24) {
  grid-area: zone12;
}

@media (max-width: 850px) {
  .grid-container {
    grid-template-areas: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .grid-container .item {
    min-height: 150px;
    min-width: 150px;
    grid-area: unset;
  }
}

.item:hover {
  transform: scale(1.02);
  border-radius: 10px;
}

.flip-card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  background-color: transparent;
  border-radius: 0px;
}

.current .flip-card-inner {
  transform-style: preserve-3d;
}

.current .flip-card-inner {
  animation: glow infinite 3s ease-in-out;
  filter: none;
  background-color: transparent;
}

.current {
  filter: none;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.num {
  color: #9f7b40;
  text-align: right;
  font-size: 2rem;
  margin: 20px;
  font-family: "Lobster", sans-serif;
}

.countdown {
  margin-top: 10px;
  font-size: 14px;
}

.gift {
  text-align: center;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0px;
  color: black;
}

@media screen and (max-width: 850px) {
  .flip-card-front,
  .flip-card-back {
    border-radius: 5px;
  }
}

.item .flip-card-front,
.item .flip-card-back {
  background: #e8dec9;
}

.current .flip-card-front,
.current .flip-card-back {
  background: #eae6de;
}

.flip-card-front {
  transition: all ease-in-out 500ms;
}
.picto {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 150px;
  max-width: 100%;
  height: 80%;
}

.item:nth-child(24) .picto:first-child {
  bottom: 0;
  right: 20px;
  top: unset;
  left: unset;
  transform: translate(0%);
}

.item:nth-child(24) .picto:last-child {
  top: 0;
  transform: translateY(-20px);
}

.item:nth-child(1) .picto,
.item:nth-child(4) .picto,
.item:nth-child(5) .picto,
.item:nth-child(9) .picto,
.item:nth-child(14) .picto,
.item:nth-child(15) .picto,
.item:nth-child(17) .picto,
.item:nth-child(20) .picto,
.item:nth-child(22) .picto,
.item:nth-child(23) .picto {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 850px) {
  .picto {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .item:nth-child(24) .picto:last-child {
    display: none;
  }

  .item:nth-child(24) .picto:first-child {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.flip-card-front h2 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: bold;
}

.passed {
  text-align: center;
}

.passed .num {
  position: absolute;
  top: 0;
  right: 0;
  margin: 7px;
  font-size: 1.2rem;
}

.passed .flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.passed .flip-card-front h2 {
  margin-top: 5px;
  font-size: 1.3rem;
  font-weight: bold;
}

.winner {
  margin-top: 5px;
}

span.prenom {
  display: inline-block;
  text-transform: lowercase;
}

span.prenom::first-letter {
  text-transform: uppercase;
}

span.nom {
  text-transform: uppercase;
}

.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.flip-card-back h2 {
  font-size: 1.3rem;
  padding: 5px;
  font-weight: bold;
  color: #9f7b40;
}

.flip-card-back button {
  font-family: "Roboto";
  font-weight: bold;
  background-color: transparent;
  border: solid #9f7b40 1px;
  border-radius: 20px;
  padding: 5px 10px;
  color: #9f7b40;
  font-size: 18px;
  transition: all 200ms;
}

.flip-card-back button:hover {
  cursor: pointer;
  border: solid #8f6f3b 1px;
  color: #8f6f3b;
}

.flip-card-inner img:hover {
  cursor: pointer;
}

#lock {
  font-size: 40px;
  color: white;
  transition: all ease-in-out 200ms;
}

#lock img {
  width: 40px;
  height: 40px;
}

#lock:hover {
  cursor: pointer;
}

#lock span {
  transition: all ease-in-out 200ms;
}

#lock span:hover {
  transform: rotate(400deg);
}

.animate-lock {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-1deg);
  }
  40% {
    transform: rotate(1deg);
  }
  60% {
    transform: rotate(-1deg);
  }
  80% {
    transform: rotate(0deg);
  }
}

.bubble {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  animation: appear 2s ease-in-out;
  opacity: 0;
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  transform: all 1s ease-in-out;
  opacity: 0;
  animation: fade-out 1s ease-in-out;
  overflow-y: scroll;
}

.modal.shown {
  display: block;
  opacity: 1;
  animation: fade-in 200ms ease-in-out;
}

.modal.hidden {
  opacity: 0;
  animation: fade-out 200ms ease-in-out;
  display: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  padding-bottom: 50px;
  width: 70%;
  max-width: 1000px;
  min-width: 80%;
  max-height: 80vh;
  border-radius: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  color: #ebe6dd;
  overflow-y: auto;
}

.modal span {
  color: #ebe6dd;
}

.close {
  color: #ebe6dd;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #cec9c0;
  text-decoration: none;
}

#modalText h2 {
  font-size: 48px;
  font-weight: bold;
  margin-top: 30px;
  color: #ebe6dd;
}

#modalText p {
  margin-top: 20px;
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#modalText a {
  color: #f6f6f6;
}

#modalText a.choco{
  color:#9f7b40;
}

@media screen and (max-width: 350px) {
  #modalText p {
    max-width: 100%;
  }

  #modalText h2 {
    font-size: 2rem;
  }
}

.modal-content form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  gap: 20px;
}

.modal-content form input {
  width: 300px;
  height: 40px;
  border-radius: 10px;
  border: solid rgba(30, 30, 30, 0.3) 1px;
  padding-left: 10px;
  background: #ebe6dd;
}

.modal-content form input.shake {
  animation: shake 0.5s;
}

.modal-content form input[type="checkbox"] {
  width: max-content;
  height: max-content;
}

.modal-content form input[type="submit"] {
  min-width: 200px;
  width: 100px;
  min-height: 40px;
  border-radius: 10px;
  border: solid rgba(30, 30, 30, 0.3) 1px;
  text-align: center;
  margin-top: 20px;
  background-color: #ebe6dd;
  cursor: pointer;
  letter-spacing: 1px;
}

.modal-content form button:hover {
  cursor: pointer;
}

form #loader {
  display: none;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s infinite;
}

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

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

.passed .flip-card-inner .flip-card-back,
.passed .flip-card-inner .flip-card-front {
  filter: none;
  color: #333;
}

@media screen and (max-width: 1200px) {
  .passed .flip-card-front h2 {
    font-size: 1.1rem;
    margin: 5px;
  }

  .passed .num {
    font-size: 0.9rem;
  }

  .num {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 425px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 3rem;
    padding: 10px;
  }

  .modal-content form input {
    width: 80%;
  }
}

.cookie-icon {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #333;
  color: white;
  padding: 10px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.cookie-icon {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
}

.unique-cookie-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.unique-cookie-content {
  position: relative;
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  max-width: 400px;
  text-align: center;
  color: #333;
  animation: cookieOpeningAnim 0.5s ease-in-out;
}

.unique-cookie-content h2 {
  font-size: 1.3rem;
  font-weight: 300;
  margin-bottom: 20px;
  font-family: "Geared-Slab";
  letter-spacing: 2px;
}

.unique-cookie-content p {
  line-height: 20px;
}

.unique-cookie-content .close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1rem;
  font-family: "Roboto";
  color: #333;
}

@keyframes cookieOpeningAnim {
  0% {
    transform: translateY(50px);
    opacity: 0;
    filter: blur(1px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
    filter: blur(0px);
  }
}

/* Compte à rebours */
#countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}