@font-face {
    font-family: 'voyagebold';
    src: url('fonts/voyage-bold-webfont.woff2') format('woff2'),
         url('fonts/voyage-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'opensansbold';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Light.woff2') format('woff2'),
        url('OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'opensanssemibold';
    src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'),
        url('fonts/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'opensansitalic';
    src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
        url('fonts/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Medium.woff2') format('woff2'),
        url('OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'opensansregular';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, body {
	font-family: opensansregular, opensanssemibold, opensansitalic, opensansbold, voyagebold, sans-serif;
	font-size: 16px; /* unité de base du rem */
}
body {
/*	background-color:grey;*/
	color:black;
	margin: 0vw; padding: 0px;
    width:100%; height:100%;
    overflow-x: hidden; /* pas de barre de scroll horizontal */

}

a { color:black; text-decoration: none; }
a:hover { opacity: 0.5; cursor: pointer;}

h1 {
	font-family: voyagebold;
	font-size: 65pt;
	margin: 0;
	color: #521009;
}

h2 { font-size: 20pt;
	font-family: opensansitalic;
	font-weight: normal;
	margin: 0;
	margin-top: -15px;
	color: #521009;
}

h3 { font-size: 16.5pt;
font-weight: normal;
line-height: 22pt;
color: #521009;}

p { color: #521009;
font-size: 11.5pt;
line-height: 15,5pt;
font-family: opensansregular;}

b {font-family: opensanssemibold; color: #521009;}

h1:hover, h2:hover, h3:hover, p:hover, b:hover, i:hover {cursor: default;}

*, *:before, *:after {/* TOUS les éléments de la page... */
    box-sizing: border-box; /* règle les ennuis de padding */
    outline:none; /* pas de cadre de sélection */
    scroll-behavior: smooth;
}

.clear { clear:both; } 

header {
	background-color: #b33d37;
	z-index: 10;
	display: inline-flex;
	width: 100vw;
	height: 70px;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 30px;
	position: fixed;
	align-items: center;
	color: white;
}

#logo_menu {object-fit: contain;
	display: inline-flex;
	align-items: center;
	gap: 15px;
	}

#logo_menu:hover, 
#logo_menu p:hover,
#logo_menu img:hover  {cursor: pointer;}

#logo_menu p {	color: white;
	font-family: voyage;
	font-size: 32pt;
	margin-top: 35px;}

#logo_menu img {height: 60px; width: 60px; margin-left: 0px;}

ul {
	display: inline-flex; gap: 25px;
	justify-content: space-between;
	width: 45vw;
	font-family: opensansregular;
	font-size: 16pt;
	margin-bottom: 25px;
}

.menu_icon {display: none;}

ul a {color: white;}

main {width: 100vw;
	min-height: 100vh;
	background-color: #802920; position: absolute; z-index: -2;}

@media screen and (max-width:1000px) {
	*, *:before, *:after {overflow-x:hidden;}
	h1 {font-size: 46pt;}
	h2 {font-size: 16pt; line-height: 24pt;}
	h3 {font-size: 14pt; line-height: 18pt;}
	header {padding-left : 10px;  padding-right: 10px;}
	#logo_menu p {display:none;}
	.menu_icon {display: flex; height: 60px; position: fixed; right: -20px;
		object-fit: contain;}
	.dropdown-menu {
	 background-color: #b33d37;
 	 display: flex;
 	 flex-direction: column;
 	 position: fixed;
 	 min-height: 100px;
 	 width: 180px;
 	 right: 0px;
 	 top: 48px;
 	 z-index: 10;
 	 padding: 20px;
 	 display: none;
		}
}


/*___________________________________________________MANDALAS*/


#mandalas {mix-blend-mode: multiply; width: 100vw; ;
	position: absolute; z-index: -1;}

.m {position:absolute;transform: rotate(0deg); /* Centre l'image */
  transition: transform 0.1s linear;}

#m1 {position: absolute; top: -100px; left: -130px; width: 550px;}
#m2 {position: absolute; top: 150px; right: -190px;}
#m3 {position: absolute; top: 400px; left: -100px; width: 300px;}
#m4 {position: absolute; top: 750px; right: 120px; width: 300px;}
#m5 {position: absolute; top: 800px; left: 100px;}
#m6 {position: absolute; top: 1010px; right: 20px; width: 500px;}
#m7 {position: absolute; top: 1400px; left: -100px; width: 400px;}
#m8 {position: absolute; top: 1600px; left: 130px; width: 500px;}
#m9 {position: absolute; top: 1920px; left: -80px; width: 300px;}
#m10 {position: absolute; top: 1800px; right: -100px;}
#m11 {position: absolute; top: 2200px; left: 150px; width: 500px;}
#m12 {position: absolute; top: 2500px; right: -250px; width:500px;}
#m13 {position: absolute; top: 2800px; left: 20px; width: 300px;}
#m14 {position: absolute; top: 3000px; right: 100px; width: 400px;}
#m15 {position: absolute; top: 3300px; left: -100px; width: 400px;}
#m16 {position: absolute; top: 3300px; right: 20px; width: 250px;}
#m17 {position: absolute; top: 3700px; right: 140px; width: 400px;}
#m18 {position: absolute; top: 3650px; left: 200px; width: 400px;}


/*___________________________________________________ACCUEIL*/

#accueil {width: 100vw; z-index: 3;
	height: 550px;
	background-color: #521009;
	display: flex; justify-content: center;}

#titre_big {margin: auto; width: 70vw; padding-top: 70px;}

#titre_small {display: none;}

#content {width: 1200px;
	min-height: 100vh;
	z-index: 2;
	background-color: #f7d6d2;
	margin: auto;
	padding-bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0px;
	padding-bottom: 0px;}

#intro {
	z-index: 2;
	text-align: center;
	margin: 0px;
	height: 300px;
	width: 50%;
	display: flex;
	align-items: center;
	margin-top: 30px;
}

