/*
Theme Name: Studio Cymé
Theme URI: https://www.studiomarmite.com
Author: Studio Marmite
Author URI: https://www.studiomarmite.com
Template: twentytwentythree
Description: A child theme for Studio Cymé
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0
License: All rights reserved
License URI: https://www.studiomarmite.com
Text Domain: cyme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/


/* COMMON ELEMENTS //////////////////////////////////////////////////////*/

/* Layout *********************************/

.wp-site-blocks{
    position:relative;
    padding:0;
}

/* Header *********************************/

header{
    padding:1rem 0 0;
    margin-block-start:0 !important;
    background:#fff;
    color: var(--wp--preset--color--contrast);
    position:sticky;
    top:0;
    z-index:100;
    opacity:1;
    transition:.5s opacity;
    transition-delay:1s;
}

.home-header-top + header{
    margin-bottom:-1rem;
}

.intro-loading header{
    opacity:0;
}

header:after{
    content:'';
    display:block;
    border-top:solid 1px;
    margin-top:1rem;
    padding:0 0 .5rem;
    opacity: 0.25;
}

#cyme_logo{
    padding-top:.5rem;
    width:105px;
    height:auto;
}

#cyme_logo path{
    fill:currentColor;
}

.header-top-menu .wp-block-navigation__responsive-container{
    animation:none;
}

.header-top-menu .wp-block-navigation__responsive-container.is-menu-open{
    padding-top:2rem !important;
    background:var(--wp--preset--color--contrast)!important;
    color:var(--wp--preset--color--base)!important;
}

.header-top-menu .is-menu-open .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content{
    animation: overlay-menu__fade-in-animation .1s ease-out;
    animation-fill-mode: forwards;
}

.header-top-menu ul .wp-block-navigation-item a{
    font-size:1.5rem;
    font-weight:400;
    text-transform: uppercase;
    font-family: 'Lexend', serif;
    display:block;
    
}

.header-top-menu ul .wp-block-navigation-item a:after{
    content:'';
    display:block;
    height:4px;
    background: transparent bottom right repeat-x;
    background-image: radial-gradient(circle at .756rem, currentColor 1px, transparent 2px);
    background-size: 1rem 4px;
    opacity: 0;
}

.header-top-menu ul .wp-block-navigation-item a:hover:after{
    opacity: 1;
}

.header-top-menu ul .wp-block-navigation-item a:hover,
.header-top-menu ul .wp-block-navigation-item a:focus{
    text-decoration: none;
}

@media (min-width:1200px){
    .header-top-menu .wp-block-navigation__responsive-close{
        padding-right:8px;
    }
    
    .header-top-menu button:before{
        content:'Menu';
        text-transform: uppercase;
        display:block;
        float:left;
        padding-right:.5rem;
        font-size:1rem;
        font-family: 'Lexend';
        line-height:1.5rem;
    }
}

/* Elements ************************/

.hidden{
    display:none !important;
}

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

.position-relative{
    position:relative;
}

.wpcf7-text, .wpcf7-textarea{
    font-size:16px;
    line-height:22px;
    border:solid 2px;
    color:inherit;
    padding:.5rem;
}

.wpcf7-text:focus, .wpcf7-textarea:focus{
    border:dotted 2px;
    outline: none;
}

.wpcf7-submit{
    border:solid 2px;
    color:var(--wp--preset--color--base);
    background:var(--wp--preset--color--contrast);
    padding: 1rem 1.5rem;
    font-size:1rem;
    font-family:'Lexend';
    text-transform: uppercase;
    cursor: pointer;
}

.wpcf7-submit:hover{
    background:var(--wp--preset--color--primary);
    opacity:0.8;
}

.sticky-top{
    position:sticky;
    top:9rem;
}

/* Buttons */
.wp-block-button.is-style-outline{
    position:relative;
}

.wp-block-button.is-style-outline:hover{
    color:var(--wp--preset--color--primary);
}

