/* layout */

.wp-site-blocks {
    height: auto;
    min-height: 100%;
}

body.menu-open {
    overflow: hidden;
}

/* header */

.main-header {
    position:sticky;
    top: -58px;
    z-index: 99;
}

.main-header .menu-wrapper {
    background-color: var(--wp--preset--color--raft-bg) !important;
    transition: background-color .3s;
}

.main-header .sticky-menu {
    position: sticky;
    top: 0px;
    background-color: var(--wp--preset--color--raft-bg);;
    transition: background-color .3s;
    z-index:1;
}

body.scrolled .main-header .menu-wrapper,
body.scrolled .main-header .sticky-menu,
body.menu-open .main-header .menu-wrapper,
body.menu-open .main-header .sticky-menu {
    background-color: var(--wp--preset--color--raft-bg-alt) !important;
}

body.menu-open .main-header .menu-wrapper,
body.menu-open .main-header .sticky-menu {
    transition: 0s;
}

body.scrolled:not(.menu-open) .main-header .menu-wrapper{
    box-shadow: 0 0 32px #00000011;
}

.toplogo {
    color: var(--wp--preset--color--custom-bleu-maj);
}

.toplogo svg {
    display: block;
    width: 280px;
}

.footerlogo svg {
    display: block;
    width: 200px;
    height: auto;
}

@media (min-width: 1440px) {
    body.scrolled .toplogo svg {
        width: 200px;
    }
}

.toplogo svg path,
.footerlogo svg path {
    fill: currentColor;
}

.toplogo:hover, .main-menu a:hover {
    color: var(--wp--preset--color--custom-bleu-sombre) !important;
}

.main-menu .current-menu-item a {
    font-weight: 600;
}

.topmenu-btn {
    font-family: 'Material symbols outlined';
    cursor: pointer;
    color: var(--wp--preset--color--raft-bg-inv);
    font-size: 28px;
    display: none;
    width: 28px;
    overflow: hidden;
}

.scrolled .topmenu-btn {
    display: block;
}

.menu-open .topmenu-btn {
    font-size: 0;
}

.menu-open .topmenu-btn:before {
    content:'close';
    font-size: 28px;
}

/* mobile menu */

.menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--wp--preset--color--raft-bg-alt);
    z-index: 98;
    padding: 8px 0 16px;
    box-shadow: 0 0 32px #00000011;
    border-left: 48px solid var(--wp--preset--color--raft-accent);
    display: none;
    transition: .2s top;
}

.menu-mobile #mainbuttons {
    padding: 0 24px 12px;
}

.menu-mobile #mainbuttons .wp-block-button {
    display: block;
    flex: auto;
}

.menu-mobile #mainbuttons .wp-element-button {
    justify-content: center;
}

.scrolled .menu-mobile {
    display: block;
}

.menu-open .menu-mobile {
    display: block;
    top: 66px;
}

.menu-mobile-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--wp--preset--color--raft-bg-inv);
    z-index: 97;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .2s;
}

.menu-open .menu-mobile-bg {
    opacity: 0.5;
    visibility: visible;
    pointer-events: initial;
}

@media (min-width: 768px) {
    .menu-mobile #mainbuttons {
        display: none;
    }
}

@media (max-width:1439px) {
    .menu-open .menu-mobile {
        top: 78px;
    }

    .main-header {
        top: 0;
    }

    .main-header .menu-wrapper {
        padding-top: 0 !important;
    }

    .main-header #mainmenu {
        display: none;
    }

    .topmenu-btn {
        display: flex !important;
        background-color: var(--wp--preset--color--raft-accent);
        position: absolute;
        top: 0;
        left: -48px;
        bottom: 0;
        width: 48px;
        justify-content: center;
        align-items: center;
        color: var(--wp--preset--color--white);
    }

    .toplogo svg {
        width: 240px;
    }

    .menu-mobile {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .menu-mobile .wp-block-spacer {
        border: solid 1px var(--wp--preset--color--raft-accent);
        width: 200px;
        margin: 16px 0 !important;
        opacity: 0.1;
    }

    .menu-open .menu-mobile {
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
    }

    .menu-mobile #mainmenu .wp-block-navigation-is-layout-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 32px;
    }

    .menu-mobile #mainmenu .wp-block-navigation__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width:899px) {
    .menu-open .menu-mobile {
        top: 66px;
    }

    .main-header .sticky-menu {
        padding-right: 12px !important;
    }

    #mainbuttons .wp-element-button {
        padding: 12px 16px;
    }

    .sticky-menu #mainbuttons .wp-block-button:not(:last-child) .wp-element-button {
        font-size: 0;
    }

    .sticky-menu #mainbuttons .wp-block-button:not(:last-child) .wp-element-button:before {
        font-size: 16px;
        margin: 0;
    }

    .toplogo svg {
        width: 200px;
    }
}



