:root{
    --mk-yellow: #e8951e;
    /*--mk-darkblue: #073582;*/
    --mk-darkblue: #194794;
    --mk-lightblue: #a0c9de;
    --dark-blue: #0d2457;
    --body-bg: #001137;
    --header-height: 120px;
    --page-width: 1790px;
    --page-top: 40px;
    --page-height: calc(100vh - var(--page-top));
    --adminbar-height: 0px;
    --suivi-col1-w: 59%;
    --suivi-col2-w: calc(100% - var(--suivi-col1-w));
    --suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-orange-right.png');
    --header-search-input-w: 200px;
}

*{font-family: 'Ubuntu';}

html, body{width: 100%; max-width: 100vw; height: 100%; min-height: 100vh; margin:0; padding: 0;}
p, .row, .col, .container{margin:0; padding: 0;}
ul{margin:0; padding: 0; list-style: none;}
p, span {color: var(--blue-1);font-size: 20px; font-weight: 500;}
h3{ color: var(--blue-1);font-size: 38px; font-weight: bold;text-transform: uppercase;}
a, a:hover{text-decoration: none;}
.row{width: 100%; display: flex;}
.col{width: 100%; display: flex; flex-direction: column; -webkit-flex-direction: column;}

header, #page, footer{width: 100%;max-width: var(--page-width); margin: 0 auto;}
.container{width: 100%; max-width: 1600px;margin: 0 auto;padding: 0 15px;}
body{background-color: var(--body-bg);}

/*
------------------------------------
                Header
------------------------------------
*/

