/*--------------------------------------------------------------
# Modal : pop-up
--------------------------------------------------------------*/
.modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    max-width: none!important;
    margin-top: 0!important;
}
#modal-btn{
    display: block;
    position: relative;
}
#modal-btn img{
  height: auto;
}
#modal-btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 96px;
    background: url("data:image/svg+xml;utf8, <svg width='95' height='95' viewBox='0 0 95 95' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='47.5' cy='47.5' r='47.5' fill='white'/><path d='M39 34V61.225L57.2341 47.6125L39 34Z' fill='black'/></svg>") no-repeat;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-position: center;
}
.modal-content {
    margin: 10% auto;
    max-width: 720px;
    width: 100%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    background: #000;
}
.modal-header {
    text-align: right;
    color: #fff;
    padding: 0 .3em;
    font-size: 2em;
    line-height: 1;
}
.modal-header .close:hover{
    cursor: pointer;
}

/*--------------------------------------------------------------
# Slide logo
--------------------------------------------------------------*/
.splide__slide{
    text-align: center;
  }
  .splide__pagination{
    top: 4vh;
  }
  .splide.logo .splide__slide{
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
    align-content: center;
    background: #fff;
  }
  .splide__slide > * {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: auto;
  }
  .splide__arrow{
    background: #002C5B;
    transition: transform 1s, margin 1s;
    opacity: .2;
  }
  .splide__arrow svg{
    fill: #fff;
  }
  .splide__arrow:hover:not(:disabled){
    transform: scale(1.5,1.5);
    margin-top: -.5rem;
  }
  .splide:not(.logo) .splide__arrow--prev {
    left: -1em;
  }
  .splide:not(.logo) .splide__arrow--next {
    right: -1em;
  }
  .splide .temoignage:before{
    content: url("../../../../../wp-content/uploads/2023/02/MOBILEESE-picto-quote.svg");
    width: 2.625rem;
    height: 2.1875rem;
    display: block;
    margin: auto;
    margin-bottom: 1em;
  }
  .splide__slide img {
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
    max-height: 14rem;
  }
  /*--------------------------------------------------------------
## Video lite
--------------------------------------------------------------*/

.wp-block-video video {
  max-width: 580px;
  }
  
  lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
  }
  
  /* gradient */
  lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
  }
  lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
  }
  lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
  }
  
  /* play button */
  lite-youtube > .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    background-position: center;
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
  }
  
  lite-youtube:hover > .lty-playbtn,
  lite-youtube .lty-playbtn:focus {
    filter: none;
  }
  
  /* Post-click styles */
  lite-youtube.lyt-activated {
    cursor: unset;
  }
  lite-youtube.lyt-activated::before,
  lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
  }
  
  .lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
/*--------------------------------------------------------------
## Tableau responsive
--------------------------------------------------------------*/
  #responsive-table{
    width: 100%;
    text-align: left;
    border-collapse: collapse;
  }
  #responsive-table th{
    font-weight: 600!important;
  }
  #responsive-table th, #responsive-table td {
    text-align: left;
  }
  #responsive-table td[data-label="Billets"]{
    border-left: 5px solid white!important;
  }
  #responsive-table th{
    font-size: 21px;
  }
  .has-lightgreen-background-color > td,
  .has-lightgreen-background-color > th{
    background: #F7FAF5!important;
  }
  .has-lightblue-background-color > td,
  .has-lightblue-background-color > th{
    background: rgba(239, 241, 251, 1)!important;
  }
  .has-lightred-background-color > td,
  .has-lightred-background-color > th{
    background: #ffd8d8!important;
  }
  .has-grey-background-color > td,
  .has-grey-background-color > th{
    background: #F6F6F6!important;
  }
  #responsive-table thead th{
    background: #fff;
  }
  #responsive-table thead th{
    vertical-align: bottom;
  }
  #responsive-table .first *{
    padding-top: 16px;
  }
  #responsive-table .last *{
    padding-bottom: 16px;
  }
  @media only screen and (min-width: 1081px){
    #responsive-table .first{
      border-top: 16px solid #fff;
    }
    #responsive-table th,#responsive-table td{
      padding: 5px 25px;
    }
    .has-lightred-background-color + .has-lightred-background-color td:first-child,
    .has-lightblue-background-color + .has-lightblue-background-color td:first-child,
    .has-lightgreen-background-color + .has-lightgreen-background-color td:first-child{
      padding-left: 25px!important;
    }
    #responsive-table thead th{
      width: 25%!important;
    }
  }
  @media only screen and (max-width: 1080px) {
    #responsive-table thead th:first-child,
    #responsive-table tr > th:first-child{
      position: sticky;
      z-index: 3;
      left: 0;
    }
    #responsive-table tr > td{
      z-index: 1;
      position: relative;
    }
    #responsive-table{
      overflow-x: scroll;
      width: 100%;
      display: block;
    }
    #responsive-table thead th:last-child{
      min-width: 45vw;
    }
    #responsive-table th{
      font-size: 16px;
    }
    #responsive-table td{
      font-size: 12px;
    }
    #responsive-table th, #responsive-table td {
    padding: 5px 15px;
    }
    .has-lightred-background-color + .has-lightred-background-color td:first-child,
    .has-lightblue-background-color + .has-lightblue-background-color td:first-child,
    .has-lightgreen-background-color + .has-lightgreen-background-color td:first-child{
      padding-left: 15px!important;
    }
  }