.has-contrast-background-color .wp-block-button.is-style-outline:hover{
    color:var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline:before, .wp-block-button.is-style-outline:after{
    content:'';
    display:block;
    position:absolute;
    left:0px;
    right:initial;
    top:0px;
    bottom:0px;
    width:4px;
    background-image: radial-gradient(circle at center, currentColor 1px, transparent 2px), radial-gradient(circle at center, currentColor 1px, transparent 2px);
    background-size: 4px 4px;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    transition:.2s;
}

.wp-block-button.is-style-outline:after{
    left:initial;
    right:0px;
    background-position: top right, bottom right;
}

.wp-block-button.is-style-outline a{
    position:relative;
    border:none!important;
    font-weight:400;
    transition:.2s;
    clip-path: polygon(
        .4rem 0,
        calc(100% - .4rem) 0,
        calc(100% - .4rem) .4rem,
        100% .4rem,
        100% calc(100% - .4rem),
        calc(100% - .4rem) calc(100% - .4rem),
        calc(100% - .4rem) 100%,
        .4rem 100%,
        .4rem calc(100% - .4rem),
        0 calc(100% - .4rem),
        0 .4rem,
        .4rem .4rem
    );
}

.wp-block-button.is-style-outline a:hover{
    clip-path: polygon(
        .7rem 0,
        calc(100% - .7rem) 0,
        calc(100% - .7rem) .7rem,
        100% .7rem,
        100% calc(100% - .7rem),
        calc(100% - .7rem) calc(100% - .7rem),
        calc(100% - .7rem) 100%,
        .7rem 100%,
        .7rem calc(100% - .7rem),
        0 calc(100% - .7rem),
        0 .7rem,
        .7rem .7rem
    );
}

.wp-block-button.is-style-outline a:before{
    content:'';
    display:block;
    position:absolute;
    left:1px;
    top:1px;
    right:1px;
    bottom:1px;
    border:solid 2px;
    box-sizing: border-box;
    transition:.2s;
}

/* Separator */

.wp-block-separator{
    min-width:3rem;
    height:4px;
    border:none;
    background:transparent center left repeat-x;
    background-image: radial-gradient(circle at center, currentColor 1px, transparent 2px);
    background-size: 1rem 4px;
    color:inherit;
    opacity:.35;
    flex:auto;
}

@media (max-width:767px){
    .wp-block-separator{
        min-width:.75rem;
    }
}

/* HOMEPAGE /////////////////////////////////////////////////////////////*/

/* Layout *********************************/

.page-template-cyme-home .wp-block-post-content{
    transition:1.5s color;
}

figure.wp-block-post-featured-image{
    display:none;
}

/* Header *********************************/

.page-template-cyme-home header:after{
    opacity: 0;
}

/* Global background **********************/

.home-bg{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:120vh;
    margin:0;
    z-index:-1;
    background-size:50% auto;
    background-attachment: fixed;
}

.home-bg-inner{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0);
    transition:.5s;
}

.home-video-bg{
    background:#ddd;
    width:100%;
    height:100vh;
    position:fixed;
    overflow:hidden;
    opacity:0;
    transition:1s opacity;
}

.home-video-bg.visible{
    opacity:.25;
}

.home-video-bg video{
    min-width:100%;
    min-height:100%;
}

/* Page header *****************************/

/* Background */

.home-bg-cache{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:50vh;
    background:#fff;
    z-index:1;
    margin:0;
    transition:.5s height;
    transition-delay: 1s;
}

.intro-loading .home-bg-cache{
    height:100vh;
}

.home-bg-cache:after{
    content:'';
    display:block;
    border-top:solid 1px;
    padding:0 0 .5rem;
    opacity: 0.25;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}

/* Fake h1 */

.home-fake-h1-wrp{
    max-width: var(--wp--style--global--wide-size);
    margin:0 auto;
    height:100%;
    position:relative;
}

.home-fake-h1-mask{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    clip: rect(0, auto, auto, 0);
    overflow: hidden;
}

.home-fake-h1{
    position:fixed;
    opacity:1;
    transition:.2s;
}

.intro-loading .home-fake-h1{
    opacity:0;
    top:105px !important;
}

/* Real h1 */

.animated-h1{
    max-width:43rem;
    height:calc(50vh - 95px - 2rem);
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: 'Frank Ruhl Libre', serif;
    font-size: var(--wp--preset--font-size--huge);
    font-weight: 900;
    line-height: 1.35;
    top:95px;
}

.animated-h1 .subtitle-wrp{
    display:block;
    font-weight:300;
    opacity:1;
    transition: .2s;
    transition-delay:.5s;
}

.intro-loading .animated-h1 .subtitle-wrp{
    opacity: 0;
}

.subtitle-wrp:after{
    content:"|";
    visibility: hidden;
}

