/*
Theme Name: Thème sur mesure FUTFUT CLUB
Description: Theme enfant
Author: PeekSee
Author URI: https://www.peeksee.fr
Template: twentytwenty
Version: 0.13
*/
/*********************** FONT ***************************/

@font-face {
    font-family: 'Fredoka Bold';
    src: url('font/Fredoka-Bold.eot');
    src: url('font/Fredoka-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Fredoka-Bold.woff2') format('woff2'),
        url('font/Fredoka-Bold.woff') format('woff'),
        url('font/Fredoka-Bold.ttf') format('truetype'),
        url('font/Fredoka-Bold.svg#Fredoka-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fredoka Regular';
    src: url('font/Fredoka-Regular.eot');
    src: url('font/Fredoka-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Fredoka-Regular.woff2') format('woff2'),
        url('font/Fredoka-Regular.woff') format('woff'),
        url('font/Fredoka-Regular.ttf') format('truetype'),
        url('font/Fredoka-Regular.svg#Fredoka-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/************************ GENERAL *************************/
body{
    font-family: 'Fredoka Regular';
    letter-spacing: 0;
    color:#210742;
    background-image: url("image/fond2.png");
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: top center;
}
.post-meta-edit-link-wrapper{
    display: none;
}
.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
    max-width: none;
}
.site-main{
    width: 95%;
    max-width: 1500px; 
    margin:auto;
}
strong{
    font-weight: normal;
    font-family: 'Fredoka Bold'; 
}
h1, h2, h3, h4{
    font-family: "Fredoka Bold";
    font-weight: normal;
    letter-spacing: 0;
    font-size:initial;
}
.post-inner {
    padding-top: 20px !important;
}
li{
    margin:0;
}
.privacy-policy{
    margin:0 !important;
}
.e-n-accordion-item-title-icon{
    width:40px !important;
}
.bouton{
    text-align: center;
    text-transform: uppercase;
}
.bouton a,
input[type="submit"]{
    color: #210742;
    font-family: 'Fredoka Bold';
    padding:10px !important;
    font-size: 15px;
    line-height: 18px;
    text-decoration: none;
    width:100%;
    border-radius: 0;
    background-color: #cbb8f3;
    display:block;
    max-width: 290px;
    margin:20px auto;
    transition: background-color 0.3s ease;
    clip-path: polygon(7% 0%, 93% 0%, 100% 50%, 93% 100%, 7% 100%, 0% 50%);
}
input[type="submit"]{
    background: #C6F21F !important;
    color:#210742 !important;
}
input[type="submit"]:hover{
    text-decoration: none !important;
    background: #00D37F !important;
}
.bouton a:hover{
    background-color: #C6F21F !important;
    color:#210742 !important;
}
.alignleft {
    margin: -7px 14px 0 0;
}
.e-con > .e-con-inner{
    width: 95% !important;
}
.bouton a:hover, bouton a:focus{
    background: #f2a516;
}
.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
    width:100%;
}
.textebanniere p{
    font-size: 22px !important;
}
.texte-blanc p{
    color: #fff !important;
}
.entry-content a{
    color:#210742;
    font-family: 'Fredoka Bold';
    text-decoration: underline;
}
.page .entry-title, .page header.entry-header {
    display: none;
}
.entry-content a:hover, .entry-content a:focus{
    color:#210742;
    font-family: 'Fredoka Bold';
    text-decoration: underline;    
}

.entry-content h1, h1.entry-title, h2.entry-title{
    text-align: left;
    font-family: 'Fredoka Bold' !important;
    font-size: 40px !important;
    line-height: 42px;
    width: 100%;
    padding: 0;
    margin:30px 0;
}
.entry-content h2,
.entry-content h3{  
    font-family: 'Fredoka Bold' !important;
    width: 100%;
    margin:30px 0;
    font-size: 28px;
    line-height: 30px;
    width: 100% !important;
    color: #1A2D57;
}
.entry-content, .entry-content p, .entry-content li,
.tribe-common p{
    padding: 0;
    font-size: 16px;
    line-height: 20px;
    color: #210742;
    font-family: 'Fredoka Regular';
    width: 100% !important;
}
.entry-content{
    padding:0;
}
.section-inner.medium{
    width: 95%;
    max-width: 1500px;
    margin:15px auto;
    padding:0;
}
#page-contenu p a{
    font-family: "Fredoka", sans-serif;
    text-decoration: underline;
    cursor: pointer;
}


