@charset "utf-8";
@font-face {
    font-family: "Amsterdam Signature Four Slant";
    src: url("../fonts/Amsterdam-Signature-Four-Slant.woff2") format("woff2"),
         url("../fonts/Amsterdam-Signature-Four-Slant.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Document */

    /* Style global */
    body, html {
		
       margin: 0;
  	   padding: 0;
  	   font-family: "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
	   font-weight: 400;
       overflow-x: hidden;
	   background-color: white	
    }

   html { -webkit-text-size-adjust: 100%; }


.gps-links a {
    display: inline-block;
    margin: 6px 10px;
    padding: 10px 16px;
    background: #594c25;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
}
.gps-links a:hover {
	background: #D8C7A1;
}

    /* Diaporama plein écran */
    .slideshow {
      position: relative;
      
     
      width: 100%;
      height: 100vh;
      
      overflow: hidden;
    }

h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center; /* texte justifié */
    font-size: clamp(1.5rem, 1.3vw, 3rem);     /* taille standard, ajustable */
    letter-spacing: 0px;
	line-height: 1.6;    /* espace entre les lignes pour lisibilité */
	margin-top: 50px;
	margin-left: 20px;   /* marge gauche */
    margin-right: 20px;  /* marge droite */  
	color: #D8C7A1;
	text-transform: uppercase;
	/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20); */
  }
	  
	  
  h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: left; /* texte justifié */
    font-size: clamp(1.3rem, 1.3vw, 2rem);     /* taille standard, ajustable */
	letter-spacing: 0px;
    line-height: 1.6;    /* espace entre les lignes pour lisibilité */
	margin-left: 20px;   /* marge gauche */
    margin-right: 20px;  /* marge droite */  
	color: #D8C7A1;
	text-transform: uppercase;
	/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20); */
  }
	  
 h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left; /* texte justifié */
    font-size: clamp(1.2rem, 1.2vw, 1.9rem);     /* taille standard, ajustable */
	letter-spacing: 0px;
    line-height: 1.6;    /* espace entre les lignes pour lisibilité */
	margin-left: 20px;   /* marge gauche */
    margin-right: 20px;  /* marge droite */  
	color: #594c25;
	/*text-transform: uppercase,small; */
	/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20); */
  }
	  

  p {
    font-family: "Poppins", sans-serif;
	font-weight: 400; /* regular */
    text-align: justify; /* texte justifié */
    font-size: clamp(1rem, 1.1vw, 1.5rem);     /* taille standard, ajustable  1.1rem */
    line-height: 1.6;    /* espace entre les lignes pour lisibilité */
	margin-left: 20px;   /* marge gauche */
    margin-right: 20px;  /* marge droite */  
	color: #594c25;
	
 }