@media (max-width:767px) {
    .sticky-menu #mainbuttons .wp-element-button {
        font-size: 0;
        padding: 8px 12px;
    }

    .sticky-menu .wp-block-group:first-child {
        margin: 0 auto;
    }

    .sticky-menu #mainbuttons {
        gap: 0;
    }

    .sticky-menu #mainbuttons .wp-element-button:before {
        font-size: 20px;
        margin: 0;
    }

    .sticky-menu #mainbuttons .wp-block-button:not(:last-child) .wp-element-button {
        display: none;
    }

    .toplogo svg {
        width: 180px;
    }
}

/* headings */

.page-title-row:before,
.page-title-row:after{
    content:'';
    display: block;
    height: 48px;
    flex: auto;
}

.page-title-row:before {
    background-color: var(--wp--preset--color--raft-accent);
    color: var(--wp--preset--color--custom-marron-tr-s-clair);
    border-right: 48px solid;
}

.page-title-row:after {
    border-left: 48px solid transparent;
}

/* breadcrumbs */

.yoast-breadcrumbs {
    font-style: italic;
    font-size: 16px;
}

.yoast-breadcrumbs a {
    color: inherit;
}

/* blocks */

.align-stretch {
    align-items: stretch;
}

.presta-block img{
    max-width: 366px;
}

/*.presta-block .wp-block-buttons {
    margin-top: auto;
}*/

.presta-block .wp-block-button:not(.is-style-outline) .wp-element-button {
    background-color: var(--wp--preset--color--raft-accent-secondary);
}

.presta-block .wp-block-button.is-style-outline .wp-element-button {
    color: var(--wp--preset--color--raft-accent-secondary);
}

.presta-block p a {
    color: var(--wp--preset--color--raft-accent-secondary);
}

.presta-block .wp-block-button:not(.is-style-outline) .wp-element-button:hover {
    background-color: var(--wp--preset--color--raft-bg-inv);
}

.presta-block .wp-block-button.is-style-outline .wp-element-button:hover {
    color: var(--wp--preset--color--raft-bg-inv);
}

.presta-block p a:hover {
    color: var(--wp--preset--color--raft-bg-inv);
}

@media (min-width:1440px) {
    .prestation-template-default .presta-block:nth-child(2n) {
        margin-left: -32px !important;
    }

    .prestation-template-default .presta-block:nth-child(2n - 1) {
        margin-right: -32px !important;
    }
}

@media (max-width:899px) {
    .presta-block {
        flex-direction: column;
    }

    .presta-block img{
        max-width: 100%;
        max-height: 300px;
        object-fit: cover;
        object-position: center;
    }
}

.palm-bg {
    background-image: url('/wp-content/themes/raft/marmite/img/motif1.svg');
    background-size: 150px auto;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.palm-bg:nth-child(2n) {
    background-position: right top;
}

.table-presta td{
    border:none;
    border-top:  1px solid #e3e3e3;
    min-width: 80px;
}

/* buttons */

.wp-block-button.icon a {
    display: flex;
    align-items: center;
}

.wp-block-button.icon a:before {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    margin-right: 12px;
}

.icon_calendar_add_on a:before {
    content: 'calendar_add_on';
}

.icon_calendar_month a:before {
    content: 'calendar_month';
}

.icon_mail a:before {
    content: 'mail';
}

.wp-block-button .wp-element-button:hover,
.wp-block-button .wp-element-button.has-raft-accent-background-color:hover {
    background-color: var(--wp--preset--color--raft-bg-inv) !important;
}

.wp-block-button.is-style-outline .wp-element-button:hover {
    background-color: transparent !important;
}


/* reviews */

#reviews .ti-review-item .ti-inner {
    background-color: var(--wp--preset--color--raft-bg) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 48px !important;
    padding-bottom: 0 !important;
}