/*************** BOUTON ****************/
.start-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 18px;
    text-decoration: none;
    background: linear-gradient(180deg, #ffb31f 0%, #ff9800 55%, #ff7d00 100%);
    color: #fff;
    font-family: "Fredoka Bold", sans-serif;
    font-size: 22px;
    line-height: 1;
    margin: 5px 10px 10px 5px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 0 #e66300;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}
.start-link:hover {

}
.start-link:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 #e66300;
}
.start-link__icon {
    width: 28px;
    height: 28px;
    display: block;
    flex: 0 0 auto;
}



.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 18px 7px 10px;
    border: 2px solid #b47cff;
    width: 180px;
    border-radius: 20px;
    background: #F9F1FA;
    font-family: "Fredoka Regular", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1;
}
.level-badge p{
    margin:0 0 0 -10px;
    color: #b47cff !important;    
}
.level-badge::before {
    content: "";
    width: 23px;
    height: auto;
    flex: 0 0 auto;
    background-image: url("image/etoile-smile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.play-button .elementor-button {
    margin-top:20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px 13px 20px;
    border-radius: 25px;
    background: linear-gradient(180deg, #a84cff 0%, #8428e8 55%, #6f18d6 100%);
    color: #ffffff;
    text-decoration: none;
    font-family: "Fredoka Bold", sans-serif !important;
    font-size: 22px;
    line-height: 1;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.32),
        inset 0 -3px 0 rgba(78, 9, 165, 0.35),
        0 5px 0 #5710b8,
        0 10px 18px rgba(111, 24, 214, 0.28);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}
.play-button .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.play-button .elementor-button-content-wrapper::before {
    content: "";
    width: 28px;
    height: 29px;
    flex: 0 0 auto;
    background-image: url("image/manette-picto.png"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.play-button .elementor-button-content-wrapper::after {
    content: "›";
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-left: 2px;
    border-radius: 999px;
    background: #ffffff;
    color: #7b24e4;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    padding-bottom: 3px;
}
.play-button .elementor-button-text {
    color: #ffffff;  
    text-decoration: none !important  
}
.play-button .elementor-button:hover {

}
.play-button .elementor-button:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.24),
        inset 0 -2px 0 rgba(78, 9, 165, 0.35),
        0 2px 0 #5710b8,
        0 6px 12px rgba(111, 24, 214, 0.24);
}

.elementor-button-link{
    text-decoration: none !important;
}

.play-button-card .elementor-button-content-wrapper::before {    
    display: none;
}
.play-button-card a{    
    width: 200px !important;
    margin-bottom: 20px;  
}

.play-button-orange .elementor-button{    
    background: linear-gradient(180deg, #ffb31f 0%, #ff9800 55%, #ff7d00 100%);      
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 0 #e66300;
}
.play-button-orange .elementor-button:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 #e66300;
}
.play-button-orange .elementor-button-content-wrapper::after{
    color:#F78701;
}


.play-button-bleu .elementor-button {    
    background: linear-gradient(
        180deg,
        #3f6bff 0%,
        #1641f8 55%,
        #0d2fc8 100%
    );
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 0 #0a28ad;
}
.play-button-bleu .elementor-button:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 #0a28ad;
}
.play-button-bleu .elementor-button-content-wrapper::after {
    color: #1641F8;
}


.play-button-vert .elementor-button {    
    background: linear-gradient(
        180deg,
        #20c978 0%,
        #038746 55%,
        #026734 100%
    );
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 0 #02572d;
}

.play-button-vert .elementor-button:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 #02572d;
}
.play-button-vert .elementor-button-content-wrapper::after {
    color: #038746;
}


.play-button-rose .elementor-button {    
    background: linear-gradient(
        180deg,
        #ff7ca0 0%,
        #f9497a 55%,
        #d92f60 100%
    );
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 0 #c72554;
}

.play-button-rose .elementor-button:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 #c72554;
}
.play-button-rose .elementor-button-content-wrapper::after {
    color: #F9497A;
}
 