.home-fake-h1 .rotating-content span{
    color:transparent;
    position:relative;
    top:-.35rem;
    transition:0.3s top ease;
    *background: transparent center left repeat-x;
    *background-image: radial-gradient(circle at center, #000 1px, transparent 2px);
}

--.home-fake-h1 .rotating-content span:before{
    content:'•';
    position:absolute;
    top:2rem;
    left:50%;
    display:block;
    font-size:1rem;
    color:#000;
}

.home-fake-h1 .rotating-content span:nth-child(2n){
    top:.35rem;
}
--.home-fake-h1 .rotating-content span.reveal:before{
    display:none;
}

.home-fake-h1 .rotating-content span.reveal{
    color:inherit;
    top:0;
    text-decoration: none;
}

/* Side buttons */

.homepage-links{
    height: calc(50vh - 95px - 2.5rem);
    z-index:1;
    position: relative;
    padding-bottom:3.5rem;
}

/* mobile */

@media (max-width:1199px){
    .home-fake-h1-mask{
        padding:0 2rem;
    }
}

@media (max-width:767px){
    
    .home-bg-cache{
        height:60vh;
    }
    
    .animated-h1{
        height:calc(60vh - 95px - 2rem);
        width:calc(100% - 4rem);
        max-width:19rem;
    }
    
    .animated-h1 br{
        display:none;
    }
    
    .animated-h1 .subtitle .rotating-content:before{
        display: block;
        content:'';
    }
}

/* Sections **********************************/

.wp-block-post-content section{
    padding-top:4rem;
    padding-bottom:4rem;
    margin:0;
    /*border:solid 1px #ffffff33;*/
}

.wp-block-post-content section:first-child{
    padding-top:0;
}

/*.wp-block-post-content section.main-section.scroll-step{
    opacity:0;
    transition: .2s opacity;
}

.wp-block-post-content section.main-section.scroll-step.focused{
    opacity:1;
}*/

.studio-desc-wrp{
    padding-top:calc(50vh - 95px + 1rem);
}

.studio-desc.scroll-step {
    min-height:50vh;
}

#step-intro{
    min-height:70vh;
}

/* text */

section.main-section {
    font-size:1.25rem;
    font-weight:300;
}

@media (max-width:1199px){
    .wp-block-post-content section{
        padding-left:2rem;
        padding-right:2rem;
    }
}

/* Section header */

section .section-header{
    align-items: flex-start;
    transition: 1s padding;
    margin-bottom:4rem;
    padding:0;
}

.section-header h2:after{
    content:'.';
}

#step-cta .section-header h2:after{
    display: none;
}

.section-header .wp-block-separator{
    height:3.5rem;
    background-position: left bottom;
}

.section-header h2{
    font-family: 'Frank Ruhl Libre', serif;
    font-size: var(--wp--preset--font-size--huge);
    font-weight: 900;
    line-height: 1.35;
    text-transform: none;
}

.section-header .section-subtitle {
    text-align:center;
    margin:0;
    padding-right:2rem;
    transition: .5s padding;
    font-style:italic;
}

section .section-subheader{
    margin-bottom:4rem;
}

@media (max-width:767px){
    section .section-header, section .section-subheader{
        flex-wrap:nowrap;
        gap:.25rem !important;
    }
    
    .section-header .wp-block-separator, .section-subheader  > .wp-block-separator{
        height:1.75rem;
    }
    
    .section-header h2{
        font-size:1.75rem;
    }
    
    .section-subheader > h3{
        font-size:1rem;
        line-height:1.5;
    }
    
    .section-header .section-subtitle {
        padding-right:0;
    }
}

/* On scroll focus */

section.focused .section-header{
    padding:0;
}

section.focused .section-header .section-subtitle{
    padding:0;
}

/* Intro - studio */

.hp-sticky-wpr{
    align-items: flex-start !important;
}

.homepage-title{
    position:sticky;
    color:#fff;
    transition:.2s opacity;
}

.homepage-title.faded{
    opacity: 0;
}

.studio-desc-wrp{
    position:relative;
}

.studio-desc-display{
    position:absolute;
    width:30rem;
    right:0;
    top:0;
    bottom:0;
    top:95px;
    font-size:1.75rem;
    font-style:italic;
    font-weight:300;
}

.studio-desc-display > *{
    position:sticky;
    top:calc(50vh - 150px);
    opacity: 0;
    padding-top:4rem;
    transition:.2s opacity, .2s padding-top;
}

.focused .studio-desc-display > *{
    opacity: 1;
    padding-top:0;
}

.studio-desc .wp-block-button {
    font-style: normal;
    margin-top:1rem;
}

