/* Theme Name: Sbaffo template

Description: Theme de plusieurs placeholder

Author: Alexandre SBAFFO

Author URI: https://www.sbaffo.fr

Template: kadence

Version: 1.0 */

/* --------Accueil modif propre au site -----------*/

/* --------Header -----------*/
header .wp-block-kadence-header-desktop.kb-header-container {
    height: 320px;
}
svg#logo {
    z-index: 3000;
    text-align: center;
    margin: 0px auto 30px auto;
    display: block;
}
.contentlogo {
    margin-top: 10vh;
    width: 150px;
    margin: 20px auto auto auto;
    flex-direction: column;
}
.kb-off-canvas-inner-wrap ul.kb-navigation.menu.collapse-sub-nav-tablet-true.collapse-sub-nav-mobile-true {
    display: flex;
    flex-direction: column;
}
header .kb-off-canvas-inner {
    justify-content: center;
}
nav.navigation.navigation-desktop-style-standard.navigation-tablet-style-standard.navigation-mobile-style-standard.navigation-desktop-dropdown-animation-none.navigation-tablet-dropdown-animation-none.navigation-mobile-dropdown-animation-none.navigation-desktop-collapse-sub-menus-true.navigation-tablet-collapse-sub-menus-true.navigation-mobile-collapse-sub-menus-true.navigation-desktop-parent-toggles-menus-false.navigation-tablet-parent-toggles-menus-false.navigation-mobile-parent-toggles-menus-false.navigation-desktop-parent-active-false.navigation-tablet-parent-active-false.navigation-mobile-parent-active-false {
    justify-content: center;
}

/* Styles généraux pour le SVG */
 #LGT {
    display: inline-flex;
    margin: 0px auto 0px auto;
    width: inherit;
    height: 30px;
    justify-content: space-around;
}
#LGT svg {
    height: 30px;
    width: 30px;
    top: 0%;
    transform: translate3d(-50%, -50%, 1px);
    fill: white !important;
}
#LGT svg .st0{fill:#FFFFFF;}
#LGT svg .st1{fill:none;stroke:#FFFFFF;stroke-width:2.4387;stroke-linecap:round;stroke-miterlimit:10;}
#LGT svg .st2{fill:none;stroke:#FFFFFF;stroke-width:1.829;stroke-linecap:round;stroke-miterlimit:10;}
#LGT svg .st3{fill:none;stroke:#FFFFFF;stroke-width:2.4941;stroke-linecap:round;stroke-miterlimit:10;}
#LGT svg .st4{fill:none;stroke:#FFFFFF;stroke-width:2.5018;stroke-linecap:round;stroke-miterlimit:10;}
#LGT svg .st5{fill:none;stroke:#FFFFFF;stroke-width:1.8156;stroke-linecap:round;stroke-miterlimit:10;}
  div#LGT1, div#LGT2, div#LGT3, div#LGT4 {
    position: relative;
    max-width: 1em;
    margin-left: -5%;
}

  /* Cacher tous les SVG au départ */
  #LOGOa1, #LOGOa2, #LOGOa3, #LOGOa4 {
    opacity: 0;
    position: absolute;
  }
  #LOGOb1, #LOGOb2, #LOGOb3, #LOGOb4 {
    opacity: 0;
    position: absolute;
  }

  /* Animation de défilement */
  @keyframes logoAnim {
    0%, 25% {
      opacity: 1;
    }
    26%, 100% {
      opacity: 0;
    }
  }
 @keyframes logoAnim2 {

        0%, 12.5% {
          opacity: 1;
        }
        12.6%, 100% {
          opacity: 0;
        }
    }

/* Applique l'animation de manière décalée à chaque logo */
#LOGOa1 {
    animation: logoAnim 2s infinite;
  }
  #LOGOa2 {
    animation: logoAnim 2s infinite 500ms; /* Démarre après Xs */
  }
  #LOGOa3 {
    animation: logoAnim 2s infinite 1s; /* Démarre après Xs */
  }
  #LOGOa4 {
    animation: logoAnim 2s infinite 1500ms; /* Démarre après Xs */
  }

  #LOGOb4 {
    animation: logoAnim2 2s infinite; /* Démarre après Xs */
  }
  #LOGOb1 {
    animation: logoAnim 2s infinite 250ms;
  }
  #LOGOb2 {
    animation: logoAnim 2s infinite 750ms; /* Démarre après Xs */
  }
  #LOGOb3 {
    animation: logoAnim 2s infinite 1250ms; /* Démarre après Xs */
  }
  #LOGOb4 {
    animation: logoAnim 2s infinite 1750ms; /* Démarre après Xs */
  }