/************** COOKIES ********************/
#cookie-notice{
    font-size: 16px !important;
    line-height: 20px !important;
    font-family: 'Helvetica' !important;
}
#cookie-notice .cn-button{
    border-radius: 0px !important;
    font-family: 'Fredoka Bold' !important;
    font-size: 15px !important;
    line-height: 20px !important;
    padding:5px 20px !important;
    border-radius: 20px !important;
    color:#1A2D57 !important;
    background: #d7dff2 !important;
}
#cookie-notice .cn-close-icon{
    display:none;
}
#cookie-notice .cookie-notice-container{
    padding:30px;
}


/************************* HEADER **************************/
#site-header{
    background: transparent !important;
}
#site-header .header-inner{
    background: #fff;
    height: 70px;
    border-radius: 20px;
    margin:35px auto 0 auto;
    box-shadow: 0 2px 8px rgba(247, 135, 1, 0.25);
    padding:5px;
    max-width: 100% !important;
    width: 96%;
}
#site-header .custom-logo{
    height:43px !important;
}
.header-titles{
    margin-top: -32px;
    margin-left: 10px;
}
.header-titles .site-logo{
    margin:10px !important;
}
body:not(.enable-search-modal) .header-titles-wrapper{
    display: block;
    height: 0;
}



/************************ FOOTER **************************/
#site-footer{ 
    background: #fff !important;
    color:#210742;
    margin-top:30px !important;    
    box-shadow: 0 2px 8px rgba(247, 135, 1, 0.25);
    padding:20px 0;
}
#site-footer .contenu{
    width: 96%;
    max-width: 96%;
    margin:0 auto;
}
#site-footer .col-logo span{
    display: inline-block;
    vertical-align: middle;
}
#site-footer .col-logo span img{
    height:22px;
}
#site-footer .colonne{
    display: inline-block;
    vertical-align: middle;
    width: 33%;
}
#site-footer .menu ul{
    margin:0;
    text-align: center;
}
#site-footer .menu li{
    display: inline-block;
    vertical-align: middle;
    list-style: none;
}
#site-footer .menu li a{
     color:#8125D5;
     display: inline-block;
     padding:0 25px;
     font-family: 'Fredoka Bold' !important; 
}
#site-footer .menu li a:hover, #site-footer .menu li a:focus{
    color:#F78701;
    text-decoration: none;
}
#site-footer .mention{
    color:grey;
    font-size:15px;
    text-align: right;
    
}


/*************** HOME ******************/
#home-titre{
    font-size: 128px !important;
    line-height: 81px;
    color:#210742;
    margin-top: 40px;
}
#home-titre2{    
    font-size: 107px !important;
    line-height: 128px;
    color:#F78701;
    background: linear-gradient(
        90deg,
        #B64DFC 0%,
        #F78701 33%,
        #F78701 33%,
        #F78701 66%,
        #F78701 66%,
        #F78701 100%
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#jeu-titre{
    font-size: 107px !important;
    line-height: 126px;
    color: #F78701;
    background: linear-gradient( 90deg, #B64DFC 0%, #F78701 33%, #F78701 33%, #F78701 66%, #F78701 66%, #F78701 100% );
      background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#home-banniere{
    margin-top:-40px;
    z-index:9999
}
#site-content{
    overflow: visible;
}

/***************** 404 ************************/
.error-404{    
    font-family: 'Fredoka Bold';  
    color:#210742 !important;
    text-align: center !important;
}
.error-404 .page-title{
    font-size:60px;
    line-height: 65px;
}


/************** PAGES ELEMENTOR *****************/

.elementor-widget-container h1{
    margin-top:0;
}
.elementor-widget-container h2 {

}
.elementor-widget-container h3 {

}
.elementor-widget-container a{

}





.clr{
    clear:both;
}

/**************** MEDIA QUERIES *****************/


@media screen and (max-width:1120px){    
    #home-banniere{
        margin-top:0;
    }    
    #site-content{
        overflow: hidden;
    }
}

@media screen and (max-width:999px){
    .header-titles{
        margin-top:0;
    } 
    #site-footer .colonne{
        width: 100%;
        margin-bottom:20px;
        text-align: center;
    }
    #site-footer .custom-logo{
        margin:0 auto;
    }
    #jeu-titre {
      font-size: 67px !important;
      line-height: 67px;
    }
}

@media screen and (max-width:670px){
    #home-titre{
        font-size: 78px !important; 
        line-height: 38px;
    }
    #home-titre2{
        font-size: 51px !important;
        line-height: 84px;
    }
    #jeu-titre {
      font-size: 45px !important;
      line-height: 45px;
      padding-top:10px;
    }
}