/*=================================================================================*/
@media (min-width: 768px) {
.text-shadow{
        text-shadow:  0px 3px #0000001f;
}
}
/*============================= POP UP INIT =============================*/

/* zone survole Popup Trigger */

.gs-popup-area { 
          cursor: pointer;
}

/*-------------*/

.gspb_slidingPanel .gspb_slidingPanel-wrap{

          max-width:100%!important;
          max-height:100vh;
          /*overflow:hidden!important;*/
          
}

.gspb_slidingPanel-inner{
        padding: 2rem 0.2rem 0.2rem 0.2rem!important;
        scrollbar-width: none!important; /* Firefox */
        -ms-overflow-style: none!important; /* IE et Edge */
}

.gspb_slidingPanel-inner::-webkit-scrollbar {
         display: none!important; /* Chrome, Safari */
}


div > .gspb_slidingPanel-wrap > .gspb_slidingPanel-close{
         top: 4rem!important;
         right: 4rem!important;
         background-color: var(--wp--preset--color--couleur-1);
}

div > .gspb_slidingPanel-wrap > .gspb_slidingPanel-close:hover{
         background-color: var(--wp--preset--color--couleur-2);
}


@media (max-width: 768px) {

        div > .gspb_slidingPanel-wrap > .gspb_slidingPanel-close{
                right: 0.5rem!important;
}

}

/*==================================*/

.gspb-buttonbox-title{
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;}

.gs-popup-area:hover .gspb-buttonbox-title {
    opacity: 0.8;
    transform: translateX(15px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}



/*============================= EFFET EMPILEMENT =============================*/


/* Neutraliser les animations dans l’éditeur Gutenberg */
.editor-styles-wrapper .panel-1,
.editor-styles-wrapper .panel-2,
.editor-styles-wrapper .panel-3,
.editor-styles-wrapper .panel {
  animation: none !important;
  animation-timeline: auto !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


@media (min-width: 1200px) {

  @supports (animation-timeline: view()) {
    .wp-site-blocks { 
      timeline-scope: --t-panel-1, --t-panel-2, --t-panel-3; 
    }

    .panel-1 { view-timeline-name: --t-panel-1; view-timeline-axis: block;}
    .panel-2 { view-timeline-name: --t-panel-2; view-timeline-axis: block;}
    .panel-3 { view-timeline-name: --t-panel-3; view-timeline-axis: block;}
    .panel { opacity: 1; }

    /* Panel 1 s'anime en fonction de sa propre timeline */
    .panel-1 {
  animation: fade-out linear both;
  animation-timeline: --t-panel-2;
  animation-range: entry 0% entry 100%; /* Pendant que panel-2 ENTRE */
}

.panel-2 {
  animation: fade-out linear both;
  animation-timeline: --t-panel-3;
  animation-range: entry 0% entry 100%; /* Pendant que panel-3 ENTRE */
}

    @keyframes fade-out {
      0% { opacity: 1; transform: scale(1); filter: blur(0px); }
      60% { opacity: 1; }     
      80% { transform: scale(0.8); filter: blur(0px); }   
      100% { opacity: 0; transform: scale(0.7); filter: blur(4px); }
    }
  }

}

/*============================= ANIMATION BOUTON =============================*/

.scroll-nudge {
  --nudge-distance: -7px;
  --nudge-move: 0.1s;
  --nudge-pause: 4s;
  --nudge-ease: cubic-bezier(.25,.1,.25,1);

  animation: scroll-nudge calc(var(--nudge-move) + var(--nudge-pause)) var(--nudge-ease) infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  will-change: transform;
}

@keyframes scroll-nudge {
  0%   { transform: translateY(0); }
  5%  { transform: translateY(calc(-1 * var(--nudge-distance))); }
  10%  { transform: translateY(0); }
  15%  { transform: translateY(calc(-1 * var(--nudge-distance))); }
  20%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-nudge {
    animation: none;
    transform: none;
  }
}

/*=================================================================================*/