/*
Theme Name:  Chez Planes 130ans
Theme URI:   https://attps.fr/
Version:     2.0
Description: Theme Enfant Divi
Author:      ATTPS
Author URI:  https://attps.fr/
Template:    Divi
*/

/*- Add any CSS custom code for this child theme below this line -*/


/*=== Css Générale ===*/
body,
html {
   overflow-x: hidden;
}

h1 {
   font-size: 50px;
}

h2 {
   font-size: 35px;
}

h3 {
   font-size: 25px;
}

h4 {
   font-size: 18px;
}

h5 {
   font-size: 18px;
   text-transform: uppercase;
}


.light h1,
.light h2,
.light h3,
.light h4,
.light h5 {
   color: #FFF;
}

/* classes personnalisées qui désigneront l'ordre
   des colonnes dans la ligne de la flexbox */
.first-on-mobile {
   -webkit-order: 1;
   order: 1;
}

.second-on-mobile {
   -webkit-order: 2;
   order: 2;
}

.third-on-mobile {
   -webkit-order: 3;
   order: 3;
}

.fourth-on-mobile {
   -webkit-order: 4;
   order: 4;
}

/* ajoute une marge à la dernière colonne */
.custom_row:last-child .et_pb_column:last-child {
   margin-bottom: 30px;
}

/* COOKIE NOTICE */
.cn-button.bootstrap {
   color: #fff;
   background: #666;
}

/*=== MEDIA QUERIES ===*/
/* iPad Pro/Air 11" */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

   h1 {
      font-size: 40px;
   }

   h2 {
      font-size: 30px;
   }

   h3 {
      font-size: 25px;
   }

   h4 {
      font-size: 18px;
   }

   h5 {
      font-size: 18px;
   }

}

/* iPhone 6 & > */
@media all and (max-width: 940px) {

   h1 {
      font-size: 35px;
   }

   h2 {
      font-size: 25px;
   }

   h3 {
      font-size: 20px;
   }

   h4 {
      font-size: 20px;
   }

   h5 {
      font-size: 20px;
   }
}


/*----------Alignement vertical-----------*/
.centrer-verticalement {
   display: flex;
   flex-direction: column;
   justify-content: center;

   /* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs  */
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -ms-flex-direction: column;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
}

.big-star-left {
   .et_pb_image_wrap {
      position: relative;

      &::before {
         position: absolute;
         content: "";
         background: url(/wp-content/uploads/sites/8/2025/06/Trace-1598.svg);
         background-repeat: no-repeat;
         background-size: contain;
         z-index: 2;
         left: 0;
         top: -39%;
         translate: -94%;
         width: 1100px;
         height: auto;
         aspect-ratio: 1 / 1;


         @media all and (max-width: 980px) {
            width: 50%;
            translate: -74%;
            top: -46%;
         }
      }
   }
}

.form-game-container {
   padding-block: clamp(1.563rem, 2vw + 0.75rem, 2.5rem);
   padding-inline: clamp(2.188rem, 5vw, 9.375rem);

   .gfield_required_asterisk,
   .gform_required_legend {
      display: none !important;
   }

   .gform_fields {
      @media all and (max-width: 980px) {
         grid-row-gap: 0px !important;
      }
   }

   .gfield> :where(label:not(.gfield_consent_label), legend) {
      font-size: clamp(0.75rem, 2vw + 0.25rem, 1.5rem) !important;
   }

   .gfield:has(input[type=text], input[type=email], input[type=tel]) {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 15px;

      @media all and (max-width: 768px) {
         flex-direction: column;
         gap: 0px;
      }


      label {
         margin-bottom: 0;

      }

      input {
         border: none;
         font-size: clamp(1.2rem, 2vw + 0.25rem, 1.5rem) !important;
         color: #5E130E;
         line-height: 1 !important;

         @media all and (max-width: 768px) {
            padding: 0;
         }
      }

      input[type=text],
      input[type=tel] {
         width: 340px;
         max-width: 100%;

         @media all and (max-width: 768px) {
            width: 220px;
         }
      }

      input[type=email] {
         width: 580px;
         max-width: 100%;
      }

      .ginput_container {
         position: relative;
         max-width: 100%;

         &::after {
            position: absolute;
            content: '';
            border-bottom: 2px dashed #5E130E;
            width: 100%;
            left: 0;
            bottom: 7px;
            opacity: 0.5;
         }
      }
   }

   .ginput_container_consent,
   .gchoice {
      margin-bottom: 10px;

      input {
         opacity: 0;
      }

      label {
         position: relative;
         font-weight: 500;
         font-size: clamp(0.75rem, 2vw + 0.25rem, 1.5rem) !important;
         padding-left: 10px;



         &::before {
            position: absolute;
            content: "";
            background: url(/wp-content/uploads/sites/8/2025/06/Groupe-248.svg);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 2;
            left: 0;
            top: 0%;
            translate: -100%;
            width: 27px;
            height: auto;
            aspect-ratio: 1 / 1;
         }
      }

      &:has(input:checked) {
         label {

            &::before {
               background: url(/wp-content/uploads/sites/8/2025/06/Groupe-247.svg);
               background-repeat: no-repeat;
               background-size: contain;

            }
         }
      }
   }

   .gform_button[type=submit] {
      line-height: 1 !important;
      font-size: clamp(1rem, 2vw + 0.5rem, 2.063rem);
      font-weight: bold;
      padding-block: clamp(0.75rem, 1vw + 0.5rem, 1.25rem);
      padding-inline: clamp(0.938rem, 2vw + 0.25rem, 1.875rem);
      color: #F2EBDC;
      background: #EC6D1D;
      border: none !important;
      position: absolute;
      right: clamp(-0.938rem, 2vw + 0.25rem, -1.875rem);
      bottom: clamp(-0.75rem, 1vw + 0.5rem, -1.25rem);
      translate: 0% 100%;
      rotate: -3deg;
      scale: 1;
      transition: all 200ms ease-in;

      &:hover {
         scale: 1.05;

      }

      @media all and (max-width: 980px) {
         right: 50%;
         translate: 50% 100%;
      }
   }
}