/*
Theme Name: 4 vents cups
Theme URI: 
Author: 
Author URI: https://www.webkitchen.fr
Description: Thème de la 4 vents cups
Requires at least: 6.0
Tested up to: 6.4.2
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4ventscups
Tags: 
*/


.z-100 {
    z-index: 100;
}

.w220 {
    width: 220px;
}

.pos-a {
    position: absolute;
}

.pos-r {
    position: relative;
}

.translateY-50{
    transform: translateY(-50%);
}

.translateX-30{
    transform: translateX(-30%);
}
.translate-60-10{
    transform: translate(-60%,-10%);
}

.translate-50-50{
    transform: translate(-50%,-50%);
}




.has-custom-darkblue-lightblue-gradient-background.bg-vague:after,
.has-custom-blue-background-color.bg-vague:after
{
    content:"";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-image: url(./assets/img/bg-vague.png);
    background-size: cover;
    opacity: .15;
    top: 0;
    left: 0;

}


.has-custom-blue-background-color.bg-vague-2:after
{
    content:"";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-image: url(./assets/img/bg-vague.png);
    transform:rotate(180deg);
    background-size: cover;
    opacity: .15;
    top: 0;
    left: 0;

}


.margin-negative-100{
    margin-top: -100px!important;
    position: relative;
    z-index: 10000;
}
.drop-shadow {
    box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
}

.section-video {
    position: relative;
}

