body {
    background-color: #000;
}


.site-title:hover {
  background: radial-gradient(
    circle at 100%,
    #D70270C7,
    #0274DE8C 50%,
    #D70270C7 75%
  );
  font-weight: 600;
  background-size: 200% auto;
  color: #000;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: animatedTextGradient 2.5s infinite;
}

@keyframes animatedTextGradient {
  to {
    background-position: 200% center;
  }
}

.header-nav li, .header-nav ul {
   border-radius: 7px;
}

.header-nav li {
    padding: 9px !important;
}

.header-nav ul {
    padding: 0 !important;
}


.header-nav>li::after,
.header-nav>li::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--wp--preset--color--mono-1), var(--wp--preset--color--mono-2));
  bottom: 0px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.header-nav>li::before {
  top: 0px;
  transform-origin: left;
}

.header-nav>li:hover::after,
.header-nav>li:hover::before {
  transform: scaleX(1);
}


.hero > .wp-block-cover__inner-container {
    height: 100vh;
    display: flex;
    flex-direction: column;

    /* Navigation bar */
    & > div:first-child {

    }

    /* Main content */
    & > div:nth-child(2) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -100px;
    }

    /* Hero footer */
    & > div:last-child {

    }
}

.prestations>div {
    overflow: hidden;
    background-size: cover !important;
    transition: all 0.3s ease-in-out;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: inherit;
        background-size: cover;
        transition: transform .4s ease-in-out;
        z-index: 0;
    }

    &:focus, &:hover {
        &::after {
            transform: scale(1.2);
        }
    }

    /* Display the content on top of it */
    &>* {
        z-index: 10;
    }
}

.front-main {
    backdrop-filter: blur(100%);
}

.prestations {
    min-width: 100% !important;
}

.front-realisations {

}

.customers {
    width: 100%;
    overflow: hidden;
    /*animation: marquee 20s linear infinite;*/
}

.customers figure {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important
}

.customers figure img {
    max-height: 70px;
    width: fit-content !important;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/*
*
*    Realisations carrousel
*
*/

.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.carousel__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.carousel__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.carousel__nav:checked:nth-of-type(1) ~ .carousel__inner {
  left: 0%;
}
.carousel__nav:checked:nth-of-type(2) ~ .carousel__inner {
  left: -100%;
}
.carousel__nav:checked:nth-of-type(3) ~ .carousel__inner {
  left: -200%;
}
.carousel__nav:checked:nth-of-type(4) ~ .carousel__inner {
  left: -300%;
}
.carousel__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.carousel__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.carousel__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.carousel__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}
.carousel__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 300px;
}

@-webkit-keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

.wp-block-latest-posts__featured-image img {
	height: revert-layer !important;
	max-height: 500px !important;
}

