#slider {
    display: flex;
    justify-content: flex-end;
    background: transparent;
    position: relative;
    top: -65px;
}



#blocgauche{
position:relative;
    padding-top: 40px;
}

.mosaique-bleu img.vagues {
left:25%;
}


/* Conteneur texte centré */
.texte-container { 
	max-width: 1400px;
    margin: 80px auto;
    text-align: center;
    width: auto;
	padding: 0 16px;
 }
.texte-container p { font-family: "futura-pt", sans-serif; font-size: 16px; line-height: 1.65; }

/* Paires texte + image */
.texte-image-container { 
  display: flex; align-items: center; justify-content: center; gap: 40px;
  max-width: 1440px; margin: 60px auto; padding: 20px;
}
.texte-image-container .texte-container { flex: 1 1 50%; text-align: left; margin: 0; }

.texte-image-container img {  height: auto; display: block; border-radius: 8px; max-width: 660px; }

//***********************************************************
 *  SOUS-MENU "ESPACES AQUATIQUES" - CAPA
 ***********************************************************/

/* ====== Structure du sous-menu ====== */
.aqua-subnav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0 30px;
  position: relative;
  z-index: 2;
}

.aqua-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
      justify-content: center;
}

.aqua-tab {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  letter-spacing: .4px;
  transition: all .25s ease;
}

.aqua-tab:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

.aqua-tab.is-active {
  background: white;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ====== Panneaux de contenu ====== */
#aqua-panels {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.aqua-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s ease;
  padding: 40px 20px;
}

.aqua-panel.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Pour les animations fluides au scroll */
@media (prefers-reduced-motion: no-preference) {
  .aqua-panel.is-visible {
    animation: fadePanel .5s ease-out both;
  }
}

@keyframes fadePanel {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== Style interne des titres ====== */
.aqua-panel .titre-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.aqua-panel .titre-container h2 {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-size: 2.2em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}



/* ====== Contenu textuel ====== */
.aqua-panel p {
  max-width: 900px;
  margin: 0 auto 20px;
  text-align: center;
  font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: #222;
}

/* ====== Accessibilité et confort ====== */
.aqua-panel {
  scroll-margin-top: 90px; /* ajuste selon la hauteur de ton header */
}

:target, [tabindex="-1"] {
  scroll-margin-top: 90px;
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .aqua-tabs {
    justify-content: center;
    gap: 8px;
  }

  .aqua-tab {
    padding: 8px 16px;
    font-size: 14px;
  }

  .aqua-panel {
    padding: 20px 10px;
  }

  .aqua-panel .titre-container h2 {
    font-size: 1.6em;
  }
}


/********** TABS génériques **********/
.tabs-scope { width: 100%; margin: 0px auto;  }

.tabs-subnav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0 24px;
}

.tabs-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.tabs-tab {
 border: 0px solid #000;
    background: #d1c6ba;
    color: #000;
    padding: 10px 22px;
    border-radius: 0;
    font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    letter-spacing: .4px;
    transition: all .25s ease;
    clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% calc(100% - 10px), /* coin coup� */ calc(100% - 10px) 100%, /* bas, un peu � gauche */ 0 100% /* bas gauche */);
}

.tabs-tab:hover { background: #000; color: #fff; transform: translateY(-2px); }
.tabs-tab.is-active, .tabs-tab:hover { background: #63c3d1 !important; color: black; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

.tabs-panels { position: relative; }

.tabs-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s ease;
  padding: 10px 0;
}

.tabs-panel.is-visible { display: block; opacity: 1; transform: translateY(0); outline: none;}

/* Accessibilité & header sticky */
.tabs-panel { scroll-margin-top: 90px; }
:target, [tabindex="-1"] { scroll-margin-top: 90px; }

/* Responsive */
@media (max-width: 768px) {
  .tabs-tab { padding: 8px 16px; font-size: 14px; }
  .tabs-panel { padding: 6px 0; }
}



.conteneur-promo {
    max-width: 1400px;
    margin: 40px auto;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);
}

