/*
Theme Name: Clos des thermes
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: HARVEST
Author URI: https://wordpress.org
Description:
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Template: twentytwentyfour
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
*/



/* -------------------------------------------------------------------------- */
/* 0) Imports & resets                                                        */
/* -------------------------------------------------------------------------- */


:where(.wp-site-blocks *:focus){outline-width:0px !important;outline-style: none !important;}



/* Le navigateur garde le scroll vertical natif, on gère l'horizontal */
.slider-viewport{
  touch-action: pan-y;
  overscroll-behavior: contain;           /* évite le rebond iOS/Android dans la section pin */
  -webkit-overflow-scrolling: touch;
}

html,
body {
  min-height: 100vh;
  width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior: none;
 
}

a,
a:focus,
a:active {
  outline: 0 !important;
}

.wp-block-navigation a:where(:not(.wp-element-button)):focus,
.wp-block-post-title a:where(:not(.wp-element-button)):focus,
.wp-block-site-title a:where(:not(.wp-element-button)):focus,
a:where(:not(.wp-element-button)):focus {
  text-decoration: none;
}

.sliderProjet .wp-block-column.contenu {
  position: relative;
  z-index: 2;
}
.sliderProjet .wp-block-column.contenu .slider-controls {
  pointer-events: auto;
}

a:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* 1) États init / préchargement                                              */
/* -------------------------------------------------------------------------- */

/* la loading ne doit JAMAIS intercepter les clics une fois cachée */
.loading[hidden] { display: none !important; }      /* kill total */
.loading.is-gone  { display: none !important; }     /* classe de secours */

/* quand l’overlay est à 0 d’opacité, on n’intercepte plus les clics */
.loading:not([data-active="1"]) { pointer-events: none !important; }


.smooth-content { visibility: hidden; }

.loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(26, 26, 26);
  overflow: hidden;
  z-index: 999999;
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity .3s ease; /* sécurité si JS en panne */
}



/* -------------------------------------------------------------------------- */
/* 2) Header / navigation                                                     */
/* -------------------------------------------------------------------------- */


/* Anti-flicker logo pendant l'init */

html.is-prep header .heading .wp-block-site-logo,
html.is-prep header .heading .wp-block-site-logo img {
  transition: none !important;
}

/* Un petit coup de pouce au moteur de rendu (WebKit) */
header .heading .wp-block-site-logo {
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background-color: transparent;
  transition: 0.3s all ease-in-out;
}

/* avant : transition: 0.4s all ...  ->  provoque flicker sur mask/height */
header .wp-block-site-logo {
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}


/* On s'assure que le logo reste bien au-dessus */
.wp-block-site-logo img {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
}

.background-header{
  transition: ease-in-out 0.3s;
}
header.main-tool-bar--scrolled .background-header, 
header.main-tool-bar--scrolled .background-header .groupe-menu::after {
	background-color: var(--wp--preset--color--base) !important ;
}

header .wp-block-navigation-item:not(.resa-top-menu) {
    padding-top: 30px !important;
}
header .resa-top-menu a.wp-block-navigation-item__content {
  display: inline-flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base);
  padding: 30px 20px 15px 20px !important;
  margin-bottom: 10px !important;
  border-radius: 0 0 20px 20px !important;
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}

header .resa-top-menu a.wp-block-navigation-item__content:hover{
  background-color: var(--wp--preset--color--tertiary) !important;
}
.current-menu-item a{
  color: var(--wp--preset--color--tertiary) !important;
}