a { text-decoration: none; color: inherit; /* garde la couleur du texte */ }
#pied { text-align: center; font-size: 0.8rem; /* plus petit */ margin-top: 20px; }
 .pmr-logo { width: 25px; height: 25px; color: #000; align-items: center; gap: 6px; } /* change la couleur si besoin */ 
	  
.fixed-menu {
  position: fixed;
  bottom: 20px;   /* placé en bas */
  left: 30px;     /* placé à gauche */
  display: flex;
  flex-direction: row; /* les boutons côte à côte */
  gap: 15px;      /* espace entre les boutons */
  z-index: 9998;  /* reste au-dessus du contenu */
  background-color: transparent; 
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
  padding: 10px 15px;       /* espace intérieur autour des icônes */
  border-radius: 8px;       /* angles arrondis pour un look harmonieux */
}

.fixed-menu.scrolled { 
	background-color: rgba(0, 0, 0, 0.5); /* noir semi-transparent */ 
	backdrop-filter: blur(6px); /* effet premium */ 
}

.fixed-menu a img {
  width: 50px;    /* taille des icônes PNG */
  height: auto;
  display: block;
  transition: transform 0.3s ease; /* effet fluide */
}

.fixed-menu a img:hover {
  transform: scale(1.2); /* zoom léger au survol */
}

.btn-reserver {
  background: none; /* doré */
  transition: all 0.3s ease;

  /* ✅ animation */
  /* animation: bounce 2s infinite; */
}

.btn-reserver:hover {
  transform: scale(1.2) rotate(-2deg);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.btn-reserver-c {
	font-family: "Poppins", sans-serif;
    display: inline-block;
    padding: 12px 26px;
    background-color: #594c25; /* bleu profond élégant */
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px; /* arrondi premium */
    letter-spacing: 0.5px;
    transition: 0.3s ease;
    margin-top: 20px;
}

.btn-reserver-c:hover {
    background-color: #D8C7A1;
    transform: translateY(-2px);
}

/* Animation rebond */
@keyframes bounce {
  0%   { transform: translateY(0); }
  5%   { transform: translateY(-50px); }  /* monte */
  10%  { transform: translateY(0); }      /* retombe */
  15%  { transform: translateY(-25px); }  /* petit rebond */
  20%  { transform: translateY(0); }
  25%  { transform: translateY(-10px); }  /* dernier petit rebond */
  30%  { transform: translateY(0); }
  100% { transform: translateY(0); }      /* reste immobile jusqu’au prochain cycle */
}
.animate {
  animation: bounce 2s ease-in-out;
}
	  
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  transform: scale(1) translateX(0); /* base avec translation */
}

/* Zoom + dézoom + translation uniquement sur la slide active */
.slide.active {
  opacity: 1;
  animation: zoomTranslate 5s ease-in-out forwards; 
}

.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ✅ remplit sans déformer */
  display: block;
}	  

/* Désactive le zoom-in sur les pages fixes */
.page-fixe .slide {
    transform: none !important;
    animation: none !important;
}

.page-fixe .slide.active {
    transform: none !important;
}

	  
/* Animation zoom + translation gauche */
@keyframes zoomTranslate {
  0%   { transform: scale(1) translateX(0); }        /* départ normal */
  40%  { transform: scale(1.1) translateX(-10px); } /* zoom + léger décalage gauche */
  80%  { transform: scale(1.1) translateX(-10px); } /* reste zoomé et décalé */
  100% { transform: scale(1) translateX(0); }        /* retour normal avant disparition */
}

  	  
	  
  .slide .caption {
      position: relative;
      z-index: 5;
	  padding: 10px;
	  top: 50%;                /*  centré verticalement */
      left: 50%;               /*  centré horizontalement */
      transform: translate(-50%, -50%); /*  centrage parfait */
      color: white;
      font-family: "Amsterdam Signature Four Slant", sans-serif;
      font-optical-sizing: auto;
      text-align: center;
	  font-size: clamp(2.8rem, 7vw, 6rem); 
	  font-weight: 400; 
	  letter-spacing: 1.5px;
      /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5); /* garde lisibilité sans cadre */
	  
	  
    }
.page-fixe .slide {
    overflow: visible !important;
}

.page-fixe .titre-fixe {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  font-size: clamp(1.7rem, 5vw, 4.2rem);

}
.caption.titre-fixe img { 
    display: block; 
    margin: 0 auto clamp(10px, 2vw, 25px) auto; /* marge réduite */ 
	width: clamp(80px, 25vw, 350px); /* largeur réduite aussi */ 
}

