body{
font-family:"futura-pt";
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;  /* Firefox (macOS) */
     padding: 0;
}

a:focus, a:hover, a:active, a:focus {
    background-color: inherit !important;
color:inherit !important;
    outline-offset: 0 !important;
} 



/*Titre H2 lambda*/
 
.titre-container{
display:flex;
flex-wrap:nowrap; 
justify-content:center;
align-items:center;
width: 100%;
}

.titre-container img{
object-fit:contain;
}

.titre-container img:nth-child(1){
margin-bottom: 2.5em;
}

.titre-container img:nth-child(3){
margin-top: 2.5em;
}

h2{
width:auto;
margin:40px 10px;
font-family: "itc-avant-garde-gothic-pro";
font-weight: 300;
font-size: 2.5em;
}

h2 span{
font-family: "itc-avant-garde-gothic-pro";
font-weight: 600;
font-size: 1.5em;
}

.titre-container h2{
text-transform:uppercase;
}

/* image full length */

.image-full{
width:100%;
height:350px;
display:flex;
flex-wrap:nowrap;
justify-content:flex-end;
align-items:center;
position:relative;
clip-path: polygon(
  0 0,                        /* haut gauche */
  100% 0,                     /* haut droit */
  100% calc(100% - 60px),     /* coin coupé */
  calc(100% - 60px) 100%,     /* bas, un peu à gauche */
  0 100%                      /* bas gauche */
);
}

.image-full img{
object-fit:cover;
width:100%;
height: 100%;
object-position:left center;
}

.image-full .image-text{
display:flex;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
position:absolute;
right:60px;
}

.image-full .image-text h3{
	font-size:1.8em;
	font-family:"futura-pt";
	margin:0 20px;
	max-width:630px;
	color:white;
text-align:left;
text-shadow: 0 0 20px black;
}

.image-full .image-text h3 span{
	display:block;
	margin-left:60px;
}

.image-full .image-text img:nth-child(1){
margin-bottom: 5em;
object-fit:contain;
width: auto;
}

.image-full .image-text img:nth-child(3){
margin-top: 5em;
object-fit:contain;
width: auto;
}


/* mosaique HEBERGEMENT*/

.hebergement-container{
width:100%;
padding: 40px 20px;
}

.herbergement-mosaique{
background:white;
display:flex;
flex-direction: row;
justify-content: stretch;
align-items: center;
flex-wrap:wrap;
margin:0 auto;
max-width: 1400px;
position:relative;
}



.mosaique-text h3{
font-size:1.5em;
font-family: "itc-avant-garde-gothic-pro";
text-align:center;
font-weight:300;
margin:20px;
}

.mosaique-text h3 strong{
    background: #fdde60;
    font-weight: 700;
    padding: 5px 10px 0 10px;

}

.mosaique-text h3 span{
display:block;
margin:5px;
}

.mosaique-text p{
font-family:"futura-pt";
color:black;
text-align:left;
}


.herbergement-mosaique .bloc{
position:relative;
padding:2px;
height:350px;
}

.herbergement-mosaique .bloc img {
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}


 .herbergement-mosaique .bloc.bottom-img img{
object-position:bottom;
}

.herbergement-mosaique .bloc .bloc-text p{
	position: absolute;
    border-left: 1px solid black;
    color: black;
    font-family: "futura-pt";
    font-weight: 700;
    font-size: 16px;
	margin:0;
	text-transform: uppercase;
}

.herbergement-mosaique .bloc:nth-child(1) {
width:30%;
}

.herbergement-mosaique .bloc:nth-child(1) .bloc-text p{
  top: -50px;
  left: 40px;
  padding: 10px 20px 40px 20px;
}


.herbergement-mosaique .mosaique-text:nth-child(2){
padding: 0 12%;
width:70%;
}


.herbergement-mosaique .bloc:nth-child(3) {
width:24%;
}
.herbergement-mosaique .bloc:nth-child(3) .bloc-text p{
  bottom: -50px;
  right: 40px;
  padding: 40px 20px 5px 20px;
  border-left:none;
  border-right:1px solid black;
}