header .resa-top-menu a.wp-block-navigation-item__content::after{
  content: "";
  display: inline-block;
  background-image: url('/wp-content/uploads/2026/05/picto_calendrier.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px; 
  height: 30px;
  position: static !important;
  transform: none !important;
}

header .resa-top-menu{
  color: var(--wp--preset--color--base);
}

.wp-block-navigation-item__label{
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.wp-block-navigation-item__label:hover{
  color: var(--wp--preset--color--tertiary) !important;
}
@media (min-width: 1070px){
  .nav-mobile{
    display: none !important;
  }
}
@media (max-width: 1070px){
  .nav-ordi{
    display: none !important;
  }
  .background-header{
    display: flex !important;
    align-items: center !important;
  }
  .nav-mobile .resa-top-menu a.wp-block-navigation-item__content{
    padding: 15px 20px !important;
    margin-bottom: none !important;
    border-radius: 100px !important;
    margin-top: 30px !important;
  }


}

@media (max-width:599px){
  header .resa-top-menu a.wp-block-navigation-item__content {
  padding: 15px 20px !important;
  margin-bottom: 0 !important;
  border-radius: 100px !important;
  color: var(--wp--preset--color--base) !important;
  }
}



/* footer */
@media (max-width: 1024px) {

  .wp-block-group.flex-footer {
    flex-direction: column-reverse !important;
    display: flex; 
  }
  .wp-block-group.flex-footer > .wp-block-group {
    width: 100%;
    align-items: center; 
    text-align: center;
  }
  
  ul.wp-block-social-links {
    justify-content: center;
  }

}





/* -------------------------------------------------------------------------- */
/* 3) Hero / Intro                                                            */
/* -------------------------------------------------------------------------- */

section.intro { position: relative; }
section.intro .title { position: relative; z-index: 2; }
section.intro .two { position: relative; z-index: 3; }
section.intro .lines { position: relative; z-index: 1; }
section.two { margin-top: -50vh; }



/* -------------------------------------------------------------------------- */
/* 4) Éléments graphiques (cercles, flair, gradients)                         */
/* -------------------------------------------------------------------------- */


.fond-flou{
  backdrop-filter: blur(17px);
}




@media (max-width:1000px){

}

.picto-logo{
    position: relative !important;
    z-index: 2 !important; 
}
.banner-photos{
  position: relative !important;
  z-index: 1; 
}


.wp-block-group.has-primary-background-color.is-layout-constrained {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}


.wp-block-group.picto-logo {
    overflow: visible !important;
}


.wp-block-group.banner-photos {
    position: relative !important;
    z-index: 1 !important;
}


/* -------------------------------------------------------------------------- */
/* 5) Blocs divers                                                            */
/* -------------------------------------------------------------------------- */



.banner-white{
  width: 40% !important;
}

.banner-white-2{
  width: 60% !important;
}

.photos figure{
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}

/* BTN HOVER*/

.resa-btn-blanc a, .resa-btn-bleu span, .resa-btn-bleu a{
  display: inline-flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}


/*blanc*/


.resa-btn-blanc a:hover, .resa-btn-bleu span:hover{
  background-color: var(--wp--preset--color--tertiary) !important;
  color: var(--wp--preset--color--base) !important;
}
 .resa-btn-blanc a:hover::after{
  background-image: url('/wp-content/uploads/2026/05/picto_calendrier.svg') !important;
}
 
.resa-btn-blanc a::after {
  content: "";
  display: inline-block;
  background-image: url('/wp-content/uploads/2026/05/picto_calendrier-bleu.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px; 
  height: 30px;
  position: static !important;
  transform: none !important;
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}


/*bleu*/

.resa-btn-bleu span::after, .resa-btn-bleu a::after {
  content: "";
  display: inline-block;
  background-image: url('/wp-content/uploads/2026/05/picto_calendrier.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px; 
  height: 30px;
  position: static !important;
  transform: none !important;
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}


.wp-block-button a{
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.wp-block-button a:hover{
  background-color: var(--wp--preset--color--tertiary) !important;
  color: var(--wp--preset--color--base) !important;
}
p a{
  transition: all 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
p a:hover{
  color: var(--wp--preset--color--tertiary) !important;
}


/* banner top */
.banner-top .wp-block-cover__image-background{
  height: 101% !important;
}

@media (max-width:700px){
  .banner-top{
    min-height: 95vh !important;
    padding: 10px !important;
  }

  .banner-top .wp-block-cover__inner-container{
    padding: 0 !important;
  }

}



@media (max-width:1000px){
  /* carte home */
  .carte-home{
  margin: 0 !important;
  }
  /* titre publication */
  .title-50 h2{
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------- */
/* 6) Formulaires (Gravity Forms)                                            */
/* -------------------------------------------------------------------------- */


.gform_fields{
  row-gap: 10px !important;
}
 
.textarea, .ginput_container input{
  border: none !important;
  box-shadow: none !important;
}

.gform_button {
  min-height: 0px !important;
  padding: 10px 20px !important;
  border-radius: 100px !important;
}
.gform_button:hover{
  background-color: var(--wp--preset--color--tertiary) !important;
  color: var(--wp--preset--color--base) !important;
}


/* -------------------------------------------------------------------------- */
/* 7) Éléments décoratifs positionnés                                       */
/* -------------------------------------------------------------------------- */

.picto-logo::after {
    z-index: 20; 
    pointer-events: none; 
}

.picto-logo:after {
  content: "";
  position: absolute;
  width: 170px !important;
  height: 170px !important;
  bottom: -20px;
  left: 20%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/wp-content/uploads/2026/05/picto-logo.svg);
   z-index: 3; 
}

/* -------------------------------------------------------------------------- */
/* 8) Utilitaires perf                                                       */
/* -------------------------------------------------------------------------- */

/* Aides GPU / reveal */
[data-reveal],
[data-parallax],
[data-item] {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* -------------------------------------------------------------------------- */
/* 9) Media queries                                                          */
/* -------------------------------------------------------------------------- */



/* Passage à 2 colonnes sur les tablettes (ex: sous 1024px) */
@media (max-width: 1024px) {
  .banner-white{
  width: 50% !important;
  }

  .picto-logo:after {
  content: "";
  position: absolute;
  width: 100px !important;
  height: 100px !important;
  left: 50%;; 
  }
  .picto-logo{
    border-top-right-radius: 200px !important;
  }
  .responsive-radius img{
    border-top-right-radius: 100px !important;
    border-bottom-left-radius: 100px !important;
  }
}

@media (max-width: 768px) {
    .banner-white{
  width: 100% !important;
  }
  .banner-white-2 {
  width: 100% !important;
  }
}