@media (max-width:991px){
    
    .homepage-title{
        padding-bottom:15rem;
    }
    
    .studio-desc-display {
        width:35rem;
    }
    
    .studio-desc-display >*{
        top:50vh;
    }
}

@media (max-width:767px){
    
    .homepage-title{
        padding-bottom:15rem;
        width:auto;
    }
    
    .studio-desc-wrp {
        padding-top: calc(60vh - 95px + 1rem);
    }
    
    .studio-desc-display {
        width:18rem;
        font-size:1.25rem;
    }
    
    .studio-desc-display >*{
        top:60vh;
    }
}

/* Bureau de style */

.services-wrp{
    min-height:50vh;
    padding:4rem 0 4rem;
    align-items: flex-start !important;
    gap:6rem !important;
}

.services-item{
    text-align:center;
    padding-top:0rem;
    transition:.3s padding, .3s opacity;
    transition-delay: 0s;
    opacity:0;
}

.services-wrp.focused .services-item{
    opacity:1;
    transition-delay: 1s;
}

.services-wrp.focused .services-item:first-child{
    transition-delay: 0s;
}

.services-wrp.focused .services-item:last-child{
    transition-delay: 2s;
}

.services-item > p{
    top: 3rem;
    position:relative;
    transition: .3s top;
    transition-delay: inherit;
}

.services-wrp.focused .services-item > p{
    top:0;
}

.services-item h3:after{
    content:'•';
    display:block;
    padding-top:1rem;
}

.services-item .anim{
    width:6rem;
}

.services-item .anim svg path{
    stroke: currentColor;
    fill : currentColor;
}

@media (max-width:991px){
    .services-wrp{
        gap:3rem !important;
    }
}

@media (max-width:767px){
    .services-wrp{
        flex-direction: column;
        gap:3rem !important;
    }
}

/* collections*/
@media (max-width:991px){
    .collection-video-wrp{
        flex-direction:column;
        align-items: center !important;
    }
}

/* common */

.scroll-substep .portfolio{
    margin:4rem 0;
}

.scroll-substep .project-item{
    opacity: 0.75;
    top:1rem;
    transition:.2s background, .3s opacity, .3s top;
}

.scroll-substep.focused .project-item{
    opacity: 1;
    top:0;
}

.scroll-substep.focused .project-item:nth-child(2){
    transition-delay:0s, .1s, .1s;
}

.scroll-substep.focused .project-item:nth-child(3){
    transition-delay:0s, .2s, .2s;
}

.scroll-substep.focused .project-item:nth-child(4){
    transition-delay:0s, .3s, .3s;
}

.scroll-substep.focused .project-item:nth-child(5){
    transition-delay:0s, .4s, .4s;
}

.partners-line{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:2rem;
    overflow-x:auto;
    padding:4rem 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#step-direction-artistique .partners-line{
    padding-bottom:0;
}

.partners-line::-webkit-scrollbar {
  display: none;
}

.partners-line .partner{
    background:currentColor;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center; 
}

.partner img, .partner svg{
    width:auto;
    max-width:6rem;
    height:2.5rem;
    display:block;
    opacity:0;
    visibility: hidden;
}

.partner svg path{
    fill:transparent;
}

