/* 
Theme Name: la-reinette
Template: hello-elementor 
*/

/**
 * CSS card tunnel de vente (choix de la course)
 */
      .card {
          border-radius: 12px;
          border:none;
          padding: 2vw;
          max-width: 100%;
          margin: 2vw auto;
          background-color: #3C0A3F;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          display: flex;
          flex-direction: column;;
      }

      img.svg{
          width: 1.5em;
          height: auto;
          max-width: 24px;
          vertical-align: middle;
      }

      .submenu {
          margin-top: 2vw;
          display: flex;
          justify-content: space-between;
          gap: 1vw;
          order: 2;
      }

      input[type="radio"] {
          display: none;
      }

      .submenu label {
          height: 10vh;;
          flex: 1;
          background-color: #f3f3f3;
          padding: 1vw;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.3s;
          text-align: center;
          font-size: clamp(14px, 2.5vw, 16px);
          display: flex; /* Use flex to stack text and images */
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }


      .submenu label:hover {
          background-color: #e0e0e0;
      }

      #opt1:checked ~ .submenu label[for="opt1"],
      #opt2:checked ~ .submenu label[for="opt2"],
      #opt3:checked ~ .submenu label[for="opt3"],
      #opt4:checked ~ .submenu label[for="opt4"] {
          background-color: #2d89ef;
          color: white;
      }

      #opt1:checked ~ .submenu,
      #opt2:checked ~ .submenu,
      #opt3:checked ~ .submenu,
      #opt4:checked ~ .submenu {
          display: none;
      }

      #opt1:checked ~ .details-1,
      #opt2:checked ~ .details-2,
      #opt3:checked ~ .details-3,
      #opt4:checked ~ .details-4 {
          display: block;
          order: 3;
      }


      #opt1:checked ~ .title,
      #opt2:checked ~ .title,
      #opt3:checked ~ .title,
      #opt4:checked ~ .title {
          display: none;
      }

      .details {
          display: none;
          margin-top: 2vw;
      }

      .choice {
          display: inline-block;
          margin: 1vw 0.5vw;
          background: white;
          padding: 1vw 2vw;
          border-radius: 15px;
          text-align: center;
          cursor: pointer;
          color: #3C0A3F;
          font-weight: bold;
          font-size: clamp(14px, 2.5vw, 16px);
          width: 20%;
          max-width: 200px;
      }


      .final {
          display: none;
          text-align: right;
      }

      /* Fix for final button display */
      .details-content1 input:checked ~ .final,
      .details-content2 input:checked ~ .final,
      .details-content3 input:checked ~ .final,
      .details-content4 input:checked ~ .final {
          display: block;
      }

      .final a {
          text-decoration: none;
          font-weight: bold;
          background: #DF0166;
          color: white;
          padding: 1vw 2vw;
          border-radius: 60px;
          display: inline-block;
          font-size: clamp(14px, 2.5vw, 16px);
          transition: background 0.3s;
      }

      .final a:hover {
          background: #c7005a;
      }

      .details-content1, .details-content2, .details-content3, .details-content4 {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 1vw;
      }

      .text-purple {
          color: #3C0A3F;
          font-weight: bold;
          margin: 0; /* Remove default margin for better control */
          font-family: 'Quicksand', sans-serif;
      }

      .text-white {
          color: white;
          font-weight: bold;
          margin: 0; /* Remove default margin for better control */
          font-family: 'Quicksand', sans-serif;
      }

      .title-sous-menu {
          color: white;
          font-weight: bold;
          text-align: start;
          padding: 0%;
          margin: 0%;
      }

      .fixed-buttons {
          position: absolute;
          top: 50%;
          left: -12vw;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          gap: 1vw;
          z-index: 1000;
      }

      .fixed-buttons label {
          background: #2d89ef;
          color: white;
          padding: 1vw 2vw;
          border-radius: 6px;
          cursor: pointer;
          text-align: center;
          font-size: clamp(14px, 2.5vw, 16px);
          transition: background 0.3s;
      }

      .fixed-buttons label:hover {
          background: #1a73e8;
      }

      .card h3.title {
          order: 1;
          color: white;
          text-align: start;
          margin: 0;
      }

      /* Container for icons to keep them horizontally aligned */
      .icons {
          display: flex;
          justify-content: center;
          gap: 0.5vw;
          margin-top: 0.5vw; /* Space between text and icons */
      }

      /* Adjust text color when label is selected */
      #opt1:checked ~ .submenu label[for="opt1"] .text-purple,
      #opt2:checked ~ .submenu label[for="opt2"] .text-purple,
      #opt3:checked ~ .submenu label[for="opt3"] .text-purple,
      #opt4:checked ~ .submenu label[for="opt4"] .text-purple {
          color: white;
      }

      /* Mobile */
      @media screen and (max-width: 764px) {
          .card {
              border-radius: 12px;
              padding: 2vw;
              max-width: 100%;
              margin: 2vw auto;
              background-color: #3C0A3F;
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
              display: flex;
              flex-direction: column;
          }

          .submenu {
              flex-direction: column;
              gap: 2vw;
          }

          .submenu label {
              padding: 3vw;
              font-size: clamp(12px, 3vw, 14px);
          }

          .choice {
              width: 100%;
              max-width: 100%;
              margin: 2vw auto;
              padding: 3vw;
              font-size: clamp(12px, 3vw, 14px);
          }

          .final {
              margin: 4vw auto; /* Réduit la marge supérieure et centré */
              text-align: center; /* Centrer le bouton */
              width: 100%; /* S'assurer que le conteneur prend toute la largeur */
              margin : none;
              margin-right:30%;
          }

          .final a {
              width: 90%; /* Bouton presque pleine largeur pour faciliter le clic */
              max-width: 300px; /* Limite maximale pour éviter un bouton trop large */
              padding: 4vw 2vw; /* Padding plus généreux */
              font-size: clamp(14px, 4vw, 16px); /* Taille de police légèrement plus grande */
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre subtile pour effet tactile */
              border-radius: 12px; /* Coins moins arrondis pour un look moderne */
              display: block; /* S'assurer que le bouton est un bloc centré */
              margin: 0 auto; /* Centrage horizontal */
          }

          .fixed-buttons {
              position: static;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;
              margin: 2vw auto;
              transform: none;
          }

          .fixed-buttons label {
              flex: 1;
              max-width: 45%;
              padding: 3vw;
              font-size: clamp(12px, 3vw, 14px);
          }

          img.svg {
              width: 1.2em;
              max-width: 20px;
          }


          /* Tablettes */
          @media screen and (min-width: 765px) and (max-width: 1024px) {
              .card {
                  border-radius: 12px;
                  padding: 2vw;
                  max-width: 100%;
                  margin: 2vw auto;
                  background-color: #3C0A3F;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                  display: flex;
                  flex-direction: column;

              }

              .submenu label {
                  font-size: clamp(13px, 2.5vw, 15px);
              }

              .choice {
                  width: 40%;
                  max-width: 180px;
                  font-size: clamp(13px, 2.5vw, 15px);
                  padding: 2vw;
              }


              .final {
                  margin: 3vw auto; /* Centrer avec une marge réduite */
                  text-align: center; /* Centrer le bouton */
                  width: 60%; /* Conteneur pleine largeur */
              }

              .details-3 .details-content3 .final a {
                  margin-left: 0px;
                  width: 100%; /* Bouton large mais pas pleine largeur */
                  max-width: 350px; /* Limite pour éviter un bouton trop large */
                  padding: 2.5vw 2vw; /* Padding confortable */
                  font-size: clamp(14px, 2.8vw, 16px); /* Police adaptée aux tablettes */
                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre subtile */
                  border-radius: 10px; /* Coins légèrement arrondis */
                  display: block; /* Bouton centré */
                  margin: 0 auto; /* Centrage horizontal */
                  transition: background 0.3s, transform 0.2s; /* Transition pour hover et clic */
              }

              .final a:hover {
                  background: #c7005a;
                  transform: scale(1.02); /* Léger effet de zoom au survol */
              }

              .fixed-buttons {
                  left: -10vw;
              }

              img.svg{
                  width: 1.4em;
                  max-width: 22px;
              }
          }
      }

      .back-button {
          display: none;
          background: #c7005a;
          color: white;
          padding: 0.8vw 1.2vw;
          border-radius: 50%;
          cursor: pointer;
          text-align: center;
          font-size: clamp(18px, 2.5vw, 24px);
          transition: all 0.3s ease;
          border: none;
          margin-bottom: 1vw;
          width: 40px;
          height: 40px;
          display: none;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .back-button:hover {
          background: #c7005a;
          transform: translateX(-3px);
      }

      /* Afficher le bouton uniquement quand une option est sélectionnée */
      #opt1:checked ~ .back-button,
      #opt2:checked ~ .back-button,
      #opt3:checked ~ .back-button,
      #opt4:checked ~ .back-button {
          display: flex;
      }

      @media screen and (max-width: 764px) {
          .back-button {
              width: 35px;
              height: 35px;
              font-size: clamp(16px, 3vw, 20px);
              margin: 2vw auto;
          }
      }

      .description-text {
          background: rgba(255, 255, 255, 0.1);
          padding: 2vw;
          border-radius: 8px;
          margin: 2vw 0;
          width: 100%;
          box-sizing: border-box;
      }

      .description-text p {
          margin: 0;
          line-height: 1.6;
          font-size: clamp(14px, 2vw, 16px);
      }

      @media screen and (max-width: 764px) {
          .description-text {
              padding: 4vw;
              margin: 3vw 0;
          }
          
          .description-text p {
              font-size: clamp(13px, 3vw, 15px);
          }
      }