.caption.titre-fixe span { 
    display: block; 
    margin: clamp(10px, 2vw, 25px) 0; /* marge réduite */
}




	  
	  /* Menu flottant */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0);
	  transition: background-color 0.4s ease, box-shadow 0.4s ease;
      color: white;
      display: flex;
      justify-content: space-between;
	  transition: all 0.3s ease;
      min-height: 80px;
      z-index: 10;
    }
    nav.scrolled { 
	  background-color: #ffffff; /* fond blanc */ 
	  box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* ombre premium */ 
    }

    nav .logo { /* logo ou titre */
      font-weight: bold;
      font-size: 1.2em;
    }
	  
	nav .logo img {
  	  height: 80px;          /* taille du logo (ajuste selon ton besoin) */
	  filter: invert(100%); /* logo blanc */
  	  width: auto;
	  padding: 20px 10px 20px 30px;
  	  display: block;
  	  position: relative;    /*  permet le décalage */
  	  transform: translateY(0%) translateX(10px); /* fait déborder de 50% sous le menu */
	  transition: filter 0.3s ease;
    }
    
   
	 
	 
    

    /* Logo normal quand on scroll */
    nav.scrolled .logo img {
     
	     filter: invert(84%) sepia(12%) saturate(548%) hue-rotate(355deg) brightness(94%) contrast(88%);
	 
    }


    nav ul {
      list-style: none;
      display: flex;
	  margin: 20px 10px;
      padding: 0;
	  align-items: center;
    }

    nav ul li {
      margin: 0 15px;
	  /*font-family: "Questrial", "Helvetica Neue", "Arial", sans-serif; */
	  font-family: "Poppins", sans-serif;
	  font-size: clamp(0.5rem, 10vw, 1.0rem);
    }

    nav ul li a {
      color: white;
	  transition: color 0.3s ease;
	  text-decoration: none;
      transition: all 0.3s ease;
	  text-transform: uppercase; 
	  font-weight: 600; 
	  letter-spacing: 0px
    }
    
    nav.scrolled ul li a { color: #D8C7A1; /* ta couleur actuelle */ }

    nav ul li a:hover {
      color: #594c25;
    }


	  
   .menu-toggle {
      display: none; /* caché sur grand écran */
      font-size: 1.8em;
      cursor: pointer;
	  line-height: 1;             
  	  margin-right: 12px;
    }
	  
#submenu-scroll {
    position: fixed;
    top: 120px; /* hauteur de ton menu principal */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(8px);
    padding: 10px 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
    border-bottom: 1px solid #e5e5e5;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 9; /* juste sous ton menu principal */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#submenu-scroll a {
	  font-family: "Poppins", sans-serif;
	  font-size: clamp(0.5rem, 10vw, 1.0rem);
      color: #D8C7A1;
      text-decoration: none;
	  text-transform: uppercase;
      font-weight: 600;
}

#submenu-scroll a:hover {
      color: #594c25;
    }

#jardin, #jardin-sup, #grande-jardin-sup, #vue-mer, #vue-mer-sup, #junior-suite, #suite {
    scroll-margin-top: 150px; /* adapte selon la hauteur totale de tes menus */
}



.submenu-hidden {
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
}

.submenu-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.submenu-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.submenu-visible {
    transform: translateY(0);
    opacity: 1;
}



    /* Container en 2 colonnes */
	.content-container {
  		display: flex;
  		gap: 20px;
  		align-items: center;
		margin-top: clamp(20px, 5vw, 100px); /* espace adaptable */
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 0px
	}
	.content-container:nth-of-type(even) { flex-direction: row-reverse; }

	/* Colonne images */
	.content-images {
  	flex: 1;
	}

	.content-images img {
  		width: 100%;
        height: auto;
		object-fit: cover;
  		margin-bottom: 10px;
  		border-radius: 8px; /* optionnel pour arrondir */
		display: flex;
        align-items: flex-start; /* le haut du diaporama s’aligne avec le h2 */
	}

	/* Colonne texte */
	.content-text {
  		flex: 1;
	}
	  
	/* Diaporama dans la section container */
.content-images-slideshow {
  flex: 1;	
  position: relative;
  width: 100%;
   /* fixe une hauteur visible; ajuste selon ton design height: 800px; */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 30px;
  margin-top: 30px;	
}

.liste-pictos {
    list-style: none; 
	padding: 0; 
	margin: 0 0 0 20px; /* centre le bloc */ 
	gap: 12px 20px; /* rapproche les lignes et colonnes */ 
	display: grid; 
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes fluides */
	justify-content: center; /* centre les deux colonnes */
    
}