header{position: fixed;top: var(--adminbar-height); left: 50%; overflow: hidden;width: 100%;height: auto;min-height: calc(var(--header-height) + 50px); z-index: 999;padding-bottom: 20px;transform: translateX(-50%);padding-top: 1.5vw;}
header:before{content: '';border-radius: 50%;width: 1300vw;height: 1000vw;background-color: #194794;position: absolute;top: calc(-1000vw + var(--header-height));left: 50%;transform: translateX(-50%);box-shadow: rgba(0,0,0,0.48) 0px 10px 20px;z-index: 0;}
header > .container{position: relative;z-index: 1;display: flex;justify-content: space-between;}
header #logo-block{margin-left:12vw; }

/* Menu */
header #menu-block{width: 50%;padding-top: 0.5vw;/*padding-left: 2vw;padding-right: 1vw;*/ min-width: 700px;}
header .menu, #mobile-menu .menu{display: grid; grid-auto-flow: column; gap: 15px; justify-content: space-between; width: 100%;}
header .menu > li > a, #mobile-menu .menu > li > a{height: 43px;display: flex;align-items: center;justify-content: flex-start;color: white;transition: color .2s ease;font-weight: bold;text-transform: uppercase;position: relative;padding-left: 1vw;white-space: nowrap;}
header .menu > li.menu-item-has-children, #mobile-menu .menu > li.menu-item-has-children{min-width: 200px;}
header .menu > li.menu-item-has-children:hover, #mobile-menu .menu > li.menu-item-has-children:hover{background-color: var(--mk-yellow);}
header .menu > li:hover > a, #mobile-menu .menu > li:hover > a{color: var(--mk-yellow);}
header .menu > li.menu-item-has-children:hover > a:after{content: '';width: 60%;height: 1px;background-color: var(--dark-blue);position: absolute;bottom: 0;left: 1vw;}
header .menu > li.menu-item-has-children:hover > a{color: var(--dark-blue);}
#mobile-menu .logo-block{margin-top: 10px;margin-left: 10px;}

header .menu > li:not(.menu-item-has-children) a{padding-left: 0;}

header .sub-menu, #mobile-menu .sub-menu{display: none;padding-bottom: 1vw;}
header .sub-menu a, #mobile-menu .sub-menu a{color: white;font-size: 11px; font-weight: 500; text-transform: uppercase;padding-left: 1vw;margin-top: 11px;display: inline-block;transition: color.2s ease;}
header .sub-menu a:hover, #mobile-menu .sub-menu a:hover{color: var(--dark-blue);}
header .menu > li:hover .sub-menu, #mobile-menu .menu > li:hover .sub-menu{display: grid;}

/* Search */
#search-block, #social-block{padding-top: 1vw;}
#search-block{padding-right: 0.5vw;}
#search-block form, .search-block form{position: relative;}
#search-block input[type="text"], .search-block input[type="text"]{width: var(--header-search-input-w);background-color: #011c49; border: none; color: white;}
#search-block input[type="image"], .search-block input[type="image"]{position: absolute; right: 5px; top: 5px;}
.search-block form, .social-block{max-width: max-content; margin: 0 auto;}
.search-block input[type="text"]{background-color: white;}

#mobile-trigger{display: none;width: 50px; height: 50px;position: fixed; top: 10px; right: 20px; justify-content: center; align-items: center; border-radius: 50%;transition: background-color .2s ease;cursor: pointer;z-index: 1010;}
#mobile-trigger svg{width: 30px; height: 30px;}
#mobile-trigger path{fill:white; transition: fill .2s ease;}
#mobile-trigger:hover{background-color: var(--mk-yellow);}
#mobile-trigger:hover path{fill: #011c49;}

#mobile-menu{position: fixed;width: 100vw; min-height: 100vh; min-height: -webkit-fill-available; transform: translateY(-100vh);opacity: 0; transition: transform .5s ease, opacity .5s ease; background-color: var(--dark-blue); top: 0; left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 70vh 1fr 1fr; gap: 15px;z-index: 1000;padding: 10px 15px;}
#mobile-menu.show{opacity: 1; transform: translateY(0);}
#mobile-menu .menu{gap: 5px;}

/*
------------------------------------
                Footer
------------------------------------
*/

footer{display: grid; background-color: var(--mk-yellow); background: url('/wp-content/themes/mykiffe/imgs/footer-bg.png') no-repeat; background-position: top center; background-size: cover; min-height: 150px; align-items: center;padding-top: 19px;margin-top: -25px; position: relative;}
footer:before{content:''; width: 100%; calc()}
footer > .container{display: grid; grid-auto-flow: column; justify-content: space-between;padding-right: 13vw;}
footer .logo{margin-left: 12vw;}
footer .appstore{margin-left: 10px;}
footer .btn-app{margin-right: 6vw;}

/*
------------------------------------
                page
------------------------------------
*/

#page{min-height: var(--page-height);padding-top: var(--page-top);position: relative;overflow-x: hidden;}

/*
------------------------------------
        Éléments récurrents
------------------------------------
*/

section.orange .elementor-column{background-color: var(--mk-yellow);}
section.darkblue .elementor-column{background-color: var(--mk-darkblue);}
section.lightblue .elementor-column{background-color: var(--mk-lightblue);}
section.orange .elementor-heading-title,
section.lightblue .elementor-heading-title{color: var(--mk-darkblue)!important;}
section.darkblue .elementor-heading-title{color: var(--mk-yellow)!important;}
section.suivi-section > div{padding-right: 4vw;}
section.t-right > div > div:last-of-type:before,
section.t-left > div > div:first-of-type:before{content: '';position: absolute;width: 62px; height: 62px;background: var(--suivi-border-img) no-repeat; z-index: 10; top: 0;}
section.t-right > div > div:last-of-type:before{left: 0; transform: translateX(-100%);}
section.t-left > div > div:first-of-type:before{right: 0; transform: translateX(100%);}
section.orange.t-right{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-orange-right.png');}
section.orange.t-left{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-orange-left.png');}
section.darkblue.t-right{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-darkblue-right.png');}
section.darkblue.t-left{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-darkblue-left.png');}
section.lightblue.t-right{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-lightblue-right.png');}
section.lightblue.t-left{--suivi-border-img: url('/wp-content/themes/mykiffe/imgs/suivi-lightblue-left.png');}
section.suivi-section .elementor-column.elementor-col-50:nth-child(1),
section.suivi-section .elementor-column[data-col="50"]:nth-child(1){width: var(--suivi-col1-w)!important;}
section.suivi-section .elementor-column.elementor-col-50:nth-child(2),
section.suivi-section .elementor-column[data-col="50"]:nth-child(2){width: var(--suivi-col2-w)!important;}
section.suivi-section img{width: 100%!important; height: 375px!important; object-fit: cover!important; filter: grayscale(1);}
section.suivi-section .colored img{filter: none;}

section.suivi-section .price .elementor-heading-title{font-size: 132px!important;line-height: 0.7em!important; display: flex; align-items: flex-start;}
section.suivi-section .price .elementor-heading-title span{line-height: 1.0em; font-size: 18px;}
section.suivi-section .price .elementor-heading-title span.unit{font-size: 62px;}
section.suivi-section .price .elementor-heading-title span.more{font-size: 28px;margin: 0.2em 0 0 0.3em;}

/*
------------------------------------
    Personnalidation des pages
------------------------------------
*/

body.elementor-page-44 #page, body.elementor-page-46 #page, body.elementor-page-48 #page,
body.elementor-page-60 #page, body.elementor-page-61 #page, body.elementor-page-1585 #page{background: url('/wp-content/themes/mykiffe/imgs/fond.jpg') no-repeat; background-position: 50% 40px; background-size: cover;}

/* Page Carnet de suivi */
body.elementor-page-50 #page{background: url('/wp-content/themes/mykiffe/imgs/fond2.jpg') no-repeat; background-position: top center; background-size: cover;}

/* Page Solution */
body.elementor-page-60 section.suivi-section > div {padding-right: 2.5vw;padding-left: 2.5vw;}

/* Page Dictaphone intégré */
body.elementor-page-46 #page:before{content: ''; position: absolute; right: 0; top: 553px; width: calc(100vw * 921 / 1920); aspect-ratio: calc(921/756); background: url('/wp-content/themes/mykiffe/imgs/dicta_phone.png') no-repeat;background-size: cover;}
body.elementor-page-46 .elementor-image-box-img{width: 135px!important;margin-right: 50px!important;}
body.elementor-page-46 .elementor-image-box-title{margin-top: 35px!important;}

/* Page de recherche */
.search-result{padding: calc(var(--page-top) + 3vw) 15px 0;}
.search-result *{color: white}
.search-result{display: flex; justify-content: center; align-items: center; flex-direction: column;}
.search-result h1{text-align: center;padding: 0 15px; margin-bottom: 0.5em;}
.search-result h1 span{font-size: inherit; color: var(--mk-yellow);}
.search-result .list_search{display: grid; grid-template-columns: repeat(auto-fit, 22%); width: 80%; margin: 2vw auto;gap: 20px; justify-content: center;}
.search-result .search_item{background-color: rgba(255,255,255,.2); padding: 15px;}
.search-result .search_item .excerpt p{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden; font-size: 14px;}
.search-result .search_item a{display: inline-block; background-color: var(--mk-yellow); margin: 15px auto 0;padding: 5px 20px;}

/*
------------------------------------
            Responsive
------------------------------------
*/

@media (max-width: 1920px) {
    :root{
        --header-search-input-w: calc(100vw * 200 / 1920);
    }
}

@media (max-height: 768px){
    #mobile-menu{grid-template-rows: 50px 1fr auto auto;}
}

@media (max-width: 1790px){
    :root{--page-width: 100vw;}
    body.elementor-page-46 #page:before{top: calc(100vw * 553 / 1790);}
    section.suivi-section .price .elementor-heading-title{font-size: calc(100vw * 132 / 1790)!important;}
    /*section.suivi-section .price .elementor-heading-title span{font-size: 18px;}*/
    section.suivi-section .price .elementor-heading-title span.unit{font-size: calc(100vw * 62 / 1790);}
    section.suivi-section .price .elementor-heading-title span.more{font-size: calc(100vw * 28 / 1790);}
}

@media (max-width: 1430px){
    header #logo-block, footer .logo{margin-left: 0;}
    footer > .container{padding-left: 15px;}
}

@media (max-width: 1366px) {
    .search-result .list_search{grid-template-columns: repeat(auto-fit, 30%);}
}

@media (max-width: 1200px){
    header #menu-block{
        width: auto;
    }
}

@media (max-width: 1160px){
    header #logo-block img, #search-block input[type="text"]{width: 100px;}
    footer > .container{padding-right: 15px;}
    section.suivi-section > div{padding-right: 0;}
    section.suivi-section{padding: 0 15px;}
    section.suivi-section .elementor-heading-title{font-size: calc(100vw * 44 / 1160)!important;}
    body.elementor-page-60 section.suivi-section .elementor-heading-title{font-size: calc(100vw * 33 / 1160)!important;}
    section.suivi-section img{height: calc(100vw * 375 / 1160)!important;}
    body.elementor-page-61 .elementor-heading-title{font-size: calc(100vw * 32 / 1160)!important;}
    body.elementor-page-61 .elementor-heading-title br{display: none;}
}

@media (max-width: 1080px){
    header #menu-block, #search-block, #social-block{display: none;}
    :root{--header-height: 80px;}
    #mobile-trigger{display: flex;}
    .menu-block{display: flex; justify-content: center; align-items: center;}
    #mobile-menu .menu{grid-auto-flow: row; justify-content: center;}
    #mobile-menu .menu > li{min-width: 0 !important; margin-left: auto; margin-right: auto;}
    #mobile-menu .menu > li.menu-item-has-children:hover{background-color: transparent;}
    #mobile-menu .menu > li > a{padding-left: 0;display: flex; justify-content: center; align-items: center;}
    #mobile-menu .menu > li:hover > a,
    #mobile-menu .sub-menu a:hover{color: var(--mk-yellow)!important;}
    #mobile-menu .sub-menu{display: block;}
    #mobile-menu .sub-menu li{text-align: center;}
    #mobile-menu .sub-menu a{padding-left: 0;}

    .search-result .list_search{grid-template-columns: repeat(auto-fit, 44%);}

    footer .btn-app{margin-right: 0;}
    footer .btn-app img{width: calc(100vw * 404 / 1160);}
    footer .applinks img{width: calc(100vw * 200 / 1160);}
}

@media (max-width: 768px){
    body.elementor-page-46 #page:before{opacity: .4; top: calc(100vw * 553 / 768); width: calc(100vw * 700 / 768);}
    body.elementor-page-46 .elementor-image-box-img{width: 80px!important; margin-right: 0px!important;}
    section.suivi-section .price .elementor-heading-title{justify-content: center;}

    .search-result .list_search{grid-template-columns: repeat(auto-fit, 100%);}

    footer .applinks img{max-width: 100px;}
    footer > .container{grid-auto-flow: unset; grid-template-columns: 30vw 1fr; gap: 15px;}
    footer .applinks{grid-column: 1 / 3;text-align: center;}
    footer .logo img{width: calc(100vw * 147 / 768);}
}

@media (max-width: 480px){
    :root{
        --suivi-col1-w: 100%;
        --suivi-col2-w: 100%;
    }
    section.suivi-section > div > div:before{display: none;}
    section.suivi-section > div > div, section.suivi-section img{min-height: calc(100vw * 250 / 480);}
    section.suivi-section .elementor-heading-title,
    body.elementor-page-60 section.suivi-section .elementor-heading-title{font-size: 24px!important;padding: 20px;}
    section.t-left > div{flex-flow: column-reverse;}

    body.elementor-page-61 section.suivi-section .elementor-heading-title{padding: 10px;}
    body.elementor-page-61 section.suivi-section p.elementor-heading-title{font-size: 14px!important;}
    body.elementor-page-61 section h2.elementor-heading-title, .search-result h1{font-size: 20px!important;}
    section.suivi-section .price .elementor-heading-title{font-size: calc(100vw * 132 / 768)!important;}
    section.suivi-section .price .elementor-heading-title span.unit{font-size: calc(100vw * 62 / 768);}
    section.suivi-section .price .elementor-heading-title span.more{font-size: calc(100vw * 28 / 768);}

    footer .btn-app img{width: calc(100vw * 200 / 480);}
    footer .applinks img{width: calc(100vw * 100 / 480);}
}