.conteneur-promo .par3 {
    border: 1px solid whitesmoke;
    width: 33.3%;
}

.conteneur-promo img {
    max-width: 100px !important;
}

.conteneur-promo h3{
    color: black;
    text-align: center;
    padding: 25px;
    border-radius: 20px;
    background: white;
    font-size: 2em;
    max-width: 550px;
    margin: 10px auto;
	font-family: "itc-avant-garde-gothic-pro";
	box-shadow: none !important;
    border-bottom: 1px solid whitesmoke;
    font-weight: 600;
}

.conteneur-promo p{
padding: 25px;
    border-radius: 20px;
    margin: 10px;
    font-size: 16px;
    color: black;
}




.widgets-container{
max-width:1400px;
margin:60px auto;
}

.tabs-panels .texte-container h3{
color: black;
    text-align: center;
    padding: 25px;
    border-radius: 20px;
    background: white;
    font-size: 2em;
    max-width: 550px;
    margin: 10px auto;
	font-family: "itc-avant-garde-gothic-pro";
	box-shadow: none !important;
    font-weight: 600;
}



.thr-categories>div>ul>li .thr-category .thr-category-name, .thr-campsites>div>ul>li .thr-category .thr-category-name{
color:black !important;
font-family: "itc-avant-garde-gothic-pro", sans-serif !important;
font-weight:600 !important;
}

.thr .thr-category-description>p {
    font-family: "futura-pt";
    color: black;
    text-align: left;
}

.thr .thr-category-description ul.thr-category-main-criterion>li {
	 font-family: "futura-pt";
font-weight:600;
}

.thr-categories>div>ul>li .thr-category .thr-box-footer .btn, .thr-campsites>div>ul>li .thr-category .thr-box-footer .btn{
display:none;
}

.thr-simpleblock .thr-simpleblock-engine .thr-simpleblock-engine-row.thr-simpleblock-engine-row-simple .thr-simpleblock-engine-inputs>*>span, 
.thr-simpleblock .thr-simpleblock-simple .thr-simpleblock-results .thr-simpleblock-row .thr-simpleblock-category .thr-simpleblock-category-name {
color:black !important;
}

.thr-categories>div>ul>li .thr-category .thr-box-picture>span::before{
    background-color: #63c3d1 !important;
}

.slick-prev{
left:0;
}

.thr-overlay .thr-overlay-container .container-fluid .thr-overlay-content .thr-overlay-title-container .thr-overlay-title,
.thr-overlay .thr-overlay-container .container-fluid .thr-overlay-content .thr-category-description-simpleblock-title {
color:black !important;
font-family:"itc-avant-garde-gothic-pro" !important;
font-weight:600;
}

.thr .btn-primary {
    background-color: #d1c6ba !important;
}

.thr-categories-overlay .thr-category-description .thr-category-description-container .thr-category-description-criterion-container .thr-category-description-criterion{
color:black !important;
font-family:"itc-avant-garde-gothic-pro";
font-weight:600;
}

.thr-overlay .thr-overlay-container .container-fluid {
padding-top:20px;
}

.thr-overlay .thr-overlay-container .thr-overlay-close {
    position: absolute !important;
	right:20px;
}


/* Responsive */
@media (max-width: 920px){
  .texte-image-container, .texte-image-container.miroir { flex-direction: column; }
  .texte-image-container .texte-container { text-align: center; }
#blocgauche {padding-top: 20px;}
}

/* ====== Parallax (image et vidéo) ====== */
.parallax-container {
  position: relative;
  width: 100%;
  min-height: 65vh;         /* ajuste la hauteur souhaitée */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-position: bottom;
  background-size: cover;
  background-attachment: fixed; /* effet parallax simple pour les images */
}

.parallax-container.has-video {
  background: #000;         /* fond de sécurité sous la vidéo */
}