#reviews .ti-review-item .ti-review-header {
    background-color: var(--wp--preset--color--raft-bg) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 48px !important;
    padding-top: 16px !important;
}

#reviews .ti-review-item .ti-review-header:before {
    display: none;
}

#reviews .ti-review-item .ti-stars {
    text-align: center;
    margin-bottom: 48px;
}

#reviews .ti-review-item .ti-stars .ti-star {
    width: 22px !important;
    height: 22px !important;
    margin:0 2px !important;
    filter:hue-rotate(-166deg) saturate(20) brightness(110%);
}

#reviews .ti-controls {
    top: 186px;
}

#reviews .ti-review-text {
    -webkit-line-clamp: 6 !important;
    height: 168px !important;
    font-size: 18px;
    line-height: 28px;
    font-style: italic;
    color: var(--wp--preset--color--raft-fg);
}

#reviews .ti-review-text:before {
    content:'”';
    font-style: normal;
    margin-right: 8px;
    font-size: 56px;
    display: block;
    float:left;
    margin-top: 10px;
    height: 10px;
    pointer-events: none;
    color: var(--wp--preset--color--raft-accent);
}

.staircase:before, .staircase:after {
    content:'';
    height: 32px;
    background-color: var(--wp--preset--color--raft-bg-alt);
    display: block;
}

.staircase:before {
    width: 33%;
}

.staircase:after {
    width: 66%;
}

/* FAQ */

.schema-faq {
    background-color: var(--wp--preset--color--raft-bg-alt);
    padding: 64px;
}

.schema-faq-question {
    font-family: 'Lora', serif;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--raft-accent-secondary);
    display: block;
}

.schema-faq-question:before {
    content:'';
}

.schema-faq-answer {
    border-left: 1px solid var(--wp--preset--color--raft-accent-secondary);
    padding-left: 32px;
}

@media (max-width:767px) {
    .schema-faq {
        padding: 20px;
    }
}

/* blog */

.wp-block-read-more {
    border: 2px solid;
    color:  var(--wp--preset--color--raft-bg-inv);
    border-radius: 4px;
    padding: 16px 32px;
    line-height: 1.2;
    font-size: 16px;
    white-space: nowrap;
}

.taxonomy-category a {
    background: none;
    padding: 0 !important;
    margin: 0 16px 0 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wp-block-post.category-epilation-laser .wp-post-image {
    border-color: var(--wp--preset--color--raft-accent) !important;
}

.wp-block-post.category-epilation-par-electrolyse .wp-post-image {
    border-color: var(--wp--preset--color--raft-bg-inv) !important;
}

.wp-block-post.category-drainage-lymphatique-minceur .wp-post-image {
    border-color: var(--wp--preset--color--raft-accent-secondary) !important;
}

.wp-block-post.category-soin-visage .wp-post-image {
    border-color: var(--wp--preset--color--custom-vieux-rose) !important;
}

/* Contact form */


.wpcf7-form-control:not(.wpcf7-submit) {
    color: inherit !important;
    border: 1px solid currentColor !important;
    background: #fdfdfd !important;
}

.wpcf7-form-control::placeholder {
    opacity: 0.5;
}

@media (min-width:768px) {

    .split-form {
        display: flex;
        flex-wrap: nowrap;
        gap: 32px;
    }
    
}

/* tiktok */

.tiktok-embed {
    width: 325px !important;
    border-radius: 16px;
}

/* home */

@media (max-width:1439px) {
    .home-wrapper {
        padding-top: 0 !important;
    }
}

@media (max-width:767px) {
    .home-hero {
        background-size: cover !important;
    }
}

.opacity-70 {
    opacity: 0.7;
}

.li-mb-16 li {
    margin-bottom: 16px;
}

@media (max-width:767px) {
    .hide-mobile {
        display: none !important;
    }

    .flex-column-mobile {
        flex-direction: column !important;
    }
}

.left-image {
    max-width: 450px !important;
}