/*
Theme Name: GUIld
Description: Theme pour La Garrd
Author: NOUS - Ouvert, Utile et Simple
Author URI: https://www.avecnous.eu
Text Domain: guild
Domain Path: garrd/guild
Version: 1.0.0
*/

/* GLOBAL */

*,
html {
    scroll-behavior: smooth;
}


/* TITRES */

h1::before {
    content: "";
    width: 15px;
    height: 100%;
    background: #fcc125;
    display: inline-block;
    border-radius: 50px;
    min-height: 80px;
    margin: 0 30px -12px 0;
  }
  h1.hero-title {
    position: relative;
    z-index: 1;
    }
    h1.hero-title::before {
        width: 0;
        content: inherit;
    }
    h1.hero-title::after {
        content: "";
        position: absolute;
        left: -15px;
        right: 332px;
        bottom: -31px;
        height: 100px;
        background: #2e3c49;
        transform: skew(4deg) rotate(0deg);
        clip-path: polygon(0% 30%, 100% 4%, 95% 86%, 1% 85%);
        z-index: -1;
    }


h2 {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding-right: 10px;
    }
    h2::after { 
        content: "";
        position: absolute;
        left: -15px;
        right: -20px;
        bottom: 3px;
        height: 25px;
        background: #fbbf24;
        z-index: -1;
        transform: skew(4deg) rotate(0deg);
        clip-path: polygon(0% 30%, 100% 4%, 95% 86%, 1% 85%);
    }
    /* alternative 
    h2::after { 
    content: "";
    position: absolute;
    left: -0.3em;
    right: -0.5em;
    bottom: 0.03em;
    height: 0.55em;
    background: #fbbf24;
    z-index: -1;
    transform: skew(-4deg) rotate(0deg);
    clip-path: polygon(0% 24%, 100% 0%, 94% 95%, 2% 85%);
    }*/



/* CTA BOUTONS */
    .wp-block-button__link { transition: background-color .2s, color .2s; }

    /* états survols */
    .wp-block-button.is-style-cta-gros-jaune .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-gros-jaune .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-gros-jaune .wp-block-button__link:active,
    .wp-block-button.is-style-cta-medium-jaune .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-medium-jaune .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-medium-jaune .wp-block-button__link:active,
    .wp-block-button.is-style-cta-mini-jaune .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-mini-jaune .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-mini-jaune .wp-block-button__link:active {
        background: var(--wp--preset--color--principale);
        color: var(--wp--preset--color--secondaire);
    }
    .wp-block-button.is-style-cta-gros-fonce .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-gros-fonce .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-gros-fonce .wp-block-button__link:active,
    .wp-block-button.is-style-cta-medium-fonce .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-medium-fonce .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-medium-fonce .wp-block-button__link:active,
    .wp-block-button.is-style-cta-mini-fonce .wp-block-button__link:hover,
    .wp-block-button.is-style-cta-mini-fonce .wp-block-button__link:focus,
    .wp-block-button.is-style-cta-mini-fonce .wp-block-button__link:active {
        background: var(--wp--preset--color--secondaire);
        color: var(--wp--preset--color--principale);
    }

    /* variante cta avec animation forme jaune */
    .is-style-cta-cercle-jaune .wp-block-button__link {
        width: 102px;
        height: 100px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        position: relative; 
        isolation: isolate; 
        text-align: center; 
        text-decoration: none; 
    }
    .is-style-cta-cercle-jaune .wp-block-button__link::before { 
        content: ''; 
        position: absolute; 
        inset: 0; 
        z-index: -1; 
        background-repeat: no-repeat; 
        background-position: center; 
        background-size: 100% 100%; 
        transform: rotate(var(--rot, 0deg)); 
        will-change: transform; 
        background-image: url('assets/img/theme/objectif_garrd_jaune.svg');
    }


/* BLOCS */

    /* bloc avec formes logo garrd à droite */
    .bloc-forme {
        background-size: 120%; 
        background-position: -10% center;
    }
    .bloc-forme.bleufonce {
        background: url('/assets/img/theme/objectif_garrd_bleufonce.svg')no-repeat;
    }
    .bloc-forme.bleugris {
        background: url('/assets/img/theme/objectif_garrd_bleugris.svg')no-repeat;
    }

    /* HERO SECTION */
    .hero-wrap-cols {
        background: url('assets/img/theme/objectif_garrd_bleugris.svg')no-repeat;
        /*background-size: contain;
        background-position: 110% 100%;*/
        background-size: 45%;
        background-position: 128% -11%;
        height: 100vh;
    }
    .hero-img {
        position: relative;
        }
        .hero-img::before {
            content:"";
            background: url('assets/img/theme/deco-triangles.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left top;
            position: absolute;
            left: -10%;
            top: -12%;
            height: 221px;
            width: 210px;
        }
    


/* HEADER */

    header.wp-block-template-part {
        position: sticky;
        top: 0;
        z-index: 999;
        }
        .header-wrap {
            transition: background-color 0.3s ease;
            }
            .header-wrap.not-scrolled {
                background-color: transparent!important;
            }

        .nav-second-bloc {
            display: none;
        }

    /* animation logo */
    .logo-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        max-width: 500px;
    }
    
    .logo {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }
    
    .logo-slogan-wrap {
        overflow: hidden;
        max-width: 400px; /* ≥ largeur réelle de ton slogan */
        transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .logo-slogan {
        margin: 0;
        white-space: nowrap;
        transform: translateX(0);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body.is-scrolled .logo-wrap {
        gap: 0;
    }
    body.is-scrolled .logo-slogan-wrap {
        max-width: 0;
    }
    body.is-scrolled .logo-slogan {
        transform: translateX(-100%);
    }
    body.is-scrolled .logo-wrap {
        max-width: 200px;
    }
    
    @media (prefers-reduced-motion: reduce) {
        .logo-wrap, 
        .logo-slogan-wrap, 
        .logo-slogan { 
            transition: none; 
        }
    }

    /* recherche */
    .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
        position: relative;
        }
        .wp-block-search.wp-block-search__button-only .wp-block-search__input {
            position: absolute;
            right: 80px;
            align-content: center;
            top: 5%;
            bottom: 5%;
            width: 30vw;
        }
        .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden, 
        .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
            overflow: inherit;
        }

    



