/* Style général */
  body {
      background: linear-gradient(to bottom, #83a4d4, #b6fbff);
      /*background-image: url('https://www.transparenttextures.com/patterns/stardust.png');*/
      background-image: url(../img/adventskalender/christmas-aesthetic.jpg);
      background-size: cover;
      text-align: center;
      font-family: 'Mountains of Christmas', cursive;
      color: #2d2d2d;
  }

  h1 {
      color: #e63946;
      font-size: 4rem;
      margin: 10px 0;
      text-shadow: 2px 2px 4px #000;
  }

  p,
  li {
      font-size: 1.2em;
  }

  small {
      font-size: 1em !important;
  }

  a,
  button {
      font-size: 1.1em;
  }

  .calendar-container {
      background: #F8B229;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      margin: 20px auto;
      max-width: 690px;
  }

  .calendar-title {
      color: #6c757d;
      font-size: 1.5rem;
      margin-bottom: 10px;
      font-weight: bold;
  }

  .calendar {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
  }

  .day:nth-child(even) {
      position: relative;
      width: 100px;
      height: 100px;
      /*background: linear-gradient(145deg, #e63946, #6cbf5f);*/
      background-image: url(../img/adventskalender/fond-plat-noel.avif);
      background-size: cover;
      background-position: bottom right;
      color: white;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  .day:nth-child(odd) {
      position: relative;
      width: 100px;
      height: 100px;
      /*background: linear-gradient(145deg, #e63946, #6cbf5f);*/
      background-image: url(../img/adventskalender/fond-plat-noel.avif);
      background-size: cover;
      background-position: top left;
      color: white;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  .day.locked {
      cursor: not-allowed;
      background: #adb5bd;
      box-shadow: none;
  }

  .day.unlocked:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  }

  .day.unlocked:hover::before {
      content: '';
      position: absolute;
      width: 150%;
      height: 150%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 80%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.6;
      animation: sparkle 2s infinite ease-in-out;
      pointer-events: none;
  }

  .day.unlocked:hover::after {
      content: '✨';
      position: absolute;
      top: 10%;
      right: 10%;
      font-size: 1.5rem;
      animation: sparkle-fade 2s infinite alternate;
  }

  @keyframes sparkle {
      0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.6;
      }

      100% {
          transform: translate(-50%, -50%) scale(1.3);
          opacity: 0;
      }
  }

  @keyframes sparkle-fade {
      0% {
          opacity: 0.8;
          transform: scale(1);
      }

      100% {
          opacity: 0.4;
          transform: scale(1.2);
      }
  }


  /* Style des modals */
  .festive-modal {
      background-color: #efdfd7;
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }

  .modal-title {
      font-family: 'Mountains of Christmas', cursive;
      font-size: 1.5rem;
      color: #165B33;
  }

  .modal-body {
      padding-top: 0 !important;
  }

  .question-section {
      text-align: left;
      margin-bottom: 20px;
  }

  .question-image {
      width: 100%;
      max-width: 300px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
  }

  .question-text {
      font-size: 1.2rem;
      color: #343a40;
      margin: 10px 0;
  }

  .answers-section {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-top: 15px;
  }

  .answer-btn {
      background: #c84d4e;
      flex: 1;
      color: white;
      font-weight: bold;
      font-size: 1.1rem;
      text-align: center;
      border: none;
      border-radius: 10px;
      padding: 10px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
  }

  .answer-btn:hover {
      transform: scale(1.05);
  }

  .answer-btn.correct {
      background: #146B3A !important;
      animation: correct-answer 0.5s ease-in-out;
  }

  .answer-btn.wrong {
      background: #adb5bd !important;
  }

  /* Cacher la puce par défaut */
  ul {
      list-style-type: none;
      /* Supprimer les puces par défaut */
      padding-left: 0;
      /* Éviter le retrait */
  }

  li {
      position: relative;
      /* Nécessaire pour positionner l'élément ::before */
      padding-left: 25px;
      /* Décalage pour l'étoile */
      margin: 10px 0;
  }

  li::before {
      content: "★";
      /* Utilisation d'une étoile Unicode */
      color: #c84d4e;
      /* Couleur rouge pour l'étoile */
      font-size: 24px;
      /* Taille de l'étoile */
      position: absolute;
      /* Positionner l'étoile à gauche de l'élément */
      left: 0;
      top: 50%;
      /* Centrer verticalement */
      transform: translateY(-50%);
      /* Ajuster le positionnement vertical */
  }

  .btn-danger {
      background-color: #c84d4e !important;
  }

  .lgg {
    --bs-modal-width: 80% !important;
  }


  @keyframes correct-answer {
      0% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.1);
      }

      100% {
          transform: scale(1);
      }
  }

  .audio-player-container {
      background: rgba(255, 255, 255, 0.8);
      padding: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
  }

  #audioPlayer {
      background-color: #0f0;
      border-radius: 5px;
  }


  .play-btn {
      margin: 0 10px;
      padding: 10px 20px;
      background-color: #e63946;
      color: white;
      border: none;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
  }

  .play-btn:hover {
      background-color: #f1faee;
      color: #e63946;
  }

  #explications7,
  #explications8,
  #explications13 {
      display: none;
      margin-top: 20px;
      text-align: left;
  }




  @media (max-width: 768px) {

      .calendar-container {
          max-width: 99%;
      }

      .calendar-title {
          color: #6c757d;
          font-size: 1.3rem;
      }

      .day:nth-child(even) {
          position: relative;
          width: 60px;
          height: 60px;
      }

      .day:nth-child(odd) {
          position: relative;
          width: 60px;
          height: 60px;
      }

      h1 {
          color: #e63946;
          font-size: 3rem;
          margin: 10px 0;
          text-shadow: 2px 2px 4px #000;
      }

      p,
      li {
          font-size: 1em;
      }

      a,
      button {
          font-size: 1em;
      }



  }

  @media (min-width: 992px) {
      .special {
          --bs-modal-width: 90% !important;
      }
  }

  @media (max-width: 992px) {
      .special-b {
          visibility: hidden;
          flex: 0 !important;
      }

      .special-a {
          flex: 1 !important;
      }
  }


  @media (max-width: 576px) {

    .calendar-container {
        max-width: 99%;
    }

    .calendar-title {
        color: #6c757d;
        font-size: 1.3rem;
    }

    .day:nth-child(even) {
        position: relative;
        width: 50px;
        height: 50px;
    }

    .day:nth-child(odd) {
        position: relative;
        width: 50px;
        height: 50px;
    }
}