@media (max-width:991px){
    .scroll-substep .portfolio{
        flex-wrap:nowrap;
        overflow-x:auto;
        margin-left:-2rem;
        margin-right:-2rem;
        width:auto;
        padding:0 2rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scroll-substep .portfolio::-webkit-scrollbar {
      display: none;
    }
    
    .scroll-substep .portfolio .project-item{
        flex-shrink: 0;
    }
}

/* SINGLE PAGE /////////////////////////////////////////////////////////////*/

.membre-template-default header{
    position:static;
}

.membre-template-default header:after{
    border:none;
    padding-bottom:0.2rem;
}

.membre-template-default main *{
    box-sizing: border-box;
}


/*.single-page-sticky-wrp{
    position:sticky;
    top:-15rem;
}

.single-page-header{
    position:relative;
}

.single-page-header:before,
.single-page-header:after{
    content: '';
    display: block;
    border-bottom: solid 1px;
    padding: 0;
    opacity: .25;
}

.single-page-header .sp-header-bg{
    background-size:384px auto;
    background-attachment: fixed;
    position:absolute;
    left:0;
    right:0;
    top:.6rem;
    bottom:.6rem;
}

.single-page-header .sp-header-bg:before{
    content:'';
    display:block;
    height:4rem;
    background:currentColor;
}

.sp-header-mask-wrp{
    max-width:var(--wp--style--global--wide-size);
    height:24rem;
    position:relative;
    margin:-1px auto;
}

.sp-header-mask{
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    padding:0 .5rem;
    width:33.33%;
    z-index:1;
    border-radius:.7rem;
}

.sp-header-mask:before{
    content:'';
    display:block;
    border:solid 1px;
    border-width:0 1px 0 1px;
    opacity:0.25;
    height:100%;
}*/

.single-page-columns{
    position:relative;
    margin:0 !important;
    line-height:2;
    padding-bottom:4rem;
}

.single-page-columns:after{
    content:'';
    display:block;
    clear:both;
}

.sp-header-window{
    border: solid 1px rgba(32, 37, 73,0.25);
    padding: .5rem;
}

.sp-left-pre-col .sp-header-window{
    padding-left:0;
    border-left:0;
}

.sp-right-col .sp-header-window{
    padding-right:0;
    border-right:0;
    margin-bottom:2rem;
}

.sp-header-bg{
    background-size:384px auto;
    background-attachment: fixed;
    position:relative;
    height:24.5rem;
}

.sp-header-bg:before{
    content:'';
    display:none;
    height:4rem;
    background:currentColor;
}

.sp-left-pre-col{
    width:calc( 50% - (var(--wp--style--global--wide-size) / 2) );
    float:left;
}

.sp-left-col{
    max-width:calc( var(--wp--style--global--wide-size) / 3);
    float:left;
    margin-top:0;
    padding:0 2.6rem;
}

.sp-left-col img{
    max-width:100%;
    height:auto;
}

.sp-right-col{
    width:calc( 50% - (var(--wp--style--global--wide-size) / 2) + (var(--wp--style--global--wide-size) / 3 * 2) );
    float:left;
}

.sp-right-col .entry-content{
    padding:0 10rem 0 0;
    max-width:calc( var(--wp--style--global--wide-size) / 3 * 2);
}

.sp-left-pre-col,
.sp-right-col{
    position:sticky;
    top:-16rem;
}

.sp-left-col .wp-block-post-title{
    margin:0;
    font-size:3rem;
    text-align:right;
    position:relative;
    padding:2rem 0 0;
}

.sp-left-col .wp-block-post-title:before{
    content:'';
    display:block;
    padding:.5rem;
    top:0;
    right:0;
    background:currentColor;
    position:absolute;
    border-radius:50%;
}

.sp-skills{
    text-align:center;
}

.sp-skills .h3{
    font-size:1.3rem;
    margin-bottom:.5rem;
}

.sp-skills .h3:after{
    content:'•';
    display:block;
    margin-top:1rem;
}

.sp-skills p{
    font-style:italic;
    font-weight:300;
    font-size:1.1em;
    margin:0;
}

.sp-short-desc,
.sp-skills,
.sp-lc-gallery{
    margin-top:2rem;
}

.sp-left-col .wp-block-post-title:after,
.sp-short-desc:after,
.sp-skills:after,
.sp-right-col .entry-content h2:after{
    content:'';
    display:block;
    height: 4px;
    background: transparent center left repeat-x;
    background-image: radial-gradient(circle at center, currentColor 1px, transparent 2px);
    background-size: 1rem 4px;
    opacity: .35;
    margin-top:2rem;
}

.sp-right-col .entry-content h2{
    display:flex;
    align-items: center;
    gap:1rem;
}

.sp-right-col .entry-content h2:before{
    content:'•';
}

.sp-right-col .entry-content h2:after{
    flex:auto;
    margin:0;
}

.sp-right-col .entry-content h2:not(:first-child){
    margin-top:2rem;
}

.single-page-footer{
    padding:8rem 0;
}

.single-page-footer .wp-block-buttons{
    margin-top:2rem;
}

@media (max-width:1199px){
    .sp-left-pre-col{
        width: calc( 50% - 400px );
    }
    
    .sp-left-col{
        max-width: 400px;
    }
    
    .sp-right-col{
        width: 50%;
    }
}

@media (max-width:991px){
    .sp-left-pre-col{
        
    }
    
    .sp-left-col{
        
        
    }
    
    .sp-right-col .entry-content{
        padding-right:4rem;
    }
    
    .sp-header-bg{
        height:15rem;
    }
}

@media (max-width:767px){
    .sp-left-pre-col{
        width:100%;
        display:block;
    }
    
    .sp-left-pre-col .sp-header-window{
        padding-right:0;
        border-right: none;
    }
    
    .sp-left-col{
        max-width: 100%;
        padding: 2rem 1rem;
    }
    
    .sp-right-col{
        width:100%;
        padding: 0 1rem 0;
    }
    
    .sp-right-col .sp-header-window{
        display: none;
    }
    
    .sp-right-col .entry-content{
        padding-right:0;
    }
    
    .sp-header-bg{
        height:8rem;
    }
}

/* projects */

.projet-template-default .sp-header-window{
    border:none;
    padding:0;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:20rem;
}

.projet-template-default .sp-header-bg{
    position:absolute;
    height:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-size:420px;
}

.projet-template-default .sp-header-bg:before{
    display:none;
}

.projet-template-default .sp-header-bg:after{
    content: '';
    display: block;
    border-bottom: solid 1px rgba(32, 37, 73,0.25);
    position:absolute;
    background:#fff;
    left:0;
    right:0;
    bottom:0;
    height:.55rem;
}

.sp-header-block{
    position:relative;
    background:#fff;
    padding:.55rem .55rem 0;
    border-radius: 0 0 .75rem .75rem;
    margin-top:4rem;
}

.sp-header-block-inner{
    border: solid 1px rgba(32, 37, 73,0.25);
    border-bottom:none;
    padding:1.5rem 2.5rem 0;
}

.sp-header-block .wp-block-post-title{
    margin:0;
    text-align:center;
}

.sp-header-sub{
    display:flex;
    justify-content: center;
    align-items:center;
    gap:1rem;
    position:relative;
    margin-left:-.5rem;
    margin-right:-.5rem;
    bottom:-1.1rem;
    text-transform:uppercase;
    font-family:'Lexend', sans-serif;
    font-size:1.25rem;
    font-weight:300;
}

.sp-header-sub:before,
.sp-header-sub:after{
    content:'';
    display:block;
    height: 4px;
    background: transparent center left repeat-x;
    background-image: radial-gradient(circle at center, currentColor 1px, transparent 2px);
    background-size: 1rem 4px;
    opacity: .35;
    flex:auto;
}

.project-season:before{
    content:'◐';
    margin-right:.5rem;
}

.project-season[data-is-summer="1"]:before{
    content:'◑';
}

.sp-main{
    padding-top:4rem;
}

.single-page-columns .entry-content .wp-block-image img{
    width:100%;
}

.page-template-cyme-portfolio header:after{
    opacity: 0;
}

@media (max-width:767px){
    .sp-header-block{
        max-width:80%;
        text-align:center;
    }
}

/* PORTFOLIO LIST ////////////////////////////////////////*/

.portfolio{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    gap:0.5rem;
    box-sizing: border-box;
    width:100%;
}

.page-template-cyme-portfolio .portfolio{
    margin-top:.75rem;
}

.page-template-cyme-portfolio .entry-content p{
    opacity:0.75;
}

.project-item{
    display:block;
    width:calc(100% / 5 - (.5rem / 5 * 4));
    position:relative;
    background:var(--wp--preset--color--secondary);
    transition:.2s background;
}

.has-secondary-background-color .project-item,
.has-tertiary-background-color .project-item{
    background:var(--wp--preset--color--base);
}

.project-item.highlight{
    width:calc((100% / 5 - (.5rem / 5 * 4 )) * 2 + .5rem);
}

.project-item:hover{
    background:var(--wp--preset--color--secondary);
}

.has-secondary-background-color .project-item:hover,
.has-tertiary-background-color .project-item:hover{
    background:var(--wp--preset--color--base);
}

.project-item:before{
    content:'';
    display:block;
    padding-top:200%;
}

.project-item.highlight:before{
    padding-top:100%;
}

.project-item .view{
    visibility: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-1rem;
    margin-left:-1rem;
}

.project-item:hover .view{
    visibility: visible;
}

.project-item .view:before{
    content:'';
    display:block;
    border:solid 3px;
    width:1.5rem;
    height:1.5rem;
    border-radius: 2rem 0;
    transform: rotate(45deg);
    
}

.project-item:hover .view:before{
    border-radius: 1.25rem 0;
    transition: .2s;
}

.project-item .view:after{
    content:'';
    position:absolute;
    display:block;
    top:50%;
    left:50%;
    background:currentColor;
    width:.4rem;
    height:.4rem;
    margin-left:-.2rem;
    margin-top:-.2rem;
    border-radius:50%;
}

.project-item .project-img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    overflow: hidden;
}