.section-video .background {
    background-color: var(--wp--preset--color--custom-blue-water);
    width: 60vw;
    height: 100%;
    position: absolute;
    z-index: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.section-video .background:before {
    content:'';
    background-image: url(./assets/img/bg-vague.png);
    background-repeat: no-repeat;
    background-position:bottom right;
    background-size: 90%;
    width: 60vw;
    height: 100%;
    position: absolute;
    display: block;
    opacity: .25;
}



/* Page archive actualite */ 
.article-item {}
.article-liste .wp-block-read-more {
    display: flex;
}

.article-item img {
    object-fit: cover!important;
    min-height: 350px;
}

.article-item .content * {
    transition: all ease-in 150ms;
}

.article-item .content .wp-block-read-more {
    margin-top: auto;
    display:flex;
    gap:.5rem;
    align-items: center;
    transition: all ease-in 150ms;
    position: relative;
    padding-bottom: 4px;
}


.article-item .wp-block-read-more:before {
    content: "";
    width: 0;
    transition: all ease-in 350ms;
    height: 3px;
    background-color: var(--wp--preset--color--custom-orange)!important;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;

}

.article-item .wp-block-read-more:after{
    content:"";
    width: 16px;
    height: 12px;
    background-color:red;
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H17M17 7L11 1M17 7L11 13' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-size: cover;
    display: block;
}

.article-item .wp-block-read-more:hover {
    color:var(--wp--preset--color--custom-orange)!important;
    gap:1rem;
}

.article-item .wp-block-read-more:hover:after {
    background-color:var(--wp--preset--color--custom-orange)!important;
}
.article-item .wp-block-read-more:hover:before {
    width: 100%;
}

.article-item a:hover img{
    transform: rotateX('5deg');
}

/* Style de Citation Blockquote : wp-block-quote */
.wp-block-quote {
    border-left: 2px solid var(--wp--preset--color--custom-orange)!important;
    padding-left: 1rem;
    margin: 2rem 0 !important;
}

.has-custom-white-color p {
    color:var(--wp--preset--color--custom-white)!important;
}


/* Grid  */

.grid {
    display: grid;
    gap:2rem;
    width: 100%;
    max-width: none!important;
}

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

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

.grid.grid-4-columns {
    grid-template-columns: repeat(4,1fr);
}

.grid.grid-5-columns {
    grid-template-columns: repeat(5,1fr);
}

.grid.grid-6-columns {
    grid-template-columns: repeat(6,1fr);
}

.grid img {
    max-width: 100%;
    height: auto;
  }


  .grid.grid-2-columns > a {
    padding: 2.5rem;
    background-color: #F9FAFB;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}

  .grid.grid-3-columns > a {
    padding: 2rem;
    background-color: #F9FAFB;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}

.grid.grid-4-columns > a {
    padding: 1.5rem;
    background-color: #F9FAFB;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}


.grid.grid-5-columns > a {
    padding: 1.25rem;
    background-color: #F9FAFB;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}


.grid.grid-6-columns > a {
    padding: 1rem;
    background-color: #ffffff;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}



/* Button */

.wp-block-button.arrow-right a {
    display: flex;
    align-items: center;
    gap:1rem;
    transition: all 150ms ease-in-out;
}

.wp-block-button.arrow-right a:after {
    content:"";
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893L17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L11.7071 13.7071C11.3166 14.0976 10.6834 14.0976 10.2929 13.7071C9.90237 13.3166 9.90237 12.6834 10.2929 12.2929L14.5858 8H1C0.447715 8 0 7.55228 0 7C0 6.44772 0.447715 6 1 6H14.5858L10.2929 1.70711C9.90237 1.31658 9.90237 0.683417 10.2929 0.292893Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 14px;
    display: block;
}

.wp-block-button.arrow-right a:hover {
    background-color: var(--wp--preset--color--custom-default);
}

.btn-orange.btn-round-arrow-right a,
.btn-yellow.btn-round-arrow-right a {
    display: flex;
    align-items: center;
    gap:1rem;
    transition: all ease-in 150ms;
}


.btn-orange.btn-round-arrow-right a:after {
    content:"";
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893L17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L11.7071 13.7071C11.3166 14.0976 10.6834 14.0976 10.2929 13.7071C9.90237 13.3166 9.90237 12.6834 10.2929 12.2929L14.5858 8H1C0.447715 8 0 7.55228 0 7C0 6.44772 0.447715 6 1 6H14.5858L10.2929 1.70711C9.90237 1.31658 9.90237 0.683417 10.2929 0.292893Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 14px;
    display: block;
}

.btn-yellow.btn-round-arrow-right a:after {
    content:"";
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893L17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L11.7071 13.7071C11.3166 14.0976 10.6834 14.0976 10.2929 13.7071C9.90237 13.3166 9.90237 12.6834 10.2929 12.2929L14.5858 8H1C0.447715 8 0 7.55228 0 7C0 6.44772 0.447715 6 1 6H14.5858L10.2929 1.70711C9.90237 1.31658 9.90237 0.683417 10.2929 0.292893Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 14px;
    display: block;
}

.btn-yellow.btn-round-arrow-right a:hover {
    background-color: var(--wp--preset--color--custom-orange)!important;
}

.btn-orange.btn-round-arrow-right a:hover {
    background-color: var(--wp--preset--color--custom-blue)!important;
}





/* Navigation : changement du break point*/
@media (min-width: 1023px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}



/* header */
header {
    position: sticky;
    top:0;
    z-index: 1000;
    background-color: rgba(255,255,255,.5);
}

header .wp-block-navigation-item__content {
    
}

header .wp-block-navigation {
    width: 100%;
    position: relative;
    justify-content: center;
}

header .wp-block-navigation .wp-block-navigation__responsive-container-open {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    background-color: white;
    border:1px solid var(--wp--preset--color--custom-white);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 25px;
   transition: all ease-in 150ms;
   
}

header .wp-block-navigation .wp-block-navigation__responsive-container-open:hover {
    box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    border:1px solid var(--wp--preset--color--custom-light-gray);
}

/* Dernier element de navigation */

header .wp-block-navigation__container li:first-child {
    margin-left: auto;
}

header .wp-block-navigation__container li:last-child {
    margin-left: auto;
}

header .wp-block-navigation__container li:last-child a{
    background-color: var(--wp--preset--color--custom-orange);
    color:var(--wp--preset--color--custom-white)!important;
    height:auto;
    border-radius: 3px;
}

header .wp-block-navigation li.wp-block-navigation-item.current-menu-item:last-child .wp-block-navigation-item__content {
    color:var(--wp--preset--color--custom-white)!important;

}

header .wp-block-navigation li.wp-block-navigation-item.edit-icon-before .wp-block-navigation-item__content .wp-block-navigation-item__label{
    display: flex;
    gap:.5rem;
}


header .wp-block-navigation li.wp-block-navigation-item.edit-icon-before .wp-block-navigation-item__content .wp-block-navigation-item__label:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.667h7.5m-15 0h1.395c.408 0 .612 0 .804-.046.17-.041.332-.108.482-.2.168-.103.312-.247.6-.535L16.25 5.416a1.768 1.768 0 1 0-2.5-2.5L3.281 13.387c-.288.288-.432.432-.535.6a1.64 1.64 0 0 0-.2.482c-.046.192-.046.396-.046.803v1.396Z' stroke='%23fff' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: block;
}

header .wp-block-navigation li.wp-block-navigation-item.edit-icon-before .wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--custom-blue)!important;
}


header .wp-block-navigation__container li:last-child a .wp-block-navigation-item__label {
    padding-top: 0;
    padding: .75rem 1rem;
}

header .wp-block-navigation__container li:last-child a::after {
    display: none;
}

header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation li {
    margin:0!important;
    justify-content: center;
    background-color: red;
}


header .wp-block-navigation .wp-block-navigation__responsive-container-open:before {
    content:"";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5h18m-18 7h18' stroke='%2320376C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
}

header .wp-block-navigation .wp-block-navigation__responsive-container-open svg {
    display: none;
}


header .wp-block-navigation .wp-block-navigation-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 75px;
    transition: all 150ms ease-in-out;
}

header .wp-block-navigation .wp-block-navigation-item__content:after {
    content:"";
    width: 0%;
    display: block;
    height: 4px;
    
    background-color: transparent;
    transition: all 150ms ease-in-out;
}

header .wp-block-navigation .wp-block-navigation-item__content .wp-block-navigation-item__label {
    padding-top:25px;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover {
    color:var(--wp--preset--color--custom-orange);
}


header .wp-block-navigation .wp-block-navigation-item__content:hover:after  {
    width: 100%;
background-color: var(--wp--preset--color--custom-orange);

}


header .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content  {
    color:var(--wp--preset--color--custom-orange)!important;
}

header .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content:after  {
    width: 100%;
background-color: var(--wp--preset--color--custom-orange);

}

/* form contact */

.wpcf7-form {}
.wpcf7-form label {
    padding: 0!important;
    font-size: .85rem;
}
.wpcf7-form .wp-block-columns{ gap:1rem; margin-bottom: 1rem; }
input.wpcf7-form-control, textarea.wpcf7-form-control {
    width: 100%;
    padding: .5rem;
    border-radius: 3px;
    border:1px solid #cacaca;
}

.wpcf7-form input.wpcf7-submit {
    border-color: var(--wp--preset--color--custom-orange);
    background-color: var(--wp--preset--color--custom-orange);
    color:var(--wp--preset--color--custom-white);
    transition: all 150ms ease-in-out;
    padding: .75rem .5rem;
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus  {
    border-color: var(--wp--preset--color--custom-blue-water);
    background-color: var(--wp--preset--color--custom-blue-water);
}

@media screen and (max-width: 680px) { 
    .selection-actualite.alignfull {
        padding: 0 2rem;
    }

    .section-galerie {
         padding: 0 2rem;
    }

     .section-chiffre {
         padding: 2rem 2rem;
    }

    .hide-mobile {
        display: none;
    }
}