#video {height: 700px;
	display: flex;
	align-items: center;}


@media screen and (max-width:1000px) {
	#accueil {height: 300px;}
	#titre_big {display: none;}
	#titre_small {display: flex; width: 90vw; margin-top: 70px;}
	#content {width: 100vw;}
	#intro {min-width: 80vw; height: 300px; margin-top: 10px;}
	#video {width: 100vw; object-fit:contain; height: 300px;}
	#video iframe {width: 100vw; height: 300px;}
}

/*___________________________________________________PRESENTATION*/

#presentation, #cours, #contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;}

#presentation, #contact {background-color:rgba(159,61,55,0.2); padding-bottom: 50px;}
#contact {padding-bottom: 150px;}


.gradient_1 {background: linear-gradient(#f7d6d2,#b33d37);
	width: 100%;
	height: 150px;
	opacity: 0.2;}

.gradient_2 {background: linear-gradient(#b33d37,#f7d6d2);
	width: 100%;
	height: 150px;
	opacity: 0.2;}

#presentation h1, #cours h1, #contact h1 {padding-top: 80px;}
#presentation h2, #cours h2, #contact h2 {padding-bottom: 40px;}

.text_content {margin-top: 100px;
	display: inline-flex;
	gap: 40px;}

#presentation_img {width: 250px; height: 400px; object-fit: cover; opacity:0.8;}

#presentation_text {column-count: 2; margin: 0;
	width: 550px;}

@media screen and (max-width:1000px) {
	#gradient_1, #gradient_2 { height: 70px, }
	.text_content {display: flex; gap : 20px; margin-top: 20px;
		flex-direction: column; align-items: center;}
	#presentation_img {width: 45vw; height: 300px;}
	#presentation_text {column-count: 1; width: 90vw; margin: 20px; margin-top: 0px;}
	#presentation h1, #cours h1, #contact h1 {padding-top: 00px;}
}


/*___________________________________________________COURS*/


#cours_tableau {margin-top: 70px; display: inline-flex; gap: 40px; 
		align-items: center; justify-content: center;}

table {
    border-collapse: collapse;
    font-size: 13pt;
    line-height: 16pt;
}

td {
	text-align: left;
	vertical-align: top;
    border: 1px solid black;
    padding: 10px;
}

.hatha {background-color: #f0aa7d;}
.meditation {background-color: #faf2ed;}
.nidra {background-color: #e87474;}


#tarifs p {	font-size: 14pt; line-height: 14pt;}

.cours_desc {font-size: 11.5pt; line-height: 15pt;
	max-width: 550px; color: #521009; margin-top: -10px;}

@media screen and (max-width:1000px) {
	#cours_tableau {flex-direction: column; margin-top: 20px;}
	.cours_desc {width: 90vw;}
}


/*___________________________________________________CONTACT*/


#map {z-index: 3; 
	display: inline-flex;
	gap: 20px;
	margin-top: 80px;}

#map iframe {object-fit: cover; width: 500px;}


#infos_contact b:hover {cursor: default;}
#infos_contact b{font-size: 14pt; line-height: 20pt;}
#infos_contact b img {height: 40px; margin: 10px; margin-bottom: -13px; z-index: 5; position:relative;}

@media screen and (max-width:1000px) {
	#map {flex-direction: column; margin-top: 20px;}
	#map iframe {width: 90vw; height: 300px;}
}

/*___________________________________________________FOOTER*/


footer {height: 40px;
	background-color: #521009;
	z-index: 4;
	display: inline-flex;
	width: 100vw;
	justify-content: center;
	gap: 30px;}

footer a {
	margin-top: auto;
	margin-bottom: auto;
	color: white;
	opacity: 0.5;
}

/*___________________________________________________MENTIONS LEGALES*/


#mentions_legales {
	min-height: 80vh;
	margin-top: 100px;
	margin-bottom: 200px;
	padding: 70px;
}

#mentions_legales p {
	width: 600px;
}

@media screen and (max-width:1000px) {
	#mentions_legales p {width: 80vw;}
}