.parallax-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* plein écran, sans distorsion */
  z-index: 0;
}

/* Overlay léger pour lisibilité du texte */
.parallax-overlay {
  position: absolute;
  inset: 0;
  /*background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 100%);*/
  z-index: 1;
}

.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  max-width: 1100px;
}

.parallax-content h1 {
  margin: 0 0 10px;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-size: clamp(28px, 6vw, 56px);
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 0 20px black;
}

.parallax-content h1 span {
  color: white; /* accent CAPA */
font-weight:600;
display:block;
}

.parallax-content p {
  margin: 0 auto;
  font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.5;
  text-shadow: 0 0 20px black;
max-width: 600px;
}

/* Confort si header sticky : évite que l’ancre glisse sous le header */
.parallax-container { scroll-margin-top: 90px; }

/* iOS fix : désactive parallax CSS sur iOS pour éviter “jumps” */
@supports (-webkit-touch-callout: none) {
  .parallax-container { background-attachment: scroll; }
}

/* Responsif */
@media (max-width: 768px) {
  .parallax-content { padding: 30px 16px; }
}




/* adjust content*/

#blocgauche .presentation-container, #blocgauche .hebergement-container{
	    padding: 0;
} 

#blocgauche .camping-bordure{
margin-bottom:100px;
max-width: 1360px;
}

#blocgauche .hebergement-container{
    margin-top: 100px;
    padding-top: 40px;
	padding-left: 16px;
    padding-right: 16px;
}

.hebergement-container .container-titre{
margin-bottom: 40px;
}

.herbergement-mosaique{
background:transparent;
}


.hebergement-container{
	background:#d1c6ba;
}

.hebergement-container .mosaique-text p {
    margin-bottom: 60px;
}


.hebergement-container .mosaique-text h3 strong{
background: transparent;
    padding: 0;
}



/* Caroussels */ 

/*caroussel aqua*/

.carrousel-container{
    width: 70%;
margin-top:2px;
}

#aqua .owl-item img {
    display: block;
    width: 100%;
    height: 498px;
    object-fit: cover;
}

.mosaique-bleu {
    height: 500px;
}

.mosaique-bleu .bloc-bleu {
    width: 30%;
}



/*caroussel portfolio*/
:root{
  --pf-ratio: 3/2;                 /* ratio uniforme des vignettes (ex: 16/10, 4/3, 1/1) */
  --pf-radius: 14px;               /* arrondi du cadre image */
  --pf-border: #E6E2DC;            /* fin liseré autour de l’image (beige CAPA) */
  --pf-hover-border: #C9BBAD;      /* liseré au survol */
  --pf-title: #1F1F1F;             /* titre */
  --pf-muted: #666;                /* descriptif */
}

/* carte SPIP (on s’appuie sur .spip_documents qui existe déjà) */
#carouselportf .spip_documents{
  background: transparent;         /* pas de fond, on valorise uniquement l’image */
  box-shadow: none;
  border: 0;
  overflow: visible;                /* on laisse respirer */
  cursor: pointer;
}

/* le cadre IMAGE : on stylise le <a> qui entoure l’<img> */
#carouselportf .spip_documents > a{
  display: block;
  position: relative;
  aspect-ratio: var(--pf-ratio);   /* >>> uniformise TOUTES les vignettes */
  overflow: hidden;
  border-radius: var(--pf-radius);
  border: 1px solid var(--pf-border);     /* fin bord autour de l’image */
  background: #f6f6f6;                    /* fond discret pendant le chargement */
  transition: border-color .25s ease, transform .35s ease;
  will-change: transform;
}

/* image qui remplit parfaitement le cadre */
#carouselportf .spip_documents > a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);         /* évite le “snap” lors du hover */
  transition: transform .45s ease;
}

/* micro-interaction premium au survol */
#carouselportf .spip_documents:hover > a{
  border-color: var(--pf-hover-border);
  transform: translateY(-2px);
}
#carouselportf .spip_documents:hover > a img{
  transform: scale(1.035);
}

