body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
	overflow-x: hidden; 
}

.amatic {
  font-family: "Amatic SC", serif;
  font-weight: 400;
  font-style: normal;
}

img {max-width:100%}

header {
    background: white;
    padding: 0px 7%;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
	z-index: 9999;
	position: sticky; top:0;
	transition: background-color 0.7s ease;
}


header.scrolled {
    background:  linear-gradient(to bottom, rgba(123, 212, 255, 0.8), rgba(255, 255, 255, 0.8) ); 
    border-bottom: 1px solid #021e87;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.75); 
	/*filter: opacity(0.75);*/

}


nav {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
	overflow: auto;
}

nav .logo img {
    height: 120px;
}


nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/*mobile first
nav ul {
    position: fixed;
    flex-direction: column;
    top: 16%;
    right: 16%;
}
*/
	
/* Bouton pour ouvrir le menu */
#menu-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 1100;
}

/* Navigation masquée par défaut en mobile */
#main-nav {
    position: fixed;
    top: 16%;
    right: -100%; /* Hors écran */
    width: 70%;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    display: flex;
    transition: right 0.3s ease; /* Animation fluide */
	z-index: 9999;
}

#main-nav.active {
    right: 10%!important; /* Forcer Règle affichée en mobile */
}

	
nav ul li {
    margin: 16px 7px;
}

nav ul li a, #menu-toggle {
    text-decoration: none;
    color: #021e87;
    border: 2px solid #a535a7;
    padding: 6px 10px;
    border-radius: 25px;
	box-shadow: 0 4px 1px #6500d3;
    background-image: linear-gradient(to top, #eee, transparent);
	white-space: nowrap;
}

/*
#accueil {
	 animation: zoomBackground 16s infinite alternate; /* Animation */
}
*/

/* Animation de zoom */
@keyframes zoomBackground {
    0% {
        transform: scale(1); /* Échelle normale */
    }
    100% {
        transform: scale(1.2); /* Zoom 20% plus grand */
    }
}

.section-image {
    height: 488px;
    background-size: cover;
    background-position: center;
	background-repeat:no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
	flex-direction: column;
    margin-bottom: 4px;

}

.section-image button {
    background: linear-gradient(-45deg, #a3a9ff, transparent);
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
	text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
}

.section-image:hover {
	    background-blend-mode: lighten!important;
}

#qui-suis-je:hover,#pourquoi-consulter:hover {       box-shadow: 0 0 16px #ddd;
    cursor: pointer; filter: hue-rotate(45deg);transition:1s ease}
	
/* Modale */
.modal {
    display: none;
    position: fixed;
    
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
	z-index: 10000;
}

.modal-content {
    background: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    text-align: center;
    position: relative;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: #333;
    cursor: pointer;
}


/*responsive*/
@media (min-width: 878px) {
    #main-nav {
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        box-shadow: none;
        height: auto;
        padding: 0;
        right: auto; /* Désactive le comportement fixe */

    }

    #main-nav ul {
        flex-direction: row;
    }

    #menu-toggle {
        display: none; /* Masque le bouton en version desktop */
    }
	
	#qui-suis-je,#pourquoi-consulter,#duo,#zone {
    max-width: 70%;
    margin: 25px auto;
	}
	
	#qui-suis-je .section-image,#pourquoi-consulter .section-image {
		height:323px
	}
}

@media (max-width: 877px) {
	#main-nav {
		background: #f9f9f9 /*url(plume.png)*/ no-repeat 138%;
		background-size: contain;
    }
	
		#accueil .section-image{
	    background-position-x: 43%!important;
		}
		
		#accueil span{
		font-size: 43px!important;
		}
		
		.consultitre {font-size:13px}
		
		#qui-suis-je .section-image,#pourquoi-consulter .section-image {
		height:270px;padding:16px 0;
	}
	
	#qui-suis-je button,#pourquoi-consulter button {
	font-size: 10px;
    margin-top: 116px;
	}
}	


@media (max-width: 444px) {
	#accueil .section-image{
	    background-position-x: 30%!important;
		height:50vh!important
	}
	
	.lotus {background-position-x: 3%!important;height: 100px!important;    margin-bottom: 9vh;}

		#qui-suis-je .section-image,#pourquoi-consulter .section-image {
			background-size: 116%!important;
		height:222px;
	}
	
	#foret {height: 37vh!important;margin-bottom: 22px;}
	
	
	#duo {flex-direction: column;}
	
	#duo .section-image {
    height: 280px;
	}
	
	#contact {height: 89vh!important;margin-top: 19px;}
}	


.tarifs {
	color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    max-width: 360px;
	text-align:left
}


/*form*/
.contact-form {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   
    max-width: 360px;
}


.form-group {
	display: flex;
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
	flex: 33%;
    text-align: left;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

textarea {
    resize: vertical;
}


.contact-form button {
    background-color: #6500d3;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}


.contact-form button:hover {
    background-color: #0056b3;
}