/*
Theme Name: CPTS Thur & Doller
Theme URI: http://wigo-media.com
Author: the WigoMedia team
Author URI: http://wigo-media.com/
Description: Thème déveloopé pour la CPTS Thur & Doller.
Version: 2.0
*/

/*# Fonts #*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

/*# Initialize #*/
html{color: #333; font-size: 16px;}
body{font-family: 'Outfit', sans-serif;}

/*# Sizing #*/
h1, .h1{font-size: 3rem; font-weight: bold; letter-spacing: -1px}
h2, .h2{font-size: 2.25rem; font-weight: bold; margin-top: -0.5rem; margin-bottom: 2rem}
h3, .h3{font-size: 1.8rem; font-weight: bold;}
h4, .h4{font-size: 1.5rem; font-weight: 600; letter-spacing: 0px}
h5, .h5{font-size: 1.2rem; font-weight: 600; letter-spacing: 0px}
h6, .h6{font-size: .75rem; text-transform: uppercase; font-weight: bold;}
.lead{font-size: 1.25rem}
main p{line-height: 150%; margin-bottom: 1.5rem}

/*# Colors #*/
.bg-primary{background-color: var(--wp--preset--color--primary)!important; color: #FFF}
.bg-secondary{background-color: var(--wp--preset--color--secondary)!important; color: #FFF}
.bg-light{background-color: var(--wp--preset--color--light)!important; color: #333}
.bg-light-blue{background-color: var(--wp--preset--color--light-blue)!important;}
.bg-dark{background-color: var(--wp--preset--color--dark)!important; color: #FFF}

.text-primary{color: var(--wp--preset--color--primary)!important;}
.text-secondary{color: var(--wp--preset--color--secondary)!important;}
.text-green{color: var(--wp--preset--color--green)!important;}
.text-purple{color: var(--wp--preset--color--purple)!important;}
.text-light{color: var(--wp--preset--color--light)!important;}
.text-light-blue{color: var(--wp--preset--color--light-blue)!important;}
.text-dark{color: var(--wp--preset--color--dark)!important;}
.text-grey{color: var(--wp--preset--color--grey)!important;}

/*# Button #*/
.btn, .wp-element-button, #loginform input[type='submit'], .home .wp-block-latest-posts__read-more{border-radius: 30px; text-decoration: none; transition: 350ms ease; padding: 0.8rem 1.5rem!important; border: 2px solid transparent; position: relative; white-space: nowrap;}
.btn:not(.btn-sm):before, .wp-element-button:before, .home .wp-block-latest-posts__read-more:before{content: '\f061'; transition: 350ms ease; font-family: "Font Awesome 6 Pro"; display: inline-block; margin-right: .65rem; }
.btn:not(.btn-sm):hover, .wp-element-button:hover, .home .wp-block-latest-posts__read-more:hover{padding: 0.8rem calc(1.5rem + 12px) 0.8rem calc(1.5rem - 12px)!important;}
.btn:hover:before, .wp-element-button:hover:before, .home .wp-block-latest-posts__read-more:hover:before{opacity: 0; transform: translateX(1.25rem);}
.home .wp-block-latest-posts__read-more{width: max-content; margin-top: 2rem;}

.btn-sm, #loginform input[type='submit']{padding: 0.55rem 1rem; font-weight: 600;}
.btn-light{background-color: #D1EDEF!important; color: var(--wp--preset--color--green)!important; border-color: transparent!important;}
.btn-light:hover{background-color: var(--wp--preset--color--green)!important; color: white!important;}

.btn-outline-primary, 
.wm-menu .menu-item.btn-menu.connect a{border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); background-color: transparent;}
.btn-outline-primary:hover,
.wm-menu .menu-item.btn-menu.connect a:hover{background: #0483bd; border-color: #0483bd; color: white}

.btn.btn-primary, 
.wp-element-button.has-primary-background-color,
#loginform input[type='submit']{color: white!important; background-color: var(--wp--preset--color--primary)!important; border-color: #007DC6 }
.btn.btn-primary:hover, 
.wp-element-button.has-primary-background-color:hover,
#loginform input[type='submit']:hover{background-color: #007DC6!important;}

.btn.btn-secondary, 
.wp-element-button.has-secondary-background-color{color: white!important; background-color: #FCAF17!important; border-color: var(--wp--preset--color--secondary)}
.btn.btn-secondary:hover, 
.wp-element-button.has-secondary-background-color:hover{background-color: var(--wp--preset--color--secondary)!important;}

.btn.btn-purple, 
.wp-element-button.has-purple-background-color{color: white!important; background-color: var(--wp--preset--color--purple)!important; border-color: #BD3083}
.btn.btn-purple:hover, 
.wp-element-button.has-purple-background-color:hover{background-color: #BD3083!important;}

.btn.btn-green, 
.wp-element-button.has-green-background-color,
.home .wp-block-latest-posts__read-more{color: white!important; background-color: var(--wp--preset--color--green)!important; border-color: #038781}
.btn.btn-green:hover, 
.wp-element-button.has-green-background-color:hover,
.home .wp-block-latest-posts__read-more:hover{background-color: #038781!important;}

/*# Structure #*/

/*# Header #*/
header{background: #FFF; z-index: 1010; transition: 350ms ease; border-bottom-left-radius: 80px; position: fixed; top: 0; width: 100%}
header .container-fluid{max-width: 1800px; margin: auto;}
header .logo{max-width: 225px; display: block;}
.admin-bar header{top: 32px}
.header-fixed header{box-shadow: 0px 4px 44px 0px rgba(0, 109, 104, 0.10);}

header .switcher{border: 2px solid #007DC6; border-radius: 45px; padding: 2px}
header .switcher a{display: inline-block; padding: 0.4rem 0.8rem; color: #007DC6; font-size: 0.9rem; text-decoration: none; font-weight: 600;}
header .switcher a.active{background-color: #007DC6; color: white; border-radius: 45px;}

/*# WM Menu #*/
.wm-menu{list-style: none; display: flex; padding-left: 0; margin: 0}
.wm-menu .menu-item{margin: 0;}
.wm-menu .menu-item a{text-decoration: none; text-align: center; color: inherit; display:inline-block; padding: 1.25rem 1.25rem 2.25rem;}
.wm-menu > .menu-item:hover > a{background-color: rgba(230, 248, 247, 0.60);}
.wm-menu .menu-item-has-children{position: relative;}
.wm-menu .menu-item-has-children:hover > .sub-menu{display: block;}
.wm-menu .sub-menu{list-style: none; padding: .5rem; border-radius: 20px; position: absolute; z-index: 100; background: #FFF; min-width: 350px; max-width: 400px; filter: drop-shadow(0px 10px 30px rgba(0, 109, 104, 0.20)); display: none; animation: .2s ease-in-out slidefadein;}
.wm-menu .sub-menu:before{ content: ""; display: block; width: 1.1rem; height: 1.1rem; position: absolute; top: -0.5rem; background-color: #FFF; left: 3rem; border-radius: 3px; transform: rotate(45deg); z-index: 100;}
.wm-menu .sub-menu .menu-item{position: relative; z-index: 101; border-radius: 12px;}
.wm-menu .sub-menu .menu-item:hover{background-color: #F6F6F6}
.wm-menu .sub-menu .menu-item a{display: block; text-align: left; width: 100%; padding: 1rem 1.25rem; color: #006D68; font-weight: 600}
.wm-menu .menu-item-description{font-size: 0.825rem; font-weight: 400; color: #00A4AF; line-height: 150%; display: block;}

.wm-menu .menu-item.btn-menu a{padding: .65rem 1rem; transition: 350ms ease; white-space: nowrap; border: 2px solid transparent; margin-left: 0.9rem; margin-top: .55rem; font-weight: 600; border-radius: 40px; background-color: var(--wp--preset--color--primary); color: white}
.wm-menu .menu-item.btn-menu a:hover{background: #0483bd}

/*# Top front page #*/
.top-front-page{position: relative; padding-top: 96px;}
.top-front-page .container-fluid{position: absolute; top: 0; height: 100%}
.top-front-page .container-fluid .solid-primary{position: relative; z-index: 2}
.top-front-page .container-fluid .solid-primary:before{content: ""; display: block; background-color: var(--wp--preset--color--primary); height: 100%; width: calc(100% + 125px); border-bottom-left-radius: 275px; border-top-right-radius: 275px}
.top-front-page .content-wrapper{position: relative; padding: 5rem 1rem 9rem; z-index: 2}
.top-front-page .top-illustration{position: absolute; width: calc(((1340px / 12) * 10) + ((100vw - 1340px) / 2)); top: 0; right: 0; z-index: 0; height: 100%}
.top-front-page .top-illustration:after{content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: linear-gradient(100deg, #17286A 18.96%, rgba(23, 40, 106, 0) 75%);}
.top-front-page .top-swiper-gallery{width: 100%; height: 100%}
.top-front-page .top-swiper-gallery .swiper-slide img,
.top-front-page .img-illustration,
.top-front-page video{height: 100%; width: 100%; object-fit: cover}

.doctor-search-wrapper{position: relative; z-index: 2; margin-top: -6rem}
.doctor-search-wrapper form input{height: 54px}

/*## Top page ##*/
.top-page{padding: 110px 0 2.5rem; position: relative; overflow: hidden; border-bottom-left-radius: 200px;}
.top-page i{position: absolute; left: 0; font-size: 20rem; transform: translateX(-75%) rotate(2deg); opacity: 0.05; pointer-events: none;}
.top-page p{margin-bottom: 0}

/*## Top page with post thumbnail ##*/
.top-page.with-post-thumbnail{background-color: var(--wp--preset--color--primary);}
.top-page.with-post-thumbnail:before{content: ""; background: linear-gradient(102deg, var(--wp--preset--color--primary) 6%, rgba(1, 139, 210, 0.00) 100%); position: absolute; z-index: 1; right: 0; top: 0; height: 100%; width: 54%;}
.top-page.with-post-thumbnail .illustration{position: absolute; right: 0; top: 0; height: 100%; width: 54%; object-fit: cover;}
.top-page.with-post-thumbnail .container{position: relative; z-index: 2}

/*## Breadcrumb ##*/
#breadcrumbs{opacity: 0.75; font-size: 0.9rem}
#breadcrumbs a{color: var(--wp--preset--color--dark);}
.with-post-thumbnail #breadcrumbs a{color: white}

/* WC account */
.woocommerce .woocommerce-MyAccount-navigation{float: left; width: 30%;}
.woocommerce .woocommerce-MyAccount-navigation ul{list-style: none; padding: 0; margin: 0; background-color: var(--wp--preset--color--light); border-radius: 20px;}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link{display: flex !important; padding: .25rem 1rem; width: 100%; display: block;}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link:first-child{padding-top: 1rem;}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link:last-child{padding-bottom: 1rem;}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link a{padding: .75rem 1rem; text-decoration: none; color: black; width: 100%; display: block; transition: 350ms ease; border-radius: 10px;}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link a:hover{background-color: rgba(172, 172, 172, 0.15);}
.woocommerce .woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link.is-active a{background-color: var(--wp--preset--color--primary); color: white;}

.woocommerce .woocommerce-MyAccount-content{float: right; width: 68%;}
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address{width: 100%;}
.woocommerce .woocommerce-MyAccount-content header,
.woocommerce .woocommerce-order-details header{display: none;}

/*# Gutemberg style image : Forme 1 #*/
.is-style-blob-1{text-align: center; position: relative; padding-bottom: 10%}
.is-style-blob-1 img{width: 70%;}
.is-style-blob-1:before{content:""; width:100%; height:100%; position:absolute; top:5%; left:-5%; background-repeat: no-repeat; background-position: bottom; background-image: url(img/blob-1.svg); background-size: contain; z-index: -1}

/*# Gutemberg style cover : Pleine largeur #*/
.wp-block-cover.is-style-full-width{width: calc(100vw - 8px); position: relative; margin-left: -50vw; left: 50%;}
.wp-block-cover.is-style-full-width img{width: 58%!important; height: 95%!important; object-position: top left!important; left: auto!important; right: 0!important}
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: 1224px!important}

/*# Gutemberg style paragraph : Surtitre #*/
.is-style-surtitle:before{content: ""; position: absolute; top: 3rem; left: -1.5rem; transform: translateX(-100%); width: 8px; height: 55%; background-color: #CCC;}
.is-style-surtitle.has-primary-color:before{background-color: var(--wp--preset--color--primary);}
.is-style-surtitle.has-secondary-color:before{background-color: var(--wp--preset--color--secondary);}
.is-style-surtitle.has-green-color:before{background-color: var(--wp--preset--color--green);}
.is-style-surtitle.has-purple-color:before{background-color: var(--wp--preset--color--purple);}
.is-style-surtitle.has-light-color:before{background-color: var(--wp--preset--color--light);}
.is-style-surtitle.has-dark-color:before{background-color: var(--wp--preset--color--dark);}
.is-style-surtitle.has-grey-color:before{background-color: var(--wp--preset--color--grey);}

/*# Gutemberg style Last Post Block #*/
.wp-block-latest-posts .wp-block-latest-posts__post-title{font-size: 1.5rem; font-weight: 600; letter-spacing: 0px; line-height: 100%; text-decoration: none; color: var(--wp--preset--color--primary)!important;}
.wp-block-latest-posts .wp-block-latest-posts__post-date{color: var(--wp--preset--color--grey)!important;}
.wp-block-latest-posts .wp-block-latest-posts__read-more{display: block; padding-top: 1rem;}
.wp-block-latest-posts.is-grid li{padding: 0 1.25em 1.25em 0}
.wp-block-latest-posts .wp-post-image{border-radius: 1rem; margin-bottom: .5rem}

/*# Adhérent #*/
#adherent{
  --wp--preset--color--primary: #009999;
}
#adherent header .switcher{border-color: var(--wp--preset--color--primary);}
#adherent header .switcher a{color: var(--wp--preset--color--primary);}
#adherent header .switcher a.active{color: white; background: var(--wp--preset--color--primary);}
#adherent .top-page{background-color: var(--wp--preset--color--light)!important}
#adherent .top-page.with-post-thumbnail{background-color: var(--wp--preset--color--primary)!important}

#adherent .btn-outline-primary:hover,
#adherent .wm-menu .menu-item.btn-menu.connect a:hover{background: #038781; border-color: #038781; color: white}

#adherent .btn.btn-primary, 
#adherent .wp-element-button.has-primary-background-color,
#adherent #loginform input[type='submit']{border-color: #038781 }
#adherent .btn.btn-primary:hover, 
#adherent .wp-element-button.has-primary-background-color:hover,
#adherent #loginform input[type='submit']:hover{background-color: #038781!important;}

#loginform label{display: block; margin-bottom: 8px}
#loginform input:not([type='checkbox'], [type='radio'], [type='submit']){padding: 0 12px; width: 100%; outline: none!important; height: 45px; box-shadow: rgba(18, 25, 97, 0.08) 0px 1px 4px 0px; border-radius: 45px; border: 1px solid rgb(104, 110, 119);}
#loginform input:not([type='checkbox'], [type='radio'], [type='submit']):focus{border-color: var(--wp--preset--color--primary); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 149, 218, 0.3) 0px 0px 0px 3px}
#loginform .login-remember{margin-bottom: 0;}
#loginform .login-submit{text-align: right;}

/*# Home lastest post #*/
.home-last-article .wp-block-column:last-child .wp-block-latest-posts__post-title{font-size: 2.25rem; font-weight: bold; margin-top: -0.5rem; margin-bottom: 2rem; color: black!important;}
.home-last-article .wp-block-column:first-child ul{margin-bottom: 0!important;}
.home-last-article .wp-block-column:first-child ul .wp-block-latest-posts__post-title{display: none!important;}

/*# Footer #*/
footer{box-shadow: 0px 4px 44px 0px rgba(0, 109, 104, 0.10);}
footer a{color: var(--wp--preset--color--dark)}
footer .footer-top nav ul{columns: 2}
footer .footer-top nav ul li{margin-bottom: .5rem}
footer .footer-top nav ul li a{color: var(--wp--preset--color--dark); text-decoration: none;}
footer .footer-top nav ul li a:hover{text-decoration: underline;}
footer .footer-top .partners img{max-height: 45px}

footer .footer-bottom .madeby{color: var(--wp--preset--color--green)}
footer .footer-bottom .madeby img{height: 1em}
footer .footer-bottom .menu a{margin: 0 0.825rem 0 0; color: var(--wp--preset--color--green);}

/*# Animations #*/
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slidein {
  from { transform: translateY(-.5rem);}
  to   { transform: translateY(0);}
}
@keyframes slidefadein {
  from { transform: translateY(-.5rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/*# Responsive #*/
@media only screen and (max-width: 1470px){
  .wm-menu .menu-item a{font-size: .95rem; padding: 1.25rem 1rem 2.25rem}
}

@media only screen and (max-width: 1399px){
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: 1044px!important}
}

@media only screen and (max-width: 1370px){
  .wm-menu .menu-item a{font-size: .9rem; padding: 1.25rem .8rem 2.25rem}
}

@media only screen and (max-width: 1290px){
  .wm-menu .menu-item a{font-size: .8rem; padding: 1.25rem .75rem 2.25rem}
}

@media only screen and (max-width: 1199px){
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: 936px!important}
}

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

  /*# Sizing #*/
  h1, .h1{font-size: 2.5rem;}
  h2, .h2{font-size: 2rem;}
  h3, .h3{font-size: 1.8rem;}
  h4, .h4{font-size: 1.25rem;}
  h5, .h5{font-size: 1rem;}
  .lead{font-size: 1.10rem}

  /*# Header #*/
  header{border-bottom-left-radius: 50px}

  header .switcher a.active{display: none;}

  /*# WM Menu #*/
  .menu-wrapper{position: absolute; transform: translateX(-100%); justify-content: center; transition: 350ms ease; top: 75px; z-index: -1; padding-top: 0.5rem; left: 0; background-color: white; width: 100%}
  .menu-wrapper:before{content: ""; position: absolute; top: 2px; left: 0; transform: translateY(-100%); width: 100%; height: 75px; background-color: white}
  .menu-wrapper .wm-menu{flex-direction: column; margin-bottom: 2rem; overflow: auto; height: calc(100vh - 75px);}
  .menu-active .menu-wrapper{transform: translateX(0);}

  .wm-menu{flex-direction: column;}
  .wm-menu li{font-size: 1rem; width: 100%; padding: 0rem;}
  .wm-menu > li > a{padding: 1rem!important; font-size: 1rem!important; display: flex!important; justify-content: space-between; align-items: center; border-bottom: 0; border-left: 5px solid transparent; width: 100%; text-align: left;}
  .wm-menu > li:hover > a{border-color: transparent;}
  .wm-menu > li .sub-menu{display: block; min-width: 100%; opacity: 1; border-radius: 0; padding: 0; transition: 350ms ease; overflow: hidden; pointer-events: initial; position: relative; bottom: initial; top: 0; transform: translateY(0); width: 100%; max-width: none; box-shadow: none;}
  .wm-menu > li .sub-menu li:first-child{margin-top: 15px}
  .wm-menu > li > a > i{transition: 250ms ease; color: var(--wp--preset--color--primary);}
  .wm-menu > li.sub-active > a > i{transform: rotate(180deg);}
  .wm-menu .sub-menu li a{padding: 0.5rem 1.25rem!important; font-size: 0.9rem!important}
  
  .wm-menu .menu-item.btn-menu{padding: 0 1.25rem!important}
  .wm-menu .menu-item.btn-menu a{margin-left: 0; width: 100%; justify-content: center;}

  .menu-mobile-switcher{position: relative; z-index: 1001; display: flex; height: 100%; justify-content: flex-end; align-items: center;}
  .menu-mobile-switcher .close{position: absolute; transition: 350ms ease; top: 50%; right: 4px; transform: translateY(-50%) scale(0) rotate(20deg);}
  .menu-mobile-switcher .open{transition: 350ms ease;}
  .menu-active .menu-mobile-switcher .close{transform: translateY(-50%) scale(1) rotate(0deg);}
  .menu-active .menu-mobile-switcher .open{transform: scale(0) rotate(-20deg);}

  /*# Top front page #*/
  .top-front-page{padding-top: 87px}
  .top-front-page .content-wrapper{padding: 5rem 1rem 8rem}
	.top-front-page .container-fluid .solid-primary:before{width: 100%; border-bottom-left-radius: 125px; border-top-right-radius: 0px;}

  /*## Top page ##*/
  .top-page{padding: 5rem 1rem .5rem; border-bottom-left-radius: 75px;}

  /*# Gutemberg style cover : Pleine largeur #*/
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: 696px!important}

  /*## Footer ##*/
  footer .footer-bottom .menu{flex-wrap: wrap; justify-content: center}

}

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

  /*# Header #*/
  .admin-bar header{top: 46px}

  /*# Top front page #*/
  .top-front-page .content-wrapper{padding: 3rem 1rem 8rem}

  /*# Gutemberg style cover : Pleine largeur #*/
  .wp-block-cover.is-style-full-width{padding-bottom: 250px; width: 100vw!important}
  .wp-block-cover.is-style-full-width img{width: 100%!important; height: 310px!important; top: auto!important; bottom: 0; object-position: top center!important; left: auto!important; right: 0!important}
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: 516px!important}

}

@media only screen and (max-width: 575px){
	
}

/*# Bootstrap #*/
.cursor-p{cursor: pointer;}
.rounded-lg{border-radius: 20px}

/*# Gutemberg #*/
.wp-block-image img{border-radius: 1rem}
.wp-block-column{position: relative;}