/* TITRE + DESCRIPTIF (optionnels) — typographie sobre et hauteur contrôlée */
#carouselportf .spip_doc_titre,
#carouselportf .spip_doc_descriptif{
  margin: 10px 2px 0;
  padding: 6px 2px 0;
  border-top: 1px solid transparent;  /* ligne transparente pour l’alignement optique */
  font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#carouselportf .spip_doc_titre{
  color: var(--pf-title);
  font-weight: 600;
  font-size: 0.98rem;
  -webkit-line-clamp: 2;           /* max 2 lignes → cartes visuellement cohérentes */
  line-height: 1.25;
}

#carouselportf .spip_doc_descriptif{
  color: var(--pf-muted);
  font-weight: 400;
  font-size: 0.92rem;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  margin-top: 6px;
}

/* Dots & flèches — minimalistes, dans la palette CAPA */
#carouselportf .owl-dots{ text-align: center; margin-top: 14px; }
#carouselportf .owl-dot span{
  width: 8px; height: 8px; display: inline-block; border-radius: 50%;
  background: #C9BBAD; margin: 0 5px; transition: transform .2s ease, background .2s ease;
}
#carouselportf .owl-dot.active span{ transform: scale(1.35); background: #88877A; }

#carouselportf .owl-nav button.owl-prev,
#carouselportf .owl-nav button.owl-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
  color: #222; 
  display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease;
}
#carouselportf .owl-nav button.owl-prev{ left: -10px; }
#carouselportf .owl-nav button.owl-next{ right: -10px; }
#carouselportf .owl-nav button:hover{ background: rgba(255,255,255,.95); transform: translateY(-50%) scale(1.05); }

/* Sécurité : on laisse Owl gérer les largeurs ; on ne force rien */
#carouselportf .owl-stage{ gap: 0 !important; }
#carouselportf .owl-item{ width: auto; flex: none !important; }


#aqua.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

#aqua.owl-theme .owl-dots .owl-dot span {
background:black;
}

#aqua.owl-theme .owl-dots .owl-dot.active span, #aqua.owl-theme .owl-dots .owl-dot:hover span {
    background: white;
}

#aqua.owl-theme .owl-nav {
position:absolute;
top:0px;
right:10px;
}

#aqua.owl-carousel .owl-nav button.owl-prev, #aqua.owl-carousel .owl-nav button.owl-next{
    background: white;
    width: 40px;
    height: 40px;
    font-size: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px !important;
    border-radius: 50%;
transition: all 250ms;
}
#aqua.owl-carousel .owl-nav button.owl-prev:hover, #aqua.owl-carousel .owl-nav button.owl-next:hover{
color:#63c3d1;
}

/* --- Keyframes globales --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(var(--fade-offset,20px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* État initial appliqué uniquement si JS actif */
html.js .fade-init {
  opacity: 0;
  transform: translateY(var(--fade-offset,20px));
  will-change: opacity, transform;
}

/* Quand l’animation se joue */
html.js .fade-play {
  animation: fadeUp .8s ease-out forwards;
}

/* Décalages personnalisés */
h2       { --fade-offset: 20px; }
h1 span  { --fade-offset: 20px; display: inline-block; } /* crucial pour l'anim */
p        { --fade-offset: 15px; }

/* Exceptions → jamais animés */
.widgets-container p,
.thr p {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}




@media (max-width: 1200px){
.texte-image-container { 
flex-wrap:wrap;
}
.texte-image-container .image-container{
width: 100%;
    max-width: 800px;
}

.texte-container{
width: 100%;
max-width: 800px;
}

.texte-image-container .image-container img{
width: 100%;
    height: 350px;
    object-fit: cover;
max-width: 100%;
}

.texte-image-container.miroir{
flex-wrap:wrap-reverse;
}

.mosaique-bleu {
  height: auto !important;
  flex-wrap: wrap-reverse;
}
}