.liste-pictos1 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 20px;
        
        
    }


.liste-pictos li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.liste-pictos li img {
    width: auto;
    height: clamp(1.9em, 4vw, 5em);
    flex-shrink: 0;
}

.liste-pictos li p {
    margin: 0;
	text-align: left;
}

.caravelle-accordion {
    width: 100%;
    font-family: "Cormorant Garamond", serif;
}

/* TITRE */
.acc-title {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 0 20px 0;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #D8C7A1;
    color: #594c25;
}

/* ICÔNE */
.acc-ico {
    width: 32px;
    height: auto;
}

/* CHEVRON */
.chevron {
    margin-left: auto;
    width: 12px;
    height: 12px;
    border-right: 2px solid #2a2a2a;
    border-bottom: 2px solid #2a2a2a;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-right: 20px; /* marge demandée */
}

.acc-item.active .chevron {
    transform: rotate(-135deg);
}

/* CONTENU */
.acc-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease;
}

.acc-item.active .acc-content {
    max-height: 600px;
    opacity: 1;
    margin-bottom: 10px;
}

.acc-content p {
    margin: 12px 0;
    line-height: 1.55;
    font-size: 1.15rem;
}


.p-text { margin: 0 20px; }
#titre-centre {text-align: center;}

/* Responsive: augmente un peu la hauteur sur mobile si besoin */
@media screen and (max-width: 850px) {
	
	.gps-links  {
		text-align: left;
	}
	
	.gps-links a {
    
    margin: 1px 1px;
	padding: 6px 6px;
    
}

#jardin, #jardin-sup, #grande-jardin-sup, #vue-mer, #vue-mer-sup, #junior-suite, #suite {
    scroll-margin-top: 160px; /* adapte selon la hauteur totale de tes menus */
}	

	#submenu-scroll {
		width: 100%; /* ← indispensable pour le centrage */
        box-sizing: border-box; /* le padding ne change plus la largeur */
		top: 80px; /* hauteur de ton menu principal */
		padding: 8px 20px; /* 20px de chaque côté */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 20px;
    text-align: center; /* sécurité si un style global interfère */
	}
	#submenu-scroll a { margin-right: 0px;}
	
	
.liste-pictos { grid-template-columns: 1fr; margin: 0; gap: 8px 10px;}
	
  .content-images-slideshow {
    height: 500px;
  }
}

.cslide {
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 */
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.cslide.active {
  opacity: 1;
}

.cslide img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* remplit sans déformer */
  object-position: bottom;
  display: block;
  border-radius: 8px;
}

/* Option: léger zoom sur la slide active */
@keyframes czoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.cslide.active img {
  animation: czoom 4s ease-in-out;
}

.section-divider {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, #e9dfc1, #e9dfc1);
  margin: clamp(30px, 5vw, 100px) auto;
  width: 30%;
}
	 
	  
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    z-index: 9999;
    pointer-events: auto;
    cursor: pointer;
}