.herbergement-mosaique .bloc:nth-child(4) {
width:38%;
}
.herbergement-mosaique .bloc:nth-child(4) .bloc-text p{
  top: -50px;
  left: 120px;
  padding: 10px 20px 40px 20px;
}


.herbergement-mosaique .bloc:nth-child(5) {
width:38%;
}
.herbergement-mosaique .bloc:nth-child(5) .bloc-text p{
  top: -50px;
  left: 40px;
  padding: 10px 20px 40px 20px;
}

.herbergement-mosaique .mosaique-text:nth-child(6){
padding: 60px 2% 20px 2%;
width:32%;
}


.herbergement-mosaique .bloc:nth-child(7) {
width:40%;
}
.herbergement-mosaique .bloc:nth-child(7) .bloc-text p{
  bottom: -50px;
  left: 40px;
  padding: 40px 20px 10px 20px;
}


.herbergement-mosaique .bloc:nth-child(8) {
width:28%;
}
.herbergement-mosaique .bloc:nth-child(8) .bloc-text p{
  bottom: -50px;
  right: 40px;
  padding: 40px 20px 10px 20px;
  border-left:none;
  border-right:1px solid black;
}

.hebergement-container .hebergement-text{
max-width:800px;
padding:80px 20px 40px 20px;
margin: 0 auto;
}

.hebergement-container .hebergement-text p{
font-family:"futura-pt";
}






/* Bloc jaune accueil + article avec mosaique x4*/

 .service-container{
 width: 100%;
    background: #e1d9d0;
padding:40px 20px;
}

.page-services-loisirs .service-container, 
.page-services-loisirs .hebergement-container{
background:white;
}

 .service-container .titre-container h2 {
max-width: 480px;
}

.services-list-home {
  list-style: none;
  padding: 0;
  margin: 25px 0 10px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 20px;
  font-family: "futura-pt";
}

.services-list-home li {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #000;
  font-weight: 600;
}

.services-list-home li i {
  color: black; /* couleur Soleya */
  font-size: 30px;
  margin-right: 12px;
}

.mention{
    margin-top: 30px;
}

.mosaique-simple {
  display: flex;
  flex-direction: column; /* Seulement deux lignes empilées */
  gap: 10px;
}

.mosaique-simple .ligne {
  display: flex;
  flex-direction: row; /* 2 images côte à côte */
  gap: 10px;
}

/* Taille fixe identique pour toutes les images */
.mosaique-simple img {
  width: 300px !important;
  height: 300px !important;
  object-fit: cover;
  border-radius: 8px;
}

/* Décalage horizontal sur la première image du haut */
.mosaique-simple .ligne-1 .img-1 {
  margin-left: 40px;
}

/* Ligne 2 non décalée */
.mosaique-simple .ligne-2 img {
  margin-left: 0;
}

/* Responsive simple : images passent en colonne si trop étroit */
@media (max-width: 700px) {
  .mosaique-simple .ligne {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mosaique-simple .ligne-1 .img-1 {
    margin-left: 0;
  }
}













/* Liste d’activités en vignettes */
.activites-list {
  list-style: none;
  margin: 30px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
justify-content: center;
}

/* Chaque carte activité */
.activite-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e0ddd6;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  max-width: 375px;
  font-family: "futura-pt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.page-velo .activite-card{
    justify-content: center;
    flex-wrap: wrap;
   max-width: 330px;
    align-content: flex-start;
}


.page-velo .activite-card .activite-text h3{
font-size: 20px;
    margin: 20px;
}


/* Icône Font Awesome */
.activite-card i {
  font-size: 70px;
  margin-top: 4px;
  color: #fdde60; /* couleur Soleya */
  flex-shrink: 0;
}

/* Texte de la carte */
.activite-text h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1f1f1f;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
}

.activite-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* Hover effet “premium” */
.activite-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border-color: #c9bbad;
}

/* Responsive */
@media (max-width: 900px) {
  .activites-list {
    justify-content: center;
  }

  .activite-card {
    max-width: 100%;
  }
}






/* BTN lib */

.btn-bleu{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:white;
background:#52c5d4;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-bleu:hover{
background: #fdde60 !important;
}


.btn-jaune, 
.btn-jaune:visited,
.btn-jaune:focus,
.btn-jaune:active{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:black;
background:#fdde60;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-jaune:hover{
background: black !important;
color:white !important;
}