.project-item .project-img:before{
    content:'';
    display:block;
    padding-top:100%;
}

.project-item:hover .project-img{
    display:none;
}

.project-item.highlight .project-img{
    height:100%;
}

.project-item .project-img img{
    width:100%;
    height:auto;
    display:block;
    margin:0;
    position:absolute;
    top:0;
    left:0;
}

.project-item .project-img .img-bg{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-position:center;
    background-size:contain;
}

.project-item .infos{
    position:absolute;
    top:50%;
    bottom:0;
    left:0;
    right:0;
    padding:1rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.project-item.highlight .infos{
    top:25%;
    left:25%;
    right:25%;
    bottom:25%;
    background:inherit;
}

.project-item:hover .infos{
    display:none;
}

.project-item .title{
    font-family:'Lexend';
    font-weight:400;
    text-transform: uppercase;
    text-align:center;
    font-size:1.25rem;
    line-height:1.25;
    display:flex;
    flex-direction:column;
    justify-content: center;
    flex:auto;
}

.project-item .title:before,
.project-item .title:after{
    content:'•';
    display:block;
}

.project-item .subtitle{
    text-transform: uppercase;
    font-weight:300;
    font-size:1rem;
    text-align:center;
}

.project-item .subtitle span:before{
    content:'• ';
}

.project-item .subtitle span:first-child:before{
    display:none;
}

.page-template-cyme-portfolio nav > ul{
    gap:.5rem;
}

.page-template-cyme-portfolio nav > ul a{
    text-transform: uppercase;
    font-weight:400;
    font-family:'Lexend';
    display:block;
    padding:.25rem .5rem;
    background:var(--wp--preset--color--secondary);
}

.page-template-cyme-portfolio nav > ul a:hover{
    text-decoration: none;
    background:var(--wp--preset--color--tertiary);
}

.page-template-cyme-portfolio nav > ul .current-menu-item a{
    background:var(--wp--preset--color--contrast);
    color:var(--wp--preset--color--base) !important;
}

@media (max-width:991px){
    .project-item{
        width:calc(100% / 4 - (.5rem / 4 * 3));
    }
    .project-item.highlight{
        width:calc((100% / 4 - (.5rem / 4 * 3 )) * 2 + .5rem);
    }
}

@media (max-width:767px){
    .project-item{
        width:calc(100% / 3 - (.5rem / 3 * 2));
    }
    
    .project-item.highlight{
        width:calc((100% / 3 - (.5rem / 3 * 2 )) * 2 + .5rem);
    }
    
    .project-item .title{
        font-size:1.15rem;
    }
    
    .project-item .subtitle{
        font-size:0.9rem;
    }
    
    .projet-template-default h2,
    .membre-template-default h2{
        font-size:1rem;
    }
}

@media (max-width:499px){
    .project-item{
        width:calc(100% / 2 - (.5rem / 2 * 1));
    }
    
    .project-item.highlight{
        width:calc((100% / 2 - (.5rem / 2 * 1 )) * 2 + .5rem);
    }
}

/* TEAM LIST ////////////////////////////////////////*/

.team-head-wrp > p{
    width:33.33%;
    padding:2rem;
    box-sizing:border-box;
}

.team-wrp > .wp-block-separator{
    max-width:83% !important;
}

.team{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    gap:.5rem;
    box-sizing: border-box;
    width:100%;
}

.member-item{
    display:block;
    width:calc(100% / 6 - (.49rem / 6 * 5));
    position:relative;
    background:var(--wp--preset--color--base);
    transition:0s background;
}

.team.only_head{
    justify-content: flex-start;
    width:33.33%;
    flex-wrap: nowrap;
}

.only_head .member-item{
    width:calc(100% / 2 - (.5rem / 2));
}

.member-item:hover{
    background:var(--wp--preset--color--contrast);
    color:var(--wp--preset--color--base);
}

.member-item:before{
    content:'';
    display:block;
    padding-top:200%;
}

.member-item .view{
    visibility: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-1rem;
    margin-left:-1rem;
}

.member-item:hover .view{
    visibility: visible;
}

.member-item .view:before{
    content:'';
    display:block;
    border:solid 3px;
    width:1.5rem;
    height:1.5rem;
    border-radius: 2rem 0;
    transform: rotate(45deg);
    
}

.member-item:hover .view:before{
    border-radius: 1.25rem 0;
    transition: .2s;
}

.member-item .view:after{
    content:'';
    position:absolute;
    display:block;
    top:50%;
    left:50%;
    background:currentColor;
    width:.4rem;
    height:.4rem;
    margin-left:-.2rem;
    margin-top:-.2rem;
    border-radius:50%;
}

.member-item .member-img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    overflow: hidden;
}

