/*
 Theme Name:   Librecours
 Theme URI:    https://example.com
 Description:  Thème enfant Librecours pour Divi 5 – Personnalisations préservées lors des mises à jour.
 Author:       Votre Nom
 Author URI:   https://example.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  librecours
*/

/* ==========================================================================
   Vos styles personnalisés ci-dessous
   ========================================================================== */

:root {
   --gap: 1em;
   --accent: #d35400;
   --dark: #3b1c11;
   --tertiary: #FFF6F0;
}




.libre-btn {
   display: inline-block;
   font-family: var(--et_global_body_font);
   color: var(--gcid-body-color) !important;
   background: var(--gcid-link-color);
   padding: 0.3rem 1rem;
   border: none;
   text-transform: uppercase;
   transition: all 300ms ease;
   font-size: clamp(0.9938rem, 0.7vw, 1.5625rem);

   &:hover {
      background: var(--gcid-body-color);
      color: var(--gcid-link-color) !important;
   }

   &.btn-rdv {
      color: var(--gcid-body-color);
      background: var(--tertiary);

      &:hover {
         background: var(--gcid-body-color);
         color: var(--tertiary) !important;
      }
   }
}

/* --- Wrapper pour Container Queries --- */


.gallery-container {
   container-type: inline-size;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 15px;
}

.salon-grid {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);




   .main-col {
      display: grid;
      gap: var(--gap);
      grid-template-rows: auto auto;
      flex: 3;
      min-width: 600px;

      @container (max-width: 630px) {
         min-width: 100%;
      }



      .row-top {
         display: flex;
         flex-wrap: wrap;
         gap: var(--gap);

         .text-block {
            flex: 1.5;
            display: grid;
            place-items: center;

            .text-block-content {
               font-size: clamp(1.250rem, calc(0.886rem + 1.818cqi), 2.250rem);
               font-weight: 400;
               text-transform: uppercase;
               line-height: 1;
               max-width: 315px;

               .logo {
                  width: 68px;
               }

               h2 {
                  font-weight: 700;
                  font-size: clamp(1.250rem, calc(0.886rem + 1.818cqi), 2.250rem);
                  color: var(--gcid-body-color);
                  font-family: var(--et_global_body_font);
               }
            }

         }

         .card_1 {
            flex: 1;
            min-width: 150px;
         }

         .card_2 {
            flex: 1;
            min-width: 150px;
         }

         @container (max-width: 630px) {
            .text-block {
               width: 100%;
               flex: none;

               .text-block-content {
                  max-width: none;
                  text-align: center;

                  .logo {
                     margin: 0 auto;
                  }
               }
            }
         }
      }

      .row-bottom {
         display: flex;
         flex-wrap: wrap;
         gap: var(--gap);

         .card_5 {
            flex: 1.5;
            min-width: 300px;
         }

         .card_4 {
            flex: 1;
            min-width: 150px;
         }

         .card_6 {
            flex: 1;
            min-width: 150px;
         }
      }
   }

   .side-col {
      flex: 1;
      min-width: 250px;
      display: grid;
      gap: var(--gap);
      grid-template-columns: repeat(auto-fit, minmax(250px, calc(50cqi - (var(--gap)/2))));
      display: flex;
      flex-wrap: wrap;

      .promo-card {
         flex: 1;
         min-width: 250px;
      }
   }

   .promo-card {
      display: grid;

      .promo-img-wrapper {
         grid-area: 1 / -1;
         position: relative;
         z-index: -1;

         img {
            width: 100%;
            height: 100%;
            object-fit: cover;
         }
      }

      .promo-overlay-wrapper {
         grid-area: 1 / -1;
         grid-area: 1 / -1;
         display: grid;
         place-items: center;
         gap: 0.9rem;
         padding: 1rem;
         transition: all 300ms ease;
         backdrop-filter: blur(5px);
         background: rgba(0, 0, 0, 0.3);
         opacity: 0;



         .promo-overlay {
            color: #fff;
            text-align: center;
            translate: 0 20px;
            transition: all 300ms ease;

            .service-details {
               max-width: 215px;
               margin: 0 auto;
               margin-bottom: 1rem;
               line-height: 1.2;
            }

         }

         /* &:hover {
            opacity: 1;

            .promo-overlay {
               translate: 0 0;
            }
         } */
      }

      @container (max-width: 500px) {
         width: 100%;
         flex: none !important;
         aspect-ratio: 16 / 9;
         height: auto !important;

         .promo-img-wrapper {
            grid-area: 1 / -1;

            img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               position: absolute;
               left: 0;
               top: 0;
            }
         }



      }
   }

}


.marquee-container {
   display: flex;
   overflow: hidden;
   /* Cache ce qui dépasse */
   user-select: none;
   gap: 0px;
   padding: 10px 0;
}

.marquee-content {
   display: flex;
   flex-shrink: 0;
   min-width: 100%;
   gap: 20px;
   justify-content: space-around;
   /* L'animation magique */
   animation: scroll-left 60s linear infinite;
}

@keyframes scroll-left {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-100%);
   }
}

/* Optionnel : Pause au survol */
/* .marquee-container:hover .marquee-content {
   animation-play-state: paused;
} */


.libre-faq {
   .libre-faq-list {
      list-style: none !important;
      padding: 0;

      .libre-faq-item {
         details {
            border-bottom: 1px solid rgba(204, 86, 22, 0.25);
            padding: 10px;
            margin: 1em;

            .libre-faq-question {

               list-style: none;
               cursor: pointer;
               margin-bottom: 5px;
               display: flex;
               align-items: center;
               justify-content: space-between;

               &::marker,
               &::-webkit-details-marker {
                  display: none;
               }

               :where(h1, h2, h3, h4, h5, h6) {
                  margin: 0;
                  padding: 0;
                  font-family: var(--et_global_body_font) !important;
                  color: var(--gcid-body-color) !important;
                  font-weight: bold;
                  text-transform: uppercase;
               }

               .libre-faq-icon {
                  i {
                     color: #CC5616;
                     font-size: 24px;
                     transition: transform 300ms ease;


                  }
               }

               &.active {
                  .libre-faq-icon {
                     i {
                        transform: rotate(-90deg);
                     }
                  }
               }
            }

            &:open {
               .libre-faq-question {
                  .libre-faq-icon {}
               }
            }

            .libre-faq-answer {
               padding-top: 1rem;
            }
         }
      }
   }
}

.libre-partners {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   justify-content: center;
   align-items: center;
   padding: 0;
   list-style: none !important;

   .libre-partner {
      flex: 1 1 150px;
      display: flex;
      justify-content: center;
      align-items: center;

      a {
         display: block;
         width: 100%;
         height: 100%;
         padding: 10px;
         text-align: center;

         img {
            max-width: 100%;
            max-height: 120px;
            object-fit: contain
         }
      }
   }
}

.my-custom-marker {
   width: 30px;
   height: 40px;
   transform: translate(-15px, -40px);
}