.btn-blanc{
    font-family: "futura-pt";
    padding: 10px 30px 10px 30px;
    color: black !important;
    background: white;
    text-transform: uppercase;
    clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
	text-decoration:none;
	transition: all 250ms;
}

.btn-blanc:hover{
background: black !important;
color:white !important;
}


.btn-bouti{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:white;
background:#b5d4a0;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-leveno{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:white;
background:#cfc27b;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-kerzerho{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:white;
background:#a3c0de;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-palace{
font-family:"futura-pt";
padding: 10px 30px 10px 30px;
color:white;
background:#e4bc82;
text-transform: uppercase;
clip-path: polygon(0 0, /* haut gauche */ 100% 0, /* haut droit */ 100% 100%, /* bas droit */ 10px 100%, /* bas, un peu � droite */ 0 calc(100% - 10px) /* coin coup� */);
transition: all 250ms;
text-decoration:none;
}

.btn-bouti:hover,
.btn-palace:hover,
.btn-kerzerho:hover,
.btn-leveno:hover{
background:#fdde60 !important;
}

.btn-container{
display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

#footer{
background:#e1d9d0;
width:100%;
position:relative;
display:flex;
justify-content:center;
padding:60px 0;
}

.footer-container{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	max-width:1400px;
}



.column-contact{
max-width:400px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items: flex-start;
}

.column-contact .logo{
max-width: 350px;
 
  margin: 10px auto;
}

.tel-container, .mail-container{
margin:5px 0;
}

.footer-container .column-contact a{
	color:black;
	font-family:"futura-pt";
	font-size:20px;
	font-weight:500;
text-decoration:none;
background:transparent !important;
}


.column-contact h3{
	width:100%;
	font-family:"itc-avant-garde-gothic-pro";
	font-size:24px;
text-align:left;
font-weight:500;
margin-bottom:0;
padding:10px 0;
margin-top:10px;
}
 
.details-container{
max-width:1000px;
display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-wrap:wrap;
padding:0 40px;
}

.details-container .titre-footer{
width: 100%;
    background:#e1d9d0;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    align-items: center;
    z-index: 10;
    position: relative;
}

.details-container h3{
	font-family:"futura-pt";
	font-size:30px;
text-align:center;
font-weight:400;
margin-bottom:0;
margin-top:10px;
background:#e1d9d0;
padding:10px;
position:relative;
z-index:10;
text-transform:uppercase;
}

.details-container .titre-footer span{
width: 100%;
    border-bottom: 1px solid black;
    position: absolute;
left: 0;
    top: 60%;
z-index:1;
}

.details-container .links-container{
width:30%;

}

.details-container .links-container a{
	text-align: left;
    display: block;
color:black;
font-family:"futura-pt";
	font-size:18px;
	font-weight:400;
}

.details-container .campings-footer{
width:70%;
    padding-left: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.details-container .campings-footer img{
    object-fit: contain;
    margin: 10px;
width:100px;
width: 120px;
    max-height: 100px;
}

.details-container .payement-container{
width:100%;
border-bottom: 1px solid black;
}

.details-container .payement-container ul{
display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-wrap:wrap;
    margin-bottom: 0;
}

.details-container .payement-container ul li{
display:flex;
flex-direction:column;
align-items:center;
margin:20px;
}

.details-container .payement-container ul li img{
height: 50px;
object-fit: contain;
margin-bottom:10px;
}

.details-container .payement-container ul li span{
font-family:"futura-pt";
font-size:18px;
font-weight:300;
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;  /* Firefox (macOS) */
}






/* ---------- Mobile : < 900px ---------- */
@media (max-width: 900px) {
h2 span {
    font-family: "itc-avant-garde-gothic-pro";
    font-weight: 600;
    font-size: 1.2em;
}
}

@media (max-width: 800px) {
.column-contact .logo{
display:none;
}

.details-container,
.details-container .campings-footer,
.details-container .payement-container,
.details-container .links-container {
margin-top:20px;
border-bottom:0;
width:100%;
padding: 0 20px;
}
}

@media (max-width: 600px) {
.titre-container img {
display:none;
}
}