.wp-block-kadence-header-desktop.kb-header-container::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(10px);
    z-index: -1;
    /* background: linear-gradient(0deg, #87cba1, #2cb1bc); */
    background: linear-gradient(0deg, #071c1b, #0f2a43);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0vh, rgb(255 255 255 / 99%) 130vh);
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 00%, rgb(0 0 0 / 78%) 40%, #87cba100 100%);
}
/* ------------------------------------------------------------*/

.site-header-inner-wrap {
    margin-top: 10px;
}

.content-area p a, footer .footer-html-inner a {
    display: inline-block;
    background: linear-gradient(90deg, #87cba1, #2cb1bc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    position: relative;
    text-decoration: none;
    font-weight: bold;
}
.content-area p a::after, footer .footer-html-inner p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #87cba1, #2cb1bc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.content-area p a:hover::after, footer .footer-html-inner p a:hover::after {
  transform: scaleX(1);
}

figure#blour {
    position: absolute;
    width: 85%;
    top: 18px;
    left: 20px;
    z-index: -1;
    filter: blur(10px);
    opacity: 0.5;
}
figure#blour::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50px;
    filter: saturate(0.5);
    opacity: 0.3;
    border-radius: 8em;
    z-index: -2;
}
.inner-column-1 figure#blour::after {
  background-color: var(--global-palette2)
}
.inner-column-2 figure#blour::after {
  background-color: var(--global-palette1)
}
.inner-column-3 figure#blour::after {
  background-color: #87cba1;
}

#divphotos figcaption.vp-portfolio__item-caption.vp-portfolio__item-caption-text-align-center {
    display: none;
}
#divphotos .vp-portfolio__item-img-wrap {
    min-height: 75vh;
}

#divphotos #yonimage {
    min-width: 112vh;
    max-height: 75vh;
    overflow: hidden;
}

#prixservice .inner-column-1 .kt-inside-inner-col.active, #prixservice .inner-column-3 .kt-inside-inner-col.active{
    background-color: var(--global-palette2, #2B6CB0);
}
#prixservice .inner-column-1 .kt-inside-inner-col.active svg, #prixservice .inner-column-3 .kt-inside-inner-col.active svg, #prixservice .inner-column-1 .kt-inside-inner-col.active .kt-svg-icon-list-text, #prixservice .inner-column-3 .kt-inside-inner-col.active .kt-svg-icon-list-text {
    color: white;
}
#prixservice .inner-column-1 .kt-inside-inner-col.active h3, #prixservice .inner-column-3 .kt-inside-inner-col.active h3, #prixservice .inner-column-1 .kt-inside-inner-col.active h2, #prixservice .inner-column-3 .kt-inside-inner-col.active h2, #prixservice .inner-column-1 .kt-inside-inner-col.active p, #prixservice .inner-column-3 .kt-inside-inner-col.active p {
    color: white;
}

#prixservice .inner-column-2 .kt-inside-inner-col.active{
    background-color: white;
}
#prixservice .inner-column-2 .kt-inside-inner-col.active svg, #prixservice .inner-column-2 .kt-inside-inner-col.active .kt-svg-icon-list-text, #prixservice .inner-column-2 .kt-inside-inner-col.active h3, #prixservice .inner-column-2 .kt-inside-inner-col.active h2, #prixservice .inner-column-2 .kt-inside-inner-col.active p {
    color: var(--global-palette2, #2B6CB0);
}

.wp-block-kadence-column.kadence-column701_5040f6-3a .has-theme-palette8-background-color, .kb-row-layout-id701_27c076-c8 .kt-row-column-wrap.kt-has-3-columns {
    background-color: #ffffffc7;
    backdrop-filter: blur(10px);
}
.vp-portfolio__items-arrow.vp-portfolio__items-arrow-next {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.705) !important;
}

.site-bottom-footer-wrap.site-footer-row-container.site-footer-focus-item::before {
    content: "";
    position: absolute;
    left: 0;
    height: 88px;
    width: 100%;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.788) !important;
    z-index: 0;
}

footer#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a {
    color: white !important;
}

footer#colophon .footer-navigation .footer-menu-container > ul li a:hover {
    color: white;
}

footer#colophon .footer-navigation .footer-menu-container > ul > li > a, footer#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a {
    color: #87cba1;
}
@media screen and (max-width: 1715px) and (min-width: 1025px) {
  #image-connexe .kt-inside-inner-col { max-width: 80%; }
}
@media screen and (max-width: 1356px) and (min-width: 1025px) {
  #image-connexe .kt-inside-inner-col { max-width: 60%;}
}
@media screen and (max-width: 1025px) {
  .site-bottom-footer-wrap.site-footer-row-container.site-footer-focus-item::before { height: 124px;}
}
@media screen and (max-width: 552px) {
      .site-bottom-footer-wrap.site-footer-row-container.site-footer-focus-item::before { height: 158px;}
}
@media screen and (max-width: 300px) {
      #colophon .footer-html.inner-link-style-plain { font-size: small; margin: 0px; }
}