.member-item .member-img:before{
    content:'';
    display:block;
    padding-top:133%;
}

.member-item:hover .member-img{
    display:none;
}

.member-item .member-img img{
    width:100%;
    height:auto;
    display:block;
    margin:0;
    position:absolute;
    top:0;
    left:0;
}

.member-item .infos{
    position:absolute;
    top:66%;
    bottom:0;
    left:0;
    right:0;
    padding:0 1rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.member-item:hover .infos{
    display:none;
}

.member-item .title{
    font-family:'Lexend';
    font-weight:400;
    text-transform: uppercase;
    text-align:center;
    font-size:1.25rem;
    line-height:1.25;
    display:flex;
    flex-direction:column;
    justify-content: center;
}

.member-item .title:after{
    content:'•';
    display:block;
}

.member-item .subtitle{
    font-style:italic;
    font-weight:300;
    font-size:1rem;
    text-align:center;
}

.member-item .subtitle span:before{
    content:'• ';
}

.member-item .subtitle span:first-child:before{
    display:none;
}

@media (max-width:1199px){
    .member-item{
        width:calc(100% / 5 - (.5rem / 5 * 4));
    }
    
    .team.only_head,
    .team-head-wrp > p{
        width:37.5%;
    }
    
    .team-wrp > .wp-block-separator{
        max-width:100% !important;
    }
}

@media (max-width:991px){
    .member-item{
        width:calc(100% / 4 - (.49rem / 4 * 3));
    }
    .team-wrp > .wp-block-separator{
        max-width:75% !important;
    }
    
    .team-head-wrp{
        flex-direction:column;
    }
    
    .team.only_head{
        width:50%;
    }
    
    .team-head-wrp > p{
        width:75%;
        padding:1rem 0 0;
    }
}

@media (max-width:767px){
    
    .team:not(.only_head){
        flex-wrap: nowrap;
        overflow-x:auto;
        justify-content: flex-start;
        margin-left:-2rem !important;
        margin-right:-2rem !important;
        padding: 0 2rem;
        width:calc(100% + 4rem);
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .team::-webkit-scrollbar {
        display: none;
    }
    .member-item{
        width:calc(100% / 3 - (.5rem / 3 * 2));
        flex-shrink: 0;
    }
    .team-wrp > .wp-block-separator{
        max-width:100% !important;
    }
    .team.only_head{
        width:66.67%;
    }
    
    .team-head-wrp > p{
        width:100%;
    }
}

@media (max-width:499px){
    .member-item{
        width:calc(100% / 2 - (.5rem / 2 * 1));
    }
    .team.only_head{
        width:100%;
    }
}


/* CONTACT ////////////////*/

@media (min-width:992px){
    
    .wrp-2-cols{
        display:flex;
        max-width:1000px;
        margin:0 auto;
    }

    .wrp-2-cols .col-inner{
        width:50%;
    }
    
}

@media (max-width:767px){
    .wrp-2-cols input,
    .wrp-2-cols textarea{
        max-width:calc(100% - 1rem);
    }
}

.wpcf7-form-control{
    margin:.25rem 0;
}

/* FOOTER /////////////////*/

footer{
    height:6rem;
    padding-top:4rem;
    padding-bottom:8rem;
    background:#fff;
}

footer .wp-block-social-link{
    background:transparent !important;
    color:inherit !important;
}

footer .wp-block-social-link:hover{
    transform:none !important;
    opacity: 0.5;
}

/* NAV ////////////////////*/

.home-header-top{
    z-index:99;
    position:relative;
}

.home-header-top-inner{
    max-width:1200px;
    margin:0 auto;
    height:3rem;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:1rem;
    font-size:.8rem;
}

.home-header-top-inner a{
    text-decoration-thickness: .1rem;
    text-underline-offset: .15rem;
}

.trp-language-switcher {
    width: 120px !important;
  }

.trp-language-switcher > div{
    border:none !important;
}

@media (min-width:1500px){
    .trp-language-switcher{
        position:absolute;
        top:0;
        right:0;
        z-index:999;
        opacity: 0.75;
    }
    
    .trp-language-switcher > div{
        background-color:transparent;
    }
}