:root {
	--primary-color: #c19d68;
    --secondary-color: #B87441;
    --black-color: #1e1e1e;
    --white-color: #ffff;
}


*, 
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/** COMMUNS */

img {
	width: 100%;
	height: auto;
}

p{
    font-family: "Lora", serif;
    color: var(--white-color);
}

body{
    background-color: var(--black-color);
}

h1{
    font-size: 5rem;
    color: white;
    font-style: italic;
    background-color: rgba(193, 157, 104, 0.8);
    font-family: "Cormorant Garamond", serif;
}

h2{
    font-size: 3rem;
    text-align: center;
    color: white;
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
}

h3{
    font-size: 23px;
    text-align: center;
    color: white;
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
}

/* HEADER**/

/* ANIMATION HEADER*/
#header{
    background: url(../images/slide.jpeg) center no-repeat;
    background-size: cover;
    height: 98vh;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    opacity: 1; /* Initialement invisible */
    transform: translateY(-50px); /* Déplacement initial vers le haut */
    animation: fadeInSlide 2s ease-in-out forwards; /* Animation de 2 secondes */

}

/* Animation d'apparition lente et déplacement */
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(-50px); /* Déplacé plus haut */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Position finale à l'origine */
    }
}
/* FIN ANIMATION */

#menu{
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    padding-top: 2rem;
}

/* bouton mobile */ 

/* Style pour le bouton hamburger */
.menu-button {
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 3rem;
    flex-basis: 100%;
}

/* Style au survol */
.menu-button:hover {
    background-color: transparent; /* Fond lors du survol */
    color: #f0f0f0; /* Couleur du texte lors du survol */
}





nav{
    flex-basis: 100%;
}



.links {
    position: relative; 
    text-decoration: none;
    color: var(--white-color);
    text-align: center;
    padding: 1rem 2rem; 
    transition: color 0.3s;
    font-size: 18px; 
}

.links::after {
    content: '';
    position: absolute; 
    left: 0; 
    bottom: -2px; 
    height: 2px; 
    width: 100%; 
    background-color: var(--white-color);
    transform: scaleX(0); 
    transition: transform 0.3s ease-in-out; 
    transform-origin: right; 
}

.links:hover::after {
    transform: scaleX(1); 
    transform-origin: left; 
}

.links:hover {
    background-color: var(--primary-color); 
    color: var(--white-color); 
}

/* Par contre j'ai pas réussit à mettre le menu dans le humburger 
impossible de comprendre après plusieurs essais comment le faire comme vous, 
et comme je voulais pas copier votre code, j'ai laissé comme ça ... 
j'ai fini par perdre patience avec le manque de temps */


/* ANIMATION CONTENT */

#content {
    flex-basis: 100%;
    text-align: center;
    padding-top: 15rem;
    opacity: 0; /* Initialement invisible */
    transform: translateX(100%); /* Positionné hors de l'écran à droite */
    position: relative; /* Permet le contrôle de positionnement sans affecter le body */
    animation: slideInFromRight 2s ease-in-out forwards; /* Animation de 2 secondes */
}

@media screen and (max-width:366px){
    #content {
        padding-top: 9rem;
    }

}

/* Animation de translation de droite à gauche */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%); /* Hors écran à droite */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Position normale */
    }
}


#slogan{
    color: white;
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
    background-color: rgba(193, 157, 104, 0.8);
}

/* FIN ANIMATION CONTENT */ 

/* ARTICLE DESCRIPTIF */ 

.logo{
    width: 16%;
}

@media screen and (max-width:500px){
    .logo{
        width:78%;
    }  
}

@media screen and (500px <= width <= 600px){
    .logo{
        width:58%;
    }  
}


.hotel{
    background-image: url(../images/fond-texte.png);
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: bottom;
    margin-bottom: 2rem;
}


.descriptif{
    margin-left: 6rem;
    margin-right: 6rem;
    text-align: center;
    margin-top: 3rem;
}

@media screen and (max-width:940px){
    .descriptif{
        margin-left: 3rem;
        margin-right: 3rem;
        }
    
}

.descriptif > p {
    text-align: left;
    line-height: 1.6rem;
    margin-top: 2rem;
    
}

.descriptif > p > span {
    font-weight: bold;
}

/* CHAMBRES */

#presentation_chambres{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 5rem;
}

.chambres{
    background-color: var(--primary-color);
    margin-right: 2rem;
    border-radius: 2rem;
    padding-bottom: 3rem;
}

/* Animation Chambres*/ 

.chambres {
    transition: transform 0.3s ease;
}