/*
.carousel{
    --transition-duration: 750ms;

    --card-width: 60%;
    --card-height: 500px;

    --nav-btn-size: 40px;
    --nav-btn-bg: transparent;
    --nav-btn-bg-hover: rgba(198, 24, 221, 0.5);
    --nav-btn-font-size: 1.4rem;
    --nav-btn-txt: rgba(255, 255, 255, 1);
    --nav-btn-txt-hover: white;

    --nav-marker-size: 16px;
    --nav-marker-bg: transparent;
    --nav-marker-bg-active: rgb(0, 89, 138);


    width: min(calc(100% - 2rem), 1200px);
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-width); 
    grid-auto-rows: var(--card-height);
    gap:0;


    /*outline: 1px dashed green;*
    anchor-name: --carousel;
    overflow-x: hidden;
    oveflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behaviour-x: contain; 
    scroll-behavior: smooth; /* keep things smooth (should probably be wihtin a prefers query) *
    scrollbar-width: none;

    /* empty pseudo elements to push first and last items to the middle *
    &::before,
    &::after{
            content: '';
    }


    /**************** MARKERS GROUP *******************
    /* the item markers will be dynamically placed within this element *
    scroll-marker-group: after; /* place after elements*
    &::scroll-marker-group{
        position: absolute;
        position-anchor: --carousel;
        inline-size: min(90cqi, 300px);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        gap: 1rem;
        top: anchor(bottom);
    }
    /* carousel item*
    > * {

        scroll-snap-align: center; /* centers snap *
        scroll-snap-stop: always; /* ensures that the scroll stops at each element *
        container-type: scroll-state; /* define container for child animations *

        /* scroll to this item on load *
        &.scroll-start {
                scroll-initial-target: nearest;
        }
        
        > * {
            width: var(--card-width);
            height: var(--card-height);

            /* position absolute relative to carousel - NOT its parent. The parent elements are used for the scrolling only *
            position: absolute;
            position-anchor: --carousel;
            inset: anchor(center);
            translate: -50% -50%;
            overflow:hidden;

            display: grid;
            grid-template-areas: 'quote' 'title' ;
            gap: .5rem;
        
        }

        > div {
            
            > * {
                outline: 1px dashed red;
                border-radius: 15px;
            }
        }

        /* Featured image *
        > div.wp-block-latest-posts__featured-image {
            grid-area: title;
            margin: 0;
            text-align: right;
            transition: all var(--transition-duration)  calc(var(--transition-duration) * 1);
            font-size: .9rem;
            /* not current item *
            @container not scroll-state(snapped: inline) {
                opacity: 0;
                transition-delay: 0ms;
                transform: translate-y(calc(var(--card-height) * 2));
            }

            a {
                height: var(--card-height) !important;
                width: auto !important;
                max-width: 100%;
                justify-self: end;
            }

            img {
                height: 100% !important;
                width: auto !important;
                border-radius: 15px;
            }
        }

        /* WP texts *
        > .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts__post-title, .wp-block-latest-posts__post-date {
            grid-area: quote;
            margin: 0;
            transition: all var(--transition-duration) ease-in-out calc(var(--transition-duration) * .5);

            /* not current item *
            @container not scroll-state(snapped: inline) {
                opacity: 0;
                transform: translate-y(calc(var(--card-height) * -1));
                transition-delay: 0ms;
            }
        }

        /* Post title *
        .wp-block-latest-posts__post-title {
            font-size: var(--wp--preset--font-size--superbfont-large);
            font-weight: 600;
            font-family: var(--wp--preset--font-family--satoshi);
        }

        /* Post datetime *
        .wp-block-latest-posts__post-date {
            align-content: flex-end;
        }

        /* Post excerpt *
        .wp-block-latest-posts__post-excerpt {
            margin-top: calc(var(--wp--preset--font-size--superbfont-large) + 20px) !important;
        }

        /************** MARKERS **************
        &::scroll-marker{
            content: ' ';
            height: var(--nav-marker-size);
            aspect-ratio: 1;
            background-color: var(--nav-marker-bg);
            border-radius:50%;
            border: 1px solid var(--nav-marker-bg-active);
            transition: 150ms ease-in-out;
        }

        /* current item marker *
        &::scroll-marker:target-current{
            outline: 1px solid var(--nav-marker-bg-active);
            outline-offset: 2px;
            background-color: var(--nav-marker-bg-active);
        }
        /* hover and keyboard focus *
        &::scroll-marker:where(:hover,:focus-visible){
            background-color: var(--nav-marker-bg-active);
        }
        /* keybaord focus-*
        &::scroll-marker:focus-visible{
            outline: 1px dashed var(--nav-marker-bg-active);
            outline-offset: 4px;
        }
    }


    /************* NAV BUTTONS (left and right) ************
    &::scroll-button(*){
        position: absolute;
        position-anchor: --carousel;
        top: anchor(center);
        translate: 0 -50%;
        width: var(--nav-btn-size);
        aspect-ratio: 1/1;
        font: inherit;
        font-size: var(--nav-btn-font-size);
        background-color: var(--nav-btn-bg);
        display: grid;
        place-content: center;
        color: var(--nav-btn-txt);
        border:none;
        border-radius: 50%;
        opacity: 0.5;
        cursor: pointer;
        transition-property: opacity,scale,outline,color;
        transition-duration: 75ms;
        transition-timing-function: ease-in-out;
        outline: 1px dashed transparent;
        outline-offset: 0px;
    }
    /* button - prev *
    &::scroll-button(inline-start){
        content: '❮';
        right: calc(anchor(center) + var(--card-width) / 2 + 2rem );
    }
    /* button - next *
    &::scroll-button(inline-end){
        content: '❯';
        left: calc(anchor(center) + var(--card-width) / 2 + 2rem );
    }
    /* hover and keyboard focus *
    &::scroll-button(*):not(:disabled):where(:hover,:focus-visible){
        opacity: 1;
        scale: 1.1;
        background-color: var(--nav-btn-bg-hover);
        color: var(--nav-btn-txt-hover);
    }
    /* keyboard focus*
    &::scroll-button(*):focus-visible{
        outline: 1px dashed var(--nav-btn-bg-hover);
        outline-offset: 4px;
    }
    /* disabled *
    &::scroll-button(*):disabled{
        opacity: .25;
        cursor: unset;
    }
}

.controls {
    position: absolute;
    top: 1rem;
    left: 50%;
    translate: -50% 0;
    display: grid;
    gap: 1rem;
    font-size: .8rem;
    padding: 0.25em;
    border-radius: 5px;
    border: 1px solid #CCC;
}
.controls > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

*/




/**************************************
                UTILS
    ! Using mobile-first approach !
**************************************/

.grid-2, .grid-3 {
    grid-template-columns: repeat(1, minmax(0,1fr)) !important;
    grid-column: auto;
    grid-row: auto;
}

.w-30 {
    width: 30% !important;
}

.bottom-10 {
    position: absolute;
    bottom: 10px;
}

.hide {
    display: none !important;
}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {

}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {

    .hero-catchphrase {
        text-align: left !important;
    }

    .hero-contact {
        justify-content: right !important;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}