.scroll-indicator span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border-left: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    transform: translateX(-50%) rotate(-45deg);
    animation: scrollDown 1.4s infinite;
    opacity: 1;
	
	filter: drop-shadow(2 2 4px rgba(255,255,255,0.8))
            
}
@keyframes scrollDown {
    0% {
        transform: translate(-50%, 0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 12px) rotate(-45deg);
        opacity: 0;
    }
}
	  
    /* responsive */
    @media screen and (max-width: 850px) {
		

		
h2 {
    margin-left: 0px;   /* marge gauche */
    margin-right: 0px;  /* marge droite */  
  }
h3 {
    margin-left: 0px;   /* marge gauche */
    margin-right: 0px;  /* marge droite */  
  }
		
p {
    margin-left: 0px;   /* marge gauche */
    margin-right: 0px;  /* marge droite */  
	color: #594c25;
  }
.section-divider.info {
    display: none;
}
#carte-calvi { content: url("../img/carte-calvi-tel.jpg"); }

.slide .caption { 
	font-size: clamp(3rem, 11vw, 5.8rem); /* très grand sur mobile */ 
	line-height: 1.5; /* resserre les lignes */ 
	max-width: 80%; /* force le retour à la ligne */ 
	white-space: normal; /* autorise la coupure */ 
	letter-spacing: 1.5px;
	display: block; 
	font-weight: 400; /* améliore la lisibilité sur photos claires */ 
	/* text-shadow: 0 3px 7px rgba(0, 0, 0, 0.78), 0 0 28px rgba(0, 0, 0, 0.55); */
  }
		
.page-fixe .titre-fixe {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  font-size: clamp(1.7rem, 5vw, 3rem);
  
  }
		
.caption.titre-fixe img { 
    display: block; 
    margin: 0 auto clamp(10px, 2vw, 25px) auto; /* marge réduite */ 
	width: clamp(130px, 25vw, 350px); /* largeur réduite aussi */ 
}

.fixed-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;                 /* remplace width + transform */
  padding: 10px 30px;       /* marge de 20px de chaque côté */
  display: flex;
  justify-content: space-between; /* répartit équitablement */
  align-items: center;
  background-color: transparent;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
  z-index: 9998;
}		
fixed-menu.scrolled { 
	background-color: rgba(0, 0, 0, 0.5); /* noir semi-transparent */ 
	backdrop-filter: blur(6px); /* effet premium */ 
}

.fixed-menu a img {
  width: 40px;   /* taille adaptée au mobile */
  height: auto;
  display: block;
}
			
	  nav .logo img {
    	height: 60px;     /* logo encore plus petit */
		padding: 0px 0px 0px 17px;
		position: relative;    /* permet le décalage */
        transform: translateY(18%) translateX(14px);  
      }
		
      nav ul {
        list-style: none;
		display: flex; /* cacher menu par défaut */
        flex-direction: column;
        background: rgba(255, 255, 255, 1);
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
		/* état caché */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
		margin: 0;

  /* transition fluide */
  transition: all 0.5s ease
      }
	nav ul.show {
  /* état affiché */
  max-height: 500px; /* assez grand pour contenir les liens */
  opacity: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

	  nav ul li {
    	font-size: 1.1rem;
    	line-height: 2.2rem; /* plus d’espace entre les lignes */
    	text-align: center;
		
  	  }
		
      nav ul.show { /*  classe pour afficher menu */
        display: flex;
				
      }
		
	  nav ul li a { color: #D8C7A1 !important; }

      .menu-toggle {
        display: block; /* afficher hamburger sur mobile */
		line-height: 1;
		padding: 0px 17px 0px 0px;
	    align-items: center;
		align-self: center;
		color: white; transition: 
		color 0.3s ease;
		
		
      }
		
	  nav.scrolled .menu-toggle { color: #D8C7A1; }

	.content-section {
      position: relative;
      padding: 10px;
      /* background: #f5f5f5; */
      color: #333;
    }

    .content-section h2 {
      margin-top: 0px;
    }
	
	.content-container, .content-container:nth-of-type(even) { flex-direction: column-reverse !important; text-align: center; } .content-text, .content-images-slideshow { width: 100%; }	
		
	.content-container {
	  margin-top: 0px; /* espace vide au-dessus */	
      flex-direction: column-reverse;
    }
	
    .content-images, .content-text {
    width: 100%;
    }
		
		
	.content-images-slideshow {
    width: 100%;
    height: auto;        /* conserve le ratio */
    min-height: clamp(100px, 70vw, 600px);
	  /* laisse le navigateur gérer le ratio original */
    display: block;      /* force l’affichage */
    margin-bottom: 20px; /* espace sous le diaporama */
  }

  .cslide img {
    width: 100%;
    height: auto;        /* conserve le ratio original */
	aspect-ratio: auto;
    object-fit: contain; /* évite le recadrage trop agressif */
  }	
		
.scroll-indicator {
        bottom: 50px;
    }
    .scroll-indicator span {
        width: 10px;
        height: 10px;
    }
		
}