.chambres:hover {
    transform: scale(1.05);
}
/* FIN ANIMATION CHAMBRES */

.image_chambre{
    width: 14rem;
}

.images{
    border-radius:2rem 2rem 0 0;
}


.resume{
    margin-top: 10px;
    text-align: center;
}

.infos_supp{
    margin-bottom: 3rem;
    margin-top: 1rem;
    text-align: center;
}

.lien-reserv{
    font-style: italic;
    color: white;
    text-decoration: none;
    font-family: "Lora", serif;
}

.reservation{
    background-color: #c19d68;
    border: 2px solid white;
    padding: 1rem 2rem 1rem 2rem;
}

.reservation:hover {
    background-color: black; /* Couleur de fond au survol */
    transform: scale(1.02);
}

/* SERVICES HOTEL */

.activites{
    width: 17%;
    margin-right: 2rem
}

@media screen and (320px <= width <= 685px){
    .activites {
        width: 33%;
        margin-right: 0rem;
    }
}

@media screen and (min-width:685px){
    .activites {
        width: 23%;
        margin-right: 1rem;
    }
}



.image-serv {
    border-radius: 7rem 7rem 1rem 1rem;
}

.services {
    display: flex;
    flex-wrap: wrap; /* Permet de répartir les éléments sur plusieurs lignes si nécessaire */
    justify-content: center; /* Centrer les images horizontalement */
}



.services-details {
    margin-top: -100px;
    padding-top: 7rem;
    padding-bottom: 3rem;
    text-align: center;
    background-color: var(--secondary-color);
}

/* PARTIE ALYSSIA */ 

h4{
	color: #ffffff;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.5rem;
}


/* Mise en forme CONTACT 
*************************************/

/* Informations de contact de l'hôtel */
#container-contact{
	display: flex;
    JUSTIFY-CONTENT: center;
    background-color: #272727;
    margin: 3rem;
    border: 1px solid white;
}

.contact-info-hotel{
	padding: 3rem;
    flex-basis: 73%;
}

.contact{
	color: #c19d68;
	font-family: Lora, serif;
	text-transform: uppercase;
}

.contact-categories{
	margin-top: 1rem;
    border-bottom: 1px solid #a7a7a7;
}

.contact-categorie{
	color: #a7a7a7;
}

.contact-informations-hotel{
	color: #ffffff;
}

/* Formulaire de contact */

#contact-form{
	background-color: #1E1E1E;
    flex-basis: 50%;
    border: 1px solid white;
}

#contact-titre-champs{
	margin: 2rem;
}

#contact-titre{
	text-align: center;
    font-size: 2rem;
    color: #ffffff;
    font-family: "Cormorant Garamond", serif;
}

#contact-champs{
	padding: 0.5rem;
	display: grid;
}

.champs-cadre{
	border: 1px solid #ffffff;
    background-color: transparent;
    padding: 1rem;
    margin: 1rem;
	display: flex;
    justify-content: center;
	caret-color: #ffffff;
    color: #a7a7a7;
}

.champ-button{
	font-family: Lora, serif;
    background-color: #c19d68;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    padding: 1rem;
    margin: 1rem;
    text-transform: uppercase;
	font-size: 100%;	
}

.champ-button:hover{
		background-color: #272727;
		color: #c19d68;
}


/* Map lieu de l'hôtel */

#map-container{
   padding-top: 0rem;
}

#map{
	height: 100%;
    width: 450px;
}


/* Mise en forme BANDEAU 
****************************/
.bandeau-footer{
	background-color: #b87441;
	width: 100%;
	height: 6rem;
    margin-bottom: -5rem;
    margin-top: 2rem;
}

/* Mise en forme FOOTER 
****************************/

.footer-container{
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
	margin-bottom: 0rem;
}


.case-coordonnees{
    display: flex;
    flex: 1;
    padding: 3rem;
    width: 10rem;
    background-color: #272727;
    flex-wrap: wrap;
    margin: 2rem;
    text-align: center;
    justify-content: center;
}


.coordonnees{
	display: flex;
    border-bottom: 1px solid #c19d68;
    padding-bottom: 5px;
}

.contact-logo{
	width: 3rem;
    height: 2rem;
	padding-right: 1rem;
}

.contain-logo{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.icone {
    flex-basis: 100%;
    text-align: center;
}


.footer-coordonnées{
	color: #a7a7a7;
	color: #a7a7a7;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top:1rem;
}

/* Réseaux sociaux */

#reseaux{
    margin-top: 2rem;
    display: flex;
}