/* FOOTER */

.footer {
    background-image: url('assets/img/theme/footer-bg-image.svg');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}

footer .wp-block-navigation__container {
    display: block;
}

footer .wp-block-navigation-item__label {
    font-weight: 500;
} 




/*==========================================
                RESPONSIVE
==========================================*/


@media screen and (max-width:600px) {

    /* HEADER menu mobile */
    .head-cta.is-layout-flex {
        display: none;
    }
    .nav-second-bloc {
        display: block;
        position: fixed;
        bottom: -34px;
        width: 100vw;
        }
        .nav-second-bloc::after {
            content: "";
            background: white;
            width: 100vw;
            height: 44px;
            display: block;
            position: absolute;
            bottom: 28px;
            left: 0;
            right: 0;
            z-index: 1;
        }
        .nav-second-wrap {
            z-index: 2;
            display: flex;
            position: sticky;
            }
            .nav-second-bloc a {
                text-decoration: none;
            }
            .nav-second-bloc a:hover,
            .nav-second-bloc a:focus,
            .nav-second-bloc a:active {
                color: var(--wp--preset--color--secondaire);
            }

    /* HERO SECTION */
    .hero-wrap-cols {
        padding-top: 20px!important;
        padding-bottom: 50px!important;
    }

    .resox-wrap {
        flex-wrap: wrap!important;
        gap: var(--wp--preset--spacing--20);
        }
        .resox-wrap img {
            width: 35px;
            height: 35px;
        }


    /* TITRES */
    h1.hero-title  {
        font-size: var(--wp--preset--font-size--x-small)!important;
        }
        h1.hero-title::after {
            bottom: -23px;
            height: 60px;
            width: 100%;
            max-width: 270px;
            }

}




@media screen and (max-width: 781px) {

    /* HERO SECTION */
    .hero-wrap-cols {
        background-size: 54%;
        background-position-x: 5%;
        background-position-y: 89%;
        }
        .hero-wrap .wp-block-spacer {
            height: 10px;
        }
        .hero-wrap .img-wrap {
            padding-left: 20%;
            }
            .hero-img::before {
                content: inherit;
                left: -16%;
                top: -20%;
                height: 121px;
                width: 110px;
            }

}


@media screen and (min-width:782px) and (max-width:1024px) {

    /* HERO SECTION */
    .hero-wrap-cols {
        background-size: 50%;
        background-position-x: 100%;
        background-position-y: 45%;
        }

}



@media screen and (min-width:601px) and (max-width:1024px) {

    /* TITRES */
    h1.hero-title {
        font-size: 90px;
        }
        h1.hero-title::after {
            max-width: 350px;
        }
    
    /* HEADER menu mobile */
    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
        margin-left: 20px;
    }

    /* HERO SECTION */
    .hero-wrap-cols {
        padding-top: 40px!important;
        padding-bottom: 40px!important;
    }

}

@media screen and (max-width:1024px) {

    /* HEADER menu mobile */
    .wp-block-navigation {
        order: 3;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: block;
    }
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        bottom: 0;
        display: none;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    .logo-slogan-wrap,
    .head-search {
        display: none;
        }
        body.is-scrolled .logo-wrap,
        .logo-wrap {
            max-width: 100px;
        }
        .logo-wrap .wp-block-image {
            flex-basis: 60px;
        }

    /* ico menu */
    .wp-block-navigation__responsive-container-close svg, 
    .wp-block-navigation__responsive-container-open svg {
        height: 35px;
        width: 35px;
    }




}

@media screen and (min-width:1025px) and (max-width:1392px) { 

    /* HEADER */
    .logo-wrap {
        max-width: 350px;
        }
        .logo-slogan {
            font-size: var(--wp--preset--font-size--xx-small);
        }

    .wp-block-button.is-style-cta-mini-jaune {
        font-size: var(--wp--preset--font-size--x-small);
    }
   
}

@media screen and (max-width:1392px) {  

    /* HEADER */
    .nav-principale-wrap {
        flex-wrap: wrap;
        }
        .head-cta {
            gap: 20px!important;
        }

        /* recherche */
        .wp-block-search.wp-block-search__button-only .wp-block-search__input {
            top: 14%;
            bottom: 10%;
            right: 65px;
            width: 35vw;
            height: 40px;
        }

    /* CTA */
    .wp-block-button.is-style-cta-mini-jaune .wp-block-button__link,
    .wp-block-button.is-style-cta-mini-fonce .wp-block-button__link {
        padding-top: 15px;
        padding-right: 25px;
        padding-bottom: 15px;
        padding-left: 25px;
    }
    .wp-block-button.is-style-cta-medium-jaune .wp-block-button__link,
    .wp-block-button.is-style-cta-medium-fonce .wp-block-button__link {
        padding-top: 20px;
        padding-right: 35px;
        padding-bottom: 20px;
        padding-left: 35px;
    }
    .wp-block-button.is-style-cta-gros-jaune .wp-block-button__link,
    .wp-block-button.is-style-cta-gros-fonce .wp-block-button__link {
        padding-top: 30px;
        padding-right: 50px;
        padding-bottom: 30px;
        padding-left: 50px;
    }

}