.logo-reseaux{
	width: 2.5rem;
    height: 2.5rem;
}

.logo-reseaux:hover{
	color: #c19d68; 
	transform: scale(1.2); /* Agrandir légèrement au survol */
    filter: brightness(1.5);
	position: relative;
    z-index: 1;
}

.social-link:hover{
	color: #c19d68;
	transform: scale(1.2); /* Agrandir légèrement au survol */
    filter: brightness(1.5);
	position: relative;
    z-index: 1;
}

.icone-reseaux{
    margin-right: 1rem;
}


/* Mise en forme HORAIRE 
*****************************/

.horaires-container{
	display: flex;
    flex: 1;
    width: 10rem;
    flex-wrap: wrap;
    margin: 2rem;
    margin-top: 0;
}


.horaires{
	color: #a7a7a7;
    margin-top: 1rem;
}

.horaires-list{
	padding-left: 0rem;	
}

.heures{
	padding-bottom: 1rem;
}

/* Mise en forme PARKING 
*****************************/

.parking-container{
	display: flex;
    flex: 1;
    justify-content: center;
    width: 10rem;
    flex-wrap: wrap;
    margin: 2rem;
    margin-top: -1.5rem;
}

.texte-parking{
	color: #a7a7a7;
    text-align: center;
    margin-top: 1rem;
}

/* Mise en forme NEWSLETTER 
*****************************/

.newsletter-container{
	display: flex;
    flex: 1;
    padding: 1rem;
    padding-top: 5rem;
    width: 10rem;
    flex-wrap: wrap;
    margin: 2rem;
    justify-content: center;
}

#text-newsletter{
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.email-newsletter{
	padding-bottom: 1rem;
    border: 1px solid #ffffff;
    background-color: transparent;
    display: flex;
    justify-content: center;
    caret-color: #ffffff;
    color: #a7a7a7;
    width: 9rem;
    padding-left: 1rem;
    padding-top: 1rem;
}

.button-newsletter{
	font-family: Lora, serif;
    background-color: #c19d68;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    padding: 0.5rem;
    margin-top: 1rem;
    text-transform: uppercase;
    font-size: 90%;
}

.button-newsletter:hover{
	background-color: #272727;
	color: #c19d68;
}

.newsletter-texte{
	color: #a7a7a7;
    margin-top: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

#inscription{
    display: flex;
    flex-direction: column;
}

/* fLECHE NAVIGUATION */ 

.scroll-top-btn {
    position: fixed;
    bottom: 20px; /* Position en bas de l'écran */
    right: 20px; /* Position à droite de l'écran */
    background-color: #333; /* Couleur du fond de la flèche */
    color: #fff; /* Couleur de la flèche */
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Caché par défaut */
    z-index: 1000; /* Assurer que la flèche reste au-dessus du contenu */
}

.scroll-top-btn:hover {
    background-color: #555; /* Couleur du fond au survol */
}



/* RESPONSIVE */

@media screen and (320px <= width <= 1048px){
    
   #presentation_chambres{
    flex-wrap: wrap;
}

.chambres{
    margin-bottom: 2rem;
}

@media screen and (320px <= width <= 527px){
    .chambres{
        margin-right: 0rem;
    }
    
}


.contact-info-hotel {
    padding: 1rem;
    padding-bottom: 4rem;
    padding-top: 3rem;
}

#container-contact {
    flex-wrap: wrap;
}

.footer-container {
    flex-wrap: wrap;
}
}

@media screen and (min-width:320px) {
    body{
        width:100%;
    }

    .descriptif > p{
        text-align: center;
    }
}

@media screen and (320px <= width <= 454px){

    .email-newsletter{
        flex-basis: 74%;
    }

    .case-coordonnees{
        flex-basis: 100%;
    }

    .newsletter-container {
        padding: 0rem;
        padding-top: 0rem; 
        margin: 0rem; 
    }
    
}

@media screen and (455px <= width <= 600px){

    .case-coordonnees{
        flex-basis: 100%;
    }

    .newsletter-container {
        padding: 0rem;
        padding-top: 0rem;

    }

    #inscription{
        flex-direction: column;
        display: flex;
    }
}

@media screen and (601px <= width <= 625px){

    .case-coordonnees{
        flex-basis: 100%;
    }

    .newsletter-container {
        padding: 0rem;
        padding-top: 0rem;

    }

    #inscription{
        flex-direction: column;
        display: flex;
    }
}

@media screen and (625px <= width <= 775px){

    .newsletter-container {
        padding: 0rem;
        padding-top: 0rem;

    }

}